@extends('frontend.layouts.UserMain')

<title>{{ translate('Humsafar - Dashboard') }}</title>

@section('content')

<section class="flex-1 w-full relative">
    <div class="flex items-start w-full">
        <div class="flex-1 bg-white">
            @include('frontend.user.layouts.header')

            <div class="w-full px-6 pt-[90px] pb-[60px]">
                <h3 class="text-[24px] sm:text-2xl lg:text-3xl font-bold mb-6 text-gray-800">{{ translate('Choose a Payment Method') }}</h3>

                <div style="margin-top:10px" class="flex flex-col md:flex-row items-start md:items-center gap-4 mb-6">
                    <!-- Payment Method Options -->
                    @if($payment_method->payment_method_stripe_status == 1)
                    <label class="flex items-center cursor-pointer p-4 border rounded-lg border-gray-300 shadow-sm bg-white hover:bg-blue-50 transition-colors duration-200 peer-checked:border-blue-500 peer-checked:bg-blue-100 w-full md:w-1/2">
                        <input type="radio" id="stripe" name="payment_method" value="stripe" checked class="hidden peer" />
                        <span class="text-lg font-semibold text-gray-700 mr-2">{{ translate('Stripe') }}</span>
                    </label>
                    @endif

                    @if($payment_method->payment_method_mollie_status == 1)
                    <label class="flex items-center cursor-pointer p-4 border rounded-lg border-gray-300 shadow-sm bg-white hover:bg-blue-50 transition-colors duration-200 peer-checked:border-blue-500 peer-checked:bg-blue-100 w-full md:w-1/2">
                        <input type="radio" id="mollie" name="payment_method" value="mollie" class="hidden peer" @if($payment_method->payment_method_stripe_status == 0) checked @endif />
                        <span class="text-lg font-semibold text-gray-700 mr-2">Mollie</span>
                    </label>
                    @endif
                </div>

                <!-- Payment Forms -->
                <div id="payment-methods">
                    <!-- Stripe Payment Layout -->
                    @if($payment_method->payment_method_stripe_status == 1)
                    <div id="stripe-layout" class="payment-layout p-6 bg-white rounded-lg shadow-lg mb-4 hidden">
                        <h4 class="text-lg font-bold text-gray-800 mb-3">Stripe Payment</h4>
                        <p class="text-sm text-gray-600 mb-6">Enter your card details below to complete the payment.</p>
                        <form action="{{ route('payment.create') }}" method="POST" id="payment-form">
                            @csrf
                            <input type="hidden" name="price" value="{{ $package->price }}">
                            <input type="hidden" name="payment_method" value="{{ $package->id }}">

                            <div class="mb-4">
                                <label for="card-number" class="block text-sm font-medium text-gray-600">Card Number</label>
                                <input type="number" id="card-number" name="card_number" class="border rounded-lg w-full p-3 @error('card_number') border-red-500 @enderror" required />
                                @error('card_number')
                                    <span class="text-red-500 text-sm">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="grid grid-cols-2 gap-4">
                                <div class="mb-4">

                                    <label for="card-number" class="block text-sm font-medium text-gray-600">{{ translate('Card Number') }}</label>
                                    <input type="number" id="card-number" name="card_number" class="border rounded-lg w-full p-3 @error('card_number') border-red-500 @enderror" required />
                                    @error('card_number')
                                        <span class="text-red-500 text-sm">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="grid grid-cols-2 gap-4">
                                    <div class="mb-4">
                                        <label for="expiry-date" class="block text-sm font-medium text-gray-600">{{ translate('Expiry Date') }} (MM/YY)</label>
                                        <input type="text" id="expiry-date" name="expiry_date" class="border rounded-lg w-full p-3 @error('expiry_date') border-red-500 @enderror" required />
                                        @error('expiry_date')
                                            <span class="text-red-500 text-sm">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="mb-4">
                                        <label for="cvc" class="block text-sm font-medium text-gray-600">{{ translate('CVC') }}</label>
                                        <input type="number" id="cvc" name="cvc" class="border rounded-lg w-full p-3 @error('cvc') border-red-500 @enderror" required />
                                        @error('cvc')
                                            <span class="text-red-500 text-sm">{{ $message }}</span>
                                        @enderror
                                    </div>

                                </div>
                            </div>


                            <button style="background-color: #007aff;" type="submit" id="payment-button" class="mt-4 bg-blue-600 text-white py-3 px-6 rounded-lg w-full font-semibold hover:bg-blue-700 transition duration-200">Pay ({{ formatCurrency($package->price, $currency) }}) with Stripe</button>


                        </form>
                    </div>
                    @endif

                    <!-- Mollie Payment Layout -->
                    @if($payment_method->payment_method_mollie_status == 1)
                    <div id="mollie-layout" class="payment-layout p-6 bg-white rounded-lg shadow-lg hidden">
                        <h4 class="text-lg font-bold text-gray-800 mb-3">{{ translate('Mollie Payment') }}</h4>
                        <p class="text-sm text-gray-600 mb-6">{{ translate('Choose your preferred payment method from the options below.') }}</p>

                        <form action="{{ route('mollie.payment.create') }}" method="POST">
                            @csrf
                            <input type="hidden" name="price" value="{{ $package->price }}">
                            <input type="hidden" name="payment_method" value="{{ $package->id }}">

                            <div class="mb-4">
                                <label for="mollie-method" class="block text-sm font-medium text-gray-600 mb-2">{{ translate('Select Payment Method') }}</label>
                                <select id="mollie-method" name="mollie_method" class="border rounded-lg w-full p-3 bg-gray-100 focus:bg-white focus:border-blue-500 transition duration-200" required>
                                    <option value="creditcard">{{ translate('Credit Card') }}</option>
                                    <option value="ideal">{{ translate('iDEAL') }}</option>
                                    <option value="paypal">{{ translate('PayPal') }}</option>
                                    <!-- Additional methods as needed -->
                                </select>
                            </div>

                            <div class="flex items-center justify-between mb-6">
                                <span class="text-sm text-gray-500">Total Amount:</span>
                            
                                <span class="text-lg font-bold text-gray-800">{{formatCurrency($package->price, $currency) }}</span>
                               

                            </div>
                            <button style="background-color: #007aff;" type="submit" id="payment-button" class="mt-4 bg-blue-600 text-white py-3 px-6 rounded-lg w-full font-semibold hover:bg-blue-700 transition duration-200">Pay with Mollie</button>

                            <div class="mt-4 text-sm text-gray-500">
                                <p>{{ translate('By clicking "Pay with Mollie", you agree to our') }}
                                    <a href="#" class="text-blue-600 underline">{{ translate('Terms of Service') }}</a>
                                    {{ translate('and') }}
                                    <a href="#" class="text-blue-600 underline">{{ translate('Privacy Policy') }}</a>.
                                </p>

                                {{-- <p>By clicking "Pay with Mollie", you agree to our <a href="#" class="text-blue-600 underline">Terms of Service</a> and <a href="#" class="text-blue-600 underline">Privacy Policy</a>.</p> --}}
                            </div>
                        </form>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</section>

