@extends('layouts.app')

@section('content')
<div class="mx-auto max-w-4xl px-4 py-8">
    <h1 class="text-3xl font-black">Checkout</h1>
    <form method="POST" action="{{ route('checkout.store') }}" class="mt-6 grid gap-5">
        @csrf
        <section class="panel p-5">
            <h2 class="text-xl font-black">Delivery Address</h2>
            <select name="customer_address_id" class="field mt-3" required>
                @foreach ($addresses as $address)
                    <option value="{{ $address->id }}">{{ $address->recipient_name }} · {{ $address->street }}, {{ $address->suburb }}</option>
                @endforeach
            </select>
            <a class="mt-3 inline-block font-semibold text-pantry-leaf" href="{{ route('account.addresses.create') }}">Add new address</a>
        </section>
        <section class="panel grid gap-4 p-5 md:grid-cols-3">
            <div>
                <label class="font-bold">Delivery Zone</label>
                <select class="field mt-2" name="delivery_zone_id" required>
                    @foreach ($zones as $zone)
                        <option value="{{ $zone->id }}">{{ $zone->name }} · R{{ number_format((float) $zone->delivery_fee, 2) }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="font-bold">Delivery Date</label>
                <input class="field mt-2" type="date" name="delivery_date" min="{{ now()->toDateString() }}" required>
            </div>
            <div>
                <label class="font-bold">Time Slot</label>
                <select class="field mt-2" name="delivery_slot_id" required>
                    @foreach ($slots as $slot)
                        <option value="{{ $slot->id }}">{{ $slot->name }}</option>
                    @endforeach
                </select>
            </div>
        </section>
        <section class="panel p-5">
            <h2 class="text-xl font-black">Substitutions</h2>
            <label class="mt-3 flex items-center gap-2 font-semibold"><input type="checkbox" name="allow_substitutes" value="1" checked> Allow substitutes for unavailable groceries</label>
            <textarea class="field mt-3" name="substitution_notes" rows="3" placeholder="Optional notes for pickers"></textarea>
        </section>
        <button class="btn-primary">Continue to PayFast</button>
    </form>
</div>
@endsection