@extends('Layouts.app')

@section('style')
@endsection

@section('content')
<main>
  <section>
    <div class="container">
      <div class="progress-bar-wrapper d-flex align-items-center">
          <!-- Step 1 -->
          {{-- {{dd(session('AssurSante_session'));}}            --}}
          <div class="step active">
              <div class="circle bg-success text-white">1</div>
              <p class="text-success mt-2"> complémentaire santé</p>
          </div>
          <div class="line line-active"></div>
          <!-- Step 2 -->
          <div class="step">
              <div class="circle {{session('AssurSante_session.process')>=1 ? 'bg-success text-white' : ''}}">2</div>
              <p class="{{session('AssurSante_session.process')>=1 ? 'text-success' : ''}} mt-2">Déclaration</p>
          </div>
          <div class="line"></div>
          <!-- Step 3 -->
          <div class="step">
              <div class="circle {{session('AssurSante_session.process')>=2 ? 'bg-success text-white' : ''}}">3</div>
              <p class="{{session('AssurSante_session.process')>=2 ? 'text-success' : ''}} mt-2">Données Contrat</p>
          </div>
          <div class="line"></div>
          <!-- Step 4 -->
          <div class="step">
              <div class="circle {{session('AssurSante_session.process')>=3 ? 'bg-success text-white' : ''}}">4</div>
              <p class="{{session('AssurSante_session.process')>=3 ? 'text-success' : ''}} mt-2">Confirmation</p>
          </div>
      </div>
  </div>
  
  </section>
  <section>
    <div class="container">
      <div class="row">
        <div class="col-md-7">
            <div class="form-container sec-section-1 {{empty(session('AssurSante_session.process')) ? '' : 'd-none'}}">
              <div class="form-header mb-5">
                  <p>Bonjour ! Obtenez un devis d’assurance auto en quelques minutes, au meilleur prix.</p>
              </div>
              <form method="POST" action="{{ route('setAssurSante1') }}" id="setAssurSante1" enctype="multipart/form-data">
                @csrf
                <div id="errorMessages1"></div>
                <h2 class="mb-3">Souscrivez à votre complémentaire santé</h2>
                <div class="row">
                    <div class="col-md-6">
                        <label for="civilite" class="form-label">Civilité *</label>
                        <select class="form-select" name="civilite" id="civilite" required>
                            <option value="">Sélectionnez</option>
                            <option value="Monsieur">Monsieur</option>
                            <option value="Madame">Madame</option>
                        </select>
                    </div>
            
                    <div class="col-md-6">
                        <label for="situation" class="form-label">Situation *</label>
                        <select class="form-select" name="situation" id="situation" required>
                            <option value="">Sélectionnez</option>
                            <option value="Célibataire">Célibataire</option>
                            <option value="Marié(e)">Marié(e)</option>
                            <option value="Veuf(ve)">Veuf(ve)</option>
                            <option value="Divorcé(e)">Divorcé(e)</option>
                        </select>
                    </div>
            
                    <div class="col-md-6">
                        <label for="nom" class="form-label">Nom *</label>
                        <input type="text" class="form-control" name="nom" id="nom" required>
                    </div>
            
                    <div class="col-md-6">
                        <label for="prenom" class="form-label">Prénom *</label>
                        <input type="text" class="form-control" name="prenom" id="prenom" required>
                    </div>
            
                    <div class="col-md-6">
                        <label for="date_naissance" class="form-label">Date de naissance *</label>
                        <input type="date" class="form-control" name="date_naissance" id="date_naissance" required>
                    </div>
            
                    <div class="col-md-6">
                        <label for="numero_pension" class="form-label">N° Pension *</label>
                        <input type="text" class="form-control" name="numero_pension" id="numero_pension" required>
                    </div>
            
                    <div class="col-md-6">
                        <label for="numero_cnss" class="form-label">N° CNSS *</label>
                        <input type="text" class="form-control" name="numero_cnss" id="numero_cnss" required>
                    </div>
            
                    <div class="col-md-6">
                        <label for="cin" class="form-label">CIN *</label>
                        <input type="text" class="form-control" name="cin" id="cin" required>
                    </div>
            
                    <div class="col-md-6">
                        <label for="telephone" class="form-label">N° téléphone *</label>
                        <input type="tel" class="form-control" name="telephone" id="telephone" required>
                    </div>
            
                    <div class="col-md-6">
                        <label for="email" class="form-label">Email *</label>
                        <input type="email" class="form-control" name="email" id="email" required>
                    </div>
            
                    <div class="col-md-6">
                        <label for="adresse" class="form-label">Adresse *</label>
                        <input type="text" class="form-control" name="adresse" id="adresse" required>
                    </div>
            
                    <div class="col-md-6">
                        <label for="ville" class="form-label">Ville *</label>
                        <input type="text" class="form-control" name="ville" id="ville" required>
                    </div>
            
                    <div class="col-md-12">
                        <label for="bulletin_adhesion" class="form-label">Téléchargez votre bulletin d’adhésion *</label>
                        <input type="file" class="form-control" name="bulletin_adhesion" id="bulletin_adhesion" required>
                    </div>
                </div>
            
                <div class="row mt-4">
                    <div class="col-md-6">
                        <a class="btn btn-primary btn-precedent-section-1 mt-3"><i class="fa fa-arrow-left"></i> Précédent</a>
                    </div>
                    <div class="col-md-6 text-end">
                        <button type="submit" class="btn btn-primary btn-suivant-section-1 mt-3">Suivant <i class="fa fa-arrow-right"></i></button>
                    </div>
                </div>
            </form>
                      
          </div>
          
          <div class="form-container sec-section-2 {{session('AssurSante_session.process')=='1' ? '' : 'd-none'}}">
              <div class="form-header">
                  <h2>Déclaration : </h2>
              </div>
              <form method="POST" action="{{ route('setAssurSante2') }}" id="setAssurSante2">
                @csrf
                <div id="errorMessages2"></div>
                <div class="row">
                    <div class="col-md-6">
                        <label for="organisme" class="form-label">Organisme</label>
                        <select class="form-select" name="organisme" id="organisme" required>
                            <option value="">Choisissez...</option>
                            <option value="MINISTERE DES HABOUS ET DES AFFAIRES ISLAMIQUE">MINISTERE DES HABOUS ET DES AFFAIRES ISLAMIQUE</option>
                            <option value="MINISTERE DE L'INTERIEUR ET FONDATION HASSAN II">MINISTERE DE L'INTERIEUR ET FONDATION HASSAN II</option>
                            <option value="MINISTERE DE LA JUSTICE">MINISTERE DE LA JUSTICE</option>
                            <option value="STE AOSECR MGPAP ">STE AOSECR MGPAP </option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label for="cin" class="form-label">N° CIN</label>
                        <input type="text" class="form-control" name="cin" id="cin" required>
                    </div>
                    <div class="col-md-6">
                        <label for="numero_assure" class="form-label">N° Assuré</label>
                        <input type="text" class="form-control" name="numero_assure" id="numero_assure" required>
                    </div>
                    <div class="col-md-6">
                        <label for="nom_assure" class="form-label">Nom Assuré</label>
                        <input type="text" class="form-control" name="nom_assure" id="nom_assure" required>
                    </div>
                    <div class="col-md-6">
                        <label for="telephone" class="form-label">Téléphone</label>
                        <input type="tel" class="form-control" name="telephone" id="telephone" required>
                    </div>
                    <div class="col-md-6">
                        <label for="malade" class="form-label">Malade</label>
                        <input type="text" class="form-control" name="malade" id="malade" required>
                    </div>
                    <div class="col-md-6">
                        <label for="date_consultation" class="form-label">Date consultation</label>
                        <input type="date" class="form-control" name="date_consultation" id="date_consultation" required>
                    </div>
                    <div class="col-md-6">
                        <label for="matricule" class="form-label">Matricule</label>
                        <input type="text" class="form-control" name="matricule" id="matricule" required>
                    </div>
                    <div class="col-md-6">
                        <label for="rib" class="form-label">RIB</label>
                        <input type="text" class="form-control" name="rib" id="rib" required>
                    </div>
                    <div class="col-md-6">
                        <label for="montant_frais" class="form-label">Montant frais engagés</label>
                        <input type="text" class="form-control" name="montant_frais" id="montant_frais" required>
                    </div>
                    <div class="col-md-12">
                        <label for="dossier_declaration" class="form-label">Dossier déclaration maladie</label>
                        <input type="file" class="form-control" name="dossier_declaration" id="dossier_declaration" required>
                    </div>
                    <div class="col-md-12">
                        <label for="cin_document" class="form-label">CIN</label>
                        <input type="file" class="form-control" name="cin_document" id="cin_document" required>
                    </div>
                    <div class="col-md-12">
                        <label for="bulletin_adhesion" class="form-label">Bulletin adhesion</label>
                        <input type="file" class="form-control" name="bulletin_adhesion" id="bulletin_adhesion" required>
                    </div>
                    <div class="col-md-12">
                        <label for="document_justificatif" class="form-label">Document justificatif</label>
                        <input type="file" class="form-control" name="document_justificatif" id="document_justificatif" required>
                    </div>
                </div>
                <div class="row mt-4">
                    <div class="col-md-6">
                        <a class="btn btn-primary btn-precedent-section-2 mt-3"><i class="fa fa-arrow-left"></i> Précédent</a>
                    </div>
                    <div class="col-md-6 text-end">
                        <button type="submit" class="btn btn-primary btn-suivant-section-2 mt-3">Suivant <i class="fa fa-arrow-right"></i></button>
                    </div>
                </div>
            </form>            
          </div>
          <div class="form-container sec-section-3 {{session('AssurSante_session.process')=='2' ? '' : 'd-none'}}">
            <form>
                <div class="row g-4">
                    <!-- First Card -->
                    <div class="col-md-12">
                        <div class="card h-100 granties border shadow-sm">
                            <div class="card-body p-2 pt-4 position-relative">
                                <div class="icon-circle">
                                </div>
                                <strong>100% en ligne</strong>
                                <p>
                                    Paiement en ligne
                                </p>
                                <input class="invisible-checkbox" type="checkbox" name="garanties[]" value=" tous Accidents" />
                            </div>
                        </div>
                    </div>
                    <!-- Second Card -->
                    <div class="col-md-12">
                        <div class="card h-100 granties border shadow-sm">
                            <div class="card-body p-2 pt-4">
                                <div class="icon-circle">
                                    
                                </div>
                                <strong>En espèce ou par chèque</strong>
                                <p>
                                    Payez à la livraison ou à l’agence WAFA la plus proche
                                </p>
                                <input class="invisible-checkbox" type="checkbox" name="garanties[]" value="Sérénité" />
                            </div>
                        </div>
                    </div>
                    <!-- Third Card -->
                    <div class="col-md-12">
                        <div class="card h-100 granties border shadow-sm">
                            <div class="card-body p-2 pt-4">
                                <div class="icon-circle">
                                    
                                </div>
                                <strong>Par prélèvement</strong>
                                <p>
                                    Payez par prélèvement depuis votre salaire
                                </p>
                                <input class="invisible-checkbox" type="checkbox" name="garanties[]" value="Vol" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                    <a class="btn btn-primary btn-precedent-section-3 mt-4"><i class="fa fa-arrow-left"></i> Precedent</a>
                    </div>
                    <div class="col-md-6 text-end">
                    <a  id="submit-btn" class="btn btn-primary btn-suivant-section-3 mt-3">suivant  <i class="fa fa-arrow-right"></i></a>
                    </div>
                </div>
            </form>
          </div>
          <div class="form-container sec-section-4 {{session('AssurSante_session.process')=='3' ? '' : 'd-none'}}">
            <form>
                <div class="card confirmation-card shadow-sm">
                    <div class="card-body text-center">
                        <!-- Info Icon -->
                        <div class="confirmation-icon mb-4">
                            <i class="fa fa-info-circle fa-4x text-info"></i> <!-- Changed to info icon -->
                        </div>
                
                        <!-- Confirmation Message -->
                        <h3 class="card-title mb-3">Confirmation des informations</h3>
                        <p class="card-text mb-4">
                            Toutes les informations requises ont été fournies avec succès.
                        </p>
                
                        <!-- Additional Message -->
                        <p class="card-text text-muted mb-4">
                            En cliquant sur <strong>Envoyer</strong>, votre demande sera envoyée et la première étape de la création de votre compte sera terminée.
                        </p>
                
                        <!-- Navigation Buttons -->
                        <div class="row mt-4">
                            <div class="col-md-6">
                                <a class="btn btn-primary btn-precedent-section-4 w-100"><i class="fa fa-arrow-left"></i> Précédent</a>
                            </div>
                            <div class="col-md-6 text-end">
                                <a class="btn btn-success btn-envoyer w-100">Envoyer <i class="fa fa-paper-plane"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
          </div>
          <div class="form-container sec-section-5 {{session('AssurSante_session.process')=='4' ? '' : 'd-none'}}">
            <form>
                <div class="card confirmation-card shadow-sm">
                    <div class="card-body text-center">
                        <!-- Info Icon -->
                        <div class="confirmation-icon mb-4">
                            <i class="fa fa-info-circle fa-4x text-info"></i> <!-- Changed to info icon -->
                        </div>
                
                        <!-- Confirmation Message -->
                        <h3 class="card-title mb-3">Confirmation des informations</h3>
                        <p class="card-text mb-4">
                            Toutes les informations requises ont été fournies avec succès.
                        </p>
                
                        <!-- Additional Message -->
                        <p class="card-text text-muted mb-4">
                            En cliquant sur <strong>Envoyer</strong>, votre demande sera envoyée et la première étape de la création de votre compte sera terminée.
                        </p>
                
                        <!-- Navigation Buttons -->
                        <div class="row mt-4">
                            <div class="col-md-6">
                                <a class="btn btn-primary btn-precedent-section-4 w-100"><i class="fa fa-arrow-left"></i> Précédent</a>
                            </div>
                            <div class="col-md-6 text-end">
                                <a class="btn btn-success btn-envoyer w-100">Envoyer <i class="fa fa-paper-plane"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
          </div>
        </div>
        <div class="col-md-5">
            <div class="info-card h-100 p-4">
                <div class="info-section">
                    <h3 class="card-title mb-4">INFOS:</h3>
            
                    <!-- Display InfoContact -->
                    @if(!empty(session('AssurSante_session.InfoContact')))
                        @if(!empty(session('AssurSante_session.InfoContact.telephone')))
                            <div class="row mb-3">
                                <div class="col label"><strong> Téléphone</strong></div>
                                <div class="col">{{ session('AssurSante_session.InfoContact.telephone') }}</div>
                            </div>
                        @endif
                        @if(!empty(session('AssurSante_session.InfoContact.email')))
                            <div class="row mb-3">
                                <div class="col label"><strong> Email</strong></div>
                                <div class="col">{{ session('AssurSante_session.InfoContact.email') }}</div>
                            </div>
                        @endif
                    @endif
            
                    <!-- Display PersonalDetails -->
                    @if(!empty(session('AssurSante_session.PersonalDetails')))
                        @if(!empty(session('AssurSante_session.PersonalDetails.prenom')))
                            <div class="row mb-3">
                                <div class="col label"><strong> Prénom et Nom</strong></div>
                                <div class="col">{{ session('AssurSante_session.PersonalDetails.prenom').' '.session('AssurSante_session.PersonalDetails.nom') }}</div>
                            </div>
                        @endif
                        @if(!empty(session('AssurSante_session.PersonalDetails.civilite')))
                            <div class="row mb-3">
                                <div class="col label"><strong> Civilité</strong></div>
                                <div class="col">{{ session('AssurSante_session.PersonalDetails.civilite') }}</div>
                            </div>
                        @endif
                        @if(!empty(session('AssurSante_session.PersonalDetails.date_naissance')))
                            <div class="row mb-3">
                                <div class="col label"><strong> Date de naissance</strong></div>
                                <div class="col">{{ session('AssurSante_session.PersonalDetails.date_naissance') }}</div>
                            </div>
                        @endif
                        @if(!empty(session('AssurSante_session.PersonalDetails.numero_pension')))
                            <div class="row mb-3">
                                <div class="col label"><strong> N° Pension</strong></div>
                                <div class="col">{{ session('AssurSante_session.PersonalDetails.numero_pension') }}</div>
                            </div>
                        @endif
                        @if(!empty(session('AssurSante_session.PersonalDetails.numero_cnss')))
                            <div class="row mb-3">
                                <div class="col label"><strong> N° CNSS</strong></div>
                                <div class="col">{{ session('AssurSante_session.PersonalDetails.numero_cnss') }}</div>
                            </div>
                        @endif
                    @endif
            
                    
                </div>
            </div>
            
        </div>
      </div>
    </div>
  </section>