@endsection

@push('scripts')

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.getElementById('payment-form');
        const button = document.getElementById('payment-button');

        // Elements to validate
        const cardNumberInput = document.getElementById('card-number');
        const expiryDateInput = document.getElementById('expiry-date');
        const cvcInput = document.getElementById('cvc');

        // Utility functions for validation
        function isCardNumberValid(number) {
            return /^\d{16}$/.test(number); // Check for a 16-digit number
        }

        function isExpiryDateValid(date) {
            return /^(0[1-9]|1[0-2])\/\d{2}$/.test(date); // MM/YY format
        }

        function isCvcValid(cvc) {
            return /^\d{3}$/.test(cvc); // Check for a 3-digit number
        }

        // Event listener for input validation
        form.addEventListener('input', function() {
            let isValid = true;

            if (!isCardNumberValid(cardNumberInput.value)) {
                isValid = false;
                cardNumberInput.classList.add('border-red-500');
            } else {
                cardNumberInput.classList.remove('border-red-500');
            }

            if (!isExpiryDateValid(expiryDateInput.value)) {
                isValid = false;
                expiryDateInput.classList.add('border-red-500');
            } else {
                expiryDateInput.classList.remove('border-red-500');
            }

            if (!isCvcValid(cvcInput.value)) {
                isValid = false;
                cvcInput.classList.add('border-red-500');
            } else {
                cvcInput.classList.remove('border-red-500');
            }

            // Enable or disable the submit button based on validation
            button.disabled = !isValid;
        });
    });
</script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const stripeLayout = document.getElementById('stripe-layout');
        const mollieLayout = document.getElementById('mollie-layout');
        const stripeRadio = document.getElementById('stripe');
        const mollieRadio = document.getElementById('mollie');

        // Function to toggle payment layouts
        function togglePaymentLayouts() {
            if (stripeRadio && stripeRadio.checked) {
                stripeLayout.classList.remove('hidden');
                mollieLayout.classList.add('hidden');
            } else if (mollieRadio && mollieRadio.checked) {
                stripeLayout.classList.add('hidden');
                mollieLayout.classList.remove('hidden');
            }
        }

        // Add event listeners to radio buttons if they exist
        if (stripeRadio) {
            stripeRadio.addEventListener('change', togglePaymentLayouts);
        }
        if (mollieRadio) {
            mollieRadio.addEventListener('change', togglePaymentLayouts);
        }

        // Initial toggle based on the default checked radio button
        togglePaymentLayouts();
    });
</script>

@endpush