@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>Reporte de Tarifas</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-3">      
                                            Naviera<br>
                                            <select name="linea" id="linea" class="form-control js-example-basic-single col-lg-3 control-label" required>  
                                                <option value="0">Seleccione una Opcion</option>                                    
                                                @foreach($lineas as $l)   
                                                    <option value="{{$l->id}}">{{$l->nombre}}</option>                             
                                                @endforeach
                                            </select> 
                                        </div>
                                        <div class="col-lg-3">      
                                            Lugar de Destino<br>
                                            <select name="destino" id="destino" class="form-control js-example-basic-single col-lg-3 control-label" required>  
                                                <option value="0">Seleccione una Opcion</option>     
                                                @foreach($destino as $d)   
                                                    <option value="{{$d->id}}">{{$d->nombre_pais}} {{$d->nombre_puerto}}</option>                             
                                                @endforeach
                                            </select> 
                                        </div>
                                        <div class="col-lg-3">  
                                            <br> 
                                            <input style="margin-top: 14px" name="ocultar" id="ocultar" type="checkbox" @if($ocultar == 'on')  checked @endif>&nbsp;&nbsp;<label style="color: red">Ocultar tarifas vencidas</label>
                                        </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-3">   
                                            Registros encontrados [ {{$cantidad}} ]
                                        </div>
                                        <div class="col-lg-3">   
                                            <span class="fa fa-square" style="color:#ffec82; margin-left: 10px"></span>&nbsp;&nbsp;Tarifas vencidas
                                        </div>
                                    </div>
                                </form>
                                <div class="form-group"> 
                                    <div class="col-lg-12" style="overflow-y: scroll; height: 470px">      
                                        <table class="table table-condended">
                                            <thead class="btn-success">
                                                <tr>
                                                    <th style="text-align:center">Naviera</th>
                                                    <th style="text-align:center">Vencimiento</th>
                                                    <th style="text-align:center">Pais</th>
                                                    <th style="text-align:center">Destino</th>
                                                    <th style="text-align:center">Entrega</th>
                                                    <th style="text-align:center">BL</th>
                                                    <th style="text-align:center">C20</th>
                                                    <th style="text-align:center">C40</th>
                                                    <th style="text-align:center">GD20</th>
                                                    <th style="text-align:center">GD40</th>
                                                </tr>
                                            </thead>
                                            <tbody style="background: white">
                                                @if(count($tarifas) > 0) 
                                                    @foreach ($tarifas as $d)
                                                        <tr style=@if($d->vencida == 'V') "background: #ffec82"  @endif>
                                                            <td align="center">{{ $d->naviera }} </td>
                                                            <td align="center">{{ $d->vigencia }}</td>
                                                            <td align="center">{{ $d->nombre_pais }}</td>
                                                            <td align="center">{{ $d->nombre_destino }}</td>
                                                            <td align="center">{{ $d->lugar_entrega }}</td>
                                                            <td align="right">{{ $d->valor_emision_bl }}</td>
                                                            <td align="right">{{ number_format($d->c20,2) }}</td>
                                                            <td align="right">{{ number_format($d->c40,2) }}</td>
                                                            <td align="right">{{ number_format( $d->gd20,2) }}</td>
                                                            <td align="right">{{ number_format($d->gd40,2) }}</td>
                                                        </tr>
                                                    @endforeach
                                                @else
                                                    <tr>
                                                        <td colspan = "8">No hay registro !!</td>
                                                    </tr>
                                                @endif 
                                            </tbody>
                                        </table>
                                    </div>
                                    <center>
                                            @if ($tarifas != null)
                                                {{ $tarifas->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