@extends('layouts.app')

@section('title', 'Checkout')

@section('content')
<div class="max-w-4xl mx-auto space-y-6">
    <h1 class="text-3xl font-semibold">Checkout</h1>

    <form action="{{ route('orders.store') }}" method="POST" class="space-y-6">
        @csrf

        <div class="rounded-3xl bg-white p-8 shadow-sm">
            <h2 class="text-xl font-semibold mb-4">Delivery Address</h2>

            @if($addresses->isEmpty())
                <p class="text-slate-600 mb-4">No saved addresses yet. Please add one in your profile before placing an order.</p>
            @else
                <div class="space-y-3 mb-6">
                    @foreach($addresses as $address)
                        <label class="block p-4 border-2 rounded-3xl cursor-pointer {{ $address->is_default ? 'border-slate-900 bg-slate-50' : 'border-slate-200' }}">
                            <input type="radio" name="address_id" value="{{ $address->id }}" @checked(old('address_id') == $address->id || (!old('address_id') && $address->is_default)) required>
                            <div class="ml-2 mt-2">
                                <p class="font-semibold">{{ $address->full_name }}</p>
                                <p class="text-sm text-slate-600">{{ $address->address }}, {{ $address->city }}, {{ $address->state }} - {{ $address->postal_code }}</p>
                                <p class="text-sm text-slate-600">{{ $address->phone }}</p>
                            </div>
                        </label>
                    @endforeach
                </div>
            @endif
        </div>

        <div class="rounded-3xl bg-white p-8 shadow-sm">
            <h2 class="text-xl font-semibold mb-4">Payment Method</h2>
            <div class="grid gap-3 md:grid-cols-2">
                <label class="flex items-center p-4 border-2 border-slate-200 rounded-3xl cursor-pointer">
                    <input type="radio" name="payment_method" value="credit_card" required>
                    <span class="ml-3">Credit / Debit Card</span>
                </label>
                <label class="flex items-center p-4 border-2 border-slate-200 rounded-3xl cursor-pointer">
                    <input type="radio" name="payment_method" value="upi">
                    <span class="ml-3">UPI</span>
                </label>
                <label class="flex items-center p-4 border-2 border-slate-200 rounded-3xl cursor-pointer">
                    <input type="radio" name="payment_method" value="net_banking">
                    <span class="ml-3">Net Banking</span>
                </label>
                <label class="flex items-center p-4 border-2 border-slate-200 rounded-3xl cursor-pointer">
                    <input type="radio" name="payment_method" value="wallet">
                    <span class="ml-3">Digital Wallet</span>
                </label>
            </div>
        </div>

        <div class="rounded-3xl bg-slate-50 p-8 shadow-sm">
            <h2 class="text-xl font-semibold mb-4">Order Summary</h2>
            <div class="space-y-4 mb-6">
                @foreach($items as $item)
                    <div class="flex items-center justify-between gap-4">
                        <div>
                            <p class="font-semibold">{{ $item['product']->name }}</p>
                            <p class="text-sm text-slate-500">Qty: {{ $item['quantity'] }}</p>
                        </div>
                        <p class="font-semibold">₹{{ number_format($item['product']->display_price * $item['quantity'], 2) }}</p>
                    </div>
                @endforeach
            </div>
            <div class="space-y-3 border-t border-slate-200 pt-4">
                <div class="flex justify-between text-sm text-slate-600">
                    <span>Subtotal</span>
                    <span>₹{{ number_format($total, 2) }}</span>
                </div>
                <div class="flex justify-between text-sm text-slate-600">
                    <span>Shipping</span>
                    <span>₹0.00</span>
                </div>
                <div class="flex justify-between text-sm text-slate-600">
                    <span>Tax</span>
                    <span>₹0.00</span>
                </div>
            </div>
            <div class="flex justify-between items-center mt-6 text-lg font-semibold">
                <span>Total</span>
                <span>₹{{ number_format($total, 2) }}</span>
            </div>
        </div>

        <button type="submit" class="w-full rounded-full bg-slate-900 py-3 text-white font-semibold hover:bg-slate-800">Proceed to Payment</button>
    </form>
</div>
@endsection
