@extends('admin.layouts.app')

@section('content')

<form method="POST" id="registration-form" action="{{ isset($registration) && $registration->id ? route('admin.registrations.update', $registration->id) : route('admin.registrations.store') }}">
    @csrf
    @if(isset($registration) && $registration->id)
    @method('PUT')
    @endif

    <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">{{ isset($registration) && $registration->id ? __('admin/registrations.titles.edit') : __('admin/registrations.titles.create') }}</h4>

                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="{{ route('admin.registrations.index') }}">{{ __('admin/registrations.navigation.list') }}</a></li>
                        <li class="breadcrumb-item active">{{ isset($registration) && $registration->id ? __('admin/registrations.navigation.edit') : __('admin/registrations.navigation.create') }}</li>
                    </ol>
                </div>
            </div>

            <!-- Menu bar -->
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header">
                        <div class="d-flex align-items-center flex-wrap gap-2">
                            <div class="flex-grow-1">
                                <a href="{{ route('admin.registrations.index') }}" class="btn btn-light me-2">
                                    <i class="ri-arrow-left-line me-1"></i>{{ __('admin/registrations.buttons.back') }}
                                </a>
                                <button type="submit" class="btn btn-info add-btn" id="saveregistration" data-bs-loading-text="{{ __('admin/registrations.buttons.saving') }}">
                                    <i class="ri-save-line me-1 align-bottom"></i> {{ __('admin/registrations.buttons.save') }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <!-- Contenu principal -->
                <div class="col-lg-8">
                    <!-- Informations participant -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">{{ __('admin/registrations.sections.participant') }}</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="mb-3">
                                        <label class="form-label" for="user_name">{{ __('admin/registrations.fields.user') }} <span class="text-danger">*</span></label>
                                        <input type="text" 
                                                class="form-control @error('user_id') is-invalid @enderror" 
                                                id="user_search" 
                                                placeholder="{{ __('admin/registrations.placeholders.user_search') }}"
                                                autocomplete="off">
                                        <input type="hidden"
                                                name="user_id"
                                                id="user_id"
                                                value="{{ old('user_id', isset($registration) ? $registration->user_id : (isset($preselectedUser) ? $preselectedUser->id : '')) }}"
                                                >
                                        
                                        <!-- Dropdown des résultats -->
                                        <div id="user_dropdown" class="dropdown-menu w-100" style="display: none; max-height: 300px; overflow-y: auto;">
                                            <!-- Les résultats s'afficheront ici -->
                                        </div>
                                        
                                        <!-- Utilisateur sélectionné -->
                                        <div id="selected_user" style="display: none;" class="mt-2">
                                            <div class="alert alert-info d-flex align-items-center">
                                                <div class="flex-grow-1">
                                                    <strong id="selected_user_name"></strong><br>
                                                    <small class="text-muted" id="selected_user_email"></small>
                                                </div>
                                                <button type="button" class="btn btn-sm btn-outline-secondary" onclick="clearUserSelection()">
                                                    <i class="ri-close-line"></i> {{ __('admin/registrations.buttons.change') }}
                                                </button>
                                            </div>
                                        </div>

                                        @error('user_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Informations formation -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">{{ __('admin/registrations.sections.training_session') }}</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label class="form-label" for="training_id">{{ __('admin/registrations.fields.training') }} <span class="text-danger">*</span></label>
                                        <select class="form-select @error('training_id') is-invalid @enderror" 
                                            id="training_id" name="training_id" >
                                            <option value="">{{ __('admin/registrations.placeholders.select_training') }}</option>
                                            @foreach($trainings as $training)
                                            <option value="{{ $training->id }}" 
                                                data-price="{{ $training->price }}"
                                                data-student-price="{{ $training->student_price }}"
                                                {{ old('training_id', isset($registration) ? $registration->training_id : '') == $training->id ? 'selected' : '' }}>
                                                {{ $training->translate()->title }}
                                            </option>
                                            @endforeach
                                        </select>
                                        @error('training_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label class="form-label" for="session_id">{{ __('admin/registrations.fields.session') }} <span class="text-danger">*</span></label>
                                        <div id="sessionBox">
                                            <select class="form-select @error('session_id') is-invalid @enderror" 
                                                id="session_id" name="session_id" disabled >
                                                <option value="">{{ __('admin/registrations.placeholders.select_training_first') }}</option>
                                            </select>
                                        </div>
                                        @error('session_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Informations paiement -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">{{ __('admin/registrations.sections.payment_info') }}</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label class="form-label" for="amount">{{ __('admin/registrations.fields.amount') }} <span class="text-danger">*</span></label>
                                        <div class="input-group">
                                            <input type="number" step="0.01" min="0" class="form-control @error('amount') is-invalid @enderror"
                                                id="amount" name="amount"
                                                value="{{ old('amount', isset($registration) ? $registration->amount : '') }}"
                                                >
                                            <span class="input-group-text">€</span>
                                        </div>
                                        @error('amount')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label class="form-label" for="payment_method">{{ __('admin/registrations.fields.payment_method') }} <span class="text-danger">*</span></label>
                                        <select class="form-select @error('payment_method') is-invalid @enderror" 
                                            id="payment_method" name="payment_method" >
                                            <option value="">{{ __('admin/registrations.placeholders.select_payment_method') }}</option>
                                            <option value="virement" {{ old('payment_method', isset($registration) ? $registration->payment_method : '') == 'virement' ? 'selected' : '' }}>{{ __('admin/registrations.payment_methods.transfer') }}</option>
                                            <option value="cheques" {{ old('payment_method', isset($registration) ? $registration->payment_method : '') == 'cheques' ? 'selected' : '' }}>{{ __('admin/registrations.payment_methods.training_vouchers') }}</option>
                                        </select>
                                        @error('payment_method')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            
                            @php
                                $adminChequeYear = (int) now()->year;
                                $adminChequePrefix = 'CFO-F-' . $adminChequeYear . '-';
                            @endphp
                            <!-- Référence chèques formation (CFO-F-année-…) -->
                            <div id="cheques-formation-fields" @class(['d-none' => ! (old('payment_method') === 'cheques' || $errors->has('cheque_reference'))])>
                                <div class="alert alert-info">
                                    <i class="ri-information-line me-2"></i>
                                    <strong>{{ __('admin/registrations.messages.training_vouchers_info') }}</strong> {{ __('admin/registrations.messages.cheque_reference_hint_admin') }}
                                </div>
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="mb-3">
                                            <label class="form-label" for="cheque_reference">{{ __('admin/registrations.fields.cheque_reference') }} <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control @error('cheque_reference') is-invalid @enderror"
                                                id="cheque_reference" name="cheque_reference"
                                                placeholder="7542"
                                                value="{{ old('cheque_reference', $adminChequePrefix) }}"
                                                data-cheque-default="{{ $adminChequePrefix }}"
                                                autocomplete="off">
                                            <p class="form-text mb-0">{{ __('admin/registrations.messages.cheque_reference_format_admin', ['year' => $adminChequeYear]) }}</p>
                                            @error('cheque_reference')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Sidebar -->
                <div class="col-lg-4">
                    <!-- Configuration -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">{{ __('admin/registrations.sections.configuration') }}</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label for="registration_date" class="form-label">{{ __('admin/registrations.fields.registration_date') }} <span class="text-danger">*</span></label>
                                <input type="date" id="registration_date" name="registration_date"
                                    class="form-control @error('registration_date') is-invalid @enderror"
                                    value="{{ old('registration_date', isset($registration) ? $registration->registration_date->format('Y-m-d') : date('Y-m-d')) }}"
                                    required>
                                @error('registration_date')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <div class="form-check form-switch form-switch-md">
                                    <input class="form-check-input" type="checkbox" name="is_confirmed" id="confirmedswitch" value="1"
                                        {{ old('is_confirmed', (isset($registration) ? $registration->is_confirmed : false)) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="confirmedswitch">
                                        {{ __('admin/registrations.labels.confirmed_registration') }}
                                    </label>
                                </div>
                                <small class="text-muted">
                                    {{ __('admin/registrations.help.confirmed_registration') }}
                                </small>
                            </div>

                            @if(isset($registration) && $registration->id)
                            <div class="mb-3">
                                <div class="form-check form-switch form-switch-md">
                                    <input class="form-check-input" type="checkbox" name="is_archived" id="archivedswitch" value="1"
                                        {{ old('is_archived', $registration->is_archived) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="archivedswitch">
                                        {{ __('admin/registrations.labels.archived_registration') }}
                                    </label>
                                </div>
                            </div>
                            @endif
                        </div>
                    </div>

                    <!-- Informations sur la formation sélectionnée -->
                    <div class="card" id="training-info" style="display: none;">
                        <div class="card-header">
                            <h5 class="card-title mb-0">{{ __('admin/registrations.sections.training_info') }}</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-2">
                                <small class="text-muted">{{ __('admin/registrations.labels.normal_price') }} :</small>
                                <div id="training-price">-</div>
                            </div>
                            <div class="mb-2">
                                <small class="text-muted">{{ __('admin/registrations.labels.student_price') }} :</small>
                                <div id="training-student-price">-</div>
                            </div>
                            <button type="button" class="btn btn-sm btn-outline-primary" id="apply-normal-price">
                                {{ __('admin/registrations.buttons.apply_normal_price') }}
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-info" id="apply-student-price">
                                {{ __('admin/registrations.buttons.apply_student_price') }}
                            </button>
                        </div>
                    </div>

                    @if(isset($registration) && $registration->id)
                    <!-- Informations -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">{{ __('admin/registrations.sections.information') }}</h5>
                        </div>
                        <div class="card-body">
                            @if($registration->registration_number)
                            <div class="mb-2">
                                <small class="text-muted">{{ __('admin/registrations.labels.registration_number') }} :</small>
                                <div><strong>{{ $registration->registration_number }}</strong></div>
                            </div>
                            @endif
                            @if($registration->confirmation_code)
                            <div class="mb-2">
                                <small class="text-muted">{{ __('admin/registrations.labels.confirmation_code') }} :</small>
                                <div><strong>{{ $registration->confirmation_code }}</strong></div>
                            </div>
                            @endif
                            <div class="mb-2">
                                <small class="text-muted">{{ __('admin/registrations.labels.status') }} :</small>
                                <div>
                                    <span class="badge {{ $registration->status_badge_class }}">
                                        {{ $registration->status_label }}
                                    </span>
                                </div>
                            </div>
                            <div class="mb-2">
                                <small class="text-muted">{{ __('admin/registrations.labels.created_at') }} :</small>
                                <div>{{ $registration->created_at->format('d/m/Y à H:i') }}</div>
                            </div>
                            <div class="mb-2">
                                <small class="text-muted">{{ __('admin/registrations.labels.updated_at') }} :</small>
                                <div>{{ $registration->updated_at->format('d/m/Y à H:i') }}</div>
                            </div>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</form>

@endsection

@push('script')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // const form = document.getElementById('registration-form');
    // const submitBtn = document.getElementById('saveregistration');
    // const originalContent = submitBtn.innerHTML;
    
    const trainingSelect = document.getElementById('training_id');
    const sessionBox = document.getElementById('sessionBox');
    const amountInput = document.getElementById('amount');
    const trainingInfo = document.getElementById('training-info');
    const trainingPrice = document.getElementById('training-price');
    const trainingStudentPrice = document.getElementById('training-student-price');
    const applyNormalPriceBtn = document.getElementById('apply-normal-price');
    const applyStudentPriceBtn = document.getElementById('apply-student-price');

    // Autocomplete utilisateur
    const userSearchInput = document.getElementById('user_search');
    const userIdInput = document.getElementById('user_id');
    const userDropdown = document.getElementById('user_dropdown');
    const selectedUserDiv = document.getElementById('selected_user');
    let searchTimeout;    
    
    // Gestion du paiement
    const paymentMethodSelect = document.getElementById('payment_method');
    const chequesFormationFields = document.getElementById('cheques-formation-fields');

    // function resetButton() {
    //     submitBtn.innerHTML = originalContent;
    //     submitBtn.disabled = false;
    // }

    // function showSpinner() {
    //     submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status"></span>{{ __("admin/registrations.buttons.saving") }}';
    //     submitBtn.disabled = true;
    // }

    // Charger les sessions quand une formation est sélectionnée
    trainingSelect.addEventListener('change', function() {
        const trainingId = this.value;
        const selectedOption = this.options[this.selectedIndex];
        
        // Réinitialiser les sessions
        sessionBox.innerHTML = '<select class="form-select" id="session_id" name="session_id" disabled><option value="">{{ __("admin/registrations.messages.loading") }}...</option></select>';
        
        if (trainingId) {
            // Afficher les informations de la formation
            const price = selectedOption.dataset.price;
            const studentPrice = selectedOption.dataset.studentPrice;
            
            trainingPrice.textContent = price ? price + '€' : '{{ __("admin/registrations.messages.not_defined") }}';
            trainingStudentPrice.textContent = studentPrice ? studentPrice + '€' : '{{ __("admin/registrations.messages.not_defined") }}';
            trainingInfo.style.display = 'block';
            
            // Si pas de montant défini, appliquer le prix normal
            if (!amountInput.value && price) {
                amountInput.value = price;
            }
            
            // Charger seulement les sessions futures
            fetch(`{{ route('admin.registrations.sessions') }}?training_id=${trainingId}&future_only=1`)
                .then(response => response.json())
                .then(sessions => {
                    let sessionSelect = '<select class="form-select" id="session_id" name="session_id">';
                    sessionSelect += '<option value="">{{ __("admin/registrations.placeholders.no_specific_session") }}</option>';
                    
                    sessions.forEach(session => {
                        sessionSelect += `<option value="${session.id}">${session.name}`;
                        if (session.start_date) {
                            sessionSelect += ` - ${new Date(session.start_date).toLocaleDateString('fr-FR')}`;
                        }
                        sessionSelect += '</option>';
                    });
                    
                    sessionSelect += '</select>';
                    sessionBox.innerHTML = sessionSelect;
                })
                .catch(error => {
                    console.error('Erreur:', error);
                    sessionBox.innerHTML = '<select class="form-select" id="session_id" name="session_id" disabled><option value="">{{ __("admin/registrations.messages.loading_error") }}</option></select>';
                });
        } else {
            trainingInfo.style.display = 'none';
            sessionBox.innerHTML = '<select class="form-select" id="session_id" name="session_id" disabled><option value="">{{ __("admin/registrations.placeholders.select_training_first") }}</option></select>';
        }
    });

    // Appliquer le prix normal
    applyNormalPriceBtn.addEventListener('click', function() {
        const selectedOption = trainingSelect.options[trainingSelect.selectedIndex];
        const price = selectedOption.dataset.price;
        if (price) {
            amountInput.value = price;
        }
    });

    // Appliquer le prix étudiant
    applyStudentPriceBtn.addEventListener('click', function() {
        const selectedOption = trainingSelect.options[trainingSelect.selectedIndex];
        const studentPrice = selectedOption.dataset.studentPrice;
        if (studentPrice) {
            amountInput.value = studentPrice;
        }
    });

    // Gestion de l'autocomplete utilisateur
    if (userSearchInput) {
        userSearchInput.addEventListener('input', function() {
            const query = this.value.trim();
            
            clearTimeout(searchTimeout);
            
            if (query.length < 2) {
                userDropdown.style.display = 'none';
                return;
            }
            
            searchTimeout = setTimeout(() => {
                searchUsers(query);
            }, 300);
        });
        
        // Masquer le dropdown si on clique ailleurs
        document.addEventListener('click', function(e) {
            if (!e.target.closest('#user_search') && !e.target.closest('#user_dropdown')) {
                userDropdown.style.display = 'none';
            }
        });
        
        // Si on clique sur l'input et qu'il y a déjà une valeur, relancer la recherche
        userSearchInput.addEventListener('focus', function() {
            const query = this.value.trim();
            if (query.length >= 2) {
                searchUsers(query);
            }
        });
        
        // Vérifier si un utilisateur est déjà sélectionné (en édition)
        if (userIdInput.value) {
            loadSelectedUser(userIdInput.value);
        }
    }
    
    function searchUsers(query) {
        userDropdown.innerHTML = '<div class="dropdown-item"><i class="ri-loader-4-line spin me-2"></i>{{ __("admin/registrations.messages.searching") }}...</div>';
        userDropdown.style.display = 'block';
        
        fetch(`{{ route('admin.users.search') }}?q=${encodeURIComponent(query)}`)
            .then(response => response.json())
            .then(users => {
                if (users.length === 0) {
                    userDropdown.innerHTML = '<div class="dropdown-item text-muted">{{ __("admin/registrations.messages.no_user_found") }}</div>';
                } else {
                    let html = '';
                    users.forEach(user => {
                        html += `
                            <div class="dropdown-item user-option" data-user-id="${user.id}" data-user-name="${user.firstname} ${user.lastname}" data-user-email="${user.email}" style="cursor: pointer;">
                                <div class="d-flex align-items-center">
                                    <div class="avatar-xs me-3">
                                        <span class="avatar-title rounded-circle bg-primary-subtle text-primary">
                                            ${user.firstname.charAt(0).toUpperCase()}
                                        </span>
                                    </div>
                                    <div>
                                        <div class="fw-medium">${user.firstname} ${user.lastname}</div>
                                        <small class="text-muted">${user.email}</small>
                                    </div>
                                </div>
                            </div>
                        `;
                    });
                    userDropdown.innerHTML = html;
                    
                    // Ajouter les événements de clic
                    userDropdown.querySelectorAll('.user-option').forEach(option => {
                        option.addEventListener('click', function() {
                            selectUser(this.dataset.userId, this.dataset.userName, this.dataset.userEmail);
                        });
                    });
                }
            })
            .catch(error => {
                console.error('Erreur:', error);
                userDropdown.innerHTML = '<div class="dropdown-item text-danger">{{ __("admin/registrations.messages.search_error") }}</div>';
            });
    }
    
    function selectUser(userId, userName, userEmail) {
        // Mettre à jour les champs
        userIdInput.value = userId;
        userSearchInput.value = userName; // Input reste visible avec le nom
        
        // Mettre à jour la zone d'information
        selectedUserDiv.style.display = 'block';
        userSearchInput.style.display = 'none';
        document.getElementById('selected_user_name').textContent = userName;
        document.getElementById('selected_user_email').textContent = userEmail;
        
        // Masquer le dropdown
        userDropdown.style.display = 'none';
        
        // Supprimer les erreurs de validation
        userIdInput.classList.remove('is-invalid');
        userSearchInput.classList.remove('is-invalid');
    }
    
    function loadSelectedUser(userId) {
        // Charger les infos de l'utilisateur sélectionné (pour l'édition)
        fetch(`{{ route('admin.users.get') }}?id=${userId}`)
            .then(response => response.json())
            .then(user => {
                userSearchInput.style.display = 'none';
                selectedUserDiv.style.display = 'block';
                document.getElementById('selected_user_name').textContent = `${user.firstname} ${user.lastname}`;
                document.getElementById('selected_user_email').textContent = user.email;
            })
            .catch(error => {
                console.error('{{ __("admin/registrations.messages.user_loading_error") }}', error);
            });
    }
    
    // Fonction globale pour effacer la sélection
    window.clearUserSelection = function() {
        userIdInput.value = '';
        userSearchInput.value = '';
        userSearchInput.style.display = 'block';
        selectedUserDiv.style.display = 'none';
        userDropdown.style.display = 'none';
        userSearchInput.focus();
    };   

    // Gestion des méthodes de paiement
    paymentMethodSelect.addEventListener('change', function() {
        const paymentMethod = this.value;
        
        if (paymentMethod === 'cheques') {
            chequesFormationFields.classList.remove('d-none');
            var cref = document.getElementById('cheque_reference');
            if (cref) {
                var def = cref.getAttribute('data-cheque-default');
                if (def && !cref.value.trim()) {
                    cref.value = def;
                }
            }
        } else {
            chequesFormationFields.classList.add('d-none');
        }
    });

    // Déclencher l'événement change si une formation est déjà sélectionnée
    if (trainingSelect.value) {
        trainingSelect.dispatchEvent(new Event('change'));
    }
    
    // Déclencher l'événement change si un paiement est déjà sélectionné
    if (paymentMethodSelect.value) {
        paymentMethodSelect.dispatchEvent(new Event('change'));
    }

    var crefInput = document.getElementById('cheque_reference');
    if (crefInput) {
        if (crefInput.value) {
            crefInput.value = crefInput.value.toUpperCase();
        }
        crefInput.addEventListener('input', function () {
            var pos = crefInput.selectionStart;
            var end = crefInput.selectionEnd;
            var u = crefInput.value.toUpperCase();
            if (crefInput.value !== u) {
                crefInput.value = u;
                if (pos !== null) crefInput.setSelectionRange(pos, end);
            }
        });
    }

    // Validation du formulaire
    const validator = new MultilingualFormValidator({
        formId: 'registration-form',
        submitBtnId: 'saveregistration',
        
        // Champs multilingues requis (title_fr, title_en, content_fr, content_en, etc.)
        fields: [],
        
        // Champs simples requis (si vous en avez)
        singleFields: ['user_id', 'training_id', 'registration_date', 'amount', 'payment_method'],
        
        alertMessage: "{{ __('admin/registrations.errors.fill_all_required_fields') }}",
        loadingText: "{{ __('admin/registrations.buttons.saving') }}",
        debug: false,
        
        onBeforeSubmit: function() {
            // Validation spécifique pour les chèques-formation
            const paymentMethod = document.getElementById('payment_method');
            if (paymentMethod.value === 'cheques') {
                const cref = document.getElementById('cheque_reference');
                let isValid = true;
                if (!cref || !cref.value.trim()) {
                    if (cref) cref.classList.add('is-invalid');
                    isValid = false;
                } else {
                    if (cref) cref.classList.remove('is-invalid');
                }

                if (!isValid) {
                    // alert('Veuillez remplir tous les champs chèques-formation obligatoires');
                    Swal.fire({
                        title: "Info",
                        text: '{{ __("admin/registrations.errors.fill_all_required_fields") }}',
                        icon: "info",
                        customClass: {
                            confirmButton: "btn btn-primary w-xs mt-2"
                        },
                        buttonsStyling: !1,
                        showCloseButton: !0
                    });
                    return false; // Empêcher la soumission
                }
            }
            
        }
    });

    // form.addEventListener('submit', function(e) {
    //     e.preventDefault();
        
    //     let isValid = true;

    //     // Validation des champs requis
    //     const requiredFields = ['user_id', 'training_id', 'registration_date', 'amount', 'payment_method'];
    //     requiredFields.forEach(fieldName => {
    //         const field = document.getElementById(fieldName);
    //         if (!field.value.trim()) {
    //             field.classList.add('is-invalid');
    //             isValid = false;
    //         } else {
    //             field.classList.remove('is-invalid');
    //         }
    //     });

    //     // Validation spécifique pour les chèques-formation
    //     if (paymentMethodSelect.value === 'cheques') {
    //         const chequesFields = ['vat_number', 'user_code', 'authorization_code'];
    //         chequesFields.forEach(fieldName => {
    //             const field = document.getElementById(fieldName);
    //             if (!field.value.trim()) {
    //                 field.classList.add('is-invalid');
    //                 isValid = false;
    //             } else {
    //                 field.classList.remove('is-invalid');
    //             }
    //         });
    //     }

    //     if (!isValid) {
    //         alert('{{ __("admin/registrations.messages.fill_required_fields") }}');
    //         return false;
    //     }

    //     // Si la validation passe, soumettre le formulaire
    //     showSpinner();
    //     form.submit();

    //     // Si erreur de réseau ou autre, restaurer le bouton après un délai
    //     setTimeout(() => {
    //         if (submitBtn.disabled) {
    //             resetButton();
    //         }
    //     }, 10000);
    // });
});    
</script>
@endpush