@extends('backend.template.layouts.template-base')
@section('title', 'Product Management - Manage Category')


@section('content')
<section>
    <div class="page-head-title mb-3">
        <div class="d-flex align-items-center justify-content-between">
            <h2 class="text-title fw-semibold mb-0">Manage Category</h2>
            <div class="d-flex align-items-center gap-3 button-wrapper">
                <a href="javascript:void(0);" class="button-green gap-2 align-items-center px-3"
                    data-bs-toggle="modal" data-bs-target="#CreateCategoryModal">
                    <span class="review-edit"><img src="{{ asset('backend/template/svg-icon/plus.svg') }}" alt="icon"></span>
                    Create New Category
                </a>
                <a href="{{ route('backend.template.sections.create') }}" class="button-green gap-2 align-items-center px-3">
                    <span class="review-edit"><img src="{{ asset('backend/template/svg-icon/plus.svg') }}" alt="icon"></span>
                    Create New Section
                </a>
            </div>
        </div>
    </div>

    <ul class="nav nav-tabs nav-tabs-custom" role="tablist">
        <li class="nav-item" role="presentation">
            <a class="nav-link active" data-bs-toggle="tab" href="#Categories" role="tab">Categories</a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" data-bs-toggle="tab" href="#Sections" role="tab">Sections</a>
        </li>
    </ul>

    <div class="tab-content card-tab-border text-muted">

        {{-- ── Categories Tab ─────────────────────────────────────────────────── --}}
        <div class="tab-pane show active" id="Categories" role="tabpanel">
            <div class="p-3">
                <div class="table-responsive mt-3">
                    <table id="categoriesTable" class="table table-nowrap align-middle w-100">
                        <thead class="all-table-head">
                            <tr class="text-capitalize">
                                <th class="p-3 table-head-content" style="width:36px;"></th>
                                <th class="p-3 table-head-content" style="width:40px;"><input type="checkbox" class="form-check-input" id="selectAllCategories"></th>
                                <th class="p-3 table-head-content">S.No</th>
                                <th class="p-3 table-head-content">Header color</th>
                                <th class="p-3 table-head-content">Category Image</th>
                                <th class="p-3 table-head-content">Category Name</th>
                                <th class="p-3 table-head-content">Total Sections</th>
                                <th class="p-3 table-head-content">Last Updated On</th>
                                <th class="p-3 table-head-content">Status</th>
                                <th class="p-3 table-head-content">Action</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- ── Sections Tab ────────────────────────────────────────────────────── --}}
        <div class="tab-pane" id="Sections" role="tabpanel">
            <div class="p-3">

                {{-- Search + Show entries --}}
                <div class="d-flex align-items-center justify-content-between mb-3 gap-3 flex-wrap">
                    <div class="table-search-box" style="max-width:340px;flex:1;">
                        <img class="table-search-icon" src="{{ asset('backend/template/svg-icon/search.svg') }}" alt="search">
                        <input type="text" id="sectionSearchInput" placeholder="Search category or section name" class="table-search-input">
                    </div>
                    <div class="d-flex align-items-center gap-2 secondary-text fs-13">
                        Show
                        <select id="catPerPageSelect" class="form-select form-select-sm" style="width:70px;">
                            <option value="10" selected>10</option>
                            <option value="25">25</option>
                            <option value="50">50</option>
                        </select>
                        entries
                    </div>
                </div>

                {{-- Accordion --}}
                <div id="categorySectionsAccordion" class="d-flex flex-column gap-2">
                    <div class="text-center py-5 secondary-text">
                        <i class="ri-loader-4-line fs-2 d-block mb-2"></i> Loading sections...
                    </div>
                </div>

                {{-- Pagination --}}
                <div class="d-flex align-items-center justify-content-between mt-4" id="catPaginationWrap" style="display:none!important;">
                    <span id="catPaginationInfo" class="secondary-text fs-13"></span>
                    <div class="d-flex align-items-center gap-1" id="catPaginationBtns"></div>
                </div>

            </div>
        </div>
    </div>

    {{-- ── Create Category Modal ──────────────────────────────────────────────── --}}
    <div class="modal fade" id="CreateCategoryModal" tabindex="-1">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content border-0 rounded-16 overflow-hidden">
                <div class="modal-header bg-color-lightGreen border-0">
                    <h3 class="mb-0 modal-title color-green">New Category</h3>
                    <button type="button" class="btn-close opacity-100 shadow-none" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4">
                    <form id="createCategoryForm" enctype="multipart/form-data">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label-modal">Category Name <span class="color-red">*</span></label>
                                <input type="text" name="name" class="form-control" placeholder="Enter category name">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label-modal">Header Color <span class="color-red">*</span></label>
                                <input type="text" name="name" class="form-control" placeholder="#paste color code">
                            </div>
                            <div class="col-md-12">
                                <label class="form-label-modal">Category Image <span class="color-red">*</span></label>
                                <div class="cat-upload-box" id="createImgBox">
                                    <input type="file" name="image" id="createCatImageInput"
                                        class="position-absolute w-100 h-100 top-0 start-0 opacity-0"
                                        style="cursor:pointer;" accept=".png,.jpg,.jpeg">
                                    <div id="createImgPlaceholder">
                                        <i class="ri-image-add-line fs-2 secondary-text d-block mb-1"></i>
                                        <span class="secondary-text fs-13">Click to upload image</span>
                                        <span class="secondary-text fs-12 d-block">PNG, JPG (max 10 MB)</span>
                                    </div>
                                    <div id="createImgPreviewWrap" class="d-none text-center">
                                        <img id="createImgPreview" class="preview-img" src="" alt="preview">
                                        <span class="secondary-text fs-12 d-block mt-1">Click to replace</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label-modal d-block">Status</label>
                                <div class="d-flex align-items-center gap-3 mt-2">
                                    <div class="form-check d-flex align-items-center gap-2 mb-0">
                                        <input class="form-check-input" type="radio" name="status" value="active" checked>
                                        <label class="form-label-modal mb-0">Active</label>
                                    </div>
                                    <div class="form-check d-flex align-items-center gap-2 mb-0">
                                        <input class="form-check-input" type="radio" name="status" value="inactive">
                                        <label class="form-label-modal mb-0">Inactive</label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="seo-toggle-panel">
                                    <div class="seo-toggle-head">
                                        <span class="fw-semibold text-title fs-13">SEO Settings</span>
                                        <div class="form-check form-switch mb-0">
                                            <input class="form-check-input" type="checkbox" id="createSeoToggle" role="switch" style="width:38px;height:20px;cursor:pointer;">
                                        </div>
                                    </div>
                                    <div class="seo-toggle-body" id="createSeoBody" style="display:none;">
                                        <div class="row g-3">
                                            <div class="col-md-6">
                                                <label class="form-label-modal">Meta Title <span class="color-red">*</span></label>
                                                <input type="text" name="seo_meta_title" id="createSeoMetaTitle" class="form-control" placeholder="Enter meta title">
                                            </div>
                                            <div class="col-md-6">
                                                <label class="form-label-modal">H1 <span class="color-red">*</span></label>
                                                <input type="text" name="seo_h1" id="createSeoH1" class="form-control" placeholder="Enter H1 heading">
                                            </div>
                                            <div class="col-md-12">
                                                <label class="form-label-modal">Meta Description <span class="color-red">*</span></label>
                                                <textarea name="seo_meta_description" id="createSeoMetaDesc" class="form-control" rows="2" placeholder="Enter meta description"></textarea>
                                            </div>
                                            <div class="col-md-12">
                                                <label class="form-label-modal">Schema <span class="color-red">*</span></label>
                                                <textarea name="seo_schema" id="createSeoSchema" class="form-control" rows="2" placeholder="Enter schema JSON-LD"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer border-0 px-4 pb-4 pt-0 d-flex justify-content-end gap-2">
                    <button type="button" class="button-outline" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="button-green" id="saveCategoryBtn">Create Category</button>
                </div>
            </div>
        </div>
    </div>

    {{-- ── Edit Category Modal ────────────────────────────────────────────────── --}}
    <div class="modal fade" id="EditCategoryModal" tabindex="-1">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content border-0 rounded-16 overflow-hidden">
                <div class="modal-header bg-color-lightGreen border-0">
                    <h3 class="mb-0 modal-title color-green">Edit Category</h3>
                    <button type="button" class="btn-close opacity-100 shadow-none" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4">
                    <form id="editCategoryForm" enctype="multipart/form-data">
                        <input type="hidden" id="editCategoryId">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label-modal">Category Name <span class="color-red">*</span></label>
                                <input type="text" id="editCategoryName" name="name" class="form-control" placeholder="Enter category name">
                            </div>
                             <div class="col-md-6">
                                <label class="form-label-modal">Header Color <span class="color-red">*</span></label>
                                <input type="text" name="name" class="form-control" placeholder="#paste color code">
                            </div>
                            <div class="col-md-12">
                                <label class="form-label-modal">Category Image <span class="color-red">*</span></label>
                                <div class="cat-upload-box" id="editImgBox">
                                    <input type="file" name="image" id="editCatImageInput"
                                        class="position-absolute w-100 h-100 top-0 start-0 opacity-0"
                                        style="cursor:pointer;" accept=".png,.jpg,.jpeg">
                                    <div id="editImgPlaceholder">
                                        <i class="ri-image-add-line fs-2 secondary-text d-block mb-1"></i>
                                        <span class="secondary-text fs-13">Click to upload image</span>
                                        <span class="secondary-text fs-12 d-block">PNG, JPG (max 10 MB)</span>
                                    </div>
                                    <div id="editImgPreviewWrap" class="d-none text-center">
                                        <img id="editImgPreview" class="preview-img" src="" alt="preview">
                                        <span class="secondary-text fs-12 d-block mt-1">Click to replace</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label-modal d-block">Status</label>
                                <div class="d-flex align-items-center gap-3 mt-2">
                                    <div class="form-check d-flex align-items-center gap-2 mb-0">
                                        <input class="form-check-input" type="radio" name="edit_cat_status" id="editCatActive" value="active">
                                        <label class="form-label-modal mb-0" for="editCatActive">Active</label>
                                    </div>
                                    <div class="form-check d-flex align-items-center gap-2 mb-0">
                                        <input class="form-check-input" type="radio" name="edit_cat_status" id="editCatInactive" value="inactive">
                                        <label class="form-label-modal mb-0" for="editCatInactive">Inactive</label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="seo-toggle-panel">
                                    <div class="seo-toggle-head">
                                        <span class="fw-semibold text-title fs-13">SEO Settings</span>
                                        <div class="form-check form-switch mb-0">
                                            <input class="form-check-input" type="checkbox" id="editSeoToggle" role="switch" style="width:38px;height:20px;cursor:pointer;">
                                        </div>
                                    </div>
                                    <div class="seo-toggle-body" id="editSeoBody" style="display:none;">
                                        <div class="row g-3">
                                            <div class="col-md-6">
                                                <label class="form-label-modal">Meta Title <span class="color-red">*</span></label>
                                                <input type="text" name="seo_meta_title" id="editSeoMetaTitle" class="form-control" placeholder="Enter meta title">
                                            </div>
                                            <div class="col-md-6">
                                                <label class="form-label-modal">H1 <span class="color-red">*</span></label>
                                                <input type="text" name="seo_h1" id="editSeoH1" class="form-control" placeholder="Enter H1 heading">
                                            </div>
                                            <div class="col-md-12">
                                                <label class="form-label-modal">Meta Description <span class="color-red">*</span></label>
                                                <textarea name="seo_meta_description" id="editSeoMetaDesc" class="form-control" rows="2" placeholder="Enter meta description"></textarea>
                                            </div>
                                            <div class="col-md-12">
                                                <label class="form-label-modal">Schema <span class="color-red">*</span></label>
                                                <textarea name="seo_schema" id="editSeoSchema" class="form-control" rows="2" placeholder="Enter schema JSON-LD"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer border-0 px-4 pb-4 pt-0 d-flex justify-content-end gap-2">
                    <button type="button" class="button-outline" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="button-green" id="updateCategoryBtn">Save Changes</button>
                </div>
            </div>
        </div>
    </div>

    {{-- ── Delete Category Modal ──────────────────────────────────────────────── --}}
    <div class="modal fade" id="DeleteCategoryModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content rounded-16 overflow-hidden">
                <div class="modal-header bg-color-lightRed">
                    <h3 class="text-color-error modal-title mb-0">Delete Category?</h3>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="deleteCategoryId">
                    <p class="mb-0 text-title">Are you sure you want to delete <span class="fw-semibold" id="deleteCategoryName"></span>?</p>
                    <p class="mb-0 secondary-text mt-1">All sections under this category will lose their category association.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="button-outline" data-bs-dismiss="modal">Cancel</button>
                    <button class="button-red" id="confirmDeleteCategoryBtn">Delete Category</button>
                </div>
            </div>
        </div>
    </div>

    {{-- ── Delete Section Modal ────────────────────────────────────────────────── --}}
    <div class="modal fade" id="DeleteSectionModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content rounded-16 overflow-hidden">
                <div class="modal-header bg-color-lightRed">
                    <h3 class="text-color-error modal-title mb-0">Delete Section?</h3>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="deleteSectionId">
                    <input type="hidden" id="deleteSectionCatId">
                    <p class="mb-0 text-title">Are you sure you want to delete <span class="fw-semibold" id="deleteSectionName"></span>?</p>
                    <p class="mb-0 secondary-text mt-1">This section and all its product associations will be permanently removed.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="button-outline" data-bs-dismiss="modal">Cancel</button>
                    <button class="button-red" id="confirmDeleteSectionBtn">Delete Section</button>
                </div>
            </div>
        </div>
    </div>

