@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-10">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">🛒 Keranjang Belanja</h1>

    @if($cart && count($cart) > 0)
        {{-- Tabel Keranjang --}}
        <div class="overflow-x-auto rounded-lg shadow-md ring-1 ring-gray-200 dark:ring-gray-700">
            <table class="min-w-full bg-white dark:bg-gray-900">
                <thead>
                    <tr class="bg-gray-100 dark:bg-gray-700 text-left text-sm font-semibold text-gray-700 dark:text-gray-300">
                        <th class="px-6 py-3">Produk</th>
                        <th class="px-6 py-3">Harga</th>
                        <th class="px-6 py-3">Jumlah</th>
                        <th class="px-6 py-3">Subtotal</th>
                        <th class="px-6 py-3">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($cart as $item)
                        <tr class="border-b border-gray-200 dark:border-gray-700">
                            <td class="px-6 py-4 flex items-center gap-4">
                                <img src="{{ $item['image'] ? asset('storage/' . $item['image']) : asset('default.jpg') }}"
                                     alt="{{ $item['name'] }}"
                                     class="w-16 h-16 object-cover rounded border dark:border-gray-600">
                                <div>
                                    <p class="font-semibold text-gray-900 dark:text-white">{{ $item['name'] }}</p>
                                </div>
                            </td>
                            <td class="px-6 py-4 text-blue-600 dark:text-blue-400">
                                Rp {{ number_format($item['price'], 0, ',', '.') }}
                            </td>
                            <td class="px-6 py-4">
                                <form method="POST" action="{{ route('cart.update', $item['id']) }}" class="flex items-center gap-2">
                                    @csrf
                                    @method('PUT')
                                    <input type="number" name="quantity" value="{{ $item['quantity'] }}" min="1"
                                           class="w-16 p-1 border rounded dark:bg-gray-700 dark:text-white">
                                    <button type="submit" class="text-sm text-blue-500 hover:underline">Update</button>
                                </form>
                            </td>
                            <td class="px-6 py-4">
                                Rp {{ number_format($item['price'] * $item['quantity'], 0, ',', '.') }}
                            </td>
                            <td class="px-6 py-4">
                                <form method="POST" action="{{ route('cart.remove', $item['id']) }}">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="text-red-600 hover:underline text-sm">Hapus</button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        {{-- Form Checkout --}}
        <form method="POST" action="{{ route('cart.checkout') }}">
            @csrf

            {{-- Catatan Pesanan --}}
            <div class="bg-gray-100 dark:bg-gray-700 mt-8 p-6 rounded-lg shadow-md">
                <h2 class="text-lg font-bold text-gray-800 dark:text-white mb-4">📝 Catatan Pesanan (Opsional)</h2>
                <textarea name="notes" rows="4"
                          class="w-full p-3 rounded-lg border dark:border-gray-600 dark:bg-gray-800 dark:text-white resize-none"
                          placeholder="Contoh: Kirim sebelum jam 12 siang, paketkan aman, dsb."></textarea>
            </div>

            {{-- Ringkasan Total & Tombol Checkout --}}
            <div class="flex flex-col md:flex-row justify-between items-center mt-8 gap-4">
                <p class="text-lg font-bold text-gray-800 dark:text-white">
                    Total: Rp {{ number_format($total, 0, ',', '.') }}
                </p>

                <button type="submit"
                        class="flex items-center gap-2 bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded shadow transition">
                    ✅ Checkout
                </button>
            </div>
        </form>

    @else
        {{-- Keranjang Kosong --}}
        <div class="text-center text-gray-600 dark:text-gray-300 mt-20">
            <p>Keranjang Anda kosong.</p>
            <a href="{{ route('catalog.index') }}"
               class="inline-block mt-6 px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
                🔎 Belanja Sekarang
            </a>
        </div>
    @endif

    {{-- Toast Message --}}
    <div
        x-data="{ show: false }"
        x-init=" @if(session('message')) show = true; setTimeout(() => show = false, 3000); @endif "
        x-show="show"
        x-transition
        class="fixed top-20 right-5 z-50 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg flex items-center gap-3"
        style="display: none;"
    >
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M9 12l2 2 4-4m5 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
        <span>{{ session('message') }}</span>
    </div>
</div>
@endsection