@extends('layouts.app')

@section('content')
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3  style="border-radius:25px;background-color:rgba(70,180,249,0.58);width: 30%;padding:25px;display: inline-block " class="text-center">
                            <b>DATI ANALISI ARIA</b>
                        </h3>
                        <h3  style="border-radius:25px;color: white;background-color:brown;opacity:0.5;width: 30%;margin-left:25px;padding:25px;display: inline-block"  class="text-center">
                            <b> TERRENO</b>
                        </h3>
                        <h3  style="border-radius:25px;color: white;background-color:brown;opacity:0.5;width: 30%;margin-left:25px;padding:25px;display: inline-block"  class="text-center">
                            <b>ANALISI DATI IN SERRA</b>
                        </h3>
                    </div>
                    <div class="card-body">
                        <div class="row justify-content-center">
                            <div class="col-md-8">

                                <div class="row justify-content-center">

                                    
                                    <div class="col-md-12">
                                        <div class="card">
                                            <div class="card-header">TEMPERATURA E UMIDITA ORE 0:00
                                            </div>

                                            <div class="card-body text-center">

                                                <select class="form-control text-center" id="grafico_tipo"
                                                        style="width: 50%;margin-left: auto;margin-right: auto">
                                                    <option value="temp" @if($tipo_grafico=="temp") selected @endif>MOSTRA PER MEDIA ORARIA</option>
                                                    <option value="temp_oraria" @if($tipo_grafico=="temp_oraria") selected @endif>MOSTRA PER MEDIA MINUTO</option>
                                                </select><br>
                                                @if (session('status'))
                                                    <div class="alert alert-success" role="alert">
                                                        {{ session('status') }}
                                                    </div>
                                                @endif

                                                <div class="chart-view">
                                                    <canvas id="{{$tipo_grafico}}"></canvas>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {{--<div class="col-md-6">--}}
                                    {{--<div class="card">--}}
                                    {{--<div class="card-header" >TEMPERATURA MEDIA ORARIA</div>--}}

                                    {{--<div class="card-body">--}}
                                    {{--@if (session('status'))--}}
                                    {{--<div class="alert alert-success" role="alert">--}}
                                    {{--{{ session('status') }}--}}
                                    {{--</div>--}}
                                    {{--@endif--}}

                                    {{--<div class="chart-view" ><canvas id="temp_oraria"></canvas></div>--}}
                                    {{--</div>--}}
                                    {{--</div>--}}
                                    {{--</div>--}}

                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="card">

                                    <div class="card-header" style="background-color:#99EDC3; "><b>Sensore 1 </b></div>
                                        <div class="card-body">
                                        <P>STATO SENSORE :<font style="color: darkgreen"><b>ONLINE</b></font></P>
                                        <p>TEMPERATURA RILEVATA: <b>{{$temperatura_sens}} C°</b><br>
                                            UMIDITA RILEVATA: <b>{{$umidita_sens}} %</b><br>
                                            ULTIMO CONTATTO: <b>{{$temperatura_ultimo_contatto}} </b></p>
                                        </div>

                                </div>
                                <br>
                                <div class="card">
                                    <div class="card-header" style="background-color:#99EDC3; "><b>Sensore 2 </b></div>
                                    <div class="card-body">
                                        <P>STATO SENSORE :<font style="color: darkgreen"><b>ONLINE</b></font></P>
                                        <p>TEMPERATURA RILEVATA: <b>{{$temperatura2}} C°</b><br>
                                            UMIDITA RILEVATA: <b>{{$umidita2}} %</b><br>
                                            ULTIMO CONTATTO: <b>{{$temperatura_ultimo_contatto}} </b></p>
                                    </div>
                                </div>
                                <br>
                                    <div class="card">
                                    <div class="card-header" style="background-color:#99EDC3; "><b>Sensore 3 </b></div>
                                    <div class="card-body">
                                        <P>STATO SENSORE :<font style="color: darkgreen"><b>ONLINE</b></font></P>
                                        <p>TEMPERATURA RILEVATA: <b>{{$temperatura3}} C°</b><br>
                                            UMIDITA RILEVATA: <b>{{$umidita3}} %</b><br>
                                            ULTIMO CONTATTO: <b>{{$temperatura_ultimo_contatto}} </b></p>
                                    </div>

                                <br>
                                    </div>
                        </div>
                    </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{--<div class="row justify-content-center" style="margin-top: 5%;">--}}
        {{--<div class="col-md-12">--}}
        {{--<div class="card">--}}
        {{--<div class="card-header" STYLE="background-color: #654321;color: white"><b>ANALISI TERRENO</b></div>--}}

        {{--<div class="card-body">--}}
        {{--@if (session('status'))--}}
        {{--<div class="alert alert-success" role="alert">--}}
        {{--{{ session('status') }}--}}
        {{--</div>--}}
        {{--@endif--}}

        {{--{{ __('You are logged in!') }}--}}
        {{--</div>--}}
        {{--</div>--}}
        {{--</div>--}}

        {{--</div>--}}
    </div>

