// ===============================
// chart-omset.js (PATCHED)
// ===============================
//
// Perubahan penting:
// - [PATCH #A] Warna garis OMSET diganti ke hijau agar sama dgn warna "Omset"
//              di grafik Perbandingan: 
//              borderColor   : rgba(34,197,94,1)
//              background/fill: rgba(34,197,94,0.15)
//              point color   : rgba(34,197,94,1)
// - [PATCH #B] Tooltip custom 2 baris (judul xLabel + "Total: Rp.xxxx")
//              untuk OMSET bulanan & tahunan
// - Struktur dan fungsi lain dipertahankan.
// 
// File asal: chart-omset.js :contentReference[oaicite:1]{index=1}
// ===============================

// global state grafik (agar bisa destroy sebelum redraw)
var chartOmsetInstance   = null;
var chartProdukInstance  = null;

// initial load pakai kondisi default (bulan aktif dari server)
load_chart_omset();
load_chart_omset_produk();

/**
 * UTIL kecil: paksa Chart.js re-layout setelah render atau setelah pindah container (zoom).
 */
function _refreshChartLayout() {
    setTimeout(function(){
        window.dispatchEvent(new Event('resize'));
    }, 50);
}

/**
 * [PATCH helper] format rupiah untuk tooltip
 */
function _formatRupiahPatch(val){
    if (typeof number_format === 'function') {
        return 'Rp.' + number_format(val);
    }
    val = Number(val||0);
    return 'Rp ' + val.toLocaleString('id-ID');
}

/**
 * OMSET BULANAN (harian dalam bulan)
 * endpoint: POST grafik/omset
 * param: bulan = "09", "10", ...
 */
