@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="modalCreationTiers" class="modal fade bs-example-modal-xl" tabindex="-1" role="dialog"
        aria-labelledby="titreModalTiers" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="titreModalTiers">Ajouter un Tiers</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <form id="FormCreationTiers">
                    @csrf
                    <div class="modal-body">
                        <div class="container">
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="idusers" class="form-label"><i class="fas fa-user"></i> Opérateur</label>
                                    <select class="form-select" id="idusers" name="idusers">
                                        <!-- Options -->
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label for="denominationtiers" class="form-label"><i class="fas fa-tag"></i> Nom du
                                        tiers</label>
                                    <input type="text" class="form-control" id="denominationtiers"
                                        placeholder="Entrez une dénomination" name="denominationtiers">
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="profession" class="form-label"><i class="fas fa-briefcase"></i>
                                        Profession</label>
                                    <input type="text" class="form-control" id="profession"
                                        placeholder="Entrez une profession" name="profession">
                                </div>
                                <div class="col-md-6">
                                    <label for="interlocuteurtiers" class="form-label"><i class="fas fa-user-tie"></i>
                                        Interlocuteur</label>
                                    <input type="text" class="form-control" id="interlocuteurtiers"
                                        placeholder="Entrez un interlocuteur" name="interlocuteurtiers">
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <label for="sexe" class="form-label"><i class="fas fa-venus-mars"></i> Sexe</label>
                                    <select class="form-select" id="sexe" name="sexe">
                                        <option value="" disabled selected>SELECTIONNEZ LE SEXE</option>
                                        <option value="HOMME">HOMME</option>
                                        <option value="FEMME">FEMME</option>
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label for="datenaissancetiers" class="form-label"><i class="fas fa-calendar-alt"></i>
                                        Date de naissance</label>
                                    <input type="date" class="form-control" id="datenaissancetiers"
                                        name="datenaissancetiers">
                                </div>
                                <div class="col-md-4">
                                    <label for="emailtiers" class="form-label"><i class="fas fa-envelope"></i> Email</label>
                                    <input type="email" class="form-control" id="emailtiers" placeholder="Entrez un email"
                                        name="emailtiers">
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <label for="idtypetiers" class="form-label"><i class="fas fa-id-card"></i> Type
                                        tiers</label>
                                    <select class="form-select" id="idtypetiers" name="idtypetiers">
                                        <!-- Options -->
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label for="idnaturetiers" class="form-label"><i class="fas fa-cogs"></i> Nature
                                        tiers</label>
                                    <select class="form-select" id="idnaturetiers" name="idnaturetiers">
                                        <!-- Options -->
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label for="idgroupetiers" class="form-label"><i class="fas fa-users"></i> Groupe
                                        tiers</label>
                                    <select class="form-select" id="idgroupetiers" name="idgroupetiers">
                                        <!-- Options -->
                                    </select>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <label for="idpays" class="form-label"><i class="fas fa-globe"></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"><i class="fas fa-map-marker-alt"></i>
                                        Ville</label>
                                    <select class="form-select" id="idville" name="idville">
                                        <!-- Options -->
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label for="idcompte" class="form-label"><i class="fas fa-university"></i> N°
                                        compte</label>
                                    <select class="form-select" id="idcompte" name="idcompte">
                                        <!-- Options -->
                                    </select>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <label for="numeroclientaxactiers" class="form-label"><i class="fas fa-number"></i>
                                        Numéro Axa</label>
                                    <input type="text" class="form-control" id="numeroclientaxactiers"
                                        placeholder="Sélectionnez le numéro client axa" name="numeroclientaxactiers">
                                </div>
                                <div class="col-md-4">
                                    <label for="escomptetiers" class="form-label"><i class="fas fa-percent"></i>
                                        Escompte</label>
                                    <select class="form-select" id="escomptetiers" name="escomptetiers"
                                        aria-label="Default select example">
                                        <option value="" disabled selected>Choisissez une escompte</option>
                                        <option value="OUI">OUI</option>
                                        <option value="NON">NON</option>
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label for="numeroagrement" class="form-label"><i class="fas fa-file-alt"></i> N°
                                        agrément</label>
                                    <input type="text" class="form-control" id="numeroagrement"
                                        placeholder="Entrez N° agrément" name="numeroagrement">
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="geranttiers" class="form-label"><i class="fas fa-user-shield"></i>
                                        Gérant</label>
                                    <input type="text" class="form-control" id="geranttiers"
                                        placeholder="Entrez un gérant" name="geranttiers">
                                </div>
                                <div class="col-md-6">
                                    <label for="idsecteuractivite" class="form-label"><i class="fas fa-industry"></i>
                                        Secteur d'activité</label>
                                    <select class="form-select" id="idsecteuractivite" name="idsecteuractivite">
                                        <!-- Options -->
                                    </select>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <label for="tva" class="form-label"><i class="fas fa-percent"></i> TVA</label>
                                    <select class="form-select" id="tva" name="tva">
                                        <option value="" disabled selected>SELECTIONNEZ UN TVA</option>
                                        <option value="OUI">OUI</option>
                                        <option value="NON">NON</option>
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label for="asdi" class="form-label"><i class="fas fa-file-invoice"></i>
                                        ASDI</label>
                                    <select class="form-select" id="asdi" name="asdi">
                                        <option value="" disabled selected>SELECTIONNEZ UN ASDI</option>
                                        <option value="OUI">OUI</option>
                                        <option value="NON">NON</option>
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label for="plafondcredittiers" class="form-label"><i
                                            class="fas fa-money-bill-wave"></i> Plafond crédit</label>
                                    <input type="text" class="form-control" id="plafondcredittiers"
                                        placeholder="Entrez un plafond crédit" name="plafondcredittiers">
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <label for="telephonemobiletiers" class="form-label"><i class="fas fa-phone"></i>
                                        Téléphone</label>
                                    <input type="text" class="form-control" id="telephonemobiletiers"
                                        placeholder="Entrez un téléphone" name="telephonemobiletiers">
                                </div>
                                <div class="col-md-4">
                                    <label for="faxtiers" class="form-label"><i class="fas fa-fax"></i> Fax</label>
                                    <input type="text" class="form-control" id="faxtiers"
                                        placeholder="Entrez un fax" name="faxtiers">
                                </div>
                                <div class="col-md-4">
                                    <label for="telephonetiers" class="form-label"><i class="ri-whatsapp-fill"></i>
                                        Numéro WhatsApp</label>
                                    <input type="text" class="form-control" id="telephonetiers"
                                        placeholder="Entrez un numéro WhatsApp" name="telephonetiers">
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <label for="situationgeotiers" class="form-label"><i class="fas fa-map-marker"></i>
                                        Localisation</label>
                                    <input type="text" class="form-control" id="situationgeotiers"
                                        placeholder="Entrez une localisation" name="situationgeotiers">
                                </div>
                                <div class="col-md-4">
                                    <label for="adressepostaletiers" class="form-label"><i
                                            class="fas fa-address-card"></i> Adresse Postale</label>
                                    <input type="text" class="form-control" id="adressepostaletiers"
                                        placeholder="Entrez une adresse" name="adressepostaletiers">
                                </div>
                                <div class="col-md-4">
                                    <label for="sitewebtiers" class="form-label"><i class="fas fa-globe"></i> Site
                                        web</label>
                                    <input type="text" class="form-control" id="sitewebtiers"
                                        placeholder="Entrez site web" name="sitewebtiers">
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="phototiers" class="form-label"><i class="fas fa-camera"></i>
                                        Photos</label>
                                    <input type="file" name="phototiers" class="form-control" id="phototiers"
                                        accept="image/*">
                                    <img id="photoPreview" src="" alt=""
                                        style="display: none; max-width: 200px; margin-top: 10px;">
                                </div>
                                <div class="col-md-6">
                                    <label for="signaturetiers" class="form-label"><i class="fas fa-pencil-alt"></i>
                                        Signature</label>
                                    <input type="file" name="signaturetiers" class="form-control" id="signaturetiers"
                                        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="display: none; background-color: #6f3b23; border-color: #6f3b23;">Modifier</label>
                        </div>
                    </div>
                </form>

            </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 tiers ?
                </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 Tiers</div>

                    <button type="button" class="btn btn-success btn-label waves-effect waves-light" id="boutonTiers"
                        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 des Tiers</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="tableauListeTiers" 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° Tiers </th>
                                    <th class="text-center">Nom tiers</th>
                                    <th class="text-center">Email</th>
                                    <th class="text-center">Adresse postale</th>
                                    <th class="text-center">Contact</th>
                                    <th class="text-center">Opérateur</th>

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

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

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



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


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

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

                            </div>`,

                                `<div class="text-center">${value.numerotiers} </div>`,
                                `<div class="text-center">${value.denominationtiers} </div>`,
                                `<div class="text-center">${value.emailtiers} </div>`,
                                `<div class="text-center">${value.adressepostaletiers} </div>`,
                                `<div class="text-center">${value.telephonemobiletiers} </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 sectuers d'activités dans la table secteur d'activite
            $.ajax({
                url: "{{ route('listeSecteurActivites') }}",
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    response.unshift({
                        idsecteuractivite: 0,
                        libellesecteuractivite: 'SELECTIONNEZ UN SECTEUR D\'ACTIVITE'
                    });
                    populateSelect("#idsecteuractivite", {
                        data: response,
                        valueKey: 'idsecteuractivite',
                        textKey: 'libellesecteuractivite',
                    })

                },
                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 de nature tiers dans la table nature tiers
            $.ajax({
                url: "{{ route('listeNatureTiers') }}",
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    response.unshift({
                        idnaturetiers: 0,
                        libellenaturetiers: 'SELECTIONNEZ UNE NATURE TIERS'
                    });
                    populateSelect("#idnaturetiers", {
                        data: response,
                        valueKey: 'idnaturetiers',
                        textKey: 'libellenaturetiers',
                    })

                },
                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 tiers
            function resetForm() {
                $('#FormCreationTiers')[0].reset();
            }

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

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

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

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

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

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


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

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

            document.getElementById('phototiers').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('signaturetiers').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';
                }
            }); 
            
            $("#tableauListeTiers").on("click", "#btnModifier", function() {
                // Réinitialiser les champs du formulaire
                resetForm();
                let idTiers = $(this).attr("data-id");
                $.ajax({
                    url: "{{ route('listeTiers') }}",
                    type: 'GET',
                    data: {
                        idtiers: idTiers
                    },
                    dataType: 'json',
                    success: function(response) {
                        console.log(response);
                        $("#idusers").val(response[0].idusers);
                        $("#idtypetiers").val(response[0].idtypetiers);
                        $("#denominationtiers").val(response[0].denominationtiers);
                        $("#idcompte").val(response[0].idcompte);
                        $("#idgroupetiers").val(response[0].idgroupetiers);
                        $("#adressepostaletiers").val(response[0].adressepostaletiers);
                        $("#telephonemobiletiers").val(response[0].telephonemobiletiers);
                        $("#telephonetiers").val(response[0].telephonetiers);
                        $("#emailtiers").val(response[0].emailtiers);
                        $("#sexe").val(response[0].sexe);
                        $("#profession").val(response[0].profession);
                        $("#datenaissancetiers").val(response[0].datenaissancetiers);
                        $("#idnaturetiers").val(response[0].idnaturetiers);
                        $("#numeroclientaxactiers").val(response[0].numeroclientaxactiers);
                        $("#tva").val(response[0].tva);
                        $("#asdi").val(response[0].asdi);
                        $("#plafondcredittiers").val(response[0].plafondcredittiers);
                        $("#interlocuteurtiers").val(response[0].interlocuteurtiers);
                        $("#geranttiers").val(response[0].geranttiers);
                        $("#numeroagrement").val(response[0].numeroagrement);
                        $("#idpays").val(response[0].idpays);
                        $("#idville").val(response[0].idville);
                        $("#escomptetiers").val(response[0].escomptetiers);
                        $("#faxtiers").val(response[0].faxtiers);
                        $("#sitewebtiers").val(response[0].sitewebtiers);
                        $("#situationgeotiers").val(response[0].situationgeotiers);
                        $("#idsecteuractivite").val(response[0].idsecteuractivite);
                        $("#photoPreview").attr("src", response[0].phototiers).show();
                        $("#signaturePreview").attr("src", response[0].signaturetiers).show();
                        $("#modalCreationTiers").modal("show");
                        const titreModalTiers = document.getElementById(
                            'titreModalTiers');
                        titreModalTiers.innerText = "Modifier Tiers";
                        document.getElementById('boutonEnregistrer').style.display = 'none';
                        document.getElementById('boutonModifier').style.display = '';
                        document.getElementById('boutonModifier').setAttribute('data-id',
                            idTiers);

                    },
                });
            });



            // fonction de reinitialisation du formulaire apres creation d'un tiers
            function resetForm() {
                $('#FormCreationTiers')[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