@extends('template.layouts.template-base')
@section('title', 'User management')

@section('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" />
    <style>
        .page-content {
            background-color: #F0F4F8 !important;
            padding: 80px 10px;
        }
    </style>
@endsection

@section('content')
    <div class="page-header product-main service-list">
        <div class="container-fluid p-0">
            <div class="row align-items-center">
                <div class="col">
                    <div class="page-title">
                        <a href="{{ route('backend.users.index') }}">User Management / <span
                                class="breadcrumb-link">Users</span></a>
                    </div>
                </div>
                <div class="col-auto cate-top-btns">
                    <div class="action-buttons d-none" id="bulkActions">
                        <button type="button" class="btn-delete-category" id="bulkDeleteBtn" disabled>
                            Delete <i class='bx bxs-trash fs-5'></i>
                        </button>
                    </div>
                    <button type="button" class="btn-export-category" id="exportBtn" data-export-loader="true">
                        Export
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round">
                            <path d="M12 16V3"></path>
                            <polyline points="7 8 12 3 17 8"></polyline>
                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                        </svg>
                    </button>

                    <a class="btn-add-category add-user" href="javascript:void(0);">
                        Add User
                    </a>
                </div>
            </div>
        </div>
    </div>
    </div>

    <div class="container-fluid product-table-sec user-management-page">
        <div class="content-wrapper">
            <div class="filter-section">
                <div class="search-box-category">
                    <input type="text" placeholder="Search" id="searchInput">
                    <i class="bx bx-search"></i>
                </div>
                <div class="position-relative">
                    <div class="col-md-3 custom-dropdown">
                        <select id="statusFilter" class="dropdown-btn">
                            <option value=""> Status</option>
                            <option value="1">Active</option>
                            <option value="0">Inactive</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="card-body">
                <div class="table-responsive table-card">
                    <table class="table align-middle mb-0 orders-table-container" id="userTable">
                        <thead class="custom-table-header">
                            <tr>
                                <th>
                                    <input type="checkbox" id="selectAll">

                                </th>
                                <th scope="col">
                                    <div class="d-flex gap-3">
                                        <span> User ID - Name</span>
                                    </div>
                                </th>
                                <th scope="col">Contact</th>
                                <th scope="col">Email</th>
                                <th scope="col">Role</th>
                                <th scope="col">Created By</th>
                                <th scope="col">Created On</th>
                                <th scope="col">Expiry Date</th>
                                <th scope="col">Pwd Status</th>
                                <th scope="col">Status</th>
                                <th scope="col">Action</th>
                            </tr>
                        </thead>
                        <tbody id="userTableBody">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>


    <!-- Common Delete Modal -->
    <div class="modal fade remove-user-screen forgot-popup-screen" id="deleteUserModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content rounded-4">
                <div class="modal-header">
                    <div class="modal-icon-box">
                        <i class="bx bxs-trash"></i>
                    </div>
                    <h5 id="deleteModalTitle">Delete User?</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body inquiry-preview-modal p-4">
                    <form id="deleteUserForm" method="POST">
                        @csrf
                        <div id="deleteMethodField">@method('DELETE')</div>
                        <div class="row form-row edit-category">
                            <div class="col-lg-12 col-md-12">
                                <p id="deleteModalMessage">Are you sure you want to delete this user? This action cannot be
                                    undone.</p>
                            </div>
                        </div>

                        <div class="hstack gap-2 w-100 mt-4 justify-content-end">
                            <button type="button" data-bs-dismiss="modal" class="btn cancel-btn">Cancel</button>
                            <button type="submit" class="btn delete-btn">Delete</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Common User Modal (Add/Edit) -->
    <div class="modal fade common-user-modal forgot-popup-screen" id="commonUserModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content rounded-4">
                <form id="commonUserForm" method="POST">
                    @csrf
                    <div id="method-field"></div>
                    <div class="modal-header">
                        <h5 id="modalTitle">Add User</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body inquiry-preview-modal p-4">
                        <div class="stock-wrapper user-modal-input">
                            <div class="row py-2">
                                <div class="col-lg-6">
                                    <label class="form-label">User ID <span class="text-danger">*</span></label>
                                    <input type="text" name="user_unique_no" id="modal_user_unique_no"
                                        class="form-control" readonly>
                                </div>
                                <div class="col-lg-6">
                                    <label class="form-label">Status <span class="text-danger">*</span></label>
                                    <div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="status"
                                                id="statusActive" value="1" checked>
                                            <label class="form-check-label" for="statusActive">Active</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="status"
                                                id="statusInactive" value="0">
                                            <label class="form-check-label" for="statusInactive">Inactive</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row py-2">
                                <div class="col-lg-6">
                                    <label class="form-label">User Name <span class="text-danger">*</span></label>
                                    <input type="text" name="name" id="modal_name" class="form-control" required
                                        placeholder="Enter User Name">
                                </div>
                                <div class="col-lg-6">
                                    <label class="form-label">Role <span class="text-danger">*</span></label>
                                    <select class="form-select" name="role_id" id="modal_role_id" required>
                                        <option value="">Select Role</option>
                                        @foreach ($roles as $role)
                                            <option value="{{ $role->id }}">{{ $role->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="row py-2">
                                <div class="col-lg-6 modal-user-item">
                                    <label class="form-label">Contact Number <span class="text-danger">*</span></label>
                                    <div class="input-with-prefix">
                                        <span class="input-prefix">+91</span>
                                        <input type="text" name="mobile" id="modal_mobile" class="form-control"
                                            inputmode="numeric" maxlength="10" required placeholder="Enter Here" />
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <label class="form-label">Email Address <span class="text-danger">*</span></label>
                                    <input type="email" name="email" id="modal_email" class="form-control" required
                                        placeholder="Enter Here">
                                </div>
                            </div>
                            <div class="row py-2">
                                <div class="col-lg-6">
                                    <label class="form-label">Expiry Date</label>
                                    <input type="date" name="expiry_date" id="modal_expiry_date"
                                        class="form-control">
                                </div>
                            </div>
                            <div class="hstack gap-2 w-100 mt-4 justify-content-end">
                                <button type="button" data-bs-dismiss="modal" class="btn cancel-btn">Cancel</button>
                                <button type="submit" class="btn delete-btn" id="saveBtn">Save</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- View User Modal -->
    <div class="modal fade view-user-screen forgot-popup-screen" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content rounded-4">
                <div class="modal-header">
                    <h5>View User</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body inquiry-preview-modal p-4">
                    <div class="stock-wrapper user-modal-input">
                        <div class="row py-2">
                            <div class="col-lg-6">
                                <label class="form-label">User ID</label>
                                <p id="view_user_unique_no" class="fw-bold"></p>
                            </div>
                            <div class="col-lg-6">
                                <label class="form-label">Status</label>
                                <p id="view_status_badge"></p>
                            </div>
                        </div>
                        <div class="row py-2">
                            <div class="col-lg-6">
                                <label class="form-label">User Name</label>
                                <p id="view_name"></p>
                            </div>
                            <div class="col-lg-6">
                                <label class="form-label">Role</label>
                                <p id="view_role_name"></p>
                            </div>
                        </div>
                        <div class="row py-2">
                            <div class="col-lg-6">
                                <label class="form-label">Contact Number</label>
                                <p id="view_mobile"></p>
                            </div>
                            <div class="col-lg-6">
                                <label class="form-label">Email Address</label>
                                <p id="view_email"></p>
                            </div>
                        </div>
                        <div class="row py-2">
                            <div class="col-lg-6">
                                <label class="form-label">Expiry Date</label>
                                <p id="view_expiry_date"></p>
                            </div>
                        </div>

                        <div class="mt-4 border-top pt-3">
                            <h6 class="fw-bold mb-3">Last Login Details</h6>
                            <div class="row">
                                <div class="col-lg-3 col-md-6">
                                    <label class="form-label small text-muted">Device</label>
                                    <p id="view_device" class="mb-2">-</p>
                                </div>
                                <div class="col-lg-3 col-md-6">
                                    <label class="form-label small text-muted">Platform</label>
                                    <p id="view_platform" class="mb-2">-</p>
                                </div>
                                <div class="col-lg-3 col-md-6">
                                    <label class="form-label small text-muted">Browser</label>
                                    <p id="view_browser" class="mb-2">-</p>
                                </div>
                                <div class="col-lg-3 col-md-6">
                                    <label class="form-label small text-muted">Security Status</label>
                                    <p id="view_suspicious_status" class="mb-2">-</p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-4 col-md-6">
                                    <label class="form-label small text-muted">IP Address</label>
                                    <p id="view_ip_address" class="mb-2">-</p>
                                </div>
                                <div class="col-lg-4 col-md-6">
                                    <label class="form-label small text-muted">Latitude</label>
                                    <p id="view_latitude" class="mb-2">-</p>
                                </div>
                                <div class="col-lg-4 col-md-6">
                                    <label class="form-label small text-muted">Longitude</label>
                                    <p id="view_longitude" class="mb-2">-</p>
                                </div>
                            </div>
                        </div>
                        <div class="hstack gap-2 w-100 mt-4 justify-content-end">
                            <button type="button" data-bs-dismiss="modal" class="btn cancel-btn">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('scripts')
    <script>
        $(document).ready(function() {
            function formatCoordinate(value) {
                if (value === null || value === undefined || value === '') {
                    return '-';
                }

                var number = Number(value);

                return Number.isFinite(number) ? number.toFixed(6) : '-';
            }

            function showMasterToast(toast) {
                if (!toast || !toast.message) {
                    return;
                }

                var toastType = String(toast.type || 'success').toLowerCase();
                var isErrorToast = ['error', 'danger'].indexOf(toastType) !== -1;
                var variantClass = isErrorToast ? 'toast-variant-error' : 'toast-variant-success';
                var symbol = isErrorToast ? '!' : '✓';
                var toastId = 'ajaxMasterToast';

                $('#' + toastId).remove();

                var toastHtml = `
                    <div class="position-fixed top-0 start-50 translate-middle-x p-4" style="z-index: 1090">
                        <div id="${toastId}" class="toast login-success-toast ${variantClass}" role="alert" aria-live="assertive" aria-atomic="true">
                            <div class="toast-body d-flex align-items-center gap-3">
                                <div class="toast-left">
                                    <div class="check-circle">${symbol}</div>
                                </div>
                                <div class="toast-right">
                                    <h6>${toast.title || 'Success'}</h6>
                                    <p>${toast.message}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                `;

                $('body').append(toastHtml);

                var toastEl = document.getElementById(toastId);
                if (toastEl) {
                    var instance = new bootstrap.Toast(toastEl, {
                        delay: 4000,
                        autohide: true
                    });

                    toastEl.addEventListener('hidden.bs.toast', function() {
                        $(toastEl).parent().remove();
                    }, {
                        once: true
                    });

                    instance.show();
                }
            }

            function setUserFormLoadingState(isLoading) {
                var saveBtn = $('#saveBtn');
                var defaultText = saveBtn.data('default-text') || 'Save';

                if (isLoading) {
                    saveBtn.prop('disabled', true).text(defaultText);
                    if (window.CommonLoader && typeof window.CommonLoader.show === 'function') {
                        window.CommonLoader.show();
                    }
                    return;
                }

                saveBtn.prop('disabled', false).text(defaultText);
                if (window.CommonLoader && typeof window.CommonLoader.hide === 'function') {
                    window.CommonLoader.hide();
                }
            }

            function clearUserFormErrors() {
                var form = $('#commonUserForm');
                form.find('.is-invalid').removeClass('is-invalid');
                form.find('.ajax-invalid-feedback').remove();
            }

            function showFieldError(fieldName, message) {
                var form = $('#commonUserForm');
                var fields = form.find('[name="' + fieldName + '"]');

                if (!fields.length) {
                    return;
                }

                fields.addClass('is-invalid');

                var target = fields.last();
                var feedback = $('<div class="invalid-feedback d-block ajax-invalid-feedback"></div>').text(
                message);

                if (target.attr('type') === 'radio') {
                    target.closest('.col-lg-6, .col-lg-12, .col-md-6, .col-md-12').append(feedback);
                    return;
                }

                if (target.closest('.input-with-prefix').length) {
                    target.closest('.input-with-prefix').after(feedback);
                    return;
                }

                target.after(feedback);
            }

            function applyUserFormErrors(errors) {
                clearUserFormErrors();

                $.each(errors || {}, function(field, messages) {
                    if (!messages || !messages.length) {
                        return;
                    }

                    showFieldError(field, messages[0]);
                });
            }

            var table = $('#userTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('backend.users.index') }}",
                    data: function(d) {
                        d.status = $('#statusFilter').val();
                    }
                },
                columns: [{
                        data: 'checkbox',
                        name: 'checkbox',
                        orderable: false,
                        searchable: false
                    }, {
                        data: 'user_info',
                        name: 'user_info'
                    },
                    {
                        data: 'contact',
                        name: 'contact'
                    },
                    {
                        data: 'email',
                        name: 'email'
                    },
                    {
                        data: 'role_name',
                        name: 'role_name'
                    },
                    {
                        data: 'created_by',
                        name: 'created_by'
                    },
                    {
                        data: 'created_on',
                        name: 'created_on'
                    },
                    {
                        data: 'expiry_date',
                        name: 'expiry_date'
                    },
                    {
                        data: 'password_status',
                        name: 'password_status'
                    },
                    {
                        data: 'status_badge',
                        name: 'status_badge'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }
                ],
                dom: 'lrtip',
                language: {
                    paginate: {
                        next: '<i class="ri-arrow-right-s-line"></i>',
                        previous: '<i class="ri-arrow-left-s-line"></i>'
                    }
                },
                drawCallback: function() {
                    $('#selectAll').prop('checked', false);
                    updateBulkDeleteState();
                }
            });

            // Search and Filter
            $('#searchInput').on('keyup', function() {
                table.search(this.value).draw();
            });
            $('#statusFilter').on('change', function() {
                table.draw();
            });

            function getSelectedIds() {
                return $('#userTable .row-checkbox:checked').map(function() {
                    return parseInt($(this).val(), 10);
                }).get().filter(function(id) {
                    return Number.isInteger(id) && id > 0;
                });
            }

            function updateBulkDeleteState() {
                var selectedCount = getSelectedIds().length;

                $('#bulkActions').toggleClass('d-none', selectedCount === 0);
                $('#bulkDeleteBtn').prop('disabled', selectedCount === 0);
            }

            function triggerExportDownload(url) {
                var frameId = 'userExportDownloadFrame';
                var existingFrame = document.getElementById(frameId);

                if (existingFrame) {
                    existingFrame.remove();
                }

                var iframe = document.createElement('iframe');
                iframe.id = frameId;
                iframe.style.display = 'none';
                iframe.src = url;

                var resetLoader = function() {
                    if (window.CommonLoader && typeof window.CommonLoader.reset === 'function') {
                        window.CommonLoader.reset();
                    }
                };

                iframe.addEventListener('load', function() {
                    resetLoader();
                    window.setTimeout(function() {
                        iframe.remove();
                    }, 1000);
                }, {
                    once: true
                });

                document.body.appendChild(iframe);

                window.setTimeout(resetLoader, 4000);
            }

            // Add User - Open Modal
            $(document).on('click', '.add-user', function() {
                $('#commonUserForm')[0].reset();
                clearUserFormErrors();
                $('#method-field').html('');
                $('#commonUserForm').attr('action', "{{ route('backend.users.store') }}");
                $('#modalTitle').text('Add User');
                $('#saveBtn').data('default-text', 'Save').text('Save');
                setUserFormLoadingState(false);

                // Fetch next user unique no via AJAX
                $.get("{{ route('backend.users.create') }}", function(data) {
                    $('#modal_user_unique_no').val(data.user_unique_no);
                    $('#commonUserModal').modal('show');
                });
            });

            // Edit User - Open Modal
            $(document).on('click', '.edit-user', function() {
                var id = $(this).data('id');
                var editUrl = "{{ route('backend.users.edit', ':id') }}".replace(':id', id);
                var updateUrl = "{{ route('backend.users.update', ':id') }}".replace(':id', id);
                $.get(editUrl, function(data) {
                    $('#commonUserForm')[0].reset();
                    clearUserFormErrors();
                    $('#method-field').html('@method('PUT')');
                    $('#commonUserForm').attr('action', updateUrl);
                    $('#modalTitle').text('Edit User');
                    $('#saveBtn').data('default-text', 'Update').text('Update');
                    setUserFormLoadingState(false);

                    $('#modal_user_unique_no').val(data.user_unique_no);
                    $('#modal_name').val(data.name);
                    $('#modal_email').val(data.email);
                    $('#modal_mobile').val(data.mobile);
                    $('#modal_role_id').val(data.role_id);
                    $('#modal_expiry_date').val(data.expiry_date);

                    if (data.status == 1) $('#statusActive').prop('checked', true);
                    else $('#statusInactive').prop('checked', true);

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

            // Common Form Submit (Add/Edit)
            $('#commonUserForm').on('submit', function(e) {
                e.preventDefault();
                var form = $(this);
                var url = form.attr('action');

                if ($('#saveBtn').prop('disabled')) {
                    return;
                }

                clearUserFormErrors();
                setUserFormLoadingState(true);

                $.ajax({
                    url: url,
                    method: 'POST',
                    data: new FormData(this),
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        if (response.status) {
                            $('#commonUserModal').modal('hide');
                            table.draw();
                            showMasterToast(response.toast || {
                                type: 'success',
                                title: 'Success',
                                message: response.message
                            });
                        } else {
                            showMasterToast(response.toast || {
                                type: 'error',
                                title: 'Error',
                                message: response.message ||
                                    'Operation failed. Please check inputs.'
                            });
                        }
                    },
                    error: function(err) {
                        if (err.status === 422 && err.responseJSON && err.responseJSON.errors) {
                            applyUserFormErrors(err.responseJSON.errors);
                        }

                        var responseToast = err.responseJSON && err.responseJSON.toast ? err
                            .responseJSON.toast : null;
                        var validationMessage = err.responseJSON && err.responseJSON.errors ?
                            Object.values(err.responseJSON.errors)[0][0] : null;
                        var message = validationMessage || (err.responseJSON && err.responseJSON
                                .message) ||
                            'Operation failed. Please check inputs.';

                        showMasterToast(responseToast || {
                            type: 'error',
                            title: 'Error',
                            message: message
                        });
                    },
                    complete: function() {
                        setUserFormLoadingState(false);
                    }
                });
            });

            $('#commonUserModal').on('hidden.bs.modal', function() {
                clearUserFormErrors();
                setUserFormLoadingState(false);
            });

            $('#modal_mobile').on('input', function() {
                this.value = this.value.replace(/\D/g, '').slice(0, 10);
            });

            // View User
            $(document).on('click', '.view-user', function() {
                var id = $(this).data('id');
                var editUrl = "{{ route('backend.users.edit', ':id') }}".replace(':id', id);
                $.get(editUrl, function(data) {
                    $('#view_user_unique_no').text(data.user_unique_no);
                    $('#view_name').text(data.name);
                    $('#view_email').text(data.email);
                    $('#view_mobile').text(data.mobile);
                    $('#view_role_name').text(data.role ? data.role.name : '-');
                    $('#view_expiry_date').text(data.expiry_date || '-');
                    $('#view_status_badge').html(data.status == 1 ?
                        '<span class="status-badge">Active</span>' :
                        '<span class="status-badge bg-danger">Inactive</span>');

                    // Populate Login Details
                    var lastLogin = data.login_logs && data.login_logs.length > 0 ? data.login_logs[
                        0] : null;
                    if (lastLogin) {
                        $('#view_device').text(lastLogin.device || '-');
                        $('#view_platform').text(lastLogin.platform || '-');
                        $('#view_browser').text(lastLogin.browser || '-');
                        $('#view_ip_address').text(lastLogin.ip_address || '-');
                        $('#view_latitude').text(formatCoordinate(lastLogin.latitude));
                        $('#view_longitude').text(formatCoordinate(lastLogin.longitude));
                        $('#view_suspicious_status').html(lastLogin.is_suspicious ?
                            '<span class="text-danger fw-bold">Suspicious</span>' :
                            '<span class="text-success">Secure</span>');
                    } else {
                        $('#view_device, #view_platform, #view_browser, #view_ip_address, #view_latitude, #view_longitude')
                            .text('-');
                        $('#view_suspicious_status').text('-');
                    }

                    $('.view-user-screen').modal('show');
                });
            });

            // Delete User (Single)
            $(document).on('click', '.delete-user', function() {
                var id = $(this).data('id');
                var deleteUrl = "{{ route('backend.users.destroy', ':id') }}".replace(':id', id);

                $('#deleteModalTitle').text('Delete User?');
                $('#deleteModalMessage').text(
                    'Are you sure you want to delete this user? This action cannot be undone.');
                $('#deleteMethodField').html('<input type="hidden" name="_method" value="DELETE">');
                $('#deleteUserForm').attr('action', deleteUrl);
                $('#deleteUserForm').find('input[name="ids[]"]').remove(); // Remove bulk IDs if any
                $('#deleteUserModal').modal('show');
            });

            // Bulk Delete
            $(document).on('click', '#bulkDeleteBtn', function() {
                var ids = getSelectedIds();

                if (!ids.length) {
                    showMasterToast({
                        type: 'warning',
                        title: 'Selection Required',
                        message: 'Please select at least one user.'
                    });

                    return;
                }

                $('#deleteModalTitle').text('Delete Users?');
                $('#deleteModalMessage').text('Are you sure you want to delete ' + ids.length +
                    ' users? This action cannot be undone.');
                $('#deleteMethodField').html('');
                $('#deleteUserForm').attr('action', "{{ route('backend.users.bulk-delete') }}");

                $('#deleteUserForm').find('input[name="ids[]"]').remove();
                ids.forEach(function(id) {
                    $('#deleteUserForm').append('<input type="hidden" name="ids[]" value="' +
                        id + '">');
                });

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

            $('#exportBtn').on('click', function() {
                var ids = getSelectedIds();
                var params = new URLSearchParams();

                if (ids.length) {
                    params.set('ids', ids.join(','));
                } else {
                    var status = $('#statusFilter').val();
                    var searchText = $('#searchInput').val();

                    if (status !== null && status !== undefined && String(status).trim() !== '') {
                        params.set('status', status);
                    }

                    if (searchText !== null && searchText !== undefined && String(searchText).trim() !==
                        '') {
                        params.set('search_text', String(searchText).trim());
                    }
                }

                if (window.CommonLoader && typeof window.CommonLoader.show === 'function') {
                    window.CommonLoader.show();
                }

                triggerExportDownload("{{ route('backend.users.export') }}" +
                    (params.toString() ? ('?' + params.toString()) : ''));
            });

            // Handle Delete Form Submit (AJAX)
            $('#deleteUserForm').on('submit', function(e) {
                e.preventDefault();
                var form = $(this);
                var url = form.attr('action');

                $.ajax({
                    url: url,
                    method: 'POST', // Form handles @method('DELETE') via hidden input
                    data: form.serialize(),
                    success: function(response) {
                        if (response.status) {
                            $('#deleteUserModal').modal('hide');
                            $('#selectAll').prop('checked', false);
                            table.ajax.reload(null, false);
                            updateBulkDeleteState();
                            showMasterToast(response.toast || {
                                type: 'success',
                                title: 'Success',
                                message: response.message
                            });
                        } else {
                            showMasterToast(response.toast || {
                                type: 'error',
                                title: 'Error',
                                message: response.message
                            });
                        }
                    },
                    error: function(err) {
                        showMasterToast((err.responseJSON && err.responseJSON.toast) || {
                            type: 'error',
                            title: 'Error',
                            message: 'Operation failed. Please check dependencies.'
                        });
                    },
                    complete: function() {
                        updateBulkDeleteState();
                    }
                });
            });

            // Bulk actions
            $(document).on('change', '#selectAll', function() {
                $('#userTable .row-checkbox:not(:disabled)').prop('checked', this.checked);
                updateBulkDeleteState();
            });
            $(document).on('change', '#userTable .row-checkbox', function() {
                var total = $('#userTable .row-checkbox:not(:disabled)').length;
                var checked = $('#userTable .row-checkbox:checked').length;

                $('#selectAll').prop('checked', total > 0 && total === checked);
                updateBulkDeleteState();
            });
        });
    </script>
@endsection