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

    <div class="alert alert-success text-center">Plan de charge centrale</div>

    <div class="form-row">
        <div class="form-group col-md-3">
            <label for="plan_charge_centrale_id"><b>Centrale :</b></label>
            <select class="form-control" id="plan_charge_centrale_id">
                <option value="0">-- Choisir une centrale --</option>
                @foreach($centrales as $centrale)
                    <option value="{{ $centrale->id_centrale }}">{{ $centrale->centrale_code }} -> {{ $centrale->centrale_nom }}</option>
                @endforeach
            </select>
        </div>
        <div class="form-group col-md-2">
            <label for="plan_charge_date"><b>Date :</b></label>
            <input type="date" class="form-control" style="color:black !important" id="plan_charge_date" value="{{ $date_defaut }}">
        </div>
    </div>

    <div class="card mb-3">
        <div class="card-header"><i class="fas fa-chart-bar"></i> Charge horaire prévue / réalisée</div>
        <div class="card-body" style="height: 65vh; position: relative">
            <canvas id="chart_plan_charge_centrale"></canvas>
        </div>
        <div class="card-footer small text-muted" id="mise_a_jour_plan_charge_centrale">Choisissez une centrale et une date.</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';

            // Mode d'interaction personnalisé : au survol de Livré ou Sous centrale (stack 'realise'),
            // renvoie les DEUX éléments (un par dataset) à cet index plutôt qu'un seul, pour que le tooltip
            // affiche chaque valeur avec sa propre couleur native. Sur les autres barres/courbes,
            // comportement inchangé (un seul élément, le plus proche).
            Chart.Interaction.modes.groupeRealise = function(chart, e, options) {
                var proche = Chart.Interaction.modes.nearest(chart, e, {intersect: true, axis: 'xy'});
                if (!proche.length) {
                    return proche;
                }

                var dataset = chart.data.datasets[proche[0]._datasetIndex];
                if (!dataset || dataset.stack !== 'realise') {
                    return proche;
                }

                var index = proche[0]._index;
                var elements = [];
                chart.data.datasets.forEach(function(ds, datasetIndex) {
                    if (ds.stack === 'realise' && chart.isDatasetVisible(datasetIndex)) {
                        var element = chart.getDatasetMeta(datasetIndex).data[index];
                        if (element) {
                            elements.push(element);
                        }
                    }
                });

                return elements;
            };

            var chart_plan_charge = null;

            function chargerGraphique() {
                var centrale_id = $('#plan_charge_centrale_id').val();

                if (!centrale_id || centrale_id == 0) {
                    $('#mise_a_jour_plan_charge_centrale').html('Choisissez une centrale et une date.');
                    if (chart_plan_charge) {
                        chart_plan_charge.destroy();
                        chart_plan_charge = null;
                    }
                    return;
                }

                $.get('{{ route('plan_charge_centrale.data') }}', {
                    centrale_id: centrale_id,
                    date: $('#plan_charge_date').val(),
                }, function(retour) {
                    $('#mise_a_jour_plan_charge_centrale').html('Mis à jour — ' + (retour.centrale_nom ?? '') + ' — ' + retour.date);

                    var objectifNombres = (retour.data_objectif || []).map(function(v) { return v === null || v === undefined ? null : Number(v); });

                    var datasets = [
                        {label: 'Prévu', data: retour.data_prevu, backgroundColor: '#2196F3', borderColor: '#2196F3', borderWidth: 1, stack: 'prevu', yAxisID: 'y_quantite'},
                        {label: 'Livré', data: retour.data_realise_livre, backgroundColor: '#4CAF50', borderColor: '#4CAF50', borderWidth: 1, stack: 'realise', yAxisID: 'y_quantite'},
                        {label: 'Sous centrale', data: retour.data_realise_sous_centrale, backgroundColor: '#A5D6A7', borderColor: '#A5D6A7', borderWidth: 1, stack: 'realise', yAxisID: 'y_quantite'},
                    ];

                    if (retour.capacite_horaire) {
                        datasets.push({
                            type: 'line',
                            label: 'Capacité / heure',
                            data: retour.labels.map(function() { return Number(retour.capacite_horaire); }),
                            fill: false,
                            borderColor: '#B71C1C',
                            borderDash: [6, 4],
                            borderWidth: 2,
                            pointRadius: 0,
                            yAxisID: 'y_lignes',
                        });
                    }

                    if (objectifNombres.some(function(v) { return v !== null; })) {
                        datasets.push({
                            type: 'line',
                            label: 'Objectif horaire',
                            data: objectifNombres,
                            fill: false,
                            borderColor: '#FF9800',
                            backgroundColor: '#FF9800',
                            borderWidth: 2,
                            pointRadius: 3,
                            spanGaps: true,
                            yAxisID: 'y_lignes',
                        });
                    }

                    if (chart_plan_charge) {
                        chart_plan_charge.destroy();
                    }

                    // Chart.js 2.7 additionne entre elles toutes les courbes d'un même axe Y dès que cet axe
                    // est "stacked" (voir calculatePointY dans Chart.js) : les courbes de référence (capacité,
                    // objectif) doivent donc vivre sur un second axe non empilé, calé sur le même 0 → même max
                    // que l'axe des barres, pour rester à la bonne hauteur visuelle.
                    var maxQuantiteBarres = Math.max(
                        0,
                        Math.max.apply(null, retour.data_prevu.map(Number)),
                        Math.max.apply(null, retour.labels.map(function(_, i) {
                            return Number(retour.data_realise_livre[i] || 0) + Number(retour.data_realise_sous_centrale[i] || 0);
                        }))
                    );
                    var maxLignes = Math.max(
                        0,
                        retour.capacite_horaire ? Number(retour.capacite_horaire) : 0,
                        Math.max.apply(null, objectifNombres.map(function(v) { return v === null ? 0 : v; }))
                    );
                    var maxAxeY = Math.ceil(Math.max(maxQuantiteBarres, maxLignes) * 1.1) || 10;

                    chart_plan_charge = new Chart($('#chart_plan_charge_centrale'), {
                        type: 'bar',
                        data: {
                            labels: retour.labels,
                            datasets: datasets,
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            tooltips: {
                                enabled: true,
                                mode: 'groupeRealise',
                                intersect: true,
                                callbacks: {
                                    label: function(tooltipItem, data) {
                                        var dataset = data.datasets[tooltipItem.datasetIndex];
                                        return dataset.label + ' : ' + tooltipItem.yLabel;
                                    },
                                    footer: function(tooltipItems) {
                                        var item = tooltipItems[0];
                                        var dataset = datasets[item.datasetIndex];
                                        if (!dataset || dataset.stack !== 'realise') {
                                            return '';
                                        }
                                        var idx = item.index;
                                        var total = Number(retour.data_realise_livre[idx] || 0) + Number(retour.data_realise_sous_centrale[idx] || 0);
                                        return 'Total réalisé : ' + total.toFixed(2);
                                    },
                                },
                            },
                            hover: {mode: 'groupeRealise', intersect: true, animationDuration: 0},
                            legend: {display: true},
                            scales: {
                                xAxes: [{stacked: true, offset: true, scaleLabel: {display: true, labelString: 'Heure'}}],
                                yAxes: [
                                    {id: 'y_quantite', stacked: true, ticks: {beginAtZero: true, max: maxAxeY}, scaleLabel: {display: true, labelString: 'Quantité'}},
                                    {id: 'y_lignes', display: false, stacked: false, ticks: {beginAtZero: true, max: maxAxeY}},
                                ],
                            },
                        },
                    });
                }, 'json');
            }

            $('#plan_charge_centrale_id, #plan_charge_date').change(function(e) {
                e.preventDefault();
                chargerGraphique();
            });
        });
    </script>
@endsection