@php
    use Carbon\Carbon;
@endphp

@section('styles')
<style>
    .hidden {
        display: none;
    }
</style>
@endsection

@extends('layouts.root')

<!-- Feuille de style Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
@section('root-body')
    
<!-- Card START -->
<div class="card bg-transparent">

    <!-- Card body START -->
    <div class="card-body">
    
        <!-- =======================
        Steps START -->
        <section>
            <div class="container">
                <div class="row">
                    <div class="col-md-8 mx-auto text-center">
                        <!-- Content -->
                        <p class="text-center">Utilisez cette interface uniquement pour la creation ou le recensement des operateurs economiques.</p>
                    </div>
                </div>

                <div class="card bg-transparent border rounded-3 mb-5">
                    <div id="stepper" class="bs-stepper stepper-outline">
                        <!-- Card header -->
                        <div class="card-header bg-light border-bottom px-lg-5">
                            <!-- Step Buttons START -->
                            <div class="bs-stepper-header" role="tablist">
                                <!-- Step 1 -->
                                <div class="step" data-target="#step-1">
                                    <div class="d-grid text-center align-items-center">
                                        <button type="button" class="btn btn-link step-trigger mb-0" role="tab" id="steppertrigger1" aria-controls="step-1">
                                            <span class="bs-stepper-circle">1</span>
                                        </button>
                                        <h6 class="bs-stepper-label d-none d-md-block">Generalites</h6>
                                    </div>
                                </div>
                                <div class="line"></div>

                                <!-- Step 2 -->
                                <div class="step" data-target="#step-2">
                                    <div class="d-grid text-center align-items-center">
                                        <button type="button" class="btn btn-link step-trigger mb-0" role="tab" id="steppertrigger2" aria-controls="step-2">
                                            <span class="bs-stepper-circle">2</span>
                                        </button>
                                        <h6 class="bs-stepper-label d-none d-md-block">Institution</h6>
                                    </div>
                                </div>
                                <div class="line"></div>

                                <!-- Step 3 -->
                                <div class="step" data-target="#step-3">
                                    <div class="d-grid text-center align-items-center">
                                        <button type="button" class="btn btn-link step-trigger mb-0" role="tab" id="steppertrigger3" aria-controls="step-3">
                                            <span class="bs-stepper-circle">3</span>
                                        </button>
                                        <h6 class="bs-stepper-label d-none d-md-block">Le responsable</h6>
                                    </div>
                                </div>
                                <div class="line"></div>

                                <!-- Step 4 -->
                                <div class="step" data-target="#step-4">
                                    <div class="d-grid text-center align-items-center">
                                        <button type="button" class="btn btn-link step-trigger mb-0" role="tab" id="steppertrigger4" aria-controls="step-4">
                                            <span class="bs-stepper-circle">4</span>
                                        </button>
                                        <h6 class="bs-stepper-label d-none d-md-block">Localisation</h6>
                                    </div>
                                </div>
                            </div>
                            <!-- Step Buttons END -->
                        </div>

                        <!-- Card body START -->
                        <div class="card-body">
                            <!-- Step content START -->
                            <div class="bs-stepper-content">
                                <form method="POST" action="{{ route('root.storeOperateur') }}" enctype="multipart/form-data">

                                    @csrf

                                    <input type="hidden" name="collecteur_id" value="{{ Auth::user()->id }}" />
                                    <input type="hidden" name="commune_id" value="{{ $rootCommune->id }}">
                                    <input type="hidden" name="active" value="1">

                                    <!-- Step 1 content START -->
                                    <div id="step-1" role="tabpanel" class="content fade" aria-labelledby="steppertrigger1">
                                        <!-- Title -->
                                        <h4>Generalites</h4>

                                        <hr> <!-- Divider -->

                                        <!-- Basic information START -->
                                        <div class="row g-4">
                                            <!-- Course title -->
                                            <div class="col-6">
                                                <label class="form-label">Code</label>
                                                <input class="form-control" type="text" name="code" placeholder="Code" value="{{ date('Y') }}-{{ str_pad(mt_rand(1, 999999), 6, '0', STR_PAD_LEFT) }}">
                                            </div>

                                            <!-- Course level -->
                                            <div class="col-md-6">
                                                <label class="form-label">Recensement</label>
                                                <select class="form-select js-choice border-0 z-index-9 bg-transparent" name="recensement_id" required>
                                                    <option value="">Select Recensement</option>
                                                    @foreach($collecteList as $collecte)
                                                    <option value="{{ $collecte->id }}">{{ $collecte->libelle }}</option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            <!-- Course title -->
                                            <div class="col-6">
                                                <label class="form-label">Raison sociale</label>
                                                <input class="form-control" type="text" name="raison_sociale" @error('raison_sociale') is-invalid @enderror" placeholder="Raison sociale" value="{{ old('raison_sociale') }}" required>
                                                @error('raison_sociale')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>

                                            <!-- Course title -->
                                            <div class="col-6">
                                                <label class="form-label">Sigle</label>
                                                <input class="form-control" type="text" name="sigle" placeholder="Sigle" value="{{ old('sigle') }}">
                                            </div>

                                            <!-- Course title -->
                                            <div class="col-6">
                                                <label class="form-label">Statut juridique</label>
                                                <input class="form-control" type="text" name="statut_juridique" placeholder="Statut juridique" value="{{ old('statut_juridique') }}">
                                            </div>

                                            <!-- Course title -->
                                            <div class="col-6">
                                                <label class="form-label">Uploader la Fiche circuit</label>
                                                <div class="input-group mb-3">
                                                    <input type="file" class="form-control" id="inputGroupFile01" name="fiche">
                                                    <label class="input-group-text">Fiche circuit</label>
                                                </div>
                                            </div>

                                            <!-- Course title -->
                                            <div class="col-4">
                                                <label class="form-label">Telephone 1</label>
                                                <input class="form-control" type="phone" name="telephone1" placeholder="Telephone 1" value="{{ old('telephone1') }}">
                                            </div>

                                            <!-- Course title -->
                                            <div class="col-4">
                                                <label class="form-label">Telephone 2</label>
                                                <input class="form-control" type="phone" name="telephone2" placeholder="Telephone 2" value="{{ old('telephone2') }}">
                                            </div>

                                            <!-- Course title -->
                                            <div class="col-4">
                                                <label class="form-label">Telephone 3</label>
                                                <input class="form-control" type="phone" name="telephone3" placeholder="Telephone 3" value="{{ old('telephone3') }}">
                                            </div>

                                            <!-- Course title -->
                                            <div class="col-6">
                                                <label class="form-label">Site web (facultatif)</label>
                                                <input class="form-control" type="text" name="website" placeholder="Site web" value="{{ old('website') }}">
                                            </div>
                                            
                                            <!-- Course description -->
                                            <div class="col-6">
                                                <label class="form-label">Activité principale</label>
                                                <!-- Editor toolbar -->
                                                <input class="form-control" type="text" name="activite_principale" placeholder="Activité principale" value="{{ old('activite_principale') }}">
                                                
                                            </div>	
                                            
                                            <!-- Course description -->
                                            <div class="col-12">
                                                <label class="form-label">Quels sont les produits ou services ?</label>
                                                <!-- Editor toolbar -->
                                                <textarea class="form-control" id="summernote" name="production"></textarea>
                                            </div>	

                                            <!-- Step 1 button -->
                                            <div class="d-flex justify-content-end mt-3">
                                                <a class="btn btn-primary next-btn mb-0">Suivant</a>
                                            </div>
                                        </div>
                                        <!-- Basic information START -->
                                    </div>
                                    <!-- Step 1 content END -->

                                    <!-- Step 2 content START -->
                                    <div id="step-2" role="tabpanel" class="content fade" aria-labelledby="steppertrigger2">
                                        <!-- Title -->
                                        <h4>Institution</h4>

                                        <hr> <!-- Divider -->

                                        <!-- Basic information START -->
                                        <div class="row g-4">

                                            <!-- Course title -->
                                            <div class="col-6">
                                                <label class="form-label">Registre de commerce (RCCM)</label>
                                                <input class="form-control" type="text" name="rccm" placeholder="Registre de commerce" value="{{ old('rccm') }}" required>
                                            </div>

                                            <!-- Course title -->
                                            <div class="col-6">
                                                <label class="form-label">Date Registre de commerce (RCCM)</label>
                                                <input class="form-control" type="date" name="date_rccm" placeholder="Date Registre de commerce" value="{{ old('date_rccm') }}" required>
                                            </div>

                                            <!-- Course title -->
                                            <div class="col-6">
                                                <label class="form-label">Numero Identification Fiscale (NIF)</label>
                                                <input class="form-control" type="text" name="nif" placeholder="Numero Identification Fiscale" value="{{ old('nif') }}" required>
                                            </div>

                                            <!-- Course title -->
                                            <div class="col-6">
                                                <label class="form-label">Date NIF</label>
                                                <input class="form-control" type="date" name="date_nif" placeholder="Date NIF" value="{{ old('date_nif') }}" required>
                                            </div>

                                            <!-- Course title -->
                                            <div class="col-12">
                                                <label class="form-label">Nombre d'employes (facultatif)</label>
                                                <input class="form-control" type="number" name="nbre_employes" placeholder="Nombre d'employes" value="{{ old('nbre_employes') }}" required>
                                            </div>

                                            <!-- Course title -->
                                            <div class="col-6">
                                                <label class="form-label">Type de local (facultatif)</label>
                                                <input class="form-control" type="text" name="type_local" placeholder="Type de local" value="{{ old('type_local') }}" required>
                                            </div>

                                            <!-- Course category -->
                                            <div class="col-md-6">
                                                <label class="form-label">En location ?</label>
                                                <select class="form-select js-choice border-0 z-index-9 bg-transparent" name="location" id="location" required>
                                                    <option value="">Select Statut</option>
                                                    <option value="0">Non</option>
                                                    <option value="1">Oui</option>
                                                </select>
                                            </div>

                                            <!-- Course title -->
                                            <div class="col-6 hidden" id="nom_proprio_container">
                                                <label class="form-label">Nom du proprietaire (facultatif)</label>
                                                <input class="form-control" type="text" name="nom_proprio" id="nom_proprio" placeholder="Nom du proprietaire" value="{{ old('nom_proprio') }}">
                                            </div>

                                            <!-- Course title -->
                                            <div class="col-6 hidden" id="phone_proprio_container">
                                                <label class="form-label">Contact du proprietaire (facultatif)</label>
                                                <input class="form-control" type="phone" name="phone_proprio" id="phone_proprio" placeholder="Contact du proprietaire" value="{{ old('phone_proprio') }}">
                                            </div>

                                            <!-- Course category -->
                                            <div class="col-md-12">
                                                <label class="form-label">Etes-vous banquarise ?</label>
                                                <select class="form-select js-choice border-0 z-index-9 bg-transparent" id="bancarise" name="bancarise" required>
                                                    <option value="">Select Statut</option>
                                                    <option value="0">Non</option>
                                                    <option value="1">Oui</option>
                                                </select>
                                            </div>

                                            <!-- Course title -->
                                            <div class="col-6 hidden" id="nom_banque_container">
                                                <label class="form-label">Nom de la Banque (facultatif)</label>
                                                <input class="form-control" type="text" name="nom_banque" id="nom_banque" placeholder="Nom de la Banque" value="{{ old('nom_banque') }}" required>
                                            </div>

                                            <!-- Course title -->
                                            <div class="col-6 hidden" id="numero_cpte_bancaire_container">
                                                <label class="form-label">Numero Compte Bancaire (facultatif)</label>
                                                <input class="form-control" type="text" name="numero_cpte_bancaire" id="numero_cpte_bancaire" placeholder="Numero Compte Bancaire" value="{{ old('numero_cpte_bancaire') }}" required>
                                            </div>

                                            <!-- Course category -->
                                            <div class="col-md-6">
                                                <label class="form-label">Etes-vous affilier a la CNSS ?</label>
                                                <select class="form-select js-choice border-0 z-index-9 bg-transparent" id="cnss" name="cnss" required>
                                                    <option value="">Select Statut</option>
                                                    <option value="0">Non</option>
                                                    <option value="1">Oui</option>
                                                </select>
                                            </div>

                                            <!-- Course title -->
                                            <div class="col-6 hidden" id="numero_cnss_container">
                                                <label class="form-label">Numero CNSS (facultatif)</label>
                                                <input class="form-control" type="text" name="numero_cnss" id="numero_cnss" placeholder="Numero CNSS" value="{{ old('numero_cnss') }}" required>
                                            </div>

                                            <!-- Course category -->
                                            <div class="col-md-6">
                                                <label class="form-label">Etes-vous affilier a la CNAMGS ?</label>
                                                <select class="form-select js-choice border-0 z-index-9 bg-transparent" id="cnamgs" name="cnamgs" required>
                                                    <option value="">Select Statut</option>
                                                    <option value="0">Non</option>
                                                    <option value="1">Oui</option>
                                                </select>
                                            </div>

                                            <!-- Course title -->
                                            <div class="col-6 hidden" id="numero_cnamgs_container">
                                                <label class="form-label">Numero CNAMGS (facultatif)</label>
                                                <input class="form-control" type="text" name="numero_cnamgs" id="numero_cnamgs" placeholder="Numero CNAMGS" value="{{ old('numero_cnamgs') }}" required>
                                            </div>

                                            <!-- Course title -->
                                            <div class="col-6">
                                                <label class="form-label">Chiffre d'affaire annuel (* facultatif)</label>
                                                <input class="form-control" type="number" name="chiffres_affaires" placeholder="Chiffre d'affaire annuel" required value="{{ old('chiffres_affaires') }}">
                                            </div>

                                            <!-- Course title -->
                                            <div class="col-6">
                                                <label class="form-label">Capital social (facultatif)</label>
                                                <input class="form-control" type="number" name="capital_social" placeholder="Capital social" value="{{ old('capital_social') }}" required>
                                            </div>

                                            <!-- Course category -->
                                            <div class="col-md-6">
                                                <label class="form-label">Secteur</label>
                                                <select class="form-select js-choice border-0 z-index-9 bg-transparent" name="secteur_id" required>
                                                    <option value="">Select Secteur</option>
                                                    @foreach($secteurList as $secteur)
                                                    <option value="{{ $secteur->id }}">{{ $secteur->libelle }}</option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            <!-- Course level -->
                                            <div class="col-md-6">
                                                <label class="form-label">Domaine d'activité</label>
                                                <select class="form-select js-choice border-0 z-index-9 bg-transparent" name="activite_id" required>
                                                    <option value="">Select Domaine</option>
                                                    @foreach($domaineList as $domaine)
                                                    <option value="{{ $domaine->id }}">{{ $domaine->libelle }}</option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            <!-- Course level -->
                                            <div class="col-md-12">
                                                <label class="form-label">Informel ou Formel</label>
                                                <select class="form-select js-choice border-0 z-index-9 bg-transparent" name="type_secteur_id" required>
                                                    <option value="">Select Mode</option>
                                                    @foreach($typeSecteurList as $type)
                                                    <option value="{{ $type->id }}">{{ $type->libelle }}</option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            <!-- Step 2 button -->
                                            <div class="d-flex justify-content-between">
                                                <a class="btn btn-secondary prev-btn mb-0">Precedent</a>
                                                <a class="btn btn-primary next-btn mb-0">Suivant</a>
                                            </div>
                                        </div>
                                        <!-- Basic information START -->
                                    </div>
                                    <!-- Step 2 content END -->

                                    <!-- Step 3 content START -->
                                    <div id="step-3" role="tabpanel" class="content fade" aria-labelledby="steppertrigger3">
                                        <!-- Title -->
                                        <h4>Le responsable</h4>

                                        <hr> <!-- Divider -->

                                        <!-- Basic information START -->
                                        <div class="row g-4">

                                            <!-- Course title -->
                                            <div class="col-6">
                                                <label class="form-label">Noms</label>
                                                <input class="form-control" type="text" name="nom_respo" placeholder="Noms" value="{{ old('nom_respo') }}" required>
                                            </div>

                                            <!-- Course title -->
                                            <div class="col-6">
                                                <label class="form-label">Prenoms</label>
                                                <input class="form-control" type="text" name="prenom_respo" placeholder="Prenoms" value="{{ old('prenom_respo') }}" required>
                                            </div>

                                            <!-- Course title -->
                                            <div class="col-6">
                                                <label class="form-label">Adresse</label>
                                                <input class="form-control" type="text" name="adresse_respo" placeholder="Adresse" value="{{ old('adresse_respo') }}" required>
                                            </div>

                                            <!-- Course title -->
                                            <div class="col-6">
                                                <label class="form-label">Telephone</label>
                                                <input class="form-control" type="phone" name="telephone_respo" placeholder="Telephone" value="{{ old('telephone_respo') }}" required>
                                            </div>

                                            <!-- Course title -->
                                            <div class="col-6">
                                                <label class="form-label">Date de Naissance</label>
                                                <input class="form-control" type="date" name="date_naissance_respo" placeholder="Date de Naissance" value="{{ old('date_naissance_respo') }}" required>
                                            </div>

                                            <!-- Course title -->
                                            <div class="col-6">
                                                <label class="form-label">Lieu de Naissance</label>
                                                <input class="form-control" type="text" name="lieu_naissance_respo" placeholder="Lieu de Naissance" value="{{ old('lieu_naissance_respo') }}" required>
                                            </div>

                                            <!-- Course title -->
                                            <div class="col-6">
                                                <label class="form-label">Nationalite</label>
                                                <input class="form-control" type="text" name="nationalite" placeholder="Nationalite" value="{{ old('nationalite') }}" required>
                                            </div>

                                            <!-- Course level -->
                                            <div class="col-md-6">
                                                <label class="form-label">Identification</label>
                                                <select class="form-select js-choice border-0 z-index-9 bg-transparent" name="type_piece" required>
                                                    <option value="">Select Identification</option>
                                                    <option value="Carte nationale">Carte nationale</option>
                                                    <option value="Permis">Permis de conduire</option>
                                                    <option value="Passeport">Passeport</option>
                                                    <option value="Carte de sejour">Carte de sejour</option>
                                                </select>
                                            </div>

                                            <!-- Course title -->
                                            <div class="col-6">
                                                <label class="form-label">Numero Piece</label>
                                                <input class="form-control" type="text" name="numero_piece" placeholder="Numero Piece" value="{{ old('numero_piece') }}" required>
                                            </div>

                                            <!-- Course title -->
                                            <div class="col-6">
                                                <label class="form-label">Uploader la Piece</label>
                                                <div class="input-group mb-3">
                                                    <input type="file" class="form-control" id="inputGroupFile01" name="piece_identite">
                                                    <label class="input-group-text">Piece</label>
                                                </div>
                                            </div>


                                            <!-- Step 3 button -->
                                            <div class="d-flex justify-content-between">
                                                <a class="btn btn-secondary prev-btn mb-0">Precedent</a>
                                                <a class="btn btn-primary next-btn mb-0">Suivant</a>
                                            </div>
                                        </div>
                                        <!-- Basic information START -->
                                    </div>
                                    <!-- Step 3 content END -->

                                    <!-- Step 4 content START -->
                                    <div id="step-4" role="tabpanel" class="content fade" aria-labelledby="steppertrigger4">
                                        <!-- Title -->
                                        <h4>Localisation</h4>

                                        <hr> <!-- Divider -->

                                        <!-- Basic information START -->
                                        <div class="row g-4">
                                            

                                            <!-- Course title -->
                                            <div class="col-6">
                                                <label class="form-label">Adresse</label>
                                                <input class="form-control" type="text" name="adresse" placeholder="Adresse" value="{{ old('adresse') }}">
                                            </div>

                                            <!-- Course level -->
                                            <div class="col-md-6">
                                                <label class="form-label">Quartier</label>
                                                <select class="form-select js-choice border-0 z-index-9 bg-transparent"  name="quartier_id">
                                                    <option value="">Select Quartier</option>
                                                    @foreach($quartierList as $zone)
                                                    <option value="{{ $zone->id }}">{{ $zone->libelle }}</option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            <!-- Course title -->
                                            <div class="col-6">
                                                <label class="form-label">Longitude</label>
                                                <input class="form-control" id="longitude" type="number" step="any" name="longitude" placeholder="Longitude" value="{{ old('longitude') }}">
                                            </div>

                                            <!-- Course title -->
                                            <div class="col-6">
                                                <label class="form-label">Latitude</label>
                                                <input class="form-control" id="latitude" type="number" step="any" name="latitude" placeholder="Latitude" value="{{ old('latitude') }}">
                                            </div>

                                            <!-- Course title -->
                                            <div class="col-12">
                                                <div id="map" style="height: 250px;"></div>
                                            </div>

                                            <!-- Step 4 button -->
                                            <div class="d-md-flex justify-content-between align-items-start mt-4">
                                                <a class="btn btn-primary prev-btn mb-2 mb-md-0">Precedent</a>
                                                <div class="text-md-end">
                                                    <button type="submit" class="btn btn-success me-auto ms-md-2 mb-2 mb-md-0">Sauvegarder les informations</button>
                                                    <p class="mb-0 small mt-1">
                                                        Une fois le formulaire soumis, un superviseur se chargera de valider les informations et de declencher
                                                        au besoin la procedure d'impression de la carte de cet operateur.
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- Basic information START -->
                                    </div>
                                    <!-- Step 4 content END -->

                                </form>
                            </div>
                        </div>
                        <!-- Card body END -->
                    </div>
                </div>
            </div>
        </section>
        <!-- =======================
        Steps END -->

    </div>
    <!-- Card END -->

