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

{% block title %}Listado de Facturas{% endblock %}

{% block contenido %}
<main>
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-10 text-left" style="font-size: 24px">
                <i class="fas fa-list-ul text-danger"></i><span class="text-danger"> Listado de Facturas</span>
            </div>
        </div>
        <hr>
        <div class="row justify-content-center">
            <div class="col-2 text-right text-primary mt-3">
                <h4>Filtro por Fechas:</h4>
            </div>
            <div class="col-2 text-left">
                <label class="text-primary">Desde: </label>
                <input id="fecDesde" value="{{ fecDesde }}" class="form form-control" type="date"/>
            </div>
            <div class="col-2 text-left">
                <label class="text-primary">Hasta: </label>
                <input id="fecHasta" value="{{ fecHasta }}" class="form form-control" type="date"/>
            </div>
            <div class="col-3 text-left">
                <label>&nbsp;</label><br>
                <button id="filtrar" class="btn btn-danger">Filtrar</button>
            </div>
        </div>
        <div class="row justify-content-center mt-3">
            <div class="col-10">
                <div id="grid"></div>
                <br>
                <br>
                <br>
            </div>
        </div>
    </div>
</main>
    <!-- Modal -->
    <div class="modal fade" id="procesando" tabindex="-1" role="dialog" aria-labelledby="procesando" aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body p-5">
                    <button class="btn btn-warning w-100 text-danger" type="button" disabled style="opacity: 1; color: red !important; font-size: 16px">
                        <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
                        <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
                        Procesando...
                    </button>
                </div>

            </div>
        </div>
    </div>
    <script>
        var facturas = {{ facturas|json_encode|raw }};
        console.log(facturas);
        $(document).ready(function () {
            window.parent.$('#procesandoP').modal('hide');
            var source =
                {
                    localdata: facturas,
                    datafields:
                        [
                            { name: 'id', type: 'string' },
                            { name: 'idFac', type: 'string' },
                            { name: 'numFac', type: 'string' },
                            { name: 'customerName', type: 'string' },
                            { name: 'customerNumber', type: 'string' },
                            { name: 'email', type: 'string' },
                            { name: 'facFecha', map:'facFecha>date', type: 'date' },
                            { name: 'facFecDespacho', map:'facFecDespacho>date', type: 'date' },
                            { name: 'totalAmountIncludingTax', type: 'string' },
                            { name: 'facEstado', type: 'string' },
                        ],
                    datatype: "array",
                    pagesize: 25,
                };

            var opciones = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                var result = '<div class="row h-100 w-100 m-0 align-items-center"><div class="col-12 text-center">';
                if(rowdata.facEstado == 'REGISTRADA') {
                    result += '<a href="{{ path('facturas_detalle',{'facId':'docId', 'fecDesde': fecDesde, 'fecHasta': fecHasta}) }}" onclick="$(\'#procesando\').modal(\'show\');"><button type="button" class="btn btn-sm btn-icon btn-icon-only btn-outline-success mb-0"><i class="fas fa-2x fa-arrow-circle-right"></i></button></a>';
                }else {
                    if(rowdata.facEstado == 'PARCIAL') {
                        result += '<a href="{{ path('facturas_detalle',{'facId':'docId', 'fecDesde': fecDesde, 'fecHasta': fecHasta}) }}" onclick="$(\'#procesando\').modal(\'show\');"><button type="button" class="btn btn-sm btn-icon btn-icon-only btn-outline-danger mb-0"><i class="fas fa-2x fa-arrow-circle-right"></i></button></a>';
                    }else{
                        result += '<a href="{{ path('facturas_detalle',{'facId':'docId', 'fecDesde': fecDesde, 'fecHasta': fecHasta}) }}" onclick="$(\'#procesando\').modal(\'show\');"><button type="button" class="btn btn-sm btn-icon btn-icon-only btn-outline-warning mb-0"><i class="fas fa-2x fa-arrow-circle-right"></i></button></a>';
                    }
                }
                result = result.replace('docId',rowdata.id);
                return result.replace('docId2',rowdata.id);
            }

            var dataAdapter = new $.jqx.dataAdapter(source);
            var estadoFilter = function () {
                var filtergroup = new $.jqx.filter();
                var filter_or_operator = 0;
                var filtervalue = 'DESPACHADA';
                var filtercondition = 'not_equal';
                var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
                filtergroup.addfilter(filter_or_operator, filter);
                return filtergroup;
            }();
            $("#grid").jqxGrid(
                {
                    width: '100%',
                    source: dataAdapter,
                    sortable: true,
                    showfilterrow: true,
                    filterable: true,
                    pageable: true,
                    autoheight: true,
                    rowsheight: 40,
                    editable: false,
                    localization: getLocalization('{% trans %} es {% endtrans %}'),
                    theme: '{{ theme }}',
                    selectionmode: 'multiplecellsadvanced',
                    columns: [
                        { text: '{% trans %}ID{% endtrans %}', columntype: 'textbox', filtertype: 'textbox', datafield: 'id', width: '10%', hidden: true },
                        { text: '{% trans %}No. de Factura{% endtrans %}', columntype: 'textbox', filtertype: 'textbox', datafield: 'numFac', width: '15%' },
                        { text: '{% trans %}DOC. Cliente{% endtrans %}', columntype: 'textbox', filtertype: 'textbox', datafield: 'customerNumber', width: '10%' },
                        { text: '{% trans %}Nombre Cliente{% endtrans %}', columntype: 'textbox', filtertype: 'textbox', datafield: 'customerName', width: '30%' },
                        {# text: '{% trans %}Tel. Cliente{% endtrans %}', columntype: 'textbox', filtertype: 'textbox', datafield: 'telefono1cli', width: '8%' #},
                        { text: '{% trans %}Mail Cliente{% endtrans %}', columntype: 'textbox', filtertype: 'textbox', datafield: 'email', width: '15%', hidden: true },
                        { text: '{% trans %}Fecha Factura{% endtrans %}', filtertype: 'range', cellsformat: 'yyyy-MM-dd' , datafield: 'facFecha', width: '10%' },
                        { text: '{% trans %}Fecha Despacho{% endtrans %}', filtertype: 'range', cellsformat: 'yyyy-MM-dd', datafield: 'facFecDespacho', width: '10%' },
                        { text: '{% trans %}Valor{% endtrans %}', columntype: 'textbox', filtertype: 'textbox', datafield: 'totalAmountIncludingTax', width: '5%', hidden: true },
                        { text: '{% trans %}Estado{% endtrans %}', filter: estadoFilter, columntype: 'checkedlist', filtertype: 'checkedlist', datafield: 'facEstado', width: '15%' },
                        { text: '{% trans %}Opciones{% endtrans %}', columntype: 'textbox', filterable: false, datafield: 'QR', width: '10%', cellsrenderer: opciones },
                    ]
                });
            $("span:contains('www.jqwidgets.com')").hide();

            $("#filtrar").click(function () {
                console.log($("#fecDesde").val());
                console.log($("#fecHasta").val());
                if($("#fecDesde").val() == "" || $("#fecHasta").val() == ""){
                    alert("Rango de fechas no válido!")
                    return false;
                }
                if($("#fecDesde").val() > $("#fecHasta").val()){
                    alert("Rango de fechas no válido, Fecha Desde no puede ser mayor a la fecha Hasta")
                    return false;
                }
                //window.parent.$('#procesandoP').modal('show');

                var url = "{{ path('default_erp_facturas_index',{'fecDesde':'fecini', 'fecHasta':'fecfin'}) }}"
                url = url.replace('fecini',$("#fecDesde").val());
                url = url.replace('fecfin',$("#fecHasta").val());
                console.log(url);
                location.href = url;
            })
        });
    </script>
{% endblock %}