@extends('layouts.app')

@section('title', 'Checkout')

@section('content')

    <x-breadcrumb :items="[['label' => 'Cart', 'url' => route('cart')], ['label' => 'Checkout']]" />

    <section class="py-12 lg:py-16">
        <div class="container-shop">
            <h1 class="font-serif text-3xl font-medium sm:text-4xl">Checkout</h1>

            <div class="mt-10 grid gap-10 lg:grid-cols-[1fr_420px]">

                {{-- Checkout Form --}}
                <form class="space-y-10" action="{{ route('checkout.store') }}" method="POST">
                    @csrf

                    <fieldset>
                        <legend class="mb-5 font-serif text-xl font-medium">Contact Information</legend>
                        <div class="grid gap-5 sm:grid-cols-2">
                            <div>
                                <label for="customer_name" class="field-label">Full Name <span class="text-terra-500">*</span></label>
                                <input id="customer_name" name="customer_name" type="text" value="{{ old('customer_name', $user->name ?? '') }}" class="field-input" required placeholder="Ananya Sharma">
                            </div>
                            <div>
                                <label for="customer_email" class="field-label">Email Address <span class="text-terra-500">*</span></label>
                                <input id="customer_email" name="customer_email" type="email" value="{{ old('customer_email', $user->email ?? '') }}" class="field-input" required placeholder="you@example.com">
                            </div>
                            <div class="sm:col-span-2">
                                <label for="customer_phone" class="field-label">Phone Number <span class="text-terra-500">*</span></label>
                                <input id="customer_phone" name="customer_phone" type="tel" value="{{ old('customer_phone', $user->phone ?? '') }}" class="field-input" required placeholder="+91 98765 43210">
                            </div>
                        </div>
                    </fieldset>

                    <fieldset>
                        <legend class="mb-5 font-serif text-xl font-medium">Shipping Address</legend>
                        <div class="grid gap-5 sm:grid-cols-2">
                            <div class="sm:col-span-2">
                                <label for="shipping_address" class="field-label">Street Address <span class="text-terra-500">*</span></label>
                                <input id="shipping_address" name="shipping_address" type="text" value="{{ old('shipping_address', $user->address ?? '') }}" placeholder="Flat / House No., Street, Landmark" class="field-input" required>
                            </div>
                            <div>
                                <label for="city" class="field-label">City <span class="text-terra-500">*</span></label>
                                <input id="city" name="city" type="text" value="{{ old('city', $user->city ?? '') }}" class="field-input" required placeholder="Bengaluru">
                            </div>
                            <div>
                                <label for="state" class="field-label">State <span class="text-terra-500">*</span></label>
                                <input id="state" name="state" type="text" value="{{ old('state', $user->state ?? 'Karnataka') }}" class="field-input" required placeholder="Karnataka">
                            </div>
                            <div class="sm:col-span-2">
                                <label for="pincode" class="field-label">PIN Code <span class="text-terra-500">*</span></label>
                                <input id="pincode" name="pincode" type="text" inputmode="numeric" value="{{ old('pincode', $user->pincode ?? '') }}" class="field-input" required placeholder="560001">
                            </div>
                        </div>
                    </fieldset>

                    <fieldset>
                        <legend class="mb-5 font-serif text-xl font-medium">Payment Option</legend>
                        <div class="space-y-3">
                            <label class="flex cursor-pointer items-center justify-between border border-sand-300 px-5 py-4 transition-colors has-[:checked]:border-moss-700 has-[:checked]:bg-moss-50 rounded-lg">
                                <span class="flex items-center gap-3.5">
                                    <input type="radio" name="payment_method" value="cod" class="h-4 w-4 cursor-pointer border-sand-300 text-moss-700 focus:ring-moss-600" checked>
                                    <span>
                                        <span class="block text-sm font-semibold text-ink-900">Cash on Delivery (COD)</span>
                                        <span class="block text-xs text-ink-500">Pay cash upon delivery to your doorstep</span>
                                    </span>
                                </span>
                            </label>
                            <label class="flex cursor-pointer items-center justify-between border border-sand-300 px-5 py-4 transition-colors has-[:checked]:border-moss-700 has-[:checked]:bg-moss-50 rounded-lg">
                                <span class="flex items-center gap-3.5">
                                    <input type="radio" name="payment_method" value="online" class="h-4 w-4 cursor-pointer border-sand-300 text-moss-700 focus:ring-moss-600">
                                    <span>
                                        <span class="block text-sm font-semibold text-ink-900">Online Payment / UPI</span>
                                        <span class="block text-xs text-ink-500">Instant pay via Google Pay, PhonePe, Paytm or Credit Card</span>
                                    </span>
                                </span>
                            </label>
                        </div>
                    </fieldset>

                    <div>
                        <label for="notes" class="field-label">Delivery Notes (Optional)</label>
                        <textarea id="notes" name="notes" rows="2" class="field-input" placeholder="Any special delivery instructions..."></textarea>
                    </div>

                    <button type="submit" class="btn-primary w-full justify-center !py-4 !text-base cursor-pointer">
                        <x-icon name="lock" class="h-5 w-5" /> Place Order — ₹{{ number_format($total, 2) }}
                    </button>
                </form>

                {{-- Order summary --}}
                <aside class="h-fit border border-cream-200 bg-cream-50 p-8 lg:sticky lg:top-28 rounded-xl" aria-label="Order summary">
                    <h2 class="font-serif text-xl font-medium">Your Order Summary</h2>
                    <ul class="mt-6 space-y-5">
                        @foreach ($cart as $item)
                            <li class="flex items-center gap-4">
                                <div class="relative w-16 shrink-0 bg-cream-100 rounded border border-cream-200 p-1">
                                    <img src="{{ asset($item['image']) }}" alt="{{ $item['name'] }}" width="900" height="900" class="aspect-square w-full object-contain">
                                    <span style="position: absolute; top: -6px; right: -6px; background-color: #186297; color: #ffffff; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; border: 2px solid #ffffff; z-index: 10;">
                                        {{ $item['quantity'] }}
                                    </span>
                                </div>
                                <div class="flex-1">
                                    <p class="text-sm font-semibold text-ink-900">{{ $item['name'] }}</p>
                                    <p class="text-xs text-ink-500 mt-0.5">Size: <span class="font-medium text-ink-700">{{ $item['size'] }}</span> &middot; <strong class="text-moss-800 font-bold">Qty: {{ $item['quantity'] }}</strong></p>
                                </div>
                                <div class="text-right">
                                    <p class="text-sm font-semibold text-ink-900">₹{{ number_format($item['price'] * $item['quantity']) }}</p>
                                    @if($item['quantity'] > 1)
                                        <p class="text-[11px] text-ink-500">₹{{ number_format($item['price']) }} each</p>
                                    @endif
                                </div>
                            </li>
                        @endforeach
                    </ul>
                    <dl class="mt-6 space-y-3 border-t border-sand-200 pt-5 text-sm">
                        <div class="flex justify-between"><dt class="text-ink-500">Subtotal</dt><dd class="font-medium">₹{{ number_format($subtotal, 2) }}</dd></div>
                        @if($discount > 0)
                            <div class="flex justify-between text-moss-700"><dt>Discount Coupon</dt><dd class="font-semibold">- ₹{{ number_format($discount, 2) }}</dd></div>
                        @endif
                        <div class="flex justify-between"><dt class="text-ink-500">Shipping</dt><dd class="font-medium text-moss-700">{{ $shipping === 0 ? 'Free' : '₹' . $shipping }}</dd></div>
                        <div class="flex justify-between border-t border-sand-200 pt-4 text-base"><dt class="font-semibold">Total Payable</dt><dd class="font-serif text-xl font-semibold text-ink-900">₹{{ number_format($total, 2) }}</dd></div>
                    </dl>
                    <div class="mt-6 space-y-2.5 border-t border-sand-200 pt-5">
                        @foreach ([
                            ['icon' => 'shield', 'text' => '100% secure checkout'],
                            ['icon' => 'refresh', 'text' => '7-day easy returns'],
                            ['icon' => 'truck', 'text' => 'Fast delivery across India'],
                        ] as $line)
                            <p class="flex items-center gap-2.5 text-xs text-ink-500"><x-icon :name="$line['icon']" class="h-4 w-4 text-moss-600" /> {{ $line['text'] }}</p>
                        @endforeach
                    </div>
                </aside>
            </div>
        </div>
    </section>

@endsection