{{-- resources/views/dashboard/categories/index.blade.php --}}
@php
    // فرضية UI Tabs: لا يوجد status في السكيما، لذا وفرنا تبويبات منطقية:
    // - الكل
    // - لديها أيقونة
    // - بدون أيقونة
    // - المحذوفة (SoftDeletes)
    $currentSort = request('sort', 'name');
    $currentDir = request('direction', 'asc');
    $currentSearch = request('search', '');
    $onlyTrashed = request('onlyTrashed', '');
    $withIcon = request('with_icon', '');
    $parentFilter = request('parent_id', '');
@endphp
@extends('layouts.app') {{-- أو أي لياوت رئيسي لديك --}}
@section('title', 'إدارة الفئات')

@section('content')
    <div class="container-fluid" dir="ltr">
        {{-- Breadcrumb + Header --}}
        <div class="d-flex align-items-center justify-content-between mb-3">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0 small">
                    <li class="breadcrumb-item"><a href="{{ url('/') }}">الرئيسية</a></li>
                    <li class="breadcrumb-item active" aria-current="page">الفئات</li>
                </ol>
            </nav>
            <div class="d-flex gap-2">
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createCategoryModal">
                    <i class="fa-solid fa-plus"></i> إضافة فئة
                </button>
                <a href="{{ route('categories.index', array_merge(request()->all(), ['export' => 'csv'])) }}"
                    class="btn btn-outline-secondary">
                    <i class="fa-solid fa-file-csv"></i> تصدير CSV
                </a>
                <button class="btn btn-outline-dark" type="button" data-bs-toggle="offcanvas"
                    data-bs-target="#filtersOffcanvas" aria-controls="filtersOffcanvas">
                    <i class="fa-solid fa-sliders"></i> فلاتر
                </button>
            </div>
        </div>

        {{-- Hero Stats --}}
        <div class="row g-3 mb-3">
            <x-stat-card title="الفئات" :count="$stats['total'] ?? 0" icon="fa-layer-group" />
            <x-stat-card title="الفئات المحذوفة" :count="$stats['trashed'] ?? 0" icon="fa-trash" />
            <x-stat-card title="الفئات لديها أيقونة" :count="$stats['withIcon'] ?? 0" color="success" icon="fa-image" />
        </div>

        {{-- Toolbar: Search + Tabs --}}
        <div class="d-flex flex-wrap gap-2 align-items-center mb-3">
            <div class="flex-grow-1">
                <input type="search" id="searchInput" value="{{ $currentSearch }}" class="form-control"
                    placeholder="ابحث بالاسم أو الوصف..." autocomplete="off" aria-label="بحث" />
            </div>
            <div class="text-nowrap small text-muted">
                نتائج: {{ $categories->total() }}
            </div>
        </div>

        {{-- Tabs --}}
        @php
            $base = route('categories.index');
            $paramsAll = array_filter(array_merge(request()->all(), ['with_icon' => null, 'onlyTrashed' => null]));
            $paramsIcon = array_filter(array_merge(request()->all(), ['with_icon' => 1, 'onlyTrashed' => null]));
            $paramsNoIcon = array_filter(array_merge(request()->all(), ['with_icon' => 0, 'onlyTrashed' => null]));
            $paramsTrashed = array_filter(array_merge(request()->all(), ['onlyTrashed' => 1]));
        @endphp
        <ul class="nav nav-tabs mb-3">
            <li class="nav-item">
                <a class="nav-link {{ !$withIcon && !$onlyTrashed ? 'active' : '' }}"
                    href="{{ $base . '?' . http_build_query($paramsAll) }}">
                    الكل
                    <span class="badge text-bg-light border ms-1">{{ $stats['total'] ?? 0 }}</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link {{ $withIcon === '1' ? 'active' : '' }}"
                    href="{{ $base . '?' . http_build_query($paramsIcon) }}">
                    لديها أيقونة
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link {{ $withIcon === '0' ? 'active' : '' }}"
                    href="{{ $base . '?' . http_build_query($paramsNoIcon) }}">
                    بدون أيقونة
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link {{ $onlyTrashed === '1' ? 'active' : '' }}"
                    href="{{ $base . '?' . http_build_query($paramsTrashed) }}">
                    المحذوفة
                    @if (($stats['trashed'] ?? 0) > 0)
                        <span class="badge text-bg-warning ms-1">{{ $stats['trashed'] }}</span>
                    @endif
                </a>
            </li>
        </ul>

        {{-- Table --}}
        <div class="card shadow-sm border-0">
            <div class="table-responsive" style="max-height: 64vh; overflow:auto;">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light sticky-top" style="top:0;">
                        <tr>
                            @php
                                if (!function_exists('sortLink')) {
                                    function sortLink($col, $label, $currentSort, $currentDir)
                                    {
                                        $dir = $currentSort === $col && $currentDir === 'asc' ? 'desc' : 'asc';
                                        $params = array_merge(request()->all(), ['sort' => $col, 'direction' => $dir]);
                                        $icon = '';
                                        if ($currentSort === $col) {
                                            $icon =
                                                $currentDir === 'asc'
                                                    ? 'fa-arrow-up-short-wide'
                                                    : 'fa-arrow-down-wide-short';
                                        } else {
                                            $icon = 'fa-sort';
                                        }
                                        $url = route('categories.index') . '?' . http_build_query($params);
                                        return '<a href="' .
                                            $url .
                                            '" class="text-decoration-none text-dark">' .
                                            $label .
                                            ' <i class="fa-solid ' .
                                            $icon .
                                            '"></i></a>';
                                    }
                                }
                            @endphp
                            {{-- ==================== التعديل هنا (استدعاء الدالة) ==================== --}}
                            <th>{!! sortLink('name', 'الاسم', $currentSort, $currentDir) !!}</th>
                            <th>الوصف</th>
                            <th>{!! sortLink('parent_id', 'الأب', $currentSort, $currentDir) !!}</th>
                            {{-- ==================================================================== --}}
                            <th>الأيقونة</th>
                            <th class="text-end">الإجراءات</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($categories as $category)
                            <tr>
                                <td class="fw-medium">
                                    <span class="text-truncate d-inline-block" style="max-width: 220px;"
                                        title="{{ $category->name }}">
                                        {{ $category->name }}
                                    </span>
                                    @if ($category->deleted_at)
                                        <span class="badge text-bg-warning ms-1">محذوف</span>
                                    @endif
                                </td>
                                <td>
                                    <span class="text-muted text-truncate d-inline-block" style="max-width: 300px;"
                                        title="{{ $category->description }}">
                                        {{ $category->description }}
                                    </span>
                                </td>
                                <td>
                                    @if ($category->parent)
                                        <span class="badge text-bg-secondary">{{ $category->parent->name }}</span>
                                    @else
                                        <span class="text-muted">—</span>
                                    @endif
                                </td>
                                <td>
                                    @if ($category->icon)
                                        <img src="{{ asset('storage/' . $category->icon) }}" alt="icon" class="rounded"
                                            style="width:36px;height:36px;object-fit:cover;">
                                    @else
                                        <span class="text-muted">—</span>
                                    @endif
                                </td>
                                <td class="text-end">
                                    <div class="btn-group btn-group-sm" role="group" aria-label="Actions">
                                        <button class="btn btn-light" data-bs-toggle="modal"
                                            data-bs-target="#showCategoryModal" data-id="{{ $category->id }}"
                                            data-name="{{ $category->name }}"
                                            data-description="{{ $category->description }}"
                                            data-parent="{{ $category->parent?->name }}"
                                            data-icon="{{ $category->icon ? asset('storage/' . $category->icon) : '' }}"
                                            aria-label="عرض">
                                            <i class="fa-regular fa-eye"></i>
                                        </button>

                                        @if (!$category->deleted_at)
                                            <button class="btn btn-light" data-bs-toggle="modal"
                                                data-bs-target="#editCategoryModal" data-id="{{ $category->id }}"
                                                data-name="{{ $category->name }}"
                                                data-description="{{ $category->description }}"
                                                data-parent_id="{{ $category->parent_id }}"
                                                data-icon="{{ $category->icon ? asset('storage/' . $category->icon) : '' }}"
                                                aria-label="تعديل">
                                                <i class="fa-regular fa-pen-to-square"></i>
                                            </button>
                                            <button class="btn btn-light text-danger" data-bs-toggle="modal"
                                                data-bs-target="#deleteCategoryModal" data-id="{{ $category->id }}"
                                                data-name="{{ $category->name }}" data-hard="0" aria-label="حذف">
                                                <i class="fa-regular fa-trash-can"></i>
                                            </button>
                                        @else
                                            <form class="d-inline" method="POST"
                                                action="{{ route('categories.restore', $category->id) }}">
                                                @csrf
                                                <button class="btn btn-light" aria-label="استعادة">
                                                    <i class="fa-solid fa-rotate-left"></i>
                                                </button>
                                            </form>
                                            <button class="btn btn-light text-danger" data-bs-toggle="modal"
                                                data-bs-target="#deleteCategoryModal" data-id="{{ $category->id }}"
                                                data-name="{{ $category->name }}" data-hard="1" aria-label="حذف نهائي">
                                                <i class="fa-solid fa-skull-crossbones"></i>
                                            </button>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5">
                                    <div class="text-center py-5">
                                        <div class="display-6 opacity-25"><i class="fa-regular fa-folder-open"></i></div>
                                        <p class="text-muted mb-3">لا توجد بيانات بعد.</p>
                                        <button class="btn btn-primary" data-bs-toggle="modal"
                                            data-bs-target="#createCategoryModal">
                                            <i class="fa-solid fa-plus"></i> أضف أول فئة
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            @if ($categories->hasPages())
                <div class="card-footer bg-white">
                    {{ $categories->withQueryString()->links() }}
                </div>
            @endif
        </div>
    </div>

    {{-- Include Modals --}}
    @include('dashboard.categories.modals.create', [
        'parents' => \App\Models\Category::orderBy('name')->get(['id', 'name']),
    ])
    @include('dashboard.categories.modals.edit', [
        'parents' => \App\Models\Category::orderBy('name')->get(['id', 'name']),
    ])
    @include('dashboard.categories.modals.show')
    @include('dashboard.categories.modals.delete')

    {{-- Offcanvas Filters --}}
    <div class="offcanvas offcanvas-end" tabindex="-1" id="filtersOffcanvas" aria-labelledby="filtersLabel">
        <div class="offcanvas-header">
            <h5 id="filtersLabel" class="offcanvas-title">فلاتر متقدمة</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="إغلاق"></button>
        </div>
        <div class="offcanvas-body">
            <form method="GET" action="{{ route('categories.index') }}" id="filtersForm">
                <div class="mb-3">
                    <label class="form-label">الأب</label>
                    <select class="form-select" name="parent_id">
                        <option value="">الكل</option>
                        @foreach (\App\Models\Category::orderBy('name')->get(['id', 'name']) as $p)
                            <option value="{{ $p->id }}" @selected($parentFilter == $p->id)>{{ $p->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="mb-3 form-check form-switch">
                    <input class="form-check-input" type="checkbox" role="switch" id="withIconSwitch" name="with_icon"
                        value="1" {{ $withIcon === '1' ? 'checked' : '' }}>
                    <label class="form-check-label" for="withIconSwitch">فقط التي لديها أيقونة</label>
                </div>

                <div class="mb-3 form-check form-switch">
                    <input class="form-check-input" type="checkbox" role="switch" id="noIconSwitch" name="with_icon"
                        value="0" {{ $withIcon === '0' ? 'checked' : '' }}>
                    <label class="form-check-label" for="noIconSwitch">فقط التي بدون أيقونة</label>
                </div>

                <div class="mb-3 form-check form-switch">
                    <input class="form-check-input" type="checkbox" role="switch" id="trashedSwitch"
                        name="onlyTrashed" value="1" {{ $onlyTrashed === '1' ? 'checked' : '' }}>
                    <label class="form-check-label" for="trashedSwitch">عرض المحذوفة</label>
                </div>

                <div class="d-flex gap-2">
                    <button class="btn btn-primary" type="submit"><i class="fa-solid fa-filter"></i> تطبيق</button>
                    <a href="{{ route('categories.index') }}" class="btn btn-outline-secondary">تفريغ</a>
                </div>
            </form>
        </div>
    </div>

    {{-- Toasts --}}
    @if (session('success'))
        <div class="position-fixed top-0 end-0 p-3" style="z-index: 1080;">
            <div class="toast align-items-center text-bg-success border-0 show" role="alert" aria-live="assertive"
                aria-atomic="true">
                <div class="d-flex">
                    <div class="toast-body">
                        {{ session('success') }}
                    </div>
                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
                        aria-label="إغلاق"></button>
                </div>
            </div>
        </div>
    @endif
    @if ($errors->any())
        <div class="position-fixed top-0 end-0 p-3" style="z-index: 1080;">
            <div class="toast align-items-center text-bg-danger border-0 show" role="alert" aria-live="assertive"
                aria-atomic="true">
                <div class="d-flex">
                    <div class="toast-body">
                        حدثت أخطاء في الإدخال. الرجاء المراجعة.
                    </div>
                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
                        aria-label="إغلاق"></button>
                </div>
            </div>
        </div>
    @endif

@endsection

@push('styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
@endpush

@push('scripts')
    <script>
        (function() {
            // Debounced search
            const input = document.getElementById('searchInput');
            if (!input) return;
            let t;
            input.addEventListener('input', function() {
                clearTimeout(t);
                t = setTimeout(() => {
                    const params = new URLSearchParams(window.location.search);
                    if (input.value.trim()) {
                        params.set('search', input.value.trim());
                    } else {
                        params.delete('search');
                    }
                    window.location = '{{ route('categories.index') }}' + '?' + params.toString();
                }, 400);
            });

            // Fill Show Modal
            const showModal = document.getElementById('showCategoryModal');
            showModal?.addEventListener('show.bs.modal', event => {
                const btn = event.relatedTarget;
                const name = btn.getAttribute('data-name') || '';
                const description = btn.getAttribute('data-description') || '';
                const parent = btn.getAttribute('data-parent') || '—';
                const icon = btn.getAttribute('data-icon') || '';
                showModal.querySelector('[data-field="name"]').textContent = name;
                showModal.querySelector('[data-field="description"]').textContent = description || '—';
                showModal.querySelector('[data-field="parent"]').textContent = parent || '—';
                const img = showModal.querySelector('[data-field="icon"]');
                if (icon) {
                    img.src = icon;
                    img.classList.remove('d-none');
                } else {
                    img.classList.add('d-none');
                }
            });

            // Fill Edit Modal
            const editModal = document.getElementById('editCategoryModal');
            editModal?.addEventListener('show.bs.modal', event => {
                const btn = event.relatedTarget;
                const id = btn.getAttribute('data-id');
                const name = btn.getAttribute('data-name') || '';
                const description = btn.getAttribute('data-description') || '';
                const parent_id = btn.getAttribute('data-parent_id') || '';
                const icon = btn.getAttribute('data-icon') || '';

                const form = editModal.querySelector('form');
                form.action = '{{ url('dashboard/categories') }}/' + id; // Adjusted URL

                form.querySelector('[name="name"]').value = name;
                form.querySelector('[name="description"]').value = description;
                form.querySelector('[name="parent_id"]').value = parent_id;
                const preview = editModal.querySelector('[data-preview="icon"]');
                if (icon) {
                    preview.src = icon;
                    preview.classList.remove('d-none');
                } else {
                    preview.classList.add('d-none');
                }
                form.querySelector('[name="icon"]').value = '';
            });

            // Fill Delete Modal
            const deleteModal = document.getElementById('deleteCategoryModal');
            deleteModal?.addEventListener('show.bs.modal', event => {
                const btn = event.relatedTarget;
                const id = btn.getAttribute('data-id');
                const name = btn.getAttribute('data-name');
                const hard = btn.getAttribute('data-hard') === '1';

                deleteModal.querySelector('[data-field="name"]').textContent = name;
                const form = deleteModal.querySelector('form');
                if (hard) {
                    form.action = '{{ url('dashboard/categories') }}/' + id + '/force-delete'; // Adjusted URL
                } else {
                    form.action = '{{ url('dashboard/categories') }}/' + id; // Adjusted URL
                }
                // The _method input is already set to DELETE in the modal's HTML, so no need to change it dynamically for both soft/force delete.
                deleteModal.querySelector('[data-hard-label]').textContent = hard ? 'حذف نهائي' : 'حذف';
            });

            // Live preview for create/edit icon
            document.querySelectorAll('input[type="file"][data-preview-target]').forEach(inp => {
                inp.addEventListener('change', (e) => {
                    const t = e.target.getAttribute('data-preview-target');
                    const img = document.querySelector(t);
                    if (e.target.files && e.target.files[0]) {
                        const reader = new FileReader();
                        reader.onload = ev => {
                            img.src = ev.target.result;
                            img.classList.remove('d-none');
                        }
                        reader.readAsDataURL(e.target.files[0]);
                    } else {
                        img.classList.add('d-none');
                    }
                });
            });
        })();
    </script>
@endpush