@extends('layouts.guest-landing') {{-- Use public layout --}}

@section('title', __('checkout.title'))

@push('styles')
    {{-- Basic styling for Stripe Element container --}}
    <style>
        #card-element {
            border: 1px solid #e2e8f0;
            /* gray-300 */
            padding: 0.75rem;
            /* p-3 */
            border-radius: 0.375rem;
            /* rounded-md */
            background-color: white;
        }

        #card-element:focus-within {
            border-color: #6366f1;
            /* indigo-500 */
            box-shadow: 0 0 0 1px #6366f1;
            /* ring-1 ring-indigo-500 */
        }

        /* Dark mode styles for Stripe Element */
        .dark #card-element {
            border-color: #4b5563;
            /* dark:border-gray-600 */
            background-color: #374151;
            /* dark:bg-gray-700 */
            color: #f3f4f6;
            /* dark:text-gray-100 */
        }

        .dark #card-element:focus-within {
            border-color: #818cf8;
            /* dark:focus:border-indigo-400 */
            box-shadow: 0 0 0 1px #818cf8;
        }

        /* Card error styling */
        #card-errors {
            color: #ef4444;
            /* red-500 */
            font-size: 0.75rem;
            /* text-xs */
            margin-top: 0.5rem;
            /* mt-2 */
        }
    </style>
@endpush

