@php
    // Initialize variables - will be populated by Alpine.js/Livewire
    $registered = null;
    $depositors = null;
    $selectedUserIds = [];
    $users = collect([]);
    
    // Try to get initial state from Livewire if available
    try {
        if (isset($this) && method_exists($this, 'form')) {
            $formState = $this->form->getState();
            $registered = $formState['registered'] ?? null;
            $depositors = $formState['depositors'] ?? null;
            $selectedUserIds = $formState['filter_selected_user_ids'] ?? [];
            
            if (is_string($selectedUserIds)) {
                $selectedUserIds = json_decode($selectedUserIds, true) ?: [];
            }
            if (!is_array($selectedUserIds)) {
                $selectedUserIds = [];
            }
            
            // Initial users will be fetched by Alpine.js
            // No need to fetch here as Alpine.js will handle it
        }
    } catch (\Exception $e) {
        // Will be handled by Alpine.js
    }
@endphp

<style>
    [x-cloak] { display: none !important; }
</style>

<!-- <script>
function filterTableData() {
    return {
        registered: $wire.data.registered || null,
        depositors: $wire.data.depositors || null,
        selectedIds: (() => {
            const ids = $wire.data.filter_selected_user_ids;
            if (typeof ids === 'string') {
                try { return JSON.parse(ids); } catch(e) { return []; }
            }
            return Array.isArray(ids) ? ids : [];
        })(),
        selectAll: false,
        users: [],
        loading: false,
        search: '',
        searchTimeout: null,
        currentPage: 1,
        total: 0,
        lastPage: 1,
        from: 0,
        to: 0,
        async fetchUsers(page = 1) {
            this.loading = true;
            this.currentPage = page || 1;
            try {
                // Call Livewire method
                const result = await $wire.getFilteredUsers(this.search || '', this.currentPage);
                console.log('Fetched users:', result);
                
                if (result && typeof result === 'object') {
                    this.users = result.users || [];
                    this.total = result.total || 0;
                    this.lastPage = result.last_page || 1;
                    this.from = result.from || 0;
                    this.to = result.to || 0;
                } else {
                    // Fallback if result format is unexpected
                    this.users = [];
                    this.total = 0;
                }
            } catch (error) {
                console.error('Error fetching users:', error);
                this.users = [];
                this.total = 0;
                this.lastPage = 1;
                this.from = 0;
                this.to = 0;
            } finally {
                this.loading = false;
            }
        },
        onSearchInput() {
            clearTimeout(this.searchTimeout);
            this.searchTimeout = setTimeout(() => {
                this.currentPage = 1;
                this.fetchUsers(1);
            }, 500);
        },
        goToPage(page) {
            if (page >= 1 && page <= this.lastPage) {
                this.fetchUsers(page);
            }
        },
        toggleSelectAll() {
            this.selectAll = !this.selectAll;
            if (this.selectAll) {
                const checkboxes = document.querySelectorAll('tbody input[type="checkbox"]');
                this.selectedIds = Array.from(checkboxes).map(cb => parseInt(cb.value || cb.getAttribute('data-user-id'))).filter(id => !isNaN(id));
            } else {
                this.selectedIds = [];
            }
            this.updateHiddenField();
        },
        toggleUser(userId) {
            const index = this.selectedIds.indexOf(userId);
            if (index > -1) {
                this.selectedIds.splice(index, 1);
            } else {
                this.selectedIds.push(userId);
            }
            this.updateHiddenField();
        },
        updateHiddenField() {
            if (typeof $wire !== 'undefined' && $wire.data) {
                $wire.data.filter_selected_user_ids = JSON.stringify(this.selectedIds);
            }
            const hiddenInput = document.querySelector('[name="data[filter_selected_user_ids]"]');
            if (hiddenInput) {
                hiddenInput.value = JSON.stringify(this.selectedIds);
                hiddenInput.dispatchEvent(new Event('input', { bubbles: true }));
            }
        },
        init() {
            this.registered = $wire.data.registered || null;
            this.depositors = $wire.data.depositors || null;
            
            // Always fetch users on init (shows all users by default)
            this.fetchUsers(1);
            
            this.$watch('$wire.data.registered', (newVal) => {
                this.registered = newVal || null;
                this.selectedIds = [];
                this.selectAll = false;
                this.updateHiddenField();
                this.currentPage = 1;
                this.fetchUsers(1);
            });
            this.$watch('$wire.data.depositors', (newVal) => {
                this.depositors = newVal || null;
                this.selectedIds = [];
                this.selectAll = false;
                this.updateHiddenField();
                this.currentPage = 1;
                this.fetchUsers(1);
            });
            if (window.Livewire) {
                Livewire.hook('morph.updated', () => {
                    this.registered = $wire.data.registered || null;
                    this.depositors = $wire.data.depositors || null;
                    this.currentPage = 1;
                    this.fetchUsers(1);
                });
            }
        }
    };
}
</script> -->

