@extends('layouts.app')

@section('title', 'Checkout')

@section('content')

<!-- Header Breadcrumb & Progress Stepper -->
<div class="mb-8 max-w-4xl mx-auto">
    <div class="flex items-center gap-2 text-xs text-slate-400 mb-4">
        <a href="{{ route('home') }}" class="hover:text-brand-light">Home</a>
        <span>/</span>
        <a href="{{ route('cart.index') }}" class="hover:text-brand-light">Cart</a>
        <span>/</span>
        <span class="text-slate-200 font-semibold">Checkout</span>
    </div>

    <!-- 3-Step Progress Bar -->
    <div class="grid grid-cols-3 gap-2 text-center text-xs font-heading font-bold mb-6">
        <div class="p-2.5 rounded-xl bg-brand text-white border border-brand shadow-glow">
            1. Shipping Address
        </div>
        <div class="p-2.5 rounded-xl bg-ink-card text-slate-400 border border-white/10">
            2. Payment & Method
        </div>
        <div class="p-2.5 rounded-xl bg-ink-card text-slate-400 border border-white/10">
            3. Order Confirmed
        </div>
    </div>
</div>

<div class="max-w-4xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-8">
    
    <!-- Left: Shipping Address Form -->
    <form action="{{ route('checkout.store') }}" method="POST" class="lg:col-span-2 bg-ink-card rounded-3xl border border-white/10 p-6 sm:p-8 space-y-5 shadow-xl">
        @csrf
        <div class="border-b border-white/10 pb-4 mb-2">
            <h2 class="font-display font-bold text-lg text-white">Delivery Details</h2>
            <p class="text-xs text-slate-400">Please provide your complete delivery address for courier dispatch.</p>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
                <label class="text-xs font-bold text-slate-300 block mb-1.5">Recipient Full Name *</label>
                <input type="text" name="shipping_name" value="{{ old('shipping_name', auth()->user()->name) }}" required 
                       class="w-full bg-ink border border-white/15 rounded-xl px-3.5 py-2.5 text-xs text-white placeholder-slate-500 focus:ring-2 focus:ring-brand-light focus:outline-none">
            </div>

            <div>
                <label class="text-xs font-bold text-slate-300 block mb-1.5">Contact Phone Number *</label>
                <input type="text" name="shipping_phone" value="{{ old('shipping_phone', auth()->user()->phone ?? '+91-') }}" required 
                       class="w-full bg-ink border border-white/15 rounded-xl px-3.5 py-2.5 text-xs text-white placeholder-slate-500 focus:ring-2 focus:ring-brand-light focus:outline-none">
            </div>
        </div>

        <div>
            <label class="text-xs font-bold text-slate-300 block mb-1.5">Complete Street Address (Flat, Building, Area) *</label>
            <textarea name="shipping_address" rows="3" required placeholder="e.g. Flat 302, Cyber Heights, Sector 14"
                      class="w-full bg-ink border border-white/15 rounded-xl px-3.5 py-2.5 text-xs text-white placeholder-slate-500 focus:ring-2 focus:ring-brand-light focus:outline-none">{{ old('shipping_address') }}</textarea>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
                <label class="text-xs font-bold text-slate-300 block mb-1.5">City / Town *</label>
                <input type="text" name="shipping_city" value="{{ old('shipping_city', 'Delhi') }}" required 
                       class="w-full bg-ink border border-white/15 rounded-xl px-3.5 py-2.5 text-xs text-white placeholder-slate-500 focus:ring-2 focus:ring-brand-light focus:outline-none">
            </div>

            <div>
                <label class="text-xs font-bold text-slate-300 block mb-1.5">Postal Pincode *</label>
                <input type="text" name="shipping_pincode" value="{{ old('shipping_pincode', '110001') }}" required maxlength="10"
                       class="w-full bg-ink border border-white/15 rounded-xl px-3.5 py-2.5 text-xs text-white placeholder-slate-500 focus:ring-2 focus:ring-brand-light focus:outline-none">
            </div>
        </div>

        <!-- Payment Method Selection -->
        <div class="pt-4 border-t border-white/10">
            <h3 class="font-heading font-bold text-xs text-white mb-3">Choose Payment Mode</h3>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-xs">
                <label class="flex items-center gap-3 p-3.5 rounded-2xl bg-ink border border-white/10 hover:border-brand-light cursor-pointer">
                    <input type="radio" name="payment_method" value="razorpay" checked class="text-brand focus:ring-brand">
                    <div>
                        <span class="font-bold text-white block">Online via Razorpay</span>
                        <span class="text-[11px] text-slate-400">UPI, Cards, Netbanking</span>
                    </div>
                </label>
                <label class="flex items-center gap-3 p-3.5 rounded-2xl bg-ink border border-white/10 hover:border-brand-light cursor-pointer">
                    <input type="radio" name="payment_method" value="cod" class="text-brand focus:ring-brand">
                    <div>
                        <span class="font-bold text-white block">Cash on Delivery (COD)</span>
                        <span class="text-[11px] text-slate-400">Pay when order arrives</span>
                    </div>
                </label>
            </div>
        </div>

        <div class="pt-3">
            <button type="submit" class="w-full bg-gradient-to-r from-brand to-brand-hover hover:from-brand-hover hover:to-brand text-white font-bold py-3.5 rounded-full text-xs shadow-glow hover:shadow-glow-lg transition">
                Proceed to Payment & Review &rarr;
            </button>
        </div>
    </form>

    <!-- Right: Mini Order Summary -->
    <div class="bg-ink-card rounded-3xl border border-white/10 p-6 h-fit shadow-xl space-y-4">
        <h3 class="font-heading font-bold text-sm text-white border-b border-white/10 pb-3">Order Items</h3>
        
        <div class="space-y-3 max-h-60 overflow-y-auto pr-1">
            @foreach($cart['lines'] as $line)
                @php($img = $line['product']->primaryImage())
                <div class="flex items-center gap-3 text-xs">
                    <div class="w-12 h-12 rounded-xl bg-ink overflow-hidden shrink-0 border border-white/10">
                        @if($img)<img src="{{ $img->url }}" class="w-full h-full object-cover">@endif
                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="font-bold text-white truncate">{{ $line['product']->name }}</p>
                        <p class="text-[10px] text-slate-400">{{ $line['size'] ?? '' }} &middot; Qty: {{ $line['quantity'] }}</p>
                    </div>
                    <span class="font-semibold text-brand-light">₹{{ number_format($line['line_total'], 2) }}</span>
                </div>
            @endforeach
        </div>

        <div class="border-t border-white/10 pt-3 space-y-2 text-xs">
            <div class="flex justify-between text-slate-400">
                <span>Subtotal</span>
                <span class="text-white font-semibold">₹{{ number_format($cart['subtotal'], 2) }}</span>
            </div>
            @if(!empty($cart['coupon_discount']) && $cart['coupon_discount'] > 0)
                <div class="flex justify-between text-emerald-400 font-bold">
                    <span>Coupon Discount</span>
                    <span>-₹{{ number_format($cart['coupon_discount'], 2) }}</span>
                </div>
            @endif
            <div class="flex justify-between text-slate-400">
                <span>Estimated GST</span>
                <span class="text-white font-semibold">₹{{ number_format($cart['tax_total'], 2) }}</span>
            </div>
            <div class="flex justify-between text-slate-400">
                <span>Shipping</span>
                @if($cart['shipping_fee'] == 0)
                    <span class="text-emerald-400 font-bold uppercase text-[10px]">FREE</span>
                @else
                    <span class="text-white font-semibold">₹{{ number_format($cart['shipping_fee'], 2) }}</span>
                @endif
            </div>
            <div class="border-t border-white/10 pt-2 flex justify-between items-baseline font-heading font-black text-sm text-white">
                <span>Total Amount</span>
                <span class="text-base text-brand-light">₹{{ number_format($cart['grand_total'], 2) }}</span>
            </div>
        </div>
    </div>

</div>

@endsection