</section>
@endsection

@section('scripts')
<script>
$(function () {

    var _createUrl       = '{{ route("backend.template.sections.create") }}';
    var _categoryListUrl = '{{ route("backend.template.sections.category-list") }}';

    function showToast(t, m) { t === 'success' ? toastr.success(m) : toastr.error(m); }

    // ════════════════════════════════════════════════════════════════════════
    // Categories DataTable
    // ════════════════════════════════════════════════════════════════════════
    var _reorderUrl = '{{ route("backend.template.categories.reorder") }}';

    var categoriesTable = $('#categoriesTable').DataTable({
        processing: true,
        serverSide: true,
        ordering:   false,
        ajax: '{{ route("backend.template.categories.data") }}',
        columns: [
            {
                data: null, orderable: false, searchable: false,
                defaultContent: '<span class="cat-drag-handle" title="Drag to reorder" style="cursor:grab;padding:0 6px;color:#9ca3af;font-size:18px;"><i class="ri-drag-move-2-line"></i></span>',
            },
            { data: null, defaultContent: '<input type="checkbox" class="form-check-input row-check">', orderable: false, searchable: false },
            { data: 'DT_RowIndex',    name: 'DT_RowIndex', orderable: false, searchable: false },
            { data: 'header_color',   name: '#000000' },
            { data: 'image_html',     name: 'image', orderable: false, searchable: false },
            { data: 'name',           name: 'name' },
            { data: 'sections_count', name: 'sections_count', orderable: false, searchable: false },
            { data: 'updated_at_fmt', name: 'updated_at', searchable: false },
            { data: 'status_badge',   name: 'status', orderable: false, searchable: false },
            { data: 'action',         name: 'action', orderable: false, searchable: false },
        ],
        dom: '<"d-flex align-items-center justify-content-between mb-3"<"d-flex gap-3"f><"d-flex gap-2 align-items-center"l>>rt<"d-flex align-items-center justify-content-end mt-3"ip>',
        language: {
            search: '', searchPlaceholder: 'Search category name',
            lengthMenu: 'Show _MENU_ entries',
            info: '_START_-_END_ of _TOTAL_ results',
        },
    });

    // Init SortableJS on the tbody after every draw
    categoriesTable.on('draw', function () {
        var tbody = document.querySelector('#categoriesTable tbody');
        if (!tbody || typeof Sortable === 'undefined') return;

        if (tbody._sortable) tbody._sortable.destroy();

        tbody._sortable = Sortable.create(tbody, {
            handle    : '.cat-drag-handle',
            animation : 150,
            ghostClass: 'sortable-ghost',
            onEnd: function () {
                var ids = [];
                $('#categoriesTable tbody tr').each(function () {
                    var rowData = categoriesTable.row(this).data();
                    if (rowData && rowData.id) ids.push(rowData.id);
                });

                if (!ids.length) return;

                $.post(_reorderUrl, { ids: ids, _token: '{{ csrf_token() }}' })
                    .done(function ()  { showToast('success', 'Category order saved.'); })
                    .fail(function ()  { showToast('error', 'Failed to save order.'); categoriesTable.ajax.reload(null, false); });
            },
        });
    });

    // Select-all categories
    $('#selectAllCategories').on('change', function () {
        $('#categoriesTable tbody .row-check').prop('checked', $(this).is(':checked'));
        $(this).prop('indeterminate', false);
    });
    $(document).on('change', '#categoriesTable .row-check', function () {
        var total   = $('#categoriesTable tbody .row-check').length;
        var checked = $('#categoriesTable tbody .row-check:checked').length;
        $('#selectAllCategories').prop({ indeterminate: checked > 0 && checked < total, checked: checked === total });
    });
    categoriesTable.on('draw', function () {
        $('#selectAllCategories').prop({ indeterminate: false, checked: false });
    });

    // Reset modals on close
    $('#CreateCategoryModal').on('hidden.bs.modal', function () {
        $(this).find('.is-invalid').removeClass('is-invalid');
        document.getElementById('createCategoryForm').reset();
        $('#createImgPreviewWrap').addClass('d-none').find('img').attr('src', '');
        $('#createImgPlaceholder').removeClass('d-none');
        $('#createSeoToggle').prop('checked', false);
        $('#createSeoBody').hide();
    });
    $('#EditCategoryModal').on('hidden.bs.modal', function () {
        $(this).find('.is-invalid').removeClass('is-invalid');
        $('#editImgPreviewWrap').addClass('d-none').find('img').attr('src', '');
        $('#editImgPlaceholder').removeClass('d-none');
        $('#editSeoToggle').prop('checked', false);
        $('#editSeoBody').hide();
        $('#editSeoBody input, #editSeoBody textarea').prop('disabled', false);
    });

    // Image preview handlers
    $('#createCatImageInput').on('change', function () {
        var file = this.files[0];
        if (!file) return;
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#createImgPreview').attr('src', e.target.result);
            $('#createImgPlaceholder').addClass('d-none');
            $('#createImgPreviewWrap').removeClass('d-none');
        };
        reader.readAsDataURL(file);
    });
    $('#editCatImageInput').on('change', function () {
        var file = this.files[0];
        if (!file) return;
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#editImgPreview').attr('src', e.target.result);
            $('#editImgPlaceholder').addClass('d-none');
            $('#editImgPreviewWrap').removeClass('d-none');
        };
        reader.readAsDataURL(file);
    });

    // SEO toggle handlers
    $('#createSeoToggle').on('change', function () {
        $(this).is(':checked') ? $('#createSeoBody').slideDown(200) : $('#createSeoBody').slideUp(200);
        if (!$(this).is(':checked')) $('#createSeoBody .is-invalid').removeClass('is-invalid');
    });
    $('#editSeoToggle').on('change', function () {
        $(this).is(':checked') ? $('#editSeoBody').slideDown(200) : $('#editSeoBody').slideUp(200);
        if (!$(this).is(':checked')) $('#editSeoBody .is-invalid').removeClass('is-invalid');
    });

    // ── Create Category ──────────────────────────────────────────────────────
    $('#saveCategoryBtn').on('click', function () {
        var $btn = $(this).prop('disabled', true);
        var ok   = true;

        var $name = $('#createCategoryForm input[name="name"]');
        $name.toggleClass('is-invalid', !$name.val().trim());
        if (!$name.val().trim()) ok = false;

        var seoOn = $('#createSeoToggle').is(':checked');
        if (seoOn) {
            ['#createSeoMetaTitle', '#createSeoH1', '#createSeoMetaDesc', '#createSeoSchema'].forEach(function (sel) {
                var $f = $(sel);
                $f.toggleClass('is-invalid', !$f.val().trim());
                if (!$f.val().trim()) ok = false;
            });
        }

        if (!ok) {
            $btn.prop('disabled', false);
            if (!$name.val().trim()) $name.focus();
            toastr.error('Please fill in all required fields.');
            return;
        }

        if (!seoOn) { $('#createSeoBody input, #createSeoBody textarea').prop('disabled', true); }
        var form = new FormData(document.getElementById('createCategoryForm'));
        $('#createSeoBody input, #createSeoBody textarea').prop('disabled', false);

        $.ajax({ url: '{{ route("backend.template.categories.store") }}', type: 'POST', data: form, processData: false, contentType: false })
            .done(function (res) {
                showToast('success', res.message);
                $('#CreateCategoryModal').modal('hide');
                categoriesTable.ajax.reload();
                loadCategoryAccordion();
            })
            .fail(function (xhr) {
                var msg = xhr.responseJSON?.errors
                    ? Object.values(xhr.responseJSON.errors).flat()[0]
                    : (xhr.responseJSON?.message || 'Failed to create category.');
                showToast('error', msg);
            })
            .always(function () { $btn.prop('disabled', false); });
    });

    $(document).on('click', '.edit-category-btn', function () {
        var btn = $(this);
        $('#editCategoryId').val(btn.data('id'));
        $('#editCategoryName').val(btn.data('name'));
        $('[name=edit_cat_status][value=' + btn.data('status') + ']').prop('checked', true);

        var img = btn.data('image');
        if (img) {
            $('#editImgPreview').attr('src', img);
            $('#editImgPlaceholder').addClass('d-none');
            $('#editImgPreviewWrap').removeClass('d-none');
        } else {
            $('#editImgPreviewWrap').addClass('d-none').find('img').attr('src', '');
            $('#editImgPlaceholder').removeClass('d-none');
        }

        var seo = btn.data('seo');
        if (seo && (seo.meta_title || seo.meta_description || seo.schema || seo.h1)) {
            $('#editSeoMetaTitle').val(seo.meta_title || '');
            $('#editSeoH1').val(seo.h1 || '');
            $('#editSeoMetaDesc').val(seo.meta_description || '');
            $('#editSeoSchema').val(seo.schema || '');
            $('#editSeoToggle').prop('checked', true);
            $('#editSeoBody').show();
        } else {
            $('#editSeoMetaTitle, #editSeoH1, #editSeoMetaDesc, #editSeoSchema').val('');
            $('#editSeoToggle').prop('checked', false);
            $('#editSeoBody').hide();
        }

        $('#EditCategoryModal').modal('show');
    });

    $('#updateCategoryBtn').on('click', function () {
        var $btn = $(this).prop('disabled', true);
        var ok   = true;

        var $name = $('#editCategoryName');
        $name.toggleClass('is-invalid', !$name.val().trim());
        if (!$name.val().trim()) ok = false;

        var seoOn = $('#editSeoToggle').is(':checked');
        if (seoOn) {
            ['#editSeoMetaTitle', '#editSeoH1', '#editSeoMetaDesc', '#editSeoSchema'].forEach(function (sel) {
                var $f = $(sel);
                $f.toggleClass('is-invalid', !$f.val().trim());
                if (!$f.val().trim()) ok = false;
            });
        }

        if (!ok) {
            $btn.prop('disabled', false);
            if (!$name.val().trim()) $name.focus();
            toastr.error('Please fill in all required fields.');
            return;
        }

        if (!seoOn) { $('#editSeoBody input, #editSeoBody textarea').prop('disabled', true); }
        var id   = $('#editCategoryId').val();
        var form = new FormData(document.getElementById('editCategoryForm'));
        form.append('status', $('[name=edit_cat_status]:checked').val());
        $('#editSeoBody input, #editSeoBody textarea').prop('disabled', false);

        $.ajax({ url: '{{ url("admin/categories") }}/' + id, type: 'POST', data: form, processData: false, contentType: false })
            .done(function (res) {
                showToast('success', res.message);
                $('#EditCategoryModal').modal('hide');
                categoriesTable.ajax.reload();
                loadCategoryAccordion();
            })
            .fail(function (xhr) {
                var msg = xhr.responseJSON?.errors
                    ? Object.values(xhr.responseJSON.errors).flat()[0]
                    : (xhr.responseJSON?.message || 'Update failed.');
                showToast('error', msg);
            })
            .always(function () { $btn.prop('disabled', false); });
    });

    $(document).on('click', '.status-toggle', function () {
        var id = $(this).data('id');
        $.post('{{ url("admin/categories") }}/' + id + '/toggle-status')
            .done(function () { showToast('success', 'Category status updated.'); categoriesTable.ajax.reload(); })
            .fail(function () { showToast('error', 'Failed.'); });
    });

    $(document).on('click', '.delete-category-btn', function () {
        $('#deleteCategoryId').val($(this).data('id'));
        $('#deleteCategoryName').text($(this).data('name'));
        $('#DeleteCategoryModal').modal('show');
    });

    $('#confirmDeleteCategoryBtn').on('click', function () {
        var id = $('#deleteCategoryId').val();
        $.ajax({ url: '{{ url("admin/categories") }}/' + id, type: 'DELETE' })
            .done(function (res) { showToast('success', res.message); $('#DeleteCategoryModal').modal('hide'); categoriesTable.ajax.reload(); loadCategoryAccordion(); })
            .fail(function () { showToast('error', 'Delete failed.'); });
    });

    // ════════════════════════════════════════════════════════════════════════
    // Sections Accordion
    // ════════════════════════════════════════════════════════════════════════
    var _reorderSectionsUrl = '{{ route("backend.template.sections.reorder-sections") }}';

    var _iconPlus          = '{{ asset("backend/template/svg-icon/plus.svg") }}';
    var _iconView          = '{{ asset("backend/template/svg-icon/view.svg") }}';
    var _iconEdit          = '{{ asset("backend/template/svg-icon/edit-blue.svg") }}';
    var _iconDelete        = '{{ asset("backend/template/svg-icon/delete-red.svg") }}';
    var _iconArrowLeft     = '{{ asset("backend/template/svg-icon/left-arrow.svg") }}';
    // Use a placeholder so we never get a double-slash from route(name, "")
    var _catSectionsUrlTpl = '{{ route("backend.template.sections.category-sections", ["categoryId" => "CAT_ID"]) }}';

    function catSectionsUrl(catId) { return _catSectionsUrlTpl.replace('CAT_ID', catId); }

    var catData        = [];
    var catCurrentPage = 1;
    var catPerPage     = 10;
    var openCategories = {};   // all collapsed by default
    var sectionsLoaded = {};   // catId → true once sections have been fetched
    var searchTimer;

    function loadCategoryAccordion(q) {
        $('#categorySectionsAccordion').html(
            '<div class="text-center py-5 secondary-text">' +
            '<i class="ri-loader-4-line fs-2 d-block mb-2"></i> Loading...</div>'
        );
        $.get(_categoryListUrl, { q: q || '' })
            .done(function (data) {
                catData        = data;
                catCurrentPage = 1;
                openCategories = {};
                sectionsLoaded = {};
                renderAccordion();
            })
            .fail(function () {
                $('#categorySectionsAccordion').html(
                    '<div class="text-center py-5 text-danger fs-13">Failed to load. Please refresh the page.</div>'
                );
            });
    }

    function renderAccordion() {
        var allCat    = catData.find(function(c) { return c.id === 0; }) || {};
        var otherCats = catData.filter(function(c) { return c.id !== 0; });
        var total     = otherCats.length;
        var start     = (catCurrentPage - 1) * catPerPage;
        var pageCats  = otherCats.slice(start, start + catPerPage);

        var html = buildCatRow(allCat) + pageCats.map(buildCatRow).join('');
        $('#categorySectionsAccordion').html(
            html || '<div class="text-center py-5 secondary-text">No categories found.</div>'
        );
        renderPagination(total);
    }

    function buildCatRow(cat) {
        var iconHtml = cat.image
            ? '<img src="' + cat.image + '" class="cat-icon me-2" alt="">'
            : '<span class="d-inline-flex align-items-center justify-content-center bg-color-lightGreen rounded-circle me-2" style="width:34px;height:34px;flex-shrink:0;"><i class="ri-grid-fill color-green"></i></span>';

        return '<div class="cat-accordion-item" data-cat-id="' + cat.id + '">' +
            '<div class="cat-accordion-header d-flex align-items-center justify-content-between" onclick="window._toggleCat(' + cat.id + ')">' +
                '<div class="d-flex align-items-center gap-2 flex-grow-1 overflow-hidden">' +
                    iconHtml +
                    '<span class="fw-semibold text-title text-truncate">' + (cat.name || 'All') + '</span>' +
                    '<span class="secondary-text fs-12 ms-2 flex-shrink-0 text-nowrap">' +
                        (cat.sections_count || 0) + ' sections &nbsp;·&nbsp; ' + (cat.products_count || 0) + ' products' +
                    '</span>' +
                '</div>' +
                '<div class="d-flex align-items-center gap-2 flex-shrink-0">' +
                    '<a href="' + (cat.add_section_url || _createUrl) + '" onclick="event.stopPropagation();" class="cat-add-btn button-green btn-sm px-3 align-items-center gap-1" style="display:none;text-decoration:none;font-size:13px;">' +
                        '<img src="' + _iconPlus + '" width="13"> Add New Section' +
                    '</a>' +
                    '<i class="fs-4 secondary-text toggle-arrow ri-arrow-down-s-line ms-1"></i>' +
                '</div>' +
            '</div>' +
            '<div class="cat-accordion-body d-none" id="catBody_' + cat.id + '">' +
                '<div id="catSections_' + cat.id + '" class="p-3"></div>' +
            '</div>' +
        '</div>';
    }

    // Toggle open/close by manipulating DOM — never re-renders the full accordion
    window._toggleCat = function (catId) {
        var $item   = $('.cat-accordion-item[data-cat-id="' + catId + '"]');
        var $header = $item.find('.cat-accordion-header');
        var $body   = $item.find('.cat-accordion-body');
        var $arrow  = $item.find('.toggle-arrow');
        var $addBtn = $item.find('.cat-add-btn');
        var isOpen  = !!openCategories[catId];

        if (isOpen) {
            openCategories[catId] = false;
            $header.removeClass('is-open');
            $body.addClass('d-none');
            $arrow.removeClass('ri-arrow-up-s-line').addClass('ri-arrow-down-s-line');
            $addBtn.hide();
        } else {
            openCategories[catId] = true;
            $header.addClass('is-open');
            $body.removeClass('d-none');
            $arrow.removeClass('ri-arrow-down-s-line').addClass('ri-arrow-up-s-line');
            $addBtn.css('display', 'flex');

            // Lazy-load sections once per open
            if (!sectionsLoaded[catId]) {
                sectionsLoaded[catId] = true;
                $('#catSections_' + catId).html(
                    '<div class="text-center py-4 secondary-text fs-13">' +
                    '<i class="ri-loader-4-line"></i> Loading sections...</div>'
                );
                loadCatSections(catId, 3);
            }
        }
    };

    function loadCatSections(catId, limit) {
        var q = $('#sectionSearchInput').val().trim();
        $.get(catSectionsUrl(catId), { limit: limit, q: q })
            .done(function(data) { renderCatSections(catId, data); })
            .fail(function() {
                if (openCategories[catId]) {
                    $('#catSections_' + catId).html(
                        '<div class="text-center py-3 text-danger fs-13">Failed to load sections.</div>'
                    );
                }
            });
    }

    function renderCatSections(catId, data) {
        var sections = data.sections;
        var total    = data.total;
        var hasMore  = data.has_more;

        if (!sections.length) {
            $('#catSections_' + catId).html(
                '<div class="text-center py-4 secondary-text">' +
                '<i class="ri-layout-masonry-line fs-2 d-block mb-2"></i>' +
                'No sections in this category yet.</div>'
            );
            return;
        }

        var tableHtml =
            '<div class="table-responsive">' +
            '<table class="table table-nowrap align-middle mb-0">' +
            '<thead class="all-table-head"><tr>' +
            '<th class="p-3" style="width:40px;"></th>' +
            '<th class="p-3" style="width:44px;"><input type="checkbox" class="form-check-input select-all-cb" data-cat="' + catId + '"></th>' +
            '<th class="p-3">S.no</th>' +
            '<th class="p-3">Section Bg</th>' +
            '<th class="p-3">Section Name</th>' +
            '<th class="p-3">Section Type</th>' +
            '<th class="p-3">Total Products</th>' +
            '<th class="p-3">Last Updated On</th>' +
            '<th class="p-3">Status</th>' +
            '<th class="p-3">Action</th>' +
            '</tr></thead>' +
            '<tbody id="sectionBody_' + catId + '">';

        sections.forEach(function(s, i) {
            var statusClass = s.status === 'active' ? 'status-green-pill' : 'status-yellow-pill';
            var bgHtml = s.image
                ? '<img src="' + s.image + '" style="width:36px;height:36px;object-fit:cover;border-radius:6px;" alt="">'
                : '<span class="d-inline-flex align-items-center justify-content-center bg-color-lignGray rounded" style="width:36px;height:36px;"><i class="ri-image-line secondary-text"></i></span>';

            tableHtml +=
                '<tr id="sectionRow_' + s.id + '">' +
                '<td class="p-3 section-row-drag"><i class="ri-drag-move-2-line fs-5 secondary-text drag-handle"></i></td>' +
                '<td class="p-2"><input type="checkbox" class="form-check-input section-cb" data-id="' + s.id + '"></td>' +
                '<td class="p-2">' + (i + 1) + '</td>' +
                '<td class="p-2">' + bgHtml + '</td>' +
                '<td class="p-2 fw-medium text-title">' + s.name + '</td>' +
                '<td class="p-2">' + (s.section_type ? '<span class="badge bg-info text-dark">' + s.section_type.charAt(0).toUpperCase() + s.section_type.slice(1) + '</span>' : '<span class="secondary-text">-</span>') + '</td>' +
                '<td class="p-2">' + s.products_count + '</td>' +
                '<td class="p-2 secondary-text">' + s.updated_at + '</td>' +
                '<td class="p-2"><span class="fw-bold ' + statusClass + ' status-toggle-section" style="cursor:pointer;" data-id="' + s.id + '" data-status="' + s.status + '">' + (s.status === 'active' ? 'Active' : 'Inactive') + '</span></td>' +
                '<td class="p-2">' +
                    '<div class="d-flex align-items-center gap-2">' +
                        '<a href="' + s.show_url + '" title="View"><img src="' + _iconView + '" alt="view"></a>' +
                        '<a href="' + s.edit_url + '" title="Edit"><img src="' + _iconEdit + '" alt="edit"></a>' +
                        '<a href="javascript:void(0);" class="delete-section-btn" data-id="' + s.id + '" data-cat="' + catId + '" data-name="' + s.name.replace(/"/g, '&quot;') + '" title="Delete"><img src="' + _iconDelete + '" alt="delete"></a>' +
                    '</div>' +
                '</td>' +
                '</tr>';
        });

        tableHtml += '</tbody></table></div>';

        var viewAllHtml = '';
        if (hasMore) {
            viewAllHtml =
                '<div class="text-center py-2 border-top">' +
                '<a href="javascript:void(0);" class="view-all-link load-all-sections" data-cat-id="' + catId + '">' +
                (total - sections.length) + ' more &nbsp;<span>View All</span> <i class="ri-arrow-down-s-line"></i>' +
                '</a></div>';
        }

        $('#catSections_' + catId).html(tableHtml + viewAllHtml);

        if (typeof Sortable !== 'undefined') {
            var tbody = document.getElementById('sectionBody_' + catId);
            if (tbody) Sortable.create(tbody, {
                handle   : '.drag-handle',
                animation: 150,
                onEnd: function () {
                    renumberSectionRows(catId);

                    var ids = [];
                    $('#sectionBody_' + catId + ' tr').each(function () {
                        var id = $(this).attr('id') ? $(this).attr('id').replace('sectionRow_', '') : null;
                        if (id) ids.push(parseInt(id));
                    });

                    if (!ids.length) return;

                    $.post(_reorderSectionsUrl, { ids: ids, _token: '{{ csrf_token() }}' })
                        .done(function ()  { showToast('success', 'Section order saved.'); })
                        .fail(function ()  { showToast('error', 'Failed to save section order.'); });
                },
            });
        }
    }

    function renumberSectionRows(catId) {
        $('#sectionBody_' + catId + ' tr').each(function(i) {
            $(this).find('td:nth-child(3)').text(i + 1);
        });
    }

    $(document).on('click', '.load-all-sections', function () {
        var catId = $(this).data('cat-id');
        loadCatSections(catId, 0);
    });

    $(document).on('change', '.select-all-cb', function () {
        var catId = $(this).data('cat');
        $('#sectionBody_' + catId + ' .section-cb').prop('checked', $(this).is(':checked'));
    });

    $(document).on('click', '.status-toggle-section', function () {
        var $el = $(this), id = $el.data('id');
        $.post('{{ url("admin/sections") }}/' + id + '/toggle-status')
            .done(function (res) {
                var s = res.status;
                $el.data('status', s)
                   .removeClass('status-green-pill status-yellow-pill')
                   .addClass(s === 'active' ? 'status-green-pill' : 'status-yellow-pill')
                   .text(s === 'active' ? 'Active' : 'Inactive');
                showToast('success', 'Section status updated.');
            }).fail(function () { showToast('error', 'Failed to update status.'); });
    });

    $(document).on('click', '.delete-section-btn', function () {
        $('#deleteSectionId').val($(this).data('id'));
        $('#deleteSectionCatId').val($(this).data('cat'));
        $('#deleteSectionName').text($(this).data('name'));
        $('#DeleteSectionModal').modal('show');
    });

    $('#confirmDeleteSectionBtn').on('click', function () {
        var id = $('#deleteSectionId').val();
        $.ajax({ url: '{{ url("admin/sections") }}/' + id, type: 'DELETE' })
            .done(function (res) {
                showToast('success', res.message);
                $('#DeleteSectionModal').modal('hide');
                loadCategoryAccordion($('#sectionSearchInput').val());
            }).fail(function () { showToast('error', 'Delete failed.'); });
    });

    // ── Pagination ────────────────────────────────────────────────────────────
    function renderPagination(total) {
        var totalPages = Math.ceil(total / catPerPage);
        var info = '';
        if (total > 0) {
            var from = (catCurrentPage - 1) * catPerPage + 1;
            var to   = Math.min(catCurrentPage * catPerPage, total);
            info     = from + '-' + to + ' of ' + String(total).padStart(2, '0') + ' results';
        }
        $('#catPaginationInfo').text(info);

        var btns = '';
        btns += '<button class="cat-page-btn" id="catPrevBtn" ' + (catCurrentPage <= 1 ? 'disabled' : '') + '><img src="' + _iconArrowLeft + '" width="12"></button>';
        for (var p = 1; p <= totalPages; p++) {
            btns += '<button class="cat-page-btn ' + (p === catCurrentPage ? 'active' : '') + '" data-page="' + p + '">' + p + '</button>';
        }
        btns += '<button class="cat-page-btn" id="catNextBtn" ' + (catCurrentPage >= totalPages ? 'disabled' : '') + '><img src="' + _iconArrowLeft + '" width="12" style="transform:rotate(180deg)"></button>';
        $('#catPaginationBtns').html(btns);

        if (total > 0) $('#catPaginationWrap').css('display', 'flex');
        else $('#catPaginationWrap').hide();
    }

    $(document).on('click', '#catPrevBtn:not(:disabled)', function () {
        catCurrentPage--; openCategories = {}; sectionsLoaded = {}; renderAccordion();
    });
    $(document).on('click', '#catNextBtn:not(:disabled)', function () {
        catCurrentPage++; openCategories = {}; sectionsLoaded = {}; renderAccordion();
    });
    $(document).on('click', '.cat-page-btn[data-page]', function () {
        catCurrentPage = parseInt($(this).data('page')); openCategories = {}; sectionsLoaded = {}; renderAccordion();
    });

    $('#catPerPageSelect').on('change', function () {
        catPerPage = parseInt($(this).val()); catCurrentPage = 1;
        openCategories = {}; sectionsLoaded = {}; renderAccordion();
    });

    $('#sectionSearchInput').on('input', function () {
        clearTimeout(searchTimer);
        var q = $(this).val().trim();
        searchTimer = setTimeout(function () { loadCategoryAccordion(q); }, 350);
    });

    // ── Load accordion when Sections tab is first opened ─────────────────────
    $('[data-bs-toggle="tab"][href="#Sections"]').one('shown.bs.tab', function () {
        loadCategoryAccordion();
    });

    if (window.location.hash === '#Sections') {
        $('[href="#Sections"]').tab('show');
        loadCategoryAccordion();
    }
});
</script>
@endsection