@extends('layouts.website')

@section('title', 'Cart')

@section('content')
<div class="page-card">
    <h1 style="margin-bottom:.35rem;">Your Cart</h1>
    <p class="muted" style="margin-top:0;margin-bottom:1rem;">Review your items before checkout.</p>
    <div id="cart-items"></div>
    <div id="cart-summary" style="margin-top:1rem;padding:1rem;background:#f9fafb;border:1px solid #e5e7eb;border-radius:12px;"></div>
    <form id="checkout-form" action="{{ route('website.checkout') }}" method="GET" style="margin-top:1rem;">
        <button type="submit" class="btn">Proceed to Checkout</button>
    </form>
</div>
@endsection

@section('scripts')
<script>
const branchId = {{ $branchId }};
let cart = JSON.parse(localStorage.getItem('cart') || '[]');
const itemsEl = document.getElementById('cart-items');
const summaryEl = document.getElementById('cart-summary');

function render() {
    if (!cart.length) {
        itemsEl.innerHTML = '<p class="muted">Your cart is empty. <a href="{{ route("website.menu") }}">Browse menu</a></p>';
        summaryEl.innerHTML = '';
        return;
    }
    itemsEl.innerHTML = cart.map((item, i) => `
        <div style="display:flex;justify-content:space-between;align-items:center;gap:.8rem;padding:.85rem;background:#fff;border:1px solid #e5e7eb;margin-bottom:.55rem;border-radius:10px;">
            <span>${item.qty} x ${item.name}</span>
            <span><strong>Rs ${(item.price * item.qty).toFixed(0)}</strong></span>
            <button type="button" onclick="removeItem(${i})" style="background:#fff1f2;color:#e11d48;border:1px solid #fecdd3;padding:.35rem .55rem;border-radius:8px;cursor:pointer;font-size:.8rem;">Remove</button>
        </div>
    `).join('');
    const subtotal = cart.reduce((s, i) => s + i.price * i.qty, 0);
    summaryEl.innerHTML = `<p style="margin:0;"><strong>Subtotal: Rs ${subtotal.toFixed(0)}</strong></p>`;
}
function removeItem(i) { cart.splice(i, 1); localStorage.setItem('cart', JSON.stringify(cart)); render(); }
render();
document.getElementById('checkout-form').addEventListener('submit', e => {
    if (!cart.length) { e.preventDefault(); return; }
    sessionStorage.setItem('checkout_cart', JSON.stringify(cart));
});
</script>
@endsection