@extends('model')
@section('content')
    <style>
        .form-label {
            color: #333; 
            margin-bottom: 5px;
        }
 
        .form-control {
            border: 1px solid #ccc;
            border-radius: 5px;
            transition: border-color 0.3s;
        } 

        .form-control: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="modalCreationAssureur" class="modal fade bs-example-modal-xl" tabindex="-1" role="dialog"
        aria-labelledby="titreModalAssureur" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="titreModalAssureur">Ajouter un Assureur</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <form id="FormCreationAssureur">
                    @csrf 
                    <div class="modal-body">
                        <div class="container">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="idusers" class="form-label"><i class="fas fa-user"></i> Opérateur</label>
                                    <select class="form-control" id="idusers" name="idusers">
                                        <!-- Options -->
                                    </select>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="denominationassureur" class="form-label"><i class="fas fa-tag"></i> Nom
                                        assureur</label>
                                    <input type="text" class="form-control" id="denominationassureur"
                                        placeholder="Entrez le nom de l'assureur" name="denominationassureur">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="idtypetiers" class="form-label"><i class="fas fa-id-card"></i> Type
                                        tiers</label>
                                    <select class="form-control" id="idtypetiers" name="idtypetiers">
                                        <!-- Options -->
                                    </select>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="idcompte" class="form-label"><i class="fas fa-university"></i> N°
                                        Compte</label>
                                    <select class="form-control" id="idcompte" name="idcompte">
                                        <!-- Options -->
                                    </select>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="idgroupetiers" class="form-label"><i class="fas fa-users"></i> Groupe
                                        tiers</label>
                                    <select class="form-control" id="idgroupetiers" name="idgroupetiers">
                                        <!-- Options -->
                                    </select>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="adressepostaleassureur" class="form-label"><i
                                            class="fas fa-address-card"></i> Adresse postale</label>
                                    <input type="text" class="form-control" id="adressepostaleassureur"
                                        placeholder="Entrez l'adresse postale" name="adressepostaleassureur">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4 mb-3">
                                    <label for="telephoneassureur" class="form-label"><i class="ri-whatsapp-fill "></i>
                                        Numéro
                                        WhatsApp</label>
                                    <input type="text" class="form-control" id="telephoneassureur"
                                        placeholder="Entrez le numéro WhatsApp" name="telephoneassureur">
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label for="telephonemobileassureur" class="form-label"><i
                                            class="fas fa-mobile-alt"></i> Numéro mobile</label>
                                    <input type="text" class="form-control" id="telephonemobileassureur"
                                        placeholder="Entrez le numéro mobile" name="telephonemobileassureur">
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label for="emailassureur" class="form-label"><i class="fas fa-envelope"></i>
                                        Email</label>
                                    <input type="email" class="form-control" id="emailassureur"
                                        placeholder="Entrez un email" name="emailassureur">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="photoassureur" class="form-label"><i class="fas fa-camera"></i>
                                        Photos</label>
                                    <input type="file" name="photoassureur" class="form-control" id="photoassureur"
                                        accept="image/*">
                                    <img id="photoPreview" src="" alt=""
                                        style="display: none; max-width: 200px; margin-top: 10px;">
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="signatureassureur" class="form-label"><i class="fas fa-pencil-alt"></i>
                                        Signature</label>
                                    <input type="file" name="signatureassureur" class="form-control"
                                        id="signatureassureur" accept="image/*">
                                    <img id="signaturePreview" src="" alt=""
                                        style="display: none; max-width: 200px; margin-top: 10px;">
                                </div>
                            </div>
                        </div>
                        <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="background-color: #6f3b23; border-color: #6f3b23; display: none;">Modifier</label>
                        </div>
                    </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 assureur ?
                </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 Assureurs</div>

                    <button type="button" class="btn btn-success btn-label waves-effect waves-light" id="boutonAssureur"
                        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 Assureur</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="tableauListeAssureur" 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° Assureur</th>
                                    <th class="text-center">Nom assureur</th>
                                    <th class="text-center">Email</th>
                                    <th class="text-center">adresse postale</th>
                                    <th class="text-center">Telephone</th>
                                    <th class="text-center">Opérateur</th>

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

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

            var tableauListeAssureur = $("#tableauListeAssureur").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 assureur 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: []
            });



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


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


            // fonction listeAssureur
            function listeAssureurs() {
                $.ajax({
                    url: "{{ route('listeAssureurs') }}",
                    type: 'GET',
                    dataType: 'json',
                    success: function(response) {
                        console.log(response);
                        tableauListeAssureur.clear().draw();
                        $.each(response, function(key, value) {
                            tableauListeAssureur.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.idassureur}" 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.idassureur}" id="btnModifier"><i class="las la-pen"></i></button>
                             
                            </div>`,

                                `<div class="text-center">${value.numeroassureur} </div>`,
                                `<div class="text-center">${value.denominationassureur} </div>`,
                                `<div class="text-center">${value.emailassureur} </div>`,
                                `<div class="text-center">${value.adressepostaleassureur} </div>`,
                                `<div class="text-center">${value.telephonemobileassureur} </div>`,
                                `<div class="text-center">${value.name} </div>`
                            ]).draw();
                        });
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr);
                        console.log(status);
                    }
                });
            }





            //fonction pour recuperer les donneées de la liste de groupes tiers dansla table groupe tiers
            $.ajax({
                url: "{{ route('listeGroupeTiers') }}",
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    response.unshift({
                        idgroupetiers: 0,
                        libellegroupetiers: 'SELECTIONNEZ UN GROUPE TIERS'
                    });
                    populateSelect("#idgroupetiers", {
                        data: response,
                        valueKey: 'idgroupetiers',
                        textKey: 'libellegroupetiers',
                    })

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

            });



            //fonction pour recuperer les donneées de la liste des types tiers dansla table type tiers
            $.ajax({
                url: "{{ route('listeTypeTiers') }}",
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    response.unshift({
                        idtypetiers: 0,
                        libelletypetiers: 'SELECTIONNEZ UN TYPE TIERS'
                    });
                    populateSelect("#idtypetiers", {
                        data: response,
                        valueKey: 'idtypetiers',
                        textKey: 'libelletypetiers',
                    })

                },
                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('listeComptes') }}",
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    response.unshift({
                        idcompte: 0,
                        libellecompte: 'SELECTIONNEZ UN NUMERO DE COMPTE'
                    });
                    populateSelect("#idcompte", {
                        data: response,
                        valueKey: 'idcompte',
                        textKey: 'libellecompte',
                    })

                },
                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);
                },

            });




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

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

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

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

                    success: function(response) {
                        if (!response.error) {
                            notifSuccess("Assureur créé avec succès");
                            resetForm();
                            listeAssureurs();
                            $("#modalCreationAssureur").modal('hide');
                        } else {
                            console.log(response.message);
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr);
                        console.error("Erreur lors de la création de l'assureur : ", 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 assureurId = $(this).data('id');
                $('#confirmDeleteModal').data('assureurId', assureurId).modal('show');
            });

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

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


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

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

            document.getElementById('photoassureur').addEventListener('change', function(event) {
                const photoPreview = document.getElementById('photoPreview');
                const file = event.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        photoPreview.src = e.target.result;
                        photoPreview.style.display = 'block';
                    };
                    reader.readAsDataURL(file);
                } else {
                    photoPreview.style.display = 'none';
                }
            });

            document.getElementById('signatureassureur').addEventListener('change', function(event) {
                const signaturePreview = document.getElementById('signaturePreview');
                const file = event.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        signaturePreview.src = e.target.result;
                        signaturePreview.style.display = 'block';
                    };
                    reader.readAsDataURL(file);
                } else {
                    signaturePreview.style.display = 'none';
                }
            });

            $("#tableauListeAssureur").on("click", "#btnModifier", function() {
                // Réinitialiser les champs du formulaire
                resetForm();
                let idAssureur = $(this).attr("data-id");
                $.ajax({
                    url: "{{ route('listeAssureurs') }}",
                    type: 'GET',
                    data: {
                        idassureur: idAssureur
                    },
                    dataType: 'json',
                    success: function(response) {
                        console.log(response);
                        $("#idusers").val(response[0].idusers);
                        $("#denominationassureur").val(response[0].denominationassureur);
                        $("#telephonemobileassureur").val(response[0].telephonemobileassureur);
                        $("#idtypetiers").val(response[0].idtypetiers);
                        $("#idcompte").val(response[0].idcompte);
                        $("#idgroupetiers").val(response[0].idgroupetiers);
                        $("#adressepostaleassureur").val(response[0].adressepostaleassureur);
                        $("#telephoneassureur").val(response[0].telephoneassureur);
                        $("#emailassureur").val(response[0].emailassureur);
                        $("#photoPreview").attr("src", response[0].photoassureur).show();
                        $("#signaturePreview").attr("src", response[0].signatureassureur)
                            .show();
                        $("#modalCreationAssureur").modal("show");
                        const titreModalAssureur = document.getElementById(
                            'titreModalAssureur');
                        titreModalAssureur.innerText = "Modifier Assureur";
                        document.getElementById('boutonEnregistrer').style.display = 'none';
                        document.getElementById('boutonModifier').style.display = '';
                        document.getElementById('boutonModifier').setAttribute('data-id',
                            idAssureur);

                    },
                });
            });



            // fonction de reinitialisation du formulaire apres creation d'un assureur
            function resetForm() {
                $('#FormCreationAssureur')[0].reset(); // Réinitialise le formulaire
                $("#photoPreview").attr("src", "").hide(); // Vide l'aperçu de la photo
                $("#signaturePreview").attr("src", "").hide(); // Vide l'aperçu de la signature
            }


        })
    </script>
@endsection