@extends('admin.layouts.app')

@section('title', 'Categories')
@section('page-title', 'Categories')

@section('breadcrumbs')
    <li class="breadcrumb-item active" aria-current="page">Categories</li>
@endsection

@section('page-actions')
    <x-admin.button :href="route('admin.categories.create')" icon="bi-plus">New Category</x-admin.button>
@endsection

@section('content')
<!-- Search Panel -->
<div class="mb-6 bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-2xl p-4 shadow-soft">
    <div class="max-w-md">
        <x-admin.search-input id="categoriesSearch" placeholder="Search here" />
    </div>
</div>

<!-- DataTable -->
<x-datatable 
    id="categoriesTable" 
    :ajax-url="route('admin.categories.index')" 
    :columns="[
        ['data' => 'name', 'orderable' => true],
        ['data' => 'code', 'orderable' => true],
        ['data' => 'subcategories', 'orderable' => false, 'searchable' => false],
        ['data' => 'created_at', 'orderable' => true, 'searchable' => false],
        ['data' => 'actions', 'orderable' => false, 'searchable' => false]
    ]"
    :order="[[3, 'desc']]"
    :column-defs="[
        ['className' => 'text-left align-middle', 'targets' => [0, 1, 2, 3]],
        ['className' => 'text-right align-middle', 'targets' => [4]]
    ]"
    search-id="categoriesSearch"
    :padding="false"
>
    <x-slot name="thead">
        <th>Category Name</th>
        <th>Code</th>
        <th>Subcategories</th>
        <th>Created</th>
        <th class="no-export text-right">Actions</th>
    </x-slot>
</x-datatable>

<script>
// Toggle dropdown menu
function toggleDropdown(id) {
    var dropdown = document.getElementById('dropdown-' + id);
    if (dropdown) {
        dropdown.classList.toggle('hidden');
    }
}

// Close dropdown when clicking outside
document.addEventListener('click', function(event) {
    if (!event.target.closest('button') && !event.target.closest('div[id^="dropdown-"]')) {
        document.querySelectorAll('[id^="dropdown-"]').forEach(function(el) {
            el.classList.add('hidden');
        });
    }
});
</script>
@endsection