@extends('base')
@section('content')
    @include('partials.step_navigation')

    <div class="form-row">
        <div class="form-group col-md-2">
            <label for="date_debut"><b>Début :</b></label>
            <input type="date" class="form-control" style="color:black !important" id="date_debut" value="{{$dates['debut']}}">
        </div>
        <div class="form-group col-md-2">
            <label for="date_fin"><b>Fin :</b></label>
            <input type="date" class="form-control" style="color:black !important" id="date_fin" value="{{$dates['fin']}}">
        </div>
        <div class="form-group col-md-3">
            <label for="activite"><b>Activité :</b></label>
            <select name="activite" id="activite" class="form-control">
                @foreach($activites as $activite)
                    <option value="{{$activite->id_activite}}">{{$activite->activite_libelle}}</option>
                @endforeach
            </select>
        </div>
        <div class="form-group col-md-3">
            <label for="centrale"><b>Centrale :</b></label>
            <select name="centrale" id="centrale" class="form-control">
                <option value="0">Toutes</option>
            </select>
        </div>
        <div class="form-group col-md-2">
            <label for="ventilation"><b>Ventilation :</b></label>
            <select name="ventilation" id="ventilation" class="form-control">
                <option value="9">Toutes</option>
                <option value="0">Ventilation 1</option>
                <option value="1">Ventilation 2</option>
            </select>
        </div>
    </div>

    <div class="card mb-3">
        <div class="card-header"><i class="fas fa-chart-area"></i></div>
        <div class="card-body" id="card-body_myAreaChart">
            <canvas id="myAreaChart" width="100%" height="30"></canvas>
        </div>
        <div class="card-footer small text-muted" id="mise_a_jour_graph1"></div>
    </div>

    <div class="card mb-3">
        <div class="card-header"><i class="fas fa-chart-bar"></i></div>
        <div class="card-body" id="card-body_chart_centrale">
            <canvas id="chart_centrale" width="100%" height="30"></canvas>
        </div>
        <div class="card-footer small text-muted" id="mise_a_jour_graph4"></div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <div class="card mb-3">
                <div class="card-header"><i class="fas fa-chart-bar"></i></div>
                <div class="card-body" id="card-body_myBarChart">
                    <canvas id="myBarChart" width="100%" height="50"></canvas>
                </div>
                <div class="card-footer small text-muted" id="mise_a_jour_graph2"></div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card mb-3">
                <div class="card-header"><i class="fas fa-chart-pie"></i></div>
                <div class="card-body" id="card-body_myPieChart">
                    <canvas id="myPieChart" width="100%" height="100"></canvas>
                </div>
                <div class="card-footer small text-muted" id="mise_a_jour_graph3"></div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            Chart.defaults.global.defaultFontFamily = '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
            Chart.defaults.global.defaultFontColor = '#292b2c';

            var text = "TABLEAU DE BORD - SMART CENTRAL";
            $('title').text(text);

            function filtres() {
                return {
                    activite: $("#activite").val(),
                    centrale_id: $("#centrale").val(),
                    ventilation: $("#ventilation").val(),
                    date_debut: $("#date_debut").val(),
                    date_fin: $("#date_fin").val(),
                };
            }

            function chercher_centrale() {
                $.get('{{route('dashboard.cherche_centrale')}}', { activite_id: $("#activite").val() }, function(centrales) {
                    var options = '<option value="0">Toutes</option>';
                    centrales.forEach(function(centrale) {
                        options += '<option value="' + centrale.id_centrale + '">' + centrale.centrale_code + ' -> ' + centrale.centrale_nom + '</option>';
                    });
                    $("#centrale").html(options);
                }, 'json');
            }

            function graph1() {
                $.get('{{route('dashboard.graph1')}}', filtres(), function(retour) {
                    $("#mise_a_jour_graph1").html("Mis à jour " + retour.date);
                    $("#card-body_myAreaChart").html('<canvas id="myAreaChart" width="100%" height="30"></canvas>');
                    new Chart($("#myAreaChart"), {
                        type: 'line',
                        data: {
                            labels: retour.labels,
                            datasets: [{
                                label: "Quantité",
                                lineTension: 0.3,
                                backgroundColor: "rgba(2,117,216,0.2)",
                                borderColor: "rgba(2,117,216,1)",
                                pointRadius: 5,
                                pointBackgroundColor: "rgba(2,117,216,1)",
                                pointBorderColor: "rgba(255,255,255,0.8)",
                                pointHoverRadius: 5,
                                pointHoverBackgroundColor: "rgba(2,117,216,1)",
                                pointHitRadius: 50,
                                pointBorderWidth: 2,
                                data: retour.data,
                            }, {
                                label: "Moyenne glissante",
                                lineTension: 0.3,
                                fill: false,
                                borderColor: "rgba(255,128,0,1)",
                                borderDash: [5, 5],
                                pointRadius: 3,
                                pointBackgroundColor: "rgba(255,128,0,1)",
                                pointBorderColor: "rgba(255,255,255,0.8)",
                                pointHoverRadius: 4,
                                pointHoverBackgroundColor: "rgba(255,128,0,1)",
                                pointHitRadius: 50,
                                pointBorderWidth: 2,
                                data: retour.data_moyenne,
                            }],
                        },
                        options: {
                            scales: {
                                xAxes: [{ gridLines: { display: false }, ticks: { maxTicksLimit: 7 } }],
                                yAxes: [{ ticks: { min: 0, maxTicksLimit: 5 }, gridLines: { color: "rgba(0, 0, 0, .125)" } }],
                            },
                            legend: { display: true },
                        },
                    });
                }, 'json');
            }

            function graph2() {
                $.get('{{route('dashboard.graph2')}}', filtres(), function(retour) {
                    $("#mise_a_jour_graph2").html("Mis à jour " + retour.date);
                    $("#card-body_myBarChart").html('<canvas id="myBarChart" width="100%" height="50"></canvas>');
                    new Chart($("#myBarChart"), {
                        type: 'bar',
                        data: {
                            labels: retour.labels,
                            datasets: [
                                { label: "A-1 M3", backgroundColor: "#cef1fa", borderColor: "#cef1fa", data: retour.data_anne_moin_un },
                                { label: "M3", backgroundColor: "rgba(2,117,216,1)", borderColor: "rgba(2,117,216,1)", data: retour.data },
                            ],
                        },
                        options: {
                            scales: {
                                xAxes: [{ gridLines: { display: false }, ticks: { maxTicksLimit: 6 } }],
                                yAxes: [{ ticks: { min: 0, maxTicksLimit: 5 }, gridLines: { display: true } }],
                            },
                            legend: { display: true },
                        },
                    });
                }, 'json');
            }

            function graph3() {
                $.get('{{route('dashboard.graph3')}}', filtres(), function(retour) {
                    $("#mise_a_jour_graph3").html("Mis à jour " + retour.date);
                    $("#card-body_myPieChart").html('<canvas id="myPieChart" width="100%" height="100"></canvas>');
                    new Chart($("#myPieChart"), {
                        type: 'pie',
                        data: {
                            labels: retour.nom_centrale,
                            datasets: [{ data: retour.data_centrale, backgroundColor: retour.couleur_centrale }],
                        },
                    });
                }, 'json');
            }

            function graph4() {
                $.get('{{route('dashboard.graph4')}}', filtres(), function(retour) {
                    $("#mise_a_jour_graph4").html("Mis à jour " + retour.date);
                    $("#card-body_chart_centrale").html('<canvas id="chart_centrale" width="100%" height="30"></canvas>');
                    new Chart($("#chart_centrale"), {
                        type: 'horizontalBar',
                        data: {
                            labels: retour.nom_centrale,
                            datasets: [{
                                axis: 'x',
                                label: 'M3',
                                data: retour.data_centrale,
                                fill: false,
                                backgroundColor: retour.couleur_centrale,
                                borderColor: retour.couleur_centrale,
                                borderWidth: 1,
                            }],
                        },
                        options: {
                            indexAxis: "y",
                            legend: { display: false },
                            scales: { xAxes: [{ ticks: { min: 0, maxTicksLimit: 5 }, gridLines: { display: true } }] },
                        },
                    });
                }, 'json');
            }

            function rafraichir_graphiques() {
                graph1();
                graph2();
                graph3();
                graph4();
            }

            chercher_centrale();
            rafraichir_graphiques();

            $("#activite").change(function(e) {
                e.preventDefault();
                chercher_centrale();
                setTimeout(rafraichir_graphiques, 500);
            });
            $("#centrale, #ventilation").change(function(e) {
                e.preventDefault();
                rafraichir_graphiques();
            });
            $("#date_debut, #date_fin").change(function(e) {
                e.preventDefault();
                var dateDebut = new Date($("#date_debut").val());
                var dateFin = new Date($("#date_fin").val());
                if (dateDebut instanceof Date && !isNaN(dateDebut) && dateFin instanceof Date && !isNaN(dateFin) && dateDebut <= dateFin) {
                    graph1();
                }
            });

            setInterval(rafraichir_graphiques, 900000);
        });
    </script>
@endsection