<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Keranjang Belanja</title>

    {{-- Bootstrap CSS CDN --}}
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

    {{-- Bootstrap Icons --}}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
</head>
<body>

    <div class="container mt-5">
        <h2 class="mb-4">Keranjang Belanja</h2>

        {{-- Notifikasi sukses --}}
        @if(session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif

        {{-- Jika keranjang tidak kosong --}}
        @if(count($cart) > 0)
            <div class="table-responsive">
                <table class="table table-bordered align-middle">
                    <thead class="table-light">
                        <tr>
                            <th>Nama Produk</th>
                            <th>Jumlah</th>
                            <th style="width: 100px;">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($cart as $item)
                            <tr>
                                <td>{{ $item['name'] }}</td>
                                <td>{{ $item['quantity'] }}</td>
                                <td>
                                    <form action="{{ route('cart.remove') }}" method="POST" onsubmit="return confirm('Hapus produk ini?')">
                                        @csrf
                                        <input type="hidden" name="id" value="{{ $item['id'] }}">
                                        <button class="btn btn-danger btn-sm w-100">Hapus</button>
                                    </form>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            {{-- Kosongkan keranjang --}}
            <form action="{{ route('cart.clear') }}" method="POST" onsubmit="return confirm('Yakin ingin mengosongkan keranjang?')">
                @csrf
                <button class="btn btn-warning">Kosongkan Keranjang</button>
            </form>

            {{-- Tombol Checkout --}}
            <form action="{{ route('checkout.store') }}" method="POST" onsubmit="return confirm('Lanjutkan ke checkout?')">
                @csrf
                <button class="btn btn-success mt-3">Checkout Sekarang</button>
            </form>
        @else
            <div class="alert alert-info">Keranjang kamu masih kosong. Yuk tambahkan produk!</div>
        @endif

        <a href="{{ route('welcome') }}" class="btn btn-secondary mt-3">← Kembali ke Beranda</a>
    </div>

    {{-- Optional: Bootstrap JS (jika butuh interaksi tambahan) --}}
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>