</div>
<!-- Card END -->




@endsection

@section('scripts')

<!-- Bibliothèque Leaflet -->
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script>
    // Créer une carte avec Leaflet
    var map = L.map('map').setView([0.3901, 9.4544], 13);

    // Ajouter une couche de tuiles OpenStreetMap
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">INITIALDEV - E-KADI V1.0</a> contributors'
    }).addTo(map);

    // Initialiser les champs de longitude et de latitude
    var longitudeInput = document.getElementById('longitude');
    var latitudeInput = document.getElementById('latitude');

    // Créer un marqueur initial pour Libreville
    var marker = L.marker([0.3901, 9.4544], {
        draggable: true // Rendre le marqueur déplaçable
    }).addTo(map);

    // Ajouter un gestionnaire d'événements de clic à la carte
    map.on('click', function(e) {
        // Récupérer les coordonnées du clic
        var lat = e.latlng.lat.toFixed(6);
        var lng = e.latlng.lng.toFixed(6);

        // Remplir les champs d'entrée avec les coordonnées du clic
        longitudeInput.value = lng;
        latitudeInput.value = lat;

        // Déplacer le marqueur vers l'emplacement du clic
        marker.setLatLng(e.latlng).update();
    });

    // Ajouter un gestionnaire d'événements de déplacement du marqueur
    marker.on('dragend', function(e) {
        // Récupérer les coordonnées du marqueur après le déplacement
        var lat = e.target.getLatLng().lat.toFixed(6);
        var lng = e.target.getLatLng().lng.toFixed(6);

        // Remplir les champs d'entrée avec les nouvelles coordonnées
        longitudeInput.value = lng;
        latitudeInput.value = lat;
    });
