@extends('admin.layouts.app')

@push('css')
<style>
    .registration-stat-card--clickable {
        cursor: pointer;
        transition: box-shadow 0.2s ease, transform 0.15s ease;
    }
    .registration-stat-card--clickable:hover {
        box-shadow: 0 0.35rem 1rem rgba(33, 37, 41, 0.12);
    }
    .registration-stat-card--clickable:focus {
        outline: 2px solid var(--vz-primary, #405189);
        outline-offset: 2px;
    }
</style>
@endpush

@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/registrations.titles.management') }}</h4>
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="javascript: void(0);">{{ __('admin/registrations.navigation.registrations') }}</a></li>
                    <li class="breadcrumb-item active">{{ __('admin/registrations.navigation.management') }}</li>
                </ol>
            </div>
        </div>

        <!-- Stats Cards using enum -->
        @php
        $statusCards = [
        \App\Enums\RegistrationStatusEnum::PENDING,
        \App\Enums\RegistrationStatusEnum::PENDING_CANCELLATION,
        \App\Enums\RegistrationStatusEnum::CONFIRMED,
        \App\Enums\RegistrationStatusEnum::CANCELLED,
        ];
        @endphp

        <div class="row mb-4 gy-0">
            @foreach($statusCards as $status)
            <div class="col-xl-3 col-md-6">
                <div class="card card-animate registration-stat-card--clickable"
                     role="button"
                     tabindex="0"
                     title="{{ __('admin/registrations.messages.stat_card_filter_hint', ['status' => $status->label()]) }}"
                     onclick="setFilter('status', '{{ $status->value }}')"
                     onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();setFilter('status','{{ $status->value }}');}">
                    <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">{{ $status->label() }}</p>
                                <div class="d-flex align-items-center">
                                    <h4 class="fw-semibold mb-0" id="{{ $status->value }}-count">{{ $stats[$status->value] ?? 0 }}</h4>
                                </div>
                            </div>
                            <div class="flex-shrink-0">
                                <div class="avatar-sm">
                                    <span class="avatar-title {{ $status->avatarClass() }} rounded fs-3">
                                        <i class="{{ $status->icon() }} {{ $status->iconColorClass() }}"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach

            <!-- total card -->
            <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/registrations.stats.total') }}</p>
                                <div class="d-flex align-items-center">
                                    <h4 class="fw-semibold mb-0" id="total-count">{{ $stats['total'] ?? 0 }}</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>

        <!-- 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/registrations.titles.list') }}</h4>
                        <span id="registrations-count"></span>
                    </div>
                    <div class="col-auto">
                        <div class="d-flex gap-2">
                            <div id="bulkActions" style="display: none;">
                                <span class="text-muted small" id="selectedCount">{{ __('admin/registrations.bulk.selected_count', ['count' => '0']) }}</span>
                                <div class="vr"></div>

                                @can('registrations.delete')
                                <button class="btn btn-danger" onclick="bulkDelete()">
                                    <i class="ri-delete-bin-line me-1"></i>{{ __('admin/registrations.buttons.delete') }}
                                </button>
                                @endcan

                                <button class="btn btn-light" onclick="clearSelection()">
                                    <i class="ri-close-line"></i>
                                </button>
                            </div>

                            <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/registrations.buttons.advanced_filters') }}
                            </button>
                            @can('registrations.create')
                            <a href="{{ route('admin.registrations.create') }}" class="btn btn-success">
                                <i class="ri-add-line me-1"></i>{{ __('admin/registrations.buttons.new_registration') }}
                            </a>
                            @endcan

                            <button type="button" class="btn btn-info" id="exportCsvBtn">
                                <i class="ri-download-line me-1"></i>{{ __('admin/registrations.buttons.export') }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Quick Filters -->
            <div class="card-body border-bottom">
                <div class="row g-3">
                    <div class="col-md-3">
                        <div class="position-relative">
                            <input type="text" class="form-control" id="searchInput" placeholder="{{ __('admin/registrations.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>
                        <!-- <div class="input-group">
                            <input type="text" class="form-control" id="searchInput" placeholder="{{ __('admin/registrations.placeholders.search') }}" autocomplete="off">
                            <span class="input-group-text">
                                <i class="ri-search-line"></i>
                            </span>
                        </div> -->
                    </div>

                    <div class="col-md-3">
                        <select class="form-select" id="trainingFilter">
                            <option value="">{{ __('admin/registrations.filters.select_training_required') }}</option>
                            @foreach($trainings as $training)
                            <option value="{{ $training->id }}">{{ $training->translate()->title }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <select class="form-select" id="sessionFilter" disabled>
                            <option value="">{{ __('admin/registrations.filters.select_session_required') }}</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <select class="form-select" id="statusFilter">
                            <option value="">{{ __('admin/registrations.filters.all_statuses') }}</option>
                            <option value="pending">{{ __('admin/registrations.statuses.pending') }}</option>
                            <option value="pending_cancellation">{{ __('admin/registrations.statuses.pending_cancellation') }}</option>
                            <option value="confirmed">{{ __('admin/registrations.statuses.confirmed') }}</option>
                            <option value="cancelled">{{ __('admin/registrations.statuses.cancelled') }}</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <button type="button" class="btn btn-light w-100" onclick="resetFilters()">
                            <i class="ri-refresh-line me-1"></i>{{ __('admin/registrations.buttons.reset') }}
                        </button>
                    </div>
                </div>
                <div class="row mt-2">
                    <div class="col-12">
                        <small class="text-muted">
                            <i class="ri-information-line me-1"></i>
                            {{ __('admin/registrations.help.select_training_session') }}
                        </small>
                    </div>
                </div>
            </div>

            <!-- Table Content -->
            <div class="card-body">
                <div id="registrations-table-container">
                    <!-- initial display without data -->
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Advanced Filters -->
<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/registrations.modals.advanced_filters.title') }}</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/registrations.filters.registration_status') }}</label>
                            <select class="form-select" name="status_advanced">
                                <option value="">{{ __('admin/registrations.filters.all_statuses') }}</option>
                                <option value="pending">{{ __('admin/registrations.statuses.pending') }}</option>
                                <option value="pending_cancellation">{{ __('admin/registrations.statuses.pending_cancellation') }}</option>
                                <option value="confirmed">{{ __('admin/registrations.statuses.confirmed') }}</option>
                                <option value="cancelled">{{ __('admin/registrations.statuses.cancelled') }}</option>
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">{{ __('admin/registrations.filters.sessions') }}</label>
                            <select class="form-select" name="session_filter_type">
                                <option value="future">{{ __('admin/registrations.filters.future_sessions_only') }}</option>
                                <option value="all">{{ __('admin/registrations.filters.all_sessions') }}</option>
                                <option value="past">{{ __('admin/registrations.filters.past_sessions_only') }}</option>
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">{{ __('admin/registrations.filters.registration_date_from') }}</label>
                            <input type="date" class="form-control" name="date_from">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">{{ __('admin/registrations.filters.registration_date_to') }}</label>
                            <input type="date" class="form-control" name="date_to">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">{{ __('admin/registrations.filters.payment_method') }}</label>
                            <select class="form-select" name="payment_method">
                                <option value="">{{ __('admin/registrations.filters.all_payment_methods') }}</option>
                                <option value="online">{{ __('admin/registrations.payment_methods.online') }}</option>
                                <option value="virement">{{ __('admin/registrations.payment_methods.transfer') }}</option>
                                <option value="cheques">{{ __('admin/registrations.payment_methods.training_vouchers') }}</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">{{ __('admin/registrations.filters.minimum_amount') }}</label>
                            <input type="number" class="form-control" name="amount_min" step="0.01">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">{{ __('admin/registrations.filters.maximum_amount') }}</label>
                            <input type="number" class="form-control" name="amount_max" step="0.01">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">{{ __('admin/registrations.filters.training_location') }}</label>
                            <select class="form-select" name="location_id">
                                <option value="">{{ __('admin/registrations.filters.all_locations') }}</option>
                                @foreach($locations ?? [] as $location)
                                <option value="{{ $location->id }}">{{ $location->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ __('admin/registrations.buttons.cancel') }}</button>
                <button type="button" class="btn btn-primary" onclick="applyAdvancedFilters()">{{ __('admin/registrations.buttons.apply_filters') }}</button>
            </div>
        </div>
    </div>
