@extends('model')
@section('content')
    <div class="row">
 
        <!-- Listes des pays -->
        <div class="col-xl-4">
            <div class="card custom-card">
                <div class="card-header" style="background-color: #066B5E;">
                    <h5 class="card-title" style="color: #fcfffe;">Listes des pays</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="tableauListePays" class="table table-bordered text-nowrap w-100">
                            <div class="d-flex align-items-center mb-3">
                                <div class="me-3">
                                    <label for="libellePays" class="form-label">Libellé</label>
                                    <input type="text" class="form-control" id="libellePays"
                                        placeholder="Entrez votre libellé">
                                </div>
                                <div class="me-3">
                                    <label for="codeIso" class="form-label">Code ISO</label>
                                    <input type="text" class="form-control" id="codeIso"
                                        placeholder="Entrez votre code ISO" maxlength="3">
                                </div>
                                <div>
                                    <button type="button" class="btn waves-effect waves-light mt-4" id="valider"
                                        style="background-color:#066B5E; border-color:#066B5E; color: white;">
                                        Enregistrer
                                    </button>
                                    <button type="button" class="btn waves-effect waves-light ms-2 mt-4" id="modifier"
                                        style="background-color:#066B5E; border-color:#066B5E; color: white; display: none;">
                                        Modifier
                                    </button>
                                </div>
                            </div>
                            <thead style="background-color: #066B5E; color: #fcfffe;">
                                <tr>
                                    <th class="text-center">Libéllé</th>
                                    <th class="text-center">Code Iso</th>
                                    <th class="text-center">Actions</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>



        <!-- Listes des villes -->
        <div class="col-xl-4">
            <div class="card custom-card">
                <div class="card-header" style="background-color: #066B5E;">
                    <h5 class="card-title" style="color: #fcfffe;">Listes des villes</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="tableauListeville" class="table table-bordered text-nowrap w-100">
                            <div class="d-flex align-items-center mb-3">
                                <div class="me-3">
                                    <label for="libelleVille" class="form-label">Libellé</label>
                                    <input type="text" class="form-control" id="libelleVille"
                                        placeholder="Entrez votre libellé">
                                </div>
                                <div>
                                    <button type="button" class="btn waves-effect waves-light mt-4" id="validerVille"
                                        style="background-color:#066B5E; border-color:#066B5E; color: white;">
                                        Enregistrer
                                    </button>

                                    <button type="button" class="btn waves-effect waves-light ms-2 mt-4" id="modifierVille"
                                        style="background-color:#066B5E; border-color:#066B5E; color: white; display: none;">
                                        Modifier
                                    </button>
                                </div>
                            </div>
                            <thead style="background-color: #066B5E; color: #fcfffe;">
                                <tr>
                                    <th class="text-center">Libéllé</th>
                                    <th class="text-center">Actions</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>





        <!-- Listes des communes -->
        <div class="col-xl-4">
            <div class="card custom-card">
                <div class="card-header" style="background-color: #066B5E;">
                    <h5 class="card-title" style="color: #fcfffe;">Listes des communes</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="tableauListeCommune" class="table table-bordered text-nowrap w-100">
                            <div class="d-flex align-items-center mb-3">
                                <div class="me-3">
                                    <label for="libelleCommune" class="form-label">Libellé</label>
                                    <input type="text" class="form-control" id="libelleCommune"
                                        placeholder="Entrez votre libellé">
                                </div>
                                <div>
                                    <button type="button" class="btn waves-effect waves-light mt-4" id="validerCommune"
                                        style="background-color:#066B5E; border-color:#066B5E; color: white;">
                                        Enregistrer
                                    </button>

                                    <button type="button" class="btn waves-effect waves-light ms-2 mt-4"
                                        id="modifierCommune"
                                        style="background-color:#066B5E; border-color:#066B5E; color: white; display: none;">
                                        Modifier
                                    </button>
                                </div>
                            </div>
                            <thead style="background-color: #066B5E; color: #fcfffe;">
                                <tr>
                                    <th class="text-center">Libéllé</th>
                                    <th class="text-center">Actions</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </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 ce commerciale ?
                    </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>