@endsection


@section('myscript')
    <script>
        const actions = [
            {
                name: 'Randomize',
                handler(chart) {
                    chart.data.datasets.forEach(dataset => {
                        dataset.data = Utils.numbers({count: chart.data.labels.length, min: -100, max: 100});
                    });
                    chart.update();
                }
            },
            {
                name: 'Add Data',
                handler(chart) {
                    const data = chart.data;
                    if (data.datasets.length > 0) {
                        data.labels = Utils.months({count: data.labels.length + 1});

                        for (var index = 0; index < data.datasets.length; ++index) {
                            data.datasets[index].data.push(Utils.rand(-100, 100));
                        }

                        chart.update();
                    }
                }
            },
            {
                name: 'Remove Data',
                handler(chart) {
                    chart.data.labels.splice(-1, 1); // remove the label first

                    chart.data.datasets.forEach(dataset => {
                        dataset.data.pop();
                    });

                    chart.update();
                }
            }
        ];
        // </block:actions>

        // <block:getGradient:0>
        let width, height, gradient;

        // </block:getGradient>

        // <block:setup:2>
        const DATA_COUNT = 12;
        const NUMBER_CFG = {count: DATA_COUNT, min: -100, max: 100};
        const COLORS = [
            '#4dc9f6',
            '#f67019',
            '#f53794',
            '#537bc4',
            '#acc236',
            '#166a8f',
            '#00a950',
            '#58595b',
            '#8549ba'
        ];

        function color(index) {
            return COLORS[index % COLORS.length];
        }

        function transparentize(value, opacity) {
            var alpha = opacity === undefined ? 0.5 : 1 - opacity;
            return colorLib(value).alpha(alpha).rgbString();
        }

        const CHART_COLORS = {
            red: 'rgb(255, 99, 132)',
            orange: 'rgb(255, 159, 64)',
            yellow: 'rgb(255, 205, 86)',
            green: 'rgb(75, 192, 192)',
            blue: 'rgb(54, 162, 235)',
            purple: 'rgb(153, 102, 255)',
            grey: 'rgb(201, 203, 207)'
        };

        const NAMED_COLORS = [
            CHART_COLORS.red,
            CHART_COLORS.orange,
            CHART_COLORS.yellow,
            CHART_COLORS.green,
            CHART_COLORS.blue,
            CHART_COLORS.purple,
            CHART_COLORS.grey,
        ];

        function namedColor(index) {
            return NAMED_COLORS[index % NAMED_COLORS.length];
        }

        function getGradient(ctx, chartArea) {
            const chartWidth = chartArea.right - chartArea.left;
            const chartHeight = chartArea.bottom - chartArea.top;
            if (!gradient || width !== chartWidth || height !== chartHeight) {
                // Create the gradient because this is either the first render
                // or the size of the chart has changed
                width = chartWidth;
                height = chartHeight;
                gradient = ctx.createLinearGradient(0, chartArea.bottom, 0, chartArea.top);
                gradient.addColorStop(0, CHART_COLORS.blue);
                gradient.addColorStop(0.35, CHART_COLORS.yellow);
                gradient.addColorStop(0.60, CHART_COLORS.red);
            }

            return gradient;
        }

        function getGradient1(ctx, chartArea) {
            const chartWidth = chartArea.right - chartArea.left;
            const chartHeight = chartArea.bottom - chartArea.top;
            if (!gradient || width !== chartWidth || height !== chartHeight) {
                // Create the gradient because this is either the first render
                // or the size of the chart has changed
                width = chartWidth;
                height = chartHeight;
                gradient = ctx.createLinearGradient(0, chartArea.bottom, 0, chartArea.top);
                gradient.addColorStop(0, CHART_COLORS.blue);
                gradient.addColorStop(0.50, CHART_COLORS.yellow);
                gradient.addColorStop(1, CHART_COLORS.red);
            }

            return gradient;
        }

        function getGradient2(ctx, chartArea) {
            const chartWidth = chartArea.right - chartArea.left;
            const chartHeight = chartArea.bottom - chartArea.top;
            if (!gradient || width !== chartWidth || height !== chartHeight) {
                // Create the gradient because this is either the first render
                // or the size of the chart has changed
                width = chartWidth;
                height = chartHeight;
                gradient = ctx.createLinearGradient(0, chartArea.bottom, 0, chartArea.top);
                gradient.addColorStop(0, CHART_COLORS.red);
                gradient.addColorStop(0.5, CHART_COLORS.blue);
                gradient.addColorStop(1, CHART_COLORS.blue);
            }

            return gradient;
        }

        const MONTHS = ['' +
        @foreach($array_temp_ora as $ora)
                @if($ora<=9)
            '0{{$ora}}:00',
            @else
                '{{$ora}}:00',
            @endif

            @endforeach
        ];
        const MONTHS1 = ['' +
        @foreach($array_temp_ora_orario as $ora1)
            '{{$ora1}}',
            @endforeach
        ];

        function months(config) {
            var cfg = config || {};
            var count = cfg.count || 24;
            var section = cfg.section;
            var values = [];
            var i, value;

            for (i = 0; i < count; ++i) {
                value = MONTHS[Math.ceil(i) % 24];
                values.push(value.substring(0, section));
            }

            return values;
        }

        function months1(config) {
            var cfg = config || {};
            var count = cfg.count || 60;
            var section = cfg.section;
            var values = [];
            var i, value;

            for (i = 0; i < count; ++i) {
                if (MONTHS1[Math.ceil(i) % 60] <= 9) {
                    if (<= 9)
                    {
                        value = "0" + "" + ":0" + MONTHS1[Math.ceil(i) % 60];
                    }
                else
                    {
                        value = "" + ":0" + MONTHS1[Math.ceil(i) % 60];
                    }
                } else {
                    if (<= 9)
                    {
                        value = "0" + "" + ":" + MONTHS1[Math.ceil(i) % 60];
                    }
                else
                    {
                        value = "" + ":" + MONTHS1[Math.ceil(i) % 60];
                    }
                }

                values.push(value.substring(0, section));
            }

            return values;
        }

        const labels = months({count: {{$i}}});
        const labels1 = months1({count: {{$u}}});
        const data = {
            labels: labels,
            datasets: [
                {
                    label: 'TEMPERATURA MEDIA NEL GIORNO',
                    data: ['' +
                    @foreach($array_temp as $temp)
                        '{{$temp}}',
                        @endforeach
                    ],
                    borderColor: function (context) {
                        const chart = context.chart;
                        const {ctx, chartArea} = chart;

                        if (!chartArea) {
                            // This case happens on initia  l chart load
                            return;
                        }
                        return getGradient(ctx, chartArea);
                    },
                }, {
                    label: 'UMIDITA MEDIA NEL GIORNO',
                    data: ['' +
                    @foreach($umidita_media as $media)
                        '{{$media}}',
                        @endforeach
                    ],
                    borderColor: CHART_COLORS.blue,
                }
            ]
        };
        const data1 = {
            labels: labels1,
            datasets: [
                {
                    label: 'TEMPERATURA',
                    data: ['' +
                    @foreach($temperatura_media_oraria_array as $temp1)
                        '{{$temp1}}',
                        @endforeach
                    ],
                    borderColor: function (context) {
                        const chart = context.chart;
                        const {ctx, chartArea} = chart;

                        if (!chartArea) {
                            // This case happens on initia  l chart load
                            return;
                        }
                        return getGradient1(ctx, chartArea);
                    },
                }, {
                    label: 'UMIDITA',
                    data: ['' +
                    @foreach($umidita_media_oraria_array as $umidita1)
                        '{{$umidita1}}',
                        @endforeach
                    ],
                    borderColor:  CHART_COLORS.blue
                }
            ]
        };


        const config = {
            type: 'line',
            data: data,
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top',
                    },
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        min: 0,
                        max: 100,
                    }
                }

            },
        };
        // </block:config>

        var ctx1 = document.getElementById('temp');
        var myChart1 = new Chart(ctx1, {
            type: 'line',
            data: data,
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top',
                    },
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        min: 0,
                        max: 100,
                    }
                }
            },
        });
        var ctx2 = document.getElementById('temp_oraria');
        var myChart2 = new Chart(ctx2, {
            type: 'line',
            data: data1,
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top',
                    },
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        min: 0,
                        max: 90,
                    }
                }
            },
        });

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');


        $("#grafico_tipo").change(function () {
            $.ajax({
                type: 'POST',
                url: '/cambia_tipo_grafico',
                data: {_token: CSRF_TOKEN,tipo_grafico:$('#grafico_tipo :selected').val()},
                success: function (data) {
                    window.location.reload()
                }
            });
        });


    </script>
@endsection