@extends('layouts.app')

@section('content')
{{--*/ usort($tableGrid, "SiteHelpers::_sort") /*--}}
<div class="page-titles" style="background: linear-gradient(90deg, #3bb54a 0%, #ffa500 60%, #1e90ff 100%); padding: 7px 25px 0px;">
  <h2 class="text-white" style="font-weight:bold; text-shadow: 1px 1px 2px #000;"> {{ $pageTitle2 }} <small> {{ $pageNote2 }} </small></h2>

  
</div>

<div class="container mt-4">
    <div>
        <div class="col-md-2 pl-0">
							
							<select name="filter_periode" id="filter_periode" class="form-control border-primary">
								
							</select>
							</div>
    </div>
    <div id="kuadranChart"></div>
</div>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/annotations.js"></script>
<script>

    			$("#filter_periode").jCombo("{!! url('dataprodisconsole/comboselect?filter=master_periode_bulan:periode:periode') !!}",
					{  initial_text : 'Pilih Periode'});
// Tambahkan elemen loading sebelum fetch
document.getElementById('kuadranChart').innerHTML = '<div id="loadingKuadran" style="text-align:center;padding:50px;"><span>Loading...</span></div>';

const filterPeriode = document.getElementById('filter_periode');
function loadKuadranData(periode = '') {
    document.getElementById('kuadranChart').innerHTML = '<div id="loadingKuadran" style="text-align:center;padding:50px;"><span>Loading...</span></div>';
    fetch(`{{ url("picapetak/getKuadranData") }}?periode=${encodeURIComponent(periode)}`)
        .then(response => response.json())
        .then(result => {
            // Hapus loading setelah data didapat
            document.getElementById('loadingKuadran').remove();

            const data = result.data;
            // Tambahkan warna berdasarkan kondisi, misal kuadran
            const seriesData = data.map(item => {
                let pointColor = 'rgba(60,180,75,0.7)'; // default hijau
                if(item.nilai_pica >= 2.0 && item.cashcostpica_rpkg >= 12378) {
                    pointColor = 'rgba(255,255,0,0.8)'; // kuning
                } else if(item.nilai_pica < 2.0 && item.cashcostpica_rpkg >= 12378) {
                    pointColor = 'rgba(220,20,60,0.8)'; // biru
                } else if(item.nilai_pica < 2.0 && item.cashcostpica_rpkg < 12378) {
                    pointColor = 'rgba(255,165,0,0.8)'; // merah
                }
                return {
                    x: item.nilai_pica,
                    y: item.cashcostpica_rpkg,
                    name: item.nama_kebun,
                    color: pointColor
                };
            });

               // Warnai background kuadran
            Highcharts.addEvent(Highcharts.Chart, 'render', function () {
                const chart = this;
                const xMiddle = chart.xAxis[0].toPixels(2.0);
                const yMiddle = chart.yAxis[0].toPixels(12378);

                // Remove previous kuadran backgrounds if any
                if (chart.kuadranRects) {
                    chart.kuadranRects.forEach(rect => rect.destroy());
                }
                chart.kuadranRects = [];

                // Kuadran 1 (kanan atas)
                chart.kuadranRects.push(
                    chart.renderer.rect(xMiddle, chart.plotTop, chart.plotWidth - (xMiddle - chart.plotLeft), yMiddle - chart.plotTop, 0)
                        .attr({ fill: 'rgba(26, 255, 0, 0.46)', zIndex: 0 })
                        .add()
                );

                // Kuadran 2 (kiri atas)
                chart.kuadranRects.push(
                    chart.renderer.rect(chart.plotLeft, chart.plotTop, xMiddle - chart.plotLeft, yMiddle - chart.plotTop, 0)
                        .attr({ fill: 'rgba(247, 121, 18, 0.47)', zIndex: 0 })
                        .add()
                );

                // Kuadran 3 (kiri bawah)
                chart.kuadranRects.push(
                    chart.renderer.rect(chart.plotLeft, yMiddle, xMiddle - chart.plotLeft, chart.plotHeight - (yMiddle - chart.plotTop), 0)
                        .attr({ fill: 'rgba(220, 20, 60, 0.48)', zIndex: 0 })
                        .add()
                );

                // Kuadran 4 (kanan bawah)
                chart.kuadranRects.push(
                    chart.renderer.rect(xMiddle, yMiddle, chart.plotWidth - (xMiddle - chart.plotLeft), chart.plotHeight - (yMiddle - chart.plotTop), 0)
                        .attr({ fill: 'rgba(245, 241, 20, 0.5)', zIndex: 0 })
                        .add()
                );
            });

            Highcharts.chart('kuadranChart', {
                chart: {
                    type: 'scatter',
                    height: 450
                },
                title: {
                    text: 'Kuadran Nilai PICA vs Cash Cost'
                },
                xAxis: {
                    title: { text: 'Nilai PICA' },
                    plotLines: [{
                        color: 'red',
                        width: 2,
                        value: 2.0,
                        dashStyle: 'Dash',
                        label: {
                            text: 'Garis Tengah PICA (2.0)',
                            style: { color: '#FF0000', fontWeight: 'bold' }
                        }
                    }]
                },
                yAxis: {
                    title: { text: 'Cash Cost PICA Rp/Kg' },
                    reversed: true, // Sumbu Y nilai 0 di atas
                    plotLines: [{
                        color: 'blue',
                        width: 2,
                        value: 12378,
                        dashStyle: 'Dash',
                        label: {
                            text: 'Garis Tengah Cash Cost (12.378)',
                            style: { color: '#0000FF', fontWeight: 'bold' }
                        }
                    }]
                },
                tooltip: {
                    formatter: function() {
                        return `<strong>${this.point.name}</strong><br>Nilai PICA: ${this.x.toFixed(2)}<br>Cash Cost: ${this.y.toFixed(2)}`;
                    },
                },
                plotOptions: {
                    scatter: {
                        marker: {
                            radius: 6,
                            symbol: 'circle'
                        },
                        dataLabels: {
                            enabled: true,
                            format: '{point.name}',
                            allowOverlap: true,
                            style: { color: '#000' }
                        }
                    }
                },
                series: [{
                    name: 'Kebun',
                    data: seriesData
                }]
            });

         
        });
}

// Initial load
loadKuadranData();

// On filter change
filterPeriode.addEventListener('change', function() {
    loadKuadranData(this.value);
});
     

</script>

@stop