@section('content')
    <div class="bg-white dark:bg-gray-900 py-12">
        <div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">

            <form id="payment-form" action="{{ route('order.place') }}" method="POST" class="space-y-8">
                @csrf
                <input type="hidden" name="active_payment_gateway" value="{{ $activePaymentGateway ?? 'stripe' }}">

                {{-- 1. Contact & Billing Address Information Section --}}
                <div
                    class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm p-6 space-y-4">
                    <div class="flex justify-between items-center border-b border-gray-200 dark:border-gray-700 pb-3 mb-4">
                        <h2 class="text-lg font-medium text-gray-900 dark:text-white">
                            {{ __('checkout.contact_billing_title') }}</h2>
                        @guest
                            {{-- <a href="{{ route('login') }}"
                                class="text-sm font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300">
                                {{ __('checkout.already_have_account') }}
                            </a> --}}
                        @endguest
                        @auth
                            <span class="text-sm text-gray-500 dark:text-gray-400">{{ __('checkout.logged_in_as') }}
                                {{ auth()->user()->email }}</span>
                        @endauth
                    </div>

                    {{-- Email Input --}}
                    <div>
                        <label for="contact_email"
                            class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ __('checkout.email_address') }}
                            <span class="text-red-500">{{ __('checkout.required_field') }}</span></label>
                        <input type="email" name="contact_email" id="contact_email"
                            value="{{ old('contact_email', auth()->user()->email ?? '') }}" required autocomplete="email"
                            placeholder="you@example.com"
                            class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm @error('contact_email') border-red-500 ring-1 ring-red-500 @enderror">
                        @error('contact_email')
                            <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- First Name & Last Name --}}
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-4">
                        <div>
                            <label for="first_name"
                                class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ __('checkout.first_name') }}
                                <span class="text-red-500">{{ __('checkout.required_field') }}</span></label>
                            <input type="text" name="first_name" id="first_name"
                                value="{{ old('first_name', auth()->user()->first_name ?? '') }}" required
                                autocomplete="given-name"
                                class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm @error('first_name') border-red-500 ring-1 ring-red-500 @enderror">
                            @error('first_name')
                                <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                        <div>
                            <label for="last_name"
                                class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ __('checkout.last_name') }}
                                <span class="text-red-500">{{ __('checkout.required_field') }}</span></label>
                            <input type="text" name="last_name" id="last_name"
                                value="{{ old('last_name', auth()->user()->last_name ?? '') }}" required
                                autocomplete="family-name"
                                class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm @error('last_name') border-red-500 ring-1 ring-red-500 @enderror">
                            @error('last_name')
                                <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    {{-- Company (Optional) --}}
                    <div>
                        <label for="company"
                            class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ __('checkout.company_optional') }}</label>
                        <input type="text" name="company" id="company" value="{{ old('company') }}"
                            autocomplete="organization"
                            class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm @error('company') border-red-500 ring-1 ring-red-500 @enderror">
                        @error('company')
                            <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Billing Address Line 1 --}}
                    <div>
                        <label for="billing_address_line_1"
                            class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ __('checkout.billing_address') }}
                            <span class="text-red-500">{{ __('checkout.required_field') }}</span></label>
                        <input type="text" name="billing_address_line_1" id="billing_address_line_1"
                            value="{{ old('billing_address_line_1') }}" required autocomplete="address-line1"
                            placeholder="{{ __('checkout.street_address_placeholder') }}"
                            class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm @error('billing_address_line_1') border-red-500 ring-1 ring-red-500 @enderror">
                        @error('billing_address_line_1')
                            <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Billing Address Line 2 --}}
                    <div>
                        <label for="billing_address_line_2" class="sr-only">Address Line 2</label>
                        <input type="text" name="billing_address_line_2" id="billing_address_line_2"
                            value="{{ old('billing_address_line_2') }}" autocomplete="address-line2"
                            placeholder="{{ __('checkout.apartment_optional_placeholder') }}"
                            class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm @error('billing_address_line_2') border-red-500 ring-1 ring-red-500 @enderror">
                        @error('billing_address_line_2')
                            <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- City, State, Zip Row --}}
                    <div class="grid grid-cols-1 gap-x-4 gap-y-4 sm:grid-cols-6">
                        <div class="sm:col-span-2">
                            <label for="billing_city"
                                class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ __('checkout.city') }}
                                <span class="text-red-500">{{ __('checkout.required_field') }}</span></label>
                            <input type="text" name="billing_city" id="billing_city" value="{{ old('billing_city') }}"
                                required autocomplete="address-level2"
                                class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm @error('billing_city') border-red-500 ring-1 ring-red-500 @enderror">
                            @error('billing_city')
                                <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                        <div class="sm:col-span-2">
                            <label for="billing_state"
                                class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ __('checkout.state') }}
                                <span class="text-red-500">{{ __('checkout.required_field') }}</span></label>
                            <input type="text" name="billing_state" id="billing_state"
                                value="{{ old('billing_state') }}" required autocomplete="address-level1"
                                placeholder="{{ __('checkout.state_placeholder') }}"
                                class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm @error('billing_state') border-red-500 ring-1 ring-red-500 @enderror">
                            @error('billing_state')
                                <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                        <div class="sm:col-span-2">
                            <label for="billing_zip_code"
                                class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ __('checkout.zip_code') }}
                                <span class="text-red-500">{{ __('checkout.required_field') }}</span></label>
                            <input type="text" name="billing_zip_code" id="billing_zip_code"
                                value="{{ old('billing_zip_code') }}" required autocomplete="postal-code"
                                class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm @error('billing_zip_code') border-red-500 ring-1 ring-red-500 @enderror">
                            @error('billing_zip_code')
                                <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                    <input type="hidden" name="billing_country" value="US">

                    <div class="relative flex items-start pt-2">
                        <div class="flex h-6 items-center">
                            <input id="marketing_opt_in" name="marketing_opt_in" type="checkbox" value="1"
                                @checked(old('marketing_opt_in', false))
                                class="h-4 w-4 rounded border-gray-300 dark:border-gray-600 text-indigo-600 focus:ring-indigo-500">
                        </div>
                        <div class="ml-3 text-sm leading-6">
                            <label for="marketing_opt_in" class="font-medium text-gray-700 dark:text-gray-300">
                                {{ __('checkout.marketing_opt_in') }}
                            </label>
                        </div>
                    </div>
                </div>

                {{-- 2. Order Summary & Payment Section --}}
                <div
                    class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm p-6 space-y-6">
                    <h2
                        class="text-lg font-medium text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-3 mb-4">
                        {{ __('checkout.payment_details_title') }}</h2>

                    <div class="text-center py-4">
                        {{-- Display Surcharge if applicable --}}
                        @if (($enableSurcharge ?? false) && ($surchargeAmount ?? 0) > 0)
                            <p class="text-sm text-gray-500 dark:text-gray-400">
                                {{ __('checkout.subtotal_products_donation') }}
                                ${{ number_format(($finalAmountForPayment ?? ($cartTotal ?? 0)) - ($surchargeAmount ?? 0), 2) }}
                            </p>
                            <p class="text-sm text-gray-500 dark:text-gray-400">
                                {{ $surchargeLabel ?? 'Convenience Fee' }}:
                                +${{ number_format($surchargeAmount ?? 0, 2) }}
                            </p>
                        @endif
                        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ __('checkout.total_amount_due') }}</p>
                        <p class="text-3xl font-bold text-gray-900 dark:text-white">
                            ${{ number_format($finalAmountForPayment ?? ($cartTotal ?? 0), 2) }}
                        </p>
                    </div>

                    @if (!empty($paymentErrorMessage))
                        <div
                            class="p-4 rounded-md bg-red-50 dark:bg-red-900/50 border border-red-300 dark:border-red-700 text-red-800 dark:text-red-200">
                            <p class="text-sm font-medium">{{ __('checkout.payment_error') }}</p>
                            <p class="text-sm">{{ $paymentErrorMessage }}</p>
                        </div>
                    @endif

                    {{-- Stripe Payment Section --}}
                    @if (($activePaymentGateway ?? 'stripe') === 'stripe')
                        @if (!empty($stripePublicKey) && !empty($paymentIntentClientSecret))
                            <div>
                                <label for="card-element"
                                    class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                    {{ __('checkout.credit_debit_card') }}
                                </label>
                                <div id="card-element" class="dark:placeholder-gray-500"></div>
                                <div id="card-errors" role="alert" class="mt-2 text-xs text-red-600"></div>

                            </div>
                        @else
                            <p class="text-center text-red-600 dark:text-red-400">
                                {{ $paymentErrorMessage ?: __('checkout.stripe_unavailable') }}
                            </p>
                        @endif
                    @endif

                    {{-- Till Payments Section --}}
                    @if (($activePaymentGateway ?? 'stripe') === 'till')
                        @if (!empty($tillPublicKey))
                            <div id="till-payment-form">
                                <p class="text-sm text-gray-700 dark:text-gray-300">
                                    {{ __('checkout.complete_payment_till') }}
                                </p>

                                <div class="mt-2">
                                    <label for="till_card_number"
                                        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ __('checkout.card_number') }}</label>
                                    <div id="till_card_number"
                                        class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700"
                                        style="height: 35px;"></div>
                                    <div id="till-number-errors" role="alert" class="mt-2 text-xs text-red-600"></div>
                                </div>
                                <div class="grid grid-cols-2 gap-4 mt-2">
                                    <div>
                                        <label for="exp_month"
                                            class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ __('checkout.month') }}</label>
                                        <select id="exp_month" name="exp_month" required
                                            class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                                            <option value="">{{ __('checkout.month') }}</option>
                                            @foreach (__('checkout.months') as $value => $label)
                                                <option value="{{ $value }}">{{ $label }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div>
                                        <label for="exp_year"
                                            class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ __('checkout.year') }}</label>
                                        <select id="exp_year" name="exp_year" required
                                            class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                                            <option value="">{{ __('checkout.year') }}</option>
                                            @for ($year = date('Y'); $year <= date('Y') + 15; $year++)
                                                <option value="{{ $year }}">{{ $year }}</option>
                                            @endfor
                                        </select>
                                    </div>
                                </div>
                                <div class="mt-2">
                                    <label for="till_cvv"
                                        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ __('checkout.cvv') }}</label>
                                    <div id="till_cvv"
                                        class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700"
                                        style="height: 35px;"></div>
                                    <div id="till-cvv-errors" role="alert" class="mt-2 text-xs text-red-600"></div>
                                </div>
                                <input type="hidden" name="transaction_token" id="transaction_token">
                                <div id="till-errors" role="alert" class="mt-2 text-xs text-red-600"></div>
                            </div>
                        @else
                            <p class="text-center text-red-600 dark:text-red-400">
                                {{ $paymentErrorMessage ?: __('checkout.till_unavailable') }}
                            </p>
                        @endif
                    @endif

                    <div class="flex items-center justify-between pt-4 border-t border-gray-100 dark:border-gray-700">
                        <a href="{{ route('cart.show') }}"
                            class="text-sm text-gray-600 dark:text-gray-400 hover:underline">
                            &larr; {{ __('checkout.back_to_cart') }}
                        </a>

                        <button id="submit-button" type="submit"
                            class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
                            @if (
                                (($activePaymentGateway ?? 'stripe') === 'stripe' &&
                                    (empty($stripePublicKey) || empty($paymentIntentClientSecret))) ||
                                    (($activePaymentGateway ?? 'stripe') === 'till' && empty($tillPublicKey)) ||
                                    !empty($paymentErrorMessage)) disabled @endif>
                            <span id="button-text">{{ __('checkout.confirm_pay') }}
                                ${{ number_format($finalAmountForPayment ?? ($cartTotal ?? 0), 2) }}</span>
                            <svg id="spinner" style="display: none;" class="animate-spin ml-3 h-5 w-5 text-white"
                                xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
                                    stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor"
                                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
                                </path>
                            </svg>
                        </button>
                    </div>
                </div>

            </form>

        </div>
    </div>
