@extends('admin.layouts.app')

@section('content')
<div class="row">
    <div class="col-xl-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between bg-galaxy-transparent">
            <h4 class="mb-sm-0">{{ __('admin/users.title') }}</h4>
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="javascript: void(0);">{{ __('admin/users.breadcrumb.users') }}</a></li>
                    <li class="breadcrumb-item active">{{ __('admin/users.breadcrumb.management') }}</li>
                </ol>
            </div>
        </div>

        <!-- Stats Cards -->
        <div class="row mb-4">
            <div class="col-xl-3 col-md-6">
                <div class="card card-animate">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1 overflow-hidden">
                                <p class="text-uppercase fw-medium text-muted text-truncate mb-0">{{ __('admin/users.stats.total_users') }}</p>
                                <div class="d-flex align-items-center">
                                    <h4 class="fw-semibold mb-0">{{ $stats['total'] }}</h4>
                                </div>
                            </div>
                            <div class="flex-shrink-0">
                                <div class="avatar-sm">
                                    <span class="avatar-title bg-primary-subtle rounded fs-3">
                                        <i class="ri-group-line text-primary"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-md-6">
                <div class="card card-animate">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1 overflow-hidden">
                                <p class="text-uppercase fw-medium text-muted text-truncate mb-0">{{ __('admin/users.stats.with_email') }}</p>
                                <div class="d-flex align-items-center">
                                    <h4 class="fw-semibold mb-0">{{ $stats['with_email'] }}</h4>
                                </div>
                            </div>
                            <div class="flex-shrink-0">
                                <div class="avatar-sm">
                                    <span class="avatar-title bg-success-subtle rounded fs-3">
                                        <i class="ri-mail-line text-success"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-md-6">
                <div class="card card-animate">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1 overflow-hidden">
                                <p class="text-uppercase fw-medium text-muted text-truncate mb-0">{{ __('admin/users.stats.newsletter') }}</p>
                                <div class="d-flex align-items-center">
                                    <h4 class="fw-semibold mb-0">{{ $stats['newsletter_subscribed'] }}</h4>
                                </div>
                            </div>
                            <div class="flex-shrink-0">
                                <div class="avatar-sm">
                                    <span class="avatar-title bg-info-subtle rounded fs-3">
                                        <i class="ri-notification-line text-info"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-md-6">
                <div class="card card-animate">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1 overflow-hidden">
                                <p class="text-uppercase fw-medium text-muted text-truncate mb-0">{{ __('admin/users.stats.with_registrations') }}</p>
                                <div class="d-flex align-items-center">
                                    <h4 class="fw-semibold mb-0">{{ $stats['with_registrations'] }}</h4>
                                </div>
                            </div>
                            <div class="flex-shrink-0">
                                <div class="avatar-sm">
                                    <span class="avatar-title bg-warning-subtle rounded fs-3">
                                        <i class="ri-bookmark-line text-warning"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Content -->
        <div class="card">
            <div class="card-header sticky-menu-bar">
                <div class="row align-items-center">
                    <div class="col">
                        <h4 class="card-title mb-0">{{ __('admin/users.page_titles.list') }}</h4>
                        <span id="users-count"></span>
                    </div>
                    <div class="col-auto">
                        <div class="d-flex gap-2">
                            @can('users.delete')
                            <button class="btn btn-soft-danger material-shadow-none" id="remove-actions" onclick="deleteMultiple()" style="display: none;">
                                <i class="ri-delete-bin-2-line"></i> {{ __('admin/users.actions.delete_selected') }} <span id="selected-count" class="badge bg-danger ms-1">0</span>
                            </button>
                            @endcan
                            <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#filterModal">
                                <i class="ri-filter-3-line me-1"></i>{{ __('admin/users.actions.advanced_filters') }}
                            </button>
                            @can('users.create')
                            <a href="{{ route('admin.users.create') }}" class="btn btn-success">
                                <i class="ri-add-line me-1"></i>{{ __('admin/users.actions.new_user') }}
                            </a>
                            @endcan
                            <button type="button" class="btn btn-info" id="exportCsvBtn">
                                <i class="ri-download-line me-1"></i>{{ __('admin/users.actions.export') }}
                            </button>
                            <button type="button" class="btn btn-soft-dark" id="refreshBtn" title="{{ __('admin/users.actions.refresh') }}" data-bs-toggle="tooltip" data-bs-placement="top">
                                <i class="ri-refresh-line"></i>
                            </button>

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

            <!-- Filtres principaux -->
            <div class="card-body border-bottom">
                <!-- Filtre par formation -->
                <div class="row g-3 mb-3">
                    <div class="col-md-4">
                        <label class="form-label fw-medium">{{ __('admin/users.filters.user_search') }}</label>
                        <div class="position-relative">
                            <input type="text" class="form-control" id="searchInput" placeholder="{{ __('admin/users.placeholders.search') }}" autocomplete="off">
                            <span class="position-absolute top-50 end-0 translate-middle-y pe-3">
                                <i class="ri-search-line text-muted"></i>
                            </span>
                        </div>
                        <small class="text-muted">{{ __('admin/users.help.search_realtime') }}</small>
                    </div>
                    
                    <div class="col-md-4">
                        <label class="form-label fw-medium">{{ __('admin/users.filters.by_training') }}</label>
                        <select class="form-select" id="trainingFilter">
                            <option value="">{{ __('admin/users.filters.all_trainings') }}</option>
                            @foreach($trainings as $training)
                            <option value="{{ $training->id }}">{{ $training->translate()->title }}</option>
                            @endforeach
                        </select>
                        <small class="text-muted">{{ __('admin/users.help.training_filter_help') }}</small>
                    </div>
                    

                    <div class="col-md-4">
                        <label class="form-label fw-medium">{{ __('admin/users.filters.reset') }}</label>
                        <div>
                            <button type="button" class="btn btn-light w-100" onclick="resetFilters()">
                                <i class="ri-refresh-line me-1"></i>{{ __('admin/users.actions.clear_all') }}
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Index alphabétique -->
                <div class="row">
                    <div class="col-12 text-center mt-3">
                        <label class="form-label fw-medium">{{ __('admin/users.filters.alphabet_index') }}</label>
                        <div class="d-flex flex-wrap gap-1 mb-2 justify-content-center" id="alphabet-filter">
                            @foreach(range('A', 'Z') as $letter)
                            <button type="button" class="btn btn-outline-secondary btn-sm alphabet-btn" data-letter="{{ $letter }}">
                                {{ $letter }}
                            </button>
                            @endforeach
                            <button type="button" class="btn btn-outline-secondary btn-sm alphabet-btn" data-letter="0-9">
                                0-9
                            </button>
                        </div>
                        <small class="text-muted">{{ __('admin/users.help.alphabet_help') }}</small>
                    </div>
                </div>
            </div>

            <!-- Table Content -->
            <div class="card-body">
                <div id="users-table-container">
                    <!-- État initial -->
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Filtres avancés -->
<div class="modal fade" id="filterModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ __('admin/users.actions.advanced_filters') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="advancedFiltersForm">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">{{ __('admin/users.filters.email_status') }}</label>
                            <select class="form-select" name="has_email">
                                <option value="">{{ __('admin/users.filters.all') }}</option>
                                <option value="yes">{{ __('admin/users.filters.with_email') }}</option>
                                <option value="no">{{ __('admin/users.filters.without_email') }}</option>
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">{{ __('admin/users.filters.newsletter_status') }}</label>
                            <select class="form-select" name="newsletter">
                                <option value="">{{ __('admin/users.filters.all') }}</option>
                                <option value="yes">{{ __('admin/users.filters.subscribed') }}</option>
                                <option value="no">{{ __('admin/users.filters.not_subscribed') }}</option>
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">{{ __('admin/users.filters.registrations_status') }}</label>
                            <select class="form-select" name="has_registrations">
                                <option value="">{{ __('admin/users.filters.all') }}</option>
                                <option value="yes">{{ __('admin/users.filters.with_registrations') }}</option>
                                <option value="no">{{ __('admin/users.filters.without_registrations') }}</option>
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">{{ __('admin/users.filters.advanced_search') }}</label>
                            <input type="text" class="form-control" name="search_advanced" placeholder="{{ __('admin/users.placeholders.advanced_search') }}">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ __('admin/users.actions.cancel') }}</button>
                <button type="button" class="btn btn-primary" onclick="applyAdvancedFilters()">{{ __('admin/users.actions.apply_filters') }}</button>
            </div>
        </div>
    </div>
