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

{% block title %} Liste des chéques {% endblock %}

{% block stylesheets %}

    {{ parent() }}

    <style>

        div.dataTables_wrapper .dataTables_filter input[type="search"] {
            width: 89%;
        }
        .save-voucher {
            text-align: center !important;
            height: 63px;
            border-radius: 15px;
            background-color: #e30613 !important;
            border: 1px solid #e30613 !important;
        }
        div.dataTables_wrapper div.dataTables_length select {
            width: 66px;
        }
        .swal2-styled.swal2-deny {
            font-size: 14px !important;
            display: inline-block;
            background-color: #224764 !important;
            padding-top: 10px !important;
            padding-bottom: 10px !important;;
        }
    </style>
{% endblock stylesheets %}
{% block breadcrumbs %}

    <div class="container-fluid">
        <div class="page-title">
            <div class="row">
                <div class="col-xl-12 col-lg-12 col-sm-12">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            <a href="{{ path('home_page') }}">
                                <i data-feather="home"></i>
                            </a>
                        </li>
                        <li class="breadcrumb-item active">Liste des chéques</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block body %}
    <div class="row ">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="text-primary">Liste des chéques </h5>
                    <div class="card-header-right card-header-right-btn">
{#                        <a href="{{ path('list_voucher') }}" class="btn  btn-primary"><i class="fa fa-clipboard-list"></i></i><span#}
{#                                    class="text-right d-none d-md-inline">Liste des bordereaux</span></a> #}
                        <a href="{{ path('list_accounting_statement') }}" class="btn  btn-primary"><i class="fa fa-clipboard-list"></i><span
                                    class="text-right d-none d-md-inline">Etat comptable</span></a>
                        <a href="javascript:;" onclick="window.history.go(-1);return false;"  class="btn  btn-primary"><i class="fas fas fa-undo"></i><span
                                    class="text-right d-none d-md-inline">Retour</span></a>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-10">
                            <div class="filtreDatatable  mb-2"><div class="default-according style-1" id="filterAccordion">
                                    <div class="card">
                                        <div class="card-header filtre bg-primary">
                                            <h5 class="mb-0">
                                                <button class="btn btn-link text-white accordion-collapse-btn" data-bs-toggle="collapse" data-bs-target="#filterAccordionBloc" aria-expanded="true"><i class="fa fa-filter"></i>Filtre
                                                </button>
                                            </h5>
                                        </div>
                                        <div class="collapse" id="filterAccordionBloc" data-bs-parent="#filterAccordion" style="">
                                            <div class="card-body">
                                                <div class="row">
                                                    <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 m-b-5 filter-field-bloc">
                                                        <div class="form-group"><label for="filter_corporate" class="f-w-600">Sociétaire</label><input type="text" id="filter_corporate" name="filter[corporate]" class="filter_corporate form-control" ></div>
                                                    </div>
                                                    <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 m-b-5 filter-field-bloc">
                                                        <div class="form-group"><label for="filter_amount" class="f-w-600">Montant de cotisation</label><input type="text" id="filter_amount" name="filter[amount]" class="filter_amount form-control input-only-numeric check-input check-input-numeric"></div>
                                                    </div>
                                                    <div class="col-xl-6 col-lg-4 col-md-6 col-sm-12 m-b-5 filter-field-bloc">
                                                        <div class="form-group">
                                                            <label for="filter_startDate" class="f-w-600">Date de paiement</label>
                                                            <div class="row">
                                                                <div class="col-xl-6 d-flex align-items-center"><label for="filter_startDate" style="margin-bottom: 0px;" class="p-r-10">Min</label><input type="text" id="filter_startDate" name="filter[startDate]" data-format="00-00-0000" class="filter_start_date datepicker-here digits form-control check-input-date"></div>
                                                                <div class="col-xl-6 d-flex align-items-center"><label for="filter_startDate" style="margin-bottom: 0px;" class="p-r-10">Max</label><input type="text" id="filter_endDate" name="filter[endDate]" data-format="00-00-0000" class="filter_end_date datepicker-here digits form-control check-input-date"></div>
                                                            </div>

                                                        </div>
                                                    </div>
                                                    {#<div class="col-xl-6 col-lg-4 col-md-6 col-sm-12 m-b-5 filter-field-bloc">#}
                                                        {#<div class="form-group"><label for="filter_endDate">Date fin</label><input type="text" id="filter_endDate" name="filter[endDate]" data-format="00-00-0000" class="filter_end_date datepicker-here digits form-control check-input-date"></div>#}
                                                    {#</div>#}
                                                </div>
                                                <div class="row mt-2">
                                                    <div class="col-xl-12 col-lg-12 col-sm-12 text-right">
                                                        <button class="btn btn-outline-primary intialiser-filtere-action mb-2" onclick="initialiseFilter()" style="display: none;">
                                                            <i class="fas fa-times"></i> Réinitialiser le filtre
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-2">
                            <div class="row">
                                <div class="col-12 d-flex justify-content-center">
                                    <button class="btn btn-primary btn-lg m-r-10 dt-button save-voucher" type="button" data-bs-toggle="tooltip" title="">
                                        Générer bordereau
                                    </button>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 mt-2">
                    <table class="table table-bordered table-hover table-checkable" id="dt_checkboxed">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>Sociétaire</th>
                            <th>Numéro de chèque</th>
                            <th>Montant</th>
                            <th>Date de paiement</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for regulation in regulations %}
                            <tr>
                                <td>{{ regulation.id }}</td>
                                <td>{{ regulation.user_login }}</td>
                                <td>{{ regulation.item_number }}</td>
                                <td>{{ regulation.amount }}</td>
                                <td>{{ regulation.payment_date | date('d-m-Y') }}</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
{% endblock %}

{% block javascripts %}

    {{ parent() }}

    <script>
        $(".accordion-collapse-btn").click(function () {
            var button = $(this);

            if (button.attr("aria-expanded") === "true") {
                $(".card-header.filtre").css("border-bottom-left-radius", "0px");
                $(".card-header.filtre").css("border-bottom-right-radius", "0px");
            }
            else {
                $(".card-header.filtre").css("border-bottom-left-radius", "15px");
                $(".card-header.filtre").css("border-bottom-right-radius", "15px");
            }

        });

        $(".card-header.filtre").css("border-bottom-left-radius", "15px");
        $(".card-header.filtre").css("border-bottom-right-radius", "15px");
        checkedAll = false;
        dt_checkboxed = $('#dt_checkboxed').DataTable({
            dom: "lrt<'row'<'col-6'i><'col-6'p>>",
            "oLanguage": {
                "oPaginate": {
                    "sPrevious": '<i class="fas fa-chevron-left"></i>',
                    "sNext": '<i class="fas fa-chevron-right"></i>'
                },
                "sInfo": "Affichage de l'&eacute;lement _START_ &agrave; _END_ sur _TOTAL_ &eacute;l&eacute;ments",
                "sSearch": '<i class="fa fa-search"></i>',
                "sSearchPlaceholder": "Recherche",
                "sProcessing": "",
                "sLengthMenu": "Résultats :  _MENU_",
                "sZeroRecords": "Aucun &eacute;l&eacute;ment &agrave; afficher",
                "sEmptyTable": "Aucune donn&eacute;e disponible dans le tableau",
                "sInfoEmpty": "Affichage de l'&eacute;lement 0 &agrave; 0 sur 0 &eacute;l&eacute;ments",
                "sInfoFiltered":  "",
            },
            "pagingType": "simple_numbers",
            "stripeClasses": [],
            "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "Tous"]],
            "pageLength": 10,
            headerCallback: function (thead, data, start, end, display) {
                checkedAll ? checked = "checked" : checked = "";
                thead.getElementsByTagName('th')[0].innerHTML = `<input class="checkbox_all_check checkbox_animated"
                                                               type="checkbox" value=""`+ checked +`>`;
            },
            columnDefs: [
                {
                    targets: 0,
                    width: '30px',
                    className: 'dt-right',
                    orderable: false,
                    render: function (data, type, full, meta) {
                        return '<input class="checkbox_check checkbox_animated" type="checkbox" value="" data-id="' + data + '">';
                    },
                },
                { orderable: true, targets: [1,2,3,4]},
            ],
            'initComplete': function () {
                $('.save-voucher').removeClass('btn-secondary')
            },
            order: [],
        });

        $(document).on('click', '.save-voucher', function() {
                var checkIds = [],
                    rows = $(dt_checkboxed.$('input[type="checkbox"]').map(function () {
                        if($(this).prop("checked")) {
                            checkIds.push($(this).attr('data-id'))
                            $(this).closest('tr').addClass("tr-checked")
                        }
                    }));

                if (checkIds.length > 0) {
                    swal.fire({
                        title: "Vous allez générer un bordereau de " + checkIds.length +" chèques.",
                        text: "Êtes-vous sûr ?",
                        type: 'danger',
                        showDenyButton: true,
                        showConfirmButton: true,
                        showCancelButton: true,
                        customClass: "swal-action",
                        confirmButtonClass: "btn btn-danger",
                        cancelButtonClass: "btn btn-outline-danger",
                        denyButtonClass: "btn btn-primary",
                        cancelButtonText: "Annuler",
                        confirmButtonText: 'Générer et calculer TVA',
                        denyButtonText: 'Générer'
                    }).then(function (result) {

                        if (result.isConfirmed) {
                            $.ajax({
                                url: "{{ api_adherent_internal_link }}/adherent/saveVoucher",
                                method: 'POST',
                                data: {
                                    checkIds: checkIds,
                                },
                                success: function (response) {
                                    if (response.status===200){
                                        $.ajax({
                                            url: "{{ path('print_voucher') }}",
                                            method: 'POST',
                                            data: {
                                                checkIds: checkIds,
                                                id: response.lastId,
                                            },
                                            success: function () {
                                                showNotify('Succès', 'Bordereau génère avec succes !.', 'info');
                                                dt_checkboxed.rows('.tr-checked').remove().draw();
                                            }});
                                    }
                                },
                            });
                        }else if (result.isDenied){
                            var formData = new FormData();
                            formData.set('checkIds',checkIds);
                            $.ajax({
                                url: "{{ path('print_voucher_local') }}",
                                method: 'POST',
                                enctype: 'multipart/form-data',
                                data: formData,
                                processData: false,
                                contentType: false,
                                cache: false,
                                xhrFields: {
                                    responseType: 'blob'
                                }
                            }).done(function( data, statusText, xhr ) {
                                var filename = "";
                                var disposition = xhr.getResponseHeader("Content-Disposition");
                                if (disposition && (disposition.indexOf("attachment") !== -1) || disposition.indexOf("filename") !== -1) {
                                    var filenameRegex = /filename[^;=\n]*=(([""]).*?\2|[^;\n]*)/;
                                    var matches = filenameRegex.exec(disposition);
                                    if (matches != null && matches[1])
                                        filename = matches[1].replace(/[""]/g, "");
                                }

                                var type = xhr.getResponseHeader("Content-Type");
                                var blob = new Blob([data], {type: type});

                                if (typeof window.navigator.msSaveBlob !== "undefined") {
                                    window.navigator.msSaveBlob(blob, filename);
                                } else {
                                    var URL = window.URL || window.webkitURL;
                                    var downloadUrl = URL.createObjectURL(blob);

                                    if (filename) {
                                        var a = document.createElement("a");
                                        if (typeof a.download === "undefined") {
                                            window.location = downloadUrl;
                                        } else {
                                            a.href = downloadUrl;
                                            a.download = filename;
                                            document.body.appendChild(a);
                                            a.click();
                                        }
                                    } else {
                                        window.location = downloadUrl;
                                    }

                                    setTimeout(function () {
                                        URL.revokeObjectURL(downloadUrl);
                                        $(dt_checkboxed.$('.checkbox_check')).prop('checked', false);
                                        $('.checkbox_all_check').prop('checked', false);
                                    }, 100);
                                }
                            });

                        }
                    });
                }
                else{
                    showNotify('Avertissement', "Veuillez sélectionner au moins un chèque!", 'warning');
                }
        });

        $(document).on('change', '.checkbox_check ', function() {
            if(!($(this).is(':checked'))) {
                checkedAll = false;
                $('.checkbox_all_check').prop('checked',false);
            }

        });

        $(document).on('change', '.checkbox_all_check', function () {
            var set = $(this).closest('#dt_checkboxed_wrapper').find('td:first-child .checkbox_check');
            checkedAll = $(this).is(':checked');

            if ($('.filter_corporate').val() != "" || $('.filter_amount').val() != "" || $('.filter_end_date').val() != "" || $('.filter_start_date').val() != "") {
                resultsFilter = dt_checkboxed.rows({filter: 'applied'}).data();
                for (let i = 0; i < resultsFilter.length; i++) {
                    valueResult = resultsFilter[i][0];
                    if (checkedAll) {
                        $(dt_checkboxed.$('.checkbox_check[data-id="' + valueResult + '"]')).prop('checked', true);
                    }
                    else {
                        $(dt_checkboxed.$('.checkbox_check[data-id="' + valueResult + '"]')).prop('checked', false);
                    }
                }
            }

            else {
                $(dt_checkboxed.$('.checkbox_check')).each(function () {
                    if (checkedAll) {
                        $(this).prop('checked', true);
                    }
                    else {
                        $(this).prop('checked', false);
                    }
                });
            }
        });

        $.fn.dataTable.ext.search.push(
            function( settings, data, dataIndex ) {
                let corporate =  $('#filter_corporate').val(),
                    dateS =  $('#filter_startDate').val().split('-'),
                    startDate = new Date(dateS[2] + '-' + dateS[1] + '-' + dateS[0]),
                    dateE = $('#filter_endDate').val().split('-'),
                    endDate = new Date(dateE[2] + '-' + dateE[1] + '-' + dateE[0]),
                    amount = parseFloat($('#filter_amount').val()),
                    corporateColumn  = data[1] ,
                    amountColumn  = parseFloat(data[3]) ,
                    dateC  = data[4].split('-') ,
                    dateColumn = new Date(dateC[2] + '-' + dateC[1] + '-' + dateC[0]);

                if((startDate === null && endDate ===null && corporate=== null && amount ===null ) ||
                    (!corporateColumn.includes(corporate) && startDate != null && endDate != null && amount !=null) ||
                    ( amount > amountColumn && startDate != null && endDate !=null && corporate !=null) ||
                    ( amount != null && startDate > dateColumn && endDate !=null && corporate !=null) ||
                    ( amount != null && endDate < dateColumn && startDate !=null && corporate !=null))
                {

                    return false;
                }
                return true;
            }
        );

        $('.filtreDatatable').find('#filterAccordion input[type=number],input[type=text] ').keyup(delayCallAjax(function (e) {
            dt_checkboxed.draw();
            checkedAll = false;

            if($(this).val()==""){
                checkedAll = false;
                $('.checkbox_all_check').prop('checked',false);
            }

        }, 1000));

        $("#filterAccordion .datepicker-here").datepicker({
            onSelect: function() {
                $('.intialiser-filtere-action').show();
                dt_checkboxed.draw();
                if($(this).val()==""){
                    checkedAll = false;
                    $('.checkbox_all_check').prop('checked',false);
                }
            }
        });

        $(document).on('keypress','.input-only-numeric', function(e) {
            var charCode = (e.which) ? e.which : event.keyCode;
            return checkNumericInput(charCode);
        });

        function initialiseFilter() {
            $("#filterAccordion input").val('');
            dt_checkboxed.draw();
            checkedAll = false;
            $('.checkbox_all_check').prop('checked',false);
        }
    </script>
{% endblock %}