@extends('layout')

@section('content')
<div class="max-w-5xl mx-auto mb-8 relative">
    <a href="{{ route('cart.index') }}" class="absolute left-0 top-1 text-blue-600 hover:text-blue-800 font-medium transition">&larr; Back to Cart</a>
    <h1 class="text-3xl font-bold text-gray-900 text-center">Checkout</h1>
</div>

<div class="max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-12">
    
    <!-- Order Summary -->
    <div>
        <h2 class="text-xl font-bold mb-6 border-b pb-2">Your order items</h2>
        <div class="bg-white p-6 rounded shadow-sm border mb-6">
            @foreach($cart as $key => $item)
            <div class="flex justify-between items-center mb-4 border-b pb-4 last:border-b-0 last:pb-0">
                <div>
                    <h3 class="font-bold text-gray-800">{{ $item['name'] }}</h3>
                    @if($item['variation_name'])
                        <p class="text-sm text-gray-600">{{ $item['variation_name'] }}</p>
                    @endif
                    <p class="text-sm text-gray-500 mt-1">Qty: {{ $item['quantity'] }}</p>
                    
                    <form action="{{ route('cart.remove') }}" method="POST" class="mt-2">
                        @csrf
                        <input type="hidden" name="cart_key" value="{{ $key }}">
                        <button type="submit" class="text-red-500 text-sm hover:underline">Remove</button>
                    </form>
                </div>
                <div class="text-right hidden">
                    <span class="font-bold text-gray-900">₹ {{ number_format($item['price'] * $item['quantity'], 2) }}</span>
                </div>
            </div>
            @endforeach
            
            <div class="mt-4 pt-4 border-t justify-between font-bold text-xl hidden">
                <span>Total</span>
                <span>₹ {{ number_format($total, 2) }}</span>
            </div>
        </div>
    </div>

    <!-- Billing Details Form -->
    <div>
        <form action="{{ route('checkout.store') }}" method="POST" class="bg-white p-8 rounded shadow-sm border">
            @csrf
            
            <h2 class="text-xl font-bold mb-6 border-b pb-2">Billing details</h2>

            <div class="mb-4">
                <label class="block text-gray-700 font-medium mb-1">Name*</label>
                <input type="text" name="customer_name" class="w-full border-gray-300 rounded shadow-sm py-2 px-3 border" placeholder="Please enter your name" required>
            </div>

            <div class="mb-4">
                <label class="block text-gray-700 font-medium mb-1">Mobile number*</label>
                <div class="flex items-center gap-2">
                    <input type="text" name="customer_phone" class="w-full border-gray-300 bg-gray-100 rounded shadow-sm py-2 px-3 border" value="{{ $mobile }}" readonly required>
                    <a href="{{ route('cart.index') }}" class="text-sm text-blue-600 hover:underline whitespace-nowrap">Change Number</a>
                </div>
            </div>

            <div class="mb-6">
                <label class="block text-gray-700 font-medium mb-1">Email</label>
                <input type="email" name="customer_email" class="w-full border-gray-300 rounded shadow-sm py-2 px-3 border" placeholder="Please enter your email address">
            </div>

            <h2 class="text-xl font-bold mb-6 border-b pb-2">Shipping address</h2>

            <div class="mb-4">
                <label class="block text-gray-700 font-medium mb-1">Country*</label>
                <input type="text" name="country" class="w-full border-gray-300 rounded shadow-sm py-2 px-3 border" placeholder="Please enter your country" required>
            </div>

            <div class="mb-4">
                <label class="block text-gray-700 font-medium mb-1">Pincode/Zipcode/Postal code</label>
                <input type="text" name="pincode" class="w-full border-gray-300 rounded shadow-sm py-2 px-3 border" placeholder="Please enter your Pincode/Zipcode/Postal code">
            </div>

            <div class="mb-4">
                <label class="block text-gray-700 font-medium mb-1">Flat, House no., Building, Company, Apartment*</label>
                <input type="text" name="address_line_1" class="w-full border-gray-300 rounded shadow-sm py-2 px-3 border" placeholder="Flat, House no., Building, Company, Apartment" required>
            </div>

            <div class="mb-4">
                <label class="block text-gray-700 font-medium mb-1">Area, Colony, Street, Sector, Village</label>
                <input type="text" name="address_line_2" class="w-full border-gray-300 rounded shadow-sm py-2 px-3 border" placeholder="Area, Colony, Street, Sector, Village">
            </div>

            <div class="mb-4">
                <label class="block text-gray-700 font-medium mb-1">Landmark</label>
                <input type="text" name="landmark" class="w-full border-gray-300 rounded shadow-sm py-2 px-3 border" placeholder="near post-office, hospital, school, bank">
            </div>

            <div class="grid grid-cols-2 gap-4 mb-6">
                <div>
                    <label class="block text-gray-700 font-medium mb-1">State*</label>
                    <input type="text" name="state" class="w-full border-gray-300 rounded shadow-sm py-2 px-3 border" placeholder="Type state name" required>
                </div>
                <div>
                    <label class="block text-gray-700 font-medium mb-1">City*</label>
                    <input type="text" name="city" class="w-full border-gray-300 rounded shadow-sm py-2 px-3 border" placeholder="Type city name" required>
                </div>
            </div>

            <h2 class="text-xl font-bold mb-4 border-b pb-2">Order Notes</h2>
            <div class="mb-8">
                <textarea name="order_notes" rows="3" class="w-full border-gray-300 rounded shadow-sm py-2 px-3 border" placeholder="Type a message (optional)"></textarea>
            </div>

            <button type="submit" class="w-full bg-blue-600 text-white font-bold py-3 px-4 rounded hover:bg-blue-700 transition">
                Place Order
            </button>
        </form>
    </div>
</div>
@endsection