let paymentMethodCtx = document.getElementById('paymentMethodChart').getContext('2d');

let paymentMethodLabels = paymentMethod.map(payment => {
    switch (payment.payment_method) {
        case '1':
            return 'Tunai';
        case '2':
            return 'Qris';
        case '3':
            return 'Lainnya';
        default:
            return 'Unknown';
    }
});

let paymentMethodData = paymentMethod.map(paymentMethod => paymentMethod.total_amount);

let paymentMethodBackgroundColors = paymentMethodData.map(() => getRandomColor());
let paymentMethodBorderColors = paymentMethodBackgroundColors.map(color => color.replace('0.2', '1'));

let paymentMethodChart = new Chart(paymentMethodCtx, {
    type: 'doughnut',
    data: {
        labels: paymentMethodLabels,
        datasets: [{
            label: 'Jumlah Transaksi',
            data: paymentMethodData,
            backgroundColor: paymentMethodBackgroundColors,
            borderColor: paymentMethodBorderColors,
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'top',
            },
            tooltip: {
                callbacks: {
                    label: function (tooltipItem) {
                        let rupiahFormat = new Intl.NumberFormat('id-ID', {
                            style: 'currency',
                            currency: 'IDR',
                            maximumFractionDigits: 0,
                            useGrouping: true
                        }).format(tooltipItem.raw);

                        return tooltipItem.label + ': ' + rupiahFormat.replace('Rp ', 'Rp').replace(/\s/g, '');
                    }
                }
            }
        }
    }
});