@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('AssurHabitation_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('AssurHabitation_session.process')>=1 ? 'bg-success text-white' : ''}}">2</div>
              <p class="{{session('AssurHabitation_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('AssurHabitation_session.process')>=2 ? 'bg-success text-white' : ''}}">3</div>
              <p class="{{session('AssurHabitation_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('AssurHabitation_session.process')>=3 ? 'bg-success text-white' : ''}}">4</div>
              <p class="{{session('AssurHabitation_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('AssurHabitation_session.process')) ? '' : 'd-none'}}">
                <div class="form-header mb-5">
                    <p>Caractéristiques du logement à assurer</p>
                </div>
            
                <form method="POST" action="{{ route('setAssurHabitation1') }}" id="setAssurHabitation1" enctype="multipart/form-data">
                    @csrf
                    
                    <div class="row">
                        <div id="errorMessages1"></div>
                        <div class="col-md-6">
                            <label for="valeur_contenu" class="form-label">Valeur du contenu *</label>
                            <input type="number" class="form-control" name="valeur_contenu" id="valeur_contenu" required>
                        </div>
                        
                        <div class="col-md-6">
                            <label for="type_occupation" class="form-label">Type d'occupation *</label>
                            <select class="form-select" name="type_occupation" id="type_occupation" required>
                                <option value="">Sélectionnez</option>
                                <option value="Propriétaire">Propriétaire</option>
                                <option value="Locataire">Locataire</option>
                            </select>
                        </div>
                        
                        <div class="col-md-6">
                            <label for="type_habitation" class="form-label">Type d'habitation *</label>
                            <select class="form-select" name="type_habitation" id="type_habitation" required>
                                <option value="">Sélectionnez</option>
                                <option value="Appartement">Appartement</option>
                                <option value="Villa">Villa</option>
                                <option value="Maison particulière">Maison particulière</option>
                                <option value="Duplex">Duplex</option>
                            </select>
                        </div>
                        
                        <div class="col-md-6">
                            <label for="nom_convention" class="form-label">Veuillez choisir le nom de la convention *</label>
                            <input type="text" class="form-control" name="nom_convention" id="nom_convention" required>
                        </div>
                        
                        <div class="col-md-6">
                            <label class="form-label">Vous avez un contrat automobile en cours ? *</label>
                            <div>
                                <input type="radio" name="contrat_auto" value="Oui" required> Oui
                                <input type="radio" name="contrat_auto" value="Non" required> Non
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <label for="numero_contrat_auto" class="form-label">N° Contrat Auto</label>
                            <input type="text" class="form-control" name="numero_contrat_auto" id="numero_contrat_auto">
                        </div>
                    </div>
            
                    <div class="row mt-4">
                        <div class="col-md-6">
                            <a class="btn btn-primary btn-precedent-section-1 mt-3"><i class="fa fa-arrow-left"></i> Précédent</a>
                        </div>
                        <div class="col-md-6 text-end">
                            <button type="submit" class="btn btn-primary btn-suivant-section-1 mt-3">Suivant <i class="fa fa-arrow-right"></i></button>
                        </div>
                    </div>
                </form>
            </div>
            
          
            <div class="form-container sec-section-2 {{session('AssurHabitation_session.process')=='2' ? '' : 'd-none'}}">
                <div class="form-header">
                    <h2>Données client</h2>
                </div>
                <form method="POST" action="{{ route('setAssurHabitation2') }}" id="setAssurHabitation2">
                    @csrf

                    <div id="errorMessages2"></div>
                    <ul class="nav nav-tabs" id="clientTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="physique-tab" data-bs-toggle="tab" data-bs-target="#physique" type="button" role="tab" data-id="physique" aria-controls="physique" aria-selected="true">Personne physique</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="morale-tab" data-bs-toggle="tab" data-bs-target="#morale" type="button" role="tab" data-id="morale" aria-controls="morale" aria-selected="false">Personne morale</button>
                        </li>
                    </ul>
                    <div class="tab-content mt-4" id="clientTabsContent">
                        <div class="tab-pane fade show active" id="physique" role="tabpanel" aria-labelledby="physique-tab">
                            <div class="row">
                                <div class="col-md-6">
                                    <label for="nom" class="form-label">Nom</label>
                                    <input type="text" class="form-control" name="nom" id="nom" required>
                                </div>
                                <div class="col-md-6">
                                    <label for="prenom" class="form-label">Prénom</label>
                                    <input type="text" class="form-control" name="prenom" id="prenom" required>
                                </div>
                                <div class="col-md-6">
                                    <label for="cin" class="form-label">Numéro CIN</label>
                                    <input type="text" class="form-control" name="cin" id="cin" required>
                                </div>
                                <div class="col-md-6">
                                    <label for="date_naissance" class="form-label">Date de naissance</label>
                                    <input type="date" class="form-control" name="date_naissance" id="date_naissance" required>
                                </div>
                                <div class="col-md-6">
                                    <label for="telephone" class="form-label">Téléphone</label>
                                    <input type="tel" class="form-control" name="telephone" id="telephone" required>
                                </div>
                                <div class="col-md-6">
                                    <label for="profession_actuelle" class="form-label">Profession actuelle</label>
                                    <input type="text" class="form-control" name="profession_actuelle" id="profession_actuelle" required>
                                </div>
                                <div class="col-md-6">
                                    <label for="detail_profession" class="form-label">Détail profession</label>
                                    <input type="text" class="form-control" name="detail_profession" id="detail_profession" required>
                                </div>
                                <div class="col-md-12">
                                    <label for="adresse" class="form-label">Adresse</label>
                                    <input type="text" class="form-control" name="adresse" id="adresse" required>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="morale" role="tabpanel" aria-labelledby="morale-tab">
                            <div class="row">
                                <div class="col-md-6">
                                    <label for="raison_sociale" class="form-label">Raison sociale</label>
                                    <input type="text" class="form-control" name="raison_sociale" id="raison_sociale" required>
                                </div>
                                <div class="col-md-6">
                                    <label for="forme_juridique" class="form-label">Forme juridique</label>
                                    <input type="text" class="form-control" name="forme_juridique" id="forme_juridique" required>
                                </div>
                                <div class="col-md-6">
                                    <label for="ice" class="form-label">ICE</label>
                                    <input type="text" class="form-control" name="ice" id="ice" required>
                                </div>
                                <div class="col-md-6">
                                    <label for="rc" class="form-label">N° RC</label>
                                    <input type="text" class="form-control" name="rc" id="rc" required>
                                </div>
                                <div class="col-md-6">
                                    <label for="if" class="form-label">IF</label>
                                    <input type="text" class="form-control" name="if" id="if" required>
                                </div>
                                <div class="col-md-6">
                                    <label for="type_activite" class="form-label">Type d'activité</label>
                                    <input type="text" class="form-control" name="type_activite" id="type_activite" required>
                                </div>
                                <div class="col-md-12">
                                    <label for="adresse_morale" class="form-label">Adresse</label>
                                    <input type="text" class="form-control" name="adresse_morale" id="adresse_morale" required>
                                </div>
                                <div class="col-md-6">
                                    <label for="telephone_morale" class="form-label">Téléphone</label>
                                    <input type="tel" class="form-control" name="telephone_morale" id="telephone_morale" required>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-4">
                        <div class="col-md-6">
                            <a class="btn btn-primary btn-precedent-section-2 mt-3"><i class="fa fa-arrow-left"></i> Précédent</a>
                        </div>
                        <div class="col-md-6 text-end">
                            <button type="submit" class="btn btn-primary btn-suivant-section-2 mt-3">Suivant <i class="fa fa-arrow-right"></i></button>
                        </div>
                    </div>
                </form>
            </div>
            
          <div class="form-container sec-section-3 {{session('AssurHabitation_session.process')=='3' ? '' : 'd-none'}}">
            <form>
                <div class="row g-4">
                    <!-- First Card -->
                    <div class="col-md-12">
                        <div class="card h-100 granties border shadow-sm">
                            <div class="card-body p-2 pt-4 position-relative">
                                <div class="icon-circle">
                                </div>
                                <strong>100% en ligne</strong>
                                <p>
                                    Paiement en ligne
                                </p>
                                <input class="invisible-checkbox" type="checkbox" name="garanties[]" value=" tous Accidents" />
                            </div>
                        </div>
                    </div>
                    <!-- Second Card -->
                    <div class="col-md-12">
                        <div class="card h-100 granties border shadow-sm">
                            <div class="card-body p-2 pt-4">
                                <div class="icon-circle">
                                    
                                </div>
                                <strong>En espèce ou par chèque</strong>
                                <p>
                                    Payez à la livraison ou à l’agence WAFA la plus proche
                                </p>
                                <input class="invisible-checkbox" type="checkbox" name="garanties[]" value="Sérénité" />
                            </div>
                        </div>
                    </div>
                    <!-- Third Card -->
                    <div class="col-md-12">
                        <div class="card h-100 granties border shadow-sm">
                            <div class="card-body p-2 pt-4">
                                <div class="icon-circle">
                                    
                                </div>
                                <strong>Par prélèvement</strong>
                                <p>
                                    Payez par prélèvement depuis votre salaire
                                </p>
                                <input class="invisible-checkbox" type="checkbox" name="garanties[]" value="Vol" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                    <a class="btn btn-primary btn-precedent-section-3 mt-4"><i class="fa fa-arrow-left"></i> Precedent</a>
                    </div>
                    <div class="col-md-6 text-end">
                    <a  id="submit-btn" class="btn btn-primary btn-suivant-section-3 mt-3">suivant  <i class="fa fa-arrow-right"></i></a>
                    </div>
                </div>
            </form>
          </div>
          <div class="form-container sec-section-4 {{session('AssurHabitation_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('AssurHabitation_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 HABITATION :</h3>
            
                    <!-- Display Habitation Details -->
                    @if(!empty(session('AssurHabitation_session.HabitationDetails')))
                        @foreach(session('AssurHabitation_session.HabitationDetails') as $key => $value)
                            <div class="row mb-3">
                                <div class="col label"><strong>{{ ucfirst(str_replace('_', ' ', $key)) }}</strong></div>
                                <div class="col">{{ $value }}</div>
                            </div>
                        @endforeach
                    @endif
            
                    <h3 class="card-title mb-4">INFOS CLIENT :</h3>
            
                    <!-- Display Client Details -->
                    @if(!empty(session('AssurHabitation_session.ClientDetails')))
                        @foreach(session('AssurHabitation_session.ClientDetails') as $key => $value)
                            <div class="row mb-3">
                                <div class="col label"><strong>{{ ucfirst(str_replace('_', ' ', $key)) }}</strong></div>
                                <div class="col">{{ $value }}</div>
                            </div>
                        @endforeach
                    @endif
            
                    <!-- Display Process Status -->
                    @if(!empty(session('AssurHabitation_session.process')))
                        <div class="row mb-3">
                            <div class="col label"><strong>Process Status</strong></div>
                            <div class="col">{{ session('AssurHabitation_session.process') }}</div>
                        </div>
                    @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 = [];
        
            // Clear previous errors
            $('#errorMessages1').html('');
            $('.form-control').removeClass('is-invalid');
        
            // Valeur du contenu (Chiffres uniquement)
            let valeurContenu = $('#valeur_contenu').val().trim();
            if (!/^[0-9]+$/.test(valeurContenu)) {
                isValid = false;
                errorMessages.push('La valeur du contenu doit contenir uniquement des chiffres.');
                $('#valeur_contenu').addClass('is-invalid');
            }
        
            // Type d'occupation (Sélection obligatoire)
            let typeOccupation = $('#type_occupation').val();
            if (typeOccupation === '') {
                isValid = false;
                errorMessages.push("Veuillez sélectionner un type d'occupation.");
                $('#type_occupation').addClass('is-invalid');
            }
        
            // Type d'habitation (Sélection obligatoire)
            let typeHabitation = $('#type_habitation').val();
            if (typeHabitation === '') {
                isValid = false;
                errorMessages.push("Veuillez sélectionner un type d'habitation.");
                $('#type_habitation').addClass('is-invalid');
            }
        
            // Nom de la convention (Obligatoire)
            let nomConvention = $('#nom_convention').val().trim();
            if (nomConvention === '') {
                isValid = false;
                errorMessages.push("Veuillez choisir le nom de la convention.");
                $('#nom_convention').addClass('is-invalid');
            }
        
            // Contrat automobile (Oui/Non obligatoire)
            if (!$('input[name="contrat_auto"]').is(':checked')) {
                isValid = false;
                errorMessages.push("Veuillez indiquer si vous avez un contrat automobile en cours.");
            }
        
            // Numéro de contrat automobile (Si 'Oui', chiffres uniquement)
            let contratAuto = $('input[name="contrat_auto"]:checked').val();
            let numeroContratAuto = $('#numero_contrat_auto').val().trim();
            if (contratAuto === 'Oui' && !/^[0-9]+$/.test(numeroContratAuto)) {
                isValid = false;
                errorMessages.push("Le numéro de contrat auto doit contenir uniquement des chiffres.");
                $('#numero_contrat_auto').addClass('is-invalid');
            }
        
            // Display errors if any
            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 {
                $('#setAssurHabitation1').submit();
            }
        });

        $(document).on('click', '.nav-link', function () {
            $('.nav-link').removeClass('active');
            $('.tab-pane').removeClass('active');
            $('.tab-pane').removeClass('show');

            $(this).addClass('active');
            $('#'+$(this).data('id')).addClass('active');
            $('#'+$(this).data('id')).addClass('show');

        });


        $(document).on('click', '.btn-suivant-section-2', function () {
            let isValid = true;
            let errorMessages = [];
    
            // Clear previous errors
            $('#errorMessages2').html('');
            $('.form-control').removeClass('is-invalid');
    
            // Personne physique validation
            if ($('#physique-tab').hasClass('active')) {
                let nom = $('#nom').val().trim();
                let prenom = $('#prenom').val().trim();
                let cin = $('#cin').val().trim();
                let dateNaissance = $('#date_naissance').val().trim();
                let telephone = $('#telephone').val().trim();
                let professionActuelle = $('#profession_actuelle').val().trim();
                let detailProfession = $('#detail_profession').val().trim();
                let adresse = $('#adresse').val().trim();
    
                if (!/^[A-Za-zÀ-ÖØ-öø-ÿs]+$/.test(nom)) {
                    isValid = false;
                    errorMessages.push('Le nom ne doit contenir que des lettres.');
                    $('#nom').addClass('is-invalid');
                }
                if (!/^[A-Za-zÀ-ÖØ-öø-ÿs]+$/.test(prenom)) {
                    isValid = false;
                    errorMessages.push('Le prénom ne doit contenir que des lettres.');
                    $('#prenom').addClass('is-invalid');
                }
                if (!/^[A-Za-z]{1,2}\d{1,10}$/.test(cin)) {
                    isValid = false;
                    errorMessages.push('Le CIN doit commencer par 1 ou 2 lettres suivies de max 10 chiffres.');
                    $('#cin').addClass('is-invalid');
                }

                if (telephone === '' || !/^(06|07|05)\d{8}$/.test(telephone)) {
                    isValid = false;
                    errorMessages.push('Le téléphone doit commencer par 06, 07 ou 05 et contenir 10 chiffres.');
                    $('#telephone').addClass('is-invalid');
                }

                if (professionActuelle === '') {
                    isValid = false;
                    errorMessages.push('La profession actuelle est obligatoire.');
                    $('#profession_actuelle').addClass('is-invalid');
                }
                
                if (!/^[A-Za-zÀ-ÖØ-öø-ÿs]+$/.test(detailProfession)) {
                    isValid = false;
                    errorMessages.push('Le détail de la profession ne doit contenir que des lettres.');
                    $('#detail_profession').addClass('is-invalid');
                }
                
                if (adresse === '') {
                    isValid = false;
                    errorMessages.push('L adresse est obligatoire.');
                    $('#adresse').addClass('is-invalid');
                }
            }
    
            // Personne morale validation
            if ($('#morale-tab').hasClass('active')) {
                let raisonSociale = $('#raison_sociale').val().trim();
                let formeJuridique = $('#forme_juridique').val().trim();
                let ice = $('#ice').val().trim();
                let rc = $('#rc').val().trim();
                let ifNum = $('#if').val().trim();
                let typeActivite = $('#type_activite').val().trim();
                let adresseMorale = $('#adresse_morale').val().trim();
                let telephoneMorale = $('#telephone_morale').val().trim();
    
                if (raisonSociale === '') {
                    isValid = false;
                    errorMessages.push('La raison sociale est obligatoire.');
                    $('#raison_sociale').addClass('is-invalid');
                }
                if (formeJuridique === '') {
                    isValid = false;
                    errorMessages.push('La forme juridique est obligatoire.');
                    $('#forme_juridique').addClass('is-invalid');
                }
                if (!/^d{15}$/.test(ice)) {
                    isValid = false;
                    errorMessages.push('ICE doit contenir 15 chiffres.');
                    $('#ice').addClass('is-invalid');
                }
                if (!/^d+$/.test(rc)) {
                    isValid = false;
                    errorMessages.push('Le numéro RC doit contenir uniquement des chiffres.');
                    $('#rc').addClass('is-invalid');
                }
                if (!/^d+$/.test(ifNum)) {
                    isValid = false;
                    errorMessages.push('Le numéro IF doit contenir uniquement des chiffres.');
                    $('#if').addClass('is-invalid');
                }
                if (typeActivite === '') {
                    isValid = false;
                    errorMessages.push('Le type d activité est obligatoire.');
                    $('#type_activite').addClass('is-invalid');
                }
                if (adresseMorale === '') {
                    isValid = false;
                    errorMessages.push('L adresse est obligatoire.');
                    $('#adresse_morale').addClass('is-invalid');
                }
                if (!/^(05|06|07)d{8}$/.test(telephoneMorale)) {
                    isValid = false;
                    errorMessages.push('Le téléphone doit commencer par 05, 06 ou 07 et contenir 10 chiffres.');
                    $('#telephone_morale').addClass('is-invalid');
                }
            }
    
            // Show error messages
            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 {
                $('#setAssurHabitation2').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() {
            $('#setAssurHabitation3').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');
        }
    });
  </script>
<script>
    $(document).ready(function() {
        const fileInputs = {
            'id-card': { preview: '#id-card-preview', error: '#id-card-error', files: [] },
            'license': { preview: '#license-preview', error: '#license-error', files: [] },
            'gray-card': { preview: '#gray-card-preview', error: '#gray-card-error', files: [] }
        };

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

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

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

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

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

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

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

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

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

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

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