@extends('layouts.planti')
@section('contenido')

    @if(Session::has('success'))
        <div class="alert alert-info">
            {{Session::get('success')}}
        </div>
    @endif  

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/i18n/defaults-*.min.js"></script>
   
    <style>
        body,html{ margin: 0px !important; padding: 0px !important; }
        table tr th {
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        }
        .sorting    { background-color: #D4D4D4; color: black; }
        .asc:after  { content: ' ▲'; }
        .desc:after { content: " ▼";  }    
    </style>
    
    <center>
        <h2>Auditoria de Pedidos por Actualizar ETA</h2>
    </center>
     
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                        <div class="row">
                            <div class="col-md-12 col-xs-12"> 
                                <form class="form-horizontal" method="get" action="/reportes/tarifas">   
                                    <div class="form-group"> 
                                        <div class="col-lg-2">      
                                            Numero DO<br>
                                            <input type="text" class="form-control" placeholder="Buscar...">
                                        </div>
                                        <div class="col-lg-2">      
                                            No. Pedido<br>
                                            <input type="text" class="form-control" placeholder="Buscar...">
                                        </div>
                                        <div class="col-lg-2">  
                                            Actualizado Wsimex Desde
                                            <input type="date" class="form-control" value="{{date('Y-m-01')}}">
                                        </div>
                                        <div class="col-lg-2">  
                                            Hasta
                                            <input type="date" class="form-control" value="{{date('Y-m-d')}}">
                                        </div>
                                        <div class="col-lg-2">   
                                            <br>   
                                            <button title="Generar reporte segun los filtros" class="btn btn-success"><span class="fa fa-filter"></span>&nbsp;Filtrar</button>
                                            <button id='descargar' type="button" title="Descargar reporte" class="btn btn-warning"><span class="fa fa-download"></span></button>
                                        </div>
                                        <div class="col-lg-1">   
                                            Mostrar<br>
                                            <select name="filas" id="filas" class="form-control" style="width:80px;">  
                                                <option value="10">10</option>                                    
                                                <option value="12">12</option>                                    
                                                <option value="15">15</option>                                    
                                                <option value="todas">Todas</option>                                    
                                            </select> 
                                        </div>
                                    </div> 
                                    <div class="form-group"> 
                                        <div class="col-lg-2">   
                                            Reg. encontrados [ {{ $num_reg }} ]
                                        </div>
                                        <div class="col-lg-3">   
                                            <span class="fa fa-square" style="color:red; margin-left: 10px"></span>&nbsp;&nbsp;Pedidos sin actualizar
                                        </div>
                                    </div>
                                </form>
                                <div class="form-group"> 
                                    <div class="col-lg-12" style="overflow-y: scroll; height: 490px">      
                                        {!! $tabla !!}
                                    </div>
                                    <center>
                                            @if ($tabla != null)
                                                {{ $info->links('vendor.pagination.bootstrap-4') }}
                                            @endif 
                                    </center>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br>

    <script type="text/javascript">

        $("#descargar").click(function(){
            ocultar = ($('#ocultar').is(':checked'))?'on':'off';
            location.href = "/reportes/exportar/tarifas/xls?ocultar=" + ocultar +"&linea="+$("#linea").val()+"&destino="+$("#destino").val();
        });

        $(document).ready(function(){
            // $("#filas").val("{{-- $filas --}}")
            // $("#linea").val("{{-- $linea --}}");
            // $("#destino").val("{{-- $id_destino --}}");
        })
        
        $("#filas").change(function(){
            location.href = '/reportes/tarifas?filas=' + $("#filas").val();
        });

        $('th').click(function() {
            var table = $(this).parents('table').eq(0)
            var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()))
            this.asc = !this.asc
            if (!this.asc) {
            rows = rows.reverse()
            }
            for (var i = 0; i < rows.length; i++) {
            table.append(rows[i])
            }
            setIcon($(this), this.asc);
        })

        function comparer(index) {
            return function(a, b) {
            var valA = getCellValue(a, index),
                valB = getCellValue(b, index)
            return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.localeCompare(valB)
            }
        }

        function getCellValue(row, index) {
            return $(row).children('td').eq(index).html()
        }

        function setIcon(element, asc) {
            $("th").each(function(index) {
            $(this).removeClass("sorting");
            $(this).removeClass("asc");
            $(this).removeClass("desc");
            });
            element.addClass("sorting");
            if (asc) element.addClass("asc");
            else element.addClass("desc");
        }
    </script>
@endsection