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

<!-- ================================
    START BREADCRUMB AREA
================================= -->
<section class="breadcrumb-area section-padding img-bg-2">
    <div class="overlay"></div>
    <div class="container">
        <div class="breadcrumb-content d-flex flex-wrap align-items-center justify-content-between">
            <div class="section-heading">
                <h2 class="section__title text-white">
                    <a href="{{ route('dashboard_subscription') }}">
                        <i class="la la-chevron-left icon text-white"></i>
                    </a> Checkout
                </h2>
            </div>
            <ul class="generic-list-item generic-list-item-white generic-list-item-arrow d-flex flex-wrap align-items-center">
                <li><a href="{{ route('dashboard') }}">Dashboard</a></li>
                <li><a href="{{ route('dashboard_subscription') }}">Subscription</a></li>
                <li>Checkout</li>
            </ul>
        </div>
    </div>
</section>
<!-- ================================
    END BREADCRUMB AREA
================================= -->


<!-- ================================
       START PAYMENT AREA
================================= -->

<section class="cart-area section--padding">
    <div class="container">

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

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

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

                        <!-- Payment Method Section -->
                        <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>


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

                                        <div class="payment-tab-content fw-light">
                                            Select preferred payment currency below
                                            
                                            <!-- ✅ Updated: Currency Selector Dropdown -->
                                            <div class="input-box col-lg-12">
                                                <label class="label-text">Preferred Currency</label>
                                                <div class="form-group">
                                                   
                                                    <!-- <span class="la la-angle-down input-icon"></span> -->

                                                    <select class="form-select form--control" name="selected_currency" id="selected_currency">  
                                                        <option value="usd" selected>USD - US Dollar</option>
                                                        <option value="eur">EUR - Euro</option>
                                                        <option value="gbp">GBP - British Pound</option>
                                                        <option value="cad">CAD - Canadian Dollar</option>
                                                        <option value="zar">ZAR - South African Rand</option>
                                                        <option value="ngn">NGN - Nigerian Naira</option>  <!-- ✅ Added -->
                                                         
                                                    </select>

                                                  

                                                </div>
                                            </div>
                                            <!-- ✅ End Currency Selector -->
                                        </div>

                                    </div>



                                    
                           
                        
                        

                                </div>
                            </div>
                        </div>

                        <!-- Billing Details -->
                        <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>

                                <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>

                                <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>
                            </div>
                        </div>
                    </div>

                    <!-- RIGHT COLUMN -->
                    <div class="col-lg-5">
                        <!-- Subscription Details -->
                        <div class="card card-item">
                            <div class="card-body">

                                <h3 class="card-title fs-22 pb-3">Subscription 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">{{ $package->package_name }}</h5>
                                            <p class="text-black font-weight-semi-bold lh-18">
                                                <span id="esp-price-text">{{ $package->amount_esp }} Espees</span> 
                                                <span id="usd-price-text">{{ $package->amount_usd }} USD</span>
                                            </p>
                                        </div> <!-- end media  body-->

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

                            </div>
                        </div>

                        <!-- 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="applyCoupon()">Apply Coupon Code</button>
                                </div>
                            </div>
                        </div>
                        <!-- Apply Coupon End -->


                        <!-- Payment Summary -->
                        <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">  {{ $package->amount_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">  {{ $package->amount_esp }} Espees</span>
                                    </li>
                    
                                </ul>

                                <div class="btn-box border-top border-top-gray pt-3">
                                    <!-- Hidden Inputs -->
                                    <input type="hidden" name="amount_esp" id="amount_esp" value="{{ $package->amount_esp }}">


                                    <input type="hidden" name="amount_usd" id="amount_usd" value="{{ $package->amount_usd }}">

                                    
                                    <input type="hidden" name="narration" value="E-library - {{ $package->package_name }}">
                                    <input type="hidden" name="package_name" value="{{ $package->package_name }}">
                                    <input type="hidden" name="package_shortname" value="{{ $package->package_shortname }}">
                                    <input type="hidden" name="level_id" value="{{ $package->level_id }}">
                                    <input type="hidden" name="package_duration" value="{{ $package->package_duration }}">
                                    
                                    <!-- ✅ Add this inside the <form> tag -->
                                    <!-- <input type="hidden" name="coupon_name" id="hidden_coupon_name"> -->
                                    
                                    <!-- ✅ 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 -->
                </div> <!-- end row -->
            </div>
        </form>

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

    </div>
