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

                <form id="FormCreationProspect">
                    @csrf
                    <div class="modal-body">
                        <div class="container">
                            <div class="row mb-3">

                                <div class="col-md-6">
                                    <label for="denominationprospect" class="form-label"><i class="fas fa-tag"></i> Nom du
                                        prospect</label>
                                    <input type="text" class="form-control" id="denominationprospect"
                                        placeholder="Entrez une dénomination" name="denominationprospect">
                                </div>

                                <div class="col-md-6">
                                    <label for="gerantprospect" class="form-label"><i class="fas fa-user-shield"></i>
                                        Gérant</label>
                                    <input type="text" class="form-control" id="gerantprospect"
                                        placeholder="Entrez un gérant" name="gerantprospect">
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <label for="sexeprospect" class="form-label"><i class="fas fa-venus-mars"></i>
                                        Sexe</label>
                                    <select class="form-select" id="sexeprospect" name="sexeprospect">
                                        <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="datenaissanceprospect" class="form-label"><i
                                            class="fas fa-calendar-alt"></i>
                                        Date de naissance</label>
                                    <input type="date" class="form-control" id="datenaissanceprospect"
                                        name="datenaissanceprospect">
                                </div>
                                <div class="col-md-4">
                                    <label for="emailprospect" class="form-label"><i class="fas fa-envelope"></i>
                                        Email</label>
                                    <input type="email" class="form-control" id="emailprospect"
                                        placeholder="Entrez un email" name="emailprospect">
                                </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="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="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="numeroagrement" class="form-label"><i class="fas fa-envelope"></i>
                                        N° Agrement</label>
                                    <input type="text" class="form-control" id="numeroagrement"
                                        placeholder="Entrez le numero ici" name="numeroagrement">

                                </div>

                            </div>


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

                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <label for="situationgeoprospect" class="form-label"><i
                                            class="fas fa-map-marker"></i>
                                        Localisation</label>
                                    <input type="text" class="form-control" id="situationgeoprospect"
                                        placeholder="Entrez une localisation" name="situationgeoprospect">
                                </div>
                                <div class="col-md-4">
                                    <label for="adressepostaleprospect" class="form-label"><i
                                            class="fas fa-address-card"></i> Adresse Postale</label>
                                    <input type="text" class="form-control" id="adressepostaleprospect"
                                        placeholder="Entrez une adresse" name="adressepostaleprospect">
                                </div>
                                <div class="col-md-4">
                                    <label for="sitewebprospect" class="form-label"><i class="fas fa-globe"></i> Site
                                        web</label>
                                    <input type="text" class="form-control" id="sitewebprospect"
                                        placeholder="Entrez site web" name="sitewebprospect">
                                </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>
    </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 prospect ?
                </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 Prospects</div>

                    <button type="button" class="btn btn-success btn-label waves-effect waves-light" id="boutonProspect"
                        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 Prospects</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="tableauListeProspect" 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 prospect</th>
                                    <th class="text-center">Email</th>
                                    <th class="text-center">Adresse postale</th>
                                    <th class="text-center">Contact</th>

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

