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

                <form id="FormCreationUsers">
                    @csrf
                    <div class="modal-body">
                        <div class="container">
                            <div class="row mb-3">
                                <div class="col-md-12">
                                    <label for="name" class="form-label"><i class="fas fa-user"></i> Nom &
                                        Prénoms</label>
                                    <input type="text" class="form-control" id="name"
                                        placeholder="Entrez le nom complet ici" name="name">
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="email" class="form-label"><i class="fas fa-envelope"></i> Email</label>
                                    <input type="email" class="form-control" id="email"
                                        placeholder="Entrez une adresse" name="email">
                                </div>
                                <div class="col-md-6">
                                    <label for="password" class="form-label"><i class="fas fa-lock"></i> Mot de
                                        passe</label>
                                    <input type="password" class="form-control" id="password"
                                        placeholder="Entrez un mot de passe" name="password">
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="numerotelephonemobileusers" class="form-label"><i
                                            class="fas fa-phone-alt"></i> Téléphone</label>
                                    <input type="tel" class="form-control" id="numerotelephonemobileusers"
                                        placeholder="Entrez un téléphone" name="numerotelephonemobileusers">
                                </div>
                                <div class="col-md-6">
                                    <label for="numerowhatsappusers" class="form-label"><i class="ri-whatsapp-fill"></i>
                                        Numéro WhatsApp</label>
                                    <input type="tel" class="form-control" id="numerowhatsappusers"
                                        placeholder="Entrez un numéro WhatsApp" name="numerowhatsappusers">
                                </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 utilisateur ?
                </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 utilisateurs
                    </div>

                    <button type="button" class="btn btn-success btn-label waves-effect waves-light" id="boutonUsers"
                        style="background-color: #6f3b23; border-color: #6f3b23; margin-left: 0.5cm;"><i
                            class="ri-add-fill label-icon align-middle fs-16 me-2"></i> Ajouter un utilisateur</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="tableauListeUsers" 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">Nom & Prénoms </th>
                                    <th class="text-center">Email</th>
                                    <th class="text-center">Contact</th>
                                    <th class="text-center">Statut</th>

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

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

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



            $("#boutonUsers").click(function() {
                // Réinitialiser les champs du formulaire
                resetForm();
                $("#modalCreationUsers").modal('show');
                const titreModalUsers = document.getElementById('titreModalUsers');
                titreModalUsers.innerText = "Création utilisateur";
                document.getElementById('boutonEnregistrer').style.display = '';
                document.getElementById('boutonModifier').style.display = 'none';
            });


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

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

                            </div>`,

                                `<div class="text-center">${value.name} </div>`,
                                `<div class="text-center">${value.email} </div>`,
                                `<div class="text-center">${value.numerotelephonemobileusers} </div>`,
                                `<div class="form-check form-switch text-center">
                                <input class="form-check-input " type="checkbox" role="switch" id="flexSwitchCheckDefault">
                                 <label class="form-check-label" for="flexSwitchCheckDefault"></label>
                                </div>`
                            ]).draw();
                        });
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr);
                        console.log(status);
                    }
                });
            }


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

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

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

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

                    success: function(response) {
                        if (!response.error) {
                            notifSuccess("Utilisateur créé avec succès");
                            resetForm();
                            listeUsers();
                            $("#modalCreationUsers").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'utilisatuer : ", 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 usersId = $(this).data('id');
                $('#confirmDeleteModal').data('usersId', usersId).modal('show');
            });

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

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


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

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

            $("#tableauListeUsers").on("click", "#btnModifier", function() {
                // Réinitialiser les champs du formulaire
                resetForm();
                let idUsers = $(this).attr("data-id");
                $.ajax({
                    url: "{{ route('listeUsers') }}",
                    type: 'GET',
                    data: {
                        idusers: idUsers
                    },
                    dataType: 'json',
                    success: function(response) {
                        console.log(response);
                        $("#name").val(response[0].name);
                        $("#email").val(response[0].email);
                        $("#numerotelephonemobileusers").val(response[0]
                            .numerotelephonemobileusers);
                        $("#numerowhatsappusers").val(response[0].numerowhatsappusers);
                        $("#password").val(response[0].password);
                        const titreModalUsers = document.getElementById(
                            'titreModalUsers');
                        titreModalUsers.innerText = "Modifier Users";
                        document.getElementById('boutonEnregistrer').style.display = 'none';
                        document.getElementById('boutonModifier').style.display = '';
                        document.getElementById('boutonModifier').setAttribute('data-id',
                            idUsers);

                    },
                });
            });

            function resetForm() {
                $('#FormCreationUsers')[0].reset(); // Réinitialise le formulaire
            }


        })
    </script>
@endsection