{{-- @php
    echo '<pre>';
    print_r($users->toArray());
    echo '</pre>';
    exit;
@endphp --}}

@extends('layouts.dashboard')

@section('title', 'Users')

@section('content')
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

        <div
            class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6 mb-8 pb-6 border-b border-gray-100 dark:border-gray-800/60">
            <div>
                <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white">
                    Users Management
                </h2>

            </div>

            <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-3 w-full lg:w-auto">
                <div class="relative w-full sm:w-80 md:w-96">
                    <span class="absolute inset-y-0 left-0 flex items-center pl-3.5 pointer-events-none">
                        <svg class="w-4 h-4 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor"
                            stroke-width="2" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                        </svg>
                    </span>
                    <input type="text" id="userSearch" placeholder="Search index parameters..."
                        class="w-full pl-10 pr-10 py-2.5 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-[#141414] text-sm text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 shadow-sm focus:outline-none focus:border-[#FFB531] focus:ring-2 focus:ring-[#FFB531]/15 transition-all duration-200"
                        oninput="filterUsers(this.value)">
                    <button type="button" id="clearSearch" onclick="clearUserSearch()"
                        class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 hidden">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>

                @if (auth()->user()->role->slug == 'sp')
                    <a href="{{ route('users.create') }}"
                        class="inline-flex items-center justify-center whitespace-nowrap rounded-xl bg-[#FFB531] hover:bg-[#e09e26] px-5 py-2.5 text-sm font-bold text-gray-900 shadow-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-[#FFB531]/40 focus:ring-offset-2 dark:focus:ring-offset-[#111]">
                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" stroke-width="2.5"
                            viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
                        </svg>
                        Add Staff
                    </a>
                @endif
            </div>
        </div>

        <div id="searchCountContainer" class="mb-4 hidden transition-all duration-200 animate-fadeIn">
            <span id="searchCount"
                class="inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium bg-amber-50 text-amber-800 dark:bg-amber-950/40 dark:text-amber-300 border border-amber-200/40 dark:border-amber-800/30"></span>
        </div>

        <div
            class="bg-white dark:bg-[#111111] rounded-2xl shadow-sm border border-gray-200/80 dark:border-gray-800/60 overflow-hidden backdrop-blur-sm">
            <div
                class="flex flex-col gap-3 border-b border-gray-100 bg-gray-50/50 px-4 py-3 dark:border-gray-800/80 dark:bg-gray-900/20 sm:flex-row sm:items-center sm:justify-between">
                <p id="paginationSummary" class="text-xs font-medium text-gray-500 dark:text-gray-400"></p>
                <div class="flex flex-wrap items-center gap-3">
                    <div class="flex items-center gap-2">
                        <label for="staffTypeFilter" class="text-xs font-semibold text-gray-500 dark:text-gray-400">Staff
                            Type</label>
                        <select id="staffTypeFilter" onchange="filterUsersByStaffType(this.value)"
                            class="rounded-lg border border-gray-200 bg-white px-2.5 py-1.5 text-xs font-semibold text-gray-700 shadow-sm focus:border-[#FFB531] focus:outline-none focus:ring-2 focus:ring-[#FFB531]/15 dark:border-gray-800 dark:bg-[#141414] dark:text-gray-200">
                            <option value="">All Staff</option>
                            <option value="direct">Direct</option>
                            <option value="franchise">Franchise</option>
                        </select>
                    </div>
                    <div class="flex items-center gap-2">
                        <label for="usersPerPage"
                            class="text-xs font-semibold text-gray-500 dark:text-gray-400">Rows</label>
                        <select id="usersPerPage" onchange="changeUsersPerPage(this.value)"
                            class="rounded-lg border border-gray-200 bg-white px-2.5 py-1.5 text-xs font-semibold text-gray-700 shadow-sm focus:border-[#FFB531] focus:outline-none focus:ring-2 focus:ring-[#FFB531]/15 dark:border-gray-800 dark:bg-[#141414] dark:text-gray-200">
                            <option value="10">10</option>
                            <option value="25">25</option>
                            <option value="50">50</option>
                            <option value="100">100</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-800 text-sm">
                    <thead
                        class="sticky top-0 z-10 border-y border-gray-200/80 bg-gray-100/90 shadow-[inset_0_-1px_0_rgba(229,231,235,0.9)] backdrop-blur dark:border-gray-800 dark:bg-gray-900/90 dark:shadow-[inset_0_-1px_0_rgba(31,41,55,0.9)]">
                        <tr class="divide-x divide-gray-200/70 dark:divide-gray-800/70">
                            <th scope="col"
                                class="w-16 px-4 py-3 text-left text-[11px] font-extrabold uppercase tracking-wider text-gray-500 dark:text-gray-400">
                                <span class="inline-flex items-center gap-1.5">
                                    <span
                                        class="inline-flex h-5 w-5 items-center justify-center rounded-md bg-white text-[10px] text-gray-500 ring-1 ring-gray-200 dark:bg-gray-950 dark:text-gray-400 dark:ring-gray-800">#</span>
                                    S.No
                                </span>
                            </th>
                            <th scope="col"
                                class="px-4 py-3 text-left text-[11px] font-extrabold uppercase tracking-wider text-gray-600 dark:text-gray-300">
                                <span class="inline-flex items-center gap-2">
                                    <svg class="h-4 w-4 text-[#FFB531]" fill="none" stroke="currentColor"
                                        stroke-width="2" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.5 20.25a8.25 8.25 0 1115 0" />
                                    </svg>
                                    Identity Name
                                </span>
                            </th>
                            <th scope="col"
                                class="px-4 py-3 text-left text-[11px] font-extrabold uppercase tracking-wider text-gray-600 dark:text-gray-300">
                                <span class="inline-flex items-center gap-2">
                                    <svg class="h-4 w-4 text-[#FFB531]" fill="none" stroke="currentColor"
                                        stroke-width="2" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                    </svg>
                                    Role
                                </span>
                            </th>
                            <th scope="col"
                                class="px-4 py-3 text-left text-[11px] font-extrabold uppercase tracking-wider text-gray-600 dark:text-gray-300">
                                <span class="inline-flex items-center gap-2">
                                    <svg class="h-4 w-4 text-[#FFB531]" fill="none" stroke="currentColor"
                                        stroke-width="2" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M18 18.72a9.094 9.094 0 003.75-6.97 9.094 9.094 0 00-3.75-6.97M6 18.72a9.094 9.094 0 01-3.75-6.97A9.094 9.094 0 016 4.78M15 11.25a3 3 0 11-6 0 3 3 0 016 0z" />
                                    </svg>
                                    Reporting Manager
                                </span>
                            </th>
                            <th scope="col"
                                class="px-4 py-3 text-left text-[11px] font-extrabold uppercase tracking-wider text-gray-600 dark:text-gray-300">
                                <span class="inline-flex items-center gap-2">
                                    <svg class="h-4 w-4 text-[#FFB531]" fill="none" stroke="currentColor"
                                        stroke-width="2" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M9 6.75V15m6-6v8.25m-10.5 1.5h15a1.5 1.5 0 001.5-1.5V6.75a1.5 1.5 0 00-1.5-1.5h-15A1.5 1.5 0 003 6.75v10.5a1.5 1.5 0 001.5 1.5z" />
                                    </svg>
                                    State
                                </span>
                            </th>
                            <th scope="col"
                                class="px-4 py-3 text-left text-[11px] font-extrabold uppercase tracking-wider text-gray-600 dark:text-gray-300">
                                <span class="inline-flex items-center gap-2">
                                    <svg class="h-4 w-4 text-[#FFB531]" fill="none" stroke="currentColor"
                                        stroke-width="2" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
                                    </svg>
                                    Location
                                </span>
                            </th>
                            <th scope="col"
                                class="px-4 py-3 text-left text-[11px] font-extrabold uppercase tracking-wider text-gray-600 dark:text-gray-300">
                                <span class="inline-flex items-center gap-2">
                                    <svg class="h-4 w-4 text-[#FFB531]" fill="none" stroke="currentColor"
                                        stroke-width="2" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21" />
                                    </svg>
                                    Type
                                </span>
                            </th>
                            @if (auth()->user()->role->slug == 'sp')
                                <th scope="col"
                                    class="px-4 py-3 text-right text-[11px] font-extrabold uppercase tracking-wider text-gray-600 dark:text-gray-300">
                                    <span class="inline-flex items-center justify-end gap-2">
                                        <svg class="h-4 w-4 text-[#FFB531]" fill="none" stroke="currentColor"
                                            stroke-width="2" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                d="M10.5 6h9.75M10.5 12h9.75M10.5 18h9.75M3.75 6h.008v.008H3.75V6zm0 6h.008v.008H3.75V12zm0 6h.008v.008H3.75V18z" />
                                        </svg>
                                        Actions
                                    </span>
                                </th>
                            @endif
                        </tr>
                    </thead>

                    <tbody class="divide-y divide-gray-100 dark:divide-gray-800/40 bg-white dark:bg-transparent">
                        @forelse($users as $user)
                            <tr class="hover:bg-gray-50/60 dark:hover:bg-gray-800/30 transition-colors duration-150 user-row"
                                data-staff-type="{{ strtolower($user->staff_type ?? '') }}"
                                data-search="{{ strtolower($user->name . ' ' . ($user->role?->name ?? '') . ' ' . ($user->role?->slug ?? '') . ' ' . ($user->manager?->name ?? '') . ' ' . ($user->state?->name ?? '') . ' ' . ($user->district?->name ?? '') . ' ' . ($user->employee_code ?? '') . ' ' . ($user->staff_type ?? '')) }}">

                                <td class="px-4 py-2 whitespace-nowrap text-gray-400 dark:text-gray-500 font-medium">
                                    <span class="user-serial">{{ $loop->iteration }}</span>
                                </td>

                                <td class="px-4 py-2 whitespace-nowrap">
                                    <div class="font-semibold text-gray-900 dark:text-gray-100">
                                        {{ $user->name }}
                                    </div>
                                </td>

                                {{-- <td class="px-4 py-2 whitespace-nowrap">

                                    @if ($user->role?->name)
                                        <span class="inline-flex items-center rounded-lg bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200 px-2.5 py-1 text-xs font-semibold tracking-wide ring-1 ring-inset ring-gray-500/10">
                                            {{ $user->role->name }}
                                        </span>
                                    @else
                                        <span class="text-gray-400 dark:text-gray-600 font-light">—</span>
                                    @endif
                                </td> --}}
                                <td class="px-4 py-2 text-xs text-gray-600 dark:text-gray-300">
                                    @if ($user->role?->name)
                                        @php
                                            $roleLabels = [
                                                'vp' => 'Zonal Director',
                                                'sd' => 'RSD',
                                                'rm' => 'RM',
                                                'bdm' => 'BDM',
                                                'bde' => 'BDE',
                                            ];
                                        @endphp
                                        <span
                                            class="inline-flex items-center rounded-md bg-gray-100 dark:bg-gray-800 px-2 py-1 text-xs font-medium text-gray-800 dark:text-gray-200">
                                            {{ $roleLabels[$user->role->slug] ?? $user->role->name }}
                                        </span>
                                    @else
                                        <span class="text-gray-400 dark:text-gray-600">—</span>
                                    @endif
                                </td>

                                <td class="px-4 py-2 whitespace-nowrap text-gray-600 dark:text-gray-300 font-medium">
                                    {{ $user->manager?->name ?? '—' }}
                                </td>

                                <td class="px-4 py-2 whitespace-nowrap text-gray-600 dark:text-gray-300">
                                    {{ $user->state?->name ?? '—' }}
                                </td>

                                <td class="px-4 py-2 whitespace-nowrap text-gray-600 dark:text-gray-300">
                                    {{ $user->district?->name ?? '—' }}
                                </td>
                                <td class="px-4 py-2 text-xs whitespace-nowrap text-gray-600 dark:text-gray-300 uppercase">
                                    {{ $user->staff_type ?? '—' }}
                                </td>
                                @if (auth()->user()->role->slug == 'sp')
                                    <td class="px-4 py-2 whitespace-nowrap text-right">
                                        <a href="{{ route('users.edit', $user) }}"
                                            class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 text-xs font-semibold shadow-sm hover:border-[#FFB531] dark:hover:border-[#FFB531] hover:text-gray-900 dark:hover:text-white transition-all duration-150">
                                            <svg class="w-3.5 h-3.5 text-gray-400 group-hover:text-gray-900"
                                                fill="none" stroke="currentColor" stroke-width="2"
                                                viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                    d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
                                            </svg>
                                            Edit
                                        </a>
                                    </td>
                                @endif
                            </tr>
                        @empty
                            <tr>
                                <td colspan="{{ auth()->user()->role->slug == 'sp' ? 7 : 6 }}"
                                    class="px-6 py-20 text-center">
                                    <div class="max-w-md mx-auto flex flex-col items-center justify-center space-y-4">
                                        <div
                                            class="p-3 bg-gray-50 dark:bg-gray-900 rounded-2xl border border-gray-100 dark:border-gray-800">
                                            <svg class="w-8 h-8 text-gray-400 dark:text-gray-600" fill="none"
                                                stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                    d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z">
                                                </path>
                                            </svg>
                                        </div>
                                        <div>
                                            <p class="text-base font-semibold text-gray-900 dark:text-white">No users found
                                            </p>
                                            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">No registered system
                                                users were found in this node setup instance.</p>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div id="usersPagination"
                class="flex flex-col gap-3 border-t border-gray-100 bg-gray-50/30 px-4 py-3 dark:border-gray-800/80 dark:bg-transparent sm:flex-row sm:items-center sm:justify-between">
                <p id="paginationPageInfo" class="text-xs font-medium text-gray-500 dark:text-gray-400"></p>
                <div class="flex flex-wrap items-center gap-1" id="paginationButtons"></div>
            </div>
        </div>
    </div>

    <script>
        let usersCurrentPage = 1;
        let usersPerPage = 10;

        function getFilteredUserRows() {
            return Array.from(document.querySelectorAll('.user-row')).filter(row => row.dataset.filtered !== 'false');
        }

        function renderUsersPagination() {
            const allRows = Array.from(document.querySelectorAll('.user-row'));
            const filteredRows = getFilteredUserRows();
            const totalRows = allRows.length;
            const totalFiltered = filteredRows.length;
            const totalPages = Math.max(1, Math.ceil(totalFiltered / usersPerPage));
            const pagination = document.getElementById('usersPagination');
            const buttons = document.getElementById('paginationButtons');
            const summary = document.getElementById('paginationSummary');
            const pageInfo = document.getElementById('paginationPageInfo');
            const searchValue = document.getElementById('userSearch').value.trim();

            usersCurrentPage = Math.min(usersCurrentPage, totalPages);

            allRows.forEach(row => row.classList.add('hidden'));

            const start = (usersCurrentPage - 1) * usersPerPage;
            const end = start + usersPerPage;
            filteredRows.slice(start, end).forEach((row, index) => {
                row.classList.remove('hidden');
                const serial = row.querySelector('.user-serial');
                if (serial) {
                    serial.textContent = start + index + 1;
                }
            });

            const firstVisible = totalFiltered === 0 ? 0 : start + 1;
            const lastVisible = Math.min(end, totalFiltered);
            summary.textContent = totalRows === 0 ?
                'No users available' :
                `Showing ${firstVisible}-${lastVisible} of ${totalFiltered}${searchValue ? ` filtered from ${totalRows}` : ''} users`;
            pageInfo.textContent = totalFiltered > 0 ? `Page ${usersCurrentPage} of ${totalPages}` : '';

            pagination.classList.toggle('hidden', totalRows === 0);
            buttons.innerHTML = '';

            if (totalFiltered <= usersPerPage) {
                return;
            }

            addPaginationButton(buttons, 'Previous', usersCurrentPage - 1, usersCurrentPage === 1);

            const visiblePages = new Set([1, totalPages, usersCurrentPage - 1, usersCurrentPage, usersCurrentPage + 1]);
            let lastPage = 0;
            for (let page = 1; page <= totalPages; page++) {
                if (!visiblePages.has(page)) {
                    continue;
                }

                if (lastPage && page - lastPage > 1) {
                    const dots = document.createElement('span');
                    dots.className = 'px-2 py-1 text-xs font-semibold text-gray-400 dark:text-gray-600';
                    dots.textContent = '...';
                    buttons.appendChild(dots);
                }

                addPaginationButton(buttons, page, page, false, page === usersCurrentPage);
                lastPage = page;
            }

            addPaginationButton(buttons, 'Next', usersCurrentPage + 1, usersCurrentPage === totalPages);
        }

        function addPaginationButton(container, label, page, disabled = false, active = false) {
            const button = document.createElement('button');
            button.type = 'button';
            button.textContent = label;
            button.disabled = disabled;
            button.className = [
                'min-w-9 rounded-lg px-3 py-1.5 text-xs font-bold transition-colors',
                active ?
                'bg-[#FFB531] text-gray-900 shadow-sm' :
                'border border-gray-200 bg-white text-gray-600 hover:border-[#FFB531] hover:text-gray-900 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-[#FFB531] dark:hover:text-white',
                disabled ?
                'cursor-not-allowed opacity-40 hover:border-gray-200 hover:text-gray-600 dark:hover:border-gray-800 dark:hover:text-gray-300' :
                ''
            ].join(' ');
            button.onclick = () => {
                if (!disabled) {
                    usersCurrentPage = page;
                    renderUsersPagination();
                }
            };
            container.appendChild(button);
        }

        function changeUsersPerPage(value) {
            usersPerPage = parseInt(value, 10) || 10;
            usersCurrentPage = 1;
            renderUsersPagination();
        }

        function applyUserFilters() {
            const query = document.getElementById('userSearch').value;
            const q = query.toLowerCase().trim();
            const staffType = document.getElementById('staffTypeFilter').value.toLowerCase();
            const rows = document.querySelectorAll('.user-row');
            const clearBtn = document.getElementById('clearSearch');
            const countContainer = document.getElementById('searchCountContainer');
            const countEl = document.getElementById('searchCount');
            let noResultsRow = document.getElementById('noSearchResults');

            clearBtn.classList.toggle('hidden', !q);

            let visible = 0;
            rows.forEach(row => {
                const matchesSearch = !q || row.dataset.search.includes(q);
                const matchesStaffType = !staffType || row.dataset.staffType === staffType;
                const match = matchesSearch && matchesStaffType;
                row.dataset.filtered = match ? 'true' : 'false';
                if (match) visible++;
            });

            if (!noResultsRow) {
                noResultsRow = document.createElement('tr');
                noResultsRow.id = 'noSearchResults';
                noResultsRow.innerHTML = `
            <td colspan="{{ auth()->user()->role->slug == 'sp' ? 8 : 7 }}" class="px-6 py-16 text-center">
                <div class="max-w-md mx-auto flex flex-col items-center justify-center space-y-3">
                    <div class="p-2.5 bg-gray-50 dark:bg-gray-900 rounded-xl border border-gray-100 dark:border-gray-800">
                        <svg class="w-6 h-6 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                        </svg>
                    </div>
                    <div>
                        <p class="text-sm font-semibold text-gray-900 dark:text-white">No staff found</p>
                        <p id="noSearchMessage" class="text-xs text-gray-400 dark:text-gray-500 mt-0.5"></p>
                    </div>
                </div>
            </td>
        `;
                document.querySelector('tbody').appendChild(noResultsRow);
            }

            const noSearchMessage = document.getElementById('noSearchMessage');
            if (noSearchMessage) {
                noSearchMessage.textContent = q && staffType ?
                    `No ${staffType} staff match "${query}".` :
                    q ?
                    `No staff match "${query}".` :
                    `No ${staffType} staff are available.`;
            }
            noResultsRow.classList.toggle('hidden', visible > 0 || (!q && !staffType));

            if (q || staffType) {
                countEl.textContent = `${visible} matching staff record${visible !== 1 ? 's' : ''}`;
                countContainer.classList.remove('hidden');
            } else {
                countContainer.classList.add('hidden');
            }

            usersCurrentPage = 1;
            renderUsersPagination();
        }

        function filterUsers() {
            applyUserFilters();
        }

        function filterUsersByStaffType() {
            applyUserFilters();
        }

        function clearUserSearch() {
            const input = document.getElementById('userSearch');
            input.value = '';
            filterUsers('');
            input.focus();
        }

        document.addEventListener('DOMContentLoaded', () => {
            document.querySelectorAll('.user-row').forEach(row => {
                row.dataset.filtered = 'true';
            });
            renderUsersPagination();
        });
    </script>
@endsection