</script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var locationSelect = document.getElementById('location');
        var nomProprioContainer = document.getElementById('nom_proprio_container');
        var phoneProprioContainer = document.getElementById('phone_proprio_container');

        locationSelect.addEventListener('change', function() {
            if (locationSelect.value === '1') {
                nomProprioContainer.classList.remove('hidden');
                phoneProprioContainer.classList.remove('hidden');
            } else {
                nomProprioContainer.classList.add('hidden');
                phoneProprioContainer.classList.add('hidden');
            }
        });
    });
</script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var bancariseSelect = document.getElementById('bancarise');
        var numeroCompteBancaireContainer = document.getElementById('numero_cpte_bancaire_container');
        var nomBanqueContainer = document.getElementById('nom_banque_container');

        bancariseSelect.addEventListener('change', function() {
            if (bancariseSelect.value === '1') {
                numeroCompteBancaireContainer.classList.remove('hidden');
                nomBanqueContainer.classList.remove('hidden');
            } else {
                numeroCompteBancaireContainer.classList.add('hidden');
                nomBanqueContainer.classList.add('hidden');
            }
        });
    });
</script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var cnssSelect = document.getElementById('cnss');
        var numeroCnssContainer = document.getElementById('numero_cnss_container');

        cnssSelect.addEventListener('change', function() {
            if (cnssSelect.value === '1') {
                numeroCnssContainer.classList.remove('hidden');
            } else {
                numeroCnssContainer.classList.add('hidden');
            }
        });
    });
</script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var cnamgsSelect = document.getElementById('cnamgs');
        var numeroCnamgsContainer = document.getElementById('numero_cnamgs_container');

        cnamgsSelect.addEventListener('change', function() {
            if (cnamgsSelect.value === '1') {
                numeroCnamgsContainer.classList.remove('hidden');
            } else {
                numeroCnamgsContainer.classList.add('hidden');
            }
        });
    });
</script>


@endsection