{% extends 'base.html.twig' %}

{% block title %} Accueil  {% endblock %}

{% block stylesheets %}
    {{ parent() }}

    <style>
        .box-acmf {
            height: 120px;
        }

        .box-acmf .card-body {
            border-radius: 5px !important;
        }

        .media.static-top-widget {
            margin-bottom: -30px;
        }

        .static-top-widget .media-body .icon-bg {
            width: 60px;
            height: 60px;
        }

        .card-body {
            border-radius: 15px;
        }

        .counter {
            color: #224764 !important;
        }

        .default-datepicker .datepicker-inline .datepicker .datepicker--nav-title {
            color: #004870 !important;
        }

        .box-acmf .bg-danger {
            background-color: #e30613 !important;
        }

        .bg-primary .media.static-top-widget .align-self-center, .bg-danger .media.static-top-widget .align-self-center {
            background-color: unset !important;
        }

        .static-top-widget .media-body .icon-bg {
            right: -15px !important;
        }

        .quick-actions .static-top-widget .media-body .icon-bg, .sepa .static-top-widget .media-body .icon-bg {
            width: 100px;
            height: 100px;
        }

        .box-acmf .dropdown-menu {
            box-shadow: rgb(8 21 66 / 26%) 0px 0px;
            border-bottom: 7px solid rgb(215, 226, 233) !important;
            transform: translate(0px, -70px) !important;
            width: 100%;
            top: 150px !important;
        }

        .box-acmf .media-body h4 {
            margin-left: -10px;
        }

        .quick-actions .static-top-widget .media-body .icon-bg {
            right: -5px !important;
        }

        .card {
            margin-bottom: 18px;
        }

        .default-datepicker .datepicker-inline .datepicker .datepicker--content .datepicker--days .datepicker--days-names {
            margin: 10px;
            padding: unset;
        }

        .description-quick-actions {
            margin-left: -10px;
            width: 350px;
            text-align: justify;
            margin-top: 12px;
        }

        .icon-quick-actions {
        }

        .fa-list-alt:before {
            font-size: 25px;
        }

        .dropdown-menu-end[style] {
            right: 0 !important;
        }

        .dropdown-item {
            color: #224764;
            font-weight: 500;
            font-size:13px;
            padding-left:9px;
        }

        .dropdown-item:hover {
            color: #004870;
        }

        .dropdown-item:active {
            color: #ffffff;
        }

      .chart_data_left .static-top-widget {padding-left: 0px!important;}
      .card .card-body
      {
        padding: 15px!important;
      }
        .media .static-top-widget:last-child {
            color: red;
        }
        .acmf_img{
            border-radius: 5px;
        }
        .box-acmf .static-top-widget .media-body {
            padding-left: 10px;
        }

        .icon-30 svg {
            width: 30px;
            height: 30px;
        }

        .box-acmf h5 {
            font-size: 18px;
        }
        .card.image_home {
            height: 96%;
        }
    </style>
{% endblock stylesheets %}


