@extends('layouts.app')
@section('content')
<style>
    .gm-card{background:#fff;border-radius:10px;padding:20px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
    .gm-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:12px;flex-wrap:wrap}
    .gm-title{font-size:24px;font-weight:600;color:#4b5563}
    .gm-btn{display:inline-flex;align-items:center;padding:9px 16px;border-radius:7px;background:#6d5dfc;color:#fff;font-weight:600;text-decoration:none;border:0;cursor:pointer}
    .gm-btn.secondary{background:#64748b}.gm-btn.danger{background:#dc2626}.gm-btn.small{padding:6px 10px;font-size:13px}
    .gm-table{width:100%;border-collapse:collapse}.gm-table th,.gm-table td{padding:12px;border-bottom:1px solid #e5e7eb;text-align:left;font-size:14px}.gm-table th{background:#f5f3f8;color:#6b7280}
    .gm-filter-row{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
    .gm-filter-label{font-size:14px;color:#6b7280;font-weight:500}
    .gm-select{min-width:230px;border:1px solid #d1d5db;border-radius:7px;padding:10px 34px 10px 12px;background:#fff;color:#4b5563;outline:none}
    .gm-select:focus{border-color:#6d5dfc;box-shadow:0 0 0 2px rgba(109,93,252,.12)}
    .gm-actions{display:flex;gap:7px;align-items:center}.gm-muted{color:#9ca3af}
    .gm-alert{padding:10px 12px;background:#ecfdf5;color:#065f46;border-radius:7px;margin-bottom:14px}
    @media(max-width:768px){.gm-filter-row{justify-content:stretch}.gm-select{width:100%;min-width:0}}
</style>

<div class="gm-card">
    <div class="gm-head">
        <h1 class="gm-title">Food Menus</h1>
        <a class="gm-btn" href="{{ route('gm-food-menus.create') }}">+ Add Food Menus</a>
    </div>
    <div style="display:flex;justify-content:flex-end;margin-bottom:12px">@include('custom-crud._export-menu',['module'=>'food-menus'])</div>

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

    {{-- Category filter: no Filter By button. Selecting a category submits automatically. --}}
    <form id="foodMenuCategoryFilter" method="GET" action="{{ route('gm-food-menus.index') }}" class="gm-filter-row">
        <label class="gm-filter-label" for="category_id">Category</label>
        <select
            id="category_id"
            name="category_id"
            class="gm-select"
            onchange="this.form.submit()"
            aria-label="Filter food menus by category"
        >
            <option value="">All Categories</option>
            @foreach($categories as $category)
                <option value="{{ $category->id }}" @selected((int) $selectedCategory === (int) $category->id)>
                    {{ $category->name }}
                </option>
            @endforeach
        </select>
    </form>

    <div style="overflow-x:auto">
        <table class="gm-table" id="gm-export-table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Code</th>
                    <th>Name</th>
                    <th>Category</th>
                    <th>Description</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($records as $record)
                    <tr>
                        <td>{{ $records->firstItem() + $loop->index }}</td>
                        <td>{{ $record->code }}</td>
                        <td>{{ $record->name }}</td>
                        <td>{{ $record->category?->name ?? '—' }}</td>
                        <td>{{ $record->description }}</td>
                        <td>{{ $record->is_active ? 'Active' : 'Inactive' }}</td>
                        <td>
                            <div class="gm-actions">
                                <a class="gm-btn small" href="{{ route('gm-food-menus.edit', $record) }}">Edit</a>
                                <form method="POST" action="{{ route('gm-food-menus.destroy', $record) }}" onsubmit="return confirm('Delete this record?')">
                                    @csrf
                                    @method('DELETE')
                                    <button class="gm-btn danger small" type="submit">Delete</button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="gm-muted">
                            {{ $selectedCategory ? 'No food menus found in this category.' : 'No records found. Use the Add button to create the first record.' }}
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div style="margin-top:16px">{{ $records->links() }}</div>
</div>
@endsection