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

@section('title', 'Confirm Order & Payment')

@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"> {{-- Added dark mode background --}}
        <div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">

            {{-- Main Form - Wraps Contact, Summary, and Payment --}}
            <form id="payment-form" action="{{ route('order.place') }}" method="POST" class="space-y-8">
                @csrf

                {{-- 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">Contact & Billing Information</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">
                                Already have an account? Log in
                            </a>
                        @endguest
                        @auth
                            <span class="text-sm text-gray-500 dark:text-gray-400">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">Email Address <span
                                class="text-red-500">*</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 ... @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">First Name <span
                                    class="text-red-500">*</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 ... @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">Last Name <span
                                    class="text-red-500">*</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 ... @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">Company / Organization
                            (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 ... @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">Billing Address <span
                                class="text-red-500">*</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="Street address"
                            class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-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="Apartment, suite, etc. (Optional)"
                            class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-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">City <span
                                    class="text-red-500">*</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 ... @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">State <span
                                    class="text-red-500">*</span></label>
                            <input type="text" name="billing_state" id="billing_state"
                                value="{{ old('billing_state') }}" required autocomplete="address-level1"
                                placeholder="e.g., CA"
                                class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-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">ZIP Code <span
                                    class="text-red-500">*</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 ... @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>
                    {{-- Assuming US only for now, add country select if needed --}}
                    <input type="hidden" name="billing_country" value="US">

                    {{-- Marketing Opt-in Checkbox --}}
                    <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">
                                I would like to receive campaign and marketing related emails.
                            </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">
                        Payment Details</h2>

                    {{-- Display Total --}}
                    <div class="text-center py-4">
                        <p class="text-sm text-gray-500 dark:text-gray-400">Total Amount (including donation):</p>
                        <p class="text-3xl font-bold text-gray-900 dark:text-white">
                            ${{ number_format($cartTotal, 2) }}
                        </p>
                    </div>

                    {{-- Display Stripe Error from Controller (if PI failed) --}}
                    @if (!empty($stripeErrorMessage))
                        {{-- Check if variable exists and is not empty --}}
                        <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">Payment Error</p>
                            <p class="text-sm">{{ $stripeErrorMessage }}</p>
                        </div>
                    @endif

                    {{-- Only show payment form if Stripe setup was successful --}}
                    {{-- Check if variables exist before using --}}
                    @if (!empty($stripePublicKey) && !empty($paymentIntentClientSecret))
                        {{-- Stripe Card Element Container --}}
                        <div>
                            <label for="card-element"
                                class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                Credit or debit card
                            </label>
                            <div id="card-element" class="dark:placeholder-gray-500">
                            </div>
                            {{-- Used to display form errors. --}}
                            <div id="card-errors" role="alert" class="mt-2 text-xs text-red-600"></div>
                        </div>

                        {{-- Buttons --}}
                        <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; Back to Cart
                            </a>

                            {{-- Submit button - Text changes based on state --}}
                            <button id="submit-button" type="submit" {{-- Type is 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">
                                <span id="button-text">Confirm & Pay ${{ number_format($cartTotal, 2) }}</span>
                                {{-- Spinner --}}
                                <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>
                    @else
                        {{-- Message if Stripe isn't configured or PI failed in controller --}}
                        <p class="text-center text-red-600 dark:text-red-400">
                            {{ $stripeErrorMessage ?? 'Payment processing is currently unavailable. Please contact support.' }}
                        </p>
                    @endif
                </div>

            </form> {{-- End Main Form --}}

        </div>
    </div>
@endsection

@push('scripts')
    {{-- Debug Faker Environment Variable --}}
    @php
        $fakerEnvValue = env('FAKER_ENABLED', 'NOT_SET');
        $fakerEnabled = false;

        // Only enable if explicitly set to string 'true'
        if ($fakerEnvValue === 'true') {
            $fakerEnabled = true;
        }

        // Debug output
        \Log::info('Faker Debug', [
            'env_value' => $fakerEnvValue,
            'enabled' => $fakerEnabled,
            'type' => gettype($fakerEnvValue),
        ]);
    @endphp

    <script type="text/javascript">
        // Debug info
        console.log('Faker Debug Info:', {
            envValue: '{{ $fakerEnvValue }}',
            enabled: {{ $fakerEnabled ? 'true' : 'false' }},
            type: '{{ gettype($fakerEnvValue) }}'
        });
    </script>

    @if ($fakerEnabled)
        <script type="module">
            console.log('Loading faker module...');
            window.faker = (await import('https://esm.sh/@faker-js/faker')).faker;
            console.log('Faker loaded:', window.faker);
        </script>
        <script type="text/javascript">
            console.log('Faker is ENABLED');

            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() {
                // Auto-fill 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);

                // 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">
            console.log('Faker is DISABLED');
            console.log('To enable faker, set FAKER_ENABLED=true in your .env file');
            console.log('Current FAKER_ENABLED value:', '{{ $fakerEnvValue }}');
        </script>
    @endif
@endpush

{{-- Only include Stripe JS if keys are available --}}
@if (!empty($stripePublicKey) && !empty($paymentIntentClientSecret))
    <script src="https://js.stripe.com/v3/"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Ensure keys are passed correctly and are not empty strings
            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');

            // Basic check if Stripe can even initialize
            if (!stripePublicKey || !clientSecret || !paymentForm || !submitButton || !cardElementContainer || !
                cardErrors) {
                console.error('Stripe initialization failed: Missing required elements or keys.');
                if (cardErrors) cardErrors.textContent = 'Payment initialization failed. Please refresh.';
                if (submitButton) submitButton.disabled = true;
                return; // Stop execution if essential parts are missing
            }

            const stripe = Stripe(stripePublicKey);

            // Style options for Stripe Element (match Tailwind where possible)
            const style = {
                base: {
                    color: (document.documentElement.classList.contains('dark') ? '#f3f4f6' :
                        '#111827'), // gray-100 dark / gray-900 light
                    fontFamily: '"Figtree", system-ui, sans-serif',
                    fontSmoothing: 'antialiased',
                    fontSize: '16px',
                    '::placeholder': {
                        color: '#9ca3af' // gray-400
                    }
                },
                invalid: {
                    color: '#ef4444', // red-500
                    iconColor: '#ef4444'
                }
            };

            // Create an instance of the card Element.
            const elements = stripe.elements();
            const cardElement = elements.create('card', {
                style: style
            });

            // Add an instance of the card Element into the `card-element` <div>.
            cardElement.mount('#card-element');

            // Handle real-time validation errors from the card Element.
            cardElement.on('change', function(event) {
                if (event.error) {
                    cardErrors.textContent = event.error.message;
                    submitButton.disabled = true; // Disable button on error
                } else {
                    cardErrors.textContent = '';
                    submitButton.disabled = false; // Re-enable button if error cleared
                }
            });

            // Handle form submission.
            paymentForm.addEventListener('submit', async function(event) {
                event.preventDefault(); // Prevent default form submission

                setLoading(true); // Show spinner, disable button

                // --- Collect Billing Details from Form ---
                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', // Assuming US only for now
                    }
                };

                // Remove null/empty values from billing details if needed
                // billingDetails.name = billingDetails.name || null; // Set to null if empty
                // ... etc ...

                // Retrieve email from the form for billing details
                // const emailInput = document.getElementById('contact_email');
                // const userEmail = emailInput ? emailInput.value : null;

                // Confirm the Card Payment using the client secret and card element
                const {
                    error,
                    paymentIntent
                } = await stripe.confirmCardPayment(
                    clientSecret, {
                        payment_method: {
                            card: cardElement,
                            billing_details: billingDetails,
                        },
                    }

                );

                if (error) {
                    // Show error to your customer (e.g., insufficient funds, card declined).
                    console.error('Stripe payment error:', error);
                    cardErrors.textContent = error.message || 'An error occurred during payment.';
                    setLoading(false); // Hide spinner, re-enable button
                } else {
                    // The payment has been processed!
                    if (paymentIntent.status === 'succeeded') {
                        console.log('PaymentIntent succeeded:', paymentIntent);
                        // Payment successful! Now submit the form to your backend to place Amazon orders.
                        buttonText.textContent = 'Payment Successful! Placing Order...';
                        // No need to disable button here as the form submission will navigate away
                        paymentForm.submit(); // Submit the form normally to route('order.place')
                    } else {
                        // Handle other statuses if needed (e.g., requires_action)
                        console.warn('PaymentIntent status:', paymentIntent.status);
                        cardErrors.textContent =
                            `Payment status: ${paymentIntent.status}. Please try again or contact support.`;
                        setLoading(false); // Re-enable button for retry
                    }
                }
            });

            // Helper function to toggle loading state on the submit button
            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';
                    // Reset button text (total might need re-fetching if cart changed)
                    buttonText.textContent = 'Confirm & Pay ${{ number_format($cartTotal, 2) }}';
                }
            }
        });
    </script>
@endif
@endpush