@extends('layouts.app')
@section('title', 'Checkout — Jumia Clone')

@section('content')
<div class="max-w-5xl mx-auto px-3 md:px-6 py-4"
     x-data="checkout()"
     x-init="init()">

    {{-- Header --}}
    <div class="flex items-center gap-3 mb-5">
        <a href="/" class="text-gray-400 hover:text-gray-600">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
            </svg>
        </a>
        <h1 class="text-lg font-bold text-gray-900">Checkout</h1>
    </div>

    {{-- Progress steps --}}
    <div class="flex items-center gap-2 mb-6">
        @foreach(['Address', 'Delivery', 'Payment'] as $i => $label)
        <div class="flex items-center gap-2 flex-1">
            <div class="flex items-center gap-2">
                <div class="w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold transition-colors"
                     :class="step > {{ $i + 1 }} ? 'step-done' : (step === {{ $i + 1 }} ? 'step-active' : 'step-inactive')">
                    <span x-show="step <= {{ $i + 1 }}">{{ $i + 1 }}</span>
                    <span x-show="step > {{ $i + 1 }}">✓</span>
                </div>
                <span class="text-xs font-medium hidden sm:block"
                      :class="step >= {{ $i + 1 }} ? 'text-gray-900' : 'text-gray-400'">{{ $label }}</span>
            </div>
            @if($i < 2)
            <div class="flex-1 h-px mx-1"
                 :class="step > {{ $i + 1 }} ? 'bg-green-400' : 'bg-gray-200'"></div>
            @endif
        </div>
        @endforeach
    </div>

    <div class="md:grid md:grid-cols-3 md:gap-6">

        {{-- ── Left: Steps ── --}}
        <div class="md:col-span-2 space-y-4">

            {{-- Step 1: Address --}}
            <div x-show="step === 1" class="animate-fade-in space-y-4">
                <div class="card-padded">
                    <h2 class="text-base font-bold text-gray-900 mb-4 flex items-center gap-2">
                        <span class="w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">1</span>
                        Delivery Address
                    </h2>

                    {{-- Address list --}}
                    <div class="space-y-3">
                        <template x-for="addr in addresses" :key="addr.id">
                            <label class="flex items-start gap-3 p-3 border-2 rounded-xl cursor-pointer transition-colors"
                                   :class="selectedAddress === addr.id ? 'border-orange-500 bg-orange-50' : 'border-gray-200 hover:border-gray-300'">
                                <input type="radio" :value="addr.id" x-model="selectedAddress" class="mt-1 text-orange-500">
                                <div class="flex-1">
                                    <div class="flex items-center gap-2">
                                        <p class="text-sm font-semibold text-gray-900"
                                           x-text="`${addr.first_name} ${addr.last_name}`"></p>
                                        <span x-show="addr.is_default" class="badge-orange">Default</span>
                                    </div>
                                    <p class="text-sm text-gray-600 mt-0.5" x-text="addr.phone"></p>
                                    <p class="text-sm text-gray-600"
                                       x-text="`${addr.address_line_1}, ${addr.city}, ${addr.state}`"></p>
                                </div>
                            </label>
                        </template>

                        {{-- No addresses --}}
                        <div x-show="addresses.length === 0"
                             class="text-center py-6 border-2 border-dashed border-gray-200 rounded-xl">
                            <p class="text-gray-500 text-sm mb-3">No saved addresses yet</p>
                        </div>
                    </div>

                    {{-- Add new address toggle --}}
                    <div class="mt-3" x-data="{ showForm: false }">
                        <button @click="showForm = !showForm"
                                class="flex items-center gap-2 text-orange-500 text-sm font-medium hover:underline">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                            </svg>
                            Add new address
                        </button>

                        <div x-show="showForm" x-collapse class="mt-4 space-y-3">
                            <div class="grid grid-cols-2 gap-3">
                                <div>
                                    <label class="label">First Name</label>
                                    <input type="text" class="input" placeholder="John">
                                </div>
                                <div>
                                    <label class="label">Last Name</label>
                                    <input type="text" class="input" placeholder="Doe">
                                </div>
                            </div>
                            <div>
                                <label class="label">Phone</label>
                                <input type="tel" class="input" placeholder="+234 801 234 5678">
                            </div>
                            <div>
                                <label class="label">Street Address</label>
                                <input type="text" class="input" placeholder="12 Lagos Street, Ikeja">
                            </div>
                            <div class="grid grid-cols-2 gap-3">
                                <div>
                                    <label class="label">City</label>
                                    <input type="text" class="input" placeholder="Lagos">
                                </div>
                                <div>
                                    <label class="label">State</label>
                                    <select class="input">
                                        @foreach(['Abia','Adamawa','Akwa Ibom','Anambra','Bauchi','Bayelsa','Benue','Borno','Cross River','Delta','Ebonyi','Edo','Ekiti','Enugu','FCT','Gombe','Imo','Jigawa','Kaduna','Kano','Katsina','Kebbi','Kogi','Kwara','Lagos','Nasarawa','Niger','Ogun','Ondo','Osun','Oyo','Plateau','Rivers','Sokoto','Taraba','Yobe','Zamfara'] as $state)
                                        <option>{{ $state }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <button class="btn-primary w-full">Save Address</button>
                        </div>
                    </div>
                </div>

                <button @click="step = 2" :disabled="!selectedAddress"
                        class="btn-primary w-full py-3.5 text-base">
                    Continue to Delivery →
                </button>
            </div>

            {{-- Step 2: Delivery options --}}
            <div x-show="step === 2" class="animate-fade-in space-y-4">
                <div class="card-padded">
                    <h2 class="text-base font-bold text-gray-900 mb-4 flex items-center gap-2">
                        <span class="w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">2</span>
                        Delivery Options
                    </h2>

                    <div class="space-y-3">
                        @foreach([
                            ['value' => 'standard', 'label' => 'Standard Delivery', 'time' => '2–5 business days', 'price' => 'Free above ₦10,000', 'icon' => '🚚'],
                            ['value' => 'express',  'label' => 'Express Delivery',  'time' => 'Next business day',  'price' => '₦1,500',           'icon' => '⚡'],
                        ] as $opt)
                        <label class="flex items-start gap-3 p-4 border-2 rounded-xl cursor-pointer transition-colors"
                               :class="deliveryOption === '{{ $opt['value'] }}' ? 'border-orange-500 bg-orange-50' : 'border-gray-200 hover:border-gray-300'">
                            <input type="radio" value="{{ $opt['value'] }}" x-model="deliveryOption" class="mt-1 text-orange-500">
                            <div class="flex items-start justify-between flex-1">
                                <div class="flex items-center gap-2">
                                    <span class="text-xl">{{ $opt['icon'] }}</span>
                                    <div>
                                        <p class="text-sm font-semibold text-gray-900">{{ $opt['label'] }}</p>
                                        <p class="text-xs text-gray-500">{{ $opt['time'] }}</p>
                                    </div>
                                </div>
                                <span class="text-sm font-bold text-orange-500">{{ $opt['price'] }}</span>
                            </div>
                        </label>
                        @endforeach
                    </div>

                    {{-- Notes --}}
                    <div class="mt-4">
                        <label class="label">Order Notes <span class="text-gray-400 font-normal">(optional)</span></label>
                        <textarea x-model="notes" rows="2"
                                  placeholder="Any special instructions for your order..."
                                  class="input resize-none"></textarea>
                    </div>
                </div>

                <div class="flex gap-3">
                    <button @click="step = 1" class="btn-ghost border border-gray-300 flex-1 py-3">← Back</button>
                    <button @click="step = 3" class="btn-primary flex-1 py-3">Continue to Payment →</button>
                </div>
            </div>

            {{-- Step 3: Payment --}}
            <div x-show="step === 3" class="animate-fade-in space-y-4">
                <div class="card-padded">
                    <h2 class="text-base font-bold text-gray-900 mb-4 flex items-center gap-2">
                        <span class="w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">3</span>
                        Payment
                    </h2>

                    <div class="space-y-3">
                        <div class="p-4 border-2 border-orange-500 bg-orange-50 rounded-xl">
                            <div class="flex items-center gap-3">
                                <div class="w-10 h-10 bg-green-500 rounded-lg flex items-center justify-center text-white font-bold text-sm">P</div>
                                <div>
                                    <p class="text-sm font-semibold text-gray-900">Paystack</p>
                                    <p class="text-xs text-gray-500">Pay securely with card, bank transfer or USSD</p>
                                </div>
                                <div class="ml-auto">
                                    <div class="w-4 h-4 rounded-full bg-orange-500 border-4 border-orange-200"></div>
                                </div>
                            </div>
                        </div>
                        <div class="p-4 border-2 border-gray-200 rounded-xl opacity-60 cursor-not-allowed">
                            <div class="flex items-center gap-3">
                                <div class="w-10 h-10 bg-orange-400 rounded-lg flex items-center justify-center text-white font-bold text-sm">F</div>
                                <div>
                                    <p class="text-sm font-semibold text-gray-900">Flutterwave</p>
                                    <p class="text-xs text-gray-500">Coming soon</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Security note --}}
                    <div class="mt-4 flex items-center gap-2 text-xs text-gray-500 bg-gray-50 rounded-lg p-3">
                        <svg class="w-4 h-4 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
                        </svg>
                        Your payment details are encrypted and secure. We never store your card information.
                    </div>
                </div>

                <div class="flex gap-3">
                    <button @click="step = 2" class="btn-ghost border border-gray-300 flex-1 py-3">← Back</button>
                    <button @click="placeOrder()"
                            :disabled="loading || paymentLoading"
                            class="btn-primary flex-1 py-3.5 text-base">
                        <span x-show="!loading && !paymentLoading" class="flex items-center gap-2 justify-center">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
                            </svg>
                            Place Order & Pay
                        </span>
                        <span x-show="loading || paymentLoading" class="flex items-center gap-2 justify-center">
                            <span class="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></span>
                            <span x-text="loading ? 'Placing order...' : 'Redirecting to payment...'"></span>
                        </span>
                    </button>
                </div>
            </div>
        </div>

        {{-- ── Right: Order Summary ── --}}
        <div class="hidden md:block">
            <div class="card-padded sticky top-20" x-data="cartManager()" x-init="init()">
                <h2 class="text-sm font-bold text-gray-900 mb-3">Order Summary</h2>

                {{-- Items --}}
                <div class="space-y-2 mb-3 max-h-64 overflow-y-auto">
                    <template x-for="item in cart?.items || []" :key="item.id">
                        <div class="flex gap-2">
                            <div class="w-10 h-10 bg-gray-100 rounded flex-shrink-0">
                                <img :src="item.product?.primary_image || '/images/placeholder.png'"
                                     class="w-full h-full object-cover rounded">
                            </div>
                            <div class="flex-1 min-w-0">
                                <p class="text-xs text-gray-800 line-clamp-1" x-text="item.product_name"></p>
                                <p class="text-xs text-gray-500" x-text="`Qty: ${item.quantity}`"></p>
                            </div>
                            <span class="text-xs font-semibold text-gray-900 flex-shrink-0"
                                  x-text="formatPrice(item.subtotal)"></span>
                        </div>
                    </template>
                </div>

                <div class="border-t border-gray-100 pt-3 space-y-2">
                    <div class="flex justify-between text-sm text-gray-600">
                        <span>Subtotal</span>
                        <span x-text="formatPrice(summary?.subtotal || 0)"></span>
                    </div>
                    <div x-show="summary?.coupon_discount > 0" class="flex justify-between text-sm text-green-600">
                        <span>Coupon discount</span>
                        <span x-text="'- ' + formatPrice(summary?.coupon_discount || 0)"></span>
                    </div>
                    <div class="flex justify-between text-sm text-gray-600">
                        <span>Delivery</span>
                        <span :class="deliveryOption === 'express' ? 'text-gray-900' : 'text-green-600'"
                              x-text="deliveryOption === 'express' ? '₦1,500' : 'Free'"></span>
                    </div>
                    <div class="flex justify-between font-bold text-gray-900 pt-2 border-t border-gray-200">
                        <span>Total</span>
                        <span class="text-orange-500"
                              x-text="formatPrice((summary?.total_before_shipping || 0) + (deliveryOption === 'express' ? 1500 : 0))"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection