@extends('layouts.store')

@section('content')
<section class="max-w-screen-2xl mx-auto px-5 md:px-8 py-10 md:py-14">
    <h1 class="text-3xl md:text-4xl font-headline font-extrabold text-primary">Checkout</h1>
    <div class="grid md:grid-cols-3 gap-6 mt-8">
        <form class="md:col-span-2 bg-white rounded-xl p-5 md:p-7 space-y-4 shadow-sm" method="POST" action="{{ route('store.checkout.place') }}">
            @csrf
            <input class="w-full rounded-md border border-outline-variant/40 px-4 py-3" name="customer_name" placeholder="Full name" required>
            <input class="w-full rounded-md border border-outline-variant/40 px-4 py-3" type="email" name="customer_email" placeholder="Email" required>
            <input class="w-full rounded-md border border-outline-variant/40 px-4 py-3" name="customer_phone" placeholder="Phone">
            <input class="w-full rounded-md border border-outline-variant/40 px-4 py-3" name="shipping_address" placeholder="Shipping address" required>
            <div class="grid sm:grid-cols-2 gap-4">
                <input class="w-full rounded-md border border-outline-variant/40 px-4 py-3" name="city" placeholder="City" required>
                <input class="w-full rounded-md border border-outline-variant/40 px-4 py-3" name="postal_code" placeholder="Postal code" required>
            </div>
            <button class="bg-primary text-white px-6 py-3 rounded-md font-bold w-full sm:w-auto" type="submit">Place Order</button>
        </form>
        <aside class="bg-surface-container-low rounded-xl p-5 md:p-7">
            <h3 class="text-xl font-headline font-bold text-primary">Order Summary</h3>
            <div class="space-y-2 mt-4 text-on-surface-variant">
                <p>Subtotal: ₹{{ number_format($subtotal * 85, 0) }}</p>
                <p>Shipping: ₹{{ number_format($shipping * 85, 0) }}</p>
                <p class="font-bold text-primary">Total: ₹{{ number_format($total * 85, 0) }}</p>
            </div>
        </aside>
    </div>
</section>
@endsection