@extends('admin.layouts.app')

@section('title', __('admin/menus.title'))

@section('content')
<div class="container-fluid px-4">
    <x-admin.page-header
        :title="__('admin/menus.title')"
        :subtitle="__('admin/menus.subtitle')"
        icon="fas fa-bars"
        :buttons="[
            ['label' => __('admin/menus.create'), 'route' => route('admin.menus.create'),
             'icon' => 'fas fa-plus', 'color' => 'primary', 'permission' => 'manage menus'],
        ]"
    />

    <x-admin.card>
        <x-admin.data-table
            id="menusTable"
            :records-url="route('api.admin.menus.records')"
            :searchable="true"
            :search-placeholder="__('admin/common.search_placeholder')"
            :filterable="true">
            <th data-name="id" style="width: 60px;">#</th>
            <th data-name="brand">{{ __('admin/menus.fields_brand') }}</th>
            <th data-name="slug">{{ __('admin/menus.fields_slug') }}</th>
            <th data-name="name">{{ __('admin/menus.fields_name') }}</th>
            <th data-name="items_count">{{ __('admin/menus.items_count') }}</th>
            <th data-name="is_active">{{ __('admin/menus.fields_is_active') }}</th>
            <th data-name="actions" class="text-end">{{ __('admin/common.actions') }}</th>

            <x-slot:filters>
                <div class="row g-2">
                    <div class="col-md-4">
                        <label class="form-label small mb-1">{{ __('admin/menus.fields_brand') }}</label>
                        <select id="menuBrandFilter" class="form-select form-select-sm">
                            <option value="">{{ __('admin/common.all') }}</option>
                            <option value="master">{{ __('admin/menus.fields_brand_master') }}</option>
                            @foreach($brands as $brand)
                                <option value="{{ $brand->id }}">{{ $brand->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </x-slot:filters>
        </x-admin.data-table>
    </x-admin.card>
</div>

@push('scripts')
<script>
window.menuConfig = {
    translations: {
        master: '{{ __("admin/menus.fields_brand_master") }}',
        edit: '{{ __("admin/common.edit") }}',
    }
};
</script>
@vite('resources/js/admin/menus/list.js')
@endpush
@endsection
