@extends('layouts.public')

@section('content')
<h1 class="text-2xl font-bold mb-6">Your Cart</h1>

@if($cart->items->isEmpty())
    <div class="bg-white p-6 rounded-xl shadow">Cart is empty.</div>
@else
    <div class="bg-white rounded-xl shadow overflow-hidden">
        <table class="w-full text-sm">
            <thead class="bg-gray-50">
                <tr>
                    <th class="text-left p-4">Product</th>
                    <th class="text-left p-4">Price</th>
                    <th class="text-left p-4">Qty</th>
                    <th class="text-left p-4">Total</th>
                    <th class="p-4"></th>
                </tr>
            </thead>
            <tbody>
            @foreach($cart->items as $item)
                <tr class="border-t">
                    <td class="p-4 font-medium">{{ $item->product->name }}</td>
                    <td class="p-4">RM {{ number_format($item->unit_price_cents/100, 2) }}</td>
                    <td class="p-4">
                        <form method="POST" action="{{ route('cart.update', $item->product) }}" class="flex gap-2">
                            @csrf
                            <input type="number" name="quantity" min="1" value="{{ $item->quantity }}"
                                   class="w-24 rounded border-gray-300" />
                            <button class="px-3 py-2 rounded border">Update</button>
                        </form>
                    </td>
                    <td class="p-4">
                        RM {{ number_format(($item->quantity * $item->unit_price_cents)/100, 2) }}
                    </td>
                    <td class="p-4 text-right">
                        <form method="POST" action="{{ route('cart.remove', $item->product) }}">
                            @csrf
                            <button class="text-red-600 underline">Remove</button>
                        </form>
                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>

    <div class="mt-6 flex items-center justify-between">
        <div class="text-lg font-bold">
            Subtotal: RM {{ number_format($subtotalCents/100, 2) }}
        </div>
        <a href="{{ route('checkout.show') }}" class="px-5 py-3 rounded bg-black text-white">
            Checkout
        </a>
    </div>
@endif
@endsection