</div>

<!-- update cheques modal -->
<x-admin.update-cheques-modal />

<!-- confirmation modal -->
<x-admin.registration-confirmation-modal />

<!-- Modal de rappel -->
<x-admin.registration-reminder-modal />

<!-- Delete modal -->
<x-admin.delete-modal
    item-type="{{ __('admin/registrations.messages.this_registration') }}"
    confirm-text="{{ __('admin/registrations.messages.delete_registration_confirm') }}"
    delete-text="{{ __('admin/registrations.buttons.delete') }}" />

<x-admin.registration-cancellation-action-modal />

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

@push('script')

<script>
    let currentFilters = {};
    let selectedRegistrations = new Set();

    document.addEventListener('DOMContentLoaded', function() {
        setupEventListeners();
        setupChequeReferenceCopyListener();
        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;
                    clearAdvancedFilters();
                    loadRegistrations();
                }, 300);
            });
        }

        // Status filter
        const statusFilter = document.getElementById('statusFilter');
        if (statusFilter) {
            statusFilter.addEventListener('change', function() {
                currentFilters.status = this.value;
                clearAdvancedFilters();
                loadRegistrations();
            });
        }

        // Training filter
        const trainingFilter = document.getElementById('trainingFilter');
        if (trainingFilter) {
            trainingFilter.addEventListener('change', function() {
                currentFilters.training = this.value;
                clearAdvancedFilters();
                loadSessionsFuture();
                
                // Reset session filter when changing training
                currentFilters.session = '';
                const sessionSelect = document.getElementById('sessionFilter');
                if (sessionSelect) {
                    sessionSelect.value = '';
                }
                
                if (!currentFilters.session) {
                    showInitialState();
                }
            });
        }

        // Session filter
        const sessionFilter = document.getElementById('sessionFilter');
        if (sessionFilter) {
            sessionFilter.addEventListener('change', function() {
                currentFilters.session = this.value;
                clearAdvancedFilters();
                loadRegistrations();
            });
        }

        // Auto-hide alerts
        setTimeout(() => {
            document.querySelectorAll('.alert').forEach(alert => {
                if (alert.querySelector('.btn-close')) {
                    alert.style.transition = 'opacity 0.5s';
                    alert.style.opacity = '0';
                    setTimeout(() => alert.remove(), 500);
                }
            });
        }, 3000);
    }

    function clearAdvancedFilters() {
        const advancedFilterKeys = ['status_advanced', 'session_filter_type', 'date_from', 'date_to', 'payment_method', 'amount_min', 'amount_max', 'location_id'];
        
        advancedFilterKeys.forEach(key => {
            currentFilters[key] = '';
        });

        const advancedForm = document.getElementById('advancedFiltersForm');
        if (advancedForm) {
            advancedForm.reset();
        }
    }

    function clearQuickFilters() {
        currentFilters.search = '';
        currentFilters.status = '';
        currentFilters.training = '';
        currentFilters.session = '';

        const searchInput = document.getElementById('searchInput');
        const statusFilter = document.getElementById('statusFilter');
        const trainingFilter = document.getElementById('trainingFilter');
        const sessionFilter = document.getElementById('sessionFilter');

        if (searchInput) searchInput.value = '';
        if (statusFilter) statusFilter.value = '';
        if (trainingFilter) trainingFilter.value = '';
        if (sessionFilter) {
            sessionFilter.value = '';
            sessionFilter.disabled = true;
        }
    }

    function restoreFiltersFromURL() {
        const urlParams = new URLSearchParams(window.location.search);
        const advancedForm = document.getElementById('advancedFiltersForm');

        const searchInput = document.getElementById('searchInput');
        const statusFilter = document.getElementById('statusFilter');
        const trainingFilter = document.getElementById('trainingFilter');
        const sessionFilter = document.getElementById('sessionFilter');

        if (urlParams.get('search')) {
            if (searchInput) searchInput.value = urlParams.get('search');
            currentFilters.search = urlParams.get('search');
        }

        if (urlParams.get('status')) {
            if (statusFilter) statusFilter.value = urlParams.get('status');
            currentFilters.status = urlParams.get('status');
        }

        if (urlParams.get('training')) {
            if (trainingFilter) trainingFilter.value = urlParams.get('training');
            currentFilters.training = urlParams.get('training');
            loadSessionsFuture();
        }

        if (urlParams.get('session')) {
            setTimeout(() => {
                if (sessionFilter) sessionFilter.value = urlParams.get('session');
                currentFilters.session = urlParams.get('session');
            }, 400);
        }

        const advancedKeys = ['status_advanced', 'session_filter_type', 'date_from', 'date_to', 'payment_method', 'amount_min', 'amount_max', 'location_id'];

        advancedKeys.forEach(key => {
            const value = urlParams.get(key);
            if (value !== null) {
                currentFilters[key] = value;

                const input = advancedForm?.elements[key];
                if (input) input.value = value;
            }
        });
    }

    function restoreFiltersAndLoad() {
        restoreFiltersFromURL();

        const urlParams = new URLSearchParams(window.location.search);
        if (urlParams.get('training') && urlParams.get('session')) {
            setTimeout(() => {
                loadRegistrations();
            }, 400);
        } else {
            loadRegistrations();
        }
    }        

    function loadSessionsFuture() {
        const trainingId = currentFilters.training;
        const sessionSelect = document.getElementById('sessionFilter');

        if (!trainingId) {
            sessionSelect.innerHTML = '<option value="">{{ __("admin/registrations.filters.select_session_required") }}</option>';
            sessionSelect.disabled = true;
            return;
        }

        sessionSelect.innerHTML = '<option value="">{{ __("admin/registrations.messages.loading") }}...</option>';
        sessionSelect.disabled = true;

        fetch(`{{ route('admin.registrations.sessions') }}?training_id=${trainingId}&future_only=1`)
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.json();
            })
            .then(sessions => {
                let options = '<option value="">{{ __("admin/registrations.filters.select_session_required") }}</option>';
                sessions.forEach(session => {
                    options += `<option value="${session.id}">${session.name}`;
                    if (session.start_date) {
                        options += ` - ${new Date(session.start_date).toLocaleDateString('fr-FR')}`;
                    }
                    options += '</option>';
                });
                sessionSelect.innerHTML = options;
                sessionSelect.disabled = false;
                
                const urlParams = new URLSearchParams(window.location.search);
                if (urlParams.get('session')) {
                    sessionSelect.value = urlParams.get('session');
                    currentFilters.session = urlParams.get('session');
                }
            })
            .catch(error => {
                console.error('Erreur complète:', error);
                sessionSelect.innerHTML = '<option value="">{{ __("admin/registrations.messages.loading_error") }}</option>';
                sessionSelect.disabled = false;
            });
    }

    function loadRegistrations() {
        const container = document.getElementById('registrations-table-container');

        const quickFilters = {
            search: currentFilters.search,
            status: currentFilters.status,
            training: currentFilters.training,
            session: currentFilters.session
        };

        const advancedFilters = {
            status_advanced: currentFilters.status_advanced,
            session_filter_type: currentFilters.session_filter_type,
            date_from: currentFilters.date_from,
            date_to: currentFilters.date_to,
            payment_method: currentFilters.payment_method,
            amount_min: currentFilters.amount_min,
            amount_max: currentFilters.amount_max,
            location_id: currentFilters.location_id
        };

        const hasQuickFilters = Object.values(quickFilters).some(value => value && value !== '');
        const hasAdvancedFilters = Object.values(advancedFilters).some(value => value && value !== '');

        if (hasQuickFilters && !hasAdvancedFilters) {
            const hasTrainingAndSession = quickFilters.training && quickFilters.session;
            const hasSearchOrStatus = quickFilters.search || quickFilters.status;

            if (quickFilters.training && !quickFilters.session && !hasSearchOrStatus) {
                showInitialState();
                return;
            }

            if (!hasTrainingAndSession && !hasSearchOrStatus) {
                showInitialState();
                return;
            }
        }

        if (!hasQuickFilters && !hasAdvancedFilters) {
            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/registrations.messages.loading') }}</span>
                </div>
                <p class="mt-2 text-muted">{{ __('admin/registrations.messages.loading_registrations') }}...</p>
            </div>
        `;

        if (currentFilters.search || currentFilters.status || currentFilters.training || currentFilters.session) {
            currentFilters.page = 1;
        }

        delete currentFilters.page;

        const params = new URLSearchParams();

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

        Object.keys(currentFilters).forEach(key => {
            if (currentFilters[key]) {
                params.set(key, currentFilters[key]);
            }
        });

        if (currentFilters.page) {
            params.set('page', currentFilters.page);
        }

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

        const newUrl = window.location.pathname + '?' + params.toString();
        window.history.pushState({ filters: currentFilters }, '', newUrl);

        fetch(`{{ route('admin.registrations.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();
            updateRegistrationsCount();
        })
        .catch(error => {
            console.error('Erreur:', error);
            container.innerHTML = `
                <div class="alert alert-danger">
                    <i class="ri-error-warning-line me-2"></i>
                    {{ __('admin/registrations.messages.data_loading_error') }}<br>
                    <small>${error.message}</small>
                </div>
            `;
        });
    }

    
    function updateRegistrationsCount() {
        const table = document.getElementById('registrations-table');
        const countElement = document.getElementById('registrations-count');
        const totalRows = parseInt(table.getAttribute('data-total-rows')) || 0;
        countElement.innerHTML = `<small class="text-primary">(${totalRows} {{ __('admin/registrations.messages.found') }})</small>`;
    }

    function setupPaginationLinks() {
        document.querySelectorAll('.pagination a').forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                const url = this.href;
                
                const urlObj = new URL(url);
                const params = new URLSearchParams(urlObj.search);
                params.delete('ajax');
                
                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('registrations-table-container');

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

        const newUrl = window.location.pathname + '?' + paramsForUrl.toString();
        window.history.pushState({filters: currentFilters}, '', newUrl);

        fetch(`{{ route('admin.registrations.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();
                updateRegistrationsCount();
            })
            .catch(error => {
                console.error('Erreur:', error);
                container.innerHTML = `
                    <div class="alert alert-danger">
                        <i class="ri-error-warning-line me-2"></i>
                        {{ __('admin/registrations.messages.data_loading_error') }}
                    </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);
            });
        }

        initializePopovers();
        initializeCheckboxSelection();
        initializeDeleteRegistrationModals();

        // Initialize reminder and confirmation modals
        initializeModals('reminder');
        initializeModals('confirmation');

        // Initialize update cheques modal
        initializeUpdateChequesModal();        
    }

    function initializePopovers() {
        document.removeEventListener('click', closePopoversOnOutsideClick);

        const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));

        if (typeof bootstrap !== 'undefined' && bootstrap.Popover) {
            popoverTriggerList.forEach(function(element) {
                const popover = bootstrap.Popover.getInstance(element);
                if (popover) {
                    popover.dispose();
                }
            });

            var baseAllowList = (bootstrap.Popover.Default && bootstrap.Popover.Default.allowList)
                ? bootstrap.Popover.Default.allowList
                : null;
            var chequePopoverAllowList = null;
            if (baseAllowList && typeof baseAllowList === 'object') {
                chequePopoverAllowList = {};
                Object.keys(baseAllowList).forEach(function (key) {
                    var vals = baseAllowList[key];
                    chequePopoverAllowList[key] = Array.isArray(vals) ? vals.slice() : vals;
                });
                chequePopoverAllowList.button = ['type', 'class', 'title', 'data-ref'];
            }

            window.activePopovers = popoverTriggerList.map(function(popoverTriggerEl) {
                var popOpts = {
                    trigger: 'click',
                    container: 'body'
                };
                if (chequePopoverAllowList) {
                    popOpts.allowList = chequePopoverAllowList;
                } else {
                    popOpts.sanitize = false;
                }
                return new bootstrap.Popover(popoverTriggerEl, popOpts);
            });

            document.addEventListener('click', closePopoversOnOutsideClick);
        }
    }

    function closePopoversOnOutsideClick(e) {
        if (window.activePopovers) {
            window.activePopovers.forEach(function(popover) {
                if (!popover._element.contains(e.target) &&
                    !e.target.closest('.popover')) {
                    popover.hide();
                }
            });
        }
    }

    function setupChequeReferenceCopyListener() {
        document.body.addEventListener('click', function(e) {
            var btn = e.target.closest('.copy-cheque-reference');
            if (!btn) {
                return;
            }
            e.preventDefault();
            e.stopPropagation();
            var text = btn.getAttribute('data-ref');
            if (!text) {
                return;
            }

            function showCopiedState() {
                var icon = btn.querySelector('i');
                if (icon) {
                    icon.className = 'ri-check-line fs-14';
                    icon.setAttribute('aria-hidden', 'true');
                }
                window.setTimeout(function() {
                    if (icon) {
                        icon.className = 'ri-file-copy-line fs-14';
                    }
                }, 1500);
            }

            if (navigator.clipboard && navigator.clipboard.writeText) {
                navigator.clipboard.writeText(text).then(showCopiedState).catch(function() {
                    if (fallbackCopyChequeReference(text)) {
                        showCopiedState();
                    }
                });
            } else if (fallbackCopyChequeReference(text)) {
                showCopiedState();
            }
        });
    }

    function fallbackCopyChequeReference(text) {
        try {
            var ta = document.createElement('textarea');
            ta.value = text;
            ta.setAttribute('readonly', 'readonly');
            ta.style.position = 'fixed';
            ta.style.left = '-9999px';
            ta.style.top = '0';
            document.body.appendChild(ta);
            ta.select();
            var ok = document.execCommand('copy');
            document.body.removeChild(ta);
            return ok;
        } catch (err) {
            return false;
        }
    }

    function initializeCheckboxSelection() {
        document.querySelectorAll('.registration-checkbox').forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                if (this.checked) {
                    selectedRegistrations.add(this.value);
                } else {
                    selectedRegistrations.delete(this.value);
                }
                updateBulkActions();
            });
        });

        const selectAllCheckbox = document.getElementById('selectAll');
        if (selectAllCheckbox) {
            selectAllCheckbox.addEventListener('change', function() {
                const checkboxes = document.querySelectorAll('.registration-checkbox');
                checkboxes.forEach(checkbox => {
                    checkbox.checked = this.checked;
                    if (this.checked) {
                        selectedRegistrations.add(checkbox.value);
                    } else {
                        selectedRegistrations.delete(checkbox.value);
                    }
                });
                updateBulkActions();
            });
        }
    }

    function updateBulkActions() {
        const bulkActions = document.getElementById('bulkActions');
        const selectedCount = document.getElementById('selectedCount');

        if (selectedRegistrations.size > 0) {
            bulkActions.style.display = 'block';
            selectedCount.textContent = `${selectedRegistrations.size} {{ __('admin/registrations.bulk.selected') }}`;
        } else {
            bulkActions.style.display = 'none';
        }
    }

    function resetFilters() {
        currentFilters = {};
        resetFilterInputs();
        
        window.history.pushState({}, '', window.location.pathname);
        
        showInitialState();
    }

    function resetFilterInputs() {
        const searchInput = document.getElementById('searchInput');
        const statusFilter = document.getElementById('statusFilter');
        const trainingFilter = document.getElementById('trainingFilter');
        const sessionFilter = document.getElementById('sessionFilter');
        const advancedForm = document.getElementById('advancedFiltersForm');
        const countElement = document.getElementById('registrations-count');
        
        if (searchInput) searchInput.value = '';
        if (statusFilter) statusFilter.value = '';
        if (trainingFilter) trainingFilter.value = '';
        if (sessionFilter) {
            sessionFilter.value = '';
            sessionFilter.disabled = true;
        }
        if (advancedForm) advancedForm.reset();
        if (countElement) countElement.innerHTML = '';
    }

    function showInitialState() {
        const container = document.getElementById('registrations-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-filter-3-line"></i>
                </div>
            </div>
            <h5 class="text-muted">{{ __('admin/registrations.messages.filter_to_see_registrations') }}</h5>
            <p class="text-muted mb-4">
                {!! __('admin/registrations.messages.use_filters_above') !!}
            </p>
            <div class="d-flex gap-2 justify-content-center">
                <button type="button" class="btn btn-primary" onclick="setFilter('status', 'pending', {session_filter_type: 'future'})">
                    <i class="ri-list-check me-1"></i>{{ __('admin/registrations.messages.see_all_pending') }}
                </button>
            </div>
        </div>
    `;
    }

    function setFilter(filterType, filterValue, extraFilters = {}) {
        currentFilters[filterType] = filterValue;

        Object.keys(extraFilters).forEach(key => {
            currentFilters[key] = extraFilters[key];
        });

        if (filterType === 'status') {
            document.getElementById('statusFilter').value = filterValue;
        }

        loadRegistrations();
    }

    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 applyAdvancedFilters() {
        const form = document.getElementById('advancedFiltersForm');
        const formData = new FormData(form);

        clearQuickFilters();

        for (let [key, value] of formData.entries()) {
            if (key === 'status_advanced') {
                currentFilters.status = value;
            } else {
                currentFilters[key] = value;
            }
        }

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

    function bulkDelete() {
        var selectedIds = [];

        document.querySelectorAll('input[name="chk_child"]:checked').forEach(function(checkbox) {
            selectedIds.push(checkbox.value);
        });

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

        var modal = $('#deleteRecordModal');

        if (modal.length) {
            var itemText = selectedIds.length + ' {{ __("admin/registrations.messages.registration_s") }}';
            var confirmText = '{{ __("admin/registrations.messages.delete_multiple_confirm", ["count" => ""]) }}' + selectedIds.length + ' {{ __("admin/registrations.messages.registration_s") }}';

            modal.find('#item-name-text-deleteRecordModal').text('{{ __("admin/registrations.titles.registrations") }}');
            modal.find('#item-type-text-deleteRecordModal').text(itemText);
            modal.find('.modal-body p').text(confirmText);

            modal.find('form').attr('action', '{{ route("admin.registrations.destroy-multiple") }}');
            modal.find('form').attr('method', 'POST');

            modal.find('form').find('input[name="ids[]"]').remove();
            selectedIds.forEach(function(id) {
                var input = $('<input>').attr({
                    type: 'hidden',
                    name: 'ids[]',
                    value: id
                });
                modal.find('form').append(input);
            });

            modal.modal('show');
        }        
    }

    function clearSelection() {
        selectedRegistrations.clear();
        document.querySelectorAll('.registration-checkbox').forEach(cb => cb.checked = false);
        const selectAllCheckbox = document.getElementById('selectAll');
        if (selectAllCheckbox) {
            selectAllCheckbox.checked = false;
        }
        updateBulkActions();
    }

    function initializeDeleteRegistrationModals() {
        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;
                }
            });
        });
    }

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

    // 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/registrations.messages.generating") }}...';
        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.registrations.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 = 'inscriptions.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('{{ __("admin/registrations.messages.csv_export_error") }}', error);
            alert("{{ __('admin/registrations.messages.export_error') }}");
        })
        .finally(() => {
            button.innerHTML = originalContent;
            button.disabled = false;
        });
    });
</script>

@endpush