@endsection

@push('scripts')
    {{-- Faker Script for Testing (only when FAKER_ENABLED=true) --}}
    @php
        $fakerEnabled = env('FAKER_ENABLED', false);
        $isFakerEnabled = $fakerEnabled === 'true' || $fakerEnabled === true;
    @endphp

    @if ($isFakerEnabled)
        <script type="module">
            window.faker = (await import('https://esm.sh/@faker-js/faker')).faker;
            console.log('Faker loaded:', window.faker);
        </script>
        <script type="text/javascript">
            // Faker is enabled
            const FAKER_ENABLED = true;
            const AUTOFILL_ON_LOAD = true;
            const ADD_BUTTON = true;

            function fillFormWithFakeData() {
                if (typeof faker === 'undefined') {
                    console.error('Faker not loaded.');
                    return;
                }

                try {
                    const fields = {
                        'contact_email': faker.internet.email(),
                        'first_name': faker.person.firstName(),
                        'last_name': faker.person.lastName(),
                        'company': faker.company.name(),
                        'billing_address_line_1': faker.location.streetAddress(),
                        'billing_city': faker.location.city(),
                        'billing_state': faker.location.state({
                            abbreviated: true
                        }),
                        'billing_zip_code': faker.location.zipCode(),
                    };

                    for (const id in fields) {
                        const el = document.getElementById(id);
                        if (el) {
                            el.value = fields[id];
                            el.dispatchEvent(new Event('input', {
                                bubbles: true
                            }));
                        }
                    }
                    console.log('Form fields populated with test data.');
                } catch (error) {
                    console.error('Error filling form:', error);
                }
            }

            document.addEventListener('DOMContentLoaded', function() {
                if (AUTOFILL_ON_LOAD) {
                    let attempts = 0;
                    const intervalId = setInterval(() => {
                        attempts++;
                        if (typeof window.faker !== 'undefined') {
                            clearInterval(intervalId);
                            fillFormWithFakeData();
                        } else if (attempts > 20) {
                            clearInterval(intervalId);
                            console.error("Faker timed out.");
                        }
                    }, 100);
                }

                if (ADD_BUTTON) {
                    const fillButton = document.createElement('button');
                    fillButton.type = 'button';
                    fillButton.textContent = 'Fill with Fake Data ({{ app()->environment() }})';
                    fillButton.style.position = 'fixed';
                    fillButton.style.bottom = '10px';
                    fillButton.style.right = '10px';
                    fillButton.style.padding = '8px 15px';
                    fillButton.style.backgroundColor = '#4CAF50';
                    fillButton.style.color = 'white';
                    fillButton.style.border = 'none';
                    fillButton.style.borderRadius = '5px';
                    fillButton.style.cursor = 'pointer';
                    fillButton.style.zIndex = '1000';
                    fillButton.style.fontSize = '12px';
                    fillButton.onclick = fillFormWithFakeData;
                    document.body.appendChild(fillButton);
                }
            });
        </script>
    @else
        <script type="text/javascript">
            // Faker is disabled
            document.addEventListener('DOMContentLoaded', function() {
                console.log(
                    'Faker functionality is disabled. Current FAKER_ENABLED value: "{{ env('FAKER_ENABLED', 'not set') }}". Set FAKER_ENABLED=true in .env to enable test data features.'
                    );
            });
        </script>
    @endif

    {{-- Stripe Payment Integration with PO Numbers --}}
    @if (($activePaymentGateway ?? 'stripe') === 'stripe' && !empty($stripePublicKey) && !empty($paymentIntentClientSecret))
        <script src="https://js.stripe.com/v3/"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const stripePublicKey = "{{ $stripePublicKey ?? '' }}";
                const clientSecret = "{{ $paymentIntentClientSecret ?? '' }}";
                const paymentForm = document.getElementById('payment-form');
                const submitButton = document.getElementById('submit-button');
                const buttonText = document.getElementById('button-text');
                const spinner = document.getElementById('spinner');
                const cardElementContainer = document.getElementById('card-element');
                const cardErrors = document.getElementById('card-errors');
                const finalAmountForPayment = parseFloat("{{ $finalAmountForPayment ?? ($cartTotal ?? 0) }}");

                if (!stripePublicKey || !clientSecret || !paymentForm || !submitButton || !cardElementContainer || !
                    cardErrors) {
                    console.error('Stripe initialization failed: Missing elements or keys.');
                    if (cardErrors) cardErrors.textContent = 'Payment initialization failed.';
                    if (submitButton) submitButton.disabled = true;
                    return;
                }

                console.log('Initializing Stripe with PO number integration', {
                    finalAmount: finalAmountForPayment,
                    hasClientSecret: !!clientSecret,
                    hasPublicKey: !!stripePublicKey
                });

                const stripe = Stripe(stripePublicKey);
                const style = {
                    base: {
                        color: (document.documentElement.classList.contains('dark') ? '#f3f4f6' : '#111827'),
                        fontFamily: '"Figtree", system-ui, sans-serif',
                        fontSmoothing: 'antialiased',
                        fontSize: '16px',
                        '::placeholder': {
                            color: '#9ca3af'
                        }
                    },
                    invalid: {
                        color: '#ef4444',
                        iconColor: '#ef4444'
                    }
                };

                const elements = stripe.elements();
                const cardElement = elements.create('card', {
                    style: style
                });
                cardElement.mount('#card-element');

                let isProcessingPayment = false;
                let paymentProcessed = false;

                cardElement.on('change', function(event) {
                    if (event.error) {
                        cardErrors.textContent = event.error.message;
                    } else {
                        cardErrors.textContent = '';
                    }
                });

                paymentForm.addEventListener('submit', async function(event) {
                    event.preventDefault();

                    if (isProcessingPayment) {
                        console.log('Payment already being processed');
                        return;
                    }

                    if (paymentProcessed) {
                        cardErrors.textContent =
                            'Payment has already been processed. Please refresh the page to try again.';
                        return;
                    }

                    isProcessingPayment = true;
                    setLoading(true);
                    cardErrors.textContent = '';

                    try {
                        const billingDetails = {
                            email: document.getElementById('contact_email')?.value || null,
                            name: `${document.getElementById('first_name')?.value || ''} ${document.getElementById('last_name')?.value || ''}`
                                .trim(),
                            address: {
                                line1: document.getElementById('billing_address_line_1')?.value || null,
                                line2: document.getElementById('billing_address_line_2')?.value || null,
                                city: document.getElementById('billing_city')?.value || null,
                                state: document.getElementById('billing_state')?.value || null,
                                postal_code: document.getElementById('billing_zip_code')?.value || null,
                                country: 'US',
                            }
                        };

                        console.log('Starting Stripe payment confirmation with PO number integration...');

                        const {
                            error,
                            paymentIntent
                        } = await stripe.confirmCardPayment(clientSecret, {
                            payment_method: {
                                card: cardElement,
                                billing_details: billingDetails
                            },
                        });

                        if (error) {
                            console.error('Stripe payment error:', error);

                            if (error.code === 'payment_intent_unexpected_state') {
                                cardErrors.textContent =
                                    'This payment has already been processed. Please refresh the page and try again.';
                                paymentProcessed = true;
                            } else {
                                cardErrors.textContent = error.message || 'An error occurred.';
                            }

                            setLoading(false);
                            isProcessingPayment = false;
                            return;
                        }

                        if (paymentIntent.status === 'succeeded') {
                            console.log('Payment succeeded with PO number integration:', paymentIntent.id);
                            console.log('PaymentIntent metadata:', paymentIntent.metadata);

                            paymentProcessed = true;
                            buttonText.textContent = 'Payment Successful! Creating Order...';

                            const formData = new FormData(paymentForm);
                            formData.append('payment_intent_id', paymentIntent.id);
                            formData.set('finalAmountForPayment', finalAmountForPayment.toString());

                            console.log('Submitting order with PO number integration...');

                            try {
                                const response = await fetch(paymentForm.action, {
                                    method: 'POST',
                                    body: formData,
                                    headers: {
                                        'X-Requested-With': 'XMLHttpRequest',
                                        'Accept': 'application/json'
                                    }
                                });

                                console.log('Server response status:', response.status);

                                const responseText = await response.text();
                                console.log('Raw server response:', responseText);

                                if (response.ok) {
                                    try {
                                        const result = JSON.parse(responseText);
                                        console.log('Parsed server response:', result);

                                        if (result.success) {
                                            console.log('Order created successfully with PO number:', result
                                                .po_number);

                                            if (result.redirectUrl) {
                                                console.log('Redirecting to:', result.redirectUrl);
                                                window.location.href = result.redirectUrl;
                                            } else {
                                                window.location.href = "{{ route('payment.success') }}";
                                            }
                                        } else {
                                            cardErrors.textContent = result.error ||
                                                'Order creation failed';
                                            setLoading(false);
                                            isProcessingPayment = false;
                                        }
                                    } catch (parseError) {
                                        console.log('Response is not JSON, treating as redirect');
                                        window.location.href = "{{ route('payment.success') }}";
                                    }
                                } else {
                                    try {
                                        const errorData = JSON.parse(responseText);
                                        console.error('Server error response:', errorData);

                                        if (errorData.errors) {
                                            let errorMessage = 'Server validation errors: ';
                                            for (const [field, messages] of Object.entries(errorData
                                                    .errors)) {
                                                errorMessage += `${field}: ${messages.join(', ')}; `;
                                            }
                                            cardErrors.textContent = errorMessage;
                                        } else {
                                            cardErrors.textContent = errorData.message || errorData.error ||
                                                'Server error. Please try again.';
                                        }
                                    } catch (parseError) {
                                        cardErrors.textContent =
                                            `Server error (${response.status}). Please check console.`;
                                    }

                                    setLoading(false);
                                    isProcessingPayment = false;
                                }
                            } catch (fetchError) {
                                console.error('Network error:', fetchError);
                                cardErrors.textContent =
                                    'Network error. Please check your connection and try again.';
                                setLoading(false);
                                isProcessingPayment = false;
                            }

                        } else {
                            console.log('Payment status:', paymentIntent.status);
                            cardErrors.textContent =
                                `Payment status: ${paymentIntent.status}. Please try again.`;
                            setLoading(false);
                            isProcessingPayment = false;
                        }
                    } catch (err) {
                        console.error('Unexpected error:', err);
                        cardErrors.textContent = 'An unexpected error occurred. Please try again.';
                        setLoading(false);
                        isProcessingPayment = false;
                    }
                });

                function setLoading(isLoading) {
                    if (isLoading) {
                        submitButton.disabled = true;
                        spinner.style.display = 'inline-block';
                        buttonText.textContent = 'Processing Payment...';
                    } else {
                        submitButton.disabled = false;
                        spinner.style.display = 'none';
                        buttonText.textContent =
                            `{{ __('checkout.confirm_pay') }} $${finalAmountForPayment.toFixed(2)}`;
                    }
                }
            });
        </script>

        {{-- Till Payments Integration with PO Numbers --}}
    @elseif (($activePaymentGateway ?? 'stripe') === 'till' && !empty($tillPublicKey))
        <script data-main="payment-js" src="https://gateway.tillpayments.com/js/integrated/payment.1.3.min.js"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const tillPublicKey = "{{ $tillPublicKey ?? '' }}";
                const paymentForm = document.getElementById('payment-form');
                const submitButton = document.getElementById('submit-button');
                const buttonText = document.getElementById('button-text');
                const spinner = document.getElementById('spinner');
                const tillErrors = document.getElementById('till-errors');
                const tillNumberErrors = document.getElementById('till-number-errors');
                const tillCvvErrors = document.getElementById('till-cvv-errors');
                const finalAmountForPayment = parseFloat("{{ $finalAmountForPayment ?? ($cartTotal ?? 0) }}");

                let paymentInstance = null;
                let isProcessingPayment = false;

                if (!tillPublicKey || !paymentForm || !submitButton) {
                    console.error('Till Payments initialization failed: Missing elements or public key.');
                    if (tillErrors) tillErrors.textContent = 'Payment initialization failed.';
                    if (submitButton) submitButton.disabled = true;
                    return;
                }

                console.log('Initializing Till Payments with PO number integration', {
                    tillPublicKey: tillPublicKey,
                    finalAmount: finalAmountForPayment
                });

                // Initialize PaymentJs according to official documentation
                const payment = new PaymentJs();
                payment.init(tillPublicKey, 'till_card_number', 'till_cvv', function(instance) {
                    console.log('Till Payment initialized successfully with PO integration:', instance);
                    paymentInstance = instance;

                    // Set styling according to official documentation format
                    const baseStyle = {
                        'border': '1px solid #e2e8f0',
                        'padding': '0.75rem',
                        'border-radius': '0.375rem',
                        'background-color': 'white',
                        'font-family': '"Figtree", system-ui, sans-serif',
                        'font-size': '16px',
                        'color': (document.documentElement.classList.contains('dark') ? '#f3f4f6' :
                            '#111827'),
                        'width': '100%'
                    };

                    const darkStyle = {
                        'border-color': '#4b5563',
                        'background-color': '#374151',
                        'color': '#f3f4f6'
                    };

                    const focusStyle = {
                        'border-color': '#6366f1',
                        'box-shadow': '0 0 0 1px #6366f1'
                    };

                    const invalidStyle = {
                        'border-color': '#ef4444',
                        'box-shadow': '0 0 0 1px #ef4444'
                    };

                    // Apply initial styles
                    let currentStyle = {
                        ...baseStyle
                    };
                    if (document.documentElement.classList.contains('dark')) {
                        currentStyle = {
                            ...currentStyle,
                            ...darkStyle
                        };
                    }

                    try {
                        paymentInstance.setNumberStyle(currentStyle);
                        paymentInstance.setCvvStyle(currentStyle);
                        paymentInstance.setNumberPlaceholder('{{ __('checkout.card_number') }}');
                        paymentInstance.setCvvPlaceholder('{{ __('checkout.cvv') }}');
                    } catch (styleError) {
                        console.warn('Error applying styles:', styleError);
                    }

                    // Event handlers for validation
                    paymentInstance.numberOn('input', function(data) {
                        let style = {
                            ...baseStyle
                        };
                        if (document.documentElement.classList.contains('dark')) {
                            style = {
                                ...style,
                                ...darkStyle
                            };
                        }
                        if (!data.validNumber && data.numberLength > 0) {
                            style = {
                                ...style,
                                ...invalidStyle
                            };
                            tillNumberErrors.textContent = 'Invalid card number';
                        } else {
                            tillNumberErrors.textContent = '';
                        }
                        paymentInstance.setNumberStyle(style);
                        validateFormForTill();
                    });

                    paymentInstance.cvvOn('input', function(data) {
                        let style = {
                            ...baseStyle
                        };
                        if (document.documentElement.classList.contains('dark')) {
                            style = {
                                ...style,
                                ...darkStyle
                            };
                        }
                        if (!data.validCvv && data.cvvLength > 0) {
                            style = {
                                ...style,
                                ...invalidStyle
                            };
                            tillCvvErrors.textContent = 'Invalid CVV';
                        } else {
                            tillCvvErrors.textContent = '';
                        }
                        paymentInstance.setCvvStyle(style);
                        validateFormForTill();
                    });

                    // Enable form submission now that Till is ready
                    validateFormForTill();
                });

                // Intercept form submission for Till processing
                function interceptSubmit(event) {
                    event.preventDefault();

                    if (isProcessingPayment) {
                        console.log('Payment already being processed');
                        return;
                    }

                    if (!paymentInstance) {
                        tillErrors.textContent = 'Payment system not ready. Please wait and try again.';
                        return;
                    }

                    isProcessingPayment = true;
                    setLoading(true);
                    clearErrors();

                    if (!validateFormForTill()) {
                        setLoading(false);
                        isProcessingPayment = false;
                        return;
                    }

                    const tokenizationData = {
                        first_name: document.getElementById('first_name').value.trim(),
                        last_name: document.getElementById('last_name').value.trim(),
                        month: document.getElementById('exp_month').value.trim(),
                        year: document.getElementById('exp_year').value.trim(),
                        email: document.getElementById('contact_email').value.trim()
                    };

                    console.log('Till tokenization with PO integration:', tokenizationData);

                    payment.tokenize(
                        tokenizationData,
                        function(token, cardData) {
                            console.log('Till tokenization successful:', {
                                token,
                                cardData
                            });
                            document.getElementById('transaction_token').value = token;
                            submitToServer(token, cardData);
                        },
                        function(errors) {
                            console.error('Till tokenization errors:', errors);

                            if (errors && Array.isArray(errors)) {
                                errors.forEach(function(error) {
                                    if (error.attribute === 'number') {
                                        tillNumberErrors.textContent = error.message ||
                                            'Invalid card number';
                                    } else if (error.attribute === 'cvv') {
                                        tillCvvErrors.textContent = error.message || 'Invalid CVV';
                                    } else {
                                        tillErrors.textContent = error.message || 'Unknown error occurred';
                                    }
                                });
                            } else {
                                tillErrors.textContent = 'Failed to process card information. Please try again.';
                            }

                            setLoading(false);
                            isProcessingPayment = false;
                        }
                    );
                }

                function submitToServer(token, cardData) {
                    console.log('Submitting Till payment with PO number integration...');

                    const formData = new FormData();
                    formData.append('_token', document.querySelector('input[name="_token"]').value);
                    formData.append('active_payment_gateway', 'till');
                    formData.append('contact_email', document.getElementById('contact_email').value);
                    formData.append('first_name', document.getElementById('first_name').value);
                    formData.append('last_name', document.getElementById('last_name').value);
                    formData.append('company', document.getElementById('company').value || '');
                    formData.append('billing_address_line_1', document.getElementById('billing_address_line_1').value);
                    formData.append('billing_address_line_2', document.getElementById('billing_address_line_2').value ||
                        '');
                    formData.append('billing_city', document.getElementById('billing_city').value);
                    formData.append('billing_state', document.getElementById('billing_state').value);
                    formData.append('billing_zip_code', document.getElementById('billing_zip_code').value);
                    formData.append('billing_country', 'US');
                    formData.append('marketing_opt_in', document.getElementById('marketing_opt_in').checked ? '1' :
                        '0');
                    formData.append('transaction_token', token);
                    formData.append('exp_month', document.getElementById('exp_month').value);
                    formData.append('exp_year', document.getElementById('exp_year').value);
                    formData.append('finalAmountForPayment', finalAmountForPayment.toString());

                    fetch(paymentForm.action, {
                            method: 'POST',
                            body: formData,
                            headers: {
                                'Accept': 'application/json',
                                'X-Requested-With': 'XMLHttpRequest'
                            }
                        })
                        .then(response => {
                            console.log('Server response status:', response.status);

                            if (!response.ok) {
                                return response.text().then(text => {
                                    console.error('Server error response:', text);
                                    let errorMessage = `Server error (${response.status})`;

                                    try {
                                        const errorData = JSON.parse(text);
                                        if (errorData.error) {
                                            errorMessage = errorData.error;
                                        } else if (errorData.message) {
                                            errorMessage = errorData.message;
                                        } else if (errorData.errors) {
                                            errorMessage = Object.values(errorData.errors).flat().join(
                                                ', ');
                                        }
                                    } catch (parseError) {
                                        console.warn('Could not parse error response as JSON');
                                    }

                                    throw new Error(errorMessage);
                                });
                            }

                            return response.text();
                        })
                        .then(text => {
                            console.log('Server response:', text);

                            try {
                                const data = JSON.parse(text);
                                console.log('Parsed server response with PO number:', data);

                                if (data.success) {
                                    console.log('Till payment successful with PO number:', data.po_number);

                                    if (data.redirectUrl) {
                                        window.location.href = data.redirectUrl;
                                    } else {
                                        window.location.href = "{{ route('payment.success') }}";
                                    }
                                } else {
                                    tillErrors.textContent = data.error || 'Payment processing failed';
                                    setLoading(false);
                                    isProcessingPayment = false;
                                }
                            } catch (parseError) {
                                console.log('Response is not JSON, treating as successful redirect');
                                window.location.href = "{{ route('payment.success') }}";
                            }
                        })
                        .catch(error => {
                            console.error('Till payment submission error:', error);
                            tillErrors.textContent = error.message ||
                                'Failed to process payment. Please try again.';
                            setLoading(false);
                            isProcessingPayment = false;
                        });
                }

                // Add event listener for form submission
                paymentForm.addEventListener('submit', interceptSubmit);

                function validateFormForTill() {
                    clearErrors();
                    let isValid = true;

                    const requiredFields = [{
                            id: 'contact_email',
                            name: 'Email'
                        },
                        {
                            id: 'first_name',
                            name: 'First Name'
                        },
                        {
                            id: 'last_name',
                            name: 'Last Name'
                        },
                        {
                            id: 'billing_address_line_1',
                            name: 'Address'
                        },
                        {
                            id: 'billing_city',
                            name: 'City'
                        },
                        {
                            id: 'billing_state',
                            name: 'State'
                        },
                        {
                            id: 'billing_zip_code',
                            name: 'ZIP Code'
                        },
                        {
                            id: 'exp_month',
                            name: 'Expiration Month'
                        },
                        {
                            id: 'exp_year',
                            name: 'Expiration Year'
                        }
                    ];

                    requiredFields.forEach(field => {
                        const element = document.getElementById(field.id);
                        if (!element || !element.value.trim()) {
                            isValid = false;
                            if (element) {
                                element.classList.add('border-red-500', 'ring-1', 'ring-red-500');
                            }
                        } else {
                            if (element) {
                                element.classList.remove('border-red-500', 'ring-1', 'ring-red-500');
                            }
                        }
                    });

                    if (submitButton) {
                        submitButton.disabled = !isValid || !paymentInstance;
                    }

                    return isValid;
                }

                function clearErrors() {
                    if (tillErrors) tillErrors.textContent = '';
                    if (tillNumberErrors) tillNumberErrors.textContent = '';
                    if (tillCvvErrors) tillCvvErrors.textContent = '';

                    document.querySelectorAll('.border-red-500').forEach(el => {
                        el.classList.remove('border-red-500', 'ring-1', 'ring-red-500');
                    });
                }

                function setLoading(isLoading) {
                    if (isLoading) {
                        submitButton.disabled = true;
                        if (spinner) spinner.style.display = 'inline-block';
                        if (buttonText) buttonText.textContent = 'Processing Payment...';
                    } else {
                        submitButton.disabled = false;
                        if (spinner) spinner.style.display = 'none';
                        if (buttonText) buttonText.textContent =
                            `{{ __('checkout.confirm_pay') }} $${finalAmountForPayment.toFixed(2)}`;
                    }
                }

                // Add input event listeners for real-time validation
                ['contact_email', 'first_name', 'last_name', 'billing_address_line_1',
                    'billing_city', 'billing_state', 'billing_zip_code', 'exp_month', 'exp_year'
                ].forEach(fieldId => {
                    const element = document.getElementById(fieldId);
                    if (element) {
                        element.addEventListener('input', validateFormForTill);
                        element.addEventListener('blur', validateFormForTill);
                    }
                });
            });
        </script>
    @endif
@endpush