@extends('user.user_dashboard')
@section('home')


 

<!-- ================================
    START BREADCRUMB AREA
================================= -->

<section class="mobile-breadcrumb-light">

    <div class="container">

        <div class="d-flex align-items-center py-2">

            <!-- Back Button -->
            <a href="{{ route('dashboard') }}" class="btn btn-outline-dark btn-sm rounded-circle me-3">
                <i class="la la-arrow-left"></i>
            </a>

            <!-- Page Title -->
            <div>
                <h6 class="mb-0 fw-semibold text-dark">
                   Purchase Book 
                </h6>
                <small class="text-muted">
                    <a href="{{ route('dashboard') }}" class="text-muted text-decoration-none"> Dashboard </a> /  Purchase Enhanced Study
                </small>
            </div>

        </div>

    </div>

</section>
<!-- ================================
   END BREADCRUMB AREA
================================= -->




<!-- ================================
       START CONTACT AREA
================================= -->
<section class="cart-area mt-1">
    
    <div class="container">
       

        <form method="POST" action="{{ route('purchase.initialize') }}" enctype="multipart/form-data">
         @csrf

         <div class="form-body mt-1">                     
            <div class="row">

            <div class="col-lg-7">


                <div class="card card-item">
                    <div class="card-body">

                        <h3 class="card-title fs-22 pb-3">Select Payment Method</h3>
                        
                        <div class="divider"><span></span></div>

                        <div class="payment-option-wrap">


                            <div class="payment-tab is-active">
                                <div class="payment-tab-toggle">
                                    <input checked="" id="espees" name="payment_method" type="radio" value="espees">
                                    <label for="espees"> Pay With Espees </label>
                                    <img class="payment-logo" src="images/payment-img.png" alt="">
                                </div>
                                
                                <div class="payment-tab-content fw-light">

                                    Payment Gateway for Espees Payment
                                  
                                </div>
                            </div><!-- end payment-tab -->



                            <div class="payment-tab">
                                <div class="payment-tab-toggle">
                                    <input id="stripe" name="payment_method" type="radio" value="stripe">
                                    <label for="stripe"> Credit / Debit Card - USD </label>
                                    <img class="payment-logo" src="images/paypal.png" alt="">
                                </div>

                                <div class="payment-tab-content fw-light">

                                    Payment Gateway for USD Payment

                                </div>
                            </div><!-- end payment-tab -->



                        </div>
                    </div><!-- end card-body -->
                </div><!-- end card -->


                <div class="card card-item">
                    <div class="card-body">

                        <h3 class="card-title fs-22 pb-3">Billing Details</h3>
                        <div class="divider"><span></span></div>

                      

                            <div class="input-box col-lg-12">
                                <label class="label-text">Full Name</label>
                                <div class="form-group">
                                    <input class="form-control form--control" type="text" name="name" placeholder="fullname" value="{{ $userData->firstname . ' ' . $userData->surname }}" >
                                    <span class="la la-user input-icon"></span>
                                </div>
                            </div><!-- end input-box -->

                           


                            <div class="input-box col-lg-12">
                                <label class="label-text">Email Address</label>
                                <div class="form-group">
                                    <input class="form-control form--control" type="email" name="email" placeholder="email" value="{{ $userData->email }}" >
                                    <span class="la la-envelope input-icon"></span>
                                </div>
                            </div><!-- end input-box -->

                            <div class="input-box col-lg-12">
                                <label class="label-text">Phone Number</label>
                                <div class="form-group">
                                    <input id="phone" class="form-control form--control" type="tel" name="phone_number" value="{{ $userData->phone_number }}" >
                                    <span class="la la-phone input-icon"></span>
                                </div>
                            </div><!-- end input-box -->

                           
                    </div><!-- end card-body -->
                </div><!-- end card -->


            </div><!-- end col-lg-7 -->



            <div class="col-lg-5">
                <div class="card card-item">

                    <div class="card-body">

                        <h3 class="card-title fs-22 pb-3"> Product Details</h3>
                        
                        <div class="divider"><span></span></div>
                        
                        <div class="order-details-lists">
 
                            <div class="media media-card border-bottom border-bottom-gray pb-3 mb-3">
                                
                                <div class="media-body">
                                    <h5 class="fs-15 pb-2"> {{ $product->product_name  }} </h5>
                                    <p class="text-black font-weight-semi-bold lh-18">  {{ $product->discount_price_esp ? $product->discount_price_esp : $product->selling_price_esp   }} Espees   |   {{ $product->discount_price_usd ? $product->discount_price_usd : $product->selling_price_usd }}  USD  {{-- |  NGN  {{ $product->discount_price_ngn ? $product->discount_price_ngn : $product->selling_price_ngn  }} --}}  </p>
                                </div>

                            </div><!-- end media -->

                            
                        </div><!-- end order-details-lists -->
                       
                    </div><!-- end card-body -->

                </div><!-- end card -->



                <!-- Apply Coupon -->
                {{--  
                        <div class="d-flex flex-wrap align-items-center justify-content-between  pb-3">
                            <div class="input-group mb-2">
                                <input class="form-control form--control pl-3" type="text" id="coupon_name" placeholder="Coupon code">
                                <div class="input-group-append">
                                    <button class="btn theme-btn" type="button" onclick="applyCouponPurchase()">Apply Coupon Code</button>
                                </div>
                            </div>
                        </div>
                --}}
               <!-- Apply Coupon End -->
        

                 


                <div class="card card-item">
                    <div class="card-body">

                        <h3 class="card-title fs-22 pb-3">Payment Summary</h3>

                        <div class="divider"><span></span></div>

                       


                        <ul class="generic-list-item generic-list-item-flash fs-15" id="price-display">
                            
                            <li class="d-flex align-items-center justify-content-between font-weight-semi-bold">
                                <span class="text-black">Original price:</span>
                                <span id="price-amount">  {{ $product->discount_price_esp ? $product->discount_price_esp : $product->selling_price_esp  }} Espees </span>
                            
                            </li>


                            <li id="discount-row" style="display:none;" class="d-flex align-items-center justify-content-between font-weight-semi-bold text-success">
                                        <span>Discount:</span>
                                        <span id="discount-amount"></span>
                            </li>

                           

                            <li class="d-flex align-items-center justify-content-between font-weight-bold">
                                <span class="text-black">Total:</span>
                                <span id="price-total"> {{ $product->discount_price_esp ? $product->discount_price_esp : $product->selling_price_esp  }} Espees </span>

                               
                            </li>
                        </ul>
                        
                        <div class="btn-box border-top border-top-gray pt-3">


                            <input type="hidden" name="amount_ngn"  value="{{ $product->discount_price_ngn ? $product->discount_price_ngn : $product->selling_price_ngn  }}">
                            <input type="hidden" name="amount_esp"  value="{{ $product->discount_price_esp ? $product->discount_price_esp : $product->selling_price_esp  }}">
                            <input type="hidden" name="amount_usd"  value="{{ $product->discount_price_usd ? $product->discount_price_usd : $product->selling_price_usd  }}">
                            <input type="hidden" name="narration"  value="Enhanced Study Purchase - {{ $product->product_name }}">
                           
                            <input type="hidden" name="product_name"  value="{{ $product->product_name }}">
                            <input type="hidden" name="product_id"  value="{{ $product->id }}">


                            
                            <!-- ✅ CHANGED: Hidden coupon field now has no value initially -->
                            <input type="hidden" name="coupon_name" id="hidden_coupon_name" value="">
                           

                            <input type="submit" class="btn theme-btn w-100" value="Proceed"> 
                        
                        </div>

                    </div><!-- end card-body -->
                </div><!-- end card -->
            </div><!-- end col-lg-5 -->


           </div><!-- end row -->
        </div>

           </form>


           <div class="section-block"></div>

       
    </div><!-- end container -->
