@extends('layouts.app')

@section('title', 'Manage Report Categories - Admin Panel')
@section('page_title', 'Report Categories')

@section('styles')
<style>
    .drag-handle {
        cursor: move;
        color: #888;
        font-size: 1.1rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .sortable-ghost {
        opacity: 0.4;
        background-color: #f1f1f1 !important;
        border: 1px dashed #ccc !important;
    }
    .custom-control-label {
        cursor: pointer;
    }
</style>
@endsection

@section('content')
<div class="row">
    <div class="col-sm-12">
        <!-- Alert container for AJAX operations -->
        <div id="alert-container"></div>

        <!-- Validation Errors -->
        @if ($errors->any())
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        @endif
    </div>

    <div class="col-md-12 col-xl-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5>Manage Report Categories</h5>
                <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#createCategoryModal">
                    <i class="feather icon-plus"></i> Add New Category
                </button>
            </div>
            <div class="card-body table-border-style">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th style="width: 50px;"></th>
                                <th style="width: 80px;">Sr. No.</th>
                                <th style="width: 80px;">Icon</th>
                                <th>Title</th>
                                <th>Slug</th>
                                <th style="width: 100px;">Credits</th>
                                <th style="width: 130px;">Active</th>
                                <th style="width: 180px;">Action</th>
                            </tr>
                        </thead>
                        <tbody id="settings-table-body">
                            @forelse($categories as $category)
                            <tr data-id="{{ $category->id }}">
                                <td class="text-center">
                                    <span class="drag-handle handle">
                                        <i class="feather icon-move"></i>
                                    </span>
                                </td>
                                <td class="sr-no">{{ $loop->iteration }}</td>
                                <td class="text-center">
                                    @if($category->icon_name)
                                        <iconify-icon icon="{{ $category->icon_name }}" style="color: {{ $category->icon_color ?? '#FF6B00' }}; font-size: 28px;"></iconify-icon>
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                                <td><strong>{{ $category->title }}</strong></td>
                                <td><code>{{ $category->slug }}</code></td>
                                <td><span class="badge badge-primary" style="font-size: 13px;">{{ $category->credits_required }}</span></td>

                                <td>
                                    <div class="custom-control custom-switch">
                                        <input type="checkbox" 
                                               class="custom-control-input active-switch" 
                                               id="active_switch_{{ $category->id }}" 
                                               data-id="{{ $category->id }}"
                                               {{ $category->active ? 'checked' : '' }}>
                                        <label class="custom-control-label" for="active_switch_{{ $category->id }}">
                                            @if($category->active)
                                                <span class="badge badge-success active-label">Active</span>
                                            @else
                                                <span class="badge badge-secondary active-label">Inactive</span>
                                            @endif
                                        </label>
                                    </div>
                                </td>
                                <td>
                                    <button class="btn btn-info btn-sm btn-edit-category" 
                                            data-id="{{ $category->id }}"
                                            data-title="{{ $category->title }}"
                                            data-description="{{ $category->description }}"
                                            data-slug="{{ $category->slug }}"
                                            data-active="{{ $category->active ? 1 : 0 }}"
                                            data-icon-name="{{ $category->icon_name }}"
                                            data-icon-color="{{ $category->icon_color ?? '#FF6B00' }}"
                                            data-order="{{ $category->order_no }}"
                                            data-credits-required="{{ $category->credits_required }}">
                                        <i class="feather icon-edit"></i> Edit
                                    </button>
                                    <button class="btn btn-danger btn-sm btn-delete-category" 
                                            data-id="{{ $category->id }}">
                                        <i class="feather icon-trash-2"></i> Delete
                                    </button>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="8" class="text-center">No categories found. Click "Add New Category" to create one.</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="mt-3">
                    <small class="text-muted">
                        <i class="feather icon-info text-info"></i> Drag rows using the <strong><i class="feather icon-move"></i> drag handle</strong> to reorder. Changes are saved automatically.
                    </small>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- CREATE MODAL -->
<div class="modal fade" id="createCategoryModal" tabindex="-1" role="dialog" aria-labelledby="createCategoryModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <form action="{{ route('report-categories.store') }}" method="POST" id="createCategoryForm">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title" id="createCategoryModalLabel">Create Report Category</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6 border-right">
                            <div class="form-group mb-3">
                                <label for="create_title" class="font-weight-bold">Title <span class="text-danger">*</span></label>
                                <input type="text" name="title" id="create_title" class="form-control" placeholder="e.g. Personality Report" required>
                            </div>
                            <div class="form-group mb-3">
                                <label for="create_slug" class="font-weight-bold">Slug <span class="text-danger">*</span></label>
                                <input type="text" name="slug" id="create_slug" class="form-control" placeholder="e.g. personality-report" required>
                                <small class="form-text text-muted">Unique identifier. Generated automatically from title.</small>
                            </div>
                            <div class="form-group mb-3">
                                <label for="create_description" class="font-weight-bold">Description</label>
                                <textarea name="description" id="create_description" class="form-control" rows="4" placeholder="Enter category description..."></textarea>
                            </div>
                            <div class="form-group mb-3">
                                <div class="custom-control custom-switch mt-2">
                                    <input type="checkbox" name="active" class="custom-control-input" id="create_active" value="1" checked>
                                    <label class="custom-control-label font-weight-bold" for="create_active">Active Status</label>
                                </div>
                                <small class="form-text text-muted">Toggle visibility of the category in applications.</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label class="font-weight-bold">Icon <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <input type="text" name="icon_name" id="create_icon_name" class="form-control" placeholder="Select an icon (e.g. lucide:tractor)" required readonly>
                                    <div class="input-group-append">
                                        <button type="button" class="btn btn-outline-secondary btn-icon-picker" data-target="create">Choose Icon</button>
                                    </div>
                                </div>
                                <small class="form-text text-muted">Choose icon from search panel.</small>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group mb-3">
                                        <label for="create_icon_color" class="font-weight-bold">Icon Color <span class="text-danger">*</span></label>
                                        <input type="color" name="icon_color" id="create_icon_color" class="form-control form-control-color" value="#FF6B00" style="width: 100%; height: 40px; padding: 4px;">
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group mb-3">
                                        <label class="font-weight-bold">Live Preview</label>
                                        <div class="border rounded text-center bg-light d-flex align-items-center justify-content-center" style="height: 40px;">
                                            <div id="create_icon_preview_wrapper">
                                                <span class="text-muted" style="font-size: 12px;">No icon</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group mb-3">
                                <label for="create_credits_required" class="font-weight-bold">Required Credits <span class="text-danger">*</span></label>
                                <input type="number" name="credits_required" id="create_credits_required" class="form-control" min="0" value="0" required placeholder="Credits required">
                                <small class="form-text text-muted">Number of credits deducted from users on generation.</small>
                            </div>
                            <div class="form-group mb-3">
                                <label for="create_order_no" class="font-weight-bold">Order No</label>
                                <input type="number" name="order_no" id="create_order_no" class="form-control" placeholder="Leave empty for sequential order">
                                <small class="form-text text-muted">Order position. Defaults to the end of the list.</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Create Category</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- EDIT MODAL -->
<div class="modal fade" id="editCategoryModal" tabindex="-1" role="dialog" aria-labelledby="editCategoryModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <form id="editCategoryForm" method="POST">
                @csrf
                @method('PUT')
                <div class="modal-header">
                    <h5 class="modal-title" id="editCategoryModalLabel">Edit Report Category</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6 border-right">
                            <div class="form-group mb-3">
                                <label for="edit_title" class="font-weight-bold">Title <span class="text-danger">*</span></label>
                                <input type="text" name="title" id="edit_title" class="form-control" required>
                            </div>
                            <div class="form-group mb-3">
                                <label for="edit_slug" class="font-weight-bold">Slug <span class="text-danger">*</span></label>
                                <input type="text" name="slug" id="edit_slug" class="form-control" required>
                                <small class="form-text text-muted">Unique identifier. Changing this may affect API integrations.</small>
                            </div>
                            <div class="form-group mb-3">
                                <label for="edit_description" class="font-weight-bold">Description</label>
                                <textarea name="description" id="edit_description" class="form-control" rows="4" placeholder="Enter category description..."></textarea>
                            </div>
                            <div class="form-group mb-3">
                                <div class="custom-control custom-switch mt-2">
                                    <input type="checkbox" name="active" class="custom-control-input" id="edit_active" value="1">
                                    <label class="custom-control-label font-weight-bold" for="edit_active">Active Status</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label class="font-weight-bold">Icon <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <input type="text" name="icon_name" id="edit_icon_name" class="form-control" placeholder="Select an icon (e.g. lucide:tractor)" required readonly>
                                    <div class="input-group-append">
                                        <button type="button" class="btn btn-outline-secondary btn-icon-picker" data-target="edit">Choose Icon</button>
                                    </div>
                                </div>
                                <small class="form-text text-muted">Choose icon from search panel.</small>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group mb-3">
                                        <label for="edit_icon_color" class="font-weight-bold">Icon Color <span class="text-danger">*</span></label>
                                        <input type="color" name="icon_color" id="edit_icon_color" class="form-control form-control-color" value="#FF6B00" style="width: 100%; height: 40px; padding: 4px;">
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group mb-3">
                                        <label class="font-weight-bold">Live Preview</label>
                                        <div class="border rounded text-center bg-light d-flex align-items-center justify-content-center" style="height: 40px;">
                                            <div id="edit_icon_preview_wrapper">
                                                <span class="text-muted" style="font-size: 12px;">No icon</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group mb-3">
                                <label for="edit_credits_required" class="font-weight-bold">Required Credits <span class="text-danger">*</span></label>
                                <input type="number" name="credits_required" id="edit_credits_required" class="form-control" min="0" required placeholder="Credits required">
                                <small class="form-text text-muted">Number of credits deducted from users on generation.</small>
                            </div>
                            <div class="form-group mb-3">
                                <label for="edit_order_no" class="font-weight-bold">Order No <span class="text-danger">*</span></label>
                                <input type="number" name="order_no" id="edit_order_no" class="form-control" required>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Changes</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- DELETE CONFIRMATION MODAL -->
<div class="modal fade" id="deleteCategoryModal" tabindex="-1" role="dialog" aria-labelledby="deleteCategoryModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <form id="deleteCategoryForm" method="POST">
                @csrf
                @method('DELETE')
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteCategoryModalLabel">Delete Category</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p class="mb-0">Are you sure you want to delete this report category? This action is permanent and cannot be undone.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-danger">Yes, Delete</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- ICON PICKER MODAL -->
<div class="modal fade" id="iconPickerModal" tabindex="-1" role="dialog" aria-labelledby="iconPickerModalLabel" aria-hidden="true" style="z-index: 1060;">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="iconPickerModalLabel">Search Iconify Icons</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="input-group mb-3">
                    <input type="text" id="icon_search_input" class="form-control" placeholder="Type to search icons (e.g. tractor, home, heart, user)...">
                    <div class="input-group-append">
                        <button class="btn btn-primary" type="button" id="btn_search_icons">Search</button>
                    </div>
                </div>
                <div class="row">
                    <!-- Icon Sets Filter -->
                    <div class="col-md-3 border-right">
                        <h6 class="font-weight-bold">Icon Sets</h6>
                        <div class="list-group list-group-flush" id="icon_sets_filter" style="max-height: 300px; overflow-y: auto;">
                            <a href="#" class="list-group-item list-group-item-action active" data-prefix="lucide">
                                <i class="feather icon-check text-success mr-1"></i> Lucide (Mobile Native)
                            </a>
                        </div>
                    </div>
                    <!-- Search Results Grid -->
                    <div class="col-md-9">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span class="text-muted" id="search_results_count">Search for icons above...</span>
                            <div class="spinner-border spinner-border-sm text-primary" id="search_loader" style="display: none;" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                        </div>
                        <div id="icon_grid" class="d-flex flex-wrap justify-content-start align-content-start border rounded p-2 bg-white" style="height: 300px; overflow-y: auto; gap: 8px;">
                            <div class="text-muted p-3 w-100 text-center">Type a keyword and click Search to find icons.</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<!-- Load Iconify Web Component -->
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<!-- Load SortableJS for Drag-and-Drop functionality -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<script>
    $(document).ready(function () {
        
        // Fix for multiple Bootstrap modals z-index stacking and body scrolling issues
        $(document).on('show.bs.modal', '.modal', function () {
            const zIndex = 1040 + (10 * $('.modal:visible').length);
            $(this).css('z-index', zIndex);
            setTimeout(function() {
                $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
            }, 0);
        });

        $(document).on('hidden.bs.modal', '.modal', function () {
            if ($('.modal:visible').length > 0) {
                setTimeout(function() {
                    $('body').addClass('modal-open');
                }, 0);
            }
        });

        // Helper to show dynamic alert banners
        function showToast(type, message) {
            let container = $('#alert-container');
            let alertHtml = `
                <div class="alert alert-${type} alert-dismissible fade show" role="alert">
                    ${message}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            `;
            container.html(alertHtml);
            
            // Auto close after 3.5 seconds
            setTimeout(function() {
                container.find('.alert').alert('close');
            }, 3500);
        }

        // Helper function to slugify text
        function slugify(text) {
            return text.toString().toLowerCase()
                .trim()
                .replace(/\s+/g, '-')           // Replace spaces with -
                .replace(/[^\w\-]+/g, '')       // Remove all non-word chars
                .replace(/\-\-+/g, '-')         // Replace multiple - with single -
                .replace(/^-+/, '')             // Trim - from start of text
                .replace(/-+$/, '');            // Trim - from end of text
        }

        // Auto slug generation on Create
        $('#create_title').on('input', function () {
            $('#create_slug').val(slugify($(this).val()));
        });

        // Icon Preview Helper
        function updatePreview(target) {
            const iconName = $(`#${target}_icon_name`).val();
            const color = $(`#${target}_icon_color`).val() || '#FF6B00';
            const wrapper = $(`#${target}_icon_preview_wrapper`);
            
            if (iconName) {
                wrapper.html(`<iconify-icon icon="${iconName}" style="color: ${color}; font-size: 48px;"></iconify-icon>`);
            } else {
                wrapper.html(`<span class="text-muted" style="font-size: 14px;">No icon selected</span>`);
            }
        }

        // Live preview updating on color picker input
        $('#create_icon_color').on('input change', function() {
            updatePreview('create');
        });
        $('#edit_icon_color').on('input change', function() {
            updatePreview('edit');
        });

        // Icon Picker Modal management
        let currentPickerTarget = 'create';
        let selectedPrefix = 'lucide';

        $(document).on('click', '.btn-icon-picker', function() {
            currentPickerTarget = $(this).data('target');
            $('#iconPickerModal').modal('show');
        });

        // Handle collection/prefix filtering
        $('#icon_sets_filter a').on('click', function(e) {
            e.preventDefault();
            $('#icon_sets_filter a').removeClass('active');
            $(this).addClass('active');
            selectedPrefix = $(this).data('prefix');
            performSearch();
        });

        // Trigger search
        $('#btn_search_icons').on('click', function() {
            performSearch();
        });
        $('#icon_search_input').on('keypress', function(e) {
            if (e.which === 13) {
                performSearch();
            }
        });

        // Call Iconify search API
        function performSearch() {
            const query = $('#icon_search_input').val().trim();
            if (!query) {
                $('#icon_grid').html('<div class="text-muted p-3 w-100 text-center">Please type a keyword to search...</div>');
                $('#search_results_count').text('0 results');
                return;
            }
            
            $('#search_loader').show();
            
            let apiUrl = `https://api.iconify.design/search?query=${encodeURIComponent(query)}&limit=100`;
            if (selectedPrefix) {
                apiUrl += `&prefix=${selectedPrefix}`;
            }
            
            $.ajax({
                url: apiUrl,
                method: 'GET',
                success: function(res) {
                    $('#search_loader').hide();
                    let html = '';
                    const icons = res.icons || [];
                    $('#search_results_count').text(`${icons.length} icons found`);
                    
                    if (icons.length === 0) {
                        $('#icon_grid').html('<div class="text-muted p-3 w-100 text-center">No icons found. Try another search term.</div>');
                        return;
                    }
                    
                    icons.forEach(function(icon) {
                        html += `
                            <button type="button" class="btn btn-light border p-2 select-icon-btn d-flex flex-column align-items-center justify-content-center" 
                                    data-icon="${icon}" 
                                    title="${icon}" 
                                    style="width: 75px; height: 75px; gap: 4px; overflow: hidden;">
                                <iconify-icon icon="${icon}" style="font-size: 24px; color: #333;"></iconify-icon>
                                <span class="text-truncate w-100 text-center" style="font-size: 9px;">${icon.split(':')[1] || icon}</span>
                            </button>
                        `;
                    });
                    $('#icon_grid').html(html);
                },
                error: function() {
                    $('#search_loader').hide();
                    $('#icon_grid').html('<div class="text-danger p-3 w-100 text-center">Error fetching icons from Iconify CDN.</div>');
                }
            });
        }

        // Selection event
        $(document).on('click', '.select-icon-btn', function() {
            const selectedIcon = $(this).data('icon');
            $(`#${currentPickerTarget}_icon_name`).val(selectedIcon);
            updatePreview(currentPickerTarget);
            $('#iconPickerModal').modal('hide');
        });

        // Populate Edit Modal
        $('.btn-edit-category').on('click', function () {
            const id = $(this).data('id');
            const title = $(this).data('title');
            const description = $(this).data('description');
            const slug = $(this).data('slug');
            const active = $(this).data('active');
            const iconName = $(this).data('icon-name');
            const iconColor = $(this).data('icon-color') || '#FF6B00';
            const order = $(this).data('order');
            const creditsRequired = $(this).data('credits-required') || 0;

            let actionUrl = "{{ route('report-categories.update', ':id') }}";
            actionUrl = actionUrl.replace(':id', id);
            $('#editCategoryForm').attr('action', actionUrl);

            $('#edit_title').val(title);
            $('#edit_description').val(description);
            $('#edit_slug').val(slug);
            $('#edit_active').prop('checked', active == 1);
            $('#edit_order_no').val(order);
            $('#edit_credits_required').val(creditsRequired);

            // Icon values & preview populating
            $('#edit_icon_name').val(iconName);
            $('#edit_icon_color').val(iconColor);
            updatePreview('edit');

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

        // Trigger Delete Modal
        $('.btn-delete-category').on('click', function () {
            const id = $(this).data('id');
            let actionUrl = "{{ route('report-categories.destroy', ':id') }}";
            actionUrl = actionUrl.replace(':id', id);
            
            $('#deleteCategoryForm').attr('action', actionUrl);
            $('#deleteCategoryModal').modal('show');
        });



        // AJAX Switch Toggle for Active status
        $('.active-switch').on('change', function () {
            const id = $(this).data('id');
            const checkbox = $(this);
            const originalChecked = checkbox.prop('checked');
            
            let url = "{{ route('report-categories.toggle-active', ':id') }}";
            url = url.replace(':id', id);

            $.ajax({
                url: url,
                method: 'POST',
                data: {
                    _token: "{{ csrf_token() }}"
                },
                success: function (response) {
                    if (response.success) {
                        const label = checkbox.closest('.custom-switch').find('.active-label');
                        if (response.active) {
                            label.text('Active').removeClass('badge-secondary').addClass('badge-success');
                        } else {
                            label.text('Inactive').removeClass('badge-success').addClass('badge-secondary');
                        }
                        showToast('success', response.message);
                    } else {
                        checkbox.prop('checked', originalChecked);
                        showToast('danger', 'Failed to toggle active status.');
                    }
                },
                error: function (xhr) {
                    checkbox.prop('checked', originalChecked);
                    showToast('danger', 'An error occurred while updating active status.');
                }
            });
        });

        // Initialize SortableJS on Table Body
        const tableBody = document.getElementById('settings-table-body');
        if (tableBody) {
            Sortable.create(tableBody, {
                handle: '.handle', // Drag handle selector
                animation: 150,
                ghostClass: 'sortable-ghost',
                onEnd: function () {
                    let ids = [];
                    $('#settings-table-body tr').each(function () {
                        const id = $(this).data('id');
                        if (id) {
                            ids.push(id);
                        }
                    });

                    // Send AJAX order update request
                    $.ajax({
                        url: "{{ route('report-categories.reorder') }}",
                        method: 'POST',
                        data: {
                            _token: "{{ csrf_token() }}",
                            ids: ids
                        },
                        success: function (response) {
                            if (response.success) {
                                // Re-index Sr. No. cells sequentially
                                $('#settings-table-body tr').each(function (index) {
                                    $(this).find('.sr-no').text(index + 1);
                                });
                                showToast('success', response.message);
                            } else {
                                showToast('danger', 'Failed to update sorting order.');
                            }
                        },
                        error: function (xhr) {
                            showToast('danger', 'An error occurred while reordering the list.');
                        }
                    });
                }
            });
        }
    });
</script>
@endsection