<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>

// ======================================
// OVERVIEW CHART INSTANCES
// ======================================
let overviewDailyChart = null;
let overviewStatusChart = null;


// ======================================
// LOAD OVERVIEW CHARTS
// ======================================
function loadOverviewCharts() {

    let comp_id = $('#sel_co').val();

    $.ajax({
        url: 'query/chart_overview_data.php',
        method: 'GET',
        data: { comp_id: comp_id },
        dataType: 'json',

        success: function(data) {

            console.log(data);

            $("#dailyLoader1").hide();
            $("#statusLoader1").hide();

            renderOverviewDailyRevenue(data.daily);
            renderOverviewStatusChart(data.sales, data.target);
        }
    });
}


// ======================================
// OVERVIEW DAILY SALES CHART
// ======================================
function renderOverviewDailyRevenue(data) {

    if (overviewDailyChart) {
        overviewDailyChart.destroy();
    }

    const labels = data.map(r => formatDateShort(r.date));
    const values = data.map(r => Number(r.amount));

    const ctx = document.getElementById('dailyRevenueChart1');

    overviewDailyChart = new Chart(ctx, {
        type: 'line',

        data: {
            labels: labels,

            datasets: [{
                label: 'Sales',
                data: values,
                fill: true,
                tension: 0.3
            }]
        },

        options: {
            responsive: true,
            maintainAspectRatio: false,

            plugins: {
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return 'UGX ' + formatNumber(context.raw);
                        }
                    }
                },

                legend: {
                    display: false
                }
            },

            scales: {
                x: {
                    grid: {
                        display: false
                    },

                    ticks: {
                        autoSkip: true,
                        maxTicksLimit: 6,
                        maxRotation: 0,
                        minRotation: 0
                    }
                },

                y: {
                    grid: {
                        drawBorder: false
                    },

                    ticks: {
                        callback: function(value) {
                            return formatNumber(value);
                        }
                    }
                }
            }
        }
    });
}


// ======================================
// SALES VS TARGET BAR CHART
// ======================================
function renderOverviewStatusChart(sales, target) {

    if (overviewStatusChart) {
        overviewStatusChart.destroy();
    }

    const ctx = document.getElementById('statusChart1');

    overviewStatusChart = new Chart(ctx, {

        type: 'bar',

        data: {
            labels: ['Sales', 'Target'],

            datasets: [{
                label: 'Amount',

                data: [
                    Number(sales),
                    Number(target)
                ],

                backgroundColor: [
                    '#2c2f4a', // Sales
                    '#f46524'  // Target
                ],

                borderRadius: 8,
                barThickness: 45
            }]
        },

        options: {
            responsive: true,
            maintainAspectRatio: false,

            plugins: {

                legend: {
                    display: false
                },

                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return 'UGX ' + formatNumber(context.raw);
                        }
                    }
                }
            },

            scales: {

                x: {
                    grid: {
                        display: false
                    }
                },

                y: {
                    beginAtZero: true,

                    ticks: {
                        callback: function(value) {
                            return formatNumber(value);
                        }
                    }
                }
            }
        }
    });
}

</script>