@extends('layouts.admin.master')
@section('content')
    @php
        $can_insert = auth_can(h_prefix('insert'));
        $can_edit = auth_can(h_prefix('edit'));
        $can_update = auth_can(h_prefix('update'));
        $can_delete = auth_can(h_prefix('delete'));
        $can_toggle = auth_can(h_prefix('toggle'));
    @endphp
    <div class="card">
        <div class="card-header d-md-flex flex-row justify-content-between">
            <h5 class="card-title mb-3 mb-md-0">Data {{ $page_attr['title'] }}</h5>
            <div class="btn-group" role="group">
                @if ($can_insert)
                    <a href="{{ route('admin.leaflet.categories.create') }}" class="btn btn-primary btn-sm">
                        <i class="fas fa-plus me-1"></i> Tambah Kategori
                    </a>
                @endif
                <button type="button" class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#modal-hierarchy">
                    <i class="fas fa-sitemap me-1"></i> Hierarki
                </button>
            </div>
        </div>
        <div class="card-body">
            <!-- Statistik Ringkas -->
            <div class="alert alert-info d-flex justify-content-between align-items-center">
                <div>
                    <strong>Total:</strong> {{ $stats['total'] }} |
                    <strong>Aktif:</strong> {{ $stats['active'] }} |
                    <strong>Nonaktif:</strong> {{ $stats['inactive'] }} |
                    <strong>Root:</strong> {{ $stats['root_categories'] }}
                </div>
            </div>
            <!-- Filter -->
            <div class="accordion mb-3" id="filterAccordion">
                <div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                            data-bs-target="#filterCollapse" aria-expanded="false">
                            <i class="fas fa-filter me-2"></i> Filter
                        </button>
                    </h2>
                    <div id="filterCollapse" class="accordion-collapse collapse" data-bs-parent="#filterAccordion">
                        <div class="accordion-body">
                            <form id="FilterForm" class="row g-2">
                                <div class="col-md-4">
                                    <label for="filter_parent" class="form-label">Parent Kategori</label>
                                    <select class="form-select select2" id="filter_parent" name="filter_parent">
                                        <option value="">Semua</option>
                                        <option value="null">Root (Tanpa Parent)</option>
                                        @foreach ($categories as $cat)
                                            <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label for="filter_status" class="form-label">Status</label>
                                    <select class="form-select" id="filter_status" name="filter_status">
                                        <option value="">Semua</option>
                                        <option value="1">Aktif</option>
                                        <option value="0">Nonaktif</option>
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label for="filter_icon_type" class="form-label">Tipe Icon</label>
                                    <select class="form-select" id="filter_icon_type" name="filter_icon_type">
                                        <option value="">Semua</option>
                                        @foreach (App\Models\Leaflet\Category::ICON_TYPES as $type)
                                            <option value="{{ $type }}">{{ Str::title($type) }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-12 text-end">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-sync-alt me-1"></i> Terapkan
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Table -->
            <table id="tbl_main" class="table table-striped table-hover w-100">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Nama Kategori</th>
                        <th>Hierarki</th>
                        <th>Warna</th>
                        <th>Icon</th>
                        <th>Marker</th> <!-- Jumlah Marker yang digunakan dalam 1 Kategori -->
                        <th>Urutan</th>
                        <th>Status</th>
                        {!! $can_delete || $can_edit || $can_update || $can_toggle ? '<th>Aksi</th>' : '' !!}
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
    <!-- Modal Hierarchy -->
    <div class="modal fade" id="modal-hierarchy" tabindex="-1" aria-labelledby="modal-hierarchy-label" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modal-hierarchy-label">Hierarki Kategori</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="category-tree" class="border rounded p-3" style="min-height: 300px;"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                    <button type="button" class="btn btn-primary" id="btn-save-hierarchy">
                        <i class="fas fa-save me-1"></i> Simpan Perubahan
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="card mt-4">
        <div class="card-header fw-bold">
            Statistik Kategori
        </div>
        <div class="card-body small">
            <p class="mb-1">🟢 Aktif: {{ $legend['total_active'] }} kategori</p>
            <p class="mb-1">🧬 Parent: {{ $legend['total_parent'] }}, Children: {{ $legend['total_children'] }}</p>
            <p class="mb-1">📍 Marker total: {{ $legend['total_marker'] }}</p>
            <hr>
            <p class="mb-1 fw-bold">📍 Marker per kategori:</p>
            <ul class="mb-0 ps-3">
                @foreach ($legend['markers_per_category'] as $item)
                    <li>{{ $item['name'] }} <span class="text-muted">({{ $item['marker_count'] }})</span></li>
                @endforeach
            </ul>
        </div>
    </div>
@endsection
@section('stylesheet')
    <link rel="stylesheet" href="{{ asset('assets/templates/admin/plugins/datatable/css/dataTables.bootstrap5.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/templates/admin/plugins/select2/css/select2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/templates/admin/plugins/select2-bootstrap5-theme/select2-bootstrap5.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/templates/admin/plugins/jstree/themes/default/style.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/templates/admin/plugins/fontawesome-free-6.7.2-web/css/all.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/templates/admin/css/leaflet/categories/index.css') }}">
@endsection
@section('javascript')
    <script src="{{ asset('assets/templates/admin/plugins/datatable/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/plugins/datatable/js/dataTables.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/plugins/select2/js/select2.min.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/plugins/jstree/jstree.min.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/plugins/sweetalert2/sweetalert2.all.min.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/plugins/fontawesome-free-6.7.2-web/js/all.min.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/plugins/loading-overlay/loadingoverlay.min.js') }}"></script>
    <script>
        const route_edit = @json(route('admin.leaflet.categories.edit', ':id'));
        const route_update = @json(route('admin.leaflet.categories.update', ':id'));
        const route_datatable = "{{ route('admin.leaflet.categories.datatable') }}";
        const route_hierarchy = "{{ route('admin.leaflet.categories.hierarchy') }}";
        const route_update_hierarchy = "{{ route('admin.leaflet.categories.update-hierarchy') }}";
        const route_delete = "{{ route('admin.leaflet.categories.destroy', ':id') }}";
        const route_toggle = "{{ route('admin.leaflet.categories.toggle-status', ':id') }}";
        const can_update = "{{ $can_update ? 'true' : 'false' }}" === "true";
        const can_edit = "{{ $can_edit ? 'true' : 'false' }}" === "true";
        const can_delete = "{{ $can_delete ? 'true' : 'false' }}" === "true";
        const can_toggle = "{{ $can_toggle ? 'true' : 'false' }}" === "true";
    </script>
    <script>
        function updateIconPreview() {
            const type = $('#icon_type').val();
            const value = $('#icon').val();
            const htmlValue = $('#icon_html').val();
            let preview = '';
            if (type === 'html') {
                preview = htmlValue;
            } else if (type === 'icon' || type === 'marker' || type === 'svg') {
                if (value) {
                    const src = `/assets/leaflet/markers/icons/${value}`;
                    preview = `<img src="${src}" style="max-height: 32px;">`;
                }
            }
            $('#icon-preview').html(preview);
        }
        $('#icon_type, #icon, #icon_html').on('input change', updateIconPreview);
        $(document).ready(updateIconPreview);
    </script>
    <script src="{{ asset('assets/templates/admin/js/leaflet/categories/index.js') }}"></script>
@endsection