@extends('layouts.app')


@section('calculateCriticalCase', 'Programmazione')

@section('content')

<div class="wrapper wrapper-content animated fadeInRight">
    
    
    <input type='hidden' id="percForGraph" value='{{$percForGraph}}'>

    <div class="row equal">
        <div class="col-md-12">
            <div class="ibox">

                <div class="col-md-6">
                    <div class="ibox-content">

                        <h2>Sbilanciamento zona {{$zona}} nel mese di {{ucfirst($meseIta)}}</h2>
                        <div class="clients-list">
                            <div class="full-height-scroll" style="overflow: hidden; width: auto; height: 100%;">
                                <div class="table-responsive">

                                    <table class="table table-striped table-hover" >

                                        <thead>

                                            <tr>
                                                <th>Ora</th>
                                                <th> Sbilanciamento fisico</th>
                                                <th> Totale misure</th>
                                                <th> % sbil fisico su tot misure</th>
                                                <th> Dettaglio</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($reportSbilZona as $hour => $sbil)

                                            <tr> 

                                                <td>{{$hour}}</td>
                                                <td>{{number_format($sbil,3)}}</td>
                                                <td>{{number_format($reportTotZona[$hour],3)}}</td>
                                                <td>{{str_replace('-','',number_format($sbil/$reportTotZona[$hour]*100,2))}}%</td>
                                                <td><a class="btn btn-default m-r-sm font-bold no-margins" href="/programmazione/calculateDettPercentageSbil?month={{$mese}}&zona={{$zona}}&ora={{$hour}}" style="background-color: #1bb394;color: white;"><i class="fa fa-info"></i></a></td>

                                            </tr>
                                            </a>
                                            @endforeach
                                        </tbody>

                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="ibox-content">

                        <h2>Sbilanciamento zona {{$zona}} nel mese di {{ucfirst($meseIta)}} nell'ora {{$ora}}</h2>
                        <div class="clients-list">
                            <div class="full-height-scroll" style="overflow: hidden; width: auto; height: 100%;">
                                <div class="table-responsive">

                                    <table class="table table-striped table-hover" >

                                        <thead>

                                            <tr>
                                                <th>Giorno</th>
                                                <th> Sbilanciamento fisico</th>
                                                <th> Totale misure</th>
                                                <th> % sbil fisico su tot misure</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($reportSbilZonaOra as $day => $sbil)

                                            <tr> 

                                                <td>{{$day+1}}</td>
                                                <td>{{number_format($sbil['sbil_fisico'],3)}}</td>
                                                <td>{{number_format($reportTotZonaOra[$day]['tot_misure'],3)}}</td>
                                                <td>{{str_replace('-','',number_format($sbil['sbil_fisico']/$reportTotZonaOra[$day]['tot_misure']*100,2))}}%</td>
                                                
                                            </tr>
                                            </a>
                                            @endforeach
                                        </tbody>

                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <br>
    <br>
    <div class="row equal">

        <div class="col-md-8">
            <div class="ibox-content">
                <h2>Grafico percentuale sbilanciamento nella zona {{$zona}} nel mese di {{ucfirst($meseIta)}} nell'ora {{$ora}}</h2>
                <canvas id="popChart"></canvas>
            </div>
        </div>
    </div>

</div>




@endsection
@section('scripts')
<script>


    var table = $('table').DataTable({pageLength: 8
        , bSort: true,
        "scrollY": "500px",
        "orderCellsTop": true,
        "fixedHeader": false,
        "bFilter": true,
        "lengthMenu": [[8, 10, 25, 100, 150, -1], [8, 10, 25, 100, 150, 'Tutte']],
        dom: 'Blfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf'
        ]}
    ).search('');

var popCanvas = $("#popChart");
    var popCanvas = document.getElementById("popChart");
    var popCanvas = document.getElementById("popChart").getContext("2d");
    var barChart = new Chart(popCanvas, {
        type: 'bar',
        data: {
            labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31],
            datasets: [{
                    label: 'Percentuale',
                    data: JSON.parse(document.getElementById("percForGraph").value),
                    backgroundColor: [
                        'rgba(26, 179, 148, 0.6)',
                        'rgba(26, 179, 148, 0.6)',
                        'rgba(26, 179, 148, 0.6)',
                        'rgba(26, 179, 148, 0.6)',
                        'rgba(26, 179, 148, 0.6)',
                        'rgba(26, 179, 148, 0.6)',
                        'rgba(26, 179, 148, 0.6)',
                        'rgba(26, 179, 148, 0.6)',
                        'rgba(26, 179, 148, 0.6)',
                        'rgba(26, 179, 148, 0.6)',
                        'rgba(26, 179, 148, 0.6)',
                        'rgba(26, 179, 148, 0.6)',
                        'rgba(26, 179, 148, 0.6)',
                        'rgba(26, 179, 148, 0.6)',
                        'rgba(26, 179, 148, 0.6)',
                        'rgba(26, 179, 148, 0.6)',
                        'rgba(26, 179, 148, 0.6)',
                        'rgba(26, 179, 148, 0.6)',
                        'rgba(26, 179, 148, 0.6)',
                        'rgba(26, 179, 148, 0.6)',
                        'rgba(26, 179, 148, 0.6)',
                        'rgba(26, 179, 148, 0.6)',
                        'rgba(26, 179, 148, 0.6)',
                        'rgba(26, 179, 148, 0.6)',
                        'rgba(26, 179, 148, 0.6)',
                        'rgba(26, 179, 148, 0.6)',
                        'rgba(26, 179, 148, 0.6)',
                        'rgba(26, 179, 148, 0.6)',
                        'rgba(26, 179, 148, 0.6)',
                        'rgba(26, 179, 148, 0.6)',
                        'rgba(26, 179, 148, 0.6)'
                    ]
                }]
        },
        options: {
            responsive: true,
            scales: {
                yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
            }
        }
    });

</script>
@endsection