{% block body %}
    <div class="row">
        <div class="col-xl-12 chart_data_left box-col-12" style="margin-top: 10px">
            <div class="card">
                <div class="card-body p-0">
                    <div class="row m-0 chart-main">
                        <div class="col-xl-4 col-md-6 col-sm-6 p-0 box-col-6">
                            <div class="media static-top-widget">
                                <div class="media-body">
                                    <h6 class="font-roboto text-primary">Total adhérents</h6>
                                    <h4 class="mb-0 counter">{{ data['totaladherent'] }}</h4>
                                </div>
                                <img class="img-fluid" src="../assets/media/all_user_acmf.svg"
                                     alt="" width="60px">
                            </div>
                            <div class="progress-widget mb-4">
                                <div class="progress sm-progress-bar progress-animate">
                                    <div class="progress-gradient-primary" role="progressbar" style="width: 90%"
                                         aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"><span
                                                class="animate-circle"></span></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-4 col-md-6 col-sm-6 p-0 box-col-6">
                            <div class="media static-top-widget">
                                <div class="media-body">
                                    <h6 class="font-roboto text-primary">Adhérents actifs</h6>
                                    <h4 class="mb-0 counter">{{ data['activeAdherent'] }}</h4>
                                </div>
                                <img class="img-fluid" src="../assets/media/user_acmf_act.svg"
                                     alt="" width="60px">
                            </div>
                            <div class="progress-widget mb-4">
                                <div class="progress sm-progress-bar progress-animate">
                                    <div class="progress-gradient-success" role="progressbar" id="progressBar1"
                                         style="width: 5%"
                                         aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"><span
                                                class="animate-circle"></span></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-4 col-md-6 col-sm-6 p-0 box-col-6">
                            <div class="media static-top-widget" style="border-right: unset">
                                <div class="media-body">
                                    <h6 class="font-roboto text-primary">Adhérents résiliés</h6>
                                    <h4 class="mb-0 counter">{{ data['disabledAdherent'] }}</h4>
                                </div>
                                <img class="img-fluid" src="../assets/media/user_acmf_des.svg"
                                     alt="" width="60px">
                            </div>
                            <div class="progress-widget mb-4">
                                <div class="progress sm-progress-bar progress-animate">
                                    <div class="progress-gradient-danger" role="progressbar" id="progressBar2"
                                         style="width: 5%"
                                         aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"><span
                                                class="animate-circle"></span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-9 ">
            <div class="card">
                <div class="card-body">
                    <div class="row mt-2">
                        {#si le role d'user connecter est observateur (facivi) afficher seulement la liste des adhérents#}
                        {% if is_granted('ROLE_WATCHER') %}
                            <div class="col-12">
                                <a class="text-white " href="{{ path('adherent_list') }}">
                                    <div class="card box-acmf quick-actions pointer box-same-page">
                                        <div class="bg-danger b-r-4 card-body">
                                            <div class="media static-top-widget">
                                                <div class="text-center icon-quick-actions icon-30"><i data-feather="users"></i>
                                                </div>
                                                <div class="media-body">
                                                    <h5 class="mb-0 pointer">
                                                        Liste des adhérents</h5>
                                                    <i class="icon-bg" data-feather="users"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        {% endif %}
                        {#si le role d'user connecter est un admin afficher tous le menu#}
                        {% if is_granted('ROLE_SUPER_ADMIN') %}
                        <div class="col-8">
                            <a class="text-white " href="{{ path('adherent_list') }}">
                            <div class="card box-acmf quick-actions pointer box-same-page">
                                <div class="bg-danger b-r-4 card-body">
                                    <div class="media static-top-widget">
                                        <div class="text-center icon-quick-actions icon-30"><i data-feather="users"></i>
                                        </div>
                                        <div class="media-body">
                                            <h5 class="mb-0 pointer">
                                                    Liste des adhérents</h5>
                                            <i class="icon-bg" data-feather="users"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            </a>
                        </div>
                        <div class="col-4">
                            <a href="{{ path('adherent_post_edit') }}">
                            <div class="card box-acmf pointer">
                                <div class="bg-primary b-r-4 card-body">
                                    <div class="media static-top-widget">
                                        <div class="align-self-center text-center"><i
                                                    data-feather="file-plus"></i>
                                        </div>
                                        <div class="media-body">
                                            <h5 class="mb-0 pointer">Ajouter</h5><i class="icon-bg" data-feather="file-plus"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            </a>
                        </div>
                        <div class="col-3">
                            <div class="card box-acmf pointer lettre">
                                <div class="bg-primary b-r-4 card-body">
                                    <div class="media static-top-widget">
                                        <div class="align-self-center text-center "><i
                                                    data-feather="mail" class="icon-lettre"></i>
                                        </div>
                                        <div class="media-body">
                                            <h5 class="mb-0 text-white pointer dropdown-lettre">
                                                Lettre de <br>
                                                reconduction <i class="middle fa fa-angle-down"></i></h5>

                                            <div class="dropdown-menu dropdown-menu-end dropdown-menu-lettre"
                                                 aria-labelledby="dropdownMenuLR">
                                                <a class="dropdown-item lr-export-button" href="javascript:;">Générer l'export routeur</a>
                                                <a class="dropdown-item lr-send-button" href="javascript:;"> Notifier par mail l'adhérent</a>
                                                {% if (app.user.adminRA == 1) %}<a class="dropdown-item disabled-mailing-lr" href="javascript:;">Désactiver l'envoi par mail</a> {% endif %}
                                                <a class="dropdown-item relaunch-lr-button" href="{{ path('list_relaunch_sepa') }}">Plan de
                                                    relance</a>
                                            </div>
                                            <i class="icon-bg icon-lettre" data-feather="mail"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="card box-acmf pointer avis">
                                <div class="bg-primary b-r-4 card-body">
                                    <div class="media static-top-widget">
                                        <div class="align-self-center text-center icon-avis"><i data-feather="file" class="icon-avis"></i>
                                        </div>
                                        <div class="media-body">
                                            <h5
                                                    class="mb-0 text-white pointer dropdown-avis">
                                                Avis
                                                de <br>cotisation <i class="middle fa fa-angle-down"></i>
                                            </h5>
                                            <div class="dropdown-menu dropdown-menu-end dropdown-menu-avis"
                                                 aria-labelledby="dropdownMenuAC">
                                                <a class="dropdown-item ac-export-button" href="javascript:;">Générer l'export routeur</a>
                                                <a class="dropdown-item ac-send-button" href="javascript:;" data-lr="">Notifier par mail l'adhérent</a>
                                                {% if (app.user.adminRA == 1) %}<a class="dropdown-item disabled-mailing-ac" href="javascript:;">Désactiver l'envoi par mail</a>{% endif %}
                                                <a class="dropdown-item relaunch-ac-button" href="{{ path('list_ac') }}">Plan de
                                                    relance</a>
                                            </div>
                                            <i class="icon-bg icon-avis" data-feather="file"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="card box-acmf pointer justificatif">
                                <div class="bg-primary b-r-4 card-body">
                                    <div class="media static-top-widget">
                                        <div class="align-self-center text-center"><i
                                                    data-feather="printer" class="icon-justificatif"></i></div>
                                        <div class="media-body">
                                            <h5
                                                    class="mb-0 text-white pointer dropdown-justificatif">
                                                Justificatif
                                                de <br> paiement <i class="middle fa fa-angle-down"></i></h5>
                                            <div class="dropdown-menu dropdown-menu-end dropdown-menu-justificatif"
                                                 aria-labelledby="dropdownMenuLR">
                                                <a class="dropdown-item jp-export-button" href="javascript:;">Générer l'export routeur</a>
{#                                                <a class="dropdown-item jp-send-button" href="javascript:;"> Notifier par mail l'adhérent</a>#}
                                            </div>
                                            <i class="icon-bg icon-justificatif" data-feather="printer"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="card box-acmf pointer box-same-page">
                                <div class="bg-primary b-r-4 card-body download-btn">
                                    <div class="media static-top-widget">
                                        <div class="align-self-center text-center"><i
                                                    data-feather="calendar"></i></div>
                                        <div class="media-body">
                                            <h5 class="mb-0 pointer">Exporter l'état <br> d'échéance</h5><i
                                                    class="icon-bg"
                                                    data-feather="calendar"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="card box-acmf pointer check">
                                <div class="bg-primary b-r-4 card-body">
                                    <div class="media static-top-widget">
                                        <div class="align-self-center text-center"><i
                                                    data-feather="book" class="icon-check"></i>
                                        </div>
                                        <div class="media-body">
                                            <h5 class="mb-0 text-white pointer dropdown-check">
                                                Gestion des <br>
                                                règlements <i class="middle fa fa-angle-down"></i></h5>

                                            <div class="dropdown-menu dropdown-menu-end dropdown-menu-check"
                                                 aria-labelledby="dropdownMenuCheck">
                                                <a class="dropdown-item check-button" href="{{ path('check_list') }}">Liste des chèques</a>
{#                                                <a class="dropdown-item voucher-button" href="{{ path('list_voucher') }}"> Liste des bordereaux</a>#}
                                                <a class="dropdown-item accounting-statement-action" href="{{ path('list_accounting_statement') }}"> Etat comptable</a>
{#                                                <a class="dropdown-item voucher-button" href="{{ path('list_refund') }}"> Etat de remboursement</a>#}
                                            </div>
                                            <i class="icon-bg icon-check" data-feather="book"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-8">
                            <div class="card box-acmf pointer box-same-page sepa" data-bs-toggle="modal" data-bs-target="#export-xml" >
                                <div class="bg-danger b-r-4 card-body">
                                    <div class="media static-top-widget">
                                        <div class="align-self-center text-center"><i
                                                    data-feather="file-text"></i>
                                        </div>
                                        <div class="media-body">
                                            <h5 class="mb-0 pointer">Générer SEPA</h5><i class="icon-bg"
                                                                                         data-feather="file-text"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
        <div class="col-3">
            <div class="card image_home">
                <div class="card-body d-flex align-items-center">
                    <div class="row mt-2">
                          <img class="img-fluid" src="../assets/media/acmf_home.jpg"
                                     alt="" width="">
                    </div>
                </div>
            </div>

        </div>

    </div>
{% endblock %}
{% block javascripts %}
    {{ parent() }}

    {% include 'global/Modal/export_xml_modal.html.twig' %}

    <script src="{{ asset('assets/js/datepicker/date-picker/datepicker.js') }}"></script>
    <script src="{{ asset('assets/js/datepicker/date-picker/datepicker.en.js') }}"></script>
    <script src="{{ asset('assets/js/datepicker/date-picker/datepicker.custom.js') }}"></script>
    <script>
        $(document).ready(function () {
            // Obtenir la date d'échéance
            let echeancedDate = getEcheancedDate(), nbrEmailLr, nbrEmailAC;
            // Appeler la fonction pour mettre à jour la largeur des barres de progression
            changeWidthProgressBar();
            // Compter le nombre d'e-mails dans les listes LR et AC pour une date d'échéance spécifiée
            nbrEmailLr = countListEmail(echeancedDate,"btn_export_lr");
            nbrEmailAC = countListEmail(echeancedDate,"btn_export_ac");
            // Attribuer les valeurs du nombre d'e-mails en tant qu'attributs 'data' aux boutons correspondants pour afficher les valeurs ensuite dans le popup
            $('.lr-send-button').attr('data-lr',nbrEmailLr);
            $('.ac-send-button').attr('data-ac',nbrEmailAC);
        });
    </script>



    <script>
        function changeWidthProgressBar(){
            // Calculer le pourcentage d'adhérents actifs par rapport au total
            let active=  {{ data['activeAdherent'] }} / {{ data['totaladherent'] }}  *100 ;
            // Calculer le pourcentage d'adhérents résiliés par rapport au total
            let disabled=  {{ data['disabledAdherent'] }} / {{ data['totaladherent'] }}  *100 ;
            // Mettre à jour la largeur de la barre de progression pour les adhérents actifs
            document.getElementById("progressBar1").style.width = parseInt(active)+'%';
            // Mettre à jour la largeur de la barre de progression pour les adhérents résiliés
            document.getElementById("progressBar2").style.width = parseInt(disabled)+'%';
        }

        //etat echeance
        $(document).on("click", ".download-btn", function () {
            var echeancedDate= getEcheancedDate();
            getDataArrayExport("ACMF_adherent_echeance_le_" + echeancedDate, echeancedDate, "btn_export","export_list");
        });

        //traitement LR

        //export routeur LR
        $(document).on("click", ".lr-export-button", function () {
            var echeancedDate= getEcheancedDate();
            // Appelez la fonction pour obtenir les données et générer l'export LR
            getDataArrayExport("ACMF_LR_PRLx1x4x12_" + moment().format('YYYYMMDD'), echeancedDate, "btn_export_lr","export_list");
        });
        //envoyer emails LR
        $(document).on("click", ".lr-send-button", function () {
            let echeancedDate = getEcheancedDate(),
                type_button = "btn_export_lr",
                nbr_email = $(this).attr('data-lr');
            if(nbr_email == 0){
                showNotify('Avertissement', 'La notification par mail ne contient aucun adhérent !', 'warning');
            }else{
                // Appelle la fonction sendAction pour confirmer l'envoi des e-mails
                sendAction(echeancedDate,type_button,0,null,nbr_email);
            }
        });


        //désactiver le mailing LR
        $(document).on("click", ".disabled-mailing-lr", function () {

            disabledMailing();
        });
        //désactiver l'envoi de mails pour les adhérents n'ont pas reçu de mail en appelant l'api mailjet dans le controller de cette route (get_sended_mail)
        function disabledMailing(){
            $.ajax({
                url: "{{ path('get_sended_mail') }}",
                method: 'GET',
                success: function (response) {
                    if (response.status === 204) {
                        showNotify("Avertissement", response.message, 'warning');
                    } else if (response.status === 200) {
                        showNotify('Succès', response.message, "info");
                    }
                    else {
                        showNotify("Erreur", 'Merci de contacter l\'admin', 'danger');

                    }
                    $('#load_screen').hide();
                }
            });
        }

        //traitement AC

        //exporter routeur AC
        $(document).on("click", ".ac-export-button", function () {
            var echeancedDate= getEcheancedDate();
            getDataArrayExport("ACMF_AC_" + moment().format('YYYYMMDD'), echeancedDate, "btn_export_ac","export_list");
        });
        //envoyer AC
        $(document).on("click", ".ac-send-button", function () {
            let echeancedDate = getEcheancedDate(),
                type_button = "btn_export_ac",
                nbr_email = $(this).attr('data-Ac');
            if(nbr_email == 0){
                showNotify('Avertissement', 'La notification par mail ne contient aucun adhérent !', 'warning');
            }else{
                sendAction(echeancedDate,type_button,0,null,nbr_email);
            }
        });

        //désactiver le mailing AC
        $(document).on("click", ".disabled-mailing-ac", function () {
            disabledMailing();
        });

        //traitement JP

        // expoter l'envoi matériel
        $(document).on("click", ".jp-export-button", function () {
            //appel fonction global
            getDataArrayExport("ACMF_JC_ "+moment().format('YYYYMMDD'), null, "btn_export_jp","export_list");
        });

        //envoie JC , cette fonctionnalité n'existe pas pour le moment
        $(document).on("click", ".jp-send-button", function () {
            sendMailler(null, "btn_export_jp");
        });

        //export XML SEPA
        $(document).on("click", ".export-xml-action", function () {
            let bool = verifyRequiredFieldsAlert();
            let dateOfExport = $('.export_date').val(),type=$(this).attr('data-attr');
            var day = new Date(moment(dateOfExport, "DD-MM-YYYY")).getDate();
           if (dateOfExport =="") {
               $('.alert_export_date').show().text("Champs obligatoire !");
               $('.export_date').css('border', '1px solid #dc3545');
           }else if (day != 2) {
               bool = false;
                $('.alert_export_date').show().text("Date invalide !");
                $('.export_date').css('border', '1px solid #dc3545');
            }else {
                $('.export_date').css('border', '1px solid #E6E8EB');
            }
            if (bool) {
                if (type== 1){
                    $.ajax({
                        url: "{{ path('export_xml') }}",
                        data:{
                            type: type,
                            dateExport: dateOfExport
                        },
                        success: function (response) {
                            if (response.status === 200) {
                                $('#export-xml').modal('hide');
                                downloadFile(response.pdf);
                                showNotify('Succès', response.message, "info");
                            } else {
                                $('#export-xml').modal('hide');
                                showNotify("Erreur", 'Merci de contacter l\'admin!', 'danger');
                            }
                            $('#export_date').val('');
                        }
                    });
                }else {
                    path = "{{ path('export_xml',{'date' : 'dateOfExport'}) }}";
                    path = path.replace('dateOfExport', dateOfExport);
                    $('#export-xml').modal('hide');
                    window.open(path);
                    $('#export_date').val('');
                }
            }
        });
        function downloadFile(filePath){
            var link=document.createElement('a');
            link.href = filePath;
            link.download = filePath.substr(filePath.lastIndexOf('/') + 1);
            link.click();
        }
        $('#export-xml').on('hidden.bs.modal', function (e) {
            $('#export_date').css('border', '1px solid #E6E8EB');
            $('#export_date').css('background-image', 'none');
            $('#export_date').val('');
            $('.alert_export_date').hide();
        });

        $('.box-acmf.check').on('click', function () {
            // Vérifier si l'élément actuel ou l'élément avec la classe "dropdown-check" n'a pas déjà été cliqué
            if (!$(this).data('clicked') || !$(".dropdown-check").data('clicked')) {
                // Afficher le menu déroulant correspondant à la classe "dropdown-menu-check"
                $(".dropdown-menu-check").show();
                // Masquer les autres menus déroulants
                $(".dropdown-menu-lettre").hide();
                $(".dropdown-menu-avis").hide();
                $(".dropdown-menu-justificatif").hide();
            }
        });

        $('.box-acmf.lettre').on('click', function () {
            if (!$(this).data('clicked') || !$(".dropdown-lettre").data('clicked')) {
                $(".dropdown-menu-lettre").show();
                $(".dropdown-menu-avis").hide();
                $(".dropdown-menu-justificatif").hide();
                $(".dropdown-menu-check").hide();
            }
        });

        $('.box-acmf.avis').on('click', function () {
            if (!$(this).data('clicked') || !$(".dropdown-avis").data('clicked')) {
                $(".dropdown-menu-avis").show();
                $(".dropdown-menu-lettre").hide();
                $(".dropdown-menu-justificatif").hide();
                $(".dropdown-menu-check").hide();
            }
        });

        $('.box-acmf.justificatif').on('click', function () {
            if (!$(this).data('clicked') || !$(".dropdown-justificatif").data('clicked')) {
                $(".dropdown-menu-justificatif").show();
                $(".dropdown-menu-lettre").hide();
                $(".dropdown-menu-avis").hide();
                $(".dropdown-menu-check").hide();
            }
        });

        $(document).click(function (event) {
            // Récupérer l'élément sur lequel l'utilisateur a cliqué
            var target = $(event.target);
            // Vérifier si l'élément sur lequel l'utilisateur a cliqué ne correspond à aucun des éléments suivants
            if (!((target.hasClass('box-acmf')) || (target.hasClass('card-body')) || (target.hasClass('media'))
                || target.is('h5') || (target.hasClass('fa-angle-down'))
                || (target.hasClass('icon-avis')) || (target.hasClass('icon-justificatif'))
                || (target.hasClass('icon-lettre')) || (target.hasClass('icon-check'))   )) {
                $('.dropdown-menu-lettre').hide();
                $('.dropdown-menu-avis').hide();
                $('.dropdown-menu-justificatif').hide();
                $('.dropdown-menu-check').hide();
            }
        });

        $('.box-same-page').on('click', function () {
            if (!$(this).data('clicked')) {
                $(".dropdown-menu-justificatif").hide();
                $(".dropdown-menu-lettre").hide();
                $(".dropdown-menu-avis").hide();
                $(".dropdown-menu-check").hide();
            }
        });

    </script>

{% endblock %}