<h1 class="mb-5">{{$name}}</h1>
@if($verif)
    <x-noData/>
@else
    @php
        $id = 'Top_10_fournisseurs_en_MONTANT_HT' . uniqid();
        $functionName = 'render' . $id;
    @endphp
    <canvas width="600" id={{$id}}></canvas>
    <x-saveAsPdf :canvasId="$id" :pdfName="'Top 10 fournisseurs en MONTANT HT'"/>
    <script>
        let {{ $functionName }} = (chartid) => {

            let top10Suppliers = {!! json_encode($top10suppliers ?? '') !!};

            top10Suppliers.sort((a, b) => parseFloat(a.montant_ht) - parseFloat(b.montant_ht));

            let labelsTop10Suppliers = top10Suppliers.flatMap(supplier => supplier.tiers_nom);
            let valuesTop10Suppliers = top10Suppliers.flatMap(supplier => supplier.montant_ht);
            let top10SuppliersChart = document.getElementById(chartid);

            return new Chart(top10SuppliersChart, {
                type: 'bar',
                data: {
                    labels: labelsTop10Suppliers,
                    datasets: [{
                        label: "Montant HT",
                        data: valuesTop10Suppliers,
                        backgroundColor: 'rgba(0, 123, 255, 1)',
                        borderColor: 'rgba(0, 123, 255, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    indexAxis: 'y',
                    scales: {
                        x: {
                            beginAtZero: true,
                        },
                    },
                    layout: {
                        padding: {
                            right: 70
                        }
                    },
                    plugins: {
                        datalabels: {
                            formatter: (value) => {
                                return value.toLocaleString('fr-FR') + " €";
                            },
                            font: {
                                size: 14,
                                weight: 'bold',
                            },
                            color: 'rgba(0, 123, 255, 1)',
                            anchor: 'end',
                            align: 'end'
                        },
                        tooltip: {
                            callbacks: {
                                label: function (context) {
                                    var label = context.dataset.label || '';
                                    var value = context.parsed.x;
                                    if (context.parsed.y !== null) {
                                        label += ': ' + value.toLocaleString('fr-FR') + " €";
                                    }
                                    return label;
                                }
                            }
                        },
                        legend: {
                            display: false,
                        },
                    },
                }
            });
        }

        document.addEventListener("DOMContentLoaded", function () {
            {{$functionName}}('{{$id}}');
        });
    </script>
@endif