<div class="space-y-4 mt-4" x-data="{
    registered: null,
    depositors: null,
    selectedIds: [],
    selectAll: false,
    users: [],
    loading: false,
    search: '',
    searchTimeout: null,
    currentPage: 1,
    total: 0,
    lastPage: 1,
    from: 0,
    to: 0,
    async fetchUsers(page = 1) {
        this.loading = true;
        this.currentPage = page || 1;
        try {
            if (typeof $wire === 'undefined' || !$wire.getFilteredUsers) {
                console.error('$wire.getFilteredUsers is not available');
                this.loading = false;
                return;
            }
            const result = await $wire.getFilteredUsers(this.search || '', this.currentPage);
            if (result && typeof result === 'object') {
                this.users = result.users ?? [];
                this.total = result.total ?? 0;
                this.lastPage = result.last_page ?? 1;
                this.from = result.from ?? 0;
                this.to = result.to ?? 0;
                
                // Update selectAll checkbox state based on current page selection
                if (this.users.length > 0) {
                    this.selectAll = this.users.every(u => this.selectedIds.includes(u.id));
                } else {
                    this.selectAll = false;
                }
            } else {
                this.users = [];
                this.total = 0;
                this.lastPage = 1;
                this.from = 0;
                this.to = 0;
                this.selectAll = false;
            }
        } catch (e) {
            console.error('Fetch users failed', e);
            this.users = [];
            this.total = 0;
            this.lastPage = 1;
            this.from = 0;
            this.to = 0;
        } finally {
            this.loading = false;
        }
    },
    onSearchInput() {
        clearTimeout(this.searchTimeout);
        this.searchTimeout = setTimeout(() => {
            this.currentPage = 1;
            this.fetchUsers(1);
        }, 500);
    },
    goToPage(page) {
        if (page >= 1 && page <= (this.lastPage || 1)) {
            this.fetchUsers(page);
        }
    },
    toggleSelectAll() {
        this.selectAll = !this.selectAll;
        if (this.selectAll) {
            // Select all users on current page
            this.selectedIds = this.users.map(u => u.id);
        } else {
            // Deselect all
            this.selectedIds = [];
        }
        // Update selectAll state based on actual selection
        this.selectAll = this.selectedIds.length > 0 && this.selectedIds.length === this.users.length;
        this.syncSelected();
    },
    toggleUser(id) {
        if (this.selectedIds.includes(id)) {
            this.selectedIds = this.selectedIds.filter(i => i !== id);
        } else {
            this.selectedIds.push(id);
        }
        // Update selectAll checkbox state based on current page selection
        this.selectAll = this.selectedIds.length > 0 && this.users.every(u => this.selectedIds.includes(u.id));
        this.syncSelected();
    },
    syncSelected() {
        try {
            if (typeof $wire !== 'undefined' && $wire.set) {
                $wire.set('data.filter_selected_user_ids', JSON.stringify(this.selectedIds), false);
            }
        } catch (e) {
            console.error('Error syncing selected IDs:', e);
        }
    },
    init() {
        if (typeof $wire !== 'undefined' && $wire.data) {
            this.registered = $wire.data.registered || null;
            this.depositors = $wire.data.depositors || null;
            const initialIds = $wire.data.filter_selected_user_ids;
            if (initialIds) {
                try {
                    this.selectedIds = typeof initialIds === 'string' ? JSON.parse(initialIds) : (Array.isArray(initialIds) ? initialIds : []);
                } catch (e) {
                    this.selectedIds = [];
                }
            }
        }
        this.$nextTick(() => {
            this.fetchUsers(1);
        });
        this.$watch('$wire.data.registered', (newVal) => {
            this.registered = newVal || null;
            this.selectedIds = [];
            this.selectAll = false;
            this.currentPage = 1;
            this.fetchUsers(1);
        });
        this.$watch('$wire.data.depositors', (newVal) => {
            this.depositors = newVal || null;
            this.selectedIds = [];
            this.selectAll = false;
            this.currentPage = 1;
            this.fetchUsers(1);
        });
    }
}" x-cloak>
    {{-- Search and Filters --}}
    <div class="space-y-4 mb-4">
        {{-- Search Input --}}
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                Search Users
            </label>
            <input 
                type="text"
                x-model="search"
                @input="onSearchInput()"
                placeholder="Search by ID, name, or email..."
                class="fi-input block w-full rounded-lg border-gray-300 shadow-sm transition duration-75 focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:opacity-70 dark:border-white/10 dark:bg-white/5 dark:text-white dark:focus:border-primary-500"
            />
        </div>
        
        {{-- Filter Dropdowns --}}
        <div class="grid grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Registered Window
                </label>
                <select 
                    wire:model.live="data.registered"
                    class="fi-input block w-full rounded-lg border-gray-300 shadow-sm transition duration-75 focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:opacity-70 dark:border-white/10 dark:bg-white/5 dark:text-white dark:focus:border-primary-500"
                >
                    <option value="">All Users</option>
                    <option value="today">Today</option>
                    <option value="yesterday">Yesterday</option>
                    <option value="week">This Week</option>
                    <option value="month">This Month</option>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Depositors Window
                </label>
                <select 
                    wire:model.live="data.depositors"
                    class="fi-input block w-full rounded-lg border-gray-300 shadow-sm transition duration-75 focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:opacity-70 dark:border-white/10 dark:bg-white/5 dark:text-white dark:focus:border-primary-500"
                >
                    <option value="">All Users</option>
                    <option value="today">Today</option>
                    <option value="yesterday">Yesterday</option>
                    <option value="week">This Week</option>
                    <option value="month">This Month</option>
                </select>
            </div>
        </div>
    </div>

    {{-- Users Table - Always visible --}}
    <div class="fi-ta-ctn divide-y divide-gray-200 overflow-hidden rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 dark:divide-white/10 dark:bg-gray-900 dark:ring-white/10">
        <div class="fi-ta-table-wrapper overflow-x-auto">
            <table class="fi-ta-table w-full table-auto divide-y divide-gray-200 text-start dark:divide-white/5">
                <thead class="divide-y divide-gray-200 dark:divide-white/5">
                    <tr class="bg-gray-50 dark:bg-white/5">
                        <th class="fi-ta-header-cell px-3 py-3.5 sm:first-of-type:ps-4 sm:last-of-type:pe-4">
                            <div class="flex items-center">
                                <input 
                                    type="checkbox" 
                                    x-model="selectAll"
                                    @change="toggleSelectAll()"
                                    class="fi-checkbox-input rounded border-gray-300 text-primary-600 shadow-sm transition duration-75 checked:border-primary-600 focus:border-primary-500 focus:ring-2 focus:ring-primary-500 disabled:opacity-70 dark:border-white/20 dark:bg-white/5 dark:checked:bg-primary-600 dark:checked:border-primary-600 dark:focus:ring-primary-500"
                                />
                            </div>
                        </th>
                        <th class="fi-ta-header-cell px-3 py-3.5 sm:first-of-type:ps-4 sm:last-of-type:pe-4">
                            <span class="fi-ta-header-cell-label whitespace-nowrap text-sm font-semibold text-gray-950 dark:text-white">
                                ID
                            </span>
                        </th>
                        <th class="fi-ta-header-cell px-3 py-3.5 sm:first-of-type:ps-4 sm:last-of-type:pe-4">
                            <span class="fi-ta-header-cell-label whitespace-nowrap text-sm font-semibold text-gray-950 dark:text-white">
                                Name
                            </span>
                        </th>
                        <th class="fi-ta-header-cell px-3 py-3.5 sm:first-of-type:ps-4 sm:last-of-type:pe-4">
                            <span class="fi-ta-header-cell-label whitespace-nowrap text-sm font-semibold text-gray-950 dark:text-white">
                                Email
                            </span>
                        </th>
                        <th class="fi-ta-header-cell px-3 py-3.5 sm:first-of-type:ps-4 sm:last-of-type:pe-4">
                            <span class="fi-ta-header-cell-label whitespace-nowrap text-sm font-semibold text-gray-950 dark:text-white">
                                Registered Date
                            </span>
                        </th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200 whitespace-nowrap dark:divide-white/5">
                    <template x-if="loading">
                        <tr>
                            <td colspan="5" class="fi-ta-empty-state-cell px-3 py-4 text-center">
                                <div class="mx-auto max-w-md text-center">
                                    <p class="text-sm font-medium text-gray-950 dark:text-white">Loading users...</p>
                                </div>
                            </td>
                        </tr>
                    </template>
                    <template x-if="!loading && users.length > 0">
                        <template x-for="user in users" :key="user.id">
                            <tr class="fi-ta-row transition duration-75 hover:bg-gray-50 dark:hover:bg-white/5">
                                <td class="fi-ta-cell p-0 first-of-type:ps-1 last-of-type:pe-1 sm:first-of-type:ps-3 sm:last-of-type:pe-3">
                                    <div class="px-3 py-3.5">
                                        <input 
                                            type="checkbox" 
                                            :value="user.id"
                                            :data-user-id="user.id"
                                            :checked="selectedIds.includes(user.id)"
                                            @change="toggleUser(user.id)"
                                            class="fi-checkbox-input rounded border-gray-300 text-primary-600 shadow-sm transition duration-75 checked:border-primary-600 focus:border-primary-500 focus:ring-2 focus:ring-primary-500 disabled:opacity-70 dark:border-white/20 dark:bg-white/5 dark:checked:bg-primary-600 dark:checked:border-primary-600 dark:focus:ring-primary-500"
                                        />
                                    </div>
                                </td>
                                <td class="fi-ta-cell p-0 first-of-type:ps-1 last-of-type:pe-1 sm:first-of-type:ps-3 sm:last-of-type:pe-3">
                                    <div class="px-3 py-3.5">
                                        <span class="text-sm leading-6 text-gray-950 dark:text-white" x-text="user.id"></span>
                                    </div>
                                </td>
                                <td class="fi-ta-cell p-0 first-of-type:ps-1 last-of-type:pe-1 sm:first-of-type:ps-3 sm:last-of-type:pe-3">
                                    <div class="px-3 py-3.5">
                                        <span class="text-sm leading-6 text-gray-950 dark:text-white" x-text="user.name"></span>
                                    </div>
                                </td>
                                <td class="fi-ta-cell p-0 first-of-type:ps-1 last-of-type:pe-1 sm:first-of-type:ps-3 sm:last-of-type:pe-3">
                                    <div class="px-3 py-3.5">
                                        <span class="text-sm leading-6 text-gray-950 dark:text-white" x-text="user.email || '-'"></span>
                                    </div>
                                </td>
                                <td class="fi-ta-cell p-0 first-of-type:ps-1 last-of-type:pe-1 sm:first-of-type:ps-3 sm:last-of-type:pe-3">
                                    <div class="px-3 py-3.5">
                                        <span class="text-sm leading-6 text-gray-950 dark:text-white" x-text="user.created_at"></span>
                                    </div>
                                </td>
                            </tr>
                        </template>
                    </template>
                    <template x-if="!loading && users.length === 0">
                        <tr>
                            <td colspan="5" class="fi-ta-empty-state-cell px-3 py-4 text-center sm:first-of-type:ps-3 sm:last-of-type:pe-3">
                                <div class="mx-auto max-w-md text-center">
                                    <p class="text-sm font-medium text-gray-950 dark:text-white">
                                        No users found matching the selected filters.
                                    </p>
                                </div>
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>

        {{-- Pagination --}}
        <div class="fi-ta-pagination-ctn border-t border-gray-200 px-4 py-3 dark:border-white/10" x-show="!loading && total > 0">
            <nav role="navigation" aria-label="Pagination Navigation" class="fi-ta-pagination flex items-center justify-between">
                <div class="fi-ta-pagination-info-wrapper flex flex-1 items-center gap-x-3">
                    <span class="text-sm text-gray-700 dark:text-gray-200">
                        <span x-text="`Showing ${from || 0} to ${to || 0} of ${total} results`"></span>
                    </span>
                </div>
                <div class="fi-ta-pagination-items flex items-center gap-x-1">
                    <button 
                        @click="goToPage(currentPage - 1)"
                        :disabled="currentPage === 1"
                        :class="currentPage === 1 ? 'opacity-70 cursor-not-allowed' : 'hover:bg-gray-50'"
                        class="fi-btn fi-btn-size-sm fi-color-gray rounded-lg border border-gray-300 bg-white px-2 py-1.5 text-sm text-gray-700 dark:text-gray-200 dark:bg-white/5 dark:border-white/10 dark:hover:bg-white/10"
                    >
                        Previous
                    </button>
                    
                    <template x-for="page in Array.from({length: Math.min(lastPage || 1, 10)}, (_, i) => i + 1)" :key="page">
                        <button 
                            @click="goToPage(page)"
                            :class="page === currentPage ? 'fi-color-primary border-primary-600 bg-primary-600 text-white' : 'fi-color-gray border-gray-300 bg-white text-gray-700 hover:bg-gray-50 dark:bg-white/5 dark:border-white/10 dark:text-gray-200 dark:hover:bg-white/10'"
                            class="fi-btn fi-btn-size-sm rounded-lg border px-3 py-1.5 text-sm"
                            x-text="page"
                        ></button>
                    </template>
                    
                    <button 
                        @click="goToPage(currentPage + 1)"
                        :disabled="currentPage === lastPage"
                        :class="currentPage === lastPage ? 'opacity-70 cursor-not-allowed' : 'hover:bg-gray-50'"
                        class="fi-btn fi-btn-size-sm fi-color-gray rounded-lg border border-gray-300 bg-white px-2 py-1.5 text-sm text-gray-700 dark:text-gray-200 dark:bg-white/5 dark:border-white/10 dark:hover:bg-white/10"
                    >
                        Next
                    </button>
                </div>
            </nav>
        </div>
    </div>

    {{-- Selected count --}}
    <div class="text-sm text-gray-600 dark:text-gray-400 mt-2">
        <span x-text="`Selected: ${selectedIds ? selectedIds.length : 0} user(s)`"></span>
    </div>
