        <div class="card">
            <div class="card-body">
                <div class="row mb-3">
                  <div class="col-md-6">
                    <h4 class="card-title">Monthly Staff Payout</h4>
                  </div>
                  <div class="col-md-6">
                    <form method="get" class="d-flex justify-content-end align-items-center">
                      <label class="me-2 mb-0 text-nowrap">Filter Year:</label>
                      <select id="salaryYear" name="salary_year" class="form-control me-2" onchange="this.form.submit()">
                        <?php for ($y = date('Y'); $y >= 2020; $y--): ?>
                          <option value="<?= $y ?>" <?= ($salary_year == $y) ? 'selected' : '' ?>><?= $y ?></option>
                        <?php endfor; ?>
                      </select>
                    </form>
                  </div>
                </div>

                    <canvas id="salaryChart" width="1000" height="450"></canvas>
            </div>
        </div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const salaryLabels = <?= json_encode($monthLabels); ?>;
const advanceData = <?= json_encode($advanceData); ?>;
const loanData = <?= json_encode($loanData); ?>;
const salaryData = <?= json_encode($salaryData); ?>;

const ctx = document.getElementById('salaryChart').getContext('2d');
new Chart(ctx, {
    type: 'bar',
    data: {
        labels: salaryLabels,
        datasets: [
            {
                label: 'Advance',
                data: advanceData,
                backgroundColor: '#e74c3c',
                stack: 'Staff'
            },
            {
                label: 'Loan',
                data: loanData,
                backgroundColor: '#3498db',
                stack: 'Staff'
            },
            {
                label: 'Salary',
                data: salaryData,
                backgroundColor: '#1abc9c',
                stack: 'Staff'
            }
        ]
    },
    options: {
        responsive: true,
        plugins: {
            title: {
                display: false,
                text: 'Monthly Staff Withdrawals - <?= $salary_year ?>'
            },
            tooltip: {
                mode: 'index',
                intersect: false,
                callbacks: {
                    footer: function(tooltipItems) {
                        let total = 0;
                        tooltipItems.forEach(function(item) {
                            total += item.raw;
                        });
                        return 'Total: Rs. ' + total.toLocaleString();
                    }
                }
            }
        },
        scales: {
            x: {
                stacked: true
            },
            y: {
                stacked: true,
                beginAtZero: true,
                ticks: {
                    callback: function(value) {
                        return 'Rs. ' + value.toLocaleString();
                    }
                }
            }
        }
    }
});
</script>