@extends('layouts.app')

@section('title', __('Checkout'))

@section('content')
    <div class="checkout-page">
        <div class="container py-4">
            <!-- Breadcrumb -->
            <nav aria-label="breadcrumb" class="mb-4">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="{{ route('home') }}">{{ __('Home') }}</a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="{{ route('cart.index') }}">{{ __('Cart') }}</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                        {{ __('Checkout') }}
                    </li>
                </ol>
            </nav>

            <!-- Page Header -->
            <div class="row mb-4">
                <div class="col-12">
                    <h1 class="h2 mb-2">{{ __('Checkout') }}</h1>
                    <p class="text-muted">{{ __('Complete your order information below') }}</p>
                </div>
            </div>

            <!-- Checkout Progress -->
            <div class="checkout-progress mb-5">
                <div class="row text-center">
                    <div class="col-4">
                        <div class="progress-step completed">
                            <div class="step-circle">
                                <i class="fas fa-shopping-cart"></i>
                            </div>
                            <div class="step-label">{{ __('Cart') }}</div>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="progress-step active">
                            <div class="step-circle">
                                <i class="fas fa-credit-card"></i>
                            </div>
                            <div class="step-label">{{ __('Checkout') }}</div>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="progress-step">
                            <div class="step-circle">
                                <i class="fas fa-check"></i>
                            </div>
                            <div class="step-label">{{ __('Complete') }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <form id="checkoutForm" class="checkout-form">
                @csrf
                <div class="row">
                    <!-- Left Column: Forms -->
                    <div class="col-lg-8">
                        <!-- Customer Information -->
                        <div class="card checkout-section mb-4">
                            <div class="card-header">
                                <h5 class="mb-0">
                                    <i class="fas fa-user me-2"></i>
                                    {{ __('Customer Information') }}
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="customer_name" class="form-label">{{ __('Full Name') }} <span
                                                class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="customer_name" name="customer_name"
                                               value="{{ $user ? $user->name : '' }}" required>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="customer_email" class="form-label">{{ __('Email Address') }} <span
                                                class="text-danger">*</span></label>
                                        <input type="email" class="form-control" id="customer_email"
                                               name="customer_email"
                                               value="{{ $user ? $user->email : '' }}" required>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="customer_phone" class="form-label">{{ __('Phone Number') }} <span
                                                class="text-danger">*</span></label>
                                        <input type="tel" class="form-control" id="customer_phone" name="customer_phone"
                                               placeholder="+966 5X XXX XXXX" required>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Shipping Address -->
                        <div class="card checkout-section mb-4">
                            <div class="card-header">
                                <h5 class="mb-0">
                                    <i class="fas fa-truck me-2"></i>
                                    {{ __('Shipping Address') }}
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="shipping_first_name" class="form-label">{{ __('First Name') }} <span
                                                class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="shipping_first_name"
                                               name="shipping_first_name" required>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="shipping_last_name" class="form-label">{{ __('Last Name') }} <span
                                                class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="shipping_last_name"
                                               name="shipping_last_name" required>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label for="shipping_company"
                                           class="form-label">{{ __('Company (Optional)') }}</label>
                                    <input type="text" class="form-control" id="shipping_company"
                                           name="shipping_company">
                                </div>
                                <div class="mb-3">
                                    <label for="shipping_address_line_1" class="form-label">{{ __('Address Line 1') }}
                                        <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="shipping_address_line_1"
                                           name="shipping_address_line_1"
                                           placeholder="{{ __('Street address, P.O. box, building number') }}" required>
                                </div>
                                <div class="mb-3">
                                    <label for="shipping_address_line_2"
                                           class="form-label">{{ __('Address Line 2 (Optional)') }}</label>
                                    <input type="text" class="form-control" id="shipping_address_line_2"
                                           name="shipping_address_line_2"
                                           placeholder="{{ __('Apartment, suite, unit, building, floor, etc.') }}">
                                </div>
                                <div class="row">
                                    <div class="col-md-4 mb-3">
                                        <label for="shipping_city" class="form-label">{{ __('City') }} <span
                                                class="text-danger">*</span></label>
                                        <select class="form-control" id="shipping_city" name="shipping_city" required>
                                            <option value="">{{ __('Select City') }}</option>
                                            <option value="Riyadh">{{ __('Riyadh') }}</option>
                                            <option value="Jeddah">{{ __('Jeddah') }}</option>
                                            <option value="Dammam">{{ __('Dammam') }}</option>
                                            <option value="Mecca">{{ __('Mecca') }}</option>
                                            <option value="Medina">{{ __('Medina') }}</option>
                                            <option value="Al Khobar">{{ __('Al Khobar') }}</option>
                                            <option value="Abha">{{ __('Abha') }}</option>
                                            <option value="Taif">{{ __('Taif') }}</option>
                                        </select>
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label for="shipping_state" class="form-label">{{ __('State/Province') }} <span
                                                class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="shipping_state"
                                               name="shipping_state"
                                               value="Saudi Arabia" required>
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label for="shipping_postal_code" class="form-label">{{ __('Postal Code') }}
                                            <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="shipping_postal_code"
                                               name="shipping_postal_code"
                                               placeholder="12345" required>
                                    </div>
                                </div>
                                <input type="hidden" name="shipping_country" value="SA">
                            </div>
                        </div>

                        <!-- Billing Address -->
                        <div class="card checkout-section mb-4">
                            <div class="card-header">
                                <h5 class="mb-0">
                                    <i class="fas fa-file-invoice me-2"></i>
                                    {{ __('Billing Address') }}
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="checkbox" id="billing_same_as_shipping"
                                           name="billing_same_as_shipping" value="1" checked>
                                    <label class="form-check-label" for="billing_same_as_shipping">
                                        {{ __('Same as shipping address') }}
                                    </label>
                                </div>

                                <div id="billing_address_form" style="display: none;">
                                    <!-- Billing address fields (same as shipping) -->
                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <label for="billing_first_name"
                                                   class="form-label">{{ __('First Name') }}</label>
                                            <input type="text" class="form-control" id="billing_first_name"
                                                   name="billing_first_name">
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <label for="billing_last_name"
                                                   class="form-label">{{ __('Last Name') }}</label>
                                            <input type="text" class="form-control" id="billing_last_name"
                                                   name="billing_last_name">
                                        </div>
                                    </div>
                                    <!-- Add other billing fields as needed -->
                                </div>
                            </div>
                        </div>

                        <!-- Shipping Method -->
                        <div class="card checkout-section mb-4">
                            <div class="card-header">
                                <h5 class="mb-0">
                                    <i class="fas fa-shipping-fast me-2"></i>
                                    {{ __('Shipping Method') }}
                                </h5>
                            </div>
                            <div class="card-body">
                                @foreach($shippingMethods as $method => $details)
                                    <div class="form-check shipping-option mb-3">
                                        <input class="form-check-input" type="radio" name="shipping_method"
                                               id="shipping_{{ $method }}" value="{{ $method }}"
                                               {{ $loop->first ? 'checked' : '' }}
                                               data-price="{{ $details['price'] }}">
                                        <label class="form-check-label w-100" for="shipping_{{ $method }}">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <div>
                                                    <strong>{{ $details['name'] }}</strong>
                                                    <small
                                                        class="text-muted d-block">{{ $details['description'] }}</small>
                                                </div>
                                                <div>
                                                    <span
                                                        class="badge bg-primary">{{ number_format($details['price'], 2) }} {{ __('SAR') }}</span>
                                                </div>
                                            </div>
                                        </label>
                                    </div>
                                @endforeach
                            </div>
                        </div>

                        <!-- SIMPLIFIED PAYMENT METHOD -->
                        <div class="card checkout-section mb-4">
                            <div class="card-header">
                                <h5 class="mb-0">
                                    <i class="fas fa-credit-card me-2"></i>
                                    {{ __('Payment Method') }}
                                </h5>
                            </div>
                            <div class="card-body">
                                @foreach($paymentMethods as $method => $details)
                                    @if($details['enabled'])
                                        <div class="form-check payment-option mb-3" data-method="{{ $method }}">
                                            <input class="form-check-input" type="radio" name="payment_method"
                                                   id="payment_{{ $method }}" value="{{ $method }}"
                                                {{ $loop->first ? 'checked' : '' }}>
                                            <label class="form-check-label w-100" for="payment_{{ $method }}">
                                                <div class="d-flex align-items-center">
                                                    <i class="{{ $details['icon'] }} fa-lg me-3 text-primary"></i>
                                                    <div>
                                                        <strong>{{ $details['name'] }}</strong>
                                                        <small
                                                            class="text-muted d-block">{{ $details['description'] }}</small>
                                                    </div>
                                                </div>
                                            </label>
                                        </div>
                                    @endif
                                @endforeach

                                <!-- Payment Method Information -->
                                <div class="alert alert-info mt-3">
                                    <i class="fas fa-info-circle me-2"></i>
                                    <strong>{{ __('Secure Payment') }}</strong><br>
                                    {{ __('You will be redirected to a secure payment page powered by Moyasar to complete your payment.') }}
                                    <br><small class="text-muted">{{ __('Your payment information is encrypted and secure.') }}</small>
                                </div>
                            </div>
                        </div>

                        <!-- Order Notes -->
                        <div class="card checkout-section mb-4">
                            <div class="card-header">
                                <h5 class="mb-0">
                                    <i class="fas fa-sticky-note me-2"></i>
                                    {{ __('Order Notes (Optional)') }}
                                </h5>
                            </div>
                            <div class="card-body">
                            <textarea class="form-control" name="notes" rows="3"
                                      placeholder="{{ __('Special instructions for your order...') }}"></textarea>
                            </div>
                        </div>
                    </div>

                    <!-- Right Column: Order Summary -->
                    <div class="col-lg-4">
                        <div class="card order-summary sticky-top" style="top: 20px;">
                            <div class="card-header">
                                <h5 class="mb-0">{{ __('Order Summary') }}</h5>
                            </div>
                            <div class="card-body">
                                <!-- Cart Items -->
                                <div class="order-items mb-3">
                                    @foreach($cartItems as $item)
                                        <div class="order-item d-flex align-items-center mb-3">
                                            <div class="item-image me-3">
                                                @if($item['image'])
                                                    <img src="{{ asset('storage/' . $item['image']) }}"
                                                         alt="{{ $item['name'] }}"
                                                         class="rounded"
                                                         style="width: 50px; height: 50px; object-fit: cover;">
                                                @else
                                                    <div
                                                        class="bg-light rounded d-flex align-items-center justify-content-center"
                                                        style="width: 50px; height: 50px;">
                                                        <i class="fas fa-image text-muted"></i>
                                                    </div>
                                                @endif
                                            </div>
                                            <div class="item-details flex-grow-1">
                                                <h6 class="mb-1">{{ $item['name'] }}</h6>
                                                <small class="text-muted">{{ __('Qty') }}
                                                    : {{ $item['quantity'] }}</small>
                                            </div>
                                            <div class="item-price">
                                                <strong>{{ number_format($item['total'], 2) }} {{ __('SAR') }}</strong>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>

                                <hr>

                                <!-- Order Totals -->
                                <div class="order-totals">
                                    <div class="d-flex justify-content-between mb-2">
                                        <span>{{ __('Subtotal') }}:</span>
                                        <span
                                            id="order-subtotal">{{ number_format($cartTotal, 2) }} {{ __('SAR') }}</span>
                                    </div>
                                    <div class="d-flex justify-content-between mb-2">
                                        <span>{{ __('Shipping') }}:</span>
                                        <span
                                            id="order-shipping">{{ number_format($shippingAmount, 2) }} {{ __('SAR') }}</span>
                                    </div>
                                    <div class="d-flex justify-content-between mb-2">
                                        <span>{{ __('Tax (15%)') }}:</span>
                                        <span id="order-tax">{{ number_format($taxAmount, 2) }} {{ __('SAR') }}</span>
                                    </div>
                                    <hr>
                                    <div class="d-flex justify-content-between mb-3">
                                        <h5>{{ __('Total') }}:</h5>
                                        <h5 class="text-primary"
                                            id="order-total">{{ number_format($grandTotal, 2) }} {{ __('SAR') }}</h5>
                                    </div>
                                </div>

                                <!-- Place Order Button -->
                                <button type="submit" class="btn btn-primary btn-lg w-100" id="place-order-btn">
                                    <i class="fas fa-lock me-2"></i>
                                    {{ __('Proceed to Payment') }}
                                </button>

                                <p class="text-muted text-center small mt-3">
                                    {{ __('By proceeding, you agree to our Terms & Conditions and Privacy Policy.') }}
                                </p>

                                <!-- Security Badges -->
                                <div class="security-badges text-center mt-3">
                                    <div class="row g-2">
                                        <div class="col-4">
                                            <div class="security-badge">
                                                <i class="fas fa-shield-alt text-success"></i>
                                                <small>{{ __('SSL Secure') }}</small>
                                            </div>
                                        </div>
                                        <div class="col-4">
                                            <div class="security-badge">
                                                <i class="fas fa-lock text-primary"></i>
                                                <small>{{ __('PCI Compliant') }}</small>
                                            </div>
                                        </div>
                                        <div class="col-4">
                                            <div class="security-badge">
                                                <i class="fab fa-cc-visa text-info"></i>
                                                <small>{{ __('Moyasar') }}</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Loading Overlay -->
    <div id="loading-overlay" class="d-none">
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">{{ __('Processing...') }}</span>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .checkout-progress {
            padding: 2rem 0;
        }

        .progress-step {
            position: relative;
        }

        .progress-step:not(:last-child)::after {
            content: '';
            position: absolute;
            top: 20px;
            left: 60%;
            width: 80%;
            height: 2px;
            background: #e9ecef;
            z-index: 1;
        }

        .progress-step.completed::after,
        .progress-step.active::after {
            background: var(--bs-primary);
        }

        .step-circle {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #e9ecef;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            position: relative;
            z-index: 2;
            color: #6c757d;
        }

        .progress-step.completed .step-circle,
        .progress-step.active .step-circle {
            background: var(--bs-primary);
            color: white;
        }

        .step-label {
            margin-top: 0.5rem;
            font-size: 0.875rem;
            color: #6c757d;
        }

        .progress-step.completed .step-label,
        .progress-step.active .step-label {
            color: var(--bs-primary);
            font-weight: 500;
        }

        .checkout-section {
            border: 1px solid #e9ecef;
            border-radius: 0.5rem;
        }

        .checkout-section .card-header {
            background: #f8f9fa;
            border-bottom: 1px solid #e9ecef;
        }

        .shipping-option,
        .payment-option {
            border: 1px solid #e9ecef;
            border-radius: 0.375rem;
            padding: 1rem;
            transition: border-color 0.2s ease, background-color 0.2s ease;
            cursor: pointer;
        }

        .shipping-option:hover,
        .payment-option:hover {
            border-color: var(--bs-primary);
            background-color: rgba(var(--bs-primary-rgb), 0.05);
        }

        .shipping-option:has(input:checked),
        .payment-option:has(input:checked) {
            border-color: var(--bs-primary);
            background-color: rgba(var(--bs-primary-rgb), 0.1);
        }

        .order-summary {
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        .order-item {
            padding-bottom: 0.75rem;
            border-bottom: 1px solid #e9ecef;
        }

        .order-item:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        .security-badge {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 0.5rem;
            font-size: 0.75rem;
        }

        .security-badge i {
            font-size: 1.2rem;
            margin-bottom: 0.25rem;
        }

        #loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.9);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .checkout-progress {
                padding: 1rem 0;
            }

            .progress-step:not(:last-child)::after {
                display: none;
            }

            .order-summary {
                position: static !important;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        // SIMPLIFIED CHECKOUT - WORKS WITH OFFICIAL MOYASAR FORM

        document.addEventListener('DOMContentLoaded', function () {

            const checkout = {
                isProcessing: false,

                init: function () {
                    console.log('🚀 Simplified Checkout initialized');
                    console.log('💰 Cart Total:', {{ $cartTotal }});

                    this.initEventListeners();
                    this.updateTotals();
                },

                initEventListeners: function () {
                    // Shipping method change
                    const shippingMethods = document.querySelectorAll('input[name="shipping_method"]');
                    shippingMethods.forEach(method => {
                        method.addEventListener('change', () => {
                            this.updateTotals();
                        });
                    });

                    // Billing address toggle
                    const billingToggle = document.getElementById('billing_same_as_shipping');
                    if (billingToggle) {
                        billingToggle.addEventListener('change', function () {
                            const billingForm = document.getElementById('billing_address_form');
                            billingForm.style.display = this.checked ? 'none' : 'block';
                        });
                    }

                    // Form submission
                    const checkoutForm = document.getElementById('checkoutForm');
                    if (checkoutForm) {
                        checkoutForm.addEventListener('submit', (e) => {
                            e.preventDefault();
                            this.handleFormSubmission();
                        });
                    }
                },

                handleFormSubmission: function () {
                    if (this.isProcessing) {
                        console.log('⚠️ Already processing...');
                        return;
                    }

                    const selectedMethod = document.querySelector('input[name="payment_method"]:checked');
                    console.log('📝 Form submitted with payment method:', selectedMethod.value);

                    this.submitOrder();
                },

                submitOrder: function () {
                    if (this.isProcessing) return;

                    this.isProcessing = true;
                    this.disableForm();

                    console.log('📤 Submitting order...');

                    const formData = new FormData(document.getElementById('checkoutForm'));

                    fetch('{{ route("checkout.process") }}', {
                        method: 'POST',
                        body: formData,
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                            'Accept': 'application/json'
                        }
                    })
                        .then(response => response.json())
                        .then(data => {
                            console.log('📥 Server response:', data);

                            if (data.success) {
                                console.log('✅ Redirecting to payment page...');
                                window.location.href = data.redirect_url;
                            } else {
                                this.showError(data.message || 'Order processing failed');
                                this.enableForm();
                            }
                        })
                        .catch(error => {
                            console.error('💥 Network error:', error);
                            this.showError('Network error. Please check your connection and try again.');
                            this.enableForm();
                        })
                        .finally(() => {
                            this.isProcessing = false;
                        });
                },

                updateTotals: function () {
                    const selectedShipping = document.querySelector('input[name="shipping_method"]:checked');
                    const shippingCost = parseFloat(selectedShipping.dataset.price) || 0;
                    const subtotal = {{ $cartTotal }};
                    const taxAmount = subtotal * 0.15;
                    const total = subtotal + taxAmount + shippingCost;

                    const shippingElement = document.getElementById('order-shipping');
                    const totalElement = document.getElementById('order-total');

                    if (shippingElement) shippingElement.textContent = shippingCost.toFixed(2) + ' SAR';
                    if (totalElement) totalElement.textContent = total.toFixed(2) + ' SAR';

                    console.log('💰 Totals updated - Shipping:', shippingCost, 'Total:', total);
                },

                showError: function (message) {
                    alert(message); // Simple alert for now
                },

                disableForm: function () {
                    const submitBtn = document.getElementById('place-order-btn');
                    const loadingOverlay = document.getElementById('loading-overlay');

                    if (submitBtn) {
                        submitBtn.disabled = true;
                        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Processing...';
                    }

                    if (loadingOverlay) {
                        loadingOverlay.classList.remove('d-none');
                    }
                },

                enableForm: function () {
                    const submitBtn = document.getElementById('place-order-btn');
                    const loadingOverlay = document.getElementById('loading-overlay');

                    if (submitBtn) {
                        submitBtn.disabled = false;
                        submitBtn.innerHTML = '<i class="fas fa-lock me-2"></i>Proceed to Payment';
                    }

                    if (loadingOverlay) {
                        loadingOverlay.classList.add('d-none');
                    }
                }
            };

            // Initialize checkout
            checkout.init();
        });
    </script>
@endpush