@extends('layouts.public')

@section('title', 'Menu items')

@push('head')
<style>
    body { background:var(--soft); }
    .admin { max-width:900px; margin:0 auto; padding:28px 20px 60px; }
    .bar { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
    .nav { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
    .nav a, .pill { height:40px; padding:0 16px; border-radius:20px; background:#fff; color:var(--ink); font-weight:700; font-size:14px; display:inline-flex; align-items:center; text-decoration:none; border:0; }
    .primary { background:var(--accent) !important; color:#fff !important; }
    .flash { background:var(--mint); color:var(--green); padding:12px 16px; border-radius:12px; margin-top:16px; font-weight:700; }
    h2.cat { font-size:20px; margin:28px 0 10px; }
    .row { background:#fff; border-radius:14px; padding:12px; display:flex; align-items:center; gap:12px; margin-bottom:10px; }
    .thumb { width:56px; height:56px; border-radius:10px; background:var(--soft); object-fit:cover; flex:none; display:flex; align-items:center; justify-content:center; color:#717786; font-size:11px; }
    .grow { flex:1; min-width:0; }
    .grow strong { display:block; }
    .off { opacity:.55; }
    .actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
    .actions form { margin:0; }
    .small { height:36px; padding:0 14px; font-size:13px; background:var(--soft); }
    .danger { color:#B3261E; }
</style>
@endpush

@section('content')
<div class="admin">
    <div class="bar">
        <h1 style="font-size:28px">Menu items</h1>
        <a class="pill primary" href="{{ route('admin.menu.create') }}">+ Add item</a>
    </div>
    <div class="nav">
        <a href="{{ route('kitchen.index') }}">Kitchen</a>
        <a href="{{ route('tables.qr') }}">QR cards</a>
        <a href="{{ route('admin.categories.index') }}">Manage categories</a>
    </div>

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

    @foreach ($categories as $cat)
    <h2 style="font-size:20px;margin-top:24px">{{ $cat->name }}</h2>

    @forelse ($items->get($cat->id, collect()) as $item)
        <div style="display:flex;align-items:center;gap:12px;background:#fff;border-radius:14px;padding:10px 14px;margin-top:8px">
            @if ($item->image)
                <img src="{{ $item->image }}" alt="{{ $item->name }}" loading="lazy"
                     style="width:56px;height:56px;border-radius:10px;object-fit:cover">
            @else
                <div style="width:56px;height:56px;border-radius:10px;background:#eee"></div>
            @endif
            <div style="flex:1">
                <strong>{{ $item->name }}</strong>
                <div style="font-size:13px;color:#666">{{ $item->description }}</div>
            </div>
            <span style="font-weight:700">${{ number_format($item->price, 2) }}</span>
            <span style="font-size:12px;font-weight:700;color:{{ $item->is_available ? '#1a6b35' : '#B3261E' }}">
                {{ $item->is_available ? 'Available' : 'Hidden' }}
            </span>
        </div>
    @empty
        <p style="color:#666">No items in this category yet.</p>
    @endforelse
@endforeach
</div>
@endsection