@extends('layouts.app')

@section('content')
<div class="w-full max-w-2xl xl:w-1/2 mx-auto my-8 p-4 sm:p-6 border-2 border-cyan-300 rounded-xl bg-white shadow-lg min-w-[220px]">
    <h1 class="text-3xl font-bold mb-8 text-gray-800">Your Cart</h1>
    @if($items->isEmpty())
        <p class="text-gray-500">Your cart is empty.</p>
    @else
        <div class="bg-gray-100 rounded-lg shadow p-4 mb-6">
            <!-- Mobile: vertical cards -->
            <div class="flex flex-col gap-4 md:hidden">
                @foreach($items as $item)
                    <div class="bg-white rounded-lg p-4 shadow flex flex-col">
                        <div class="flex items-center justify-between mb-1">
                            <div class="font-semibold text-gray-900">{{ $item->getBuyable()->name ?? 'Product' }}</div>
                            <form method="POST" action="{{ route('cart.remove', $item->id) }}" onsubmit="return confirm('Remove this item from cart?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="text-red-600 hover:text-red-800 ml-2" title="Remove">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
                                </button>
                            </form>
                        </div>
                        <form method="POST" action="{{ route('cart.update', $item->id) }}" class="flex items-center gap-2 mb-1">
                            @csrf
                            @method('PATCH')
                            <label class="text-gray-700 text-sm">Quantity:</label>
                            <input type="number" name="quantity" value="{{ $item->getQuantity() }}" min="1" class="w-16 border rounded px-2 py-1 text-center quantity-input" />
                            <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white px-2 py-1 rounded text-xs">Update</button>
                        </form>
                        <div class="text-gray-700 text-sm mb-1">Price: <span class="font-medium">${{ number_format($item->price, 2) }}</span></div>
                        <div class="text-gray-700 text-sm">Total: <span class="font-medium">${{ number_format($item->total(), 2) }}</span></div>
                    </div>
                @endforeach
            </div>
            <!-- Desktop: table -->
            <div class="hidden md:block">
                <table class="w-full text-sm">
                    <thead>
                        <tr>
                            <th class="px-2 py-2 text-left font-medium text-gray-500 uppercase whitespace-nowrap">Product</th>
                            <th class="px-2 py-2 text-left font-medium text-gray-500 uppercase whitespace-nowrap">Qty</th>
                            <th class="px-2 py-2 text-left font-medium text-gray-500 uppercase whitespace-nowrap">Price</th>
                            <th class="px-2 py-2 text-left font-medium text-gray-500 uppercase whitespace-nowrap">Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($items as $item)
                            <tr>
                                <td class="px-2 py-2 text-gray-900 whitespace-nowrap flex items-center gap-2">
                                    {{ $item->getBuyable()->name ?? 'Product' }}
                                    <form method="POST" action="{{ route('cart.remove', $item->id) }}" onsubmit="return confirm('Remove this item from cart?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="text-red-600 hover:text-red-800 ml-1" title="Remove">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
                                        </button>
                                    </form>
                                </td>
                                <td class="px-2 py-2 text-gray-900 whitespace-nowrap">
                                    <form method="POST" action="{{ route('cart.update', $item->id) }}" class="flex items-center gap-2">
                                        @csrf
                                        @method('PATCH')
                                        <input type="number" name="quantity" value="{{ $item->getQuantity() }}" min="1" class="w-16 border rounded px-2 py-1 text-center quantity-input" />
                                        <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white px-2 py-1 rounded text-xs">Update</button>
                                    </form>
                                </td>
                                <td class="px-2 py-2 text-gray-900 whitespace-nowrap">${{ number_format($item->price, 2) }}</td>
                                <td class="px-2 py-2 text-gray-900 whitespace-nowrap">${{ number_format($item->total(), 2) }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        <div class="flex justify-center">
            <div class="flex flex-col items-center gap-4 w-full max-w-xs p-4">
                <div class="text-xl font-semibold text-gray-800 mb-2">
                    Total: ${{ number_format($total, 2) }}
                </div>
                <a href="{{ route('checkout.show') }}" class="w-full text-center bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-8 rounded-lg shadow transition text-lg">Checkout</a>
            </div>
        </div>
    @endif
</div>
@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.quantity-input').forEach(function(input) {
            input.addEventListener('change', function() {
                this.form.submit();
            });
        });
    });
</script>
@endpush
@endsection