@extends('complementos.Dashboard')
@section('contenido')
@section('titulo')
    Grafica
@endsection
<div class="container">
    <div class="container fluid">
        <div class="row mt-1">
            <div class="col-lg-3 col-md-6 col-sm-6">
                <button class="btn btn-primary" onclick="actualizar()">
                <strong><div id="worked">30:00</div><i class="icon-repeat"></i></strong>
            </div>
        </div>
        <div class="row mt-1 text-center">
        <div class="col-md-3">
            <div class="card">
            <div class="card card-header" style="background-image: linear-gradient(#af0202, rgb(165, 0, 0) 6%, rgb(158, 3, 3)); color: #fff;">
                <strong>Mejor mes Enero 2020: <label id="mes"></label></strong>
            </div>
            <div class="card body">
            <svg id="g2" class="ml-5" style="width:120px; height:149px;"></svg>
            </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card" style="width:270px; height:100px;">
                <div class="card card-header" style="background-image: linear-gradient(#0230af, rgb(0, 99, 165) 6%, rgb(3, 70, 158)); color: #fff;">
                    <strong>Operaciones 2020</strong>
                </div>
                <div class="card body">
                <svg id="g3" class="text-aling-center"></svg>
                </div>
                </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                                        <table class="table table-responsive text-center">
                            <thead><strong style="background-image: linear-gradient(#1faf02, rgb(38, 165, 0) 6%, rgb(47, 158, 3)); color: #fff;" >Top 3 choferes</strong></thead>
                            <tr>
                                <th style="font-size:12px;">Top</th>
                                <th style="font-size:12px;">Chofer</th>
                                <th style="font-size:12px;">Viajes</th>
                                <th style="font-size:12px;">Rendimiento</th>
                            </tr>
                            @foreach ($choferesTotal as $var)
                                <tr>
                                    <td style="font-size:12px;">{{$i}}</td>
                                    <td style="font-size:12px;">@if($var->Chofer == "PERMISIONARIO") SUBCONTRATADO @ELSE {{$var->Chofer}} @endif</td>
                                    <td style="font-size:12px;">{{$var->Viajes}}</td>
                                    <td style="font-size:12px;">{{round($var->RENDIMIENTO,2)}}</td>
                                </tr>
                                                            @endforeach
                        </table>
            </div>
        </div>
    </div>
    <div class="row">
        <figure class="highcharts-figure">
            <div class="col-md-8">
            <div id="container"></div></div>
        </figure>
        <div class="col-md-4 mt-3">
            <div class="card">
                <div class="card card-header" style="background-image: linear-gradient(#af2d02, rgb(165, 74, 0) 6%, rgb(255, 74, 2)); color: #fff; position">
                    <strong>Top 3 Camiones: </strong>
                </div>
                <div class="card body">
                                        <table class="table table-responsive text-center">
                        <tr>
                            <th style="font-size:12px;">Top</th>
                            <th style="font-size:12px;">Camion</th>
                            <th style="font-size:12px;">Viajes</th>
                            <th style="font-size:12px;">Rendimiento</th>
                        </tr>
                        @foreach ($camionesTotalDCU as $var)
                            <tr>
                                <td style="font-size:12px;">{{$i}}</td>
                                <td style="font-size:12px;">@if($var->cNumeroGuia == "PERMISIONARIO") SUBCONTRATADO @else {{$var->cNumeroGuia}} @endif</td>
                                <td style="font-size:12px;">{{$var->Viajes}}</td>
                                <td style="font-size:12px;">{{round($var->RENDIMIENTO,2)}}</td>
                            </tr>
                                                    @endforeach
                    </table>
                </div>
                </div>
        </div>
    </div>
    </div>
