@extends('partials/app')
@section('capsule')
    <!-- Wallet Card -->

    <!-- Wallet Card -->


    <!-- Exchange Action Sheet -->
    <div class="modal fade action-sheet" id="exchangeActionSheet" tabindex="-1" role="dialog">
        <div class="modal-dialog modalAjoutCompte_Client" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Ajouter un compte</h5>
                </div>
                <div class="modal-body">
                    <div class="action-sheet-content">
                        <form id="formAddAccountUser" method="POST">

                            <div class="row">
                                <div class="col-8">
                                    <div class="form-group basic">
                                        <div class="input-wrapper">
                                            <label class="label" for="raisonSocial">Raison sociale</label>
                                            <input type="text" class="form-control" name="raisonSocial" id="raisonSocial"
                                                placeholder="Raison sociale" required>
                                            <span id="raisonSocialR" class="text-danger" style="font-size:9px;"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="form-group basic">
                                        <div class="input-wrapper">
                                            <label class="label" for="statut">Statut</label>
                                            <select class="form-control custom-select" name="statut" id="statut"
                                                required>
                                                <option value="1">Actif</option>
                                                <option value="2">Inactif</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group basic">
                                <label class="label">URL</label>
                                <div class="input-group mb-2">
                                    <input type="text" class="form-control" name="urlServeur" id="urlServeur"
                                        placeholder="Url serveur">
                                </div>
                            </div>

                            <div class="form-group basic">
                                <button type="submit" class="btn btn-block btn-lg colorBtn" id="submitBtn"
                                    disabled>Enregistrer</button>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- * Exchange Action Sheet -->


           <!-- Dialog Basic -->
        <div class="modal fade dialogbox" id="DialogBasic" data-bs-backdrop="static" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Suppression</h5>
                    </div>
                    <div class="modal-body">
                        Voulez-vous vraiment mener cette action

                        <input type="hidden" id="saveIdCompte" class="form-control">
                    </div>
                    <div class="modal-footer">
                        <div class="btn-inline">
                            <a href="#" class="btn btn-text-secondary" data-bs-dismiss="modal">Annuler</a>
                            <a href="#" id="suppressionDef" class="btn btn-text-primary">Confirmer</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- * Dialog Basic -->


    <!-- Stats -->
    <div class="section">



        {{-- ::::::::::::::::::::::::::::::::::::::::::::::::::: ESPACE RECHERCHE DE DATE ::::::::::::::::::::::::::::::::::::::::::::::  --}}

        <div class="searchContainer d-flex justify-content-between mb-2">

            <div class="w-100 position-relative">
                <input type="text" class="form-control inputSearch" placeholder="Recherche...">
                <ion-icon class="search-icon" name="search-outline"></ion-icon>
            </div>

            <button type="button" data-bs-toggle="modal" data-bs-target="#exchangeActionSheet"
                class="btn btn-icon btn-outline-secondary ml-2 mt-2" style="margin-left: 7px;">
                <ion-icon name="add-outline"></ion-icon>
            </button>
        </div>



        {{-- ::::::::::::::::::::::::::::::::::::::::::::::::::: FIN ESPACE RECHERCHE DE DATE ::::::::::::::::::::::::::::::::::::::::::::::  --}}

        <div class="DashboardListbox2">

        </div>


    </div>



    </div>
@endsection


