@extends('layouts.app')

@section('content')
<div class="container mx-auto py-8">
    <div class="max-w-2xl mx-auto">
        <div class="bg-white rounded-lg shadow">
            <div class="p-6 border-b">
                <h1 class="text-3xl font-bold">Checkout</h1>
            </div>

            <div class="p-6">
                @if ($errors->any())
                <div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg">
                    <p class="text-red-700 font-semibold">Please fix the following errors:</p>
                    <ul class="text-red-600 text-sm mt-2">
                        @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
                @endif

                <form action="{{ route('checkout.process') }}" method="POST" id="checkout-form">
                    @csrf

                    <!-- Shipping Information -->
                    <h2 class="text-xl font-bold mb-4">Shipping Information</h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Full Name</label>
                            <input type="text" name="name" value="{{ auth()->user()->name }}" class="w-full px-4 py-2 border rounded-lg" required>
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Email</label>
                            <input type="email" name="email" value="{{ auth()->user()->email }}" class="w-full px-4 py-2 border rounded-lg" required>
                        </div>
                    </div>

                    <div class="mb-6">
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Address</label>
                        <input type="text" name="address" value="{{ auth()->user()->address }}" class="w-full px-4 py-2 border rounded-lg" required>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">City</label>
                            <input type="text" name="city" value="{{ auth()->user()->city }}" class="w-full px-4 py-2 border rounded-lg" required>
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Country</label>
                            <input type="text" name="country" value="{{ auth()->user()->country }}" class="w-full px-4 py-2 border rounded-lg" required>
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Zip Code</label>
                            <input type="text" name="zip_code" class="w-full px-4 py-2 border rounded-lg">
                        </div>
                    </div>

                    <!-- Payment Method -->
                    <h2 class="text-xl font-bold mb-4 mt-8">Payment Method</h2>
                    <div class="mb-6">
                        <label class="flex items-center p-4 border-2 border-blue-600 rounded-lg cursor-pointer">
                            <input type="radio" name="payment_method" value="flutterwave" checked class="mr-3">
                            <span class="font-semibold">Flutterwave Payment</span>
                        </label>
                    </div>

                    <!-- Order Summary -->
                    <h2 class="text-xl font-bold mb-4 mt-8">Order Summary</h2>
                    <div class="bg-gray-50 p-4 rounded-lg mb-6">
                        <div class="flex justify-between py-2 border-b">
                            <span>Subtotal:</span>
                            <span>${{ number_format($cart->subtotal ?? 0, 2) }}</span>
                        </div>
                        <div class="flex justify-between py-2 border-b">
                            <span>Tax:</span>
                            <span>${{ number_format($cart->tax ?? 0, 2) }}</span>
                        </div>
                        <div class="flex justify-between py-2">
                            <span>Shipping:</span>
                            <span>${{ number_format($cart->shipping ?? 0, 2) }}</span>
                        </div>
                        <div class="flex justify-between py-2 border-t mt-2 font-bold text-lg">
                            <span>Total:</span>
                            <span class="text-blue-600">${{ number_format($cart->total ?? 0, 2) }}</span>
                        </div>
                    </div>

                    <!-- Terms -->
                    <div class="mb-6">
                        <label class="flex items-center">
                            <input type="checkbox" name="agree_terms" required class="mr-3">
                            <span class="text-sm text-gray-600">I agree to the Terms and Conditions</span>
                        </label>
                    </div>

                    <div class="flex gap-4">
                        <button type="submit" class="flex-1 px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-semibold">
                            Complete Purchase
                        </button>
                        <a href="{{ route('cart.index') }}" class="flex-1 px-6 py-3 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 font-semibold text-center">
                            Back to Cart
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection
