@extends('layouts.store')

@section('title', __('Secure Checkout') . ' | OMNITRADE Global Direct')

@section('content')
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-10">
    <!-- Step Indicator -->
    <div class="flex items-center justify-center gap-2 sm:gap-4 mb-6 sm:mb-10 text-xs sm:text-sm font-bold flex-wrap">
        <span class="text-primary flex items-center gap-1.5">
            <span class="material-symbols-outlined text-[18px]">shopping_bag</span> 1. {{ __('Bag') }}
        </span>
        <span class="text-outline">&mdash;</span>
        <span class="text-primary-container flex items-center gap-1.5">
            <span class="material-symbols-outlined text-[18px]">local_shipping</span> 2. {{ __('Shipping & Payment') }}
        </span>
        <span class="text-outline">&mdash;</span>
        <span class="text-outline flex items-center gap-1.5">
            <span class="material-symbols-outlined text-[18px]">check_circle</span> 3. {{ __('Order Confirmed') }}
        </span>
    </div>

    <form id="checkoutForm" action="{{ route('checkout.process') }}" method="POST">
        @csrf
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 sm:gap-8 items-start">
            <!-- Left: Contact, Shipping Address, Payment Method (lg:col-span-7) -->
            <div class="lg:col-span-7 space-y-6">
                <!-- Customer Contact Information -->
                <div class="bg-surface-container-lowest border border-surface-container rounded-2xl p-5 sm:p-6 shadow-sm">
                    <h2 class="text-base sm:text-lg font-bold text-on-surface mb-4 flex items-center gap-2">
                        <span class="material-symbols-outlined text-primary text-[22px]">person</span>
                        <span>{{ __('Customer Contact Information') }}</span>
                    </h2>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
                        <div>
                            <label class="block text-xs font-bold uppercase tracking-wider text-secondary mb-1.5">{{ __('Full Name *') }}</label>
                            <input type="text" name="customer_name" required value="{{ old('customer_name', auth()->user()?->name ?? 'Sophia Montgomery') }}" class="w-full h-11 px-3.5 rounded-xl bg-surface-container-low border border-surface-container text-sm text-on-surface placeholder:text-outline focus:outline-none focus:border-primary">
                        </div>

                        <div>
                            <label class="block text-xs font-bold uppercase tracking-wider text-secondary mb-1.5">{{ __('Email Address (For Tracking) *') }}</label>
                            <input type="email" name="customer_email" required value="{{ old('customer_email', auth()->user()?->email ?? 'sophia.m@example.com') }}" class="w-full h-11 px-3.5 rounded-xl bg-surface-container-low border border-surface-container text-sm text-on-surface placeholder:text-outline focus:outline-none focus:border-primary">
                        </div>
                    </div>

                    <div>
                        <label class="block text-xs font-bold uppercase tracking-wider text-secondary mb-1.5">{{ __('Mobile Phone (For SMS Tracking Updates)') }}</label>
                        <input type="text" name="customer_phone" value="{{ old('customer_phone', auth()->user()?->phone ?? '+1 (555) 019-8234') }}" class="w-full h-11 px-3.5 rounded-xl bg-surface-container-low border border-surface-container text-sm text-on-surface placeholder:text-outline focus:outline-none focus:border-primary">
                    </div>
                </div>

                <!-- Shipping Destination -->
                <div class="bg-surface-container-lowest border border-surface-container rounded-2xl p-5 sm:p-6 shadow-sm">
                    <h2 class="text-base sm:text-lg font-bold text-on-surface mb-4 flex items-center gap-2">
                        <span class="material-symbols-outlined text-primary text-[22px]">pin_drop</span>
                        <span>{{ __('Shipping Destination') }}</span>
                    </h2>

                    <div class="mb-4">
                        <label class="block text-xs font-bold uppercase tracking-wider text-secondary mb-1.5">{{ __('Street Address *') }}</label>
                        <input type="text" name="shipping_address" required value="{{ old('shipping_address', auth()->user()?->address ?? '742 Evergreen Terrace, Apt 3B') }}" class="w-full h-11 px-3.5 rounded-xl bg-surface-container-low border border-surface-container text-sm text-on-surface placeholder:text-outline focus:outline-none focus:border-primary">
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-4">
                        <div>
                            <label class="block text-xs font-bold uppercase tracking-wider text-secondary mb-1.5">{{ __('City *') }}</label>
                            <input type="text" name="city" required value="{{ old('city', auth()->user()?->city ?? 'Springfield') }}" class="w-full h-11 px-3.5 rounded-xl bg-surface-container-low border border-surface-container text-sm text-on-surface placeholder:text-outline focus:outline-none focus:border-primary">
                        </div>

                        <div>
                            <label class="block text-xs font-bold uppercase tracking-wider text-secondary mb-1.5">{{ __('State / Province *') }}</label>
                            <input type="text" name="state" required value="{{ old('state', auth()->user()?->state ?? 'OR') }}" class="w-full h-11 px-3.5 rounded-xl bg-surface-container-low border border-surface-container text-sm text-on-surface placeholder:text-outline focus:outline-none focus:border-primary">
                        </div>

                        <div>
                            <label class="block text-xs font-bold uppercase tracking-wider text-secondary mb-1.5">{{ __('Postal / ZIP Code *') }}</label>
                            <input type="text" name="postal_code" required value="{{ old('postal_code', auth()->user()?->postal_code ?? '97477') }}" class="w-full h-11 px-3.5 rounded-xl bg-surface-container-low border border-surface-container text-sm text-on-surface placeholder:text-outline focus:outline-none focus:border-primary">
                        </div>
                    </div>

                    <div>
                        <label class="block text-xs font-bold uppercase tracking-wider text-secondary mb-1.5">{{ __('Country Destination') }}</label>
                        <select name="country" class="w-full h-11 px-3.5 rounded-xl bg-surface-container-low border border-surface-container text-sm text-on-surface focus:outline-none focus:border-primary">
                            <option value="US" selected>United States (Domestic Express)</option>
                            <option value="IT">Italy / Italia (Corriere Espresso Diretto)</option>
                            <option value="CA">Canada (ePacket Direct)</option>
                            <option value="GB">United Kingdom (Royal Mail Priority)</option>
                            <option value="AU">Australia (Australia Post Express)</option>
                            <option value="DE">Germany (DHL Paket)</option>
                            <option value="FR">France (La Poste Colissimo)</option>
                            <option value="ES">Spain (Correos Express)</option>
                        </select>
                    </div>
                </div>

                <!-- Payment Method Section -->
                <div class="bg-surface-container-lowest border border-surface-container rounded-2xl p-5 sm:p-6 shadow-sm">
                    <h2 class="text-base sm:text-lg font-bold text-on-surface mb-1 flex items-center gap-2">
                        <span class="material-symbols-outlined text-primary text-[22px]">credit_card</span>
                        <span>{{ __('Payment Gateway') }}</span>
                    </h2>
                    <p class="text-xs text-secondary mb-4">{{ __('Choose your preferred payment provider. All transactions are protected via 256-Bit SSL encryption.') }}</p>

                    <!-- Radio Options -->
                    <div class="space-y-3 mb-5">
                        @if($stripeEnabled || (!$stripeEnabled && !$paypalEnabled))
                            <!-- Stripe Option -->
                            <label onclick="selectPaymentMethod('stripe')" id="stripeLabel" class="flex items-center justify-between p-4 rounded-xl border-2 {{ ($stripeEnabled || !$paypalEnabled) ? 'border-primary bg-primary-container/10' : 'border-surface-container-high bg-surface-container-lowest' }} cursor-pointer transition-all">
                                <div class="flex items-center gap-3">
                                    <input type="radio" name="payment_method" value="stripe" {{ ($stripeEnabled || !$paypalEnabled) ? 'checked' : '' }} class="w-4 h-4 text-primary accent-primary">
                                    <div>
                                        <span class="text-sm font-bold text-on-surface block">{{ __('Credit / Debit Card (Powered by Stripe)') }}</span>
                                        <span class="text-[11px] text-secondary">Instant processing &bull; {{ ($stripeMode ?? 'test') === 'live' ? 'Live Gateway' : 'Test Sandbox' }}</span>
                                    </div>
                                </div>
                                <div class="flex gap-1.5 shrink-0">
                                    <span class="px-2 py-0.5 rounded bg-surface-container text-[10px] font-bold text-on-surface">VISA</span>
                                    <span class="px-2 py-0.5 rounded bg-surface-container text-[10px] font-bold text-on-surface">MC</span>
                                    <span class="px-2 py-0.5 rounded bg-surface-container text-[10px] font-bold text-on-surface">AMEX</span>
                                </div>
                            </label>
                        @endif

                        @if($paypalEnabled)
                            <!-- PayPal Option -->
                            <label onclick="selectPaymentMethod('paypal')" id="paypalLabel" class="flex items-center justify-between p-4 rounded-xl border-2 {{ (!$stripeEnabled && $paypalEnabled) ? 'border-primary bg-primary-container/10' : 'border-surface-container-high bg-surface-container-lowest' }} cursor-pointer transition-all">
                                <div class="flex items-center gap-3">
                                    <input type="radio" name="payment_method" value="paypal" {{ (!$stripeEnabled && $paypalEnabled) ? 'checked' : '' }} class="w-4 h-4 text-primary accent-primary">
                                    <div>
                                        <span class="text-sm font-bold text-on-surface block">{{ __('PayPal Express Checkout') }}</span>
                                        <span class="text-[11px] text-secondary">Pay with PayPal balance or linked cards &bull; {{ ucfirst($paypalMode ?? 'sandbox') }}</span>
                                    </div>
                                </div>
                                <span class="text-sm font-extrabold text-[#003087] italic shrink-0">PayPal</span>
                            </label>
                        @endif
                    </div>

                    <!-- Stripe Card Input Simulation Fields -->
                    <div id="stripeCardFields" class="{{ ($stripeEnabled || !$paypalEnabled) ? '' : 'hidden' }} bg-surface-container-low border border-surface-container rounded-xl p-4 sm:p-5 mb-5 space-y-3.5">
                        <div class="flex items-center justify-between text-xs mb-1">
                            <span class="font-bold text-secondary">{{ __('Cardholder Information') }}</span>
                            <span class="text-[11px] text-primary font-semibold">Stripe Secure Card Element</span>
                        </div>
                        <div>
                            <label class="block text-xs font-bold text-secondary mb-1">{{ __('Card Number') }}</label>
                            <div class="relative">
                                <input type="text" placeholder="4242 •••• •••• 4242" value="4242 8920 4812 4242" class="w-full h-10 pl-9 pr-3 rounded-lg bg-surface-container-lowest border border-surface-container-high text-xs font-mono text-on-surface focus:outline-none focus:border-primary">
                                <span class="material-symbols-outlined text-[18px] text-outline absolute left-2.5 top-2.5">credit_card</span>
                            </div>
                        </div>

                        <div class="grid grid-cols-2 gap-3">
                            <div>
                                <label class="block text-xs font-bold text-secondary mb-1">{{ __('Expiration') }}</label>
                                <input type="text" placeholder="MM / YY" value="08 / 28" class="w-full h-10 px-3 rounded-lg bg-surface-container-lowest border border-surface-container-high text-xs text-on-surface focus:outline-none focus:border-primary">
                            </div>
                            <div>
                                <label class="block text-xs font-bold text-secondary mb-1">{{ __('Security CVC') }}</label>
                                <input type="text" placeholder="CVC" value="382" class="w-full h-10 px-3 rounded-lg bg-surface-container-lowest border border-surface-container-high text-xs text-on-surface focus:outline-none focus:border-primary">
                            </div>
                        </div>
                        <div class="text-[11px] text-secondary flex items-center gap-1.5 pt-1">
                            <span class="material-symbols-outlined text-[14px] text-emerald-600">verified</span>
                            <span>{{ __('Encrypted Stripe tokenization • Zero sensitive card data stored on server') }}</span>
                        </div>
                    </div>

                    <!-- PayPal info container -->
                    <div id="paypalInfoFields" class="{{ (!$stripeEnabled && $paypalEnabled) ? '' : 'hidden' }} bg-surface-container-low border border-primary/30 rounded-xl p-4 sm:p-5 mb-5 space-y-2 text-xs text-on-surface-variant">
                        <div class="flex items-center gap-2 font-bold text-on-surface text-sm">
                            <span class="text-sm font-extrabold text-[#003087] italic">PayPal</span>
                            <span>Express One-Touch Gateway</span>
                        </div>
                        <p class="leading-relaxed">
                            Clicking <strong>{{ __('Complete Order') }}</strong> will authorize your order via the PayPal gateway configured in your platform settings (Mode: <strong>{{ strtoupper($paypalMode ?? 'sandbox') }}</strong>).
                        </p>
                        <div class="text-[11px] text-secondary flex items-center gap-1 pt-1">
                            <span class="material-symbols-outlined text-[14px] text-primary">security</span>
                            <span>{{ __('Buyer Protection • Instant confirmation • Auto-tracking dispatch') }}</span>
                        </div>
                    </div>

                    <button type="submit" id="submitOrderBtn" class="w-full h-14 rounded-xl bg-primary-container hover:bg-primary text-on-primary font-label-lg text-base font-bold flex items-center justify-center gap-2 shadow-md hover:shadow-lg transition-all transform active:scale-98 cursor-pointer">
                        <span class="material-symbols-outlined text-[20px]">lock</span>
                        <span id="submitBtnText">{{ __('Complete Order') }} &bull; ${{ number_format($total, 2) }}</span>
                    </button>
                </div>
            </div>

            <!-- Right: Order Summary Sidebar (lg:col-span-5) -->
            <div class="lg:col-span-5 bg-surface-container-lowest border border-surface-container rounded-2xl p-5 sm:p-6 shadow-sm sticky top-44 space-y-4">
                <h3 class="text-base sm:text-lg font-bold text-on-surface border-b border-surface-container pb-3">
                    {{ __('Order Summary') }} ({{ count($cart) }} {{ __('items') }})
                </h3>

                <!-- Cart Line Items -->
                <div class="max-h-64 overflow-y-auto divide-y divide-surface-container pr-1">
                    @foreach($cart as $item)
                        <div class="py-3 flex items-center justify-between gap-3">
                            <div class="flex items-center gap-3 min-w-0">
                                <div class="relative shrink-0">
                                    <img src="{{ $item['image'] }}" alt="{{ $item['title'] }}" class="w-12 h-12 rounded-xl object-cover border border-surface-container bg-surface-container-low">
                                    <span class="absolute -top-1.5 -right-1.5 bg-primary text-on-primary text-[10px] font-bold w-4 h-4 rounded-full flex items-center justify-center">
                                        {{ $item['quantity'] }}
                                    </span>
                                </div>
                                <div class="min-w-0">
                                    <h4 class="text-xs sm:text-sm font-bold text-on-surface truncate">{{ $item['title'] }}</h4>
                                    @if(!empty($item['variant_title']))
                                        <div class="text-[11px] text-secondary">{{ $item['variant_title'] }}</div>
                                    @endif
                                </div>
                            </div>
                            <span class="text-xs sm:text-sm font-bold text-on-surface shrink-0">
                                ${{ number_format($item['price'] * $item['quantity'], 2) }}
                            </span>
                        </div>
                    @endforeach
                </div>

                <!-- Price Breakdown -->
                <div class="pt-3 border-t border-surface-container space-y-2 text-xs sm:text-sm text-on-surface-variant">
                    <div class="flex justify-between">
                        <span>{{ __('Subtotal') }}</span>
                        <strong class="text-on-surface">${{ number_format($subtotal, 2) }}</strong>
                    </div>
                    <div class="flex justify-between">
                        <span>{{ __('Worldwide Express Shipping') }}</span>
                        <span>
                            @if($shippingFee == 0)
                                <strong class="text-primary font-bold">{{ __('Free') }}</strong>
                            @else
                                <strong class="text-on-surface">${{ number_format($shippingFee, 2) }}</strong>
                            @endif
                        </span>
                    </div>
                </div>

                <div class="pt-3 border-t border-surface-container flex items-baseline justify-between">
                    <span class="text-sm sm:text-base font-bold text-on-surface">{{ __('Total Amount') }}</span>
                    <span class="text-2xl sm:text-3xl font-extrabold text-on-surface font-headline-xl">
                        ${{ number_format($total, 2) }}
                    </span>
                </div>

                <!-- Assurance Badges -->
                <div class="pt-3 border-t border-surface-container space-y-2 text-xs text-on-surface-variant">
                    <div class="flex items-center gap-2">
                        <span class="material-symbols-outlined text-primary text-[18px]">local_shipping</span>
                        <span>{{ __('Automated direct dispatch with live tracking') }}</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <span class="material-symbols-outlined text-primary text-[18px]">verified_user</span>
                        <span>{{ __('30-Day Money Back Buyer Protection') }}</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <span class="material-symbols-outlined text-primary text-[18px]">lock</span>
                        <span>{{ __('Direct 256-Bit SSL Gateway Tokenization') }}</span>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