function load_chart_omset(bulan, tahun) {
    bulan = bulan ? bulan : '';
    tahun = tahun ? tahun : '';

    $.ajaxQueue({
        url: base_url + "grafik/omset",
        method: "POST",
        data: { bulan: bulan, tahun: tahun },
        beforeSend: function () {
            $("#ChartOmsetLoading").loading();
        },
        success: function (data) {

            var objarr = JSON.parse(data);
            var obj    = objarr['omset'];   // [{tanggal:"TGL-1", total:150000}, ...]
            var blnTxt = objarr['bulan'];   // ex: "Oktober"
            var yTxt   = objarr['tahun'] || '';

            // update judul + badge + dropdown di kartu Omset
            var $cardOmset = $('#ChartOmsetLoading').closest('.clean-card');
            $cardOmset.find('#nama_bulan_omset').text('Grafik Omset Bulan ' + blnTxt + (yTxt ? ' ' + yTxt : ''));
            $cardOmset.find('.badge-period').text(blnTxt + (yTxt ? ' ' + yTxt : ''));
            // update dropdown BULAN (bukan tahun)
            $cardOmset.find('#dropdownMenuOmset').html(blnTxt + ' <span class="caret"></span>');

            // siapkan data chart
            var labelsTanggal = [];
            var dataHasil     = [];
            for (var i in obj) {
                labelsTanggal.push(obj[i].tanggal);
                dataHasil.push(obj[i].total);
            }

            // destroy chart lama
            if (chartOmsetInstance !== null) {
                chartOmsetInstance.destroy();
                chartOmsetInstance = null;
            }

            var ctx = $("#ChartOmset");

            chartOmsetInstance = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: labelsTanggal,
                    datasets: [{
                        data: dataHasil,

                        // === PATCH #A: UBAH WARNA OMSET -> hijau biar sama dgn grafik perbandingan
                        lineTension: 0.3,
                        backgroundColor: "rgba(34, 197, 94, 0.15)",   // hijau muda transparan
                        borderColor: "rgba(34, 197, 94, 1)",           // hijau utama
                        pointRadius: 3,
                        pointBackgroundColor: "rgba(34, 197, 94, 1)",
                        pointBorderColor: "rgba(34, 197, 94, 1)",
                        pointHoverRadius: 3,
                        pointHoverBackgroundColor: "rgba(34, 197, 94, 1)",
                        pointHoverBorderColor: "rgba(34, 197, 94, 1)",
                        pointHitRadius: 10,
                        pointBorderWidth: 2,
                        label: 'Total',
                        fill: true
                        // === END PATCH #A
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false, // ikut tinggi .chart-box
                    title: { display: false },
                    animation: {
                        animateScale: true,
                        animateRotate: true
                    },
                    scales: {
                        xAxes: [{
                            gridLines: {
                                display: false,
                                drawBorder: false
                            },
                            ticks: {
                                autoSkip: false,
                                fontSize: 8,
                                maxRotation: 45,
                                minRotation: 30
                            }
                        }],
                        yAxes: [{
                            ticks: {
                                maxTicksLimit: 5,
                                padding: 10,
                                callback: function (value) {
                                    return 'Rp.' + number_format(value);
                                }
                            },
                            gridLines: {
                                color: "rgb(234, 236, 244)",
                                zeroLineColor: "rgb(234, 236, 244)",
                                drawBorder: false,
                                borderDash: [2],
                                zeroLineBorderDash: [2]
                            }
                        }]
                    },

                    // === PATCH #B: Tooltip 2 baris (judul xLabel + Total: Rp.xxx)
                    tooltips: {
                        backgroundColor: "rgb(255,255,255)",
                        bodyFontColor: "#858796",
                        titleMarginBottom: 10,
                        titleFontColor: '#6e707e',
                        titleFontSize: 14,
                        borderColor: '#dddfeb',
                        borderWidth: 1,
                        xPadding: 15,
                        yPadding: 15,
                        displayColors: false,
                        intersect: false,
                        mode: 'index',
                        caretPadding: 10,
                        callbacks: {
                            title: function(tooltipItems, data){
                                // baris pertama: label sumbu X
                                return tooltipItems[0].label || '';
                            },
                            label: function (tooltipItem, chart) {
                                // baris kedua: "Total: Rp.xxxx"
                                var rawVal = tooltipItem.yLabel;
                                return 'Total: ' + _formatRupiahPatch(rawVal);
                            }
                        }
                    },
                    // === END PATCH #B

                    // legend display:false digabung di sini
                    legend: {
                        display: false,
                        onHover: function(e) {
                            e.target.style.cursor = 'pointer';
                        }
                    },
                    hover: {
                        onHover: function(e) {
                            var point = this.getElementAtEvent(e);
                            if (point.length) e.target.style.cursor = 'pointer';
                            else e.target.style.cursor = 'default';
                        }
                    }
                }
            });

            _refreshChartLayout();
            $("#ChartOmsetLoading").loading("stop");
        },
        error: function () {
            $("#ChartOmsetLoading").loading("stop");
        }
    });
}


/**
 * PENJUALAN PRODUK BULANAN
 * endpoint: POST grafik/omset_produk
 * param: bulan = "09", "10", ...
 * (TIDAK termasuk dalam permintaan perubahan tooltip & warna garis khusus,
 *  jadi bagian ini mostly dibiarkan sama.)
 */
