@extends('dashboard.layouts.master')

@section('css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/themes/default/style.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
<style>
    .search-box {
        margin-bottom: 20px;
    }
    .jstree-search {
        color: #fff !important;
        background-color: #4a89dc !important;
        border-radius: 3px;
    }
    #searchResults {
        display: none;
    }
    .jstree-default .jstree-icon {
        color: #5e6278 !important;
        font-size: 1.3rem;
    }

</style>
@endsection

@section('pageTitle', 'Categories')

@section('content')
<div class="container-xxl">
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <div>
                <h3 class="card-title">Categories</h3>
            </div>
            <div class="d-flex">
                <div class="me-3">
                    <div class="input-group">
                        <input type="text" id="searchInput" class="form-control" placeholder="Search categories...">
                        <button class="btn btn-outline-secondary" type="button" id="clearSearch">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </div>
                <a href="{{ route('admin.categories.create') }}" class="btn btn-primary">
                    Add New Category
                </a>
            </div>
        </div>
        <div class="card-body">
            <div id="categoryTree"></div>
            <div id="searchResults" class="mt-3">
                <!-- Search results will be displayed here -->
            </div>
        </div>
    </div>
</div>
@endsection

@push('js')
<script>
    window.csrfToken = "{{ csrf_token() }}";
    window.routeAdminCategoriesTreeData = "{{ route('admin.categories.tree-data') }}";
    window.routeAdminCategoriesUpdateTree = "{{ route('admin.categories.update-tree') }}";
    window.routeAdminCategoriesSearch = "{{ route('admin.categories.search') }}";
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<script src="{{ asset('dashboard/categories.js') }}"></script>
@endpush