{{-- resources/views/components/admin/registrations-modal.blade.php --}}

@props([
    'modalId' => 'registrationsModal'
])

<!-- Modal pour voir les inscrits -->
<div class="modal fade zoomIn" id="{{ $modalId }}" tabindex="-1" aria-labelledby="{{ $modalId }}Label" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="{{ $modalId }}Label">
                    <lord-icon src="https://cdn.lordicon.com/dxjqoygy.json" 
                              trigger="loop" 
                              colors="primary:#405189,secondary:#0ab39c" 
                              style="width:24px;height:24px">
                    </lord-icon>
                    <span class="ms-2" id="modal-training-name">{{ __('admin/components.registrations_view_modal.title') }}</span>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ __('admin/components.common.close') }}"></button>
            </div>
            <div class="modal-body p-4">
                <div id="registrationsContent">
                    <div class="text-center py-5" id="loadingState">
                        <lord-icon src="https://cdn.lordicon.com/xjovhxra.json" 
                                  trigger="loop" 
                                  colors="primary:#405189,secondary:#0ab39c" 
                                  style="width:50px;height:50px">
                        </lord-icon>
                        <p class="mt-3 text-muted">{{ __('admin/components.registrations_view_modal.loading') }}</p>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">
                    <i class="ri-close-line me-1"></i>{{ __('admin/components.registrations_view_modal.close') }}
                </button>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    let currentSessionData = {};

    document.querySelectorAll('.open-registrations-modal').forEach(function(button) {
        button.addEventListener('click', function() {
            const sessionId = this.getAttribute('data-session-id');
            const sessionName = this.getAttribute('data-session-name');
            const trainingName = this.getAttribute('data-training-name');
            const url = this.getAttribute('data-url');
            
            showRegistrationsModal(sessionId, sessionName, trainingName, url);
        });
    });

    function showRegistrationsModal(sessionId, sessionName, trainingName, url) {
        currentSessionData = {
            sessionId: sessionId,
            sessionName: sessionName,
            trainingName: trainingName,
            url: url
        };

        const modalTitle = document.getElementById('modal-training-name');
        if (modalTitle) {
            modalTitle.textContent = trainingName + ' - ' + sessionName;
        }

        resetModalContent();
        loadRegistrations(url);
    }

    function resetModalContent() {
        const content = document.getElementById('registrationsContent');
        content.innerHTML = '<div class="text-center py-5" id="loadingState"><lord-icon src="https://cdn.lordicon.com/xjovhxra.json" trigger="loop" colors="primary:#405189,secondary:#0ab39c" style="width:50px;height:50px"></lord-icon><p class="mt-3 text-muted">{{ __("admin/components.registrations_view_modal.loading") }}</p></div>';
    }

    function loadRegistrations(url) {
        const content = document.getElementById('registrationsContent');
        
        fetch(url, {
            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.json();
        })
        .then(data => {
            let html = '';
            if (data.success && data.registrations && data.registrations.length > 0) {
                html = '<div class="row mb-4"><div class="col-md-4"><div class="card bg-success-subtle border-success"><div class="card-body text-center p-3"><div class="fs-20 fw-bold text-success">' + data.stats.confirmed + '</div><div class="text-success fs-13">{{ __("admin/components.registrations_view_modal.stats.confirmed") }}</div></div></div></div><div class="col-md-4"><div class="card bg-primary-subtle border-primary"><div class="card-body text-center p-3"><div class="fs-20 fw-bold text-primary">' + data.stats.total + '</div><div class="text-primary fs-13">{{ __("admin/components.registrations_view_modal.stats.total") }}</div></div></div></div><div class="col-md-4"><div class="card bg-info-subtle border-info"><div class="card-body text-center p-3"><div class="fs-20 fw-bold text-info">' + parseFloat(data.stats.total_amount).toFixed(2) + '€</div><div class="text-info fs-13">{{ __("admin/components.registrations_view_modal.stats.total_amount") }}</div></div></div></div></div><div class="table-responsive"><table class="table table-hover align-middle"><thead class="table-light"><tr><th><i class="ri-user-line me-1"></i>{{ __("admin/components.registrations_view_modal.table.participant") }}</th><th><i class="ri-mail-line me-1"></i>{{ __("admin/components.registrations_view_modal.table.contact") }}</th><th><i class="ri-briefcase-line me-1"></i>{{ __("admin/components.registrations_view_modal.table.profession") }}</th><th class="text-center"><i class="ri-checkbox-circle-line me-1"></i>{{ __("admin/components.registrations_view_modal.table.status") }}</th><th><i class="ri-calendar-line me-1"></i>{{ __("admin/components.registrations_view_modal.table.registration") }}</th><th class="text-end"><i class="ri-money-euro-circle-line me-1"></i>{{ __("admin/components.registrations_view_modal.table.amount") }}</th></tr></thead><tbody>';

                data.registrations.forEach(function(registration) {
                    const statusClass = registration.status === 'confirmed' ? 'success' : registration.status === 'pending' ? 'warning' : 'secondary';
                    const statusLabel = registration.status === 'confirmed' ? '{{ __("admin/components.registrations_view_modal.status.confirmed") }}' : registration.status === 'pending' ? '{{ __("admin/components.registrations_view_modal.status.pending") }}' : '{{ __("admin/components.registrations_view_modal.status.other") }}';
                    const statusIcon = registration.status === 'confirmed' ? 'ri-check-line' : registration.status === 'pending' ? 'ri-time-line' : 'ri-question-line';

                    html += '<tr><td><div class="d-flex align-items-center"><div class="avatar-xs me-3"><span class="avatar-title rounded-circle bg-primary-subtle text-primary fs-16">' + registration.user.firstname.charAt(0).toUpperCase() + '</span></div><div><div class="fw-medium text-dark">' + registration.user.firstname + ' ' + registration.user.lastname + '</div><small class="text-muted">#' + registration.id + '</small></div></div></td><td><div>' + (registration.user.email ? '<div><a href="mailto:' + registration.user.email + '" class="text-decoration-none"><i class="ri-mail-line me-1"></i>' + registration.user.email + '</a></div>' : '<div class="text-muted">-</div>') + (registration.user.phone ? '<div><a href="tel:' + registration.user.phone + '" class="text-decoration-none text-muted"><i class="ri-phone-line me-1"></i>' + registration.user.phone + '</a></div>' : '') + '</div></td><td>' + (registration.user.profession || '<span class="text-muted">-</span>') + '</td><td class="text-center"><span class="badge bg-' + statusClass + '-subtle text-' + statusClass + '"><i class="' + statusIcon + ' me-1"></i>' + statusLabel + '</span></td><td><div class="text-dark">' + new Date(registration.registration_date).toLocaleDateString('fr-FR') + '</div></td><td class="text-end"><span class="fw-medium text-dark">' + parseFloat(registration.amount).toFixed(2) + '€</span></td></tr>';
                });

                html += '</tbody></table></div>';
            } else {
                html = '<div class="text-center py-5"><lord-icon src="https://cdn.lordicon.com/wjyqkiew.json" trigger="loop" colors="primary:#405189,secondary:#f7b84b" style="width:60px;height:60px"></lord-icon><div class="mt-4"><h5 class="text-muted">{{ __("admin/components.registrations_view_modal.empty.title") }}</h5><p class="text-muted mb-0">{{ __("admin/components.registrations_view_modal.empty.message") }}</p></div></div>';
            }

            content.innerHTML = html;
        })
        .catch(error => {
            console.error('Error:', error);
            content.innerHTML = '<div class="alert alert-danger"><lord-icon src="https://cdn.lordicon.com/akqsdstj.json" trigger="loop" colors="primary:#f06548,secondary:#f7b84b" style="width:24px;height:24px"></lord-icon><span class="ms-2">{{ __("admin/components.registrations_view_modal.error") }} ' + error.message + '</span></div>';
        });
    }

});
</script>