@php
    $codCity = \App\Models\Setting::config('payments.cod.restricted_city');
    $easypaisaNumber = \App\Models\Setting::config('payments.easypaisa.account_number');
    $easypaisaName = \App\Models\Setting::config('payments.easypaisa.account_name');
@endphp

<x-layouts.frontend title="Checkout">
    <section class="mx-auto max-w-7xl px-6 py-14">
        <div class="mb-10" data-reveal-self>
            <p class="text-xs font-semibold uppercase tracking-[0.15em] text-champagne-light">Almost There</p>
            <h1 class="mt-2 font-display text-3xl text-ink sm:text-4xl">Checkout</h1>
        </div>

        <form
            method="POST" action="{{ route('checkout.store') }}" enctype="multipart/form-data"
            x-data="{ paymentMethod: '{{ old('payment_method', 'cod') }}' }"
            class="grid grid-cols-1 gap-10 lg:grid-cols-3"
        >
            @csrf

            <div class="space-y-6 lg:col-span-2" data-reveal-self>
                <div class="card-premium p-6">
                    <h2 class="mb-4 flex items-center gap-2 font-display text-lg text-ink">
                        <span class="flex h-7 w-7 items-center justify-center rounded-full bg-champagne/15 font-sans text-xs font-semibold text-champagne-light">1</span>
                        Shipping Details
                    </h2>

                    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
                        <div>
                            <x-frontend.label for="customer_name" value="Full Name" />
                            <x-frontend.input id="customer_name" name="customer_name" :value="old('customer_name', auth()->user()->name ?? '')" required autofocus />
                            <x-frontend.error :messages="$errors->get('customer_name')" />
                        </div>
                        <div>
                            <x-frontend.label for="customer_phone" value="Phone Number" />
                            <x-frontend.input id="customer_phone" name="customer_phone" :value="old('customer_phone', auth()->user()->phone ?? '')" placeholder="03XX-XXXXXXX" required />
                            <x-frontend.error :messages="$errors->get('customer_phone')" />
                        </div>
                        <div class="sm:col-span-2">
                            <x-frontend.label for="customer_email" value="Email Address (optional)" />
                            <x-frontend.input id="customer_email" type="email" name="customer_email" :value="old('customer_email', auth()->user()->email ?? '')" />
                            <x-frontend.error :messages="$errors->get('customer_email')" />
                        </div>
                        <div class="sm:col-span-2">
                            <x-frontend.label for="shipping_address" value="Address" />
                            <x-frontend.textarea id="shipping_address" name="shipping_address" :rows="2" required>{{ old('shipping_address') }}</x-frontend.textarea>
                            <x-frontend.error :messages="$errors->get('shipping_address')" />
                        </div>
                        <div>
                            <x-frontend.label for="shipping_city" value="City" />
                            <x-frontend.input id="shipping_city" name="shipping_city" :value="old('shipping_city')" required />
                            <x-frontend.error :messages="$errors->get('shipping_city')" />
                        </div>
                        <div>
                            <x-frontend.label for="shipping_area" value="Area" />
                            <x-frontend.input id="shipping_area" name="shipping_area" :value="old('shipping_area')" required />
                            <x-frontend.error :messages="$errors->get('shipping_area')" />
                        </div>
                        <div class="sm:col-span-2">
                            <x-frontend.label for="order_notes" value="Order Notes (optional)" />
                            <x-frontend.textarea id="order_notes" name="order_notes" :rows="2" placeholder="Delivery instructions, landmark, etc.">{{ old('order_notes') }}</x-frontend.textarea>
                            <x-frontend.error :messages="$errors->get('order_notes')" />
                        </div>
                    </div>
                </div>

                <div class="card-premium p-6">
                    <h2 class="mb-4 flex items-center gap-2 font-display text-lg text-ink">
                        <span class="flex h-7 w-7 items-center justify-center rounded-full bg-champagne/15 font-sans text-xs font-semibold text-champagne-light">2</span>
                        Payment Method
                    </h2>
                    <x-frontend.error :messages="$errors->get('payment_method')" />

                    <div class="space-y-3">
                        <label class="flex cursor-pointer items-start gap-3 rounded-xl border p-4 shadow-sm transition-all duration-200" :class="paymentMethod === 'cod' ? 'border-champagne bg-champagne/5 ring-1 ring-champagne/30' : 'border-black/10 hover:border-black/20'">
                            <input type="radio" name="payment_method" value="cod" x-model="paymentMethod" class="mt-1 text-champagne focus:ring-champagne/40">
                            <div>
                                <p class="inline-flex items-center text-sm font-medium text-ink"><x-icon name="banknote" class="mr-1.5 h-4 w-4 text-champagne-light" />Cash on Delivery</p>
                                <p class="mt-1 text-xs text-ink/50">
                                    Cash on Delivery is available only in {{ $codCity }}.
                                </p>
                            </div>
                        </label>

                        <label class="flex cursor-pointer items-start gap-3 rounded-xl border p-4 shadow-sm transition-all duration-200" :class="paymentMethod === 'easypaisa' ? 'border-champagne bg-champagne/5 ring-1 ring-champagne/30' : 'border-black/10 hover:border-black/20'">
                            <input type="radio" name="payment_method" value="easypaisa" x-model="paymentMethod" class="mt-1 text-champagne focus:ring-champagne/40">
                            <div class="w-full">
                                {{-- Was a WhatsApp glyph before — EasyPaisa is a mobile wallet, not
                                     WhatsApp, so this swaps to the wallet icon that actually matches. --}}
                                <p class="inline-flex items-center text-sm font-medium text-ink"><x-icon name="wallet" class="mr-1.5 h-4 w-4 text-champagne-light" />EasyPaisa</p>
                                <p class="mt-1 text-xs text-ink/50">Send payment, then share your transaction ID below.</p>

                                <div x-show="paymentMethod === 'easypaisa'" x-cloak class="mt-3 space-y-3">
                                    <div class="rounded-lg bg-black/5 px-3 py-2 text-sm">
                                        <p class="text-ink/50">EasyPaisa Number</p>
                                        <p class="font-medium text-ink">{{ $easypaisaNumber ?: 'Not configured yet' }} @if($easypaisaName) — {{ $easypaisaName }} @endif</p>
                                    </div>

                                    <div>
                                        <x-frontend.label for="payment_reference" value="EasyPaisa Transaction ID (optional)" />
                                        <x-frontend.input id="payment_reference" name="payment_reference" :value="old('payment_reference')" />
                                        <x-frontend.error :messages="$errors->get('payment_reference')" />
                                    </div>

                                    <div>
                                        <x-frontend.label for="payment_proof" value="Payment Screenshot (optional)" />
                                        <input id="payment_proof" type="file" name="payment_proof" accept="image/*" class="block w-full text-sm text-ink/60 file:mr-3 file:rounded-lg file:border-0 file:bg-black/5 file:px-3 file:py-2 file:text-sm file:font-medium file:transition-colors file:duration-200 hover:file:bg-black/10">
                                        <x-frontend.error :messages="$errors->get('payment_proof')" />
                                    </div>
                                </div>
                            </div>
                        </label>
                    </div>
                </div>
            </div>

            {{-- Summary --}}
            <div data-reveal-self>
                <div class="card-premium p-6">
                    <h2 class="mb-4 font-display text-lg text-ink">Order Summary</h2>

                    <div class="max-h-64 space-y-3 overflow-y-auto border-b border-black/5 pb-4">
                        @foreach ($cart->items as $item)
                            <div class="flex items-center gap-3 text-sm">
                                <div class="h-12 w-10 shrink-0 overflow-hidden rounded-lg bg-cream shadow-sm">
                                    @if ($item->product?->primaryImage)
                                        <img src="{{ Storage::url($item->product->primaryImage->image_path) }}" alt="" class="h-full w-full object-cover" loading="lazy" decoding="async">
                                    @endif
                                </div>
                                <div class="min-w-0 flex-1">
                                    <p class="truncate text-ink">{{ $item->product->name ?? 'Product' }}</p>
                                    <p class="text-xs text-ink/40">{{ $item->variant?->label }} &times; {{ $item->quantity }}</p>
                                </div>
                                <p class="shrink-0 font-medium text-ink">{{ config('niyarasa.currency.symbol') }} {{ number_format((float) $item->line_total) }}</p>
                            </div>
                        @endforeach
                    </div>

                    <dl class="space-y-2.5 pt-4 text-sm">
                        <div class="flex justify-between">
                            <dt class="text-ink/50">Subtotal</dt>
                            <dd class="tabular-nums text-ink">{{ config('niyarasa.currency.symbol') }} {{ number_format($totals['subtotal']) }}</dd>
                        </div>
                        @if ($totals['discount'] > 0)
                            <div class="flex justify-between">
                                <dt class="text-ink/50">Discount</dt>
                                <dd class="tabular-nums text-success">− {{ config('niyarasa.currency.symbol') }} {{ number_format($totals['discount']) }}</dd>
                            </div>
                        @endif
                        <div class="flex justify-between">
                            <dt class="text-ink/50">Shipping</dt>
                            <dd class="tabular-nums text-ink">
                                @if ($totals['shipping'] > 0)
                                    {{ config('niyarasa.currency.symbol') }} {{ number_format($totals['shipping']) }}
                                @else
                                    <span class="text-success">Free</span>
                                @endif
                            </dd>
                        </div>
                        <div class="flex justify-between border-t border-black/5 pt-2.5 text-base font-semibold">
                            <dt class="text-ink">Grand Total</dt>
                            <dd class="tabular-nums text-ink">{{ config('niyarasa.currency.symbol') }} {{ number_format($totals['grand_total']) }}</dd>
                        </div>
                    </dl>

                    <x-frontend.button type="submit" class="btn-block mt-6">
                        Place Order
                    </x-frontend.button>

                    <a href="{{ route('cart.index') }}" class="mt-3 block text-center text-sm text-ink/50 transition-colors duration-200 hover:text-ink">
                        &larr; Back to Cart
                    </a>
                </div>
            </div>
        </form>
    </section>
</x-layouts.frontend>