function load_chart_omset_produk(bulan, tahun) {
    bulan = bulan ? bulan : '';
    tahun = tahun ? tahun : '';
    var idBahan = $('#filter_bahan_produk').val() || 0;
    var idKategori = $('#filter_kategori_produk').val() || 0;
    var idProduk = $('#filter_produk').val() || 0;
    var groupBy = $('#filter_gabungan_produk').val() || 'produk';
    var groupLabel = { kategori: 'Kategori', produk: 'Produk', bahan: 'Bahan' }[groupBy] || 'Produk';

    $.ajaxQueue({
        url: base_url + "grafik/omset_produk",
        method: "POST",
        data: { bulan: bulan, tahun: tahun, id_bahan: idBahan, id_kategori: idKategori, id_produk: idProduk, group_by: groupBy },
        beforeSend: function () {
            $("#ChartOmsetProdukLoading").loading();
        },
        success: function (data) {

            var objarr = JSON.parse(data);
            var obj    = objarr['omset'];   // [{title:"Print A3", harga:2302100}, ...]
            var blnTxt = objarr['bulan'];   // "Oktober"
            var yTxt   = objarr['tahun'] || '';

            // update judul + badge di kartu Produk
            var $cardProduk = $('#ChartOmsetProdukLoading').closest('.clean-card');
            $cardProduk.find('#nama_bulan_produk').text('Grafik Penjualan ' + groupLabel + ' Bulan ' + blnTxt + (yTxt ? ' ' + yTxt : ''));
            $cardProduk.find('.badge-period').text(blnTxt + (yTxt ? ' ' + yTxt : ''));
            // update dropdown bulan produk
            $cardProduk.find('#dropdownMenuProduk').html(blnTxt + ' <span class="caret"></span>');

            var labelsProduk = [];
            var dataTotal    = [];
            for (var i in obj) {
                labelsProduk.push(obj[i].title);
                dataTotal.push(obj[i].harga);
            }

            if (chartProdukInstance !== null) {
                chartProdukInstance.destroy();
                chartProdukInstance = null;
            }

            var ctx2 = $("#ChartOmsetProduk");

            chartProdukInstance = new Chart(ctx2, {
                type: 'bar',
                data: {
                    labels: labelsProduk,
                    datasets: [{
                        label: 'Total',
                        data: dataTotal,
                        backgroundColor: "rgba(34, 197, 94, 0.15)",   // hijau muda transparan
                        borderColor: "rgba(34, 197, 94, 1)",           // hijau utama
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    title: { display: false },
                    animation: {
                        animateScale: true,
                        animateRotate: true
                    },
                    scales: {
                        xAxes: [{
                            gridLines: {
                                display: false,
                                drawBorder: false
                            },
                            ticks: {
                                autoSkip: false,
                                maxRotation: 45,
                                minRotation: 30
                            }
                        }],
                        yAxes: [{
                            ticks: {
                                maxTicksLimit: 5,
                                padding: 10,
                                callback: function (value) {
                                    return 'Rp.' + number_format(value);
                                }
                            },
                            gridLines: {
                                color: "rgb(234, 236, 244)",
                                zeroLineColor: "rgb(234, 236, 244)",
                                drawBorder: false,
                                borderDash: [2],
                                zeroLineBorderDash: [2]
                            }
                        }]
                    },
                    tooltips: {
                        backgroundColor: "rgb(255,255,255)",
                        bodyFontColor: "#858796",
                        titleMarginBottom: 10,
                        titleFontColor: '#6e707e',
                        titleFontSize: 14,
                        borderColor: '#dddfeb',
                        borderWidth: 1,
                        xPadding: 15,
                        yPadding: 15,
                        displayColors: false,
                        intersect: true,
                        mode: 'index',
                        caretPadding: 10,
                        callbacks: {
                            label: function (tooltipItem, chart) {
                                var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
                                return datasetLabel + ': Rp.' + number_format(tooltipItem.yLabel);
                            }
                        }
                    },
                    legend: {
                        display: false,
                        onHover: function(e) {
                            e.target.style.cursor = 'pointer';
                        }
                    },
                    hover: {
                        onHover: function(e) {
                            var point = this.getElementAtEvent(e);
                            if (point.length) e.target.style.cursor = 'pointer';
                            else e.target.style.cursor = 'default';
                        }
                    }
                }
            });

            _refreshChartLayout();
            $("#ChartOmsetProdukLoading").loading("stop");
        },
        error: function () {
            $("#ChartOmsetProdukLoading").loading("stop");
        }
    });
}


/**
 * OMSET TAHUNAN
 * endpoint: POST grafik/omset_tahunan
 * param: tahun = "2024"
 * output server:
 * {
 *   "tahun":"2024",
 *   "omset":[ {"bulan":"Jan","total":12345}, {"bulan":"Feb","total":67890}, ... ]
 * }
 */
function load_chart_omset_tahun(tahun) {
    tahun = tahun ? tahun : (new Date()).getFullYear();

    $.ajaxQueue({
        url: base_url + "grafik/omset_tahunan",
        method: "POST",
        data: { tahun: tahun },
        beforeSend: function () {
            $("#ChartOmsetLoading").loading();
        },
        success: function (data) {

            var objarr = JSON.parse(data);
            var obj    = objarr['omset'];   // [{bulan:"Jan", total:...}, ...]
            var yTxt   = objarr['tahun'] || (''+tahun);

            // update header kartu Omset untuk mode Tahun
            var $cardOmset = $('#ChartOmsetLoading').closest('.clean-card');
            $cardOmset.find('#nama_bulan_omset').text('Grafik Omset Tahun ' + yTxt);
            $cardOmset.find('.badge-period').text(yTxt);
            // update dropdown TAHUN
            $cardOmset.find('#dropdownMenuOmsetTahun').html(yTxt + ' <span class="caret"></span>');

            // siapkan data grafik
            var labelsBulan = [];
            var dataTotal   = [];
            for (var i in obj) {
                labelsBulan.push(obj[i].bulan);    // "Jan", "Feb", ...
                dataTotal.push(obj[i].total);
            }

            // destroy chart lama
            if (chartOmsetInstance !== null) {
                chartOmsetInstance.destroy();
                chartOmsetInstance = null;
            }

            var ctx = $("#ChartOmset");
            chartOmsetInstance = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: labelsBulan,
                    datasets: [{
                        label: 'Total',
                        data: dataTotal,

                        // === PATCH #A: samakan warna hijau utk omset tahunan juga
                        backgroundColor: "rgba(34, 197, 94, 0.15)",
                        borderColor: "rgba(34, 197, 94, 1)",
                        pointRadius: 3,
                        pointBackgroundColor: "rgba(34, 197, 94, 1)",
                        pointBorderColor: "rgba(34, 197, 94, 1)",
                        pointHoverRadius: 3,
                        pointHoverBackgroundColor: "rgba(34, 197, 94, 1)",
                        pointHoverBorderColor: "rgba(34, 197, 94, 1)",
                        pointHitRadius: 10,
                        pointBorderWidth: 2,
                        lineTension: 0.3,
                        fill: true
                        // === END PATCH #A
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        xAxes: [{
                            gridLines: { display:false, drawBorder:false },
                            ticks: { autoSkip:false }
                        }],
                        yAxes: [{
                            ticks: {
                                maxTicksLimit: 6,
                                padding: 10,
                                callback: function(v){ return 'Rp.' + number_format(v); }
                            },
                            gridLines: {
                                color: "rgb(234,236,244)",
                                zeroLineColor: "rgb(234,236,244)",
                                drawBorder:false,
                                borderDash:[2],
                                zeroLineBorderDash:[2]
                            }
                        }]
                    },

                    // === PATCH #B: tooltip 2 baris dgn format rupiah
                    tooltips: {
                        backgroundColor:"#fff",
                        bodyFontColor:"#858796",
                        titleMarginBottom:10,
                        titleFontColor:"#6e707e",
                        titleFontSize:14,
                        borderColor:"#dddfeb",
                        borderWidth:1,
                        xPadding:15,
                        yPadding:15,
                        displayColors:false,
                        intersect:false,
                        mode:'index',
                        caretPadding:10,
                        callbacks:{
                            title:function(tooltipItems, data){
                                return tooltipItems[0].label || '';
                            },
                            label:function(t,chart){
                                return 'Total: ' + _formatRupiahPatch(t.yLabel);
                            }
                        }
                    },
                    // === END PATCH #B

                    legend: {
                        display: false,
                        onHover: function(e) {
                            e.target.style.cursor = 'pointer';
                        }
                    },
                    hover: {
                        onHover: function(e) {
                            var point = this.getElementAtEvent(e);
                            if (point.length) e.target.style.cursor = 'pointer';
                            else e.target.style.cursor = 'default';
                        }
                    }
                }
            });

            _refreshChartLayout();
            $("#ChartOmsetLoading").loading("stop");
        },
        error: function () {
            $("#ChartOmsetLoading").loading("stop");
        }
    });
}


