@extends('model')
@section('content')
    <style>
        .form-label {
            color: #333;
            margin-bottom: 5px;
        }


        .form-control,
        .form-select {
            border: 1px solid #ccc;
            border-radius: 5px;
            transition: border-color 0.3s;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: #6f3b23;
            box-shadow: 0 0 5px rgba(105, 59, 26, 0.5);
        }

        .modal-footer {
            justify-content: space-between;
        }  

        .form-label i {
            margin-right: 5px;
            color: #6f3b23;
        }
    </style>
    <div id="modalCreationAssurancehabitation" class="modal fade bs-example-modal-xl" tabindex="-1" role="dialog"
        aria-labelledby="titreModalAssurancehabitation" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="titreModalAssurancehabitation">Ajouter une habitation</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <form id="FormCreationAssurancehabitation">
                    @csrf
                    <div class="modal-body">
                        <div class="container">
                            <!-- First Row -->
                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <label for="idusers" class="form-label d-flex align-items-center">
                                        <i class="fas fa-user me-2"></i> Opérateur
                                    </label>
                                    <select class="form-select" id="idusers" name="idusers">
                                        <!-- Options -->
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label for="nomsouscripteur" class="form-label d-flex align-items-center">
                                        <i class="fas fa-user-shield me-2"></i> Nom du souscripteur
                                    </label>
                                    <input type="text" class="form-control" id="nomsouscripteur"
                                        placeholder="Entrez un Interlocuteur" name="nomsouscripteur">
                                </div>
                                <div class="col-md-4">
                                    <label for="interlocuteurassurancehab" class="form-label d-flex align-items-center">
                                        <i class="fas fa-user-shield me-2"></i> Nom de l'interlocuteur
                                    </label>
                                    <input type="text" class="form-control" id="interlocuteurassurancehab"
                                        placeholder="Entrez un Interlocuteur" name="interlocuteurassurancehab">
                                </div>
                            </div>

                            <!-- Second Row -->
                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <label for="numerointerlocuteurassurancehab"
                                        class="form-label d-flex align-items-center">
                                        <i class="fas fa-phone-alt me-2"></i> N° Téléphone de l'interlocuteur
                                    </label>
                                    <input type="text" class="form-control" id="numerointerlocuteurassurancehab"
                                        placeholder="Entrez un numéro interlocuteur" name="numerointerlocuteurassurancehab">
                                </div>
                                <div class="col-md-4">
                                    <label for="idassureur" class="form-label d-flex align-items-center">
                                        <i class="fas fa-user me-2"></i> Nom assureur
                                    </label>
                                    <select class="form-select" id="idassureur" name="idassureur">
                                        <!-- Options -->
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label for="typeaffaireassurancehab" class="form-label d-flex align-items-center">
                                        <i class="fas fa-briefcase me-2"></i> Type d'affaires
                                    </label>
                                    <select class="form-select" id="typeaffaireassurancehab" name="typeaffaireassurancehab">
                                        <option value="" disabled selected>SELECTIONNEZ LE TYPE D'AFFAIRE</option>
                                        <option value="RENOUVELLEMENT">RENOUVELLEMENT</option>
                                        <option value="RENOUVELLEAFFAIRES">NOUVELLE AFFAIRE</option>
                                    </select>
                                </div>
                            </div>

                            <!-- Third Row -->
                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <label for="datedebutcontratassurancehab" class="form-label d-flex align-items-center">
                                        <i class="fas fa-calendar-alt me-2"></i> Date début contrat
                                    </label>
                                    <input type="date" class="form-control" id="datedebutcontratassurancehab"
                                        name="datedebutcontratassurancehab">
                                </div>
                                <div class="col-md-4">
                                    <label for="datedefincontratassurancehab" class="form-label d-flex align-items-center">
                                        <i class="fas fa-calendar-alt me-2"></i> Date fin contrat
                                    </label>
                                    <input type="date" class="form-control" id="datedefincontratassurancehab"
                                        name="datedefincontratassurancehab">
                                </div>
                                <div class="col-md-4">
                                    <label for="idintermediaire" class="form-label d-flex align-items-center">
                                        <i class="fas fa-user me-2"></i> Intermédiaire
                                    </label>
                                    <select class="form-select" id="idintermediaire" name="idintermediaire">
                                        <!-- Options -->
                                    </select>
                                </div>
                            </div>

                            <!-- Fourth Row -->
                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <label for="idpays" class="form-label d-flex align-items-center">
                                        <i class="fas fa-globe me-2"></i> Pays
                                    </label>
                                    <select class="form-select" id="idpays" name="idpays">
                                        <!-- Options -->
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label for="idville" class="form-label d-flex align-items-center">
                                        <i class="fas fa-map-marker-alt me-2"></i> Ville
                                    </label>
                                    <select class="form-select" id="idville" name="idville">
                                        <!-- Options -->
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label for="idcommune" class="form-label d-flex align-items-center">
                                        <i class="fas fa-map-marker-alt me-2"></i> Commune
                                    </label>
                                    <select class="form-select" id="idcommune" name="idcommune">
                                        <!-- Options -->
                                    </select>
                                </div>
                            </div>

                            <!-- Fifth Row -->
                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <label for="idgarantiecontratassurance" class="form-label"><i
                                            class="fas fa-shield-alt"></i> Garantie</label>
                                    <select class="form-select" id="idgarantiecontratassurance"
                                        name="idgarantiecontratassurance">
                                        <!-- Options -->
                                    </select>
                                </div>

                                <div class="col-md-4">
                                    <label for="typeappartement" class="form-label d-flex align-items-center">
                                        <i class="fas fa-home me-2"></i> Type d'appartement
                                    </label>
                                    <select class="form-select" id="typeappartement" name="typeappartement">
                                        <option value="" disabled selected>SELECTIONNEZ UN TYPE</option>
                                        <option value="DUPLEX">DUPLEX</option>
                                        <option value="VILLABASSE">VILLA BASSE</option>
                                        <option value="MAISONENBANDE">MAISON EN BANDE</option>
                                        <option value="IMMEUBLE">IMMEUBLE</option>
                                        <option value="APPARTEMENT">APPARTEMENT</option>
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label for="nbpiece" class="form-label d-flex align-items-center">
                                        <i class="fas fa-cogs me-2"></i> Nombre de pièces
                                    </label>
                                    <input type="text" class="form-control" id="nbpiece"
                                        placeholder="Sélectionnez le nombre de pièces" name="nbpiece">
                                </div>
                            </div>

                            <!-- Sixth Row -->
                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <label for="superficie" class="form-label d-flex align-items-center">
                                        <i class="fas fa-ruler me-2"></i> Superficie m²
                                    </label>
                                    <input type="text" class="form-control" id="superficie"
                                        placeholder="Sélectionnez la superficie" name="superficie">
                                </div>
                                <div class="col-md-4">
                                    <label for="occupant" class="form-label d-flex align-items-center">
                                        <i class="fas fa-users me-2"></i> Occupant
                                    </label>
                                    <select class="form-select" id="occupant" name="occupant">
                                        <option value="" disabled selected>SELECTIONNER UN OCCUPANT</option>
                                        <option value="LOCATAIRE">LOCATAIRE</option>
                                        <option value="PROPRIETAIRENONOCCUPANT">PROPRIETAIRE NON OCCUPANT</option>
                                        <option value="PROPRIETAIREOCCUPANT">PROPRIETAIRE OCCUPANT</option>
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label for="loyer" class="form-label d-flex align-items-center">
                                        <i class="fas fa-file-alt me-2"></i> Loyer mensuel / Valeur patrimoine
                                    </label>
                                    <input type="text" class="form-control" id="loyer"
                                        placeholder="Entrez N° agrément" name="loyer">
                                </div>
                            </div>

                        </div>

                        <!-- Bar to separate -->
                        <div class="my-4">
                            <hr
                                style="border: 0; border-top: 3px dotted #6f3b23; border-radius: 5px; margin-top: 20px; margin-bottom: 20px;">
                        </div>


                        <div class="row justify-content-start">
                            <div class="col-xl-6">
                                <div class="card custom-card px-3 py-3">
                                    <div class="card-header text-center"
                                        style="background-color: #f4fef5; color: #000000;">
                                        <h5 class="card-title m-0">Listes des primes</h5>
                                    </div>
                                    <form id="formCreationNewprime">
                                        @csrf
                                        <div class="card-body">
                                            <div class="container">
                                                <div class="row g-3 align-items-center mb-3">
                                                    <div class="col-md-6">
                                                        <label for="idprimecontratassurance" class="form-label fw-bold">
                                                            <i class="fas fa-coins me-2"></i> Libellé prime
                                                        </label>
                                                        <select class="form-select" id="idprimecontratassurance"
                                                            name="idprimecontratassurance">
                                                            <!-- Options -->
                                                        </select>
                                                    </div>

                                                    <div class="col-md-6">
                                                        <label for="montantnewprime" class="form-label fw-bold">
                                                            <i class="fas fa-money-bill-wave"></i>Montant Prime
                                                        </label>
                                                        <input type="text" class="form-control" id="montantnewprime"
                                                            placeholder="Entrez un interlocuteur" name="montantnewprime">
                                                    </div>
                                                </div>

                                                <div class="row">
                                                    <div class="col-12">
                                                        <div class="table-responsive">
                                                            <table id="tableauListeNewprime"
                                                                class="table table-bordered text-nowrap w-100">
                                                                <thead style="background-color: #49f268; color: #fcfffe;">
                                                                    <tr>
                                                                        <th class="text-center">Libellé</th>
                                                                        <th class="text-center">Montant</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    <!-- Données dynamiques ici -->
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>
                                                </div> <!-- Fin de row -->
                                            </div> <!-- Fin de container -->
                                        </div> <!-- Fin de card-body -->
                                    </form>
                                </div> <!-- Fin de card -->
                            </div> <!-- Fin de col-xl-6 -->
                        </div> <!-- Fin de row -->


                        <!-- Footer -->
                        <div class="modal-footer">
                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">Annuler</button>
                            <button type="submit" class="btn btn-success" id="boutonEnregistrer"
                                style="background-color: #6f3b23; border-color: #6f3b23;">Enregistrer</button>
                            <label type="button" class="btn btn-success" id="boutonModifier"
                                style="display: none; background-color: #6f3b23; border-color: #6f3b23;">Modifier</label>
                        </div>

                </form>
            </div>
        </div>
    </div>
    </div>



    <!-- Modal confirmation suppression -->
    <div class="modal" id="confirmDeleteModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Confirmation de suppression</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    Êtes-vous sûr de vouloir supprimer cet assuré ?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" id="btn-close-modal"
                        data-bs-dismiss="modal">Annuler</button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteBtn"><i class="las la-trash"></i>
                        Supprimer</button>
                </div>
            </div>
        </div>
    </div>


    <!-- Tableau liste -->
    <div class="row">
        <div class="col-xl-12">
            <div class="card custom-card">
                <div class="card-header d-flex justify-content-between align-items-center"
                    style="background-color: #f4fef5; color: #000000;">
                    <div class="card-title" style="background-color: #f4fef5; color: #000000;">Liste des Assurés</div>

                    <button type="button" class="btn btn-success btn-label waves-effect waves-light"
                        id="boutonAssurancehabitation"
                        style="background-color: #6f3b23; border-color: #6f3b23; margin-left: 0.5cm;"><i
                            class="ri-add-fill label-icon align-middle fs-16 me-2"></i> Ajouter un assuré</button>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <div class="d-flex justify-content-end" style="margin-right: 0.5cm; margin-bottom: 0.5cm;">


                        </div>
                        <table id="tableauListeAssurancehabitation" class="table table-bordered text-nowrap w-100">
                            <thead style="background-color: #49f268; color: #fcfffe;">
                                <tr>
                                    <th class="text-center">Actions</th>
                                    <th class="text-center">N° souscripteur </th>
                                    <th class="text-center">Nom souscripteur</th>
                                    <th class="text-center">Effet</th>
                                    <th class="text-center">Echéance</th>

                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {

            var tableauListeAssurancehabitation = $("#tableauListeAssurancehabitation").DataTable({
                language: {
                    dom: 'Bfrtip',
                    processing: false,
                    lengthMenu: "Afficher :&nbsp; _MENU_ &eacute;l&eacute;ments",
                    info: "Liste _START_ &agrave; _END_ sur _TOTAL_ &eacute;l&eacute;ments",
                    infoEmpty: "Liste 0 &agrave; 0 sur 0 &eacute;l&eacute;ments",
                    infoFiltered: "(filtr&eacute; de MAX &eacute;l&eacute;ments au total)",
                    loadingRecords: "Chargement en cours...",
                    zeroRecords: "Aucun &eacute;l&eacute;ment &agrave; afficher",
                    emptyTable: "Aucun assuré enrégistré",
                    paginate: {
                        first: "",
                        previous: "Pr&eacute;c&eacute;dent",
                        next: "Suivant",
                        last: ""
                    },
                    aria: {
                        sortAscending: ": activer pour trier la colonne par ordre croissant",
                        sortDescending: ": activer pour trier la colonne par ordre décroissant"
                    },
                    search: "Rechercher&nbsp;:",
                },
                pagingType: 'full_numbers',
                ordering: true,
                pageLength: 25,
                lengthChange: true,
                order: []
            });



            var tableauListeNewprime = $("#tableauListeNewprime").DataTable({
                dom: '<"top"i>rt<"bottom"p>', // Structure de l'affichage (sans barre de recherche)
                language: {
                    processing: false,
                    info: false, // Supprime "Liste 1 à 10 sur 100"
                    infoEmpty: false, // Supprime "Liste 0 à 0 sur 0 éléments"
                    infoFiltered: false, // Supprime le texte de filtrage
                    zeroRecords: "Aucun élément à afficher",
                    emptyTable: "Aucun utilisateur enregistré",
                    paginate: {
                        first: "",
                        previous: "Précédent",
                        next: "Suivant",
                        last: ""
                    }
                },
                searching: false, // Désactive la barre de recherche
                paging: false, // Désactive la pagination
                ordering: true, // Active le tri par défaut
                pageLength: 15, // Définit le nombre d'éléments visibles (inutile si pagination désactivée)
                lengthChange: false, // Désactive le choix du nombre d'éléments affichés
                autoWidth: false, // Empêche DataTables d'imposer une largeur automatique
                responsive: true, // Améliore l'affichage sur mobile
                order: [], // Désactive le tri automatique sur toutes les colonnes
                columnDefs: [{
                        orderable: false,
                        targets: [0, 1]
                    } // Désactive le tri sur les colonnes "Libellé" et "Montant"
                ]
            });


            $("#boutonAssurancehabitation").click(function() {
                // Réinitialiser les champs du formulaire
                resetForm();
                $("#modalCreationAssurancehabitation").modal('show');
                const titreModalAssurancehabitation = document.getElementById(
                    'titreModalAssurancehabitation');
                titreModalAssurancehabitation.innerText = "Créer Assurancehabitation";
                document.getElementById('boutonEnregistrer').style.display = '';
                document.getElementById('boutonModifier').style.display = 'none';
            });



            // appel de la fonction liste Assure
            listeAssurancehabitation();

            // fonction listeAssurancehabitation
            function listeAssurancehabitation() {
                $.ajax({
                    url: "{{ route('listeAssurancehabitation') }}",
                    type: 'GET',
                    dataType: 'json',
                    success: function(response) {
                        console.log(response);
                        tableauListeAssurancehabitation.clear().draw();
                        $.each(response, function(key, value) {
                            tableauListeAssurancehabitation.row.add([
                                `<div class="d-flex justify-content-center align-items-center">
                                
                                </button>
                                <button type="button" class="btn btn-outline-danger btn-icon waves-effect waves-light material-shadow-none btn-sm mx-1 action-supprimer" data-id="${value.idassurancehabitation}" id="btnSupprimer"><i  class="las la-trash"></i></button>

                                <button type="button" class="btn btn-outline-warning btn-icon waves-effect waves-light material-shadow-none btn-sm mx-1" data-id="${value.idassurancehabitation}" id="btnModifier"><i class="las la-pen"></i></button>
                             
                              <button type="button" class="btn btn-outline-primary btn-icon waves-effect waves-light material-shadow-none btn-sm mx-1" data-id="${value.idassurancehabitation}" id="btnDetails"><i class="mdi mdi-eye-outline"></i></button>

                            </div>`,

                                `<div class="text-center">${value.codeassurancehabitation} </div>`,
                                `<div class="text-center">${value.nomsouscripteur} </div>`,
                                `<div class="text-center">${value.datedebutcontratassurancehab} </div>`,
                                `<div class="text-center">${value.datedefincontratassurancehab} </div>`,
                            ]).draw();
                        });
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr);
                        console.log(status);
                    }
                });
            }



            //fonction pour recuperer les donneées de la liste commune dans la table commune 
            $.ajax({
                url: "{{ route('listeCommunes') }}",
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    response.unshift({
                        idcommune: 0,
                        libellecommune: 'SELECTIONNEZ UNE COMMUNE'
                    });
                    populateSelect("#idcommune", {
                        data: response,
                        valueKey: 'idcommune',
                        textKey: 'libellecommune',
                    })

                },
                error: function(xhr, status, error) {
                    console.error(xhr);
                    console.error(" : ", error);
                },

            });

            //fonction pour recuperer les donneées de la liste des sectuers d'activités dans la table secteur d'activite
            $.ajax({
                url: "{{ route('listeIntermediaires') }}",
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    response.unshift({
                        idintermediaire: 0,
                        libelleintermediaire: 'SELECTIONNEZ UN INTERMEDIAIRE'
                    });
                    populateSelect("#idintermediaire", {
                        data: response,
                        valueKey: 'idintermediaire',
                        textKey: 'libelleintermediaire',
                    })

                },
                error: function(xhr, status, error) {
                    console.error(xhr);
                    console.error(" : ", error);
                },

            });


            //fonction pour recuperer les donneées de la liste des dans la table pays

            $.ajax({
                url: "{{ route('listePays') }}",
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    response.unshift({
                        idpays: 0,
                        libellepays: 'SELECTIONNEZ UN PAYS'
                    });
                    populateSelect("#idpays", {
                        data: response,
                        valueKey: 'idpays',
                        textKey: 'libellepays',
                    })

                },
                error: function(xhr, status, error) {
                    console.error(xhr);
                    console.error(" : ", error);
                },

            });

            //fonction pour recuperer les donneées de la liste des Villes dans la table villes
            $.ajax({
                url: "{{ route('listeVilles') }}",
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    response.unshift({
                        idville: 0,
                        libelleville: 'SELECTIONNEZ UNE VILLE'
                    });
                    populateSelect("#idville", {
                        data: response,
                        valueKey: 'idville',
                        textKey: 'libelleville',
                    })

                },
                error: function(xhr, status, error) {
                    console.error(xhr);
                    console.error(" : ", error);
                },

            });



            //fonction pour recuperer les donneées de la liste des comptes dansla table comptes
            $.ajax({
                url: "{{ route('listeAssureurs') }}",
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    response.unshift({
                        idassureur: 0,
                        denominationassureur: 'SELECTIONNEZ UN ASSUREUR'
                    });
                    populateSelect("#idassureur", {
                        data: response,
                        valueKey: 'idassureur',
                        textKey: 'denominationassureur',
                    })

                },
                error: function(xhr, status, error) {
                    console.error(xhr);
                    console.error(" : ", error);
                },

            });

            //fonction pour recuperer les donneées de la liste des comptes dans la table users
            $.ajax({
                url: "{{ route('listeUsers') }}",
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    response.unshift({
                        idusers: 0,
                        name: 'SELECTIONNEZ OPERATEUR'
                    });
                    populateSelect("#idusers", {
                        data: response,
                        valueKey: 'idusers',
                        textKey: 'name',
                    })

                },
                error: function(xhr, status, error) {
                    console.error(xhr);
                    console.error(" : ", error);
                },

            });


            $.ajax({
                url: "{{ route('listeGarantieContratAssurance') }}",
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    response.unshift({
                        idgarantiecontratassurance: 0,
                        libellegarantiecontratassurance: 'SELECTIONNEZ UNE GARANTIE'
                    });
                    populateSelect("#idgarantiecontratassurance", {
                        data: response,
                        valueKey: 'idgarantiecontratassurance',
                        textKey: 'libellegarantiecontratassurance',
                    })

                },
                error: function(xhr, status, error) {
                    console.error(xhr);
                    console.error(" : ", error);
                },

            });


            // fonction de reinitialisation du formulaire apres creation d'un assurancehabitation
            function resetForm() {
                $('#FormCreationAssurancehabitation')[0].reset();
            }

            // fonction sur le click du bouton valider pour creer un assurancehabitation
            $("#FormCreationAssurancehabitation").on("submit", function(evt) {
                // Désactiver le bouton pour éviter les doublons
                evt.preventDefault();
                $(this).prop('disabled', true);

                let formData = new FormData(document.getElementById("FormCreationAssurancehabitation"))

                $.ajax({
                    url: "{{ route('insertionAssurancehabitation') }}",
                    type: 'POST',
                    data: formData,
                    dataType: 'json',
                    processData: false,
                    contentType: false,

                    success: function(response) {
                        if (!response.error) {
                            notifSuccess("Souscripteur ajouté avec succès");
                            resetForm();
                            listeAssurancehabitation();
                            $("#modalCreationAssurancehabitation").modal('hide');
                        } else {
                            console.log(response.message);
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr);
                        console.error("Erreur lors de la création du souscripteur : ",
                            error);
                    },
                    complete: function() {
                        // Réactiver le bouton après la réponse AJAX
                        $("#boutonEnregistrer").prop('disabled', false);
                    }
                });
            });


            // Fonction pour ouvrir la modal de suppression
            $(document).on('click', '.action-supprimer', function() {
                var assurancehabitationId = $(this).data('id');
                $('#confirmDeleteModal').data('assurancehabitationId', assurancehabitationId).modal('show');
            });

            // Fonction pour confirmer la suppression d'un assurancehabitation
            $('#confirmDeleteBtn').click(function() {
                var assurancehabitationId = $('#confirmDeleteModal').data('assurancehabitationId');
                $.ajax({
                    url: "{{ route('supprimerAssurancehabitation') }}",
                    type: 'DELETE',
                    data: {
                        idassurancehabitation: assurancehabitationId,
                        _token: "{{ csrf_token() }}"
                    },
                    dataType: 'json',
                    success: function(response) {
                        if (!response.error) {

                            notifSuccess("Souscripteur supprimé avec succès")
                            $('#confirmDeleteModal').modal('hide');
                            listeAssurancehabitation();
                        } else {
                            console.error(
                                "Erreur lors de la suppression du assurancehabitation : ",
                                response
                                .message);
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error("Erreur lors de la suppression du assurancehabitation : ",
                            error);
                    }
                });
            });


            // fonction sur le click de modifier un assurancehabitation 
            $("#boutonModifier").click(function() {
                let idAssurancehabitation = $(this).attr("data-id");
                let formData = new FormData(document.getElementById("FormCreationAssurancehabitation"))
                formData.append("idassurancehabitation", idAssurancehabitation)
                $.ajax({
                    url: "{{ route('modifierAssurancehabitation') }}",
                    type: 'POST',
                    data: formData,
                    dataType: 'json',

                    processData: false,
                    contentType: false,
                    success: function(response) {
                        if (!response.error) {
                            notifSuccess("Souscripteur modifié avec succès")
                            $("#modalCreationAssurancehabitation").modal("hide");
                            listeAssurancehabitation();
                        } else {
                            console.log(response.message);
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr);
                    }
                });
            });


            $("#tableauListeAssurancehabitation").on("click", "#btnModifier", function() {
                // Réinitialiser les champs du formulaire
                resetForm();
                let idAssurancehabitation = $(this).attr("data-id");
                $.ajax({
                    url: "{{ route('listeAssurancehabitation') }}",
                    type: 'GET',
                    data: {
                        idassurancehabitation: idAssurancehabitation
                    },
                    dataType: 'json',
                    success: function(response) {
                        console.log(response);
                        $("#idusers").val(response[0].idusers);
                        $("#nomsouscripteur").val(response[0]
                            .nomsouscripteur);
                        $("#interlocuteurassurancehab").val(response[0]
                            .interlocuteurassurancehab);
                        $("#numerointerlocuteurassurancehab").val(response[0]
                            .numerointerlocuteurassurancehab);
                        $("#idassureur").val(response[0]
                            .idassureur);
                        $("#typeaffaireassurancehab").val(response[0]
                            .typeaffaireassurancehab);
                        $("#datedebutcontratassurancehab").val(response[0]
                            .datedebutcontratassurancehab);
                        $("#datedefincontratassurancehab").val(response[0]
                            .datedefincontratassurancehab);
                        $("#idintermediaire").val(response[0].idintermediaire);
                        $("#idpays").val(response[0].idpays);
                        $("#idville").val(response[0]
                            .idville);
                        $("#idcommune").val(response[0].idcommune);
                        $("#idgarantiecontratassurance").val(response[0]
                            .idgarantiecontratassurance);
                        $("#typeappartement").val(response[0]
                            .typeappartement);
                        $("#nbpiece").val(response[0].nbpiece);
                        $("#superficie").val(response[0].superficie);
                        $("#occupant").val(response[0].occupant);
                        $("#loyer").val(response[0].loyer);

                        $("#modalCreationAssurancehabitation").modal("show");
                        const titreModalAssurancehabitation = document.getElementById(
                            'titreModalAssurancehabitation');
                        titreModalAssurancehabitation.innerText =
                            "Modifier Assurancehabitation";
                        document.getElementById('boutonEnregistrer').style.display = 'none';
                        document.getElementById('boutonModifier').style.display = '';
                        document.getElementById('boutonModifier').setAttribute('data-id',
                            idAssurancehabitation);

                    },
                });
            });


            // fonction de reinitialisation du formulaire apres creation d'un assurancehabitation
            function resetForm() {
                $('#FormCreationAssurancehabitation')[0].reset(); // Réinitialise le formulaire

            }


            //------------------------------------------------------------------ PRIMES ----------------------------------------------------
            


            
            // Fonction pour lister les primes assurances
            function listeNewprime() {
                $.ajax({
                    url: "{{ route('listeNewprime') }}",
                    type: 'GET',
                    dataType: 'json',
                    success: function(response) {
                        tableauListeNewprime.clear().draw();
                        $.each(response, function(key, value) {
                            tableauListeNewprime.row.add([

                                value.libelleprimecontratassurance,
                                `<div class="d-flex justify-content-end align-items-center" style="height: 100%;">
                        <input type="text" class="form-control" id="montantnewprime" value="${value.montantnewprime}" style="width: 150px;" dataid="${value.idprimecontratassurance}">
                    </div>`
                            ]).draw();
                        });
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr);
                    }
                });
            }

            // Fonction sur le click du bouton valider pour ajouter une prime
            $("#valider").click(function() {
                $.ajax({
                    url: "{{ route('insertionNewprime') }}",
                    type: 'POST',
                    data: {
                        _token: "{{ csrf_token() }}",
                        libelleprimecontratassurance: $("#libelleAssurance").val(),
                        montantnewprime: $("#montantnewprime").val(),
                    },
                    dataType: 'json',
                    success: function(response) {
                        if (!response.error) {
                            notifSuccess("Prime ajouté avec succès")
                            $("#libelleAssurance").val('');
                            $("#montantnewprime").val('');
                            listeNewprime();
                        } else {
                            notyf.error('Erreur: ' + response.message);
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr);
                        notyf.error('Une erreur est survenue.');
                    }
                });
            });

            // Appel initial pour charger les données
            listeNewprime();

            $(document).on('click', '.action-supprimer', function() {
                var primeId = $(this).data('id');
                $('#confirmDeleteModal').data('primeId', primeId).modal('show');
            });


            // //fermer le bouton croix de la modal 
            $("#close-btn").click(function() {
                $('#confirmDeleteModal').modal('hide');
            });

            // fonction pour fermer le bouton non
            $("#btn-close-modal").click(function() {
                $('#confirmDeleteModal').modal('hide');
            });


            $.ajax({
                url: "{{ route('listeContractAssurance') }}",
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    response.unshift({
                        idprimecontratassurance: 0,
                        libelleprimecontratassurance: 'SELECTIONNEZ UNE PRIME'
                    });
                    populateSelect("#idprimecontratassurance", {
                        data: response,
                        valueKey: 'idprimecontratassurance',
                        textKey: 'libelleprimecontratassurance',
                    })

                },
                error: function(xhr, status, error) {
                    console.error(xhr);
                    console.error(" : ", error);
                },

            });



            $('#confirmDeleteBtn').click(function() {
                var idNewPrime = $('#confirmDeleteModal').data('primeId');
                $.ajax({
                    url: "{{ route('supprimerNewprime') }}",
                    type: 'DELETE',
                    data: {
                        idNewprime: idNewPrime,
                        _token: "{{ csrf_token() }}"
                    },
                    dataType: 'json',
                    success: function(response) {
                        if (!response.error) {
                            listeNewprime();
                            notifSuccess("Prime supprimé avec succès");
                            $('#confirmDeleteModal').modal('hide');
                        } else {
                            notyf.error('Erreur: ' + response.message);
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr);
                        notyf.error('Une erreur est survenue.');
                    }
                });
            });

            // fonction pour modifier une prime 

            $(document).on('click', '.action-modifier', function() {
                var idNewprime = $(this).data('id');
                $.ajax({
                    url: "{{ route('listeNewprime') }}",
                    type: 'GET',
                    data: {
                        idnewprime: idNewprime
                    },
                    dataType: 'json',
                    success: function(response) {
                        if (response.length > 0) {
                            $("#libelleAssurance").val(response[0]
                                .libelleprimecontratassurance);
                            $("#montantnewprime").val(response[0]
                                .montantnewprime);
                            $("#valider").hide();
                            $("#modifier").show().data('id', idNewprime);
                        } else {
                            notyf.error('Erreur: Prime non trouvée');
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr);
                        notyf.error('Une erreur est survenue.');
                    }
                });
            });


            $("#modifier").click(function() {
                var idNewprime = $(this).data('id');
                $.ajax({
                    url: "{{ route('modifierNewprime') }}",
                    type: 'POST',
                    data: {
                        _token: "{{ csrf_token() }}",
                        idNewprime: idNewprime,
                        libelleprimecontratassurance: $("#libelleAssurance").val(),
                        montantnewprime: $("#montantnewprime").val(),
                    },
                    dataType: 'json',
                    success: function(response) {
                        if (!response.error) {
                            notifSuccess("Prime modifier avec succès")
                            $("#libelleAssurance").val('');
                            $("#montantnewprime").val('');
                            $("#valider").show();
                            $("#modifier").hide();
                            listeNewprime();
                        } else {
                            notyf.error('Erreur: ' + response.message);
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr);
                        notyf.error('Une erreur est survenue.');
                    }
                });
            });


        })
        $(document).on('change', '#montantnewprime', function() {
            let idnewprime = $(this).attr('dataid');
            let value = $(this).val();


            $.ajax({
                url: "{{ route('modifierMontantNewprime') }}",
                type: 'POST',
                data: {
                    _token: "{{ csrf_token() }}",
                    idnewprime: idnewprime,
                    montantnewprime: value
                },
                dataType: 'json',
                success: function(response) {
                    if (!response.error) {
                        notifSuccess(
                            "Montant mis à jour avec succès");
                    } else {
                        notyf.error('Erreur: ' + response.message);
                    }
                },
                error: function(xhr, status, error) {
                    console.error(xhr);
                    notyf.error(
                        'Une erreur est survenue.');
                }
            });
        });
    </script>
@endsection