@extends('layouts.app')
@section('title', 'Checkout - AutoPart')

@section('content')
<div class="bg-gray-50 min-h-screen pb-16">
    <div class="bg-brand-dark text-white py-12 mb-8">
        <div class="container mx-auto px-4 text-center">
            <h1 class="text-4xl font-extrabold uppercase tracking-widest mb-4">Checkout</h1>
            <div class="flex items-center justify-center space-x-2 text-sm text-gray-400">
                <a href="{{ url('/') }}" class="hover:text-brand-red transition-colors">Home</a>
                <i data-lucide="chevron-right" class="w-3.5 h-3.5"></i>
                <a href="{{ url('/cart') }}" class="hover:text-brand-red transition-colors">Cart</a>
                <i data-lucide="chevron-right" class="w-3.5 h-3.5"></i>
                <span class="text-white">Checkout</span>
            </div>
        </div>
    </div>

    <div class="container mx-auto px-4">
        <form id="checkout-form" class="flex flex-col lg:flex-row gap-8">
            @csrf
            <div class="lg:w-2/3">
                <div class="bg-white rounded-lg shadow-sm border border-gray-100 p-6 lg:p-8">
                    <h2 class="text-2xl font-bold uppercase tracking-wide mb-6 border-b border-gray-100 pb-4">Billing Details</h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div><label class="block text-sm font-bold text-gray-700 mb-2">First Name *</label><input required type="text" name="first_name" class="w-full border border-gray-200 rounded px-4 py-2 outline-none focus:border-brand-red"></div>
                        <div><label class="block text-sm font-bold text-gray-700 mb-2">Last Name *</label><input required type="text" name="last_name" class="w-full border border-gray-200 rounded px-4 py-2 outline-none focus:border-brand-red"></div>
                        <div class="md:col-span-2"><label class="block text-sm font-bold text-gray-700 mb-2">Street Address *</label><input required type="text" name="address" placeholder="House number and street name" class="w-full border border-gray-200 rounded px-4 py-2 outline-none focus:border-brand-red"></div>
                        <div><label class="block text-sm font-bold text-gray-700 mb-2">Town / City *</label><input required type="text" name="city" class="w-full border border-gray-200 rounded px-4 py-2 outline-none focus:border-brand-red"></div>
                        <div><label class="block text-sm font-bold text-gray-700 mb-2">State *</label><input required type="text" name="state" class="w-full border border-gray-200 rounded px-4 py-2 outline-none focus:border-brand-red"></div>
                        <div><label class="block text-sm font-bold text-gray-700 mb-2">Postcode / ZIP *</label><input required type="text" name="zip" class="w-full border border-gray-200 rounded px-4 py-2 outline-none focus:border-brand-red"></div>
                        <div><label class="block text-sm font-bold text-gray-700 mb-2">Phone *</label><input required type="tel" name="phone" class="w-full border border-gray-200 rounded px-4 py-2 outline-none focus:border-brand-red"></div>
                        <div class="md:col-span-2"><label class="block text-sm font-bold text-gray-700 mb-2">Email Address *</label><input required type="email" name="email" class="w-full border border-gray-200 rounded px-4 py-2 outline-none focus:border-brand-red"></div>
                    </div>
                    <div class="mt-8 pt-6 border-t border-gray-100">
                        <h2 class="text-xl font-bold uppercase tracking-wide mb-4">Additional Information</h2>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Order Notes (Optional)</label>
                        <textarea rows="4" name="notes" placeholder="Notes about your order, e.g. special notes for delivery." class="w-full border border-gray-200 rounded px-4 py-2 outline-none focus:border-brand-red"></textarea>
                    </div>
                </div>
            </div>

            <div class="lg:w-1/3">
                <div class="bg-white rounded-lg shadow-sm border border-red-200/30 p-6 sticky top-24">
                    <h3 class="text-xl font-bold uppercase border-b border-gray-100 pb-4 mb-6">Your Order</h3>
                    <div class="space-y-4 mb-6 text-sm" id="checkout-summary"></div>

                    <div class="mt-8 mb-6">
                        <h4 class="font-bold text-gray-800 mb-4">Payment Method</h4>
                        <div class="space-y-3">
                            <label class="block border rounded p-4 cursor-pointer transition-colors border-brand-red bg-red-50">
                                <div class="flex items-center space-x-3">
                                    <input type="radio" name="payment" value="credit-card" checked class="accent-red-600">
                                    <span class="font-bold text-gray-800 flex items-center"><i data-lucide="credit-card" class="w-4 h-4 mr-2"></i> Credit Card</span>
                                </div>
                            </label>
                            <label class="block border rounded p-4 cursor-pointer transition-colors border-gray-200 hover:border-gray-300">
                                <div class="flex items-center space-x-3">
                                    <input type="radio" name="payment" value="paypal" class="accent-red-600">
                                    <span class="font-bold text-gray-800">PayPal</span>
                                </div>
                            </label>
                        </div>
                    </div>

                    <button type="submit" class="w-full bg-brand-red text-white py-4 rounded font-extrabold uppercase tracking-widest hover:bg-red-700 transition-colors flex items-center justify-center space-x-2">
                        <span>Place Order</span>
                        <i data-lucide="check-circle" class="w-5 h-5"></i>
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', () => {
    const items = CartManager.getItems();
    const subtotal = CartManager.getTotal();
    const shipping = 15.00, tax = subtotal * 0.08, total = subtotal + shipping + tax;

    if (items.length === 0) {
        document.getElementById('checkout-form').innerHTML = '<div class="text-center py-24 col-span-full"><h2 class="text-2xl font-bold mb-4">No items in cart.</h2><a href="/shop" class="text-brand-red font-bold hover:underline">Return to Shop</a></div>';
        return;
    }

    let html = '<div class="flex justify-between font-bold text-gray-800 border-b border-gray-100 pb-2"><span>Product</span><span>Subtotal</span></div>';
    items.forEach(i => { html += `<div class="flex justify-between text-gray-600 border-b border-gray-50 pb-2"><span class="truncate pr-4">${i.name} <strong class="text-gray-800">× ${i.quantity}</strong></span><span class="font-bold text-gray-800">$${(i.price*i.quantity).toFixed(2)}</span></div>`; });
    html += `<div class="flex justify-between text-gray-600 pt-2"><span>Subtotal</span><span class="font-bold text-gray-800">$${subtotal.toFixed(2)}</span></div>`;
    html += `<div class="flex justify-between text-gray-600"><span>Shipping</span><span class="font-bold text-gray-800">$${shipping.toFixed(2)}</span></div>`;
    html += `<div class="flex justify-between text-gray-600"><span>Tax</span><span class="font-bold text-gray-800">$${tax.toFixed(2)}</span></div>`;
    html += `<div class="border-t border-gray-100 pt-4 mt-4 flex justify-between"><span class="text-lg font-bold text-gray-800">Total</span><span class="text-2xl font-extrabold text-brand-red">$${total.toFixed(2)}</span></div>`;
    document.getElementById('checkout-summary').innerHTML = html;

    document.getElementById('checkout-form').addEventListener('submit', (e) => {
        e.preventDefault();
        const btn = e.target.querySelector('button[type=submit]');
        btn.disabled = true; btn.innerHTML = '<span>Processing...</span>';
        setTimeout(() => { CartManager.clearCart(); alert('Order placed successfully! Thank you.'); window.location.href = '/'; }, 1500);
    });
});
</script>
@endpush
@endsection