@section('scripts')
    <script>
        $(document).ready(function() {
            var tableauListeProspect = $("#tableauListeProspect").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 prospects enrégistrés",
                    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: []
            });

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

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

            // fonction listeProspect
            function listeProspect() {
                $.ajax({
                    url: "{{ route('listeProspect') }}",
                    type: 'GET',
                    dataType: 'json',
                    success: function(response) {
                        console.log(response);
                        tableauListeProspect.clear().draw();
                        $.each(response, function(key, value) {
                            tableauListeProspect.row.add([
                                `<div class="d-flex justify-content-center align-items-center">
                                <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.idprospect}" 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.idprospect}" id="btnModifier"><i class="las la-pen"></i></button>
                            </div>`,
                                `<div class="text-center">${value.denominationprospect} </div>`,
                                `<div class="text-center">${value.emailprospect} </div>`,
                                `<div class="text-center">${value.adressepostaleprospect} </div>`,
                                `<div class="text-center">${value.telephonemobileprospect} </div>`,
                            ]).draw();
                        });
                        //<button type="button" class="btn btn-outline-primary btn-icon waves-effect waves-light material-shadow-none btn-sm mx-1" data-id="${value.idprospect}" id="btnDétails"><i class="mdi mdi-eye-outline"></i></button>

                    },

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

            //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 dans la 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 de reinitialisation du formulaire apres creation d'un prospect
            function resetForm() {
                $('#FormCreationProspect')[0].reset(); // Réinitialise le formulaire
            }

            // fonction sur le click du bouton valider pour creer un prospect
            $("#FormCreationProspect").on("submit", function(evt) {
                evt.preventDefault();
                $(this).prop('disabled', true);

                let formData = new FormData(document.getElementById("FormCreationProspect"));

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

                    success: function(response) {
                        if (!response.error) {
                            notifSuccess("Prospect créé avec succès");
                            resetForm();
                            listeProspect();
                            $("#modalCreationProspect").modal('hide');
                        } else {
                            console.log(response.message);
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr);
                        console.error("Erreur lors de la création du prospect : ", error);
                    },
                    complete: function() {
                        $("#boutonEnregistrer").prop('disabled', false);
                    }
                });
            });

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

            // Fonction pour confirmer la suppression d'un prospect
            $('#confirmDeleteBtn').click(function() {
                var prospectId = $('#confirmDeleteModal').data('prospectId');
                $.ajax({
                    url: "{{ route('supprimerProspect') }}",
                    type: 'DELETE',
                    data: {
                        idprospect: prospectId,
                        _token: "{{ csrf_token() }}"
                    },
                    dataType: 'json',
                    success: function(response) {
                        if (!response.error) {
                            notifSuccess("Prospect supprimé avec succès");
                            $('#confirmDeleteModal').modal('hide');
                            listeProspect();
                        } else {
                            console.error("Erreur lors de la suppression du prospect : ",
                                response.message);
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error("Erreur lors de la suppression du prospect : ", error);
                    }
                });
            });

            // fonction sur le click de modifier un prospect 
            $("#tableauListeProspect").on("click", "#btnModifier", function() {
                resetForm();
                let idProspect = $(this).data("id");
                $.ajax({
                    url: "{{ route('listeProspect') }}",
                    type: 'GET',
                    data: {
                        idprospect: idProspect
                    },
                    dataType: 'json',
                    success: function(response) {
                        console.log(response);
                        $("#idtypetiers").val(response[0].idtypetiers);
                        $("#denominationprospect").val(response[0].denominationprospect);
                        $("#adressepostaleprospect").val(response[0].adressepostaleprospect);
                        $("#telephonemobileprospect").val(response[0].telephonemobileprospect);
                        $("#telephoneprospect").val(response[0].telephoneprospect);
                        $("#emailprospect").val(response[0].emailprospect);
                        $("#sexeprospect").val(response[0].sexeprospect);
                        $("#datenaissanceprospect").val(response[0].datenaissanceprospect);
                        $("#idnaturetiers").val(response[0].idnaturetiers);
                        $("#gerantprospect").val(response[0].gerantprospect);
                        $("#idpays").val(response[0].idpays);
                        $("#idville").val(response[0].idville);
                        $("#faxprospect").val(response[0].faxprospect);
                        $("#sitewebprospect").val(response[0].sitewebprospect);
                        $("#situationgeoprospect").val(response[0].situationgeoprospect);
                        $("#idsecteuractivite").val(response[0].idsecteuractivite);
                        $("#modalCreationProspect").modal("show");
                        const titreModalProspect = document.getElementById(
                            'titreModalProspect');
                        titreModalProspect.innerText = "Modifier Prospect";
                        document.getElementById('boutonEnregistrer').style.display = 'none';
                        document.getElementById('boutonModifier').style.display = '';
                        document.getElementById('boutonModifier').setAttribute('data-id',
                            idProspect);
                    },
                });
            });
        });
    </script>
@endsection