@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('AssurVehicule_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('AssurVehicule_session.process')>=1 ? 'bg-success text-white' : ''}}">2</div>
              <p class="{{session('AssurVehicule_session.process')>=1 ? 'text-success' : ''}} mt-2">Informations véhicule</p>
          </div>
          <div class="line"></div>
          <!-- Step 3 -->
          <div class="step">
              <div class="circle {{session('AssurVehicule_session.process')>=2 ? 'bg-success text-white' : ''}}">3</div>
              <p class="{{session('AssurVehicule_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('AssurVehicule_session.process')>=3 ? 'bg-success text-white' : ''}}">4</div>
              <p class="{{session('AssurVehicule_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('AssurVehicule_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('setAssurVehicule1')}}" id="setAssurVehicule1">
                @csrf
                <div class="row">
                    {{-- Sexe --}}
                    <div id="errorMessages1"></div>
                    <div class="col-md-4 form-group">
                        <label for="convention" class="form-label">Convention</label>
                        <select class="form-select me-2" name="convention" id="convention" required>
                            <option value="">Sélectionnez</option>
                            <option value="1522 AOS MATNUHPV">1522 AOS MATNUHPV</option>
                        </select>
                    </div>
                    <div class="col-md-4 form-group">
                        <label for="lien_parente" class="form-label">Lien de parenté</label>
                        <select class="form-select me-2" name="lien_parente" id="lien_parente" required>
                            <option value="">Sélectionnez</option>
                            <option value="Souscripteur">Souscripteur</option>
                            <option value="Ascendant">Ascendant</option>
                            <option value="Conjoint">Conjoint</option>
                            <option value="Epoux">Epoux</option>
                            <option value="Fille / Fils">Fille / Fils</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label for="firstName" class="form-label">Sexe *</label>
                        <br>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="sexe" id="inlineRadioHomme" value="optionHomme"
                                {{ session('AssurVehicule_session.PersonalDetails.sexe') == 'optionHomme' ? 'checked' : '' }}>
                            <label class="form-check-label" for="inlineRadioHomme">Homme</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="sexe" id="inlineRadioFemme" value="optionFemme"
                                {{ session('AssurVehicule_session.PersonalDetails.sexe') == 'optionFemme' ? 'checked' : '' }}>
                            <label class="form-check-label" for="inlineRadioFemme">Femme</label>
                        </div>
                    </div>
                
                    
                
                    {{-- Prénom --}}
                    <div class="col-md-6 form-group">
                        <label for="firstName" class="form-label">Prénom *</label>
                        <input type="text" class="form-control" name="prenom" id="firstName" placeholder="Prénom *" required
                            value="{{ session('AssurVehicule_session.PersonalDetails.prenom') ?? '' }}">
                    </div>
                
                    {{-- Nom --}}
                    <div class="col-md-6 form-group">
                        <label for="lastName" class="form-label">Nom *</label>
                        <input type="text" class="form-control" name="nom" id="lastName" placeholder="Nom *" required
                            value="{{ session('AssurVehicule_session.PersonalDetails.nom') ?? '' }}">
                    </div>
                
                    {{-- Date de naissance --}}
                    <div class="col-md-6 form-group">
                        <label for="lastNaissance" class="form-label">Date de naissance *</label>
                        <input type="date" class="form-control" name="date_naissance" id="lastNaissance" placeholder="Date de naissance *" required
                            value="{{ session('AssurVehicule_session.PersonalDetails.date_naissance') ?? '' }}">
                    </div>
                
                    {{-- Téléphone --}}
                    <div class="col-md-6 form-group">
                        <label for="phone" class="form-label">Votre numéro de téléphone</label>
                        <input type="phone" class="form-control" name="phone" id="phone" placeholder="Votre numéro de téléphone" required
                            value="{{ session('AssurVehicule_session.InfoContact.telephone') ?? '' }}">
                    </div>
                
                    {{-- Email --}}
                    <div class="col-md-6 form-group">
                        <label for="email" class="form-label">Email</label>
                        <input type="email" class="form-control" name="email" id="email" placeholder="Email" required
                            value="{{ session('AssurVehicule_session.InfoContact.email') ?? '' }}">
                    </div>
                
                    {{-- Adresse --}}
                    <div class="col-md-6 form-group">
                        <label for="adresse" class="form-label">Adresse *</label>
                        <input type="text" class="form-control" name="adresse" id="adresse" placeholder="Adresse *" required
                            value="{{ session('AssurVehicule_session.PersonalDetails.adresse') ?? '' }}">
                    </div>
                
                    {{-- Catégorie de permis --}}
                    <div class="col-md-4 form-group">
                        <label for="categorie_permis" class="form-label">Catégorie de permis *</label>
                        <select class="form-select me-2" name="categorie_permis" id="categorie_permis" required>
                            <option value="A" {{ session('AssurVehicule_session.PermisDetails.categorie_permis') == 'A' ? 'selected' : '' }}>A</option>
                            <option value="B" {{ session('AssurVehicule_session.PermisDetails.categorie_permis') == 'B' ? 'selected' : '' }}>B</option>
                            <option value="C" {{ session('AssurVehicule_session.PermisDetails.categorie_permis') == 'C' ? 'selected' : '' }}>C</option>
                            <option value="D" {{ session('AssurVehicule_session.PermisDetails.categorie_permis') == 'D' ? 'selected' : '' }}>D</option>
                            <option value="EB" {{ session('AssurVehicule_session.PermisDetails.categorie_permis') == 'EB' ? 'selected' : '' }}>EB</option>
                            <option value="EC" {{ session('AssurVehicule_session.PermisDetails.categorie_permis') == 'EC' ? 'selected' : '' }}>EC</option>
                        </select>
                    </div>
                
                    {{-- Numéro de permis --}}
                    <div class="col-md-4 form-group">
                        <label for="num_permis" class="form-label">Numéro de permis *</label>
                        <input type="text" class="form-control" name="num_permis" id="num_permis" placeholder="Numéro de permis *" required
                            value="{{ session('AssurVehicule_session.PermisDetails.num_permis') ?? '' }}">
                    </div>
                
                    {{-- Date d’obtention de permis --}}
                    <div class="col-md-4 form-group">
                        <label for="date_optention_permis" class="form-label">Date d’obtention de permis *</label>
                        <input type="date" class="form-control" name="date_optention_permis" id="date_optention_permis" placeholder="Date d’obtention de permis *"
                            value="{{ session('AssurVehicule_session.PermisDetails.date_optention_permis') ?? '' }}">
                    </div>
                </div>
                
  
                <div class="form-footer">
                    <p>
                        Conformément à la loi 09-08, vous disposez d'un droit d'accès, de rectification et d'opposition au traitement de vos données personnelles. Ce traitement a été autorisé par la CNDP sous le n° D-W-576/2017.
                    </p>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="terms">
                        <label class="form-check-label" for="terms">
                            J’ai pris connaissance et accepté les conditions générales de vente notamment la mention relative à la protection des données personnelles.
                        </label>
                    </div>
                </div>
          
                  <div class="row">
                    <div class="col-md-6 form-group">
                      <a class="btn btn-primary btn-precedent-section-1 mt-3"><i class="fa fa-arrow-left"></i> Precedent</a>
                    </div>
                    <div class="col-md-6 text-end form-group">
                      <a class="btn btn-primary btn-suivant-section-1 mt-3">suivant  <i class="fa fa-arrow-right"></i></a>
                    </div>
                  </div>
              </form>
          </div>
          
          <div class="form-container sec-section-2 {{session('AssurVehicule_session.process')=='1' ? '' : 'd-none'}}">
              <div class="form-header">
                  <h2>Informations véhicule</h2>
              </div>
              <form method="POST" action="{{route('setAssurVehicule2')}}" id="setAssurVehicule2">
                @csrf
                <div class="row">
                    <!-- Type de plaque -->
                    <div id="errorMessages2"></div>
                    <div class="col-md-6 form-group">
                        <label for="typePlaque" class="form-label">Type de plaque *</label>
                        <select class="form-select" id="typePlaque" name="type_plaque" required>
                            <option value="">Choisissez...</option>
                            <option value="Normale" {{ session('AssurVehicule_session.VehiculeDetails.type_plaque') == 'Normale' ? 'selected' : '' }}>Normale</option>
                            <option value="WW" {{ session('AssurVehicule_session.VehiculeDetails.type_plaque') == 'WW' ? 'selected' : '' }}>En WW</option>
                        </select>
                    </div>
                
                    <!-- Immatriculation -->
                    <div class="col-md-6 form-group">
                        <label for="registration" class="form-label">Immatriculation *</label>
                        <div class="align-items-center registration-input-group d-none" id="inlineInputWWW">
                            <input type="number" id="ww_input" class="form-control me-2" placeholder="123456">
                        </div>
                        <div class="d-flex align-items-center registration-input-group">
                            <input type="number" class="form-control me-2" maxlength="2" id="part1" name="part1" placeholder="11" value="{{ session('AssurVehicule_session.VehiculeDetails.immatriculation.part1') ?? '' }}" required>
                            <span>-</span>
                            <select class="form-select me-2" name="part2" id="part2" style="width: 50%;" required>
                                <option value="A" {{ session('AssurVehicule_session.VehiculeDetails.immatriculation.part2') == 'A' ? 'selected' : '' }}>A</option>
                                <option value="B" {{ session('AssurVehicule_session.VehiculeDetails.immatriculation.part2') == 'B' ? 'selected' : '' }}>B</option>
                                <option value="D" {{ session('AssurVehicule_session.VehiculeDetails.immatriculation.part2') == 'D' ? 'selected' : '' }}>D</option>
                                <option value="E" {{ session('AssurVehicule_session.VehiculeDetails.immatriculation.part2') == 'E' ? 'selected' : '' }}>E</option>
                                <option value="T" {{ session('AssurVehicule_session.VehiculeDetails.immatriculation.part2') == 'T' ? 'selected' : '' }}>T</option>
                            </select>
                            <span>-</span>
                            <input type="number" class="form-control ms-2" maxlength="2" id="part3" name="part3" placeholder="22" value="{{ session('AssurVehicule_session.VehiculeDetails.immatriculation.part3') ?? '' }}" required>
                        </div>
                    </div>
                
                    <!-- Date de mise en circulation -->
                    <div class="col-md-6 form-group">
                        <label for="dateCirculation" class="form-label">Date de mise en circulation *</label>
                        <input type="date" class="form-control" id="dateCirculation" name="date_circulation" value="{{ session('AssurVehicule_session.VehiculeDetails.date_circulation') ?? '' }}" required>
                    </div>
                
                    <!-- Marque -->
                    @php
                         $arrayMarques = app(\App\Services\GlobaleService::class)::arrayMarque();
                         sort($arrayMarques);
                    @endphp
                    <div class="col-md-6 form-group">
                        <label for="brand" class="form-label">Marque du véhicule *</label>
                        <select class="form-select" id="marque" name="marque" required>
                            <option value="">Choisissez...</option>
                            @foreach ($arrayMarques as $marque)
                                <option value="{{$marque}}" {{ session('AssurVehicule_session.VehiculeDetails.marque') == $marque ? 'selected' : '' }}>{{$marque}}</option>
                            @endforeach
                        </select>
                    </div>
                
                    <!-- Puissance fiscale -->
                    <div class="col-md-6 form-group">
                        <label for="fiscalPower" class="form-label">Puissance fiscale *</label>
                        <input type="number" class="form-control" id="fiscalPower" name="puissance_fiscale" placeholder="Puissance fiscale" value="{{ session('AssurVehicule_session.VehiculeDetails.puissance_fiscale') ?? '' }}">
                    </div>
                
                    <!-- Energie -->
                    <div class="col-md-6 form-group">
                        <label for="energy" class="form-label">Energie *</label>
                        <select class="form-select" id="energy" name="energie" required>
                            <option value="">Choisissez...</option>
                            <option value="Diesel" {{ session('AssurVehicule_session.VehiculeDetails.energie') == 'Diesel' ? 'selected' : '' }}>Diesel</option>
                            <option value="Essence" {{ session('AssurVehicule_session.VehiculeDetails.energie') == 'Essence' ? 'selected' : '' }}>Essence</option>
                            <option value="Électrique" {{ session('AssurVehicule_session.VehiculeDetails.energie') == 'Électrique' ? 'selected' : '' }}>Électrique</option>
                            <option value="Hybride" {{ session('AssurVehicule_session.VehiculeDetails.energie') == 'Hybride' ? 'selected' : '' }}>Hybride</option>
                        </select>
                    </div>
                
                    <!-- Valeur à neuf -->
                    <div class="col-md-6 form-group">
                        <label for="VehiculeValue" class="form-label">Valeur de véhicule</label>
                        <input type="number" class="form-control" id="VehiculeValue" name="valeur_v" placeholder="Valeur de véhicule" value="{{ session('AssurVehicule_session.VehiculeDetails.valeur_v') ?? '' }}">
                    </div>
                
                    <!-- Valeur des glaces -->
                    <div class="col-md-6 form-group">
                        <label for="glassValue" class="form-label">Valeur des glaces</label>
                        <input type="number" class="form-control" id="glassValue" name="valeur_glaces" placeholder="Valeur des glaces" value="{{ session('AssurVehicule_session.VehiculeDetails.valeur_glaces') ?? '' }}">
                    </div>
                
                    <!-- Nombre de places -->
                    <div class="col-md-6 form-group">
                        <label for="seats" class="form-label">Nombre de places *</label>
                        <input type="number" class="form-control" id="seats" name="nombre_places" placeholder="Nombre de places" value="{{ session('AssurVehicule_session.VehiculeDetails.nombre_places') ?? '' }}" required>
                    </div>
                </div>
                
                <!-- Navigation Buttons -->
                <div class="row">
                    <div class="col-md-6 form-group">
                        <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 form-group">
                        <a class="btn btn-primary btn-suivant-section-2 mt-3">Suivant <i class="fa fa-arrow-right"></i></a>
                    </div>
                </div>
            </form>
            
          </div>
          <div class="form-container sec-section-3 {{session('AssurVehicule_session.process')=='2' ? '' : 'd-none'}}">
              <div class="form-header">
                  <h2>Données Contrat</h2>
              </div>
              <form method="POST" action="{{route('setAssurVehicule3')}}" id="setAssurVehicule3">
                @csrf
                <div class="row">
                    <div class="col-md-6 form-group">
                        <label for="dateEffetValue" class="form-label">Date d’effet *</label>
                        <input type="date" class="form-control" id="dateEffetValue" name="date_effet" placeholder="Date d’effet *" value="{{ session('AssurVehicule_session.VehiculeDetails.valeur_glaces') ?? '' }}">
                    </div>

                    <div class="col-md-6 form-group">
                        <label for="duree" class="form-label">Durée *</label>
                        <select class="form-select" id="duree" name="duree" required>
                            <option value="">Choisissez...</option>
                            <option value="1 Mois" {{ session('AssurVehicule_session.VehiculeDetails.energie') == '1 Mois' ? 'selected' : '' }}>1 Mois</option>
                            <option value="3 Mois" {{ session('AssurVehicule_session.VehiculeDetails.energie') == '3 Mois' ? 'selected' : '' }}>3 Mois</option>
                            <option value="6 Mois" {{ session('AssurVehicule_session.VehiculeDetails.energie') == '6 Mois' ? 'selected' : '' }}>6 Mois</option>
                            <option value="12 Mois" {{ session('AssurVehicule_session.VehiculeDetails.energie') == '12 Mois' ? 'selected' : '' }}>12 Mois</option>
                        </select>
                    </div>
                
                    {{-- <div class="col-md-6 form-group">
                        <label for="duree" class="form-label">Durée *</label>
                        <input type="text" class="form-control" id="duree" name="duree" placeholder="Durée *" value="{{ session('AssurVehicule_session.VehiculeDetails.nombre_places') ?? '' }}" required>
                    </div> --}}
                </div>
                
                <style>
                    .card { 
                        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
                     }
                     .card-flex { 
                        display: flex;
                        flex-direction: row;
                        justify-content: space-between;
                        align-items: center;
                     }
                    .badge-obligatoire { background-color: #ffc107; color: #000;width: max-content;}
                    .badge-offerte { background-color: #d4edda; color: #155724;width: max-content; }
                    .add-btn { border: 1px solid rgb(94 177 48/1); color: rgb(94 177 48/1); }
                    .add-btn:hover { background-color: rgb(94 177 48/1); color: #fff; }
                </style>
                <h3 class="mb-4">Garanties offertes</h3>
                <div class="row">
                    <div class="col-md-6 form-group mb-0">
                        <div class="card card-flex p-3">
                            <div>
                                <strong>Responsabilité civile</strong> <span class="badge badge-obligatoire">Obligatoire</span>
                            </div>
                            <i class="fas fa-chevron-down"></i>
                        </div>
                    </div>
                    <div class="col-md-6 form-group mb-0">
                        <div class="card card-flex p-3">
                            <div>
                                <strong>Événements catastrophiques</strong> <span class="badge badge-obligatoire">Obligatoire</span>
                            </div>
                            <i class="fas fa-chevron-down"></i>
                        </div>
                    </div>

                    <div class="col-md-6 form-group mb-0">
                        <div class="card card-flex p-3">
                            <div>
                                <strong>Défense et recours</strong> <span class="badge badge-offerte">Gratuite</span>
                            </div>
                            <i class="fas fa-chevron-down"></i>
                        </div>
                    </div>
                    <div class="col-md-6 form-group mb-0">
                        <div class="card card-flex p-3">
                            <div>
                                <strong>Incendie</strong> <span class="badge badge-offerte">Gratuite</span>
                            </div>
                            <i class="fas fa-chevron-down"></i>
                        </div>
                    </div>
                    <div class="col-md-6 form-group mb-0">
                        <div class="card card-flex p-3">
                            <div>
                                <strong>Protection Passagers</strong> <span class="badge badge-offerte">Gratuite</span>
                            </div>
                            <i class="fas fa-chevron-down"></i>
                        </div>
                    </div>
                    <div class="col-md-6 form-group mb-0">
                        <div class="card card-flex p-3">
                            <div>
                                <strong>Protection Conducteur</strong> <span class="badge badge-offerte">Gratuite</span>
                            </div>
                            <i class="fas fa-chevron-down"></i>
                        </div>
                    </div>
                    
                </div>
                
                <h3 class="mt-4 mb-3">Enrichir mon offre d'assurance</h3>
                <div class="row mb-4">
                    <div class="col-md-6 form-group mb-0">
                        <div class="card p-3">
                            <div class="form-check">
                                <input class="form-check-input checkbox-garanties" type="checkbox"  value="Dommage tous Accidents">
                                <p class="form-check-label" for="terms">
                                    Dommage tous Accidents
                                </p>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input checkbox-garanties" type="checkbox"  value="Rachat de vétusté">
                                <p class="form-check-label" for="terms">
                                    Rachat de vétusté
                                </p>
                            </div>
                            {{-- <a class="btn add-btn mt-3">Ajouter</a> --}}
                        </div>
                    </div>
                    <div class="col-md-6 form-group mb-0">
                        <div class="card p-3">
                            <div class="form-check">
                                <input class="form-check-input checkbox-garanties" type="checkbox"  value="Vol">
                                <p class="form-check-label" for="terms">
                                    Vol
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 form-group mb-0">
                        <div class="card p-3">
                            <div class="form-check">
                                <input class="form-check-input checkbox-garanties" type="checkbox"  value="Bris de glaces">
                                <p class="form-check-label" for="terms">
                                    Bris de glaces
                                </p>
                            </div>
                            {{-- <p class="text-muted">Capital assuré: 5 000 DH</p> --}}
                        </div>
                    </div>
                    <div class="col-md-6 form-group mb-0">
                        <div class="card p-3">
                            <div class="form-check">
                                <input class="form-check-input checkbox-garanties" type="checkbox"  value="Dommage Collision">
                                <p class="form-check-label" for="terms">
                                    Dommage Collision
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 form-group mb-0">
                        <div class="card p-3">
                            <div class="form-check">
                                <input class="form-check-input checkbox-garanties" type="checkbox"  value="Assistance médicale">
                                <p class="form-check-label" for="terms">
                                    Assistance médicale
                                </p>
                            </div>
                            {{-- <p class="text-muted">Capital assuré: 5 000 DH</p> --}}
                        </div>
                    </div>
                </div>

                
                
                <div class="row g-4">
                    <!-- First Card -->
                    <div class="col-md-4 form-group">
                        <div class="card h-100 granties border shadow-sm">
                            <div class="card-body p-2 pt-4 position-relative">
                                <div class="badge bg-success text-white position-absolute top-0 end-0 px-3 py-2">+94 DH</div>
                                <div class="icon-circle">
                                </div>
                                <strong>Essentielle</strong>
                                <p>
                                    Véhicule de remplacement en cas d'accident
                                    5 jours maximum pour la catégorie A
                                    Remorquage en cas de panne
                                    2 fois/an vers le garage le plus proche du domicile
                                    Remorquage en cas d'accident
                                    Illimité vers le garage le plus proche du domicile
                                </p>
                                <input class="invisible-checkbox" type="checkbox" name="garanties[]" value=" tous Accidents" />
                            </div>
                        </div>
                    </div>
                    <!-- Second Card -->
                    <div class="col-md-4 form-group">
                        <div class="card h-100 granties border shadow-sm">
                            <div class="card-body p-2 pt-4">
                                <div class="badge bg-success text-white position-absolute top-0 end-0 px-3 py-2">+144 DH</div>
                                <div class="icon-circle">
                                    
                                </div>
                                <strong>Sérénité</strong>
                                <p>
                                    Véhicule de remplacement en cas de panne
                                    3 jours maximum pour la catégorie A
                                    Véhicule de remplacement en cas d'accident
                                    10 jours maximum pour la catégorie A
                                    Remorquage en cas de panne
                                    3 fois/an vers le garage le plus proche du domicile
                                    Remorquage en cas d'accident
                                    Illimité vers le garage le plus proche du domicile
                                </p>
                                <input class="invisible-checkbox" type="checkbox" name="garanties[]" value="Sérénité" />
                            </div>
                        </div>
                    </div>
                    <!-- Third Card -->
                    <div class="col-md-4 form-group">
                        <div class="card h-100 granties border shadow-sm">
                            <div class="card-body p-2 pt-4">
                                <div class="badge bg-success text-white position-absolute top-0 end-0 px-3 py-2">+275 DH</div>
                                <div class="icon-circle">
                                    
                                </div>
                                <strong>Privilège</strong>
                                <p>
                                    Véhicule de remplacement en cas de panne
                                    5 jours maximum pour la catégorie A
                                    Véhicule de remplacement en cas d'accident
                                    15 jours maximum pour la catégorie A
                                    Remorquage en cas de panne
                                    Illimité vers le garage le plus proche du domicile
                                    Remorquage en cas d'accident
                                    Illimité vers le garage le plus proche du domicile
                                </p>
                                <input class="invisible-checkbox" type="checkbox" name="garanties[]" value="Vol" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 form-group">
                    <a class="btn btn-primary btn-precedent-section-3 mt-3"><i class="fa fa-arrow-left"></i> Precedent</a>
                    </div>
                    <div class="col-md-6 text-end form-group">
                    <a 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('AssurVehicule_session.process')=='3' ? '' : 'd-none'}}">
            <form>
                <div class="row g-4">
                    <!-- First Card -->
                    <div class="col-md-12 form-group">
                        <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 form-group">
                        <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 form-group">
                        <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 form-group">
                    <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 form-group">
                    <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('AssurVehicule_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 -->
                        <h2 class="card-title mb-3">Confirmation des informations</h2>
                        <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 form-group">
                                <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 form-group">
                                <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('AssurVehicule_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 -->
                        <h2 class="card-title mb-3">Confirmation des informations</h2>
                        <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 form-group">
                                <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 form-group">
                                <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">
                    <h2 class="card-title mb-4">INFOS CONDUCTEUR :</h2>
                    <!-- Display PersonalDetails -->
                    @if(!empty(session('AssurVehicule_session.PersonalDetails')))
                        <div class="row mb-3">
                            <div class="col label"><strong> Prénom et Nom</strong></div>
                            <div class="col">{{ session('AssurVehicule_session.PersonalDetails.prenom').' '.session('AssurVehicule_session.PersonalDetails.nom') }}</div>
                        </div>
                        <div class="row mb-3">
                            <div class="col label"><strong> Sexe</strong></div>
                            <div class="col">{{ session('AssurVehicule_session.PersonalDetails.sexe') }}</div>
                        </div>
                        <div class="row mb-3">
                            <div class="col label"><strong> CIN</strong></div>
                            <div class="col">{{ session('AssurVehicule_session.PersonalDetails.cin') }}</div>
                        </div>
                        <div class="row mb-3">
                            <div class="col label"><strong> Date de naissance</strong></div>
                            <div class="col">{{ session('AssurVehicule_session.PersonalDetails.date_naissance') }}</div>
                        </div>
                        <div class="row mb-3">
                            <div class="col label"><strong> Adresse</strong></div>
                            <div class="col">{{ session('AssurVehicule_session.PersonalDetails.adresse') }}</div>
                        </div>
                    @endif
            
                    <!-- Display InfoContact -->
                    @if(!empty(session('AssurVehicule_session.InfoContact')))
                        <div class="row mb-3">
                            <div class="col label"><strong> Téléphone</strong></div>
                            <div class="col">{{ session('AssurVehicule_session.InfoContact.telephone') }}</div>
                        </div>
                        <div class="row mb-3">
                            <div class="col label"><strong> Email</strong></div>
                            <div class="col">{{ session('AssurVehicule_session.InfoContact.email') }}</div>
                        </div>
                    @endif
            
                    <h2 class="card-title mb-4">INFOS VÉHICULE :</h2>
                    @if(!empty(session('AssurVehicule_session.VehiculeDetails')))
                        <div class="row mb-3">
                            <div class="col label"><strong> Marque</strong></div>
                            <div class="col">{{ session('AssurVehicule_session.VehiculeDetails.marque') }}</div>
                        </div>
                        <div class="row mb-3">
                            <div class="col label"><strong> Puissance fiscale</strong></div>
                            <div class="col">{{ session('AssurVehicule_session.VehiculeDetails.puissance_fiscale') }}</div>
                        </div>
                        <div class="row mb-3">
                            <div class="col label"><strong> Énergie</strong></div>
                            <div class="col">{{ session('AssurVehicule_session.VehiculeDetails.energie') }}</div>
                        </div>
                        <div class="row mb-3">
                            <div class="col label"><strong> Valeur de véhicule</strong></div>
                            <div class="col">{{ session('AssurVehicule_session.VehiculeDetails.valeur_v') }}</div>
                        </div>
                        <div class="row mb-3">
                            <div class="col label"><strong> Valeur glaces</strong></div>
                            <div class="col">{{ session('AssurVehicule_session.VehiculeDetails.valeur_glaces') }}</div>
                        </div>
                        <div class="row mb-3">
                            <div class="col label"><strong> Nombre de places</strong></div>
                            <div class="col">{{ session('AssurVehicule_session.VehiculeDetails.nombre_places') }}</div>
                        </div>
                    @endif

                    <h2 class="card-title mb-4">Garanties :</h2>
                    <div class="row mb-3">
                        <div class="col">
                            <ul class="garanties-ul"></ul>
                        </div>
                    </div>
            
                </div>
            </div>
            
        </div>
      </div>
    </div>
  </section>
</main>
@endsection

@section('script')
    <script>
      $(document).ready(function() {
        $("#typePlaque").change(function () {
            let typePlaque = $(this).val();

            if (typePlaque === "WW") {
                $("#inlineInputWWW").removeClass("d-none");
                $("#ww_input").attr("required", true);

                $(".registration-input-group.d-flex").addClass("d-none");
                $("#part1, #part2, #part3").removeAttr("required");
            } else {
                $("#inlineInputWWW").addClass("d-none");
                $("#ww_input").removeAttr("required");

                $(".registration-input-group.d-flex").removeClass("d-none");
                $("#part1, #part2, #part3").attr("required", true);
            }
        });

    // Pour afficher le bon champ au chargement de la page
    $("#typePlaque").trigger("change");

        $(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");

            // Vérification du sexe (Monsieur / Madame)
            if (!$('input[name="sexe"]').is(':checked')) {
                isValid = false;
                errorMessages.push("Veuillez sélectionner une civilité (Monsieur ou Madame). ");
            }

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

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

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

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

            // Vérification de l'email (Format valide)
            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("L'adresse est obligatoire.");
                $("#adresse").addClass("is-invalid");
            }

            // Vérification de la catégorie de permis
            let categorie_permis = $("#categorie_permis").val().trim().toUpperCase();
            if (!/^(A|B|C|D|EB|EC)$/.test(categorie_permis)) {
                isValid = false;
                errorMessages.push("Veuillez choisir une catégorie de permis valide (A, B, C, D, EB, EC).");
                $("#categorie_permis").addClass("is-invalid");
            }

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

            // Vérification de la date d'obtention du permis
            let dateObtentionPermis = $("#date_optention_permis").val();
            if (dateObtentionPermis === "") {
                isValid = false;
                errorMessages.push("Veuillez entrer la date d’obtention du permis.");
                $("#date_optention_permis").addClass("is-invalid");
            }

            // Vérification de l'âge minimum de 18 ans entre la date de naissance et la date d’obtention du permis
            if (dateNaissance !== "" && dateObtentionPermis !== "") {
                let naissance = new Date(dateNaissance);
                let obtention = new Date(dateObtentionPermis);

                let ageDiff = obtention.getFullYear() - naissance.getFullYear();
                let monthDiff = obtention.getMonth() - naissance.getMonth();
                let dayDiff = obtention.getDate() - naissance.getDate();

                if (ageDiff < 18 || (ageDiff === 18 && (monthDiff < 0 || (monthDiff === 0 && dayDiff < 0)))) {
                    isValid = false;
                    errorMessages.push("L'âge minimum pour l'obtention du permis doit être de 18 ans.");
                    $("#lastNaissance, #date_optention_permis").addClass("is-invalid");
                }
            }

            // Vérification conditionnelle du lien de parenté si une convention est choisie
            let convention = $("#convention").val();
            let lienParente = $("#lien_parente").val();

            if (convention !== "" && lienParente === "") {
                isValid = false;
                errorMessages.push("Veuillez sélectionner un lien de parenté.");
                $("#lien_parente").addClass("is-invalid");
            } else {
                $("#lien_parente").removeClass("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 {
                $('#setAssurVehicule1').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 de l'immatriculation
            let typePlaque = $("#typePlaque").val();
            let part1 = $("#part1").val().trim();
            let part2 = $("#part2").val().trim();
            let part3 = $("#part3").val().trim();
            let ww_input = $("#ww_input").val().trim();
            let immatriculationNormaleRegex = /^\d{1,5}$/;
            let immatriculationLettresRegex = /^[ABDTE]$/;
            let immatriculationChiffresRegex = /^\d{2}$/;
            let immatriculationWWRegex = /^\d{7}$/;

            if (typePlaque === "Normale") {
                if (!immatriculationNormaleRegex.test(part1) || !immatriculationLettresRegex.test(part2) || !immatriculationChiffresRegex.test(part3)) {
                    isValid = false;
                    errorMessages.push("Format d'immatriculation invalide pour une plaque normale.");
                    $("#part1, #part2, #part3").addClass("is-invalid");
                }
            } else if (typePlaque === "WW") {
                let wwFull = ww_input;
                if (!immatriculationWWRegex.test(wwFull)) {
                    isValid = false;
                    errorMessages.push("L'immatriculation en WW doit contenir 7 chiffres.");
                    $("#ww_input").addClass("is-invalid");
                }
            } else {
                isValid = false;
                errorMessages.push("Veuillez choisir une type de plaque.");
                $("#typePlaque").addClass("is-invalid");
            }

            // Vérification de la date de mise en circulation
            let dateCirculation = $("#dateCirculation").val().trim();
            if (dateCirculation === "") {
                isValid = false;
                errorMessages.push("Veuillez entrer une date de mise en circulation.");
                $("#dateCirculation").addClass("is-invalid");
            }

            // Vérification de la puissance fiscale
            let puissanceFiscale = $("#fiscalPower").val();
            if (!/^(\d{1,2}|100)$/.test(puissanceFiscale)) {
                isValid = false;
                errorMessages.push("La puissance fiscale doit être un chiffre entre 0 et 100.");
                $("#fiscalPower").addClass("is-invalid");
            }

            // Vérification de l'énergie
            let energie = $("#energy").val();
            if (!["Diesel", "Essence", "Électrique", "Hybride"].includes(energie)) {
                isValid = false;
                errorMessages.push("Veuillez choisir une énergie valide.");
                $("#energy").addClass("is-invalid");
            }

            // Vérification des valeurs
            let valeurNeuf = $("#VehiculeValue").val().trim();
            let valeurGlaces = $("#glassValue").val().trim();

            if (valeurNeuf !== "" && !/^\d+$/.test(valeurNeuf)) {
                isValid = false;
                errorMessages.push("La valeur à neuf doit contenir uniquement des chiffres.");
                $("#VehiculeValue").addClass("is-invalid");
            }
            
            if (valeurGlaces !== "" && (!/^\d+$/.test(valeurGlaces) || parseInt(valeurGlaces) < 5000)) {
                isValid = false;
                errorMessages.push("La valeur des glaces doit être supérieure ou égale à 5000 DH.");
                $("#glassValue").addClass("is-invalid");
            }

            // Vérification du nombre de places
            let nombrePlaces = $("#seats").val().trim();
            if (!/^\d+$/.test(nombrePlaces) || parseInt(nombrePlaces) > 12) {
                isValid = false;
                errorMessages.push("Le nombre de places doit être un chiffre jusqu'à 12.");
                $("#seats").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 {
                $('#setAssurVehicule2').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() {
            $('#setAssurVehicule3').submit();
        });
        $(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');
        }
    });

    $(document).on('click', '.checkbox-garanties', function() {
        if ($(this).hasClass('active')) {
            $(this).removeClass('active');
            $('[data-class="'+$(this).val()+'"]').remove();
        }else {
            $(this).addClass('active');
            $('.garanties-ul').append('<li data-class="'+$(this).val()+'">'+$(this).val()+'</li>');
        }
    });
  </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>
  
@endsection