@extends('app')
@section('title-page', "formulaire d'inscription")
@section('content')

    <link rel="stylesheet" href='{{ asset('assets/css/styleFormulaire.css') }}' media="all" />
    <link rel="stylesheet" href="{{ asset('assets/css/styleToast.css') }}" media="all" />

    <div class="toast-container position-fixed bottom-0 end-0 p-3">
        <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header">
                <img src="..." class="rounded me-2" alt="...">
                <strong class="me-auto">Bootstrap</strong>
                <small>11 mins ago</small>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body">
                Hello, world! This is a toast message.
            </div>
        </div>
    </div>

    <style>
        body {
            background: #FFFFFF;
        }

        .montantTotal {
            color: var(--primary-color);
            text-decoration: underline;
            font-size: 15px;
            text-align: center;
            font-weight: bold;
        }
    </style>
    <!--Banner Inner-->


    <div class="toast-container" id="toastContainer"></div>

    <section>
        <div class="lgx-banner lgx-banner-inner">
            <div class="lgx-page-inner">
                <div class="container">
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="lgx-heading-area">
                                <div class="lgx-heading lgx-heading-white">
                                    {{-- <h2 class="heading">Get In Touch</h2> --}}
                                </div>
                                {{-- <ul class="breadcrumb">
                                    <li><a href="index.html"><i class="fa fa-home" aria-hidden="true"></i>Home</a></li>
                                    <li class="active">Contact</li>
                                </ul> --}}
                            </div>
                        </div>
                    </div><!--//.ROW-->
                </div><!-- //.CONTAINER -->
            </div><!-- //.INNER -->
        </div>
    </section> <!--//.Banner Inner-->


    <main class="padding-titre">
        <div class="lgx-heading lgx-heading-white title">
            <div style="display:flex;justify-content:center; flex-direction:column;width:100%;">
                <h1 class="text-black title-text">BULLETIN D'INSCRIPTION</h1>
                <h3 style="margin-top: -45px">Bulletin d'inscription</h3>
            </div>
        </div>

        <div class="form-container">

            <form id="formulaireInscription">

                <input type="text" id="idop" name="idop" value="0" hidden>
                <!-- Participant Information -->
                <h5 class="section-title">INFORMATIONS DU PARTICIPANT</h5>
                <div class="row">
                    <div class="column">
                        <div class="form-group">
                            <input type="text" class="form-control text-uppercase mb-1" id="inpName" name="name"
                                required>
                            <i class="form-label ms-3">Nom <b style="color : red;">*</b></i>
                        </div>
                    </div>
                    <div class="column">
                        <div class="form-group">
                            <input type="text" class="form-control text-uppercase mb-1" id="inpPrenoms" name="prenom"
                                required>
                            <i class="form-label ms-3">Prénoms <b style="color : red;">*</b></i>
                        </div>
                    </div>
                    <div class="column">
                        <div class="form-group">
                            <input type="email" class="form-control mb-1" id="inpEmail" name="email" required>
                            <i class="form-label ms-3">Email <b style="color : red;">*</b></i>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="column">
                        <div class="form-group">
                            <select class="form-select" id="selPays" name="pays" @disabled($read)>
                                <option value="" data-tel=""></option>
                                @foreach (listePays() as $item)
                                    <option value="{{ $item['value'] }}" data-tel="{{ $item['tel'] }}">{{ $item['nom'] }}
                                    </option>
                                @endforeach

                            </select>
                            <i class="form-label ms-3">Nationalité <b style="color : red;">*</b></i>
                        </div>
                    </div>
                    <div class="maColumnLarge">
                        <div class="flex-container space-between">
                            <div class="radio-container">
                                <div class="ps-3" style="padding-top : 10px;">
                                    <label class="form-label me-2">Soirée</label>
                                </div>
                                <input class="custom-radio me-2" type="checkbox" id="checkSoireePp">
                                <div class="ps-3" style="padding-top : 10px;">
                                    <label class="form-label me-2">Excursion</label>
                                </div>
                                <input class="custom-radio" type="checkbox" id="checkExcursionPp">
                            </div>
                        </div>
                    </div>
                    <div class="column" style="display : none;">
                        <div class="form-group">
                            <input type="text" class="form-control text-uppercase" id="inpVille" name="ville">
                            <i class="form-label ms-3">Ville <b style="color : red;">*</b></i>
                        </div>
                    </div>
                    <div class="column" style="display : none;">
                        <div class="form-group">
                            <input type="text" class="form-control" id="inpTelephone_whatsapp"
                                name="telephone_whatsapp" required>
                            <i class="form-label ms-3">Téléphone whatsapp <b style="color : red;">*</b></i>
                        </div>
                    </div>
                </div>

                <!-- Profession Choice -->
                <div class="form-section mb-4">
                    <div class="flex-container space-between">
                        <div class="radio-container">
                            <p class="form-label pt-2">Votre qualité : </p>
                            <div class="ps-3" style="padding-top : 10px;">
                                <label class="form-label me-2">NOTAIRE</label>
                            </div>
                            <input class="custom-radio me-2" type="radio" id="notaire" name="fonction"
                                value="NOTAIRE" checked required>
                            <div class="ps-3" style="padding-top : 10px;">
                                <label class="form-label me-2">COLLABORATEUR</label>
                            </div>
                            <input class="custom-radio" type="radio" id="collaborateur" name="fonction"
                                value="COLLABORATEUR" required>
                        </div>
                    </div>
                </div>

                <!-- Participant Information -->
                <h5 class="section-title">ACCOMPAGNANT(S)</h5>

                <!-- Accompanying Persons -->
                <div class="form-section mb-4">
                    <div class="row">
                        <input type="text" class="form-control text-uppercase" id="indexAc" value="0"
                            name="indexAc" style="display : none;">
                        <div class="maColumnHeure">
                            <input type="text" class="form-control text-uppercase" id="inpNom_ac" name="nom_ac">
                            <i class="form-label ms-3">Nom</i>
                        </div>
                        <div class="maColumn">
                            <input type="text" class="form-control text-uppercase" id="inpPrenom_ac"
                                name="prenom_ac">
                            <i class="form-label ms-3">Prénoms</i>
                        </div>
                        <div class="maColumnLarge">
                            <div class="flex-container space-between">
                                <div class="radio-container">
                                    <div class="ps-3" style="padding-top : 10px;">
                                        <label class="form-label me-2">Soirée</label>
                                    </div>
                                    <input class="custom-radio me-2" type="checkbox" id="checkSoiree">
                                    <div class="ps-3" style="padding-top : 10px;">
                                        <label class="form-label me-2">Excursion</label>
                                    </div>
                                    <input class="custom-radio" type="checkbox" id="checkExcursion">
                                </div>
                            </div>
                        </div>
                        <div class="maColumnHeure">
                            <button type="button" class="btn btn-success" id="btnAjouterAccompagnant">Ajouter</button>
                            <button type="button" class="btn btn-warning" id="btnEditerAccompagnant"
                                style="display : none;">Modifier</button>
                        </div>
                    </div>

                    <table class="table">
                        <thead>
                            <tr>
                                <th width="10%"></th>
                                <th width="30%" style="text-align: left !important;">NOM</th>
                                <th width="30%" style="text-align: left !important;">PRÉNOMS</th>
                                <th width="15%" style="text-align: center !important;">SOIRÉE</th>
                                <th width="15%" style="text-align: center !important;">EXCURSION</th>
                            </tr>
                        </thead>
                        <tbody id="bodyTableListeAccompagnant">
                            <tr>
                                <td colspan="5" class="text-center">Liste des accompagnants</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- Participant Information -->
                <h5 class="section-title" style="display : none;">FORMALITES D'ARRIVEE ET DE DEPART / HÔTEL</h5>

                <!-- Visa Assistance -->
                <div class="form-section mb-4" style="display : none;">
                    <div class="flex-container">
                        <span class="me-2">BESOIN D'AIDE POUR L'OBTENTION DU VISA :</span>
                        <div class="radio-container me-3">
                            <div style="padding-top : 10px;">
                                <span class="me-1 mt-1">OUI</span>
                            </div>
                            <div style="padding-top : 10px;">
                                <input class="custom-radio" type="radio" name="aide_visa" value="1"
                                    id="aide_visa_oui" @disabled($read)>
                            </div>
                        </div>
                        <div class="radio-container">
                            <div style="padding-top : 10px;">
                                <span class="me-1">NON</span>
                            </div>
                            <div style="padding-top : 10px;">
                                <input class="custom-radio" type="radio" name="aide_visa" value="0"
                                    id="aide_visa_non" checked @disabled($read)>
                            </div>
                        </div>
                        <div>Plus d'infos sur les Visas, <a href="informations-pratiques#visaInfos"> cliquez-ici</a> </div>
                    </div>
                </div>

                <!-- Arrival Information -->
                <div class="form-section mb-4" style="display : none;">
                    <div class="row">
                        <div class="maColumn">
                            <label class="form-label">Date d'arrivée : </label>
                            <input type="date" class="form-control" name="date_arrivee" id="inpDate_arrivee">
                        </div>
                        <div class="maColumnHeure">
                            <label class="form-label">Heure d'arrivée : </label>
                            <input type="time" class="form-control" name="heure_arrivee" id="inpHeure_arrivee">
                        </div>
                        <div class="maColumn">
                            <label class="form-label">Compagnie : </label>
                            <select class="form-select" name="compagnie_arrivee" id="selCompagnie_arrivee"
                                @disabled($read)>
                                <option value=""></option>
                                @foreach ($compagnies as $item)
                                    <option value="{{ $item['value'] }}">{{ $item['value'] }}</option>
                                @endforeach

                            </select>
                        </div>
                        <div class="maColumn">
                            <label class="form-label">Vol : </label>
                            <input type="text" class="form-control" name="num_vol_arrivee" id="inpNum_vol_arrivee"
                                required>
                        </div>
                    </div>
                </div>

                <!-- Departure Information -->
                <div class="form-section mb-4" style="display : none;">
                    <div class="row">
                        <div class="maColumn">
                            <label class="form-label">Date de départ : </label>
                            <input type="date" class="form-control" name="date_depart" id="inpDate_depart" required>
                        </div>
                        <div class="maColumnHeure">
                            <label class="form-label">Heure de départ : </label>
                            <input type="time" class="form-control" name="heure_depart" id="inpHeure_depart">
                        </div>
                        <div class="maColumn">
                            <label class="form-label">Compagnie : </label>
                            <select class="form-select" name="compagnie_depart" id="selCompagnie_depart" required
                                @disabled($read)>
                                <option value=""></option>
                                @foreach ($compagnies as $item)
                                    <option value="{{ $item['value'] }}">{{ $item['value'] }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="maColumn">
                            <label class="form-label">Vol : </label>
                            <input type="text" class="form-control" name="num_vol_depart" id="inpNum_vol_depart"
                                required>
                        </div>
                    </div>
                </div>

                <div class="mb-3 fw-semibold fst-italic px-3">La commission protocole assistera les confrères
                    ressortissants des pays non-membres de la CEDEAO pour l'obtention des visas d'entrée en Côte d'Ivoire.
                </div>
                <p class="mb-4 px-3" style="display : none;">NB : Prévoir le carnet de vaccination jaune de l'OMS</p>

                <!-- Hotel Information -->
                <div class="form-section mb-4" style="display : none;">
                    <div class="row">
                        <div class="column">
                            <label class="form-label">Hôtel choisi : </label>
                            <select class="form-select" name="hotel_choisi" id="selHotel_choisi"
                                @disabled($read)>
                                <option value=""></option>
                                <option value="SEEN HOTEL">SEEN HOTEL</option>
                                <option value="SOFITEL HOTEL IVOIRE">SOFITEL HOTEL IVOIRE</option>
                                <option value="HOTEL PALM CLUB">HOTEL PALM CLUB</option>
                                <option value="HOTEL PULLMAN">HOTEL PULLMAN</option>
                                <option value="NOOM HOTEL">NOOM HOTEL</option>
                            </select>
                        </div>
                        <div class="column">
                            <label class="form-label">Nombre de nuitée(s) : </label>
                            <input type="number" class="form-control" name="nombre_jour" id="inpNombre_jour">
                        </div>
                    </div>
                </div>

                <!-- Participant Information -->
                <h5 class="section-title">DROITS D'INSCRIPTION / MODE DE PAIEMENT</h5>

                <!-- Registration Fees -->
                <table class="table mx-3" style="margin-bottom : 40px!important;a">
                    <thead>
                        <tr>
                            <th width="40%"><i class="form-label">Université</i></th>
                            <th width="20%"><i class="form-label">Montant</i></th>
                            <th width="20%"><i class="form-label">Unités</i></th>
                            <th width="20%"><i class="form-label">Total</i></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="fw-bold">NOTAIRE</td>
                            <td class="text-center fw-bold">375&nbsp;000&nbsp;F&nbsp;CFA</td>
                            <td class="text-center"><span class="fw-bold" id="libUnitNotaire">1</span></td>
                            <td class="right-aligned"><span class="fw-bold"
                                    id="libTotalNotaire">375&nbsp;000&nbsp;F&nbsp;CFA</span></td>
                        </tr>
                        <tr>
                            <td class="fw-bold">COLLABORATEUR</td>
                            <td class="text-center fw-bold">150&nbsp;000&nbsp;F&nbsp;CFA</td>
                            <td class="text-center"><span class="fw-bold" id="libUnitCollaborateur">0</span></td>
                            <td class="right-aligned"><span class="fw-bold"
                                    id="libTotalCollaborateur">0&nbsp;F&nbsp;CFA</span></td>
                        </tr>
                        <tr>
                            <td class="fw-bold">ACCOMPAGNANT</td>
                            <td class="text-center fw-bold">150&nbsp;000&nbsp;F&nbsp;CFA</td>
                            <td class="text-center"><span class="fw-bold" id="libUnitAccompagnant">1</span></td>
                            <td class="right-aligned"><span class="fw-bold"
                                    id="libTotalAccompagnant">150&nbsp;000&nbsp;F&nbsp;CFA</span></td>
                        </tr>
                        <!-- <tr>
                                        <td class="fw-bold">AUTRES PROFESSIONNELS</td>
                                        <td class="text-center fw-bold">375&nbsp;000&nbsp;F&nbsp;CFA</td>
                                        <td class="text-center"><span class="fw-bold" id="libAutreProffessionnel">0</span></td>
                                        <td class="right-aligned"><span class="fw-bold" id="libTotalProffessionnel">0&nbsp;F&nbsp;CFA</span></td>
                                    </tr> -->
                        <tr>
                            <td colspan="3" style="text-align: right;padding-right : 5px; border-bottom : none;">
                                Sous-total :</td>
                            <td class="right-aligned fw-bold" style="background : #777777; color : #F1F1F1"
                                id="libSoutTotalTable1">

                            </td>
                        </tr>
                    </tbody>
                </table>

                <table class="table mx-3 mb-4">
                    <thead>
                        <tr>
                            <th><i class="form-label">Activités</i></th>
                            <th><i class="form-label">Montant</i></th>
                            <th><i class="form-label">Nombre</i></th>
                            <th><i class="form-label">Total</i></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <div><strong>COCKTAIL DE BIENVENUE :</strong> 22/04/2025</div>
                                <div>Abidjan-Cocody</div>
                            </td>
                            <td>Offert par la<br>CNCI</td>
                            <td><input type="number" class="form-control text-end inputActivity" value="1"
                                    name="cocktail_bienvenue" readonly></td>
                            <td><input type="text" class="form-control text-end" value="Offert" readonly></td>
                        </tr>
                        <tr>
                            <td>
                                <div><strong>SOIREE DE CLOTURE (soirée retro) :</strong> 25/04/2025</div>
                            </td>
                            <td>30&nbsp;000&nbsp;F&nbsp;CFA</td>
                            <td><input type="number" class="form-control text-end inputActivity" value="0"
                                    name="soire_cloture" readonly></td>
                            <td><input type="text" id="libTotalMontantSoireCloture" class="form-control text-end"
                                    value="0&nbsp;F&nbsp;CFA" readonly></td>
                        </tr>
                        <tr>
                            <td>
                                <div><strong>EXCURSION DÉTENTE :</strong> 26/04/2025</div>
                                <div>Assinie Mafia</div>
                            </td>
                            <td>20&nbsp;000&nbsp;F&nbsp;CFA</td>
                            <td><input type="number" class="form-control text-end inputActivity" value="0"
                                    name="excursion_detente" readonly></td>
                            <td><input type="text" id="libTotalMontantExcursionDetente" class="form-control text-end"
                                    value="0&nbsp;F&nbsp;CFA" readonly></td>
                        </tr>
                        <tr>
                            <td colspan="3" style="text-align: right;padding-right : 5px; border-bottom : none;">
                                Sous-total :</td>
                            <td class="right-aligned fw-bold" style="background : #777777; color : #F1F1F1"
                                id="libSoutTotalTable2">
                                0&nbsp;F&nbsp;CFA
                            </td>
                        </tr>
                    </tbody>
                </table>

                <div style="display: flex; justify-content : center;margin-bottom : 20px;">
                    <span class="montantTotal">TOTAL GÉNÉRAL</span>
                </div>
                <div style="display: flex; justify-content : center; margin-bottom : 20px;">
                    <span
                        style="background: #ED7D31; padding : 5px 10px;margin-top : -7px; color : #F1F1F1; font-weight : bold;"
                        id="libTotalTotal"></span>
                </div>

                <p class="mb-4 fw-semibold px-3">NB : Les frais de participations comprennent les droits d’inscription, les
                    déjeuners, les pause-café et les navettes
                    (des hôtels aux lieux de rencontres).</p>

                <!-- Payment Method -->
                <h5 class="section-title">MODE DE PAIEMENT</h5>

                <div style="display : flex; justify-content : center; margin-bottom : 0px;">
                    <i style="font-weight : bold;">Uniquement les paiements FRANC CFA (XOF)</i>
                </div>

                <div class="form-section mb-4">
                    <div class="payment-option" style="justify-content: flex-start">
                        <div class="radio-container">
                            <input class="custom-radio" type="radio" id="cash" name="mode_paiement"
                                value="CASH" checked>
                            <div style="padding-top : 8px;">
                                <label class="fw-bold ms-3" for="cash">PAIEMENT CASH</label>
                            </div>
                        </div>

                        <div class="radio-container">
                            <input class="custom-radio" type="radio" id="virement" name="mode_paiement"
                                value="VIREMENT">
                            <div style="padding-top: 10px;">
                                <label class="fw-bold ms-3" for="virement">VIREMENT</label>
                            </div>
                        </div>
                    </div>

                    <div class="payment-option" style="margin-bottom: 25px">
                        <div class="" style="padding-top : 10px; display : flex; align-items: initial">
                            <input class="custom-radio me-2" type="checkbox" id="checkSolde">
                            <label class="fw-bold ms-3" style="text-transform: uppercase" for="checkSolde">Paiement Soldé</label>
                        </div>
                    </div>

                    {{-- <div class="payment-details">
                        <p>BANQUE : <b>BANQUE SAHELO-SAHARIENNE POUR L'INVESTISSEMENT ET LE COMMERCE (BSIC)</b></p>
                        <p>INTITULE DU COMPTE : <b>CHAMBRE DES NOTAIRES DE COTE D'IVOIRE</b></p>
                        <div style="display : flex; justify-content : center; margin-bottom : 0px;padding-left : 50px;">
                            <p>Abidjan-Cocody Danga, près de l'Ambassade d'Espagne - 01 BP 8654 Abidjan 01</p>
                        </div>
                        <p>
                            CODE BANQUE : <b>CI154</b> /
                            CODE GUICHET : <b>01001</b> /
                            NUMERO COMPTE : <b>10 09 10 000 19</b> /
                            CLÉ RIB : <b>90</b> /
                            CLÉ IBAN : <b>34</b><br>
                            IBAN : <b>CI93 CI1540 1001 010 09 10 000 19 90</b> / CODE BIC : <b>BSAHCIAB</b></p>
                        <div style="display : flex; justify-content : center; margin-top : 30px;">
                            <p>Prière de scanner l'ordre de virement et de l'envoyer avec le bulletin d'inscrption<br> aux
                                contacts suivants au plus tard le 05 avril 2025</p>
                        </div>
                        <ul class="list-unstyled">
                            <li><a style="color : #000;"
                                    href="mailto:secretariat@18e-universitecaaf.ci">secretariat@18e-universitecaaf.ci</a>
                            </li>
                            <li><a style="color : #000;"
                                    href="mailto:comptabilite@18e-universitecaaf.ci">comptabilite@18e-universitecaaf.ci</a>
                            </li>
                        </ul>
                    </div> --}}
                </div>
            </form>

            <div class="text-center" style="margin-top: -30px;">
                {{-- <button type="submit" class="submit-btn" id="btnConfirmerFormulaire">Confirmer</button> --}}
                {{-- <a href="{{ route("badgePdf") }}"><button class="submit-btn" >Imprimer</button></a> --}}
                <a href="{{ route('listeParticipant') }}">
                    <button type="button" class="btn">Retour</button>
                </a>
                <button type="submit" class="btn submit-btn" id="btnConfirmerFormulaire">Valider</button>
            </div>
        </div>
    </main>
@endsection

@section('script')

    <!-- Script de toast -->
    <script>
        // Fonction pour créer et afficher un toast
        function showToast(message, type = 'default', duration = 5000) {
            // Créer le conteneur du toast s'il n'existe pas
            const toastContainer = document.getElementById('toastContainer');

            // Créer un nouveau toast
            const toast = document.createElement('div');
            toast.className = `toast ${type}`;

            // Définir l'icône en fonction du type
            let icon = '📌';
            if (type === 'success') icon = '✅';
            else if (type === 'error') icon = '❌';
            else if (type === 'warning') icon = '⚠️';
            else if (type === 'info') icon = 'ℹ️';

            // Structure du contenu du toast
            toast.innerHTML = `
                <div class="toast-content">
                <div class="toast-icon">${icon}</div>
                <div class="toast-message">${message}</div>
                </div>
                <button style="display : none;" class="toast-close">&times;</button>
            `;

            // Ajouter le toast au conteneur
            toastContainer.appendChild(toast);

            // Forcer un reflow pour que la transition fonctionne correctement
            toast.offsetHeight;

            // Animation pour afficher le toast
            setTimeout(() => {
                toast.classList.add('show');
            }, 10);

            // Configuration du bouton de fermeture
            const closeBtn = toast.querySelector('.toast-close');
            closeBtn.addEventListener('click', () => {
                closeToast(toast);
            });

            // Disparition automatique après la durée spécifiée
            if (duration > 0) {
                setTimeout(() => {
                    closeToast(toast);
                }, duration);
            }

            // Support tactile pour fermer le toast
            toast.addEventListener('touchstart', function(e) {
                const touchStartX = e.touches[0].clientX;
                const touchStartTime = new Date().getTime();

                toast.addEventListener('touchend', function handleTouchEnd(e) {
                    const touchEndX = e.changedTouches[0].clientX;
                    const touchEndTime = new Date().getTime();

                    // Détecter un swipe horizontal (distance > 50px et durée < 300ms)
                    if (Math.abs(touchEndX - touchStartX) > 50 && touchEndTime - touchStartTime < 300) {
                        closeToast(toast);
                    }

                    toast.removeEventListener('touchend', handleTouchEnd);
                });
            });

            // Empêcher que les liens dans le toast soient clickés et ferment le toast
            const links = toast.querySelectorAll('a');
            links.forEach(link => {
                link.addEventListener('click', function(e) {
                    e.stopPropagation(); // Empêcher la propagation de l'événement
                });
            });

            return toast;
        }

        // Fonction pour fermer un toast
        function closeToast(toast) {
            toast.classList.remove('show');

            // Supprimer l'élément après la fin de l'animation
            toast.addEventListener('transitionend', function() {
                toast.remove();
            });
        }
    </script>

    <script>
        const path = window.location.pathname;

        // Diviser le chemin en segments
        const segments = path.split('/').filter(segment => segment !== '');

        function chargerTableAccompagnement(data) {

            if (data.length > 0) {

                $('#bodyTableListeAccompagnant').html('')
            }

            $.each(data, function(index, value) {

                // tableListeAccompagnants.push({
                //     idparticipant : value.idparticipant,
                //     nom_ac: value.nom_ac,
                //     prenom_ac: value.prenom_ac,
                //     soiree : value.soiree,
                //     excursion : value.excursion
                // })

                checkedSoiree = value.soiree == 1 ? 'checked' : ''
                checkedExcursion = value.excursion == 1 ? 'checked' : ''

                $('#bodyTableListeAccompagnant').append(
                    '<tr>\
                            <td style="text-align: center;">\
                                <img src=\'{{ asset('assets/img/icons/effacer.png') }} \' style="width : 20px; cursor : pointer;margin-right : 5px;" data-index = "' +
                    index +
                    '" id="btnSupprimeLigne">\
                                <img src=\'{{ asset('assets/img/icons/editer.png') }} \' style="width : 20px; cursor : pointer;" data-index = "' +
                    index + '" id="btnModifierLigne">\
                            </td>\
                            <td style="text-align : left; padding-left : 5px;">' + value.nom_ac.toUpperCase() + '</td>\
                            <td style="text-align : left; padding-left : 5px;">' + value.prenom_ac.toUpperCase() + '</td>\
                            <td style="text-align : center;"><input class="custom-radio" type="checkbox" data-index = "' +
                    index + '" id="checkSoireeSurLigne" ' + checkedSoiree + '></td>\
                            <td style="text-align : center;"><input class="custom-radio" type="checkbox" data-index = "' +
                    index + '" id="checkExcursionSurLigne" ' + checkedExcursion + '></td>\
                        </tr>')
            });

            actualiseTableEvenement()
        }

        if (segments.length > 1) {

            $.ajax({
                type: "POST",
                url: "{{ route('getInscription') }}",
                data: {
                    _token: "{{ csrf_token() }}",
                    id: segments[1],
                    // numero: segments[1],
                    // mail: segments[2]
                },
                dataType: "json",
                success: function(response) {

                    if (response.error == false) {

                        console.log(response);
                        
                        $("#idop").val(response.users.id)
                        $("#inpName").val(response.users.name)
                        $("#inpPrenoms").val(response.users.prenom)
                        $("#inpEmail").val(response.users.email)
                        $("#selPays").val(response.users.pays).change()
                        $("#inpVille").val(response.users.ville)
                        $("#inpTelephone_whatsapp").val("")
                        _('checkSoireePp').checked = response.users.soiree
                        _('checkExcursionPp').checked = response.users.excursion
                        _('checkSolde').checked = response.users.inscription_solde

                        if (response.users.fonction == "NOTAIRE") {
                            $("#notaire").prop("checked", true)
                        } else if (response.users.fonction == "COLLABORATEUR") {
                            $("#collaborateur").prop("checked", true)
                        }

                        tableListeAccompagnants = response.accompagnant

                        // if (response.accompagnant.length > 0) {

                        //     $('#bodyTableListeAccompagnant').html('')
                        // }

                        // $.each(response.accompagnant, function(index, value) {

                        //     tableListeAccompagnants.push({
                        //         idparticipant : value.idparticipant,
                        //         nom_ac: value.nom_ac,
                        //         prenom_ac: value.prenom_ac,
                        //         soiree : value.soiree,
                        //         excursion : value.excursion
                        //     })

                        //     checkedSoiree = value.checkedSoiree == 1 ? true : false 
                        //     checkedExcursion = value.checkedExcursion == 1 ? true : false

                        //     $('#bodyTableListeAccompagnant').append(
                        //         `<tr>
                    //             <td style="text-align: center;">
                    //                 <img src='{{ asset('assets/img/icons/effacer.png') }} ' style="width : 20px; cursor : pointer;" data-index = "${index}" id="btnSupprimeLigne">
                    //                 <img src='{{ asset('assets/img/icons/effacer.png') }} ' style="width : 20px; cursor : pointer;" data-index = "'${newIndex}'" id="btnModifierLigne">\
                    //             </td>
                    //             <td style="text-align : left; padding-left : 5px;">${value.nom_ac.toUpperCase()}</td>
                    //             <td style="text-align : left; padding-left : 5px;">${value.prenom_ac.toUpperCase()}</td>
                    //             <td style="text-align : center;"><input class="custom-radio" type="checkbox" data-index = "${index}" id="checkSoireeSurLigne" ' +${checkedSoiree} + '></td>
                    //             <td style="text-align : center;"><input class="custom-radio" type="checkbox" data-index = "${index}" id="checkExcursionSurLigne" ' +${checkedExcursion} + '></td>
                    //         </tr>`)
                        // });

                        chargerTableAccompagnement(tableListeAccompagnants)

                        actualiseTableEvenement()

                        let date_arrivee = ""
                        let date_depart = ""
                        if (response.users.date_arrivee != "" || response.users.date_arrivee != null) {
                            date_arrivee = response.users.date_arrivee.split(" ")[0]
                        }
                        if (response.users.date_depart != "" || response.users.date_depart != null) {
                            date_depart = response.users.date_depart.split(" ")[0]
                        }
                        $("#inpDate_arrivee").val(date_arrivee)
                        $("#inpHeure_arrivee").val(response.users.heure_arrivee)
                        $("#selCompagnie_arrivee").val(response.users.compagnie_arrivee).change()
                        $("#inpNum_vol_arrivee").val(response.users.num_vol_arrivee)

                        $("#inpDate_depart").val(date_depart)
                        $("#inpHeure_depart").val(response.users.heure_depart)
                        $("#selCompagnie_depart").val(response.users.compagnie_depart).change()
                        $("#inpNum_vol_depart").val(response.users.num_vol_depart)

                        $("#selHotel_choisi").val(response.users.hotel_choisi).change()
                        $("#inpNombre_jour").val(response.users.nombre_jour).trigger("input")
                        $("input[name=cocktail_bienvenue]").val(response.users.cocktail_bienvenue).trigger(
                            "change")
                        $("input[name=soire_cloture]").val(response.users.soire_cloture).trigger("change")
                        $("input[name=excursion_detente]").val(response.users.excursion_detente).trigger(
                            "change")

                        if (response.users.aide_visa == 0) {
                            $("#aide_visa_non").prop("checked", true)
                        } else if (response.users.aide_visa == 1) {
                            $("#aide_visa_oui").prop("checked", true)
                        }

                        if (response.users.mode_paiement == "CASH") {
                            $("#cash").prop("checked", true)
                        } else if (response.users.mode_paiement == "VIREMENT") {
                            $("#virement").prop("checked", true)
                        }

                        libTotauxAccompagnants()
                        sousTotalTable1()
                        return false
                    }
                    showToast(response.messages, type = 'warning', duration = 20000)
                },
                error: function(response) {
                    console.log(response);
                    // location.replace("{{ route('je-m-inscris') }}")
                    showToast(response.responseJSON.messages, type = 'error', duration = 20000)

                }
            });
        }

        $('#selPays').select2()
        $('#selCompagnie_depart').select2()
        $('#selCompagnie_arrivee').select2()

        // Fonction pour appliquer le masque au numéro
        function formatNumber(value, nbreCaractereApresVirgule = 2) {

            // Vérifier si la valeur est une chaîne contenant un nombre
            if (typeof value === 'string') {

                // Si la chaîne représente un nombre, convertir en float ou int
                if (!isNaN(value)) {
                    value = value.includes('.') ? parseFloat(value) : parseInt(value, 10);
                } else {
                    // Si ce n'est pas un nombre valide, retourner une erreur
                    return "Erreur : La valeur n'est pas un nombre valide.";
                }
            }

            // Si la valeur est toujours non numérique après vérification
            if (isNaN(value)) {
                return "Erreur : La valeur n'est pas un nombre.";
            }

            // Si c'est un flottant, limiter les décimales
            if (!Number.isInteger(value)) {
                value = parseFloat(value).toFixed(nbreCaractereApresVirgule);
            }

            // Convertir le nombre en chaîne pour le traitement
            let nombre = value.toString();

            // Diviser la chaîne en partie entière et décimale
            let parties = nombre.split('.');

            // Formater la partie entière avec des séparateurs de milliers
            let partieEntiere = parties[0].replace(/\B(?=(\d{3})+(?!\d))/g, "&nbsp;");

            // Construire le résultat
            let result = partieEntiere;

            // Ajouter la partie décimale si nécessaire
            if (parties.length > 1 && nbreCaractereApresVirgule > 0) {
                result += '.' + parties[1].substr(0, nbreCaractereApresVirgule);
            }

            return result;
        }

        _('libUnitNotaire').innerHTML = '1'
        _('libUnitCollaborateur').innerHTML = '0'
        _('libUnitAccompagnant').innerHTML = '0'

        _('libTotalNotaire').innerHTML = '375&nbsp;000&nbsp;F&nbsp;CFA'
        _('libTotalCollaborateur').innerHTML = '0'
        _('libTotalAccompagnant').innerHTML = '0'

        function _(elmt) {
            return document.getElementById(elmt);
        }

        var tableListeAccompagnants = []

        $(document).on('change', '[name="fonction"]', function() {

            let libUnitNotaire = "0"
            let libTotalNotaire = "0"

            let libUnitCollaborateur = "0"
            let libTotalCollaborateur = "0"

            let libAutreProffessionnel = "0"
            let libTotalProffessionnel = "0"

            let value = this.value

            switch (value) {
                case "NOTAIRE":
                    libUnitNotaire = '1'
                    libTotalNotaire = '375&nbsp;000&nbsp;F&nbsp;CFA'
                    break;
                case "COLLABORATEUR":

                    libUnitCollaborateur = '1'
                    libTotalCollaborateur = '150&nbsp;000&nbsp;F&nbsp;CFA'
                    break;
                case "ACCOMP":
                    libAutreProffessionnel = '1'
                    libTotalProffessionnel = '375&nbsp;000&nbsp;F&nbsp;CFA'
                    break;

                default:
                    break;
            }

            _('libUnitNotaire').innerHTML = libUnitNotaire
            _('libTotalNotaire').innerHTML = libTotalNotaire

            _('libUnitCollaborateur').innerHTML = libUnitCollaborateur
            _('libTotalCollaborateur').innerHTML = libTotalCollaborateur

            // _('libAutreProffessionnel').innerHTML = libAutreProffessionnel
            // _('libTotalProffessionnel').innerHTML = libTotalProffessionnel

            sousTotalTable1()

        })

        _('formulaireInscription').addEventListener('submit', function(e) {
            e.preventDefault()
        })

        _('btnAjouterAccompagnant').addEventListener('click', function(e) {

            e.preventDefault()

            if (_('inpNom_ac').value.replace(/\s/g, '') == '') {

                alert('VEUILLEZ SAISIR LE NOM DE L\'ACCOMPAGNANT;')
                return 0
            }

            let checkedSoiree = _('checkSoiree').checked ? 1 : 0
            let checkedExcursion = _('checkExcursion').checked ? 1 : 0

            tableListeAccompagnants.push({

                idparticipant: 0,
                nom_ac: _('inpNom_ac').value,
                prenom_ac: _('inpPrenom_ac').value,
                soiree: checkedSoiree,
                excursion: checkedExcursion
            })

            if (tableListeAccompagnants.length == 1) {

                $('#bodyTableListeAccompagnant').html('')
            }

            checkedSoiree = checkedSoiree ? 'checked' : ''
            checkedExcursion = checkedExcursion ? 'checked' : ''

            let newIndex = tableListeAccompagnants.length - 1

            $('#bodyTableListeAccompagnant').append(
                '\
                            <tr>\
                                <td style="text-align: center;">\
                                    <img src=\'{{ asset('assets/img/icons/effacer.png') }} \' style="width : 20px; cursor : pointer;" data-index = "' +
                newIndex +
                '" id="btnSupprimeLigne">\
                                    <img src=\'{{ asset('assets/img/icons/editer.png') }} \' style="width : 20px; cursor : pointer;" data-index = "' +
                newIndex + '" id="btnModifierLigne">\
                                </td>\
                                <td style="text-align : left; padding-left : 5px;">' + _('inpNom_ac').value.toUpperCase() + '</td>\
                                <td style="text-align : left; padding-left : 5px;">' + _('inpPrenom_ac').value
                .toUpperCase() +
                '</td>\
                                <td style="text-align : center;"><input class="custom-radio" type="checkbox" data-index = "' + newIndex +
                '" id="checkSoireeSurLigne" ' + checkedSoiree +
                '></td>\
                                <td style="text-align : center;"><input class="custom-radio" type="checkbox" data-index = "' + newIndex +
                '" id="checkExcursionSurLigne" ' + checkedExcursion + '></td>\
                            </tr>\
                        ')

            $('.inputActivity[name="cocktail_bienvenue"]').val(1 + tableListeAccompagnants.length).trigger('change')

            libTotauxAccompagnants()
            sousTotalTable1()
            actualiseTableEvenement()

            _('inpNom_ac').value = ''
            _('inpPrenom_ac').value = ''
            _('checkSoiree').checked = false
            _('checkExcursion').checked = false

        })

        _('checkSoireePp').addEventListener('click', function() {
            actualiseTableEvenement()
        })

        _('checkExcursionPp').addEventListener('click', function() {
            actualiseTableEvenement()
        })

        $(document).on('click', '#checkSoireeSurLigne', function() {

            let index = $(this).attr('data-index')
            let checked = this.checked ? 1 : 0

            tableListeAccompagnants[index].soiree = checked

            actualiseTableEvenement()
        })

        $(document).on('click', '#checkExcursionSurLigne', function() {

            let index = $(this).attr('data-index')
            let checked = this.checked ? 1 : 0

            tableListeAccompagnants[index].excursion = checked

            actualiseTableEvenement()
        })

        $(document).on('click', '#btnSupprimeLigne', function() {

            let index = $(this).attr('data-index')

            tableListeAccompagnants.splice(index, 1);
            
            $('.inputActivity[name="cocktail_bienvenue"]').val(1 + tableListeAccompagnants.length).trigger('change')
            libTotauxAccompagnants()
            sousTotalTable1()
            actualiseTableEvenement()
            

            if (tableListeAccompagnants.length == 0) {

                $('#bodyTableListeAccompagnant').html('\
                                <tr>\
                                    <td colspan="5" class="text-center">Liste des accompagnants</td>\
                                </tr>\
                            ')

                return 0
            }


            _('bodyTableListeAccompagnant').children[index].remove()
        })

        $(document).on('click', '#btnModifierLigne', function() {

            let index = $(this).data('index')
            data = tableListeAccompagnants[index]

            _('inpNom_ac').value = data.nom_ac
            _('inpPrenom_ac').value = data.prenom_ac
            _('checkSoiree').checked = data.soiree
            _('checkExcursion').checked = data.excursion
            _('indexAc').value = index

            _('btnAjouterAccompagnant').style.display = 'none'
            _('btnEditerAccompagnant').style.display = ''
        })

        _('btnEditerAccompagnant').addEventListener('click', function() {

            let index = _('indexAc').value

            tableListeAccompagnants[index].nom_ac = _('inpNom_ac').value.toUpperCase()
            tableListeAccompagnants[index].prenom_ac = _('inpPrenom_ac').value.toUpperCase()
            tableListeAccompagnants[index].soiree = _('checkSoiree').checked ? 1 : 0
            tableListeAccompagnants[index].excursion = _('checkExcursion').checked ? 1 : 0

            chargerTableAccompagnement(tableListeAccompagnants)

            _('indexAc').value = 0
            _('btnAjouterAccompagnant').style.display = ''
            _('btnEditerAccompagnant').style.display = 'none'

            _('inpNom_ac').value = ''
            _('inpPrenom_ac').value = ''
            _('checkSoiree').checked = false
            _('checkExcursion').checked = false
        })

        function saveInscription() {

            return new Promise((resolve, reject) => {

                let formulaireInscription = new FormData(_('formulaireInscription'))
                // formSaisieLigne.append('IDStructure', _('#selectIDStructureEnCours').value)
                formulaireInscription.append('soiree', _('checkSoireePp').checked ? 1 : 0)
                formulaireInscription.append('inscription_solde', _('checkSolde').checked ? 1 : 0)
                formulaireInscription.append('excursion', _('checkExcursionPp').checked ? 1 : 0)
                formulaireInscription.append('_token', '{{ csrf_token() }}')
                formulaireInscription.append('accompagnants', JSON.stringify(tableListeAccompagnants));
                formulaireInscription.append('total_frais', updateTotal());


                $.ajax({

                    url: "{{ route('saveInscription') }}",
                    type: 'POST',
                    data: formulaireInscription,
                    processData: false,
                    contentType: false,
                    dataType: 'json',
                   
                    // beforeSend : progressHandler(),
                    success: function(response) {

                        if (response.success != 1) {

                            showToast(response.msg || 'Une erreur est survenue veuillez réessayer.',
                                type = 'error', duration = 20000)
                        }

                        resolve(response)

                        // completeHandler()
                    },
                    error: function(error) {

                        reject()
                        showToast('Une erreur est survenue veuillez réessayer.', type = 'error',
                            duration = 30000)
                        $("#btnConfirmerFormulaire").prop("disabled", false)
                    }
                })
            })
        }

        function libTotauxAccompagnants() {

            let libUnitAccompagnant = tableListeAccompagnants.length
            let libTotalAccompagnant = parseInt(libUnitAccompagnant) * 150000

            _('libUnitAccompagnant').innerHTML = libUnitAccompagnant
            _('libTotalAccompagnant').innerHTML = formatNumber(libTotalAccompagnant) + '&nbsp;F&nbsp;CFA'
        }

        function sousTotalTable1() {

            let libTotalNotaire = parseInt(_('libTotalNotaire').innerHTML.replace('&nbsp;', '').replace('CFA', '').replace(
                'F', ''))
            let libTotalCollaborateur = parseInt(_('libTotalCollaborateur').innerHTML.replace('&nbsp;', '').replace('CFA',
                '').replace('F', ''))
            let libTotalAccompagnant = parseInt(_('libTotalAccompagnant').innerHTML.replace('&nbsp;', '').replace('CFA', '')
                .replace('F', ''))
            // let libTotalProffessionnel = parseInt(_('libTotalProffessionnel').innerHTML.replace('&nbsp;', '').replace('CFA', '').replace('F', ''))

            let total = libTotalNotaire + libTotalCollaborateur + libTotalAccompagnant // + libTotalProffessionnel
            _('libSoutTotalTable1').innerHTML = formatNumber(total) + '&nbsp;F&nbsp;CFA'

            let totalTotal = total + sousTotalTable2()

            _('libTotalTotal').innerHTML = formatNumber(totalTotal ?? 0) + '&nbsp;F&nbsp;CFA'

            return total
        }

        function actualiseTableEvenement() {

            let nbreParticipantSoiree = _('checkSoireePp').checked ? 1 : 0
            let nbreParticipantExcursion = _('checkExcursionPp').checked ? 1 : 0

            tableListeAccompagnants.forEach((value) => {

                if (value.soiree) {
                    nbreParticipantSoiree++
                }
                if (value.excursion) {
                    nbreParticipantExcursion++
                }
            })

            $('.inputActivity[name="soire_cloture"]').val(nbreParticipantSoiree).trigger('change')
            $('.inputActivity[name="excursion_detente"]').val(nbreParticipantExcursion).trigger('change')

            updateTotal()
        }

        var peutBoucler = true

        function sousTotalTable2() {

            if (peutBoucler) {

                peutBoucler = false

                document.querySelectorAll('.inputActivity').forEach(input => {

                    input.value = input.value; // Met à jour la valeur
                    input.dispatchEvent(new Event('change', {
                        bubbles: true
                    })); // Déclenche un vrai événement change
                })

                let total = parseInt(_('libTotalMontantSoireCloture').value.replace('&nbsp;', '').replace('CFA', '')
                    .replace('F', '').replace(/\s/g, '')) + parseInt(_('libTotalMontantExcursionDetente').value.replace(
                    '&nbsp;', '').replace('CFA', '').replace('F', '').replace(/\s/g, ''))

                _('libSoutTotalTable2').innerHTML = formatNumber(total ?? 0) + '&nbsp;F&nbsp;CFA'

                peutBoucler = true

                return total
            }

        }

        sousTotalTable1()

        function updateTotal() {

            let varSousTotalTable1 = sousTotalTable1()
            let varSousTotalTable2 = sousTotalTable2()

            let totalTotal = varSousTotalTable1 + varSousTotalTable2

            _('libTotalTotal').innerHTML = formatNumber(totalTotal ?? 0) + '&nbsp;F&nbsp;CFA'

            return totalTotal
        }

        document.querySelectorAll('.inputActivity').forEach(input => {
            input.addEventListener('input', updateRowTotal);
            input.addEventListener('change', updateRowTotal);
        });

        function updateRowTotal() {
            const row = this.closest('tr');
            const price = row.cells[1].textContent.trim();

            if (this.value < 0) {
                this.value = 0;
            }

            const quantity = parseInt(this.value) || 0;

            // Skip if "Offert"
            if (price.includes('Offert')) {
                row.cells[3].querySelector('input').value = 'Offert';
                return;
            }

            // Extract price number
            const priceValue = parseInt(price.replace(/\D/g, '')) || 0;
            const total = priceValue * quantity;

            // Format total
            row.cells[3].querySelector('input').value = total.toLocaleString('fr-FR') + ' F CFA';


            // updateTotal();
            let sousTotal2 = parseInt(_('libTotalMontantSoireCloture').value.replace('&nbsp;', '').replace('CFA', '')
                .replace('F', '').replace(/\s/g, '')) + parseInt(_('libTotalMontantExcursionDetente').value.replace(
                '&nbsp;', '').replace('CFA', '').replace('F', '').replace(/\s/g, ''))

            _('libSoutTotalTable2').innerHTML = formatNumber(sousTotal2) + '&nbsp;F&nbsp;CFA'

            let totalTotal = sousTotal2 + sousTotalTable1()
            _('libTotalTotal').innerHTML = formatNumber(totalTotal) + '&nbsp;F&nbsp;CFA'

        }

        _('btnConfirmerFormulaire').addEventListener('click', function(e) {

            e.preventDefault()

            $("#btnConfirmerFormulaire").prop("disabled", true)
            // if (_('inpName').value.replace(/\s/g, '') == '') {
            //     showToast('Veuillez renseigner votre nom.', type = 'error', duration = 5000)
            //     _('inpName').focus()
            //     return 0
            // }

            // if (_('inpPrenoms').value.replace(/\s/g, '') == '') {
            //     showToast('Veuillez renseigner votre prénom.', type = 'error', duration = 5000)
            //     _('inpPrenoms').focus()
            //     return 0
            // }

            // if (_('inpEmail').value.replace(/\s/g, '') == '') {
            //     showToast('Veuillez renseigner votre adresse mail.', type = 'error', duration = 5000)
            //     _('inpEmail').focus()
            //     return 0
            // }


            // if (_('selPays').value == '') {

            //     showToast('Veuillez sélectionner votre nationalité.', type = 'error', duration = 5000)
            //     _('selPays').focus()
            //     return 0
            // }

            // if (_('inpVille').value.replace(/\s/g, '') == '') {

            //     showToast('Veuillez renseigner votre ville.', type = 'error', duration = 5000)
            //     _('inpVille').focus()
            //     return 0
            // }

            // if (_('inpTelephone_whatsapp').value.replace(/\s/g, '') == '') {
            //     showToast('Veuillez renseigner votre contact.', type = 'error', duration = 5000)
            //     _('inpTelephone_whatsapp').focus()
            //     return 0
            // }

            // if (_('inpDate_arrivee').value == null || _('inpDate_arrivee').value == '') {

            //     showToast('Veuillez renseigner votre date d\'arrivée.', type = 'error', duration = 5000)
            //     _('inpDate_arrivee').focus()
            //     return 0
            // }

            // if (_('inpHeure_arrivee').value == null || _('inpHeure_arrivee').value == '') {

            //     showToast('Veuillez renseigner votre heure d\'arrivée.', type = 'error', duration = 5000)
            //     _('inpHeure_arrivee').focus()
            //     return 0
            // }

            // if (_('selCompagnie_arrivee').value == null || _('selCompagnie_arrivee').value == '') {

            //     showToast('Veuillez renseigner la compagnie de votre vol d\'arrivée.', type = 'error', duration =
            //         5000)
            //     _('selCompagnie_arrivee').focus()
            //     return 0
            // }

            // if (_('inpNum_vol_arrivee').value == null || _('inpNum_vol_arrivee').value == '') {

            //     showToast('Veuillez renseigner le numero de votre vol d\'arrivée.', type = 'error', duration = 5000)
            //     _('inpNum_vol_arrivee').focus()
            //     return 0
            // }

            // if (_('inpDate_depart').value == null || _('inpDate_depart').value == '') {

            //     showToast('Veuillez renseigner votre date de départ.', type = 'error', duration = 5000)
            //     _('inpDate_depart').focus()
            //     return 0
            // }

            // if (_('inpHeure_depart').value == null || _('inpHeure_depart').value == '') {

            //     showToast('Veuillez renseigner votre heure de départ.', type = 'error', duration = 5000)
            //     _('inpHeure_depart').focus()
            //     return 0
            // }

            // if (_('selCompagnie_depart').value == null || _('selCompagnie_depart').value == '') {

            //     showToast('Veuillez renseigner la compagnie de votre vol de départ.', type = 'error', duration =
            //         5000)
            //     _('selCompagnie_depart').focus()
            //     return 0
            // }

            // if (_('inpNum_vol_depart').value == null || _('inpNum_vol_depart').value == '') {

            //     showToast('Veuillez renseigner le numero de votre vol de départ.', type = 'error', duration = 5000)
            //     _('inpNum_vol_depart').focus()
            //     return 0
            // }

            // if (_('selHotel_choisi').value == 0) {

            //     showToast('Veuillez sélectionner votre hôtel.', type = 'error', duration = 5000)
            //     _('selHotel_choisi').focus()
            //     return 0
            // }

            // if (_('inpNombre_jour').value.replace(/\s/g, '') == '' || _('inpNombre_jour').value == 0) {
            //     showToast('Veuillez renseigner= la durée de votre séjour.', type = 'error', duration = 5000)
            //     _('inpNombre_jour').focus()
            //     return 0
            // }

            saveInscription()
                .then((response) => {

                    if (response.success == 1) {

                        showToast('Votre demande a bien été soumis avec succès', type = 'success', duration =
                            20000)

                        setTimeout(() => {
                            location.href = "{{ route('listeParticipant') }}"
                            // location.reload();
                        }, 2000);
                    }
                })
        })

        // Détecter le changement de pays
        $('#selPays').on('change', function() {
            let prefix = $(this).find(':selected').data('tel'); // Récupère l'attribut data-tel
            let inputTel = $('#inpTelephone_whatsapp');

            if (prefix) {
                inputTel.val('+' + prefix + ' '); // Ajoute le préfixe
            } else {
                inputTel.val(''); // Vide le champ si aucun pays sélectionné
            }
        });
    </script>
@endsection