@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-16">
    <h1 class="text-[48px] font-bold text-[#253D4E] mb-12">Checkout</h1>
    
    <div class="flex flex-col lg:flex-row gap-12">
        <div class="w-full lg:w-2/3">
            <div class="bg-white border border-[#ececec] rounded-[30px] p-12 mb-8">
                <h4 class="text-[24px] font-bold text-[#253D4E] mb-8 border-b border-[#ececec] pb-4">Billing Details</h4>
                <form action="{{ route('orders.store') }}" method="POST" id="checkout-form">
                    @csrf
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <input type="text" name="first_name" placeholder="First Name *" class="w-full h-[60px] border border-[#ececec] rounded-xl px-6 outline-none focus:border-brand transition-all" required>
                        </div>
                        <div>
                            <input type="text" name="last_name" placeholder="Last Name *" class="w-full h-[60px] border border-[#ececec] rounded-xl px-6 outline-none focus:border-brand transition-all" required>
                        </div>
                        <div class="md:col-span-2">
                            <input type="text" name="address" placeholder="Address *" class="w-full h-[60px] border border-[#ececec] rounded-xl px-6 outline-none focus:border-brand transition-all" required>
                        </div>
                        <div>
                            <input type="text" name="city" placeholder="City / Town *" class="w-full h-[60px] border border-[#ececec] rounded-xl px-6 outline-none focus:border-brand transition-all" required>
                        </div>
                        <div>
                            <input type="text" name="postcode" placeholder="Postcode / ZIP *" class="w-full h-[60px] border border-[#ececec] rounded-xl px-6 outline-none focus:border-brand transition-all" required>
                        </div>
                        <div>
                            <input type="tel" name="phone" placeholder="Phone *" class="w-full h-[60px] border border-[#ececec] rounded-xl px-6 outline-none focus:border-brand transition-all" required>
                        </div>
                        <div>
                            <input type="email" name="email" placeholder="Email address *" class="w-full h-[60px] border border-[#ececec] rounded-xl px-6 outline-none focus:border-brand transition-all" required>
                        </div>
                    </div>
                    <div class="mt-8">
                        <textarea name="notes" placeholder="Additional information (Order notes)" class="w-full h-32 border border-[#ececec] rounded-xl p-6 outline-none focus:border-brand transition-all"></textarea>
                    </div>
                </form>
            </div>
        </div>

        <div class="w-full lg:w-1/3">
            <div class="bg-white border border-[#ececec] rounded-[30px] p-8 mb-8">
                <h4 class="text-[24px] font-bold text-[#253D4E] mb-8 border-b border-[#ececec] pb-4">Your Order</h4>
                <div class="overflow-hidden mb-8">
                    <table class="w-full">
                        <tbody class="divide-y divide-[#ececec]">
                            @foreach($cart as $id => $details)
                            <tr>
                                <td class="py-4">
                                    <div class="flex items-center gap-3">
                                        <img src="{{ $details['image'] ?? 'https://nest-frontend-v6.netlify.app/assets/imgs/shop/product-1-1.jpg' }}" alt="" class="w-12 h-12 rounded-lg border border-[#ececec]">
                                        <div>
                                            <h6 class="text-[14px] font-bold text-[#253D4E]">{{ $details['name'] }}</h6>
                                            <span class="text-[12px] text-[#7E7E7E]">x {{ $details['quantity'] }}</span>
                                        </div>
                                    </div>
                                </td>
                                <td class="py-4 text-right">
                                    <span class="text-brand font-bold">${{ $details['price'] * $details['quantity'] }}</span>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <div class="space-y-4 mb-8">
                    <div class="flex justify-between items-center">
                        <span class="text-[#7E7E7E] font-medium">Subtotal</span>
                        <span class="text-brand font-bold text-[20px]">${{ array_sum(array_map(function($item) { return $item['price'] * $item['quantity']; }, $cart)) }}</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-[#7E7E7E] font-medium">Shipping</span>
                        <span class="text-[#253D4E] font-bold">Free</span>
                    </div>
                    <div class="border-t border-[#ececec] pt-4 flex justify-between items-center">
                        <span class="text-[#253D4E] font-bold text-[20px]">Total</span>
                        <span class="text-brand font-bold text-[24px]">${{ array_sum(array_map(function($item) { return $item['price'] * $item['quantity']; }, $cart)) }}</span>
                    </div>
                </div>

                <div class="bg-[#F2F3F4] rounded-xl p-6 mb-8">
                    <h5 class="font-bold text-[#253D4E] mb-4">Payment Method</h5>
                    <div class="space-y-3">
                        <label class="flex items-center gap-3 cursor-pointer">
                            <input type="radio" name="payment" value="bank" class="accent-brand" checked>
                            <span class="text-[14px] text-[#253D4E]">Direct Bank Transfer</span>
                        </label>
                        <label class="flex items-center gap-3 cursor-pointer">
                            <input type="radio" name="payment" value="cash" class="accent-brand">
                            <span class="text-[14px] text-[#253D4E]">Cash on Delivery</span>
                        </label>
                    </div>
                </div>

                <button type="submit" form="checkout-form" class="w-full btn-premium py-4 justify-center">
                    Place Order
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" /></svg>
                </button>
            </div>
        </div>
    </div>
</div>
@endsection