@endsection

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

            var tableauListePays = $("#tableauListePays").DataTable({
                language: {
                    //searching: true,
                    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)",
                    infoPostFix: "",
                    loadingRecords: "Chargement en cours...",
                    zeroRecords: "Aucun &eacute;l&eacute;ment &agrave; afficher",
                    emptyTable: "Aucun pays 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;:",
                },
                /*columnDefs: [{
                    targets: [0, 1, 3, 4, 5, 6, 10, 12, 13],
                    className: "text-center"
                }],*/

                pagingType: 'full_numbers',
                ordering: true,
                pageLength: 15,
                lengthChange: true,
                order: []
            })

            var tableauListeville = $("#tableauListeville").DataTable({
                language: {
                    //searching: true,
                    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)",
                    infoPostFix: "",
                    loadingRecords: "Chargement en cours...",
                    zeroRecords: "Aucun &eacute;l&eacute;ment &agrave; afficher",
                    emptyTable: "Aucune ville 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;:",
                },
                /*columnDefs: [{
                    targets: [0, 1, 3, 4, 5, 6, 10, 12, 13],
                    className: "text-center"
                }],*/

                pagingType: 'full_numbers',
                ordering: true,
                pageLength: 15,
                lengthChange: true,
                order: []
            })

            var tableauListeCommune = $("#tableauListeCommune").DataTable({
                language: {
                    //searching: true,
                    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)",
                    infoPostFix: "",
                    loadingRecords: "Chargement en cours...",
                    zeroRecords: "Aucun &eacute;l&eacute;ment &agrave; afficher",
                    emptyTable: "Aucune commune 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;:",
                },
                /*columnDefs: [{
                    targets: [0, 1, 3, 4, 5, 6, 10, 12, 13],
                    className: "text-center"
                }],*/

                pagingType: 'full_numbers',
                ordering: true,
                pageLength: 15,
                lengthChange: true,
                order: []
            })




            // Fonction pour lister les pays
            function listePays() {
                $.ajax({
                    url: "{{ route('listePays') }}",
                    type: 'GET',
                    dataType: 'json',
                    success: function(response) {
                        tableauListePays.clear().draw();
                        $.each(response, function(key, value) {
                            tableauListePays.row.add([
                                value.libellepays,
                                `<div class="d-flex justify-content-center align-items-center">${value.codeisopays}</div>`,
                                `<div class="d-flex justify-content-center align-items-center">
                        <button type="button" class="btn btn-danger btn-sm mx-2 action-supprimer" data-id="${value.idpays}" id="btnSupprimer">
                            <i class="las la-trash"></i>
                        </button>
                        <button type="button" class="btn btn-warning btn-sm mx-2 action-modifier" data-id="${value.idpays}" id="btnModifier">
                            <i class="las la-pen"></i>
                        </button>
                        <div class="form-check form-check-success mb-0 mx-2">
                            <input class="form-check-input" type="radio" name="formradiocolor3" id="formradio-${value.idpays}" data-id="${value.idpays}">
                            <label class="form-check-label" for="formradio-${value.idpays}"></label>
                        </div>
                    </div>`
                            ]).draw();
                        });
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr);
                    }
                });
            }

            // Fonction sur le click du bouton valider pour ajouter un pays
            $("#valider").click(function() {
                var codeIso = $("#codeIso").val();
                if (codeIso.length !== 3) {
                    notifError("Le code ISO doit contenir exactement 3 caractères.");
                    return
                }
                $.ajax({
                    url: "{{ route('insertionPays') }}",
                    type: 'POST',
                    data: {
                        _token: "{{ csrf_token() }}",
                        libellepays: $("#libellePays").val(),
                        codeisopays: $("#codeIso").val(),
                    },
                    dataType: 'json',
                    success: function(response) {
                        if (!response.error) {
                            notifSuccess("Pays ajouté avec succès")
                            $("#libellePays").val('');
                            $("#codeIso").val('');
                            listePays();
                        } 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
            listePays();

            // fonction du click sur l'icone supprimer qui ouvre la modal en recuperant l'id
            $(document).on('click', '.action-supprimer', function() {
                var paysId = $(this).data('id');
                $('#confirmDeleteModal').data('paysId', paysId).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');
            });

            // fonction pour supprimer un pays 
            $('#confirmDeleteBtn').click(function() {
                var paysId = $('#confirmDeleteModal').data('paysId');
                $.ajax({
                    url: "{{ route('supprimerPays') }}",
                    type: 'DELETE',
                    data: {
                        idpays: paysId,
                        _token: "{{ csrf_token() }}"
                    },
                    dataType: 'json',
                    success: function(response) {
                        if (!response.error) {
                            listePays(); // Rafraîchir la liste
                            notifSuccess("Pays supprimé avec succès")
                            $('#confirmDeleteModal').modal('hide');
                        } else {
                            notyf.error('Erreur: ' + response.message);
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr);
                        notifError("Compte n'a pas été supprimé")
                    }
                });
            });


            $(document).on('click', '.action-modifier', function() {
                var idPays = $(this).data('id');
                $.ajax({
                    url: "{{ route('listePays') }}",
                    type: 'GET',
                    data: {
                        idpays: idPays
                    },
                    dataType: 'json',
                    success: function(response) {
                        if (response.length > 0) {
                            $("#libellePays").val(response[0].libellepays);
                            $("#codeIso").val(response[0].codeisopays);
                            $("#valider").hide();
                            $("#modifier").show().data('id', idPays);
                        } else {
                            notyf.error('Erreur: Pays non trouvé');
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr);
                        notyf.error('Une erreur est survenue.');
                    }
                });
            });

            $("#modifier").click(function() {
                var idPays = $(this).data('id');
                $.ajax({
                    url: "{{ route('modifierPays') }}",
                    type: 'POST',
                    data: {
                        _token: "{{ csrf_token() }}",
                        idPays: idPays,
                        libellepays: $("#libellePays").val(),
                        codeisopays: $("#codeIso").val(),
                    },
                    dataType: 'json',
                    success: function(response) {
                        if (!response.error) {
                            notifSuccess("Pays modifié avec succès");
                            $("#libellePays").val('');
                            $("#codeIso").val('');
                            $("#valider").show();
                            $("#modifier").hide();
                            listePays();
                        } else {
                            notyf.error('Erreur: ' + response.message);
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr);
                        notyf.error('Une erreur est survenue.');
                    }
                });
            });


            // Lorsqu'un bouton radio pour les pays est sélectionné
            $(document).on('change', 'input[name="formradiocolor3"]', function() {
                // on Récupére l'ID du pays sélectionné
                var paysId = $(this).data('id');

                // Afficher le tableau des villes
                $('#tableauListeville').show();

                // Appeler la fonction pour récupérer les villes associées au pays
                recupererVillesParPays(paysId);
                tableauListeCommune.clear().draw()
            });

            // fonction pour recuperer les villes 
            function recupererVillesParPays(paysId) {
                $.ajax({
                    url: '/villes/obtenir-par-pays',
                    type: 'POST',
                    data: {
                        // Envoyer l'ID du pays sélectionné
                        idpays: paysId,
                        _token: '{{ csrf_token() }}'
                    },
                    dataType: 'json',
                    success: function(response) {
                        if (!response.error) {
                            // Vider le tableau des villes avant d'ajouter les nouvelles données
                            tableauListeville.clear().draw();

                            // Ajouter les villes liées au pays sélectionné
                            $.each(response, function(key, value) {
                                tableauListeville.row.add([
                                    value.libelleville,
                                    `<div class="d-flex justify-content-center align-items-center">
                                            <button type="button" class="btn btn-danger btn-sm mx-2 action-supprimer" data-id="${value.idville}" id="btnSupprimer">
                                                <i class="las la-trash"></i>
                                            </button>
                                            <button type="button" class="btn btn-warning btn-sm mx-2 action-modifier-ville" data-id="${value.idville}" id="btnModifier">
                                                <i class="las la-pen"></i>
                                            </button>
                                            <div class="form-check form-check-success mb-0 mx-2">
                                                <input class="form-check-input" type="radio" name="formradioCommune" id="formradio-${value.idville}" data-id="${value.idville}">
                                                <label class="form-check-label" for="formradio-${value.idville}"></label>
                                            </div>
                                        </div>`
                                ]).draw();
                            });
                        } else {
                            notyf.error('Erreur: ' + response.message);
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr);
                        notyf.error('Une erreur est survenue.');
                    }
                });
            }


            // Fonction pour lister les villes
            function listeVilles() {
                $.ajax({
                    url: "{{ route('listeVilles') }}",
                    type: 'GET',
                    dataType: 'json',
                    success: function(response) {
                        tableauListeville.clear().draw();
                        $.each(response, function(key, value) {
                            tableauListeville.row.add([
                                value.libelleville,
                                `<div class="d-flex justify-content-center align-items-center">
                        <button type="button" class="btn btn-danger btn-sm mx-2 action-supprimer" data-id="${value.idville}" id="btnSupprimer">
                            <i class="las la-trash"></i>
                        </button>
                        <button type="button" class="btn btn-warning btn-sm mx-2 action-modifier-ville" data-id="${value.idville}" id="btnModifier">
                            <i class="las la-pen"></i>
                        </button>
                         <div class="form-check form-check-success mb-0 mx-2">
                            <input class="form-check-input" type="radio" name="formradioVille" id="formradio-${value.idville}" data-id="${value.idville}">
                            <label class="form-check-label" for="formradio-${value.idville}"></label>
                        </div>
                    </div>`
                            ]).draw();
                        });
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr);
                    }
                });
            }

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

            // Fonction du clic sur l'icône supprimer qui ouvre la modal en récupérant l'id
            $(document).on('click', '.action-supprimer', function() {
                var villeId = $(this).data('id');
                $('#confirmDeleteModal').data('villeId', villeId).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');
            });

            // Fonction pour supprimer une ville 
            $('#confirmDeleteBtn').click(function() {
                var villeId = $('#confirmDeleteModal').data('villeId');
                $.ajax({
                    url: "{{ route('supprimerVilles') }}",
                    type: 'DELETE',
                    data: {
                        idville: villeId,
                        _token: "{{ csrf_token() }}"
                    },
                    dataType: 'json',
                    success: function(response) {
                        if (!response.error) {
                            listeVilles();
                            notifSuccess("Ville supprimée avec succès");
                            $('#confirmDeleteModal').modal('hide');
                        } else {
                            notifError('Erreur: ' + response.message);
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr);
                        notifError("La ville n'a pas été supprimée");
                    }
                });
            });


            $(document).on('click', '.action-modifier-ville', function() {
                var idVille = $(this).data('id');
                $.ajax({
                    url: "{{ route('listeVilles') }}",
                    type: 'GET',
                    data: {
                        idville: idVille
                    },
                    dataType: 'json',
                    success: function(response) {
                        if (response.length > 0) {
                            $("#libelleVille").val(response[0].libelleville);
                            $("#modifierVille").show().data('id', idVille);
                            $("#validerVille").hide();
                        } else {
                            notyf.error('Erreur: Ville non trouvée');
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr);
                        notyf.error('Une erreur est survenue.');
                    }
                });
            });

            $("#modifierVille").click(function() {
                var idVille = $(this).data('id');
                $.ajax({
                    url: "{{ route('modifierVilles') }}",
                    type: 'POST',
                    data: {
                        _token: "{{ csrf_token() }}",
                        idville: idVille,
                        libelleville: $("#libelleVille").val(),
                    },
                    dataType: 'json',
                    success: function(response) {
                        if (!response.error) {
                            notifSuccess("Ville modifiée avec succès");
                            $("#libelleVille").val('');
                            $("#validerVille").show();
                            $("#modifierVille").hide();
                            listeVilles();
                        } else {
                            notyf.error('Erreur: ' + response.message);
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr);
                        notyf.error('Une erreur est survenue.');
                    }
                });
            });

            // Lorsqu'un bouton radio pour une ville est sélectionné
            $(document).on('change', 'input[name="formradioCommune"]', function() {
                // Récupérer l'ID de la ville sélectionnée
                var villeId = $(this).data('id');

                // Afficher le tableau des communes
                $('#tableauListeCommune').show();

                // Appeler la fonction pour récupérer les communes associées à la ville
                recupererCommunesParVille(villeId);
            });

            function recupererCommunesParVille(villeId) {
                $.ajax({
                    url: '/communes/obtenir-par-ville',
                    type: 'POST',
                    data: {
                        // Envoyer l'ID de la ville sélectionnée
                        idville: villeId,
                        _token: '{{ csrf_token() }}'
                    },
                    dataType: 'json',
                    success: function(response) {
                        if (!response.error) {
                            // Vider le tableau des communes avant d'ajouter les nouvelles données
                            tableauListeCommune.clear().draw();

                            // Ajouter les communes liées à la ville sélectionnée
                            $.each(response, function(key, value) {
                                tableauListeCommune.row.add([
                                    value.libellecommune,
                                    `<div class="d-flex justify-content-center align-items-center">
                            <button type="button" class="btn btn-danger btn-sm mx-2 action-supprimer" data-id="${value.idcommune}" id="btnSupprimer">
                                <i class="las la-trash"></i>
                            </button>
                            <button type="button" class="btn btn-warning btn-sm mx-2 action-modifier-commune" data-id="${value.idcommune}" id="btnModifier">
                                <i class="las la-pen"></i>
                            </button>
                        </div>`
                                ]).draw();
                            });
                        } else {
                            notyf.error('Erreur: ' + response.message);
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr);
                        notyf.error('Une erreur est survenue.');
                    }
                });
            }

            // Fonction pour lister les communes
            function listeCommunes() {
                $.ajax({
                    url: "{{ route('listeCommunes') }}",
                    type: 'GET',
                    dataType: 'json',
                    success: function(response) {
                        tableauListeCommune.clear().draw();
                        $.each(response, function(key, value) {
                            tableauListeCommune.row.add([
                                value.libellecommune,
                                `<div class="d-flex justify-content-center align-items-center">
                        <button type="button" class="btn btn-danger btn-sm mx-2 action-supprimer" data-id="${value.idcommune}" id="btnSupprimer">
                            <i class="las la-trash"></i>
                        </button>
                        <button type="button" class="btn btn-warning btn-sm mx-2 action-modifier" data-id="${value.idcommune}" id="btnModifier">
                            <i class="las la-pen"></i>
                        </button>
                    </div>`
                            ]).draw();
                        });
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr);
                    }
                });
            }
            // Fonction sur le click du bouton valider pour ajouter une commune
            $("#validerCommune").click(function() {
                $.ajax({
                    url: "{{ route('insertionCommunes') }}",
                    type: 'POST',
                    data: {
                        _token: "{{ csrf_token() }}",
                        libellecommune: $("#libelleCommune").val(),
                    },
                    dataType: 'json',
                    success: function(response) {
                        if (!response.error) {
                            notifSuccess("Commune ajouté avec succès")
                            $("#libelleCommune").val('');
                            listeCommunes();
                        } else {
                            notyf.error('Erreur: ' + response.message);
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr);
                        notyf.error('Une erreur est survenue.');
                    }
                });
            });


            // Fonction du clic sur l'icône supprimer qui ouvre la modal en récupérant l'id
            $(document).on('click', '.action-supprimer', function() {
                var communeId = $(this).data('id');
                $('#confirmDeleteModal').data('communeId', communeId).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');
            });

            // Fonction pour supprimer une ville 
            $('#confirmDeleteBtn').click(function() {
                var communeId = $('#confirmDeleteModal').data('communeId');
                $.ajax({
                    url: "{{ route('supprimerCommunes') }}",
                    type: 'DELETE',
                    data: {
                        idcommune: communeId,
                        _token: "{{ csrf_token() }}"
                    },
                    dataType: 'json',
                    success: function(response) {
                        if (!response.error) {
                            listeCommunes();
                            notifSuccess("Commune supprimée avec succès");
                            $('#confirmDeleteModal').modal('hide');
                        } else {
                            notifError('Erreur: ' + response.message);
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr);
                        notifError("La commune n'a pas été supprimée");
                    }
                });
            });

            // fonction pour cliquer sur l'icone modifier

            $(document).on('click', '.action-modifier', function() {
                var idCommune = $(this).data('id');
                $.ajax({
                    url: "{{ route('listeCommunes') }}",
                    type: 'GET',
                    data: {
                        idcommune: idCommune
                    },
                    dataType: 'json',
                    success: function(response) {
                        if (response.length > 0) {
                            $("#libelleCommune").val(response[0].libellecommune);
                            $("#idPays").val(response[0].idpays);
                            $("#modifierCommune").show().data('id', idCommune);
                            $("#validerCommune").hide();
                        } else {
                            notyf.error('Erreur: Commune non trouvée');
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr);
                        notyf.error('Une erreur est survenue.');
                    }
                });
            });



            // fonction pour le traitement sur le bouton modifier
            $("#modifierCommune").click(function() {
                var idCommune = $(this).data('id');
                $.ajax({
                    url: "{{ route('modifierCommunes') }}",
                    type: 'POST',
                    data: {
                        _token: "{{ csrf_token() }}",
                        idcommune: idCommune,
                        libellecommune: $("#libelleCommune").val(),
                        idpays: $("#idPays").val()
                    },
                    dataType: 'json',
                    success: function(response) {
                        if (!response.error) {
                            notifSuccess("Commune modifiée avec succès");
                            $("#libelleCommune").val('');
                            $("#idPays").val('');
                            $("#validerCommune").show();
                            $("#modifierCommune").hide();
                            listeCommunes();
                        } else {
                            notyf.error('Erreur: ' + response.Message);
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr);
                        notyf.error('Une erreur est survenue.');
                    }
                });
            });


        });
    </script>
@endsection