@extends('layouts.store')

@section('content')
<section class="max-w-screen-2xl mx-auto px-5 md:px-8 py-10 md:py-14">
<h1 class="text-3xl md:text-4xl font-headline font-extrabold text-primary">Your Cart</h1>

@if(empty($cart))
    <p class="text-on-surface-variant mt-3">Your cart is empty.</p>
@else
    <div class="bg-white rounded-xl p-4 md:p-6 mt-6 shadow-sm overflow-x-auto">
        <table class="w-full text-sm">
            <thead>
                <tr class="text-left border-b"><th class="py-3">Item</th><th class="py-3">Qty</th><th class="py-3">Price</th><th class="py-3"></th></tr>
            </thead>
            <tbody>
                @foreach($cart as $item)
                <tr class="border-b">
                    <td class="py-3">{{ $item['name'] }}</td>
                    <td>
                        <form method="POST" action="{{ route('store.cart.update', $item['id']) }}">
                            @csrf @method('PATCH')
                            <div class="flex gap-2 py-2">
                                <input class="h-10 w-20 rounded-md border px-2 text-center" type="number" min="1" name="quantity" value="{{ $item['quantity'] }}">
                                <button class="bg-primary text-white px-3 rounded-md text-xs font-semibold" type="submit">Update</button>
                            </div>
                        </form>
                    </td>
                    <td>₹{{ number_format(($item['price'] * 85) * $item['quantity'], 0) }}</td>
                    <td>
                        <form method="POST" action="{{ route('store.cart.remove', $item['id']) }}">
                            @csrf @method('DELETE')
                            <button class="text-red-600 font-semibold" type="submit">Remove</button>
                        </form>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
        <div class="mt-6 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <h3 class="text-xl font-extrabold text-primary">Total: ₹{{ number_format($subtotal * 85, 0) }}</h3>
            <a class="bg-primary text-white px-6 py-3 rounded-md font-bold w-full md:w-auto text-center" href="{{ route('store.checkout') }}">Proceed to Checkout</a>
        </div>
    </div>
@endif
</section>
@endsection