@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') }}"> <i
                                class="la la-chevron-left icon text-white"> </i> </a> Subscription </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> Gift Subscription </li>
                </ul>

            </div><!-- end breadcrumb-content -->

        </div><!-- end container -->
    </section><!-- end breadcrumb-area -->
    <!-- ================================
                                       END BREADCRUMB AREA
                                    ================================= -->




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

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

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

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



                            <!-- Recipient Details -->
                            <div class="card card-item">
                                <div class="card-body">
                                    <h3 class="card-title fs-22 pb-3">Recipient 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="{{ $beneficiarySurname . ' ' . $beneficiaryFirstname }}" readonly>
                                            <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="{{ $beneficiaryEmail }}" readonly>
                                            <span class="la la-envelope input-icon"></span>
                                        </div>
                                    </div>


                                    {{--
                                    <div class="hidden 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="{{ $beneficiaryPhoneNumber }}">
                                            <span class="la la-phone input-icon"></span>
                                        </div>
                                    </div>
                                   
                                    --}}

                                    <input id="id" type="hidden" name="ben_id" value="{{ $beneficiaryId }}">
                                    <input id="phone" type="hidden" name="phone_number"
                                        value="{{ $beneficiaryPhoneNumber }}">


                                </div>
                            </div>
                            <!-- End Recipient Details -->



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

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

                        </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="input-box col-lg-12">

                                        <h5 class="fs-15 pb-4 fw-bold"> Select Subscription Package </h5>

                                        <div class="form-group">

                                            <select class="form-select" id="inputPackage" name="package_id">


                                                @foreach ($packages as $package)
                                                    <option value="{{ $package->id }}"
                                                        data-amount-esp="{{ $package->amount_esp }}"
                                                        data-amount-usd="{{ $package->amount_usd }}"
                                                        data-package-name="{{ $package->package_name }}"
                                                        data-package-shortname="{{ $package->package_shortname }}"
                                                        data-level-id="{{ $package->level_id }}"
                                                        data-package-duration="{{ $package->package_duration }}">

                                                        {{ $package->package_name }}

                                                    </option>
                                                @endforeach

                                                @error('package_name')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                            </select>

                                        </div>

                                    </div>


                                </div>





                                <!-- 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 fields for package/payment data -->
                                            <input type="hidden" id="amount_esp" name="amount_esp">
                                            <input type="hidden" id="amount_usd" name="amount_usd">
                                            <input type="hidden" id="narration" name="narration">
                                            <input type="hidden" id="package_name" name="package_name">
                                            <input type="hidden" id="package_shortname" name="package_shortname">
                                            <input type="hidden" id="level_id" name="level_id">
                                            <input type="hidden" id="package_duration" name="package_duration">
                                            <!-- Hidden fields for package/payment data -->

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






    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const packageSelect = document.getElementById('inputPackage');
            const paymentMethodRadios = document.querySelectorAll('input[name="payment_method"]');
            const currencySelect = document.getElementById('selected_currency');

            const priceAmountEl = document.getElementById('price-amount');
            const priceTotalEl = document.getElementById('price-total');

            const exchangeRates = {
                usd: 1,
                eur: 0.86,
                gbp: 0.74,
                cad: 1.37,
                zar: 17.3,
                ngn: 1500
            };

            function getSelectedPackageData() {
                const selectedOption = packageSelect.options[packageSelect.selectedIndex];
                return {
                    amountEsp: parseFloat(selectedOption.dataset.amountEsp || 0),
                    amountUsd: parseFloat(selectedOption.dataset.amountUsd || 0),
                    packageName: selectedOption.dataset.packageName || '',
                    packageShortname: selectedOption.dataset.packageShortname || '',
                    levelId: selectedOption.dataset.levelId || '',
                    packageDuration: selectedOption.dataset.packageDuration || ''
                };
            }

            function updateHiddenFields() {
                const pkg = getSelectedPackageData();
                const selectedPaymentMethod = document.querySelector('input[name="payment_method"]:checked').value;
                const selectedCurrency = currencySelect.value;

                let finalAmount = pkg.amountEsp; // default
                let currencyCode = 'espees';

                if (selectedPaymentMethod === 'espees') {
                    finalAmount = pkg.amountEsp;
                    currencyCode = 'espees';
                } else if (selectedPaymentMethod === 'card') {
                    if (selectedCurrency === 'usd') {
                        finalAmount = pkg.amountUsd;
                        currencyCode = 'usd';
                    } else {
                        // ✅ NEW: Convert USD base price to selected currency
                        finalAmount = pkg.amountUsd * (exchangeRates[selectedCurrency] || 1);
                        currencyCode = selectedCurrency;
                    }
                }

                // ✅ UPDATED: set the converted amount instead of the base USD amount
                document.getElementById('amount_esp').value = pkg.amountEsp;
                document.getElementById('amount_usd').value = finalAmount.toFixed(2);

                document.getElementById('narration').value = "E-library - " + pkg.packageName;
                document.getElementById('package_name').value = pkg.packageName;
                document.getElementById('package_shortname').value = pkg.packageShortname;
                document.getElementById('level_id').value = pkg.levelId;
                document.getElementById('package_duration').value = pkg.packageDuration;

                // ✅ NEW: Include currency code as hidden field if not already in form
                if (!document.getElementById('currency_code')) {
                    const hiddenCurrency = document.createElement('input');
                    hiddenCurrency.type = 'hidden';
                    hiddenCurrency.name = 'currency_code';
                    hiddenCurrency.id = 'currency_code';
                    document.querySelector('form').appendChild(hiddenCurrency);
                }
                document.getElementById('currency_code').value = currencyCode.toUpperCase();
            }

            function updatePaymentSummary() {
                const pkg = getSelectedPackageData();
                const selectedPaymentMethod = document.querySelector('input[name="payment_method"]:checked').value;
                const selectedCurrency = currencySelect.value;

                let displayPrice = '';
                let currencyLabel = '';

                if (selectedPaymentMethod === 'espees') {
                    displayPrice = pkg.amountEsp.toFixed(2);
                    currencyLabel = 'Espees';
                } else if (selectedPaymentMethod === 'card') {
                    if (selectedCurrency === 'usd') {
                        displayPrice = pkg.amountUsd.toFixed(2);
                        currencyLabel = 'USD';
                    } else {
                        const converted = pkg.amountUsd * (exchangeRates[selectedCurrency] || 1);
                        displayPrice = converted.toFixed(2);
                        currencyLabel = selectedCurrency.toUpperCase();
                    }
                }

                priceAmountEl.textContent = `${displayPrice} ${currencyLabel}`;
                priceTotalEl.textContent = `${displayPrice} ${currencyLabel}`;

                updateHiddenFields(); // ✅ NEW: ensure hidden fields are updated whenever the summary changes
            }

            // Event Listeners
            packageSelect.addEventListener('change', function() {
                updateHiddenFields();
                updatePaymentSummary();
            });

            paymentMethodRadios.forEach(radio =>
                radio.addEventListener('change', updatePaymentSummary)
            );

            currencySelect.addEventListener('change', updatePaymentSummary);

            // Initial load
            updateHiddenFields();
            updatePaymentSummary();
        });
    </script>
@endsection