@php use App\Services\Cart; @endphp
@extends('layouts.app')

@section('title', 'Checkout')

@section('content')
    <div class="container mx-auto px-4 py-8">
        <h1 class="text-3xl font-bold text-gray-900 mb-8">Checkout</h1>

        @if(session('error'))
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-6">
                {{ session('error') }}
            </div>
        @endif

        @if(session('success'))
            <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-6">
                {{ session('success') }}
            </div>
        @endif

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <!-- Order Summary -->
            <div class="bg-white shadow-lg rounded-lg overflow-hidden">
                <div class="p-6">
                    <h2 class="text-xl font-semibold text-gray-900 mb-6">Order Summary</h2>
                    <div class="space-y-4">
                        @foreach(Cart::items() as $id => $details)
                            <div class="flex justify-between items-center border-b border-gray-200 pb-4">
                                <div>
                                    <h3 class="text-md font-medium text-gray-900">{{ ucwords($details['name']) }}</h3>
                                    <p class="text-gray-600 text-sm">
                                        Date: {{ \Carbon\Carbon::parse($details['date'])->format('D, d M Y') }}</p>
                                    <p class="text-gray-600 text-sm">{{ isset($details['time_slot']) ? 'Time: '. $details['time_slot'] : '' }}</p>
                                    <p class="text-gray-600 text-sm">Slots: {{ $details['slots'] }}</p>
                                </div>
                                <span
                                    class="text-lg font-semibold text-gray-700 price-text">₹{{ $details['price'] * $details['slots'] }}</span>
                            </div>
                        @endforeach
                    </div>
                    <div class="mt-4 flex justify-between items-center">
                        <span class="text-md font-semibold text-gray-700">Sub Total</span>
                        <span
                            class="text-md font-semibold text-gray-900 price-text">₹{{ Cart::subtotal() }}</span>
                    </div>
                    <div class="mt-4 flex justify-between items-center">
                        <span class="text-md font-semibold text-gray-700">Online Seva Fee</span>
                        <span class="text-md font-semibold text-gray-900 price-text">₹{{ Cart::onlineFee() }}</span>
                    </div>
                    <div class="mt-6 pt-6 border-t border-gray-200">
                        <div class="flex justify-between items-center">
                            <span class="text-xl font-semibold text-gray-900">Total</span>
                            <span class="text-xl font-semibold text-gray-900 price-text">₹{{ Cart::total() }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Checkout Form -->
            <div class="bg-white shadow-lg rounded-lg overflow-hidden">
                <div class="p-6">
                    <h2 class="text-xl font-semibold text-gray-900 mb-6">Contact Information</h2>
                    <form id="checkoutForm">
                        @csrf
                        <div class="space-y-4">
                            <div>
                                <label for="name" class="block text-sm font-medium text-gray-700">Full Name</label>
                                <input type="text" name="name" id="name" required value="{{ old('name', $user->name ?? '') }}"
                                       class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-yellow-500 focus:border-yellow-500">
                            </div>
                            <div>
                                <label for="email" class="block text-sm font-medium text-gray-700">Email Address</label>
                                <input type="email" name="email" id="email" required value="{{ old('email', $user->email ?? '') }}"
                                       class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-yellow-500 focus:border-yellow-500">
                            </div>
                            <div>
                                <label for="phone" class="block text-sm font-medium text-gray-700">Phone Number</label>
                                <input type="tel" name="phone" id="phone" required value="{{ old('phone', $user->phone ?? '') }}"
                                       class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-yellow-500 focus:border-yellow-500">
                            </div>
                            <div>
                                <label for="gotram" class="block text-sm font-medium text-gray-700">Gotram</label>
                                <input type="text" name="gotram" id="gotram" required value="{{ old('gotram') }}"
                                       class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-yellow-500 focus:border-yellow-500">
                            </div>

                            <!-- Address Section -->
                            <div class="border-t border-gray-200 pt-4 mt-4">
                                <h3 class="text-lg font-medium text-gray-900 mb-4">Address Details</h3>
                                <div class="space-y-4">
                                    <div>
                                        <label for="street_address" class="block text-sm font-medium text-gray-700">Street Address</label>
                                        <input type="text" name="street_address" id="street_address" required value="{{ old('street_address', $address->street_address ?? '') }}"
                                               class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-yellow-500 focus:border-yellow-500">
                                    </div>
                                    <div class="grid grid-cols-2 gap-4">
                                        <div>
                                            <label for="city" class="block text-sm font-medium text-gray-700">City</label>
                                            <input type="text" name="city" id="city" required value="{{ old('city', $address->city ?? '') }}"
                                                   class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-yellow-500 focus:border-yellow-500">
                                        </div>
                                        <div>
                                            <label for="state" class="block text-sm font-medium text-gray-700">State</label>
                                            <select name="state" id="state" required
                                                    class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-yellow-500 focus:border-yellow-500">
                                                <option value="">Select State</option>
                                                @foreach(\App\Enums\IndianState::cases() as $state)
                                                    <option value="{{ $state->value }}" {{ old('state', $address->state ?? '') === $state->value ? 'selected' : '' }}>{{ $state->value }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div>
                                        <label for="postal_code" class="block text-sm font-medium text-gray-700">Postal Code</label>
                                        <input type="text" name="postal_code" id="postal_code" required value="{{ old('postal_code', $address->postal_code ?? '') }}"
                                               class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-yellow-500 focus:border-yellow-500">
                                    </div>
                                </div>
                            </div>

                            <div>
                                <label for="requirements" class="block text-sm font-medium text-gray-700 mb-1">Special Requirements <span class="text-xs text-gray-500">(Optional)</span></label>
                                <textarea name="requirements"
                                          id="requirements"
                                          rows="3"
                                          class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-1 focus:ring-yellow-500 focus:border-yellow-500">{{ old('requirements') }}</textarea>
                            </div>
                        </div>
                        <div class="mt-6">
                            <div class="flex space-x-4">
                                <!-- Cancel Button -->
                                <a href="{{ route('cart') }}"
                                   class="flex-1 px-6 py-3 bg-gray-500 text-white rounded-md hover:bg-gray-600 transition-all duration-200 flex items-center justify-center">
                                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
                                    </svg>
                                    Cancel
                                </a>

                                <!-- Place Order Button -->
                                <button type="submit" id="payButton"
                                        class="flex-1 px-6 py-3 bg-red-700 text-white rounded-md hover:bg-red-800 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 flex items-center justify-center">
                                    <span id="buttonText">Place Order</span>
                                    <svg id="loadingSpinner" class="hidden animate-spin -ml-1 mr-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>

                        <div class="mt-10 flex justify-center">
                            <div class="border-2 rounded-md border-gray-300 focus:border-pink-600 py-1 px-8 w-fit bg-gray-200">
                                <div class="text-center">
                                    <span class="text-xs font-medium text-gray-500">Powered By</span>
                                    <div class="flex justify-center mt-1">
                                        <img src="{{ asset('images/payments/razorpay.webp') }}" width="100" alt="Razorpay">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
        let isProcessing = false;
        let csrfToken = document.querySelector('input[name="_token"]').value;

        document.getElementById('checkoutForm').addEventListener('submit', async function(e) {
            e.preventDefault();

            // Prevent double submission
            if (isProcessing) {
                return;
            }

            const formData = new FormData(this);
            const submitButton = document.getElementById('payButton');

            // Validate form before proceeding
            if (!validateForm()) {
                return;
            }

            isProcessing = true;
            submitButton.disabled = true;
            document.getElementById('buttonText').textContent = 'Creating Order...';
            document.getElementById('loadingSpinner').classList.remove('hidden');
            submitButton.classList.add('opacity-50', 'cursor-not-allowed');

            try {
                // Refresh CSRF token before making request
                await refreshCSRFToken();

                // Create embedded checkout
                const response = await fetch('{{ route("checkout.create-embedded-checkout") }}', {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': csrfToken,
                        'Content-Type': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                    body: JSON.stringify({
                        name: formData.get('name'),
                        email: formData.get('email'),
                        phone: formData.get('phone'),
                        gotram: formData.get('gotram'),
                        street_address: formData.get('street_address'),
                        city: formData.get('city'),
                        state: formData.get('state'),
                        postal_code: formData.get('postal_code'),
                        requirements: formData.get('requirements'),
                    })
                });

                if (!response.ok) {
                    if (response.status === 419) {
                        // CSRF token expired, refresh and retry
                        await refreshCSRFToken();
                        throw new Error('Session expired. Please try again.');
                    }
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                const data = await response.json();
                if (data.success) {
                    // Show loading overlay
                    showLoadingOverlay('Redirecting to payment...');

                    // Create embedded checkout form
                    const embeddedForm = createEmbeddedCheckoutForm(data.embedded_checkout_data);
                    document.body.appendChild(embeddedForm);

                    // Submit the form to Razorpay embedded checkout
                    embeddedForm.submit();
                } else {
                    throw new Error(data.message || 'Failed to create embedded checkout');
                }
            } catch (error) {
                console.error('Error:', error);
                showError('An error occurred while creating the order. Please try again.');
                resetButton();
            }
        });

        function createEmbeddedCheckoutForm(checkoutData) {
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = 'https://api.razorpay.com/v1/checkout/embedded';
            form.style.display = 'none';

            // Add all the required fields
            Object.keys(checkoutData).forEach(key => {
                if (key === 'prefill') {
                    // Handle prefill object
                    Object.keys(checkoutData[key]).forEach(prefillKey => {
                        const input = document.createElement('input');
                        input.type = 'hidden';
                        input.name = `prefill[${prefillKey}]`;
                        input.value = checkoutData[key][prefillKey];
                        form.appendChild(input);
                    });
                } else if (key === 'notes') {
                    // Handle notes object
                    Object.keys(checkoutData[key]).forEach(noteKey => {
                        const input = document.createElement('input');
                        input.type = 'hidden';
                        input.name = `notes[${noteKey}]`;
                        input.value = checkoutData[key][noteKey];
                        form.appendChild(input);
                    });
                } else {
                    // Handle regular fields
                    const input = document.createElement('input');
                    input.type = 'hidden';
                    input.name = key;
                    input.value = checkoutData[key];
                    form.appendChild(input);
                }
            });

            return form;
        }

        async function refreshCSRFToken() {
            try {
                const response = await fetch('{{ route("checkout.csrf-token") }}', {
                    method: 'GET',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                    }
                });

                if (response.ok) {
                    const data = await response.json();
                    if (data.csrf_token) {
                        csrfToken = data.csrf_token;
                        document.querySelector('input[name="_token"]').value = csrfToken;
                    }
                }
            } catch (error) {
                console.warn('Failed to refresh CSRF token:', error);
            }
        }

        function validateForm() {
            const requiredFields = ['name', 'email', 'phone', 'gotram', 'street_address', 'city', 'state', 'postal_code'];
            let isValid = true;

            requiredFields.forEach(fieldName => {
                const field = document.querySelector(`[name="${fieldName}"]`);
                if (!field || !field.value.trim()) {
                    field.classList.add('border-red-500');
                    isValid = false;
                } else {
                    field.classList.remove('border-red-500');
                }
            });

            if (!isValid) {
                showError('Please fill in all required fields.');
            }

            return isValid;
        }

        function resetButton() {
            isProcessing = false;
            const submitButton = document.getElementById('payButton');
            submitButton.disabled = false;
            document.getElementById('buttonText').textContent = 'Place Order';
            document.getElementById('loadingSpinner').classList.add('hidden');
            submitButton.classList.remove('opacity-50', 'cursor-not-allowed');

            // Remove loading overlay if exists
            const overlay = document.getElementById('loading-overlay');
            if (overlay) {
                overlay.remove();
            }
        }

        function showError(message) {
            // Create or update error message
            let errorDiv = document.getElementById('error-message');
            if (!errorDiv) {
                errorDiv = document.createElement('div');
                errorDiv.id = 'error-message';
                errorDiv.className = 'bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4';
                document.querySelector('form').insertBefore(errorDiv, document.querySelector('form').firstChild);
            }
            errorDiv.textContent = message;
            errorDiv.style.display = 'block';

            // Auto-hide after 5 seconds
            setTimeout(() => {
                if (errorDiv) {
                    errorDiv.style.display = 'none';
                }
            }, 5000);
        }

        function showLoadingOverlay(message) {
            // Remove existing overlay if any
            const existingOverlay = document.getElementById('loading-overlay');
            if (existingOverlay) {
                existingOverlay.remove();
            }

            // Create loading overlay
            const overlay = document.createElement('div');
            overlay.id = 'loading-overlay';
            overlay.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
            overlay.innerHTML = `
                <div class="bg-white rounded-lg p-8 max-w-sm mx-4 text-center">
                    <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-red-700 mx-auto mb-4"></div>
                    <p class="text-gray-700 font-medium">${message}</p>
                    <p class="text-sm text-gray-500 mt-2">Please wait while we process your booking...</p>
                </div>
            `;
            document.body.appendChild(overlay);
        }
    </script>
@endsection