</div>

<!-- Delete modal -->
<x-admin.delete-modal
    item-type="{{ __('admin/users.status.this_user') }}"
    confirm-text="{{ __('admin/users.modals.delete_confirm') }}"
    delete-text="{{ __('admin/users.actions.delete') }}" />

<!-- Composant toast global -->
<x-admin.toast-messages />    

@endsection

@push('style')
<style>
    /* .btn-refreshing .ri-refresh-line {
        animation: spin 0.6s linear infinite;
    }
    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    } */
</style>
@endpush

@push('script')
<script>
    let currentFilters = {};

    document.addEventListener('DOMContentLoaded', function() {
        setupEventListeners();
        loadInitialData();
    });

    function setupEventListeners() {
        // Search input avec debouncing
        let searchTimeout;
        const searchInput = document.getElementById('searchInput');
        
        if (searchInput) {
            searchInput.addEventListener('input', function() {
                clearTimeout(searchTimeout);
                searchTimeout = setTimeout(() => {
                    currentFilters.search = this.value;
                    clearOtherFilters(['search']);
                    loadUsers();
                }, 300);
            });
        }

        // Training filter
        const trainingFilter = document.getElementById('trainingFilter');
        if (trainingFilter) {
            trainingFilter.addEventListener('change', function() {
                currentFilters.training = this.value;
                clearOtherFilters(['training']);
                loadUsers();
            });
        }

        // Alphabet filter
        document.querySelectorAll('.alphabet-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const letter = this.dataset.letter;
                
                // Visual feedback
                document.querySelectorAll('.alphabet-btn').forEach(b => b.classList.remove('active'));
                this.classList.add('active');
                
                currentFilters.letter = letter;
                clearOtherFilters(['letter']);
                loadUsers();
            });
        });
    }

    function clearOtherFilters(keepFilters = []) {
        const allFilters = ['search', 'training', 'letter', 'has_email', 'newsletter', 'has_registrations', 'search_advanced'];
        
        allFilters.forEach(filter => {
            if (!keepFilters.includes(filter)) {
                currentFilters[filter] = '';
            }
        });

        // Reset visual states
        if (!keepFilters.includes('search')) {
            const searchInput = document.getElementById('searchInput');
            if (searchInput) searchInput.value = '';
        }
        
        if (!keepFilters.includes('training')) {
            const trainingFilter = document.getElementById('trainingFilter');
            if (trainingFilter) trainingFilter.value = '';
        }
        
        if (!keepFilters.includes('letter')) {
            document.querySelectorAll('.alphabet-btn').forEach(b => b.classList.remove('active'));
        }

        // Reset advanced form
        const advancedForm = document.getElementById('advancedFiltersForm');
        if (advancedForm && !keepFilters.some(f => f.startsWith('search_advanced') || f === 'has_email' || f === 'newsletter' || f === 'has_registrations')) {
            advancedForm.reset();
        }
    }

    function loadUsers() {
        const container = document.getElementById('users-table-container');

        // Vérifier si on a au moins un filtre
        const hasFilters = Object.values(currentFilters).some(value => value && value !== '');

        if (!hasFilters) {
            showInitialState();
            return;
        }

        // Show loading state
        container.innerHTML = `
            <div class="text-center py-5">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">{{ __('admin/users.actions.loading') }}</span>
                </div>
                <p class="mt-2 text-muted">{{ __('admin/users.actions.loading') }} {{ __('admin/users.table.users') }}...</p>
            </div>
        `;

        // Construction des paramètres
        const params = new URLSearchParams();
        Object.keys(currentFilters).forEach(key => {
            if (currentFilters[key]) {
                params.set(key, currentFilters[key]);
            }
        });

        // Cloner pour le fetch, avec ajax=1
        const paramsForFetch = new URLSearchParams(params);
        paramsForFetch.set('ajax', '1');

        // Mettre à jour l'URL visible sans ajax
        const newUrl = window.location.pathname + '?' + params.toString();
        window.history.pushState({ filters: currentFilters }, '', newUrl);

        // Lancer le fetch AJAX
        fetch(`{{ route('admin.users.index') }}?${paramsForFetch.toString()}`, {
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.text();
        })
        .then(html => {
            container.innerHTML = html;
            initializeTableFeatures();
            setupPaginationLinks();
            updateUsersCount();
        })
        .catch(error => {
            console.error('Erreur:', error);
            container.innerHTML = `
                <div class="alert alert-danger">
                    <i class="ri-error-warning-line me-2"></i>
                    {{ __('admin/common.error_loading_data') }}<br>
                    <small>${error.message}</small>
                </div>
            `;
        });
    }

    function showInitialState() {
        const container = document.getElementById('users-table-container');
        container.innerHTML = `
            <div class="text-center py-5" id="initial-state">
                <div class="avatar-lg mx-auto mb-4">
                    <div class="avatar-title bg-primary-subtle text-primary rounded-circle fs-2">
                        <i class="ri-group-line"></i>
                    </div>
                </div>
                <h5 class="text-muted">{{ __('admin/users.initial_states.select_filter_title') }}</h5>
                <p class="text-muted mb-4">
                    {{ __('admin/users.initial_states.select_filter_help') }}<br>
                    {{ __('admin/users.initial_states.filter_by_training') }}<br>
                    {{ __('admin/users.initial_states.search_by_name') }}<br>
                    {{ __('admin/users.initial_states.browse_alphabetically') }}
                </p>
                <div class="d-flex gap-2 justify-content-center flex-wrap">
                    <button type="button" class="btn btn-primary" onclick="setQuickFilter('has_registrations', 'yes')">
                        <i class="ri-bookmark-line me-1"></i>{{ __('admin/users.initial_states.view_all_with_registrations') }}
                    </button>
                    <button type="button" class="btn btn-outline-primary" onclick="setQuickFilter('newsletter', 'yes')">
                        <i class="ri-mail-line me-1"></i>{{ __('admin/users.initial_states.view_newsletter_subscribers') }}
                    </button>
                </div>
            </div>
        `;
    }

    function setQuickFilter(filterType, filterValue) {
        currentFilters = {}; // Reset tous les filtres
        currentFilters[filterType] = filterValue;
        loadUsers();
    }

    function resetFilters() {
        currentFilters = {};
        
        // Reset visual states
        document.getElementById('searchInput').value = '';
        document.getElementById('trainingFilter').value = '';
        document.querySelectorAll('.alphabet-btn').forEach(b => b.classList.remove('active'));
        document.getElementById('advancedFiltersForm').reset();
        
        // Nettoyer l'URL
        window.history.pushState({}, '', window.location.pathname);
        
        // Nettoyer le compteur
        const countElement = document.getElementById('users-count');
        if (countElement) countElement.innerHTML = '';
        
        showInitialState();
    }

    function updateUsersCount() {
        const table = document.getElementById('users-table');
        const countElement = document.getElementById('users-count');
        if (table && countElement) {
            const totalRows = parseInt(table.getAttribute('data-total-rows')) || 0;
            countElement.innerHTML = `<small class="text-primary">(${totalRows} {{ __('admin/users.status.user_count') }})</small>`;
        }
    }

    function setupPaginationLinks() {
        document.querySelectorAll('.pagination a').forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                const url = this.href;
                
                // Extraire les paramètres de la nouvelle page
                const urlObj = new URL(url);
                const params = new URLSearchParams(urlObj.search);
                params.delete('ajax');
                
                // Ajouter nos filtres actuels
                Object.keys(currentFilters).forEach(key => {
                    if (currentFilters[key]) {
                        params.set(key, currentFilters[key]);
                    }
                });
                
                const paramsForFetch = new URLSearchParams(params);
                paramsForFetch.set('ajax', '1');

                loadPageWithParams(params, paramsForFetch);
            });
        });
    }

    function loadPageWithParams(paramsForUrl, paramsForFetch) {
        const container = document.getElementById('users-table-container');

        container.innerHTML = `
            <div class="text-center py-5">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">{{ __('admin/users.actions.loading') }}</span>
                </div>
                <p class="mt-2 text-muted">{{ __('admin/users.actions.loading') }} {{ __('admin/users.table.users') }}...</p>
            </div>
        `;

        // Mettre à jour l'URL (sans ajax=1)
        const newUrl = window.location.pathname + '?' + paramsForUrl.toString();
        window.history.pushState({filters: currentFilters}, '', newUrl);

        return fetch(`{{ route('admin.users.index') }}?${paramsForFetch.toString()}`, {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => response.text())
            .then(html => {
                container.innerHTML = html;
                initializeTableFeatures();
                setupPaginationLinks();
                updateUsersCount();
            })
            .catch(error => {
                console.error('Erreur:', error);
                container.innerHTML = `
                    <div class="alert alert-danger">
                        <i class="ri-error-warning-line me-2"></i>
                        {{ __('admin/common.error_loading_data') }}
                    </div>
                `;
            });
    }

    function initializeTableFeatures() {
        // Reset tooltips
        const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
            tooltipTriggerList.forEach(function(element) {
                const tooltip = bootstrap.Tooltip.getInstance(element);
                if (tooltip) {
                    tooltip.dispose();
                }
            });

            tooltipTriggerList.map(function(tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl);
            });
        }

        // Initialize delete modals
        initializeDeleteUserModals();

        // Initialize checkboxes
        initializeCheckAllBox();
        ischeckboxcheck();
        updateCheckAllState();
        updateRemoveButton();
    }

    function initializeDeleteUserModals() {
        document.querySelectorAll('.open-delete-modal').forEach(function(button) {
            button.addEventListener('click', function() {
                const deleteUrl = this.getAttribute('data-delete-url');
                const itemName = this.getAttribute('data-item-name');
                const itemType = this.getAttribute('data-item-type');

                const modal = document.getElementById('deleteRecordModal');
                if (modal) {
                    const form = modal.querySelector('form');
                    const itemNameElement = modal.querySelector('#item-name-text-deleteRecordModal');
                    const itemTypeElement = modal.querySelector('#item-type-text-deleteRecordModal');

                    if (form) form.action = deleteUrl;
                    if (itemNameElement) itemNameElement.textContent = itemName;
                    if (itemTypeElement) itemTypeElement.textContent = itemType;
                }
            });
        });
    }

    function loadInitialData() {
        const urlParams = new URLSearchParams(window.location.search);
        const hasFilters = Array.from(urlParams.keys()).some(key => 
            key !== 'ajax' && key !== 'page' && urlParams.get(key)
        );

        if (hasFilters) {
            restoreFiltersAndLoad();
        } else {
            showInitialState();
        }
    }

    function restoreFiltersAndLoad() {
        const urlParams = new URLSearchParams(window.location.search);
        
        // Restaurer les filtres depuis l'URL
        const filterKeys = ['search', 'training', 'letter', 'has_email', 'newsletter', 'has_registrations', 'search_advanced'];
        
        filterKeys.forEach(key => {
            const value = urlParams.get(key);
            if (value !== null) {
                currentFilters[key] = value;
            }
        });

        // Restaurer l'état visuel
        if (currentFilters.search) {
            document.getElementById('searchInput').value = currentFilters.search;
        }
        
        if (currentFilters.training) {
            document.getElementById('trainingFilter').value = currentFilters.training;
        }
        
        if (currentFilters.letter) {
            const letterBtn = document.querySelector(`[data-letter="${currentFilters.letter}"]`);
            if (letterBtn) letterBtn.classList.add('active');
        }

        // Restaurer le formulaire avancé
        const advancedForm = document.getElementById('advancedFiltersForm');
        if (advancedForm) {
            ['has_email', 'newsletter', 'has_registrations', 'search_advanced'].forEach(key => {
                if (currentFilters[key]) {
                    const input = advancedForm.elements[key];
                    if (input) input.value = currentFilters[key];
                }
            });
        }

        loadUsers();
    }

    function applyAdvancedFilters() {
        const form = document.getElementById('advancedFiltersForm');
        const formData = new FormData(form);

        // Nettoyer les autres filtres
        clearOtherFilters(['has_email', 'newsletter', 'has_registrations', 'search_advanced']);

        // Traiter tous les filtres avancés
        for (let [key, value] of formData.entries()) {
            currentFilters[key] = value;
        }

        // Si search_advanced est utilisé, le mapper vers search
        if (currentFilters.search_advanced) {
            currentFilters.search = currentFilters.search_advanced;
        }

        loadUsers();
        
        const modal = bootstrap.Modal.getInstance(document.getElementById('filterModal'));
        if (modal) {
            modal.hide();
        }
    }

    // Export CSV
    document.getElementById('exportCsvBtn').addEventListener('click', function () {
        const button = this;
        const originalContent = button.innerHTML;

        button.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status"></span> {{ __("admin.users.actions.generate") }}...';
        button.disabled = true;

        const params = new URLSearchParams();
        Object.keys(currentFilters).forEach(key => {
            if (currentFilters[key]) {
                params.append(key, currentFilters[key]);
            }
        });

        const downloadToken = 'dl_' + Date.now();
        params.append('download_token', downloadToken);

        fetch(`{{ route('admin.users.export') }}?${params.toString()}`, {
            method: 'GET',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error: ${response.status}`);
            }

            const disposition = response.headers.get('Content-Disposition');
            let filename = 'utilisateurs.csv';
            if (disposition && disposition.includes('filename=')) {
                const match = disposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
                if (match != null) {
                    filename = match[1].replace(/['"]/g, '');
                }
            }

            return response.blob().then(blob => ({ blob, filename }));
        })
        .then(({ blob, filename }) => {
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = filename;
            document.body.appendChild(a);
            a.click();
            a.remove();
            window.URL.revokeObjectURL(url);
        })
        .catch(error => {
            console.error('Erreur export CSV :', error);
            alert("{{ __('admin/common.export_error') }}");
        })
        .finally(() => {
            button.innerHTML = originalContent;
            button.disabled = false;
        });
    });

    // Refresh button
    document.getElementById('refreshBtn').addEventListener('click', function() {
        const btn = this;
        const icon = btn.querySelector('i');

        // btn.classList.add('btn-refreshing');
        btn.disabled = true;

        const urlParams = new URLSearchParams(window.location.search);
        urlParams.delete('ajax');

        currentFilters = {};
        urlParams.forEach((value, key) => {
            if (key !== 'page') {
                currentFilters[key] = value;
            }
        });

        const paramsForFetch = new URLSearchParams(urlParams);
        paramsForFetch.set('ajax', '1');

        const hasFilters = Object.keys(currentFilters).length > 0;

        if (!hasFilters) {
            // btn.classList.remove('btn-refreshing');
            btn.disabled = false;
            return;
        }

        loadPageWithParams(urlParams, paramsForFetch).finally(() => {
            // btn.classList.remove('btn-refreshing');
            btn.disabled = false;
        });
    });

    // Gérer le bouton retour du navigateur
    window.addEventListener('popstate', function(event) {
        if (event.state && event.state.filters) {
            currentFilters = event.state.filters;
            restoreFiltersAndLoad();
        } else {
            resetFilters();
        }
    });

    function ischeckboxcheck() {
        Array.from(document.getElementsByName("chk_child")).forEach(function(checkbox) {
            checkbox.addEventListener("change", function(e) {
                if (checkbox.checked) {
                    e.target.closest("tr").classList.add("table-active");
                } else {
                    e.target.closest("tr").classList.remove("table-active");
                }
                updateCheckAllState();
                updateRemoveButton();
            });
        });
    }

    function updateCheckAllState() {
        var totalCheckboxes = document.querySelectorAll('input[name="chk_child"]:not(:disabled)').length;
        var checkedCheckboxes = document.querySelectorAll('input[name="chk_child"]:checked').length;
        var checkAllBox = document.getElementById('checkAll');

        if (checkAllBox) {
            checkAllBox.checked = totalCheckboxes === checkedCheckboxes && totalCheckboxes > 0;
            checkAllBox.indeterminate = checkedCheckboxes > 0 && checkedCheckboxes < totalCheckboxes;
        }
    }

    function updateRemoveButton() {
        var checkedCount = document.querySelectorAll('input[name="chk_child"]:checked').length;
        var removeButton = document.getElementById('remove-actions');
        var countBadge = document.getElementById('selected-count');

        if (removeButton) {
            removeButton.style.display = checkedCount > 0 ? "block" : "none";
        }

        if (countBadge) {
            countBadge.textContent = checkedCount;
        }
    }

    function deleteMultiple() {
        var selectedIds = [];
        var selectedNames = [];

        document.querySelectorAll('input[name="chk_child"]:checked').forEach(function(checkbox) {
            selectedIds.push(checkbox.value);
            var row = checkbox.closest('tr');
            var nameCell = row.querySelector('h6');
            if (nameCell) {
                selectedNames.push(nameCell.textContent.trim());
            }
        });

        if (selectedIds.length === 0) {
            alert('{{ __("admin/users.messages.select_at_least_one") }}');
            return;
        }

        var modal = document.getElementById('deleteRecordModal');
        if (modal) {
            var itemText = selectedIds.length + ' {{ __("admin/users.messages.users_count") }}';
            var confirmText = '{{ __("admin/users.messages.delete_multiple_confirm") }}' + selectedIds.length + ' {{ __("admin/users.messages.users") }}';

            modal.querySelector('#item-name-text-deleteRecordModal').textContent = selectedNames.join(', ');
            modal.querySelector('#item-type-text-deleteRecordModal').textContent = itemText;
            modal.querySelector('.modal-body p').textContent = confirmText;
            modal.querySelector('form').setAttribute('action', '{{ route("admin.users.destroy-multiple") }}');
            modal.querySelector('form').setAttribute('method', 'POST');

            modal.querySelectorAll('input[name="ids[]"]').forEach(el => el.remove());
            selectedIds.forEach(function(id) {
                var input = document.createElement('input');
                input.type = 'hidden';
                input.name = 'ids[]';
                input.value = id;
                modal.querySelector('form').appendChild(input);
            });

            var bootstrapModal = new bootstrap.Modal(modal);
            bootstrapModal.show();
        }
    }

    function initializeCheckAllBox() {
        var checkAllBox = document.getElementById('checkAll');
        if (checkAllBox) {
            checkAllBox.removeEventListener('click', handleCheckAllClick);
            checkAllBox.addEventListener('click', handleCheckAllClick);
        }
    }

    function handleCheckAllClick() {
        var isChecked = this.checked;
        document.querySelectorAll('input[name="chk_child"]:not(:disabled)').forEach(function(checkbox) {
            checkbox.checked = isChecked;
            if (isChecked) {
                checkbox.closest("tr").classList.add("table-active");
            } else {
                checkbox.closest("tr").classList.remove("table-active");
            }
        });
        updateRemoveButton();
    }

    document.addEventListener('DOMContentLoaded', function() {
        initializeCheckAllBox();

        var deleteModal = document.getElementById('deleteRecordModal');
        if (deleteModal) {
            deleteModal.addEventListener('hidden.bs.modal', function() {
                var modal = this;
                modal.querySelectorAll('input[name="ids[]"]').forEach(el => el.remove());
                modal.querySelector('.modal-body p').textContent = '{{ __("admin/users.modals.delete_confirm") }}';
                modal.querySelector('#item-name-text-deleteRecordModal').textContent = '';
                modal.querySelector('#item-type-text-deleteRecordModal').textContent = '';
            });
        }
    });
</script>
@endpush