@extends('layouts.app')
@section('content')
<style>
.gm-page-title{font-size:28px;font-weight:400;color:#4b5563;margin:0 0 22px}.gm-card{background:#fff;border-radius:10px;padding:10px 14px 18px;box-shadow:0 1px 3px rgba(0,0,0,.05)}.gm-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}.gm-left{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.gm-search{border:1px solid #cfd3df;border-radius:5px;padding:10px 12px;min-width:250px}.gm-btn{display:inline-flex;align-items:center;justify-content:center;padding:9px 14px;border-radius:5px;background:#7060f4;color:#fff;text-decoration:none;border:0;cursor:pointer;font-weight:600}.gm-btn.danger{background:#e65343}.gm-btn.small{padding:6px 10px;font-size:12px}.gm-table{width:100%;border-collapse:collapse}.gm-table th{background:#f4f3f8;color:#6b6880;padding:14px 8px;text-align:left;font-size:13px;font-weight:500}.gm-table td{padding:12px 8px;border-bottom:1px solid #e7e5ec;color:#676475;font-size:14px}.gm-actions{display:flex;gap:6px}.gm-alert{padding:10px 12px;background:#ecfdf5;color:#065f46;border-radius:6px;margin-bottom:12px}.gm-empty{color:#8d899a}.gm-pagination{margin-top:15px}
</style>
<h1 class="gm-page-title">Food Menu Categories</h1>
<div class="gm-card">
    @if(session('success'))<div class="gm-alert">{{ session('success') }}</div>@endif
    <div class="gm-toolbar">@include('custom-crud._export-menu',['module'=>'food-menu-categories'])<div class="gm-left"><a class="gm-btn" href="{{ route('gm-food-menu-categories.create') }}">+ Add Food Menu Category</a><input id="gm-search" class="gm-search" type="search" placeholder="Search Here"></div></div>
    <div style="overflow-x:auto"><table class="gm-table" id="gm-export-table"><thead><tr><th>SN</th><th>Category Name</th><th>Description</th><th>Added By</th><th>Actions</th></tr></thead><tbody>
    @forelse($records as $record)<tr><td>{{ $records->firstItem() + $loop->index }}</td><td>{{ $record->name }}</td><td>{{ $record->description ?: '-' }}</td><td>{{ $record->creator?->name ?? 'Admin User' }}</td><td><div class="gm-actions"><a class="gm-btn small" href="{{ route('gm-food-menu-categories.edit', $record) }}">Edit</a><form method="POST" action="{{ route('gm-food-menu-categories.destroy', $record) }}" onsubmit="return confirm('Delete this category?')">@csrf @method('DELETE')<button class="gm-btn danger small" type="submit">Delete</button></form></div></td></tr>
    @empty<tr><td colspan="5" class="gm-empty">No data available in table</td></tr>@endforelse
    </tbody></table></div><div class="gm-pagination">{{ $records->links() }}</div>
</div>
<script>document.addEventListener('DOMContentLoaded',()=>{const s=document.getElementById('gm-search');const rows=[...document.querySelectorAll('#gm-export-table tbody tr')];s?.addEventListener('input',()=>{const q=s.value.toLowerCase();rows.forEach(r=>r.style.display=r.innerText.toLowerCase().includes(q)?'':'none')})});</script>
@endsection