<h1 class="mb-5">{{$name}}</h1>
@if($verif)
    <x-noData/>
@else
    <canvas style="max-width: 1000px; max-height: 700px" id="Répartition_des_marchés"></canvas>
    <x-saveAsPdf :canvasId="'Répartition_des_marchés'" :pdfName="'Répartition des marchés'"/>


    <script>

        const renderMarketByAmountChart = () => {

            const markets = {!! json_encode($marketsByAmount ?? '') !!};

            const sortedMarket = markets.sort((a, b) => b.montant_ht - a.montant_ht);
            const totalAmount = markets.reduce((partialSum, market) => partialSum + Math.round(market.montant_ht), 0);
            const filteredMarket = sortedMarket.filter((markets) => (Math.round(markets.montant_ht) / totalAmount) * 100 > 2);

            const labels = filteredMarket.flatMap(market => market.libelle_marche);
            const amounts = filteredMarket.flatMap(market => Math.round(market.montant_ht));

            const percentageMarketInTotalMarket = amounts.map((amount) => (Math.round(amount) / totalAmount) * 100);

            const marketByAmountChart = document.getElementById('Répartition_des_marchés');

            return new Chart(marketByAmountChart, {
                type: 'pie',
                data: {
                    labels: labels,
                    datasets: [{
                        label: '',
                        data: percentageMarketInTotalMarket,
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(255, 206, 86, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(153, 102, 255, 0.2)',
                            'rgba(255, 159, 64, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(255, 206, 86, 0.2)',
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(255, 206, 86, 0.2)',
                            'rgba(153, 102, 255, 0.2)',
                            'rgba(255, 159, 64, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(255, 206, 86, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(153, 102, 255, 0.2)'
                        ],
                        borderColor: [
                            'rgba(255, 99, 132, 1)',
                            'rgba(255, 99, 132, 1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(255, 159, 64, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(255, 99, 132, 1)',
                            'rgba(255, 159, 64, 1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(255, 99, 132, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    plugins: {
                        datalabels: {
                            formatter: (value) => {
                                if (value < 1) {
                                    return '';
                                }
                                return Math.round(value) + " %";
                            },
                            font: {
                                size: 18,
                            }
                        },
                        legend: {
                            position: 'left',
                            maxWidth: 600,
                            labels: {
                                padding: 20,
                            }
                        },
                        tooltip: {
                            callbacks: {
                                label: function (context) {
                                    const label = context.label || '';
                                    const value = Math.round(context.parsed);
                                    return label + " : " + value + " %" + " - Montant HT : " + amounts[labels.indexOf(label)].toLocaleString('fr-FR') + " €";

                                }
                            }
                        },
                    },
                }
            });
        }

        document.addEventListener('DOMContentLoaded', function () {
            renderMarketByAmountChart();
        });

    </script>
@endif
