@extends('layouts.public')

@section('content')
<h1 class="text-2xl font-bold mb-6">Checkout</h1>

<div class="grid lg:grid-cols-2 gap-8">
    <div class="bg-white rounded-xl shadow p-6">
        <h2 class="font-semibold mb-4">Customer Info</h2>

        <form method="POST" action="{{ route('checkout.place') }}" class="space-y-4">
            @csrf

            <div>
                <label class="text-sm">Name</label>
                <input name="customer_name" class="mt-1 w-full rounded border-gray-300"
                       value="{{ old('customer_name', auth()->user()->name) }}" required />
                @error('customer_name') <div class="text-sm text-red-600">{{ $message }}</div> @enderror
            </div>

            <div>
                <label class="text-sm">Phone</label>
                <input name="customer_phone" class="mt-1 w-full rounded border-gray-300"
                       value="{{ old('phone', optional(auth()->user()->customerProfile)->phone) }}" required />
                @error('customer_phone') <div class="text-sm text-red-600">{{ $message }}</div> @enderror
            </div>

            <div>
                <label class="text-sm">Address Line 1</label>
                <input name="address_line1" class="mt-1 w-full rounded border-gray-300"
                        value="{{ old('address_line1', optional(auth()->user()->customerProfile)->address_line1) }}" required />
                </div>

                <div>
                <label class="text-sm">Address Line 2</label>
                <input name="address_line2" class="mt-1 w-full rounded border-gray-300"
                        value="{{ old('address_line2', optional(auth()->user()->customerProfile)->address_line2) }}" />
                </div>

                <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="text-sm">City</label>
                    <input name="city" class="mt-1 w-full rounded border-gray-300"
                        value="{{ old('city', optional(auth()->user()->customerProfile)->city) }}" required />
                </div>
                <div>
                    <label class="text-sm">State</label>
                    <input name="state" class="mt-1 w-full rounded border-gray-300"
                        value="{{ old('state', optional(auth()->user()->customerProfile)->state) }}" required />
                </div>
                </div>

                <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="text-sm">Postcode</label>
                    <input name="postcode" class="mt-1 w-full rounded border-gray-300"
                        value="{{ old('postcode', optional(auth()->user()->customerProfile)->postcode) }}" required />
                </div>
                <div>
                    <label class="text-sm">Country</label>
                    <input name="country" class="mt-1 w-full rounded border-gray-300"
                        value="{{ old('country', optional(auth()->user()->customerProfile)->country ?? 'MY') }}" required />
                </div>
                </div>


            <button class="w-full px-5 py-3 rounded bg-black text-white">
                Place Order (FPX stub)
            </button>
        </form>
    </div>

    <div class="bg-white rounded-xl shadow p-6">
        <h2 class="font-semibold mb-4">Order Summary</h2>

        <div class="space-y-3 text-sm">
            @foreach($cart->items as $item)
                <div class="flex justify-between">
                    <div>{{ $item->product->name }} × {{ $item->quantity }}</div>
                    <div>RM {{ number_format(($item->quantity*$item->unit_price_cents)/100, 2) }}</div>
                </div>
            @endforeach
        </div>

        <hr class="my-4">

        <div class="flex justify-between font-bold">
            <div>Total</div>
            <div>RM {{ number_format($subtotalCents/100, 2) }}</div>
        </div>

        <p class="mt-4 text-xs text-gray-500">
            Payment gateway is not integrated yet. After placing order you’ll see FPX placeholder screen.
        </p>
    </div>
</div>
@endsection