</div>

<!-- 
<div class="space-y-4" x-data="filterTableData">
    {{-- Search and Filters --}}
    <div class="space-y-4 mb-4">
        {{-- Search Input --}}
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                Search Users
            </label>
            <input 
                type="text"
                x-model="search"
                @input="onSearchInput()"
                placeholder="Search by ID, name, or email..."
                class="fi-input block w-full rounded-lg border-gray-300 shadow-sm transition duration-75 focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:opacity-70 dark:border-white/10 dark:bg-white/5 dark:text-white dark:focus:border-primary-500"
            />
        </div>
        
        {{-- Filter Dropdowns --}}
        <div class="grid grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Registered Window
                </label>
                <select 
                    wire:model.live="data.registered"
                    class="fi-input block w-full rounded-lg border-gray-300 shadow-sm transition duration-75 focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:opacity-70 dark:border-white/10 dark:bg-white/5 dark:text-white dark:focus:border-primary-500"
                >
                    <option value="">All Users</option>
                    <option value="today">Today</option>
                    <option value="yesterday">Yesterday</option>
                    <option value="week">This Week</option>
                    <option value="month">This Month</option>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Depositors Window
                </label>
                <select 
                    wire:model.live="data.depositors"
                    class="fi-input block w-full rounded-lg border-gray-300 shadow-sm transition duration-75 focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:opacity-70 dark:border-white/10 dark:bg-white/5 dark:text-white dark:focus:border-primary-500"
                >
                    <option value="">All Users</option>
                    <option value="today">Today</option>
                    <option value="yesterday">Yesterday</option>
                    <option value="week">This Week</option>
                    <option value="month">This Month</option>
                </select>
            </div>
        </div>
    </div>

    {{-- Users Table - Always visible --}}
    <div class="fi-ta-ctn divide-y divide-gray-200 overflow-hidden rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 dark:divide-white/10 dark:bg-gray-900 dark:ring-white/10">
            <div class="fi-ta-table-wrapper overflow-x-auto">
                <table class="fi-ta-table w-full table-auto divide-y divide-gray-200 text-start dark:divide-white/5">
                    <thead class="divide-y divide-gray-200 dark:divide-white/5">
                        <tr class="bg-gray-50 dark:bg-white/5">
                            <th class="fi-ta-header-cell px-3 py-3.5 sm:first-of-type:ps-4 sm:last-of-type:pe-4">
                                <input 
                                    type="checkbox" 
                                    x-model="selectAll"
                                    @change="toggleSelectAll()"
                                    class="fi-checkbox-input rounded border-gray-300 text-primary-600 shadow-sm transition duration-75 checked:border-primary-600 focus:border-primary-500 focus:ring-2 focus:ring-primary-500 disabled:opacity-70 dark:border-white/20 dark:bg-white/5 dark:checked:bg-primary-600 dark:checked:border-primary-600 dark:focus:ring-primary-500"
                                />
                            </th>
                            <th class="fi-ta-header-cell px-3 py-3.5 sm:first-of-type:ps-4 sm:last-of-type:pe-4">
                                <span class="fi-ta-header-cell-label whitespace-nowrap text-sm font-semibold text-gray-950 dark:text-white">
                                    ID
                                </span>
                            </th>
                            <th class="fi-ta-header-cell px-3 py-3.5 sm:first-of-type:ps-4 sm:last-of-type:pe-4">
                                <span class="fi-ta-header-cell-label whitespace-nowrap text-sm font-semibold text-gray-950 dark:text-white">
                                    Name
                                </span>
                            </th>
                            <th class="fi-ta-header-cell px-3 py-3.5 sm:first-of-type:ps-4 sm:last-of-type:pe-4">
                                <span class="fi-ta-header-cell-label whitespace-nowrap text-sm font-semibold text-gray-950 dark:text-white">
                                    Email
                                </span>
                            </th>
                            <th class="fi-ta-header-cell px-3 py-3.5 sm:first-of-type:ps-4 sm:last-of-type:pe-4">
                                <span class="fi-ta-header-cell-label whitespace-nowrap text-sm font-semibold text-gray-950 dark:text-white">
                                    Registered Date
                                </span>
                            </th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200 whitespace-nowrap dark:divide-white/5">
                        <template x-if="loading">
                            <tr>
                                <td colspan="5" class="fi-ta-empty-state-cell px-3 py-4 text-center">
                                    <div class="mx-auto max-w-md text-center">
                                        <p class="text-sm font-medium text-gray-950 dark:text-white">Loading users...</p>
                                    </div>
                                </td>
                            </tr>
                        </template>
                        <template x-if="!loading && users.length > 0">
                            <template x-for="user in users" :key="user.id">
                                <tr class="fi-ta-row transition duration-75 hover:bg-gray-50 dark:hover:bg-white/5">
                                    <td class="fi-ta-cell p-0 first-of-type:ps-1 last-of-type:pe-1 sm:first-of-type:ps-3 sm:last-of-type:pe-3">
                                        <div class="px-3 py-4">
                                            <input 
                                                type="checkbox" 
                                                :value="user.id"
                                                :data-user-id="user.id"
                                                :checked="selectedIds.includes(user.id)"
                                                @change="toggleUser(user.id)"
                                                class="fi-checkbox-input rounded border-gray-300 text-primary-600 shadow-sm transition duration-75 checked:border-primary-600 focus:border-primary-500 focus:ring-2 focus:ring-primary-500 disabled:opacity-70 dark:border-white/20 dark:bg-white/5 dark:checked:bg-primary-600 dark:checked:border-primary-600 dark:focus:ring-primary-500"
                                            />
                                        </div>
                                    </td>
                                    <td class="fi-ta-cell p-0 first-of-type:ps-1 last-of-type:pe-1 sm:first-of-type:ps-3 sm:last-of-type:pe-3">
                                        <div class="px-3 py-4">
                                            <span class="text-sm leading-6 text-gray-950 dark:text-white" x-text="user.id"></span>
                                        </div>
                                    </td>
                                    <td class="fi-ta-cell p-0 first-of-type:ps-1 last-of-type:pe-1 sm:first-of-type:ps-3 sm:last-of-type:pe-3">
                                        <div class="px-3 py-4">
                                            <span class="text-sm leading-6 text-gray-950 dark:text-white" x-text="user.name"></span>
                                        </div>
                                    </td>
                                    <td class="fi-ta-cell p-0 first-of-type:ps-1 last-of-type:pe-1 sm:first-of-type:ps-3 sm:last-of-type:pe-3">
                                        <div class="px-3 py-4">
                                            <span class="text-sm leading-6 text-gray-950 dark:text-white" x-text="user.email"></span>
                                        </div>
                                    </td>
                                    <td class="fi-ta-cell p-0 first-of-type:ps-1 last-of-type:pe-1 sm:first-of-type:ps-3 sm:last-of-type:pe-3">
                                        <div class="px-3 py-4">
                                            <span class="text-sm leading-6 text-gray-950 dark:text-white" x-text="user.created_at"></span>
                                        </div>
                                    </td>
                                </tr>
                            </template>
                        </template>
                        <template x-if="!loading && users.length === 0">
                            <tr>
                                <td colspan="5" class="fi-ta-empty-state-cell px-3 py-4 text-center sm:first-of-type:ps-3 sm:last-of-type:pe-3">
                                    <div class="mx-auto max-w-md text-center">
                                        <p class="text-sm font-medium text-gray-950 dark:text-white">
                                            No users found matching the selected filters.
                                        </p>
                                    </div>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>

            {{-- Pagination --}}
            <div class="fi-ta-pagination-ctn border-t border-gray-200 px-4 py-3 dark:border-white/10" x-show="!loading && total > 0">
                <nav role="navigation" aria-label="Pagination Navigation" class="fi-ta-pagination flex items-center justify-between">
                    <div class="fi-ta-pagination-info-wrapper flex flex-1 items-center gap-x-3">
                        <span class="text-sm text-gray-700 dark:text-gray-200">
                            <span x-text="`Showing ${from || 0} to ${to || 0} of ${total} results`"></span>
                        </span>
                    </div>
                    <div class="fi-ta-pagination-items flex items-center gap-x-1">
                        <button 
                            @click="goToPage(currentPage - 1)"
                            :disabled="currentPage === 1"
                            :class="currentPage === 1 ? 'opacity-70 cursor-not-allowed' : 'hover:bg-gray-50'"
                            class="fi-btn fi-btn-size-sm fi-color-gray rounded-lg border border-gray-300 bg-white px-2 py-1.5 text-sm text-gray-700"
                        >
                            Previous
                        </button>
                        
                        <template x-for="page in Array.from({length: Math.min(lastPage, 10)}, (_, i) => i + 1)" :key="page">
                            <button 
                                @click="goToPage(page)"
                                :class="page === currentPage ? 'fi-color-primary border-primary-600 bg-primary-600 text-white' : 'fi-color-gray border-gray-300 bg-white text-gray-700 hover:bg-gray-50'"
                                class="fi-btn fi-btn-size-sm rounded-lg border px-3 py-1.5 text-sm"
                                x-text="page"
                            ></button>
                        </template>
                        
                        <button 
                            @click="goToPage(currentPage + 1)"
                            :disabled="currentPage === lastPage"
                            :class="currentPage === lastPage ? 'opacity-70 cursor-not-allowed' : 'hover:bg-gray-50'"
                            class="fi-btn fi-btn-size-sm fi-color-gray rounded-lg border border-gray-300 bg-white px-2 py-1.5 text-sm text-gray-700"
                        >
                            Next
                        </button>
                    </div>
                </nav>
            </div>
        </div>

        <div class="text-sm text-gray-600 dark:text-gray-400 mt-2">
            <span x-text="`Selected: ${selectedIds.length} user(s)`"></span>
        </div>
    </div>
</div> -->