@extends('model')
@section('content')
    <!-- Modal creation compte -->
    <div id="modalCreationCompte" class="modal fade" tabindex="-1" aria-labelledby="titreModalCompte" aria-hidden="true"
        style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="titreModalCompte">Création de Compte</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="formCreationCompte">
                        <div class="row">
                            <div class="col-12">
                                <label for="libelleCompte">Libellé</label>
                                <input type="text" class="form-control" id="libelleCompte" name="libelleCompte"
                                    placeholder="Entrez le libellé" />

                            </div>
                            <div class="col-6">
                                <label for="numeroCompte" style="margin-top: 0.3cm">N° Compte</label>
                                <input type="text" class="form-control" id="numeroCompte" name="numeroCompte"
                                    placeholder="xxxxxxx" value="" required />

                            </div>
                            <div class="col-6">
                                <label for="soldeCompte" style="margin-top: 0.3cm">Solde</label>
                                <input type="text" class="form-control" id="soldeCompte" name="soldeCompte"
                                    placeholder="xxxxxxx" />

                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Annuler</button>
                    <button type="button" class="btn btn-success" id="boutonEnregistrer"
                        style="background-color: #6f3b23; border-color: #6f3b23;">Enregistrer</button>
                    <button type="button" class="btn btn-success" id="boutonModifier"
                        style="background-color: #6f3b23; border-color: #6f3b23;" style="display: none;">Modifier</button>
                </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 compte ?
                </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 comptes</div>
                    
                    <button type="button" class="btn btn-success btn-label waves-effect waves-light" id="boutonCompte"
                        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> Liste des comptes</button>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                       

                        </div>
                        <table id="tableauListeCompte" 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">Libelle</th>
                                    <th class="text-center">N° Compte</th>
                                    <th class="text-center">Solde</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

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

            var tableauListeCompte = $("#tableauListeCompte").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 compte 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: 15,
                lengthChange: true,
                order: []
            });


            $("#boutonCompte").click(function() {
                // Réinitialiser les champs du formulaire
                resetForm();
                $("#modalCreationCompte").modal('show');
                const titreModalCompte = document.getElementById('titreModalCompte');
                titreModalCompte.innerText = "Créer Compte";
                document.getElementById('boutonEnregistrer').style.display = '';
                document.getElementById('boutonModifier').style.display = 'none';
            });
            // appel de la fonction liste compte
            listeComptes();

            // fonction listeUtilisateur
            function listeComptes() {
                $.ajax({
                    url: "{{ route('listeComptes') }}",
                    type: 'GET',
                    dataType: 'json',
                    success: function(response) {
                        tableauListeCompte.clear().draw();
                        $.each(response, function(key, value) {
                            tableauListeCompte.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.idcompte}" 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.idcompte}" id="btnModifier"><i class="las la-pen"></i></button>
                             
                            </div>`,
                                value.libellecompte,
                                value.numerocompte,
                                value.soldecompte,

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

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

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

                $.ajax({
                    url: "{{ route('insertionCompte') }}",
                    type: 'POST',
                    data: {
                        _token: "{{ csrf_token() }}",
                        libellecompte: $("#libelleCompte").val(),
                        numerocompte: $("#numeroCompte").val(),
                        soldecompte: $("#soldeCompte").val(),
                    },
                    dataType: 'json',
                    success: function(response) {
                        if (!response.error) {
                            notifSuccess("Compte créé avec succès");
                            resetForm();
                            listeComptes();
                            $("#modalCreationCompte").modal('hide');
                        } else {
                            console.log(response.message);
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr);
                        console.error("Erreur lors de la création du compte : ", 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 compteId = $(this).data('id');
                $('#confirmDeleteModal').data('compteId', compteId).modal('show');
            });

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

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


            // fonction sur le click de modifier un compte 
            $("#boutonModifier").click(function() {
                let idCompte = $(this).attr("data-id");
                $.ajax({
                    url: "{{ route('modifierCompte') }}",
                    type: 'POST',
                    data: {
                        idcompte: idCompte,
                        libellecompte: $("#libelleCompte").val(),
                        numerocompte: $("#numeroCompte").val(),
                        soldecompte: $("#soldeCompte").val(),
                        _token: "{{ csrf_token() }}"
                    },
                    dataType: 'json',
                    success: function(response) {
                        if (!response.error) {
                            notifSuccess("compte modifié avec succès")
                            $("#modalCreationCompte").modal("hide");
                            listeComptes();
                        } else {
                            console.log(response.message);
                        }
                    },
                    error: function(response) {
                        console.log(response);
                    }
                });
            });

            $("#tableauListeCompte").on("click", "#btnModifier", function() {
                // Réinitialiser les champs du formulaire
                resetForm();
                let idCompte = $(this).attr("data-id");
                $.ajax({
                    url: "{{ route('listeComptes') }}",
                    type: 'GET',
                    data: {
                        idcompte: idCompte
                    },
                    dataType: 'json',
                    success: function(response, status, error) {
                        $("#libelleCompte").val(response[0].libellecompte);
                        $("#numeroCompte").val(response[0].numerocompte);
                        $("#soldeCompte").val(response[0].soldecompte);

                        $("#modalCreationCompte").modal("show");

                        const titreModalCompte = document.getElementById(
                            'titreModalCompte');
                        titreModalCompte.innerText = "Modifier compte";
                        document.getElementById('boutonEnregistrer').style.display = 'none';
                        document.getElementById('boutonModifier').style.display = '';
                        document.getElementById('boutonModifier').setAttribute('data-id',
                            idCompte);
                    },
                    error: function(response, status, error) {
                        console.log(response);
                    }
                });
            }); // fonction de reinitialisation du formulaire apres creation d'un utilisateur
            function resetForm() {
                $('#formCreationCompte')[0].reset();
            }

            // fonction sur le click du bouton valider pour creer un utilisateur

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

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

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


            // fonction sur le click de modifier un utilisateur
            $("#boutonModifier").click(function() {
                let idCompte = $(this).attr("data-id");
                $.ajax({
                    url: "{{ route('modifierCompte') }}",
                    type: 'POST',
                    data: {
                        idcompte: idCompte,
                        libellecompte: $("#libelleCompte").val(),
                        numerocompte: $("#numeroCompte").val(),
                        soldecompte: $("#soldeCompte").val(),
                        _token: "{{ csrf_token() }}"
                    },
                    dataType: 'json',
                    success: function(response) {
                        if (!response.error) {
                            notifSuccess("Compte modifié avec succès")
                            $("#modalCreationCompte").modal("hide");
                            listeComptes();
                        } else {
                            console.log(response.message);
                        }
                    },
                    error: function(response) {
                        console.log(response);
                    }
                });
            });

            $("#tableauListeCompte").on("click", "#btnModifier", function() {
                // Réinitialiser les champs du formulaire
                resetForm();
                let idCompte = $(this).attr("data-id");
                $.ajax({
                    url: "{{ route('listeComptes') }}",
                    type: 'GET',
                    data: {
                        idcompte: idCompte
                    },
                    dataType: 'json',
                    success: function(response, status, error) {
                        $("#libelleCompte").val(response[0].libellecompte);
                        $("#numeroCompte").val(response[0].numerocompte);
                        $("#soldeCompte").val(response[0].soldecompte);

                        $("#modalCreationCompte").modal("show");

                        const titreModalCompte = document.getElementById(
                            'titreModalCompte');
                        titreModalCompte.innerText = "Modifier compte";
                        document.getElementById('boutonEnregistrer').style.display = 'none';
                        document.getElementById('boutonModifier').style.display = '';
                        document.getElementById('boutonModifier').setAttribute('data-id',
                            idCompte);
                    },
                    error: function(response, status, error) {
                        console.log(response);
                    }
                });
            });

        })
    </script>
@endsection