@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('AssurVoyage_session'));}}            --}}
          <div class="step active">
              <div class="circle bg-success text-white">1</div>
              <p class="text-success mt-2">Informations client</p>
          </div>
          <div class="line line-active"></div>
          <!-- Step 2 -->
          <div class="step">
              <div class="circle {{session('AssurVoyage_session.process')>=1 ? 'bg-success text-white' : ''}}">2</div>
              <p class="{{session('AssurVoyage_session.process')>=1 ? 'text-success' : ''}} mt-2">coordonnées personnelles</p>
          </div>
          <div class="line"></div>
          <!-- Step 3 -->
          <div class="step">
              <div class="circle {{session('AssurVoyage_session.process')>=2 ? 'bg-success text-white' : ''}}">3</div>
              <p class="{{session('AssurVoyage_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('AssurVoyage_session.process')>=3 ? 'bg-success text-white' : ''}}">4</div>
              <p class="{{session('AssurVoyage_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('AssurVoyage_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('setAssurVoyage1') }}" id="setAssurVoyage1">
                @csrf
                <div id="errorMessages1"></div>
                <div class="row">
                    <!-- Type de contrat -->
                    <div class="col-md-6">
                        <label for="type_contrat" class="form-label">Je souhaite un contrat :</label>
                        <select class="form-select" name="type_contrat" id="type_contrat" required>
                            <option value="">Sélectionnez...</option>
                            <option value="Étudiant">Étudiant</option>
                            <option value="Individuel">Individuel</option>
                            <option value="Familial">Familial</option>
                        </select>
                    </div>
            
                    <!-- Couverture -->
                    <div class="col-md-6">
                        <label for="couverture" class="form-label">Je souhaite une couverture pour :</label>
                        <select class="form-select" name="couverture" id="couverture" required>
                            <option value="">Sélectionnez...</option>
                            <option value="Schengen">Voyager dans l’espace Schengen (Europe)</option>
                            <option value="Monde">Voyager dans le monde entier</option>
                        </select>
                    </div>
            
                    <!-- Durée du contrat -->
                    <div class="col-md-6">
                        <label for="duree_contrat" class="form-label">Durée du contrat *</label>
                        <select class="form-select" name="duree_contrat" id="duree_contrat" required>
                            <option value="">Sélectionnez...</option>
                            <option value="6 mois">6 mois</option>
                            <option value="1 an">1 an</option>
                            <option value="2 ans">2 ans</option>
                            <option value="3 ans">3 ans</option>
                            <option value="4 ans">4 ans</option>
                            <option value="5 ans">5 ans</option>
                        </select>
                    </div>
            
                    <!-- Nombre de bénéficiaires -->
                    <div class="col-md-6">
                        <label for="nombre_beneficiaires" class="form-label">Nombre de bénéficiaires *</label>
                        <input type="number" class="form-control" name="nombre_beneficiaires" id="nombre_beneficiaires" placeholder="Nombre de bénéficiaires *" required>
                    </div>
            
                    <!-- Voiture -->
                    <div class="col-md-6">
                        <label class="form-label">Voiture *</label>
                        <br>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="voiture" id="voiture_oui" value="Oui" required>
                            <label class="form-check-label" for="voiture_oui">Oui</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="voiture" id="voiture_non" value="Non" required>
                            <label class="form-check-label" for="voiture_non">Non</label>
                        </div>
                    </div>
            
                    <!-- Garantie d'assistance médicale complémentaire -->
                    <div class="col-md-12">
                        <label class="form-label">Souhaitez-vous souscrire à l'option « Garantie d'assistance médicale complémentaire à l'étranger liée aux maladies préexistantes/chroniques » ? *</label>
                        <br>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="garantie_assistance" id="garantie_oui" value="Oui" required>
                            <label class="form-check-label" for="garantie_oui">Oui</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="garantie_assistance" id="garantie_non" value="Non" required>
                            <label class="form-check-label" for="garantie_non">Non</label>
                        </div>
                    </div>
                </div>
            
                <!-- Boutons de navigation -->
                <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('AssurVoyage_session.process')=='1' ? '' : 'd-none'}}">
              <div class="form-header">
                  <h2>Vos coordonnées personnelles</h2>
              </div>
              <form method="POST" action="{{ route('setAssurVoyage2') }}" id="setAssurVoyage2">
                @csrf
                <div id="errorMessages2"></div>
                <div class="row">
                    <!-- Existing fields for the main user -->
                    {{-- Sexe --}}
                    <div class="col-md-6">
                        <label for="sexe" class="form-label">Sexe *</label>
                        <br>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="sexe" id="sexe_homme" value="Homme" required
                                {{ session('AssurVoyage_session.sexe') == 'Homme' ? 'checked' : '' }}>
                            <label class="form-check-label" for="sexe_homme">Homme</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="sexe" id="sexe_femme" value="Femme" required
                                {{ session('AssurVoyage_session.sexe') == 'Femme' ? 'checked' : '' }}>
                            <label class="form-check-label" for="sexe_femme">Femme</label>
                        </div>
                    </div>
            
                    {{-- Date de naissance --}}
                    <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" placeholder="Date de naissance *" required
                            value="{{ session('AssurVoyage_session.date_naissance') ?? '' }}">
                    </div>
            
                    {{-- Nom --}}
                    <div class="col-md-6">
                        <label for="nom" class="form-label">Nom *</label>
                        <input type="text" class="form-control" name="nom" id="nom" placeholder="Nom *" required
                            value="{{ session('AssurVoyage_session.nom') ?? '' }}">
                    </div>
            
                    {{-- Prénom --}}
                    <div class="col-md-6">
                        <label for="prenom" class="form-label">Prénom *</label>
                        <input type="text" class="form-control" name="prenom" id="prenom" placeholder="Prénom *" required
                            value="{{ session('AssurVoyage_session.prenom') ?? '' }}">
                    </div>
            
                    {{-- Téléphone mobile --}}
                    <div class="col-md-6">
                        <label for="telephone" class="form-label">Téléphone mobile *</label>
                        <input type="tel" class="form-control" name="telephone" id="telephone" placeholder="Téléphone mobile *" required
                            value="{{ session('AssurVoyage_session.telephone') ?? '' }}">
                    </div>
            
                    {{-- Email --}}
                    <div class="col-md-6">
                        <label for="email" class="form-label">Email *</label>
                        <input type="email" class="form-control" name="email" id="email" placeholder="Email *" required
                            value="{{ session('AssurVoyage_session.email') ?? '' }}">
                    </div>
            
                    {{-- Adresse --}}
                    <div class="col-md-6">
                        <label for="adresse" class="form-label">Adresse *</label>
                        <input type="text" class="form-control" name="adresse" id="adresse" placeholder="Adresse *" required
                            value="{{ session('AssurVoyage_session.adresse') ?? '' }}">
                    </div>
            
                    {{-- Code postal --}}
                    <div class="col-md-6">
                        <label for="code_postal" class="form-label">Code postal *</label>
                        <input type="text" class="form-control" name="code_postal" id="code_postal" placeholder="Code postal *" required
                            value="{{ session('AssurVoyage_session.code_postal') ?? '' }}">
                    </div>
            
                    {{-- Ville --}}
                    <div class="col-md-6">
                        <label for="ville" class="form-label">Ville *</label>
                        <input type="text" class="form-control" name="ville" id="ville" placeholder="Ville *" required
                            value="{{ session('AssurVoyage_session.ville') ?? '' }}">
                    </div>
            
                    {{-- Pays --}}
                    <div class="col-md-6">
                        <label for="pays" class="form-label">Pays *</label>
                        <input type="text" class="form-control" name="pays" id="pays" placeholder="Pays *" required
                            value="{{ session('AssurVoyage_session.pays') ?? '' }}">
                    </div>
            
                    {{-- Type de pièce d’identité --}}
                    <div class="col-md-6">
                        <label for="type_piece_identite" class="form-label">Type de pièce d’identité *</label>
                        <select class="form-select" name="type_piece_identite" id="type_piece_identite" required>
                            <option value="">Choisissez...</option>
                            <option value="Passeport" {{ session('AssurVoyage_session.type_piece_identite') == 'Passeport' ? 'selected' : '' }}>Passeport</option>
                            <option value="Permis de conduire" {{ session('AssurVoyage_session.type_piece_identite') == 'Permis de conduire' ? 'selected' : '' }}>Permis de conduire</option>
                        </select>
                    </div>
            
                    {{-- Numéro de pièce d’identité --}}
                    <div class="col-md-6">
                        <label for="numero_piece_identite" class="form-label">Numéro de pièce d’identité *</label>
                        <input type="text" class="form-control" name="numero_piece_identite" id="numero_piece_identite" placeholder="Numéro de pièce d’identité *" required
                            value="{{ session('AssurVoyage_session.numero_piece_identite') ?? '' }}">
                    </div>
            
                    {{-- Télécharger pièce d’identité --}}
                    <div class="col-md-6">
                        <label for="piece_identite" class="form-label">Télécharger pièce d’identité *</label>
                        <input type="file" class="form-control" name="piece_identite" id="piece_identite" required>
                    </div>
                </div>
            
                <!-- Coordonnées des autres bénéficiaires -->
                <div class="row mt-4">
                    <div class="col-md-12">
                        <h5>Coordonnées des autres bénéficiaires</h5>
                        <div id="beneficiaires-container">
                            <!-- Dynamic fields for beneficiaries will be added here -->
                        </div>
                        <button type="button" class="btn btn-secondary mt-2" onclick="addBeneficiaire()">+ Ajouter un bénéficiaire</button>
                    </div>
                </div>
            
                <!-- Informations des véhicules -->
                <div class="row mt-4">
                    <div class="col-md-12">
                        <h5>Informations des véhicules</h5>
                        <div id="vehicules-container">
                            <!-- Dynamic fields for vehicles will be added here -->
                        </div>
                        <button type="button" class="btn btn-secondary mt-2" onclick="addVehicule()">+ Ajouter un véhicule</button>
                    </div>
                </div>
            
                <!-- Navigation Buttons -->
                <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-4 {{session('AssurVoyage_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-4 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-4 mt-3">suivant  <i class="fa fa-arrow-right"></i></a>
                    </div>
                </div>
            </form>
          </div>
          <div class="form-container sec-section-5 {{session('AssurVoyage_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 class="form-container sec-section-6 {{session('AssurVoyage_session.process')=='5' ? '' : '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 VOYAGE :</h3>
            
                    <!-- Display VoyageDetails -->
                    @if(!empty(session('AssurVoyage_session.VoyageDetails')))
                        @if(!empty(session('AssurVoyage_session.VoyageDetails.type_contrat')))
                            <div class="row mb-3">
                                <div class="col label"><strong>Type de contrat</strong></div>
                                <div class="col">{{ session('AssurVoyage_session.VoyageDetails.type_contrat') }}</div>
                            </div>
                        @endif
                        @if(!empty(session('AssurVoyage_session.VoyageDetails.couverture')))
                            <div class="row mb-3">
                                <div class="col label"><strong>Couverture</strong></div>
                                <div class="col">{{ session('AssurVoyage_session.VoyageDetails.couverture') }}</div>
                            </div>
                        @endif
                    @endif
            
                    <!-- Display VoyageDetails from setAssurVoyage1 -->
                    @if(!empty(session('AssurVoyage_session.VoyageDetails.produit')))
                        <div class="row mb-3">
                            <div class="col label"><strong>Produit</strong></div>
                            <div class="col">{{ session('AssurVoyage_session.VoyageDetails.produit') }}</div>
                        </div>
                    @endif
                    @if(!empty(session('AssurVoyage_session.VoyageDetails.duree_contrat')))
                        <div class="row mb-3">
                            <div class="col label"><strong>Durée du contrat</strong></div>
                            <div class="col">{{ session('AssurVoyage_session.VoyageDetails.duree_contrat') }}</div>
                        </div>
                    @endif
                    @if(!empty(session('AssurVoyage_session.VoyageDetails.nombre_beneficiaires')))
                        <div class="row mb-3">
                            <div class="col label"><strong>Nombre de bénéficiaires</strong></div>
                            <div class="col">{{ session('AssurVoyage_session.VoyageDetails.nombre_beneficiaires') }}</div>
                        </div>
                    @endif
                    @if(!empty(session('AssurVoyage_session.VoyageDetails.voiture')))
                        <div class="row mb-3">
                            <div class="col label"><strong>Voiture</strong></div>
                            <div class="col">{{ session('AssurVoyage_session.VoyageDetails.voiture') }}</div>
                        </div>
                    @endif
                    @if(!empty(session('AssurVoyage_session.VoyageDetails.garantie_assistance')))
                        <div class="row mb-3">
                            <div class="col label"><strong>Garantie assistance</strong></div>
                            <div class="col">{{ session('AssurVoyage_session.VoyageDetails.garantie_assistance') }}</div>
                        </div>
                    @endif
            
                    <!-- Display InfoContact -->
                    @if(!empty(session('AssurVoyage_session.VoyageDetails.sexe')))
                        <div class="row mb-3">
                            <div class="col label"><strong>Sexe</strong></div>
                            <div class="col">{{ session('AssurVoyage_session.VoyageDetails.sexe') }}</div>
                        </div>
                    @endif
                    @if(!empty(session('AssurVoyage_session.VoyageDetails.date_naissance')))
                        <div class="row mb-3">
                            <div class="col label"><strong>Date de naissance</strong></div>
                            <div class="col">{{ session('AssurVoyage_session.VoyageDetails.date_naissance') }}</div>
                        </div>
                    @endif
                    @if(!empty(session('AssurVoyage_session.VoyageDetails.nom')))
                        <div class="row mb-3">
                            <div class="col label"><strong>Nom</strong></div>
                            <div class="col">{{ session('AssurVoyage_session.VoyageDetails.nom') }}</div>
                        </div>
                    @endif
                    @if(!empty(session('AssurVoyage_session.VoyageDetails.prenom')))
                        <div class="row mb-3">
                            <div class="col label"><strong>Prénom</strong></div>
                            <div class="col">{{ session('AssurVoyage_session.VoyageDetails.prenom') }}</div>
                        </div>
                    @endif
                    @if(!empty(session('AssurVoyage_session.VoyageDetails.telephone')))
                        <div class="row mb-3">
                            <div class="col label"><strong>Téléphone</strong></div>
                            <div class="col">{{ session('AssurVoyage_session.VoyageDetails.telephone') }}</div>
                        </div>
                    @endif
                    @if(!empty(session('AssurVoyage_session.VoyageDetails.email')))
                        <div class="row mb-3">
                            <div class="col label"><strong>Email</strong></div>
                            <div class="col">{{ session('AssurVoyage_session.VoyageDetails.email') }}</div>
                        </div>
                    @endif
                    @if(!empty(session('AssurVoyage_session.VoyageDetails.adresse')))
                        <div class="row mb-3">
                            <div class="col label"><strong>Adresse</strong></div>
                            <div class="col">{{ session('AssurVoyage_session.VoyageDetails.adresse') }}</div>
                        </div>
                    @endif
                    @if(!empty(session('AssurVoyage_session.VoyageDetails.code_postal')))
                        <div class="row mb-3">
                            <div class="col label"><strong>Code postal</strong></div>
                            <div class="col">{{ session('AssurVoyage_session.VoyageDetails.code_postal') }}</div>
                        </div>
                    @endif
                    @if(!empty(session('AssurVoyage_session.VoyageDetails.ville')))
                        <div class="row mb-3">
                            <div class="col label"><strong>Ville</strong></div>
                            <div class="col">{{ session('AssurVoyage_session.VoyageDetails.ville') }}</div>
                        </div>
                    @endif
                    @if(!empty(session('AssurVoyage_session.VoyageDetails.pays')))
                        <div class="row mb-3">
                            <div class="col label"><strong>Pays</strong></div>
                            <div class="col">{{ session('AssurVoyage_session.VoyageDetails.pays') }}</div>
                        </div>
                    @endif
            
                    <!-- Display Beneficiaries -->
                    @if(!empty(session('AssurVoyage_session.VoyageDetails.beneficiaires')))
                        @foreach(session('AssurVoyage_session.VoyageDetails.beneficiaires') as $beneficiaire)
                            @if(!empty($beneficiaire['prenom']))
                                <div class="row mb-3">
                                    <div class="col label"><strong>Prénom du bénéficiaire</strong></div>
                                    <div class="col">{{ $beneficiaire['prenom'] }}</div>
                                </div>
                            @endif
                            @if(!empty($beneficiaire['nom']))
                                <div class="row mb-3">
                                    <div class="col label"><strong>Nom du bénéficiaire</strong></div>
                                    <div class="col">{{ $beneficiaire['nom'] }}</div>
                                </div>
                            @endif
                            @if(!empty($beneficiaire['date_naissance']))
                                <div class="row mb-3">
                                    <div class="col label"><strong>Date de naissance du bénéficiaire</strong></div>
                                    <div class="col">{{ $beneficiaire['date_naissance'] }}</div>
                                </div>
                            @endif
                        @endforeach
                    @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 du type de contrat
            if ($("#type_contrat").val() === "") {
                isValid = false;
                errorMessages.push("Veuillez sélectionner un type de contrat.");
                $("#type_contrat").addClass("is-invalid");
            }

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

            // Vérification de la durée du contrat
            if ($("#duree_contrat").val() === "") {
                isValid = false;
                errorMessages.push("Veuillez sélectionner la durée du contrat.");
                $("#duree_contrat").addClass("is-invalid");
            }

            // Vérification du nombre de bénéficiaires
            let nombreBeneficiaires = $("#nombre_beneficiaires").val().trim();
            if (nombreBeneficiaires === "" || isNaN(nombreBeneficiaires) || nombreBeneficiaires <= 0) {
                isValid = false;
                errorMessages.push("Veuillez entrer un nombre valide de bénéficiaires.");
                $("#nombre_beneficiaires").addClass("is-invalid");
            }

            // Vérification de la sélection Voiture
            if (!$('input[name="voiture"]:checked').length) {
                isValid = false;
                errorMessages.push("Veuillez indiquer si vous avez une voiture.");
                $(".form-check-input[name='voiture']").addClass("is-invalid");
            }

            // Vérification de la garantie d'assistance
            if (!$('input[name="garantie_assistance"]:checked').length) {
                isValid = false;
                errorMessages.push("Veuillez sélectionner si vous souhaitez souscrire à l'option d'assistance.");
                $(".form-check-input[name='garantie_assistance']").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
                $('#setAssurVoyage1').submit();
            }
        });

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

            // Vider les erreurs précédentes
            $("#errorMessages2").html("");
            $(".form-control, .form-select").removeClass("is-invalid");

            // Vérification des champs nécessaires
            let sexe = $("input[name='sexe']:checked").val();
            if (!sexe) {
                isValid = false;
                errorMessages.push("Veuillez sélectionner un sexe.");
                $("input[name='sexe']").addClass("is-invalid");
            }

            let dateNaissance = $("#date_naissance").val().trim();
            if (!dateNaissance) {
                isValid = false;
                errorMessages.push("Veuillez entrer votre date de naissance.");
                $("#date_naissance").addClass("is-invalid");
            }

            let nom = $("#nom").val().trim();
            if (!nom) {
                isValid = false;
                errorMessages.push("Veuillez entrer votre nom.");
                $("#nom").addClass("is-invalid");
            }

            let prenom = $("#prenom").val().trim();
            if (!prenom) {
                isValid = false;
                errorMessages.push("Veuillez entrer votre prénom.");
                $("#prenom").addClass("is-invalid");
            }

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

            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");
            }

            let adresse = $("#adresse").val().trim();
            if (!adresse) {
                isValid = false;
                errorMessages.push("Veuillez entrer votre adresse.");
                $("#adresse").addClass("is-invalid");
            }

            let codePostal = $("#code_postal").val().trim();
            if (!/^\d+$/.test(codePostal)) {
                isValid = false;
                errorMessages.push("Le code postal doit être un nombre.");
                $("#code_postal").addClass("is-invalid");
            }

            let ville = $("#ville").val().trim();
            if (!ville) {
                isValid = false;
                errorMessages.push("Veuillez entrer votre ville.");
                $("#ville").addClass("is-invalid");
            }

            let pays = $("#pays").val().trim();
            if (!pays) {
                isValid = false;
                errorMessages.push("Veuillez entrer votre pays.");
                $("#pays").addClass("is-invalid");
            }

            let typePieceIdentite = $("#type_piece_identite").val().trim();
            if (!typePieceIdentite) {
                isValid = false;
                errorMessages.push("Veuillez sélectionner un type de pièce d'identité.");
                $("#type_piece_identite").addClass("is-invalid");
            }

            let numeroPieceIdentite = $("#numero_piece_identite").val().trim();
            if (!numeroPieceIdentite) {
                isValid = false;
                errorMessages.push("Veuillez entrer le numéro de votre pièce d'identité.");
                $("#numero_piece_identite").addClass("is-invalid");
            }

            let pieceIdentite = $("#piece_identite").val();
            if (!pieceIdentite) {
                isValid = false;
                errorMessages.push("Veuillez télécharger votre pièce d'identité.");
                $("#piece_identite").addClass("is-invalid");
            }

            // Vérification des bénéficiaires (dynamique)
            $(".beneficiaire").each(function () {
                let beneficiaireSexe = $(this).find("input[name^='beneficiaire_sexe']").val();
                let beneficiaireNom = $(this).find("input[name^='beneficiaire_nom']").val().trim();
                let beneficiairePrenom = $(this).find("input[name^='beneficiaire_prenom']").val().trim();
                let beneficiaireDateNaissance = $(this).find("input[name^='beneficiaire_date_naissance']").val().trim();
                let beneficiaireType = $(this).find("select[name^='beneficiaire_type']").val();

                if (!beneficiaireSexe) {
                    isValid = false;
                    errorMessages.push("Veuillez sélectionner un sexe pour un bénéficiaire.");
                    $(this).find("input[name^='beneficiaire_sexe']").addClass("is-invalid");
                }
                if (!beneficiaireNom) {
                    isValid = false;
                    errorMessages.push("Veuillez entrer le nom pour un bénéficiaire.");
                    $(this).find("input[name^='beneficiaire_nom']").addClass("is-invalid");
                }
                if (!beneficiairePrenom) {
                    isValid = false;
                    errorMessages.push("Veuillez entrer le prénom pour un bénéficiaire.");
                    $(this).find("input[name^='beneficiaire_prenom']").addClass("is-invalid");
                }
                if (!beneficiaireDateNaissance) {
                    isValid = false;
                    errorMessages.push("Veuillez entrer la date de naissance pour un bénéficiaire.");
                    $(this).find("input[name^='beneficiaire_date_naissance']").addClass("is-invalid");
                }
                if (!beneficiaireType) {
                    isValid = false;
                    errorMessages.push("Veuillez sélectionner le type de bénéficiaire.");
                    $(this).find("select[name^='beneficiaire_type']").addClass("is-invalid");
                }
            });

            // Vérification des véhicules (dynamique)
            $(".vehicule").each(function () {
                let vehiculeDateCirculation = $(this).find("input[name^='vehicule_date_circulation']").val().trim();
                let vehiculeMarque = $(this).find("input[name^='vehicule_marque']").val().trim();
                let vehiculeImmatriculation = $(this).find("input[name^='vehicule_immatriculation']").val().trim();
                let vehiculeEnergie = $(this).find("select[name^='vehicule_energie']").val();

                if (!vehiculeDateCirculation) {
                    isValid = false;
                    errorMessages.push("Veuillez entrer la date de mise en circulation du véhicule.");
                    $(this).find("input[name^='vehicule_date_circulation']").addClass("is-invalid");
                }
                if (!vehiculeMarque) {
                    isValid = false;
                    errorMessages.push("Veuillez entrer la marque du véhicule.");
                    $(this).find("input[name^='vehicule_marque']").addClass("is-invalid");
                }
                if (!vehiculeImmatriculation) {
                    isValid = false;
                    errorMessages.push("Veuillez entrer l'immatriculation du véhicule.");
                    $(this).find("input[name^='vehicule_immatriculation']").addClass("is-invalid");
                }
                if (!vehiculeEnergie) {
                    isValid = false;
                    errorMessages.push("Veuillez sélectionner le type d'énergie du véhicule.");
                    $(this).find("select[name^='vehicule_energie']").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>";
                $("#errorMessages2").html(errorHtml);
            } else {
                // Submit the form if everything is valid
                $('#setAssurVoyage2').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>
  
@endsection