@push('scripts')
<script>
    const txtPayCard = "{{ __('Pay with Card') }} &bull; ${{ number_format($total, 2) }}";
    const txtPayPaypal = "{{ __('Pay with PayPal') }} &bull; ${{ number_format($total, 2) }}";

    function selectPaymentMethod(method) {
        const stripeLabel = document.getElementById('stripeLabel');
        const paypalLabel = document.getElementById('paypalLabel');
        const stripeCardFields = document.getElementById('stripeCardFields');
        const paypalInfoFields = document.getElementById('paypalInfoFields');

        if (method === 'stripe') {
            stripeLabel?.classList.add('border-primary', 'bg-primary-container/10');
            stripeLabel?.classList.remove('border-surface-container-high', 'bg-surface-container-lowest');
            paypalLabel?.classList.remove('border-primary', 'bg-primary-container/10');
            paypalLabel?.classList.add('border-surface-container-high', 'bg-surface-container-lowest');

            stripeCardFields?.classList.remove('hidden');
            paypalInfoFields?.classList.add('hidden');

            const btnText = document.getElementById('submitBtnText');
            if (btnText) btnText.innerHTML = txtPayCard;
        } else {
            paypalLabel?.classList.add('border-primary', 'bg-primary-container/10');
            paypalLabel?.classList.remove('border-surface-container-high', 'bg-surface-container-lowest');
            stripeLabel?.classList.remove('border-primary', 'bg-primary-container/10');
            stripeLabel?.classList.add('border-surface-container-high', 'bg-surface-container-lowest');

            stripeCardFields?.classList.add('hidden');
            paypalInfoFields?.classList.remove('hidden');

            const btnText = document.getElementById('submitBtnText');
            if (btnText) btnText.innerHTML = txtPayPaypal;
        }
    }

    document.getElementById('checkoutForm')?.addEventListener('submit', function(e) {
        const btn = document.getElementById('submitOrderBtn');
        if (btn) {
            btn.disabled = true;
            btn.innerHTML = `<span class="material-symbols-outlined text-[20px] animate-spin">progress_activity</span><span>{{ __('Authorizing Payment...') }}</span>`;
        }
    });
</script>
@endpush
@endsection