@extends('layouts/main')
@section('header')

@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> RECOLECTAS POR EFECTIVIDAD EN {{$title}}</b></label>
                        <br>
                        <label for="codciudad" class="text-dark">
                            <b>DESDE: {{$desde}} HASTA: {{$hasta}}</b><br>
                        </label>
                    </div>


                    <div class="table-responsive">
                        <table class="table table-striped table-bordered table-hover" id="datos">
                            <thead>
                            <tr>
                                <th class="text-center"></th>
                                <th colspan="2" class="text-center">Pendientes</th>
                                <th colspan="2" class="text-center">Estatus PK </th>
                                <th colspan="2" class="text-center">Estatus NPK</th>
                                <th class="text-center">Efectividad</th>
                                <th class="text-center">Incumplimiento</th>
                                <th class="text-center">Realizada</th>
                                <th class="text-center">Pendiente</th>

                            </tr>
                            <tr>
                                <th class="text-center">Generadas</th>
                                <th class="text-center">Cantidad</th>
                                <th class="text-center">% </th>
                                <th class="text-center">Cantidad</th>
                                <th class="text-center">% </th>
                                <th class="text-center">Cantidad</th>
                                <th class="text-center">% </th>
                                <th class="text-center">% </th>
                                <th class="text-center">% </th>
                                <th class="text-center">% </th>
                                <th class="text-center">% </th>
                            </tr>
                            </thead>
                            <tfoot></tfoot>
                            <tbody class="text-center">




                            <tr>

                                <td><p id="total">{{$cantidadRecolectasCiudad['entidadRespuesta'][4] }}</p></td>
                                <td><p id="pendientes">{{$cantidadRecolectasCiudad['entidadRespuesta'][2] }}</p></td>
                                <td>{{number_format((($cantidadRecolectasCiudad['entidadRespuesta'][2]) * 100) / $cantidadRecolectasCiudad['entidadRespuesta'][4], 2, '.', ',') }}</td>
                                <td><p id="PK">{{$cantidadRecolectasCiudad['entidadRespuesta'][1] }}</p></td>
                                <td>{{number_format((($cantidadRecolectasCiudad['entidadRespuesta'][1]) * 100) / $cantidadRecolectasCiudad['entidadRespuesta'][4], 2, '.', ',') }}</td>
                                <td><p id="NPK">{{$cantidadRecolectasCiudad['entidadRespuesta'][0] }}</p></td>
                                <td>{{number_format((($cantidadRecolectasCiudad['entidadRespuesta'][0]) * 100) / $cantidadRecolectasCiudad['entidadRespuesta'][4], 2, '.', ',') }}</td>
                                <td>{{number_format(100 -(($cantidadRecolectasCiudad['entidadRespuesta'][0]) * 100) / $cantidadRecolectasCiudad['entidadRespuesta'][4], 2, '.', ',') }}</td>
                                <td>{{number_format((($cantidadRecolectasCiudad['entidadRespuesta'][0]) * 100) / $cantidadRecolectasCiudad['entidadRespuesta'][4], 2, '.', ',')}}</td>
                                <td>{{number_format((($cantidadRecolectasCiudad['entidadRespuesta'][1]) * 100) / $cantidadRecolectasCiudad['entidadRespuesta'][4], 2, '.', ',') }}</td>
                                <td>{{number_format((($cantidadRecolectasCiudad['entidadRespuesta'][2]) * 100) / $cantidadRecolectasCiudad['entidadRespuesta'][4], 2, '.', ',') }}</td>


                            </tr>
                            </tbody>
                        </table>
                        <div class="col-sm-8 col-xs-8 col-md-8 col-md-offset-3">
                            <div class="col-md-8">
                                <canvas id="pie-chart"></canvas>
                            </div>
                        </div>
                    </div>
                    <a href="{{ route('recolecta.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/datatables.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>
@endsection