@extends('layouts.admin.app')

@section('title', __('pages/admin/category.title'))

@section('content')
@php
use App\Support\Category\CategoryRegistry;
@endphp
<div
    x-data="categoryManager({
        hasRecords: @js($categories->isNotEmpty()),
        totalCategories: @js($totalCategories),
        typeOptions: @js($typeOptions),
        defaultType: @js(CategoryRegistry::TYPE_UNCATEGORIZED),
        filters: @js($filters),
        routes: {
            list: @js(route('admin.categories.index')),
            store: @js(route('admin.categories.store')),
            show: @js(route('admin.categories.show', ['category' => '__ID__'])),
            update: @js(route('admin.categories.update', ['category' => '__ID__'])),
            parents: @js(route('admin.categories.parents')),
            deleteInfo: @js(route('admin.categories.delete-info', ['category' => '__ID__'])),
            destroy: @js(route('admin.categories.destroy', ['category' => '__ID__'])),
        },
    })"
    class="min-h-[calc(100vh-theme(spacing.16))]">
    <x-layouts.admin.page-container
        :breadcrumbs="[
            ['label' => __('pages/dashboard.page_title'), 'url' => route('admin.dashboard')],
            ['label' => __('pages/admin/category.heading.plural')],
        ]">

        <div class="space-y-4 -mx-6 px-6 mt-6">

            <div x-cloak x-show="hasRecords" class="flex flex-wrap items-center justify-between gap-x-4 gap-y-2 mt-1">
                <div class="flex flex-wrap items-center gap-2 min-w-0">
                    <div class="w-52 flex-shrink-0">
                        <x-forms.input
                            type="text"
                            x-model="filters.search"
                            data-cb-search
                            icon="heroicon-o-magnifying-glass"
                            placeholder="{{ __('pages/common.search', ['resource' => __('pages/admin/category.heading.plural')]) }}" />
                    </div>

                    <x-common.table-filter>
                        <div>
                            <x-forms.label class="mb-1.5 block text-xs font-medium">{{ __('pages/admin/category.filter.type') }}</x-forms.label>
                            <x-forms.select x-model="filters.type" data-cb-filter="type">
                                <option value="">{{ __('pages/admin/category.filter.all_types') }}</option>
                                @foreach($typeOptions as $key => $label)
                                <option value="{{ $key }}">{{ $label }}</option>
                                @endforeach
                            </x-forms.select>
                        </div>

                        <div>
                            <x-forms.label class="mb-1.5 block text-xs font-medium">{{ __('pages/common.status.label') }}</x-forms.label>
                            <x-forms.select x-model="filters.status" data-cb-filter="status">
                                <option value="">{{ __('pages/common.status.all') }}</option>
                                <option value="active">{{ __('pages/common.status.active') }}</option>
                                <option value="inactive">{{ __('pages/common.status.inactive') }}</option>
                            </x-forms.select>
                        </div>
                    </x-common.table-filter>

                    <x-buttons.secondary type="button" class="hidden" data-cb-reset-filters>
                        <x-heroicon-o-arrow-path class="w-4 h-4" />
                        Reset
                    </x-buttons.secondary>
                </div>

                <div class="flex items-center gap-2 flex-shrink-0">
                    <x-buttons.primary type="button" @click="openCreate()">
                        <x-heroicon-o-plus class="w-4 h-4" />
                        {{ __('pages/common.add_new', ['resource' => __('pages/admin/category.heading.singular')]) }}
                    </x-buttons.primary>
                </div>
            </div>

            <div class="hidden" data-cb-skeleton-template>
                <div class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 overflow-hidden">
                    <div class="overflow-x-auto overflow-y-clip">
                        <table class="w-full table-fixed text-left text-sm text-muted-foreground" cellpadding="16">
                            <tbody>
                                @for($i = 0; $i < (int) config('pagination.skeleton_rows', 7); $i++)
                                    <tr class="border-t border-border bg-card">
                                    <td class="align-middle"><x-skeleton.horizontal class="h-4 w-8 rounded mx-auto" /></td>
                                    <td class="align-middle">
                                        <div class="flex items-center gap-3"><x-skeleton.horizontal class="h-10 w-10 rounded-lg" /><x-skeleton.horizontal class="h-4 w-24 rounded" /></div>
                                    </td>
                                    <td class="align-middle"><x-skeleton.horizontal class="h-4 w-20 rounded" /></td>
                                    <td class="align-middle"><x-skeleton.horizontal class="h-4 w-40 rounded" /></td>
                                    <td class="align-middle"><x-skeleton.horizontal class="h-5 w-12 rounded-full mx-auto" /></td>
                                    <td class="align-middle"><x-skeleton.horizontal class="h-5 w-16 rounded-full" /></td>
                                    <td class="text-right align-middle"><x-skeleton.horizontal class="h-8 w-16 rounded-lg ml-auto" /></td>
                                    </tr>
                                    @endfor
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="hidden" data-cb-empty-template>
                @include('pages.admin.categories.partials.no-data-available')
            </div>

            <div id="table-container"></div>
        </div>
    </x-layouts.admin.page-container>

    @include('pages.admin.categories.partials.form-modal')
    @include('pages.admin.categories.partials.delete-modal')
</div>

<x-alert-dialog />
@endsection

@push('before-app-js')
{!! JsValidator::formRequest('App\Http\Requests\Admin\Category\StoreCategoryRequest', '#category-form') !!}
@vite(['resources/js/admin/categories.js'])
@endpush