@php
    $type = '';
    if ($data['type'] == 'budget_estimation_summary'){
          $type = 'Budget Estimation Summary';
    }
    if ($data['type'] == 'budget_monitoring_bar_chart'){
           $type = 'Budget Monitoring Summary';
           $fiscal_year_id = $data['calendar_id'];
    }
@endphp
<div class="card" style="height: 95%; width: 100%; text-align: center">
    <div class="card-content">
        <div class="card-body">
            <div class="row">
                <div class="col-md-12">
                    <div class="pie-chart-wrapper">
                        <!-- Use a dynamic ID for the canvas -->
                        <canvas id="fas-graph-data-{{ $fiscal_year_id }}" class="d-flex justify-content-center"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // Function to render the chart with a unique ID
    function renderChart(fiscalYearId) {
        // Get the unique canvas ID
        let canvasId = `#fas-graph-data-${fiscalYearId}`;

        // Destroy the existing chart instance if it exists
        if (window[`employeeDetailsBarChart_${fiscalYearId}`]) {
            window[`employeeDetailsBarChart_${fiscalYearId}`].destroy();
        }

        let data = {
            datasets: [{
                label: '{{$data['year']}}',
                backgroundColor: {!! json_encode($data['colors']) !!},
                data: {!! json_encode($data['data']) !!}
            }],
            labels: {!! json_encode($data['label']) !!}
        };

        let myoption = {
            tooltips: {
                enabled: true
            },
            hover: {
                animationDuration: 1
            },
            // onClick: function (evt, i) {
            //     if (i.length > 0) {
            //         let activePoint = window[`employeeDetailsBarChart_${fiscalYearId}`].getElementAtEvent(evt)[0];
            //         let data = activePoint._chart.data;
            //         let datasetIndex = activePoint._datasetIndex;
            //         let label = data.datasets[datasetIndex].label;
            //         let value = data.datasets[datasetIndex].data[activePoint._index];
            //         e = i[0];
            //         let x_value = this.data.labels[e._index];
            //         window.pop_show(`/cdb/department-wise-employee-count/${x_value}/${label}`);
            //     }
            // },
            animation: {
                duration: 1,
                onComplete: function () {
                    let chartInstance = this.chart,
                        ctx = chartInstance.ctx;
                    ctx.textAlign = 'center';
                    ctx.fillStyle = "rgba(0, 0, 0, 1)";
                    ctx.textBaseline = 'bottom';
                    this.data.datasets.forEach(function (dataset, i) {
                        let meta = chartInstance.controller.getDatasetMeta(i);
                        meta.data.forEach(function (bar, index) {
                            let data = dataset.data[index];
                            ctx.fillText(data, bar._model.x, bar._model.y - 5);
                        });
                    });
                }
            },
            scales: {
                xAxes: [{
                    barThickness: 20,
                    maxBarThickness: 40,
                    categoryPercentage: 0.3,
                    barPercentage: 0.5
                }]
            }
        };

        let ctx = $(canvasId);
        // Use a unique variable for each chart instance
        window[`employeeDetailsBarChart_${fiscalYearId}`] = new Chart(ctx, {
            type: 'bar',
            data: data,
            options: myoption,
        });
    }

    // Example call to render the chart
    // Pass the unique fiscal year ID or any identifier needed
    renderChart({{ $fiscal_year_id }});
</script>