</main>
@endsection

@section('script')
    <script>
      $(document).ready(function() {
        $(document).on('click', '.btn-suivant-section-1', function () {
            let isValid = true;
            let errorMessages = [];

            // Vider les erreurs précédentes
            $("#errorMessages1").html("");
            $(".form-control").removeClass("is-invalid");
            $(".form-check-input").removeClass("is-invalid");

            // Vérification de la Civilité
            if ($("#civilite").val() === "") {
                isValid = false;
                errorMessages.push("Veuillez sélectionner une civilité.");
                $("#civilite").addClass("is-invalid");
            }

            // Vérification de la Situation
            if ($("#situation").val() === "") {
                isValid = false;
                errorMessages.push("Veuillez sélectionner une situation.");
                $("#situation").addClass("is-invalid");
            }

            // Vérification du Nom (Lettres uniquement)
            let nom = $("#nom").val().trim();
            if (!/^[a-zA-Z]+$/.test(nom)) {
                isValid = false;
                errorMessages.push("Le nom doit contenir uniquement des lettres.");
                $("#nom").addClass("is-invalid");
            }

            // Vérification du Prénom (Lettres uniquement)
            let prenom = $("#prenom").val().trim();
            if (!/^[a-zA-Z]+$/.test(prenom)) {
                isValid = false;
                errorMessages.push("Le prénom doit contenir uniquement des lettres.");
                $("#prenom").addClass("is-invalid");
            }

            // Vérification de la Date de naissance
            if ($("#date_naissance").val() === "") {
                isValid = false;
                errorMessages.push("Veuillez entrer votre date de naissance.");
                $("#date_naissance").addClass("is-invalid");
            }

            // Vérification du N° Pension (Chiffres uniquement)
            let numeroPension = $("#numero_pension").val().trim();
            if (!/^\d+$/.test(numeroPension)) {
                isValid = false;
                errorMessages.push("Le numéro de pension doit contenir uniquement des chiffres.");
                $("#numero_pension").addClass("is-invalid");
            }

            // Vérification du N° CNSS (Chiffres uniquement)
            let numeroCNSS = $("#numero_cnss").val().trim();
            if (!/^\d+$/.test(numeroCNSS)) {
                isValid = false;
                errorMessages.push("Le numéro CNSS doit contenir uniquement des chiffres.");
                $("#numero_cnss").addClass("is-invalid");
            }

            // Vérification du CIN (Chiffres uniquement)
            let cin = $("#cin").val().trim();
            if (!/^\d+$/.test(cin)) {
                isValid = false;
                errorMessages.push("Le CIN doit contenir uniquement des chiffres.");
                $("#cin").addClass("is-invalid");
            }

            // Vérification du N° téléphone (10 chiffres commençant par 06 / 07)
            let telephone = $("#telephone").val().trim();
            if (!/^(06|07)\d{8}$/.test(telephone)) {
                isValid = false;
                errorMessages.push("Le numéro de téléphone doit contenir 10 chiffres et commencer par 06 ou 07.");
                $("#telephone").addClass("is-invalid");
            }

            // Vérification de l'Email
            let email = $("#email").val().trim();
            if (!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(email)) {
                isValid = false;
                errorMessages.push("Veuillez entrer une adresse email valide.");
                $("#email").addClass("is-invalid");
            }

            // Vérification de l'Adresse
            let adresse = $("#adresse").val().trim();
            if (adresse === "") {
                isValid = false;
                errorMessages.push("Veuillez entrer votre adresse.");
                $("#adresse").addClass("is-invalid");
            }

            // Vérification de la Ville (Lettres uniquement)
            let ville = $("#ville").val().trim();
            if (!/^[a-zA-Z]+$/.test(ville)) {
                isValid = false;
                errorMessages.push("La ville doit contenir uniquement des lettres.");
                $("#ville").addClass("is-invalid");
            }

            // Vérification de l'upload du Bulletin d'adhésion
            let bulletinAdhesion = $("#bulletin_adhesion").val();
            if (bulletinAdhesion === "") {
                isValid = false;
                errorMessages.push("Veuillez télécharger votre bulletin d’adhésion.");
                $("#bulletin_adhesion").addClass("is-invalid");
            }

            // Affichage des erreurs
            if (!isValid) {
                let errorHtml = "<div class='alert alert-danger'><ul>";
                errorMessages.forEach(function (msg) {
                    errorHtml += "<li>" + msg + "</li>";
                });
                errorHtml += "</ul></div>";
                $("#errorMessages1").html(errorHtml);
            } else {
                // Si tous les champs sont valides, soumettre le formulaire
                $('#setAssurSante1').submit();
            }
        });

        $(document).on('click', '.btn-suivant-section-2', function () {
            let isValid = true;
            let errorMessages = [];

            // Clear previous errors
            $("#errorMessages2").html("");
            $(".form-control, .form-select").removeClass("is-invalid");

            // Verify Organisme
            if ($("#organisme").val() === "") {
                isValid = false;
                errorMessages.push("Veuillez sélectionner un organisme.");
                $("#organisme").addClass("is-invalid");
            }

            // Verify N° CIN
            let cin = $("#cin").val().trim();
            if (!cin) {
                isValid = false;
                errorMessages.push("Veuillez entrer le N° CIN.");
                $("#cin").addClass("is-invalid");
            }

            // Verify N° Assuré
            let numeroAssure = $("#numero_assure").val().trim();
            if (!numeroAssure || isNaN(numeroAssure)) {
                isValid = false;
                errorMessages.push("Veuillez entrer un N° Assuré valide.");
                $("#numero_assure").addClass("is-invalid");
            }

            // Verify Nom Assuré
            let nomAssure = $("#nom_assure").val().trim();
            if (!nomAssure) {
                isValid = false;
                errorMessages.push("Veuillez entrer le nom de l'assuré.");
                $("#nom_assure").addClass("is-invalid");
            }

            // Verify Téléphone
            let telephone = $("#telephone").val().trim();
            if (!/^\d{10}$/.test(telephone)) {
                isValid = false;
                errorMessages.push("Le numéro de téléphone doit comporter 10 chiffres.");
                $("#telephone").addClass("is-invalid");
            }

            // Verify Malade
            let malade = $("#malade").val().trim();
            if (!malade) {
                isValid = false;
                errorMessages.push("Veuillez entrer le nom du malade.");
                $("#malade").addClass("is-invalid");
            }

            // Verify Date Consultation
            let dateConsultation = $("#date_consultation").val().trim();
            if (!dateConsultation) {
                isValid = false;
                errorMessages.push("Veuillez entrer la date de consultation.");
                $("#date_consultation").addClass("is-invalid");
            }

            // Verify Matricule
            let matricule = $("#matricule").val().trim();
            if (!matricule) {
                isValid = false;
                errorMessages.push("Veuillez entrer le matricule.");
                $("#matricule").addClass("is-invalid");
            }

            // Verify RIB
            let rib = $("#rib").val().trim();
            if (!/^\d{24}$/.test(rib)) {
                isValid = false;
                errorMessages.push("Veuillez entrer un RIB valide (24 chiffres).");
                $("#rib").addClass("is-invalid");
            }

            // Verify Montant Frais Engagés
            let montantFrais = $("#montant_frais").val().trim();
            if (!montantFrais || isNaN(montantFrais)) {
                isValid = false;
                errorMessages.push("Veuillez entrer le montant des frais engagés.");
                $("#montant_frais").addClass("is-invalid");
            }

            // Verify Dossier Déclaration Maladie (File upload)
            if (!$("#dossier_declaration").val()) {
                isValid = false;
                errorMessages.push("Veuillez joindre le dossier de déclaration de la maladie.");
                $("#dossier_declaration").addClass("is-invalid");
            }

            // Verify CIN Document (File upload)
            if (!$("#cin_document").val()) {
                isValid = false;
                errorMessages.push("Veuillez joindre votre CIN.");
                $("#cin_document").addClass("is-invalid");
            }

            // Verify Bulletin Adhesion (File upload)
            if (!$("#bulletin_adhesion").val()) {
                isValid = false;
                errorMessages.push("Veuillez joindre votre bulletin d'adhésion.");
                $("#bulletin_adhesion").addClass("is-invalid");
            }

            // Verify Document Justificatif (File upload)
            if (!$("#document_justificatif").val()) {
                isValid = false;
                errorMessages.push("Veuillez joindre un document justificatif.");
                $("#document_justificatif").addClass("is-invalid");
            }

            // Display errors
            if (!isValid) {
                let errorHtml = "<div class='alert alert-danger'><ul>";
                errorMessages.forEach(function (msg) {
                    errorHtml += "<li>" + msg + "</li>";
                });
                errorHtml += "</ul></div>";
                $("#errorMessages2").html(errorHtml);
            } else {
                // Submit the form if everything is valid
                $('#setAssurSante2').submit();
            }
        });

        $(document).on('click', '.btn-precedent-section-2', function() {
          $('.sec-section-2').addClass('d-none');
          $('.sec-section-1').removeClass('d-none');
        });
        $(document).on('click', '.btn-suivant-section-3', function() {
          $('.sec-section-3').addClass('d-none');
          $('.sec-section-4').removeClass('d-none');
        });
        $(document).on('click', '.btn-suivant-section-4', function() {
          $('.sec-section-4').addClass('d-none');
          $('.sec-section-5').removeClass('d-none');
        });
        $(document).on('click', '.btn-precedent-section-4', function() {
          $('.sec-section-4').addClass('d-none');
          $('.sec-section-3').removeClass('d-none');
        });
        $(document).on('click', '.btn-suivant-section-5', function() {
          $('.sec-section-5').addClass('d-none');
          $('.sec-section-6').removeClass('d-none');
        });
        $(document).on('click', '.btn-precedent-section-5', function() {
          $('.sec-section-5').addClass('d-none');
          $('.sec-section-4').removeClass('d-none');
        });
        $(document).on('click', '.btn-precedent-section-3', function() {
          $('.sec-section-3').addClass('d-none');
          $('.sec-section-2').removeClass('d-none');
        });
        $(document).on('click', '.btn-precedent-section-4', function() {
          $('.sec-section-4').addClass('d-none');
          $('.sec-section-3').removeClass('d-none');
        });
      });
    </script>
    <script>
      
      $(document).ready(function() {
        $('#upload_imageInputPerson').on('change', function(event) {
            const file = event.target.files[0]; // Get the selected file
            alert(file);
            if (file) {
                const reader = new FileReader();
               
                reader.onload = function(e) {
                    // Set the src of the img tag to the base64 image
                    $('#displayCroppedImage').attr('src', e.target.result).show();
                };
                
                reader.readAsDataURL(file); // Read the file as a data URL
            }
        });
    });

    $(document).on('click', '.granties', function() {
        if ($(this).hasClass('active')) {
            $(this).removeClass('active');
            $(this).find('.invisible-checkbox').removeAttr('checked','checked');
        }else {
            $(this).addClass('active');
            $(this).find('.invisible-checkbox').attr('checked','checked');
        }
    });
  </script>
