@extends('layouts.app')

@section('content')


<div class="container">
    <h2 class="text-center mt-4">Répartition des Données</h2>

    <div class="row justify-content-center">
        <!-- 🔹 Graphique 1 : Répartition des Achats par Utilisateur -->
        <div class="col-xl-4 col-lg-12 col-md-4 col-sm-12 col-12">
            <div class="card">
                <h5 class="card-header">Achats par Utilisateur</h5>
                <div class="card-body">
                    @if(empty($chartLabels) || empty($chartData))
                        <p class="text-center text-danger">Aucune donnée disponible.</p>
                    @else
                        <canvas id="userPurchasesChart"></canvas>
                        <div class="chart-widget-list">
                            @foreach($chartLabels as $index => $label)
                                <p>
                                    <span class="fa-xs text-primary mr-1 legend-title"><i class="fa fa-fw fa-square-full"></i></span>
                                    <span class="legend-text">{{ $label }}</span>
                                    <span class="float-right">{{ $chartData[$index] }}</span>
                                </p>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>
        </div>
        <!-- 🔹 Graphique 4 : Total Sale -->
        <div class="col-xl-4 col-lg-12 col-md-4 col-sm-12 col-12">
            <div class="card">
                <h5 class="card-header">Total Sale</h5>
                <div class="card-body">
                    @if(empty($totalSaleLabels) || empty($totalSaleData))
                        <p class="text-center text-danger">Aucune donnée disponible.</p>
                    @else
                        <canvas id="totalSaleChart"></canvas>
                        <div class="chart-widget-list">
                            @foreach($totalSaleLabels as $index => $label)
                                <p>
                                    <span class="fa-xs text-primary mr-1 legend-title"><i class="fa fa-fw fa-square-full"></i></span>
                                    <span class="legend-text">{{ $label }}</span>
                                    <span class="float-right">{{ $totalSaleData[$index] }}</span>
                                </p>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- 🔹 Graphique 2 : Nombre de numéros de série par modèle -->
        <div class="col-xl-4 col-lg-12 col-md-4 col-sm-12 col-12">
            <div class="card">
                <h5 class="card-header">Nombre de Numéros de Série par Modèle</h5>
                <div class="card-body">
                    @if(empty($chartModelsLabels) || empty($chartModelsData))
                        <p class="text-center text-danger">Aucune donnée disponible.</p>
                    @else
                        <canvas id="serialsByModelChart"></canvas>
                        <div class="chart-widget-list">
                            @foreach($chartModelsLabels as $index => $label)
                                <p>
                                    <span class="fa-xs text-secondary mr-1 legend-title"><i class="fa fa-fw fa-square-full"></i></span>
                                    <span class="legend-text">{{ $label }}</span>
                                    <span class="float-right">{{ $chartModelsData[$index] }}</span>
                                </p>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- 🔹 Graphique 3 : Nombre de numéros de série par état -->
        <div class="col-xl-4 col-lg-12 col-md-4 col-sm-12 col-12">
            <div class="card">
                <h5 class="card-header">Nombre de Numéros de Série par État</h5>
                <div class="card-body">
                    @if(empty($chartStatesLabels) || empty($chartStatesData))
                        <p class="text-center text-danger">Aucune donnée disponible.</p>
                    @else
                        <canvas id="serialsByStateChart"></canvas>
                        <div class="chart-widget-list">
                            @foreach($chartStatesLabels as $index => $label)
                                <p>
                                    <span class="fa-xs text-info mr-1 legend-title"><i class="fa fa-fw fa-square-full"></i></span>
                                    <span class="legend-text">{{ $label }}</span>
                                    <span class="float-right">{{ $chartStatesData[$index] }}</span>
                                </p>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>




<script>

document.addEventListener("DOMContentLoaded", function () {
 


        function renderChart(chartId, labels, data) {
            var canvas = document.getElementById(chartId);
            var ctx = canvas.getContext("2d");

            if (!ctx || labels.length === 0 || data.length === 0) {
                console.warn(`⚠️ Pas de données pour ${chartId}, graphique non généré.`);
                return;
            }

            if (canvas.chartInstance) {
                canvas.chartInstance.destroy();
            }

            canvas.chartInstance = new Chart(ctx, {
                type: "pie",
                data: {
                    labels: labels,
                    datasets: [{
                        data: data,
                        backgroundColor: [
                            "rgba(255, 99, 132, 0.6)",
                            "rgba(54, 162, 235, 0.6)",
                            "rgba(255, 206, 86, 0.6)",
                            "rgba(75, 192, 192, 0.6)",
                            "rgba(153, 102, 255, 0.6)",
                            "rgba(255, 159, 64, 0.6)",
                            "rgba(201, 203, 207, 0.6)",
                            "rgba(126, 87, 194, 0.6)",
                            "rgba(52, 152, 219, 0.6)"
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false
                }
            });
        }

var chartLabels = @json($chartLabels ?? []);
var chartData = @json($chartData ?? []);
var chartModelsLabels = @json($chartModelsLabels ?? []);
var chartModelsData = @json($chartModelsData ?? []);
var chartStatesLabels = @json($chartStatesLabels ?? []);
var chartStatesData = @json($chartStatesData ?? []);



    renderChart("userPurchasesChart", chartLabels, chartData);
    renderChart("serialsByModelChart", chartModelsLabels, chartModelsData);
    renderChart("serialsByStateChart", chartStatesLabels, chartStatesData);
    });
</script>
<script src="{{ asset('assets/vendor/charts/chart.js') }}"></script>
@endsection

<script>
document.addEventListener("DOMContentLoaded", function () {
    var totalSaleLabels = @json($totalSaleLabels ?? []);
    var totalSaleData = @json($totalSaleData ?? []);
    renderChart("totalSaleChart", totalSaleLabels, totalSaleData);
});
</script>