{% 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">Reportes</span>
    </div>
    <div class="pull-right"></div>
</div>
{% endblock %}

{% block content %}
<div>
    <fieldset class="border">
        <legend class="py-1 px-3 text-blue-500 nunito-semibold">Venta detallada</legend>
        <div class="form-group">
            <div class="col-md-3">
            	<form action="{{path('reporte_pdf_detalle')}}" name="reporte2" id="reporte2" method="GET">
                <input type="hidden" name="filtro2" id="filtro2">
                <label class="control-label nunito-semibold">Fecha Inicio: *</label>
                <input type="text" id="fechaInicial" class="form-control" size="8" name="fechaInicial" required="required" onchange="busqueda()"/>
                <div>
                    <button class="btn bg-blue-600 rounded-full text-white hover:text-white focus:text-white link-boton accion" onclick="enviarFormulario2()"  data-toggle="modal" data-target="#search-client" type="button">
                        Descargar PDF
                    </button>
                </div>
                </form>
            </div>
            <div class="col-md-3">
                <form action="{{path('comprobante_excel_detalle')}}" name="reporte" id="reporte" method="GET">
                <input type="hidden" name="filtro" id="filtro">
                    <label class="control-label nunito-semibold">Fecha Fin: *</label>
                    <input type="text" id="fechaFinal" class="form-control" size="8" name="fechaFinal" required="required" onchange="busqueda()"/>
                    <div>
                        <button class="btn bg-blue-600 rounded-full text-white hover:text-white focus:text-white link-boton accion" onclick="enviarFormulario()" data-toggle="modal" data-target="#search-client" type="button">
                            Descargar Excel
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </fieldset>

    <div class="dataTable_wrapper">  
        <div class="table-responsive">
            <table class="table table-striped table-bordered table-hover" id="factura-table">
                <thead>
                    <tr>
                        <th class="font-light text-blue-500">Fecha</th>
                        <th class="font-light text-blue-500 w-32">Serie</th>
                        <th class="font-light text-blue-500 w-32">Factura</th>
                        <th class="font-light text-blue-500">ID Cliente</th>
                        <th class="font-light text-blue-500">Autorizaci&oacute;n</th>
                        <th class="font-light text-blue-500">Cliente</th>
                        <th class="font-light text-blue-500 w-32">Subtotal 0%</th>
                        <th class="font-light text-blue-500 w-32">Subtotal 15%</th>
                        <th class="font-light text-blue-500 w-32">Subtotal 5%</th>
                        <th class="font-light text-blue-500 w-32">IVA 15%</th>
                        <th class="font-light text-blue-500 w-32">IVA 5%</th>
                        <th class="font-light text-blue-500">Total</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}

{% block javascript %}
<!-- DataTables 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();
                        }
                        function enviarFormulario2() {
                            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;
                            $("#filtro2").val(cadena);
                            document.reporte2.submit();
                        }
    var oTable = $("#factura-table").dataTable({
        columnDefs: [
            
            {"visible": true, "targets": [0]}
        ],
        responsive: true,
        orderFixed: [2, 'asc'],
        rowGroup: {
            dataSrc: 2
        },
        bAutoWidth: false,
        sAjaxSource: "{{ path('all_factura_detalle')}}",
        bProcessing: true,
        bServerSide: true,
        bSort: false,
        aLengthMenu: [[5, 10, 15], [5, 10, 15]],
        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());
                            }

                        }
</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 %}