@extends('base')
@section('content')
    <style>
        html, body { background: #f4f6f3; }
        /* Titre de la feuille comme KPI finance : sans fond, vert, souligné */
        .titre-commande { margin: 10px 0 18px; padding-bottom: 10px; border-bottom: 3px solid #28a745; }
        .titre-commande h2 { margin: 0; font-size: 1.5rem; font-weight: 700; color: #28a745; }
    </style>
    <div class="titre-commande">
        <h2>Synthèse des commandes</h2>
    </div>

    <div class="form-row">
        <div class="form-group col-md-2">
            <label for="date_synthese"><b>Date :</b></label>
            <input type="date" class="form-control" style="color:black !important" id="date_synthese" value="{{ $date_debut }}">
        </div>
    </div>

    <div class="card mb-3">
        <div class="card-header"><i class="fas fa-chart-area"></i> Livré / Reste par client (cliquer sur une barre pour voir le détail par chantier)</div>
        <div class="card-body" id="card-body_chart_commande_synthese" style="height: 70vh;overflow-y: auto">
            <canvas id="chart_commande_synthese" width="100%" height="30"></canvas>
        </div>
        <div class="card-footer small text-muted" id="mise_a_jour_commande_synthese">Mis à jour ...</div>
    </div>

    <div class="card mb-3" id="afficher_tableau_chantier_commande_synthese" style="display:none">
        <div class="card-header" id="titre_tableau_chantier_commande_synthese">Détail par chantier</div>
        <div class="table-responsive">
            <table class="table table-striped table-hover table-bordered" id="table_commande_synthese" style="width:100%">
                <thead style="background-color:#28a745; color:white">
                <tr>
                    <th scope="col" class="text-center">CLIENT</th>
                    <th scope="col" class="text-center">CHANTIER</th>
                    <th scope="col" class="text-center">QTE COMMANDEE</th>
                    <th scope="col" class="text-center">QTE LIVREE</th>
                    <th scope="col" class="text-center">QTE RESTANTE</th>
                </tr>
                </thead>
            </table>
        </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 client_id_selectionne = 0;
            var client_ids = [];
            var chart_synthese = null;

            var table = $('#table_commande_synthese').DataTable({
                scrollX: true,
                scrollCollapse: true,
                autoWidth: true,
                paging: false,
                searching: false,
                ajax: {
                    url: '{{ route('commande_laravel.synthese_chantier') }}',
                    type: 'GET',
                    data: function() {
                        return {
                            date_commande: $('#date_synthese').val(),
                            client_id: client_id_selectionne,
                        };
                    },
                },
                columnDefs: [
                    {className: 'text-center align-middle', targets: '_all'},
                ],
            });

            function chargerGraphique() {
                $.get('{{ route('commande_laravel.synthese_client') }}', { date_debut: $('#date_synthese').val() }, function(retour) {
                    client_ids = retour.client_id;

                    $('#mise_a_jour_commande_synthese').html('Mis à jour ' + retour.date);

                    var canvas = document.getElementById('chart_commande_synthese');
                    canvas.height = 5 * retour.client.length;

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

                    chart_synthese = new Chart($('#chart_commande_synthese'), {
                        type: 'horizontalBar',
                        data: {
                            labels: retour.client,
                            datasets: [
                                {axis: 'x', label: 'Livré M3', data: retour.data_client_livre, backgroundColor: '#4CAF50', borderColor: '#4CAF50', borderWidth: 1},
                                {axis: 'x', label: 'Reste M3', data: retour.data_client_restante, backgroundColor: '#B0BEC5', borderColor: '#B0BEC5', borderWidth: 1},
                            ],
                        },
                        options: {
                            tooltips: {enabled: true},
                            hover: {animationDuration: 0},
                            legend: {display: true},
                            scales: {
                                xAxes: [{stacked: true}],
                                yAxes: [{stacked: true, ticks: {fontFamily: "'Open Sans Bold', sans-serif", fontSize: 11}}],
                            },
                            onClick: function(evt, elements) {
                                if (elements.length > 0) {
                                    var index = elements[0]._index;
                                    client_id_selectionne = client_ids[index];
                                    $('#titre_tableau_chantier_commande_synthese').text('Détail par chantier — ' + retour.client[index]);
                                    $('#afficher_tableau_chantier_commande_synthese').show();
                                    table.ajax.reload(null, false);
                                }
                            },
                        },
                    });
                }, 'json');
            }

            $('#date_synthese').change(function(e) {
                e.preventDefault();
                client_id_selectionne = 0;
                $('#afficher_tableau_chantier_commande_synthese').hide();
                chargerGraphique();
            });

            chargerGraphique();
        });
    </script>
@endsection