{% 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">ATS</span>
     </div>
</div>
{% endblock %}

{% block content %}
    {% for flashMessage in app.session.flashbag.get('notice') %}
        <div class="col-sm-12 alert alert-success alert-dismissable">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <h4><strong>Carga Exitosa</strong></h4>
            <p>{{ flashMessage }}</p>
        </div>
    {% endfor %}
    <div>
        <div class="row">
            <div class="col-sm-12 text-right">
                <button class="btn bg-blue-600 rounded-full text-white hover:text-white focus:text-white link-boton accion" data-toggle="modal" data-target="#search-client" type="button">
                    Generar XML
                </button>
            </div>
            <div class="col-md-3">
                <label class="control-label nunito-semibold">Empresa *</label>
                <select class="form-control" id="tipoIdentificacion" name="tipoIdentificacion" required="required">
                    <option value="0">Ejemplo</option>
                </select>
            </div>
            <div class="col-md-3">
                <label class="control-label nunito-semibold">Fecha Inicio *</label>
                <input type="text" class="form-control" id="fecha" size="8" name="fechaIni" required="required" />
            </div>
            <div class="col-md-3">
                <label class="control-label nunito-semibold">Fecha Fin *</label>
                <input type="text" class="form-control" id="fecha" size="8" name="fechaFin" required="required" />
            </div>
        </div>

        <div class="mt-6">
            <ul data-uk-tab>
                <li><a class="uk-text-capitalize" href="#">Compras</a></li>
                <li><a class="uk-text-capitalize" href="#">Ventas</a></li>
            </ul>

            <ul class="uk-switcher uk-margin">
                <li>
                    <div class="dataTableCompras_wrapper">  
                        <div class="col text-right mb-4">
                            <button class="btn bg-blue-600 rounded-full text-white hover:text-white focus:text-white link-boton accion" data-toggle="modal" data-target="#search-client" type="button">
                                Reporte Compra
                            </button>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-bordered table-hover" id="Compra-table">
                                <thead>
                                    <tr>
                                        <th class="font-light text-blue-500" style="width:10%;">ID</th>
                                        <th class="font-light text-blue-500" style="width:20%;">ATS Compra</th>
                                        <th class="font-light text-blue-500" style="width:10%;">ID Emisor</th>
                                        <th class="font-light text-blue-500" style="width:30%;">Tipo Emisi&oacute;n</th>
                                        <th class="font-light text-blue-500">FechaAu</th>
                                        <th class="font-light text-blue-500" style="width:30%;">Punto Emisi&oacute;n</th>
                                        <th class="font-light text-blue-500" style="width:20%;">Establecimiento</th>
                                        <th class="font-light text-blue-500" style="width:10%;">Secuencial</th>
                                        <th class="font-light text-blue-500" style="width:36%;">Fecha de Emisi&oacute;n</th>
                                        <th class="font-light text-blue-500" style="width:30%;">N&uacute;mero de Autorizaci&oacute;n</th>
                                        <th class="font-light text-blue-500" style="width:30%;">Valor IVA</th>
                                        <th class="font-light text-blue-500" style="width:30%;">Base Imponible</th>
                                        <th class="font-light text-blue-500" style="width:30%;">ID Establecimiento</th>
                                        <th class="font-light text-blue-500" style="width:30%;">Pto. de Emisi&oacute;n</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </li>

                <li>
                    <div class="dataTableventas_wrapper">  
                        <div class="col-sm-12 text-right mb-4">
                            <button class="btn bg-blue-600 rounded-full text-white hover:text-white focus:text-white link-boton accion" data-toggle="modal" data-target="#search-client" type="button">
                                Reporte Venta
                            </button>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered table-hover" id="Compra-table">
                                <thead>
                                    <tr>
                                        <th class="font-light text-blue-500" style="width: 10%">ID</th>
                                        <th class="font-light text-blue-500">ATS Ventas</th>
                                        <th class="font-light text-blue-500" style="width: 10%">ID Venta</th>
                                        <th class="font-light text-blue-500" style="width: 30%">ID Cliente</th>
                                        <th class="font-light text-blue-500">Tipo de Emisi&oacute;n</th>
                                        <th class="font-light text-blue-500">Punto Cantidad</th>
                                        <th class="font-light text-blue-500">IVA</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </li>
            </ul>
        </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>
        var oTable = $("#cliente-table").dataTable({
            columnDefs: [
                {
                    targets: 1,
                    render: function (data, type, row) {
                        return "<a href='" + row[0] + "'>" + row[3] + "</a>";
                    }
                },
                {
                    targets: 2,
                    render: function (data, type, row) {
                        data = row[1]
                        var tipo = "";
                        if (data == '04') {
                            tipo = "RUC";
                        } else if (data == '05') {
                            tipo = "CEDULA";
                        } else if (data == '06') {
                            tipo = "PASAPORTE";
                        } else if (data == '07') {
                            tipo = "CONSUMIDOR FINAL";
                        } else if (data == '08') {
                            tipo = "DEL EXTERIOR";
                        } else if (data == '09') {
                            tipo = "PLACA";
                        }
                        return tipo;
                    }
                },
                {
                    targets: 3,
                    render: function (data, type, row) {
                        return row[2];
                    }
                }, {
                    targets: 7,
                    render: function (data, type, row) {
                        var a = 1;
                        return "<a href='" + row[0] + "/editar' title='Editar'><button class='btn btn-primary link-boton'><i class='fa fa-pencil-square-o'></i></button></a>";
                    }
                }
            ],
            aoColumns: [{"bVisible": false}, null, null, null, null, null, {"bVisible": false}],
            responsive: true,
            bAutoWidth: false,
            sAjaxSource: "{{ path('all_client')}}",
            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"
                },
            },
        });
        $('#cliente-table_filter input').unbind();
        $('#cliente-table_filter input').bind('keyup', function (e) {
            if (e.keyCode == 13) {
                oTable.fnFilter($(this).val());
            }
        });
    </script>
    <script src="{{asset('garyavendanio/uikit/js/uikit.min.js')}}"></script>
    <script src="{{asset('garyavendanio/uikit/js/uikit-icons.min.js')}}"></script>
{% endblock %}