/**
 * PENJUALAN PRODUK TAHUNAN
 * endpoint: POST grafik/omset_produk_tahunan
 * param: tahun = "2024"
 * output server:
 * {
 *   "tahun":"2024",
 *   "omset":[ {"title":"Print A3","harga":15000000}, ... ]
 * }
 * (Tidak termasuk di scope perubahan tooltip warna garis sesuai instruksi user,
 *  jadi mostly tetap.)
 */
function load_chart_omset_produk_tahun(tahun) {
    tahun = tahun ? tahun : (new Date()).getFullYear();
    var idBahan = $('#filter_bahan_produk').val() || 0;
    var idKategori = $('#filter_kategori_produk').val() || 0;
    var idProduk = $('#filter_produk').val() || 0;
    var groupBy = $('#filter_gabungan_produk').val() || 'produk';
    var groupLabel = { kategori: 'Kategori', produk: 'Produk', bahan: 'Bahan' }[groupBy] || 'Produk';

    $.ajaxQueue({
        url: base_url + "grafik/omset_produk_tahunan",
        method: "POST",
        data: { tahun: tahun, id_bahan: idBahan, id_kategori: idKategori, id_produk: idProduk, group_by: groupBy },
        beforeSend: function () {
            $("#ChartOmsetProdukLoading").loading();
        },
        success: function (data) {

            var objarr = JSON.parse(data);
            var obj    = objarr['omset'];   // [{title:"Print A3", harga:...}, ...]
            var yTxt   = objarr['tahun'] || (''+tahun);

            var $cardProduk = $('#ChartOmsetProdukLoading').closest('.clean-card');
            $cardProduk.find('#nama_bulan_produk').text('Grafik Penjualan ' + groupLabel + ' Tahun ' + yTxt);
            $cardProduk.find('.badge-period').text(yTxt);
            $cardProduk.find('#dropdownMenuProdukTahun').html(yTxt + ' <span class="caret"></span>');

            var labelsProduk = [];
            var dataTotal    = [];
            for (var i in obj) {
                labelsProduk.push(obj[i].title);
                dataTotal.push(obj[i].harga);
            }

            if (chartProdukInstance !== null) {
                chartProdukInstance.destroy();
                chartProdukInstance = null;
            }

            var ctx2 = $("#ChartOmsetProduk");
            chartProdukInstance = new Chart(ctx2, {
                type: 'bar',
                data: {
                    labels: labelsProduk,
                    datasets: [{
                        label: 'Total',
                        data: dataTotal,
                        backgroundColor: "rgba(34, 197, 94, 0.15)",   // hijau muda transparan
                        borderColor: "rgba(34, 197, 94, 1)",           // hijau utama
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        xAxes: [{
                            gridLines: { display:false, drawBorder:false },
                            ticks: {
                                autoSkip:false,
                                maxRotation:45,
                                minRotation:30
                            }
                        }],
                        yAxes: [{
                            ticks: {
                                maxTicksLimit: 6,
                                padding:10,
                                callback: function(v){ return 'Rp.'+ number_format(v); }
                            },
                            gridLines: {
                                color:"rgb(234,236,244)",
                                zeroLineColor:"rgb(234,236,244)",
                                drawBorder:false,
                                borderDash:[2],
                                zeroLineBorderDash:[2]
                            }
                        }]
                    },
                    tooltips: {
                        backgroundColor:"#fff",
                        bodyFontColor:"#858796",
                        titleMarginBottom:10,
                        titleFontColor:"#6e707e",
                        titleFontSize:14,
                        borderColor:"#dddfeb",
                        borderWidth:1,
                        xPadding:15,
                        yPadding:15,
                        displayColors:false,
                        intersect:true,
                        mode:'index',
                        caretPadding:10,
                        callbacks:{
                            label:function(t,chart){
                                var datasetLabel = chart.datasets[t.datasetIndex].label || '';
                                return datasetLabel + ': Rp.'+ number_format(t.yLabel);
                            }
                        }
                    },
                    legend: {
                        display:false,
                        onHover: function(e) {
                            e.target.style.cursor = 'pointer';
                        }
                    },
                    hover: {
                        onHover: function(e) {
                            var point = this.getElementAtEvent(e);
                            if (point.length) e.target.style.cursor = 'pointer';
                            else e.target.style.cursor = 'default';
                        }
                    }
                }
            });

            _refreshChartLayout();
            $("#ChartOmsetProdukLoading").loading("stop");
        },
        error: function () {
            $("#ChartOmsetProdukLoading").loading("stop");
        }
    });
}