@section('script')
    <script>
        $(document).ready(function() {
            hiddenAndshow(10, '#logBox', '#topBarPadding', '.userName');
            recuprationClient()

            function checkForm() {
                let isValid = true;

                // Vérifie si tous les champs obligatoires sont remplis
                $("#formAddAccountUser input[required], #formAddAccountUser select[required]").each(function() {
                    if ($(this).val().trim() === "") {
                        isValid = false;
                    }

                    if ($("#raisonSocial").val().length == 0) {
                        $("#raisonSocialR").html("Raison sociale obligatoire");
                    } else {
                        $("#raisonSocialR").html("");
                    }
                });

                // Active ou désactive le bouton en fonction de la validité du formulaire
                $("#submitBtn").prop("disabled", !isValid);
            }

            // Vérification en temps réel lors de la saisie ou du changement de valeur
            $("#formAddAccountUser input[required], #formAddAccountUser select[required]").on("input change",checkForm);

            $(".inputSearch").on("input", function() {
                let searchText = $(this).val().toLowerCase();
                let found = false; // Variable pour vérifier s'il y a un résultat

                $(".DashboardListbox2 > div").each(function() {
                    let itemText = $(this).text().toLowerCase();

                    if (itemText.includes(searchText)) {
                        $(this).show();
                        found = true; // Il y a au moins un élément correspondant
                    } else {
                        $(this).hide();
                    }
                });

                // Supprimer l'ancienne image avant d'ajouter une nouvelle
                $(".DashboardListbox2 .empty-message").remove();

                // Si aucun élément n'est trouvé, afficher l'image
                if (!found) {
                    $(".DashboardListbox2").append(`
            <div class="text-center mt-3 empty-message">
                <img src="{{ asset('assets/img/empty.png') }}" class="img-fluid" style="width: 50%;">
                <p>Aucun résultat trouvé</p>
            </div>
        `);
                }
            });




            $("#formAddAccountUser").on("submit", function(e) {
                e.preventDefault();

                $.ajax({
                    url: "{{ route('client.create') }}",
                    type: "POST",
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"
                    },
                    data: {
                        raisonSocial: $("#raisonSocial").val(),
                        statut: $("#statut").val(),
                        urlServeur: $("#urlServeur").val()
                    },
                    dataType: "json",
                    beforeSend: function() {
                        $("#submitBtn").prop("disabled", true).html(
                            '<div class="spinner-border text-light" role="status"></div>');
                    },
                    success: function(resp) {
                        $("#submitBtn").prop("disabled", false).html("Enregistrer");
                        $("#submitBtn").css('color', 'white');
                        if (resp.succes) {
                            showToast("Succès", resp.msg, "bg-success");

                            recuprationClient();
                            $("#exchangeActionSheet").modal("hide");
                            $("#formAddAccountUser")[0].reset();
                        } else {
                            showToast("Erreur", "Une erreur est survenue", "bg-danger");
                        }
                    },
                    error: function(xhr) {
                        $("#submitBtn").prop("disabled", false).html("Enregistrer");
                        $("#submitBtn").css('color', 'white');

                        let errorMsg = "Une erreur est survenue.";
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMsg = xhr.responseJSON.message;
                        }

                        showToast("Erreur", errorMsg, "bg-danger");
                        console.log("Erreur AJAX :", xhr);
                    }
                });
            });


            $(document).on('click','#SupprimerCompte',function(){

                var $get_id = $(this).data('id')
                $('#saveIdCompte').val($get_id)
               $('#DialogBasic').modal('show')
            })

            $('#suppressionDef').on('click',function(){

                $.ajax({
                    type: "GET",
                    url: "{{route('client.delete')}}",
                    data: {idClient:$('#saveIdCompte').val()},
                    dataType: "JSON",
                    success: function (resp) {

                        if(resp.succes){
                            $('#saveIdCompte').val(0)
                            showToast("Succès", resp.msg, "bg-success");
                            recuprationClient()
                            $('#DialogBasic').modal('hide')
                        }
                    },
                    error:function(xhr,status,response){
                      console.log(xhr)
                    }
                });

            })

        });


        function recuprationClient() {
            $.ajax({
                url: "{{ route('client.liste') }}",
                type: "GET",
                dataType: "json",
                success: function(response) {
                    console.log(response);
                    $(".DashboardListbox2").html("");

                    if (response.data.length == 0) {
                        $(".DashboardListbox2").append(`
                    <div class="text-center mt-3">
                        <img src="{{ asset('assets/img/empty.png') }}" class="img-fluid" style="width: 50%;">
                    </div>
                `);
                    }
                    $.each(response.data, function(key, value) {

                        var statut = "";
                        var server = "";

                        if (value.url_serveur_api != "") {
                            server = value.url_serveur_api;
                        }

                        if (value.statut_mc == 1) {
                            statut = "Actif";
                        } else {
                            statut = "Inactif";
                        }
                        $(".DashboardListbox2").append(`
                    <div>
                        <div class="d-flex justify-content-between  pb-1">
                            <div>
                            <div class="d-flex">
                                <ion-icon id="SupprimerCompte" data-id="${value.idmediciel_client}" color="danger" name="trash-bin-outline"></ion-icon>
                                 <h4 style="margin-left:10px;">${value.raison_sociale_mc}</h4> <span>(${value.idmediciel_client})</span>
                            </div>
                               
                                <div style="font-size: 11px;margin-top:-9px">
                                <a target="_blank" href="${server}">${server.length > 25 ? server.substring(0,25)+'...': server}</a>
                                </div>
                            </div>
                                <h6 class="me-2 mt-1" style="color:rgb(40,110,123)">${statut}</h6>
                        </div>
                        <hr style="margin-top: -3px;">
                    </div>
                `)
                    })
                },
                error: function(xrh, err, response) {
                    console.log(err);
                }
            })
        }
    </script>
@endsection