</section>




<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 () {
    const exchangeRates = {
        //usd: 1,
        //eur: 0.86,
        //gbp: 0.74,
        //cad: 1.37,
        //zar: 17.3,
        //ngn: 1500

        usd: 1,
        eur: 0.92,
        gbp: 0.8,
        cad: 1.36,
        zar: 18.4,
        ngn: 1640
    };

    const originalUsdPrice = {{ $package->amount_usd }};
    const originalEspPrice = {{ $package->amount_esp }};
    const originalNgnPrice = {{ $package->amount_ngn }};

    let selectedCurrency = 'usd';

    let discountedUsdPrice = null;
    let discountedEspPrice = null;
    let discountedNgnPrice = null;
    let discountUsdAmount = null;


    function updatePriceDisplay() {
        const paymentMethod = $('input[name="payment_method"]:checked').val();
        selectedCurrency = $('#selected_currency').val();

        // Always use original prices for #price-amount
        let usdOriginalToShow = originalUsdPrice;
        let espOriginalToShow = originalEspPrice;

        // For #price-total (final payment)
        let usdFinalToUse = discountedUsdPrice ?? originalUsdPrice;
        let espFinalToUse = discountedEspPrice ?? originalEspPrice;

        if (paymentMethod === 'espees') {
            // Show original price (unchanged) in #price-amount
            $('#price-amount').text(`${espOriginalToShow} Espees`);

            // Show discounted (or same) total in #price-total
            $('#price-total').text(`${espFinalToUse} Espees`);

            $('#esp-price-text').show();
            $('#usd-price-text').hide();

            if (discountedEspPrice !== null) {
                const espDiscount = (originalEspPrice - espFinalToUse).toFixed(2);
                $('#discount-row').show();
                $('#discount-amount').text(`-${espDiscount} Espees`);
            } else {
                $('#discount-row').hide();
            }

            // Send final amount to backend
            $('#amount_esp').val(espFinalToUse);

        } else {
            const rate = exchangeRates[selectedCurrency] || 1;
            const currencyLabel = selectedCurrency.toUpperCase();

            // Original price display
            const originalConverted = (usdOriginalToShow * rate).toFixed(2);
            $('#price-amount').text(`${originalConverted} ${currencyLabel}`);

            // Discounted final total
            const finalConverted = (usdFinalToUse * rate).toFixed(2);
            $('#price-total').text(`${finalConverted} ${currencyLabel}`);

            $('#esp-price-text').hide();
            $('#usd-price-text').show();

            // Store final total for payment submission
            $('#amount_usd').val(finalConverted);


            if (discountUsdAmount !== null) {
                const convertedDiscount = (discountUsdAmount * rate).toFixed(2);
                $('#discount-row').show();
                $('#discount-amount').text(`-${convertedDiscount} ${currencyLabel}`);
            } else {
                $('#discount-row').hide();
            }
        }
    }

    $('#selected_currency').on('change', updatePriceDisplay);
    $('input[name="payment_method"]').on('change', updatePriceDisplay);

    updatePriceDisplay();

    window.applyCoupon = function () {
        let coupon_name = $('#coupon_name').val();
        $.ajax({
            type: "POST",
            dataType: 'json',
            url: "/coupon-apply",
            data: {
                _token: '{{ csrf_token() }}',
                coupon_name,
                amount_esp: originalEspPrice,
                amount_usd: originalUsdPrice,
                amount_ngn: originalNgnPrice
            },
            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 });

                    if (data.discounted) {
                        discountedUsdPrice = parseFloat(data.discounted.usd);
                        discountedEspPrice = parseFloat(data.discounted.esp);
                        discountedNgnPrice = parseFloat(data.discounted.ngn);
                        discountUsdAmount = originalUsdPrice - discountedUsdPrice;
                    }

                    // ❌ REMOVED: $('#hidden_coupon_name').val(coupon_name);

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


    // ✅ NEW: Only set hidden coupon when discount is visible at checkout submission
    $('form').on('submit', function () {
        if ($('#discount-row').is(':visible')) {
            $('#hidden_coupon_name').val($('#coupon_name').val());
        } else {
            $('#hidden_coupon_name').val('');
        }
    });




});
</script>












@endsection