@extends('admin.layouts.layout')
@section('title')دسته‌بندی‌های محصولات@endsection

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">

    <div class="d-flex align-items-center justify-content-between mb-4">
        <div>
            <h4 class="mb-1">دسته‌بندی‌های محصولات</h4>
            <p class="text-muted mb-0">مدیریت دسته‌بندی‌های فروشگاه</p>
        </div>
        <a href="{{ route('admin.products.categories.create') }}" class="btn btn-primary">
            <i class="ti ti-plus me-1"></i> دسته جدید
        </a>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible mb-4">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="card">
        <div class="card-body p-3">
            @if($categories->isNotEmpty())
                <ul class="cat-tree-list" id="cat-root-list" data-parent-id="">
                    @include('admin.products.categories._tree-item', ['items' => $categories])
                </ul>
            @else
                <div class="text-center py-5 text-muted">
                    <i class="ti ti-folder-off fs-3 d-block mb-2"></i>
                    هیچ دسته‌بندی ثبت نشده است.
                </div>
            @endif
        </div>
        @if($categories->isNotEmpty())
            <div class="card-footer text-muted small d-flex align-items-center gap-2">
                <i class="ti ti-info-circle ti-xs"></i>
                برای تغییر ترتیب یا جابجایی والد، ردیف‌ها را بکشید و رها کنید
            </div>
        @endif
    </div>

</div>
@endsection

@section('customjs')
<script src="{{ url('theme/admin') }}/vendor/libs/sortablejs/sortable.js"></script>
<script>
(function () {
    var reorderUrl = '{{ route('admin.products.categories.reorder') }}';
    var csrfToken = '{{ csrf_token() }}';
    var saveTimer = null;

    function serializeTree(ul, parentId) {
        var result = [];
        ul.querySelectorAll(':scope > .cat-item').forEach(function (li, index) {
            var id = li.dataset.id;
            result.push({
                id: parseInt(id),
                parent_id: parentId ? parseInt(parentId) : null,
                sort_order: index + 1
            });
            var childUl = li.querySelector(':scope > .cat-tree-list');
            if (childUl) {
                result = result.concat(serializeTree(childUl, id));
            }
        });
        return result;
    }

    function saveOrder() {
        clearTimeout(saveTimer);
        saveTimer = setTimeout(function () {
            var root = document.getElementById('cat-root-list');
            var items = serializeTree(root, null);
            fetch(reorderUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken
                },
                body: JSON.stringify({ items: items })
            });
        }, 300);
    }

    function initAllSortables() {
        document.querySelectorAll('.cat-tree-list').forEach(function (ul) {
            if (ul._sortableInited) return;
            ul._sortableInited = true;
            Sortable.create(ul, {
                group: 'categories',
                handle: '.cat-drag-handle',
                animation: 150,
                fallbackOnBody: true,
                swapThreshold: 0.65,
                emptyInsertThreshold: 10,
                ghostClass: 'cat-sortable-ghost',
                chosenClass: 'cat-sortable-chosen',
                onEnd: saveOrder
            });
        });
    }

    initAllSortables();

    document.querySelectorAll('.btn-delete').forEach(function (btn) {
        btn.addEventListener('click', function () {
            var name = this.dataset.name;
            var form = this.closest('.delete-form');
            Swal.fire({
                title: 'حذف دسته‌بندی',
                html: 'آیا از حذف <strong>' + name + '</strong> مطمئن هستید؟',
                icon: 'warning',
                showCancelButton: true,
                showDenyButton: false,
                confirmButtonText: 'بله، حذف شود',
                cancelButtonText: 'انصراف',
                confirmButtonColor: '#d33',
                cancelButtonColor: '#6c757d',
                reverseButtons: true,
            }).then(function (result) {
                if (result.isConfirmed) {
                    form.submit();
                }
            });
        });
    });
}());
</script>
@endsection
