@include('layouts.navigation')


<div class="container">


    <h2 class="title">Menu Makanan 🍜</h2>


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


    <div class="product-grid">


        @foreach ($products as $product)
            <div class="card">


                <div class="img-wrapper">
                    <img src="{{ asset('storage/' . $product->image) }}" alt="{{ $product->name }}" class="product-img">

                </div>


                <h3 class="product-name">{{ $product->name }}</h3>
                <p class="price">Rp {{ number_format($product->price, 0, ',', '.') }}</p>


                <div class="quantity-controls">
                    <button class="qty-btn minus" data-id="{{ $product->id }}" data-price="{{ $product->price }}">-</button>
                    <span class="qty-display" id="qty-{{ $product->id }}">0</span>
                    <button class="qty-btn plus" data-id="{{ $product->id }}" data-price="{{ $product->price }}">+</button>
                </div>


            </div>
        @endforeach


    </div>
</div>


<style>
    * {
        box-sizing: border-box;
    }

    body {
        background: #ffffff;
        font-family: "Poppins", sans-serif;
    }


    .container {
        max-width: 1100px;
        margin: 35px auto;
        padding: 20px;
    }


    .title {
        font-size: 32px;
        font-weight: 700;
        margin-bottom: 25px;
        color: #dc2626;
        text-align: center;
    }


    .alert {
        background: #fee2e2;
        padding: 12px;
        border-radius: 10px;
        margin-bottom: 20px;
        color: #991b1b;
        font-weight: 600;
        text-align: center;
        border: 1px solid #fecaca;
    }


    .product-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 25px;
    }


    .card {
        background: #fff;
        padding: 18px;
        border-radius: 14px;
        text-align: center;
        box-shadow: 0 5px 18px rgba(0, 0, 0, 0.08);
        transition: 0.3s;
    }


    .card:hover {
        transform: translateY(-6px);
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
    }


    .img-wrapper {
        width: 100%;
        height: 180px;
        border-radius: 14px;
        overflow: hidden;
        margin-bottom: 12px;
    }


    .product-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: 0.4s;
    }


    .card:hover .product-img {
        transform: scale(1.07);
    }


    .product-name {
        font-size: 19px;
        font-weight: 600;
        margin: 5px 0;
        color: #222;
    }


    .price {
        font-size: 18px;
        color: #dc2626;
        font-weight: 700;
        margin-bottom: 14px;
    }


    .quantity-controls {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
        margin-top: 12px;
    }

    .qty-btn {
        width: 36px;
        height: 36px;
        background: #dc2626;
        color: white;
        border: none;
        border-radius: 8px;
        font-size: 20px;
        font-weight: 700;
        cursor: pointer;
        transition: 0.3s;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .qty-btn:hover {
        background: #b91c1c;
        transform: scale(1.1);
    }

    .qty-btn:active {
        transform: scale(0.95);
    }

    .qty-btn.minus {
        background: #6b7280;
    }

    .qty-btn.minus:hover {
        background: #4b5563;
    }

    .qty-display {
        font-size: 18px;
        font-weight: 700;
        color: #111;
        min-width: 30px;
        text-align: center;
    }

    .checkout-floating {
        position: fixed;
        bottom: 20px;
        right: 20px;
        background: #dc2626;
        color: white;
        padding: 16px 28px;
        border-radius: 50px;
        box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
        display: none;
        align-items: center;
        gap: 12px;
        font-weight: 600;
        font-size: 16px;
        cursor: pointer;
        z-index: 1000;
        transition: 0.3s;
        border: none;
    }

    .checkout-floating:hover {
        background: #b91c1c;
        transform: scale(1.05);
    }

    .checkout-floating.show {
        display: flex;
    }

    .checkout-badge {
        background: white;
        color: #dc2626;
        padding: 4px 10px;
        border-radius: 20px;
        font-weight: 700;
        font-size: 14px;
    }
</style>

<button class="checkout-floating" id="checkoutBtn">
    <span>🛒</span>
    <span>Pesan Sekarang</span>
    <span class="checkout-badge" id="totalItems">0</span>
</button>

<script>
    let cart = {};

    document.querySelectorAll('.qty-btn').forEach(btn => {
        btn.addEventListener('click', function () {
            const productId = this.dataset.id;
            const price = parseInt(this.dataset.price);
            const qtyDisplay = document.getElementById('qty-' + productId);
            let currentQty = parseInt(qtyDisplay.textContent);

            if (this.classList.contains('plus')) {
                currentQty++;
                cart[productId] = { qty: currentQty, price: price };
            } else if (this.classList.contains('minus') && currentQty > 0) {
                currentQty--;
                if (currentQty === 0) {
                    delete cart[productId];
                } else {
                    cart[productId] = { qty: currentQty, price: price };
                }
            }

            qtyDisplay.textContent = currentQty;
            updateCheckoutButton();
        });
    });

    function updateCheckoutButton() {
        const totalItems = Object.values(cart).reduce((sum, item) => sum + item.qty, 0);
        const checkoutBtn = document.getElementById('checkoutBtn');
        const totalItemsSpan = document.getElementById('totalItems');

        totalItemsSpan.textContent = totalItems;

        if (totalItems > 0) {
            checkoutBtn.classList.add('show');
        } else {
            checkoutBtn.classList.remove('show');
        }
    }

    document.getElementById('checkoutBtn').addEventListener('click', function () {
        if (Object.keys(cart).length === 0) {
            alert('Pilih menu terlebih dahulu!');
            return;
        }

        // Send to checkout
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = '{{ route("user.checkout") }}';

        const csrfToken = document.createElement('input');
        csrfToken.type = 'hidden';
        csrfToken.name = '_token';
        csrfToken.value = '{{ csrf_token() }}';
        form.appendChild(csrfToken);

        const cartInput = document.createElement('input');
        cartInput.type = 'hidden';
        cartInput.name = 'cart';
        cartInput.value = JSON.stringify(cart);
        form.appendChild(cartInput);

        document.body.appendChild(form);
        form.submit();
    });
</script>