<script>
    $(document).ready(function() {
        const fileInputs = {
            'id-card': { preview: '#id-card-preview', error: '#id-card-error', files: [] },
            'license': { preview: '#license-preview', error: '#license-error', files: [] },
            'gray-card': { preview: '#gray-card-preview', error: '#gray-card-error', files: [] }
        };

        function handleFileUpload(inputId, preview, error) {
            $(`#${inputId}`).on('change', function() {
                const files = this.files;
                $(preview).empty();
                fileInputs[inputId].files = [];

                if (files.length > 2) {
                    $(error).show();
                    $(this).val('');
                } else {
                    $(error).hide();
                    for (let i = 0; i < files.length; i++) {
                        const reader = new FileReader();
                        reader.onload = function(e) {
                            const imgContainer = $('<div class="image-container"></div>');
                            const img = $('<img src="' + e.target.result + '" alt="Preview">');
                            const removeBtn = $('<button class="remove-btn">&times;</button>');

                            removeBtn.on('click', function() {
                                imgContainer.remove();
                                fileInputs[inputId].files = fileInputs[inputId].files.filter((_, index) => index !== i);
                                $(`#${inputId}`)[0].files = new FileList(); // Clear input files
                                fileInputs[inputId].files.forEach(file => {
                                    const dataTransfer = new DataTransfer();
                                    dataTransfer.items.add(file);
                                    $(`#${inputId}`)[0].files = dataTransfer.files;
                                });
                            });

                            imgContainer.append(img, removeBtn);
                            $(preview).append(imgContainer);
                            fileInputs[inputId].files.push(files[i]);
                        }
                        reader.readAsDataURL(files[i]);
                    }
                }
            });
        }

        Object.keys(fileInputs).forEach(inputId => {
            handleFileUpload(inputId, fileInputs[inputId].preview, fileInputs[inputId].error);
        });

        $('#submit-btn').on('click', function() {
            let allFilesAdded = true;
            Object.keys(fileInputs).forEach(inputId => {
                if (fileInputs[inputId].files.length < 2) {
                    allFilesAdded = false;
                    $(fileInputs[inputId].error).text('Vous devez télécharger 2 fichiers.').show();
                } else {
                    $(fileInputs[inputId].error).hide();
                }
            });

            if (allFilesAdded) {
                $('#validation-message').text('Tous les fichiers ont été téléchargés avec succès.').css('color', 'green');
            } else {
                $('#validation-message').text('Veuillez télécharger tous les fichiers requis.').css('color', 'red');
            }
        });
    });
