{{--
Creado por Ivan Salazar
Fecha: 23/07/2018/
--}}
@extends('layouts/master')
@section('header')
    <style> .dataTables_filter {
            width: 50%;
            float: right;
            text-align: right;
        }</style>

@endsection
@section('content')

    <div class="row">
        <div class="col-sm-13 col-xs-13 col-md-13 col-md-offset">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title"><span class="glyphicon glyphicon-th-list"></span> REPORTE DE LAS RECOLECTAS:</h3>
                </div>

                <div class="panel-body" >
                    <div class="center">
                        <label class="text-dark"><b> LISTA DE RECOLECTAS @if($status == 0) REALIZADAS @elseif($status == '1') NPK @elseif($status == '2') NPKZ @endif EN {{$title}}</b></label>
                        <br>
                        <label for="codciudad" class="text-dark">
                            <b>DESDE: {{$desde}} HASTA: {{$hasta}}</b><br>
                        </label>
                    </div>

                    <div class="panel-body">
                        <div class="table-responsive">
                            <table style="margin-top: 1%;" class="table table-striped table-bordered table-hover" id="datos">
                                <thead>
                                <tr>
                                    <th class="text-center">#</th>
                                    <th class="text-center">Guía N°</th>
                                    <th class="text-center">Recolecta N°</th>
                                    <th class="text-center">Ruta</th>
                                    <th class="text-center">Fecha</th>
                                    <th class="text-center">Cliente</th>
                                    <th class="text-center">Direccion</th>
                                    <th class="text-center" style="width: 5%;">Codigo Cliente</th>
                                    <th class="text-center">Oficina</th>
                                    <th class="text-center">Tipo Recolecta</th>
                                    <th class="text-center">Estatus</th>
                                    @if ($status == 0)
                                        <th class="text-center" style="font-size: x-small; padding: 0px;"><p style="font-size: small;">Recibido</p> [DOC]-[MERC]-[VAL] </th>
                                    @elseif ($status == 1)
                                        <th class="text-center">Causal</th>
                                        <th class="text-center">Fecha Causal</th>
                                    @elseif ($status == 2)
                                        <th class="text-center">Causal</th>
                                    @endif
                                </tr>
                                </thead>
                                <tfoot></tfoot>
                                <tbody class="text-center">

                                @php ($i = 1)
                                @foreach($listadoRecolectas['entidadRespuesta'] as $recolecta)


                                    <tr>
                                        <td>{{$i}}</td>
                                        <td>{{ strtoupper($recolecta['codguia']) }}</td>
                                        <td>{{ strtoupper($recolecta['codrecolecta']) }}</td>
                                        <td>{{ strtoupper($recolecta['ruta']) }}</td>
                                        <td>{{ strtoupper($recolecta['fecha']) }}</td>
                                        <td>{{ strtoupper($recolecta['cliente']) }}</td>
                                        <td>{{ strtoupper($recolecta['direccion']) }}</td>
                                        <td>{{ strtoupper($recolecta['codcliente']) }}</td>
                                        <td>{{ strtoupper($recolecta['oficina']) }}</td>
                                        <td>{{ strtoupper($recolecta['tiporecolecta']) }}</td>
                                        <td>{{ strtoupper($recolecta['sigla']) }}</td>
                                        @if ($status == 0)
                                            <td style="font-size: x-small;">[{{ strtoupper($recolecta['cantdoc']) }}] - [{{ strtoupper($recolecta['cantmerc']) }}] - [{{ strtoupper($recolecta['cantval']) }}]</td>
                                        @elseif ($status == 1)
                                            <td>{{ strtoupper($recolecta['causal']) }}</td>
                                            <td>{{ strtoupper($recolecta['fechatracking']) }}</td>
                                        @elseif ($status == 2)
                                            <td>{{ strtoupper($recolecta['causal']) }}</td>
                                        @endif

                                    </tr>
                                    @php($i++)
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <a href="{{ route('reportes') }}" class="btn btn-info">Volver
                        <span class="glyphicon glyphicon-circle-arrow-left"></span>
                    </a>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('script')
    <script type="text/javascript" src="{!! asset('/js/jquery-ui.min.js') !!}"></script>
    <script type="text/javascript" src="{!! URL::asset('/js/datatables2.min.js')  !!}"></script>
    <script type="text/javascript" src="{!! URL::asset('/js/jszip.min.js')  !!}"></script>
    <!--<script type="text/javascript" src="{!! URL::asset('/js/dataTables.buttons.js')  !!}"></script>-->
    <script type="text/javascript" src="{!! URL::asset('/js/Chart.js')  !!}"></script>
    <!-- <script type="text/javascript" src="{!! URL::asset('/js/Chart.js/Chart.min.js')  !!}"></script>-->

    <script>

          var pendientes = document.getElementById("pendientes").innerHTML;
          var PK = document.getElementById("PK").innerHTML;
          var NPK = document.getElementById("NPK").innerHTML;
          var total = document.getElementById("total").innerHTML;

          new Chart ( document . getElementById ( "pie-chart" ),
              { type : 'pie' , data :
                      { labels : [ "PENDIENTES " ,"ESTATUS PK " , "ESTATUS NPK "],
                          datasets : [{ label : "Population (millions)" ,
                              backgroundColor : [ "#428bca" , "#5cb85c" , "#d9534f"],
                              data : [ (pendientes*100)/total , (PK*100)/total , (NPK*100)/total] }] },
                  options : {
                      title : { display : true , text : 'EFECTIVIDAD DE RECOLECTAS' },
                  }

              });
      </script>
    <script>

        $(document).ready(function () {

            var t = $('#datos').DataTable({
                columnDefs: [{
                    "searchable": false,
                    "orderable": false,
                    "targets": 0
                }],
                order: [[0, 'asc']],
                dom: 'Bfrtip',
                buttons : [ {
                    extend : 'excel',
                    text: 'Exportar a Excel',
                    footer: true,
                    title: 'Listado de Recolectas'

                } ],
                pageLength: 10,
                language: {
                    "processing": "Procesando...",
                    "lengthMenu": "Mostrar _MENU_ registros",
                    "zeroRecords": "No se encontraron resultados",
                    "emptyTable": "Ningún dato disponible en esta tabla",
                    "info": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
                    "infoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
                    "infoFiltered": "(filtrado de un total de _MAX_ registros)",
                    "infoPostFix": "",
                    "search": "Búsqueda:",
                    "url": "",
                    "infoThousands": ",",
                    "loadingRecords": "Cargando...",
                    "paginate": {
                        "first": "Primero",
                        "last": "Último",
                        "next": "Siguiente",
                        "previous": "Anterior"
                    }
                }

            });

            t.on('order.dt', function () {
                t.column(0, {search: 'applied', order: 'applied'}).nodes();
            }).draw();
        });

    </script>

@endsection