</div>
<!--JavaScript-->
<input type="hidden" id="enero" value="{{ $E }}">
<input type="hidden" id="febrero" value="{{ $F }}">
<input type="hidden" id="marzo" value="{{ $M }}">
<input type="hidden" id="abril" value="{{ $A }}">
<input type="hidden" id="mayo" value="{{ $Ma }}">
<input type="hidden" id="junio" value="{{ $J }}">
<input type="hidden" id="julio" value="{{ $Ju }}">
<input type="hidden" id="agosto" value="{{ $Ag }}">
<input type="hidden" id="septiembre" value="{{ $S }}">
<input type="hidden" id="octubre" value="{{ $O }}">
<input type="hidden" id="noviembre" value="{{ $N }}">
<input type="hidden" id="diciembre" value="{{ $D }}">
<input type="hidden" id="mess" value="{{ $mess }}">

                    <script src="{{ asset('js/raphael-2.1.4.min.js')}}"></script>
                    <script src="{{ asset('js/justgage.js')}}"></script>
                    <script>
                    var totalM = document.getElementById("totalMes").value;
                    var Por = ({{$E + $F + $M + $A + $Ma + $J + $Ju + $Ag + $S + $O + $N + $D}}) / totalM;
                    document.addEventListener("DOMContentLoaded", function(event) {
                    var g2;
                
                    var g2 = new JustGage({
                        id: "g2",
                        value: Por,
                        symbol: '%',
                        max: 100,
                        label: totalM,
                        shadowOpacity: 1,
                        shadowSize: 5,
                        pointer: true,
                        pointer: true,
                        gaugeWidthScale: 0.6,
                        customSectors: [{
                        color: '#FF0000',
                        lo: 50,
                        hi: 100
                        }, {
                        color: '#00FF00',
                        lo: 0,
                        hi: 50
                        }],
                        shadowVerticalOffset: 10
                    });
                        setInterval(function() {
                        g2.refresh((Por));
                
                        }, 2500);
                    });
                    </script>
                                            <script src="{{ asset('js/raphael-2.1.4.min.js')}}"></script>
                                            <script src="{{ asset('js/justgage.js')}}"></script>
                                            <script>
                                            document.addEventListener("DOMContentLoaded", function(event) {
                                            var g3;
                                        
                                            var g3 = new JustGage({
                                                id: "g3",
                                                value: {{$E + $F + $M + $A + $Ma + $J + $Ju + $Ag + $S + $O + $N + $D}},
                                                max: 100,
                                                label: "",
                                                levelColors: [
                                                    "#00FFF6",
                                                    "#FF00FC",
                                                    "#1200FF"
                                                ]
                                            });
                                                setInterval(function() {
                                                g3.refresh(({{$E + $F + $M + $A + $Ma + $J + $Ju + $Ag + $S + $O + $N + $D}}));
                                        
                                                }, 2500);
                                            });
                                            </script>
                                            
<!--Grafica comparativa de operaciones 2019 - 2020-->

<style>
            .cerrar:hover{background-color: #000; color: #fff;}
            #container {
                height: 310px;
                width: 400%;
                top: 40%;
            }

            .highcharts-figure, .highcharts-data-table table {
                
                min-width: 310px; 
                max-width: 800px;
                margin: 1em auto;
            }

            .highcharts-data-table table {
                font-family: Verdana, sans-serif;
                border-collapse: collapse;
                border: 1px solid #EBEBEB;
                margin: 10px auto;
                text-align: center;
                width: 100%;
                max-width: 500px;
            }
            .highcharts-data-table caption {
                padding: 1em 0;
                font-size: 1.2em;
                color: #555;
            }
            .highcharts-data-table th {
                font-weight: 600;
                padding: 0.5em;
            }
            .highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
                padding: 0.5em;
            }
            .highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
                background: #f8f8f8;
            }
            .highcharts-data-table tr:hover {
                background: #f1f7ff;
            }

</style>


        <script >
           Highcharts.chart('container', {

title: {
    text: 'Total de Operaciones 2019 - 2020'
},

subtitle: {
    text: 'Movil Jaguar Especializado'
},

yAxis: {
    title: {
        text: 'Numero de Operaciones'
    }
},
legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle'
},

xAxis: {
        categories: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre']
    },

series: [ {
    name: '2020',
    data: [{{$E}}, {{$F}}, {{$M}}, {{$A}}, {{$Ma}}, {{$J}}, {{$Ju}}, {{$Ag}}, {{$S}}, {{$O}}, {{$N}}]
}, {
    name: '2019',
    data: [{{$E2}}, {{$F2}}, {{$M2}}, {{$A2}}, {{$Ma2}}, {{$J2}}, {{$Ju2}}, {{$Ag2}}, {{$S2}}, {{$O2}}, {{$N2}}]
}],

responsive: {
    rules: [{
        condition: {
            maxWidth: 500
        },
        chartOptions: {
            legend: {
                layout: 'horizontal',
                align: 'center',
                verticalAlign: 'bottom'
            }
        }
    }]
}

});
        </script>
<!--fin-->
<script src="{{ asset('js/time.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/Lin2019.js') }}" ></script>
<script type="text/javascript" src="{{asset('js/popper.min.js')}}"></script>
<script type="text/javascript" src="{{asset('js/jquery-3.4.1.min.js')}}"></script>
<script type="text/javascript" src="{{asset('js/bootstrap.min.js')}}"></script>

        @endsection