{% extends "FactelBundle::Layout.html.twig" %}
{% block css %}
    <!-- DataTables CSS -->
    <link href="{{asset('recursos/bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css')}}" rel="stylesheet">
    <!-- DataTables Responsive CSS -->
    <link href="{{asset('recursos/bower_components/datatables-responsive/css/dataTables.responsive.css')}}" rel="stylesheet">
    <link href="{{asset('garyavendanio/uikit/css/uikit.min.css')}}" rel="stylesheet">
{% endblock %}

{% block panel_title %}
<div class="uk-background-cover text-blue-500 h-44 w-full rounded-2xl uk-grid uk-grid-collapse uk-flex-between uk-flex-middle px-8" style="background-image: url( {{asset('recursos/img/bg-header.png')}} );">
    <div>
        <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        <span class="text-xl">Reporte</span>
    </div>
     <div class="pull-right"></div>
</div>
{% endblock %}

{% block content %}
    <div>
        <div class="mb-10">
            <form action="{{path('comprobante_excel')}}" name="reporte" id="reporte" method="GET">
                <div class="lg:grid grid-cols-4 gap-4 items-end">
                    <input type="hidden" name="filtro" id="filtro">
                    <div class="form-group">
                        <label class="form-label font-light" for="tipoComprobante">Tipo Comprobante</label>
                        <select class="uk-select uk-border-rounded border-gray-200" id="tipoComprobante" name="tipoComprobante" onchange="cambiarUrlDocumento()">
                            <option value="F">Factura</option>
                            <option value="LQ">Liquidaci&oacute;n de Compra</option>
                            <option value="NC">Nota de Cr&eacute;dito</option>
                            <option value="ND">Nota de D&eacute;bito</option>
                            <option value="CR">Retenci&oacute;n</option>
                            <option value="GR">Gu&iacute;a</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label font-light"  for="sel1">Fecha de inicio</label>
                        <div>
                            <input class="uk-input uk-border-rounded border-gray-200" type="text" id="fechaInicial" size="8" name="fechaInicial" onchange="busqueda()"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-label font-light"  for="sel1">Fecha de fin</label>
                        <input class="uk-input uk-border-rounded border-gray-200" type="text" id="fechaFinal" size="8" name="fechaFinal" onchange="busqueda()"/>
                    </div>
                    <div class="form-group w-48">
                        <a class="uk-button uk-button-primary capitalize flex uk-flex-middle uk-flex-center rounded-full" onclick="enviarFormulario()" type="button" id="enviar">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M15 13l-3 3m0 0l-3-3m3 3V8m0 13a9 9 0 110-18 9 9 0 010 18z" />
                            </svg>
                            <span>Descargar Excel</span>
                        </a>
                    </div>
                </div>
            </form>
        </div>
        <div class="dataTable_wrapper table-responsive">  
            <table class="table table-striped table-bordered table-hover" id="factura-table">
                <thead>
                    <tr>
                        <th class="font-light text-blue-500">ID</th>
                        <th class="font-light text-blue-500">N&uacute;m.</th>
                        <th class="font-light text-blue-500">Cliente</th>
                        <th class="font-light text-blue-500">Identificaci&oacute;n</th>
                        <th class="font-light text-blue-500">Fecha Emisi&oacute;n</th>
                        <th class="font-light text-blue-500">Fecha Autorizaci&oacute;n</th>
                        <th class="font-light text-blue-500">Valor Total</th>
                        <th class="font-light text-blue-500">Estado</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}