</section>
<!-- ================================
       END CONTACT AREA
================================= -->

<script>
    document.addEventListener('contextmenu', function(event) {
        event.preventDefault();
      
    });
</script>





<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>

<script>
    $(document).ready(function () {

       // Define the NGN and Espees and USD prices
        var ngnPrice = {{ $product->discount_price_ngn ? $product->discount_price_ngn : $product->selling_price_ngn }};
        var espeesPrice = {{ $product->discount_price_esp ? $product->discount_price_esp : $product->selling_price_esp   }};
        var usdPrice = {{ $product->discount_price_usd ? $product->discount_price_usd : $product->selling_price_usd }};

        $('input[name="payment_method"]').on('change', function () {
            updatePriceDisplay();
        });

        function updatePriceDisplay() {
            let method = $('input[name="payment_method"]:checked').val();
            let priceAmount = $('#price-amount');
            let priceTotal = $('#price-total');
            let discountRow = $('#discount-row');
            let discountAmount = $('#discount-amount');

            if (window.discountedValues) {
                if (method === 'stripe') {
                    let discount = (usdPrice - window.discountedValues.usd).toFixed(2);
                    let total = window.discountedValues.usd.toFixed(2);
                    priceAmount.text(usdPrice.toFixed(2) + ' USD');
                    priceTotal.text(total + ' USD');
                    discountRow.show();
                    discountAmount.text(discount + ' USD');
                    $('input[name="amount_usd"]').val(total); // ✅ UPDATED
                    
                } else if (method === 'espees') {
                    let discount = (espeesPrice - window.discountedValues.esp).toFixed(2);
                    let total = window.discountedValues.esp.toFixed(2);
                    priceAmount.text(espeesPrice.toFixed(2) + ' Espees');
                    priceTotal.text(total + ' Espees');
                    discountRow.show();
                    discountAmount.text(discount + ' Espees');
                    //$('#amount_esp').val(total);
                    $('input[name="amount_esp"]').val(total); // ✅ UPDATED
                } else if (method === 'card') {
                    let discount = (ngnPrice - window.discountedValues.ngn).toFixed(2);
                    let total = window.discountedValues.ngn.toFixed(2);
                    priceAmount.text('NGN ' + ngnPrice.toFixed(2));
                    priceTotal.text('NGN ' + total);
                    discountRow.show();
                    discountAmount.text('NGN ' + discount);
                    $('input[name="amount_ngn"]').val(total); // ✅ UPDATED
                }
            } else {
                discountRow.hide();
                if (method === 'stripe') {
                    priceAmount.text(usdPrice.toFixed(2) + ' USD');
                    priceTotal.text(usdPrice.toFixed(2) + ' USD');
                    $('input[name="amount_usd"]').val(usdPrice.toFixed(2)); // ✅ UPDATED

                } else if (method === 'espees') {
                    priceAmount.text(espeesPrice.toFixed(2) + ' Espees');
                    priceTotal.text(espeesPrice.toFixed(2) + ' Espees');
                    $('input[name="amount_esp"]').val(espeesPrice.toFixed(2)); // ✅ UPDATED
                    
                } else if (method === 'card') {
                    priceAmount.text('NGN ' + ngnPrice.toFixed(2));
                    priceTotal.text('NGN ' + ngnPrice.toFixed(2));
                    $('input[name="amount_ngn"]').val(ngnPrice.toFixed(2)); // ✅ UPDATED
                }
            }
        }

        window.applyCouponPurchase = function () {
            var coupon_name = $('#coupon_name').val();

            $.ajax({
                type: "POST",
                dataType: 'json',
                url: "/coupon-apply/purchase",
                data: {
                    _token: '{{ csrf_token() }}',
                    coupon_name: coupon_name,
                    amount_esp: espeesPrice,
                    amount_usd: usdPrice,
                    amount_ngn: ngnPrice
                },
                success: function (data) {
                    const Toast = Swal.mixin({
                        toast: true,
                        position: 'top-end',
                        showConfirmButton: false,
                        timer: 3000
                    });

                    if (!data.error) {
                        Toast.fire({ icon: 'success', title: data.success });
                        window.discountedValues = data.discounted;
                        $('input[name="payment_method"]:checked').trigger('change');

                        
                         // ✅ UPDATED: Directly update existing hidden input value
                         // $('#hidden_coupon_name').val(coupon_name); // ✅ UPDATED
                         

                    } else {
                        Toast.fire({ icon: 'error', title: data.error });
                    }
                }
            });
        }


        // ✅ NEW: Only set hidden coupon when the form is submitted AND the discount-row is visible (coupon still applied)
        $('form').on('submit', function () {
            if ($('#discount-row').is(':visible')) {
                // discount row visible => coupon is currently applied client-side
                $('#hidden_coupon_name').val($('#coupon_name').val());
            } else {
                // no active coupon => ensure hidden field is empty
                $('#hidden_coupon_name').val('');
            }
        });


       






    });
</script>

 





@endsection