@extends('layouts.boxes')

@section('content')

        
<br>
        
    <div class="card bg-dark text-light">
        <div class="card-body">
            <div class="card-title">
                Ubicacion:{{ $box['ubicacionact'] }}        
            </div>
            <p class="card-text">Modelo: {{ $box['modelo'] }}</p>
            <p class="card-text">Serie: {{ $box['serie'] }}</p>
            <p class="card-text">Host: {{ $box['host'] }}</p>
            <p class="card-text">Ultimo reporte: {{ $bw->last()['puredate'] }}</p>
        </div>
    </div>
    
    @isset($success)
    <div class="alert alert-primary alert-dismissible fade show" role="alert">
        <strong>{{ $success }}</strong> 
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endisset

    @isset($error)
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <strong>{{ $error }}</strong> 
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endisset
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
    {{-- <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script> --}}
    
    <div class="container">
        <h3 class="card-text text-center">Reporte del dia en curso</h3><br>
    </div>
    <div class="container d-flex justify-content-center ">    
        <canvas id="myChart" style="width:100%;max-width:800px"></canvas>
    </div>
    
    <div class="container">
        <h3 class="card-text text-center">Reporte de la semana en curso</h3><br>
    </div>
    <div class="container text-center d-flex justify-content-center">
        <canvas id="myChartweek" style="width:100%;max-width:800px"></canvas>
    </div>

    <div class="container">
        <h3 class="card-text text-center">Reporte del mes en curso</h3><br>
    </div>
    <div class="container text-center d-flex justify-content-center">
        <canvas id="myChartmonth" style="width:100%;max-width:800px"></canvas>
    </div>
        
    <script>
        var bw = @json($bw);
        var labels1 = [];
        var datasets1 = [];
        var labels2 = [];

        function padWithLeadingZeros(num, totalLength) {
            return String(num).padStart(totalLength, '0');
        }
        
        bw.data.forEach(element => {
            var fec = new Date(Date.parse(element.puredate));
            var hora = fec.getHours();
            var min = padWithLeadingZeros(fec.getMinutes(),2);

            //console.log(element);
            labels1.push(element.bw);
            labels2.push(hora + ':' + min);
            datasets1.push(element.purebw);
        });
        new Chart("myChart", {
            type: "line",
            data: {
                labels: labels2,
                datasets: [{ 
                data: datasets1,
                borderColor: "black",
                fill: true,
                tension: 0.2
                }]
            },
            options: {
                legend: {display: false},
                scales: {
                    yAxes: [{
                        ticks: {
                        callback: (val) => {
                            if (!val) return 0;
                            const units = ['', 'KB', 'MB', 'GB'];
                            const k = 1024;
                            const magnitude = Math.floor(Math.log(val) / Math.log(k));
                            return (
                            ' ' + (val / Math.pow(k, magnitude)).toFixed(2) + ' ' + units[magnitude]
                            );
                        },
                        },
                    }],
                },
                tooltips: {
                    callbacks: {
                        label: function(tooltipItem, data) {
                            let val = data['datasets'][0]['data'][tooltipItem['index']];
                            if (!val) return 0;
                            const units = ['', 'KB', 'MB', 'GB'];
                            const k = 1024;
                            const magnitude = Math.floor(Math.log(val) / Math.log(k));
                            return (
                                ' ' + (val / Math.pow(k, magnitude)).toFixed(2) + ' ' + units[magnitude]
                            );
                        }
                    }
                }
            }
        });

	var bw = @json($bww);
        var labels1 = [];
        var datasets1 = [];
        var labels2 = [];

        bw.data.forEach(element => {
            var fec = new Date(Date.parse(element.puredate));
            var dia = fec.getDate();
            var diasem = fec.getDay();
            var mes = fec.getMonth();
	    var meses = ['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dic'];
	    var dias = ['Dom','Lun','Mar','Mie','Jue','Vie','Sab'];
	    var diasem = dias[diasem];
	    var mesn = meses[mes];
            var hora = fec.getHours();
            var min = padWithLeadingZeros(fec.getMinutes(),2);

            console.log(element);
            labels1.push(element.bw);
            labels2.push(diasem + '-' + dia);
            datasets1.push(element.purebw);
        });
        new Chart("myChartweek", {
            type: "line",
            data: {
                labels: labels2,
                datasets: [{ 
                data: datasets1,
                borderColor: "black",
                fill: true,
                tension: 0.2
                }]
            },
            options: {
                legend: {display: false},
                scales: {
                    yAxes: [{
                        ticks: {
                        callback: (val) => {
                            if (!val) return 0;
                            const units = ['', 'KB', 'MB', 'GB'];
                            const k = 1024;
                            const magnitude = Math.floor(Math.log(val) / Math.log(k));
                            return (
                            ' ' + (val / Math.pow(k, magnitude)).toFixed(2) + ' ' + units[magnitude]
                            );
                        },
                        },
                    }],
                },
                tooltips: {
                    callbacks: {
                        label: function(tooltipItem, data) {
                            let val = data['datasets'][0]['data'][tooltipItem['index']];
                            if (!val) return 0;
                            const units = ['', 'KB', 'MB', 'GB'];
                            const k = 1024;
                            const magnitude = Math.floor(Math.log(val) / Math.log(k));
                            return (
                                ' ' + (val / Math.pow(k, magnitude)).toFixed(2) + ' ' + units[magnitude]
                            );
                        }
                    }
                }
            },
        });

	var bw = @json($bwm);
        var labels1 = [];
        var datasets1 = [];
        var labels2 = [];

        bw.data.forEach(element => {
            var fec = new Date(Date.parse(element.puredate));
            var dia = fec.getDate();
            var mes = fec.getMonth();
	    var meses = ['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dic'];
	    var mesn = meses[mes];
            var hora = fec.getHours();
            var min = padWithLeadingZeros(fec.getMinutes(),2);

            console.log(element);
            labels1.push(element.bw);
            labels2.push(mesn + '-' + dia);
            datasets1.push(element.purebw);
        });

        new Chart("myChartmonth", {
            type: "line",
            data: {
                labels: labels2,
                datasets: [{ 
                data: datasets1,
                borderColor: "black",
                fill: true,
                tension: 0.2
                }]
            },
            options: {
                legend: {display: false},
                scales: {
                    yAxes: [{
                        ticks: {
                        callback: (val) => {
                            if (!val) return 0;
                            const units = ['', 'KB', 'MB', 'GB'];
                            const k = 1024;
                            const magnitude = Math.floor(Math.log(val) / Math.log(k));
                            return (
                            ' ' + (val / Math.pow(k, magnitude)).toFixed(2) + ' ' + units[magnitude]
                            );
                        },
                        },
                    }],
                },
                tooltips: {
                    callbacks: {
                        label: function(tooltipItem, data) {
                            let val = data['datasets'][0]['data'][tooltipItem['index']];
                            if (!val) return 0;
                            const units = ['', 'KB', 'MB', 'GB'];
                            const k = 1024;
                            const magnitude = Math.floor(Math.log(val) / Math.log(k));
                            return (
                                ' ' + (val / Math.pow(k, magnitude)).toFixed(2) + ' ' + units[magnitude]
                            );
                        }
                    }
                }
            }
        });
    </script>
        
@endsection