</script>
<!-- JavaScript to handle dynamic fields -->
<script>
    let beneficiaireCount = 0;
    let vehiculeCount = 0;

    // Function to add a new beneficiary
    function addBeneficiaire() {
        beneficiaireCount++;
        const container = document.getElementById('beneficiaires-container');
        const newBeneficiaire = `
            <div class="row mt-3" id="beneficiaire-${beneficiaireCount}">
                <div class="col-md-3">
                    <label for="sexe_beneficiaire_${beneficiaireCount}" class="form-label">Sexe *</label>
                    <select class="form-select" name="beneficiaires[${beneficiaireCount}][sexe]" id="sexe_beneficiaire_${beneficiaireCount}" required>
                        <option value="">Choisissez...</option>
                        <option value="Homme">Homme</option>
                        <option value="Femme">Femme</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="nom_beneficiaire_${beneficiaireCount}" class="form-label">Nom *</label>
                    <input type="text" class="form-control" name="beneficiaires[${beneficiaireCount}][nom]" id="nom_beneficiaire_${beneficiaireCount}" placeholder="Nom *" required>
                </div>
                <div class="col-md-3">
                    <label for="prenom_beneficiaire_${beneficiaireCount}" class="form-label">Prénom *</label>
                    <input type="text" class="form-control" name="beneficiaires[${beneficiaireCount}][prenom]" id="prenom_beneficiaire_${beneficiaireCount}" placeholder="Prénom *" required>
                </div>
                <div class="col-md-3">
                    <label for="date_naissance_beneficiaire_${beneficiaireCount}" class="form-label">Date de naissance *</label>
                    <input type="date" class="form-control" name="beneficiaires[${beneficiaireCount}][date_naissance]" id="date_naissance_beneficiaire_${beneficiaireCount}" required>
                </div>
                <div class="col-md-3">
                    <label for="type_beneficiaire_${beneficiaireCount}" class="form-label">Type *</label>
                    <select class="form-select" name="beneficiaires[${beneficiaireCount}][type]" id="type_beneficiaire_${beneficiaireCount}" required>
                        <option value="">Choisissez...</option>
                        <option value="Conjoint">Conjoint</option>
                        <option value="Enfant">Enfant</option>
                    </select>
                </div>
                <div class="col-md-1">
                    <button type="button" class="btn btn-danger mt-4" onclick="removeBeneficiaire(${beneficiaireCount})">-</button>
                </div>
            </div>
        `;
        container.insertAdjacentHTML('beforeend', newBeneficiaire);
    }

    // Function to remove a beneficiary
    function removeBeneficiaire(id) {
        const beneficiaire = document.getElementById(`beneficiaire-${id}`);
        if (beneficiaire) {
            beneficiaire.remove();
        }
    }

    // Function to add a new vehicle
    function addVehicule() {
        vehiculeCount++;
        const container = document.getElementById('vehicules-container');
        const newVehicule = `
            <div class="row mt-3" id="vehicule-${vehiculeCount}">
                <div class="col-md-4">
                    <label for="date_circulation_${vehiculeCount}" class="form-label">Date de 1ère mise en circulation *</label>
                    <input type="date" class="form-control" name="vehicules[${vehiculeCount}][date_circulation]" id="date_circulation_${vehiculeCount}" required>
                </div>
                <div class="col-md-4">
                    <label for="marque_${vehiculeCount}" class="form-label">Marque du véhicule *</label>
                    <input type="text" class="form-control" name="vehicules[${vehiculeCount}][marque]" id="marque_${vehiculeCount}" placeholder="Marque du véhicule *" required>
                </div>
                <div class="col-md-4">
                    <label for="modele_${vehiculeCount}" class="form-label">Modèle *</label>
                    <input type="text" class="form-control" name="vehicules[${vehiculeCount}][modele]" id="modele_${vehiculeCount}" placeholder="Modèle *" required>
                </div>
                <div class="col-md-4">
                    <label for="immatriculation_${vehiculeCount}" class="form-label">Immatriculation *</label>
                    <input type="text" class="form-control" name="vehicules[${vehiculeCount}][immatriculation]" id="immatriculation_${vehiculeCount}" placeholder="Immatriculation *" required>
                </div>
                <div class="col-md-4">
                    <label for="energie_${vehiculeCount}" class="form-label">Energie *</label>
                    <select class="form-select" name="vehicules[${vehiculeCount}][energie]" id="energie_${vehiculeCount}" required>
                        <option value="">Choisissez...</option>
                        <option value="Essence">Essence</option>
                        <option value="Diesel">Diesel</option>
                        <option value="Electrique">Electrique</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="carte_grise_${vehiculeCount}" class="form-label">Carte grise</label>
                    <input type="file" class="form-control" name="vehicules[${vehiculeCount}][carte_grise]" id="carte_grise_${vehiculeCount}">
                </div>
                <div class="col-md-1">
                    <button type="button" class="btn btn-danger mt-4" onclick="removeVehicule(${vehiculeCount})">-</button>
                </div>
            </div>
        `;
        container.insertAdjacentHTML('beforeend', newVehicule);
    }

    // Function to remove a vehicle
    function removeVehicule(id) {
        const vehicule = document.getElementById(`vehicule-${id}`);
        if (vehicule) {
            vehicule.remove();
        }
    }
</script>f
  
@endsection