@extends('admin.admin_dashboard')
@section('admin')

<div class="page-content">
    <x-chm.layout.page title="Ticket categories" subtitle="Manage support categories and routing" icon="bx bx-category">
        <x-slot:breadcrumb>
            <x-chm.breadcrumb-item :href="route('helpdesk.dashboard')">Help Desk</x-chm.breadcrumb-item>
            <x-chm.breadcrumb-item :active="true">Categories</x-chm.breadcrumb-item>
        </x-slot:breadcrumb>

        <div class="row g-4">
            <div class="col-lg-4">
                <x-chm.card title="Add category">
                    <form method="post" action="{{ route('helpdesk.settings.categories.store') }}">
                        @csrf
                        <div class="mb-3">
                            <label class="form-label">Name</label>
                            <input type="text" name="name" class="form-control" required maxlength="120">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Parent category</label>
                            <select name="parent_id" class="form-select chm-select" data-allow-clear="true">
                                <option value="">Top-level</option>
                                @foreach($categories as $cat)
                                    <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Module</label>
                            <input type="text" name="module" class="form-control" maxlength="120">
                        </div>
                        <button type="submit" class="btn btn-primary w-100">Create</button>
                    </form>
                </x-chm.card>
            </div>
            <div class="col-lg-8">
                <x-chm.card title="Categories">
                    <div class="table-responsive">
                        <table class="table table-sm align-middle">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Subcategories</th>
                                    <th>Department</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($categories as $cat)
                                    <tr>
                                        <td class="fw-semibold">{{ $cat->name }}</td>
                                        <td>
                                            @if($cat->children->isNotEmpty())
                                                {{ $cat->children->pluck('name')->join(', ') }}
                                            @else
                                                <span class="text-muted">—</span>
                                            @endif
                                        </td>
                                        <td>{{ $cat->department->name ?? '—' }}</td>
                                        <td>
                                            @if($cat->is_active)
                                                <span class="badge bg-success-subtle text-success">Active</span>
                                            @else
                                                <span class="badge bg-secondary">Inactive</span>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </x-chm.card>
            </div>
        </div>
    </x-chm.layout.page>
</div>

@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        if (window.ChmForms) ChmForms.init();
    });
</script>
@endpush