@extends('layouts.website')

@section('title', 'Menu')

@section('content')
<div class="page-card" style="margin-bottom:1rem;">
    <h1 style="margin-bottom:.35rem;">{{ $branch->name }} Menu</h1>
    <p class="muted">Select your items and add to cart.</p>
</div>

@foreach($categories as $category)
    @php $catProducts = $products->where('category_id', $category->id); @endphp
    @if($catProducts->isNotEmpty())
    <section class="page-card" style="margin-bottom:1rem;">
        <h2 style="margin-bottom:.9rem;font-size:1.15rem;border-left:4px solid #ff753a;padding-left:.6rem;">{{ $category->name }}</h2>
        <div class="grid" style="grid-template-columns:repeat(auto-fill,minmax(240px,1fr));">
            @foreach($catProducts as $product)
            @php $price = $product->getPriceForBranch($branch->id); @endphp
            <article style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;">
                @if($product->image)
                <img src="{{ asset('storage/' . $product->image) }}" alt="{{ $product->name }}" style="width:100%;height:140px;object-fit:cover;">
                @else
                <div style="height:140px;background:#f3f4f6;display:flex;align-items:center;justify-content:center;color:#9ca3af;">No image</div>
                @endif
                <div style="padding:0.8rem;display:flex;flex-direction:column;gap:.45rem;flex:1;">
                    <h3 style="margin:0;font-size:1rem;">{{ $product->name }}</h3>
                    @if($product->description)
                    <p class="muted" style="margin:0;font-size:.88rem;">{{ Str::limit($product->description, 80) }}</p>
                    @endif
                    <div style="margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:.5rem;">
                        <strong style="color:#ff753a;">Rs {{ number_format($price, 0) }}</strong>
                        <button type="button" class="btn btn-add" data-product-id="{{ $product->id }}" data-name="{{ $product->name }}" data-price="{{ $price }}" style="padding:.52rem .8rem;font-size:.85rem;">Add</button>
                    </div>
                </div>
            </article>
            @endforeach
        </div>
    </section>
    @endif
@endforeach

@if($products->isEmpty())
<div class="page-card"><p class="muted" style="margin:0;">No products available at this branch.</p></div>
@endif
@endsection

@section('scripts')
<script>
function updateCartCount() {
    const cart = JSON.parse(localStorage.getItem('cart') || '[]');
    const count = cart.reduce((s, i) => s + i.qty, 0);
    const el = document.getElementById('cart-count');
    if (el) el.textContent = count;
}

document.querySelectorAll('.btn-add').forEach(btn => {
    btn.addEventListener('click', function() {
        const productId = parseInt(this.dataset.productId);
        const name = this.dataset.name;
        const price = parseFloat(this.dataset.price);
        let cart = JSON.parse(localStorage.getItem('cart') || '[]');
        const existing = cart.find(i => i.product_id === productId);
        if (existing) existing.qty += 1;
        else cart.push({ product_id: productId, name, price, qty: 1 });
        localStorage.setItem('cart', JSON.stringify(cart));
        updateCartCount();
        const old = this.textContent;
        this.textContent = 'Added';
        setTimeout(() => { this.textContent = old; }, 700);
    });
});

updateCartCount();
</script>
@endsection