{% block javascript %}
    <script src="{{asset('recursos/bower_components/datatables/media/js/jquery.dataTables.min.js')}}"></script>
    <script src="{{asset('recursos/bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js')}}"></script>
    <script src="{{asset('recursos/js/script.js')}}"></script>
    <script>
                            function enviarFormulario() {
                                var fechaInicial = $("#fechaInicial").val();
                                var fechaFinal = $("#fechaFinal").val();
                                var filtro = $('#factura-table_filter input').val();
                                var cadena = "";
                                if (fechaInicial != "" && fechaFinal != "") {
                                    cadena = fechaInicial + "&" + fechaFinal + "&";
                                }

                                cadena = cadena + filtro;
                                $("#filtro").val(cadena);
                                document.reporte.submit();
                            }

                            var oTable = $("#factura-table").dataTable({
                                columnDefs: [
                                    {
                                        targets: 1,
                                        render: function (data, type, row) {
                                            return "<a href='" + row[0] + "'>" + data + "</a>";
                                        }
                                    },
                                    {"visible": false, "targets": [0]}
                                ],
                                responsive: true,
                                orderFixed: [2, 'asc'],
                                rowGroup: {
                                        dataSrc: 2
                                },
                                bAutoWidth: false,
                                sAjaxSource: "{{ path('all_reporte')}}",
                                bProcessing: true,
                                bServerSide: true,
                                bSort: false,
                                aLengthMenu: [[20, 30, 50], [20, 30, 50]],
                                language: {
                                    sProcessing: "Procesando...",
                                    sLengthMenu: "Mostrar _MENU_",
                                    sZeroRecords: "No se encontraron resultados",
                                    sEmptyTable: "Ningún dato disponible en esta tabla",
                                    sInfo: "Mostrando del _START_ al _END_ de _TOTAL_ registros",
                                    sInfoEmpty: "Mostrando del 0 al 0 de un total de 0 registros",
                                    sInfoFiltered: "(filtrado de un total de _MAX_ registros)",
                                    sInfoPostFix: "",
                                    sSearch: "Buscar:",
                                    sUrl: "",
                                    sInfoThousands: ",",
                                    sLoadingRecords: "Cargando...",
                                    oPaginate: false,
                                    oAria: {
                                        sSortAscending: ": Activar para ordenar la columna de manera ascendente",
                                        sSortDescending: ": Activar para ordenar la columna de manera descendente"
                                    },
                                },
                            });

                            $('#factura-table_filter input').unbind();
                            $('#factura-table_filter input').bind('keyup', function (e) {
                                if (e.keyCode == 13) {
                                    var fechaInicial = $("#fechaInicial").val();
                                    var fechaFinal = $("#fechaFinal").val();

                                    var cadena = "";
                                    if (fechaInicial != "" && fechaFinal != "") {
                                        cadena = fechaInicial + "&" + fechaFinal + "&";
                                    }

                                    oTable.fnFilter(cadena + $(this).val());
                                }
                            });
                            oTable.on('search.dt', function () {
                                var datos = $('#factura-table_filter input').val().split("&");
                                if (datos.length == 3) {
                                    $('#factura-table_filter input').val(datos[2]);
                                }
                            });

                            function busqueda() {
                                var fechaInicial = $("#fechaInicial").val();
                                var fechaFinal = $("#fechaFinal").val();

                                var cadena = "";
                                if (fechaInicial != "" && fechaFinal != "") {
                                    cadena = fechaInicial + "&" + fechaFinal + "&";
                                    oTable.fnFilter(cadena + $('#factura-table_filter input').val());
                                }
                                if (fechaInicial == "" && fechaFinal == "") {
                                    oTable.fnFilter($('#factura-table_filter input').val());
                                }

                            }

                            function cambiarUrlDocumento() {

                                var oSettings = oTable.fnSettings();
                                var tipoComprobante = $("#tipoComprobante").val();
                                if (tipoComprobante == "NC") {
                                    oSettings.sAjaxSource = "{{ path('all_nc')}}";
                                } else if (tipoComprobante == "LQ") {
                                    oSettings.sAjaxSource = "{{ path('all_lq')}}";
                                } else if (tipoComprobante == "ND") {
                                    oSettings.sAjaxSource = "{{ path('all_nd')}}";
                                } else if (tipoComprobante == "CR") {
                                    oSettings.sAjaxSource = "{{ path('all_cr')}}";
                                } else if (tipoComprobante == "GR") {
                                    oSettings.sAjaxSource = "{{ path('all_gr')}}";
                                } else {
                                    oSettings.sAjaxSource = "{{ path('all_reporte')}}";
                                }
                                busqueda();
                            }


</script>
<script src="{{asset('garyavendanio/uikit/js/uikit.min.js')}}"></script>
<script src="{{asset('garyavendanio/uikit/js/uikit-icons.min.js')}}"></script>
<script src="{{asset('recursos/bower_components/datatables-responsive/js/dataTables.responsive.js')}}"></script>
    <script src="{{asset('recursos/bower_components/RowGroup-1.2.0/dataTables.rowGroup.min.js')}}"></script>
{% endblock %}