@extends('layouts.app')
@section('content')

<style>
    .kk-dashboard {
        background: linear-gradient(135deg, #f4f7fb 0%, #e9eef6 100%);
        padding: 4px;
        border-radius: 16px;
    }
    .kk-hero {
        background: linear-gradient(135deg, #0265c8 0%, #014a94 100%);
        border-radius: 16px;
        padding: 22px 26px;
        margin-bottom: 18px;
        box-shadow: 0 8px 24px rgba(2,101,200,0.28);
        position: relative;
        overflow: hidden;
    }
    .kk-hero::after {
        content: '';
        position: absolute;
        right: -40px;
        top: -40px;
        width: 180px;
        height: 180px;
        background: rgba(255,255,255,0.08);
        border-radius: 50%;
    }
    .kk-hero h2 {
        color: #fff;
        font-weight: 800;
        margin: 0;
        letter-spacing: 0.3px;
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .kk-hero p {
        color: rgba(255,255,255,0.85);
        margin: 6px 0 0;
        font-size: 13px;
    }
    .kk-filter-card {
        border: none;
        border-radius: 14px;
        box-shadow: 0 4px 18px rgba(0,0,0,0.06);
    }
    .kk-filter-card .form-sm-control {
        border-radius: 8px;
        border: 1px solid #d8e1ec;
        padding: 7px 12px;
        margin-right: 8px;
        transition: border-color 0.2s, box-shadow 0.2s;
    }
    .kk-filter-card .form-sm-control:focus {
        border-color: #0265c8;
        box-shadow: 0 0 0 3px rgba(2,101,200,0.15);
        outline: none;
    }
    #loadChart {
        border-radius: 8px;
        padding: 7px 22px;
        font-weight: 600;
        background: linear-gradient(135deg, #0265c8 0%, #014a94 100%);
        border: none;
        box-shadow: 0 3px 10px rgba(2,101,200,0.3);
        transition: transform 0.15s, box-shadow 0.15s;
    }
    #loadChart:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(2,101,200,0.4);
    }
    .kk-filter-label {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #6b7c93;
        margin-bottom: 6px;
        display: block;
    }
    .kk-chart-card, .kk-table-card {
        border: none;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 6px 24px rgba(0,0,0,0.08);
        transition: box-shadow 0.25s;
    }
    .kk-chart-card:hover, .kk-table-card:hover {
        box-shadow: 0 10px 32px rgba(0,0,0,0.12);
    }
    .kk-chart-card .card-header {
        border: none;
    }
    .kk-chart-card .card-header h5,
    .kk-table-card .card-header h5 {
        font-weight: 700;
        letter-spacing: 0.4px;
    }
</style>

<style>
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
.round {
    line-height: 91px;
    color: #ffffff;
    width: 59px;
    height: 33px;
    display: inline-block;
    font-weight: 100;
    text-align: center;
    border-radius: 100%;
    background: #398bf7;
}
.label-round-switch{
    position: relative;
    top: -18px;
    padding: 13px;
    font-weight: 800;
}


</style>

<div class="kk-dashboard">
<div class="kk-hero">
    <h2>Dashboard Kinerja Kebun KSO</h2>
    <p>Visualisasi kuadran performa kebun berdasarkan IPO &amp; Cash Cost</p>
</div>

<div id="petaktebangGrid">

    <div class="card kk-filter-card">
        <div class="card-body">
            <div class="d-flex no-block">
                <div style="">
                    <!-- <h3 class="card-title m-b-5"><span class="lstick"></span>Monitoring  dan Foto Kebun MT 25/26 </h3> -->
                    <div class="form-group">
                        <span class="kk-filter-label"><i class="fas fa-filter"></i> Filter Data</span>
                        <select id="clusterFilter" class="form-sm-control">
                            <option value="" selected>Total KSO</option>
                            <option value="SUMATERA 1">
                                SUMATERA 1
                            </option>
                            <option value="SUMATERA 2">
                                SUMATERA 2
                            </option>
                            <option value="JATENG">
                                JATENG
                            </option>
                            <option value="JATIM 1">
                                JATIM 1
                            </option>
                            <option value="JATIM 2">
                                JATIM 2
                            </option>
                            <option value="SULAWESI">
                                SULAWESI
                            </option>
                        </select>
                        <select id="bulanFilter" class="form-sm-control">
                            <option value="">Pilih Bulan</option>
                            <option value="1" {{ (date('n')) == 1 ? 'selected' : '' }}>Januari</option>
                            <option value="2" {{ (date('n')) == 2 ? 'selected' : '' }}>Februari</option>
                            <option value="3" {{ (date('n')) == 3 ? 'selected' : '' }}>Maret</option>
                            <option value="4" {{ (date('n')) == 4 ? 'selected' : '' }}>April</option>
                            <option value="5" {{ (date('n')) == 5 ? 'selected' : '' }}>Mei</option>
                            <option value="6" {{ (date('n')) == 6 ? 'selected' : '' }}>Juni</option>
                            <option value="7" {{ (date('n')) == 7 ? 'selected' : '' }}>Juli</option>
                            <option value="8" {{ (date('n')) == 8 ? 'selected' : '' }}>Agustus</option>
                            <option value="9" {{ (date('n')) == 9 ? 'selected' : '' }}>September</option>
                            <option value="10" {{ (date('n')) == 10 ? 'selected' : '' }}>Oktober</option>
                            <option value="11" {{ (date('n')) == 11 ? 'selected' : '' }}>November</option>
                            <option value="12" {{ (date('n')) == 12 ? 'selected' : '' }}>Desember</option>
                        </select>

                        <button id="loadChart" class="btn btn-xs btn-primary">Tampilkan</button>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="card kk-chart-card">
                        <div class="card-header" style="background:linear-gradient(135deg, #0265c8 0%, #014a94 100%); display: flex; justify-content: space-between; align-items: center;">
                            <h5 class="text-white mt-2 mb-0"><i class="fa fa-line-chart"></i> KUADRAN KINERJA KEBUN</h5>
                           @if(session('gid') == 1)
                            <button id="btnSettingKuadran" class="btn btn-sm btn-light" title="Pengaturan Kuadran"><i class="fas fa-cog"></i></button>
                           @endif
                        </div>
                        <div class="card-body">
                            <div id="chartdiv" class="p-relative"></div>                            
                        </div>
                    </div>
                </div>
                <div class="col-md-12 mt-3">
                    <div id="desckuadran"></div>                    
                </div>
                <div class="col-md-12 mt-3">
                    <div class="card kk-table-card">
                        <div class="card-header" style="background:linear-gradient(135deg, #0265c8 0%, #014a94 100%);">
                            <h5 class="text-white mt-2 mb-0"><i class="fas fa-table"></i> TABEL DATA KINERJA KEBUN</h5>
                            <button id="downloadPNG" class="btn btn-sm btn-light" style="float: right;position: absolute;right: 14px;top: 10px;"><i class="fas fa-download"></i> Download</button>
                        </div>
                        <div class="card-body">
                             <div id="tablediv" class="p-relative"></div>

                        </div>
                    </div>
                </div>
                <div class="col-md-12 mt-3">
                    <div class="card">
                        <div class="card-header" style="background:linear-gradient(135deg, #0265c8 0%, #014a94 100%);">
                            <h5 class="text-white mt-2 mb-0"><i class="fas fa-info-circle"></i> Catatan</h5>
                        </div>
                        <div class="card-body">
                            <ul class="mb-0">
                                <li>Sumber data Prodis Console LHP</li>
                                <li>Bobot IPO: Protas (35%), Rendemen (45%), Pasok (20%)</li>
                                <li>Harga Gula Rp 15.000 /kg</li>
                                <li>Harga Tetes Rp 1.200 /kg</li>
                                <li>Target/Sasaran dan Realisasi merupakan data petak yang ditebang</li>
</ul>
                            <button id="btnLihatTarget" class="btn btn-sm btn-outline-primary mt-3">
                                <i class="fas fa-bullseye"></i>  Lihat Target vs Realisasi
                            </button>
                        </div>
                    </div>
                </div>       

                <div class="col-md-12 mt-3">
                    <div class="card kk-table-card">
                        <div class="card-header" style="background:linear-gradient(135deg, #0265c8 0%, #014a94 100%);">
                            <h5 class="text-white mt-2 mb-0"><i class="fas fa-table"></i> PENGAWALAN REVOLUSI 888</h5>
                        </div>
                        <div class="card-body">
                                <div class="d-flex justify-content-end mb-2">
                                    <h3 class="text-info font-weight-bold" id="kuadranTitle" style="width: 60%;     text-align: center;font-size: 1.8rem; text-shadow: 1px 1px 2px rgba(0,0,0,0.1);"><i class="fas fa-rocket" style="color: #ff6b6b; margin-right: 8px;"></i>888</h3>
                                    <div class="form-check form-switch">
                                        <span class="label-round-switch">HARI INI</span>
                                        <label class="switch">
                                        <input id="toggleView" type="checkbox" checked>
                                        <span class="slider round"></span>
                                        </label>
                                        <span class="label-round-switch">SAMPAI DENGAN</span>

                                    </div>
                                </div>
                                
                             <div id="tablediv2" class="p-relative"></div>

                        </div>
                    </div>
                </div>
                
                

            </div>

            <!-- Modal Target / Sasaran -->
            <div class="modal fade" id="modalTargetSasaran" tabindex="-1" role="dialog" aria-labelledby="modalTargetLabel" aria-hidden="true">
                <div class="modal-dialog modal-xl" role="document">
                    <div class="modal-content">
                        <div class="modal-header" style="background:linear-gradient(135deg, #0265c8 0%, #014a94 100%)">
                            <h5 class="modal-title text-white" id="modalTargetLabel"><i class="fas fa-bullseye"></i> Target vs Realisasi</h5>
                            <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div id="targetSasaranContent">
                                <div class="text-center"><i class="fa fa-spinner fa-spin fa-3x"></i><br>Loading...</div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Modal Setting Kuadran -->
            <div class="modal fade" id="modalSettingKuadran" tabindex="-1" role="dialog" aria-labelledby="modalSettingLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header" style="background:linear-gradient(135deg, #0265c8 0%, #014a94 100%)">
                            <h5 class="modal-title text-white" id="modalSettingLabel"><i class="fas fa-cog"></i> Pengaturan Kuadran Kinerja</h5>
                            <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <form id="formSettingKuadran">
                                <div class="form-group">
                                    <label for="cashCostMid"><strong>Cash Cost Mid Point (Rp/Kg)</strong></label>
                                    <input type="number" class="form-control" id="cashCostMid" name="cashCost" required placeholder="Contoh: 14143">
                                    <small class="form-text text-muted">Nilai tengah untuk pemisah kuadran X (horizontal)</small>
                                </div>
                                <div class="form-group">
                                    <label for="ipoMid"><strong>IPO Mid Point (%)</strong></label>
                                    <input type="number" class="form-control" id="ipoMid" name="ipo" step="0.01" required placeholder="Contoh: 80">
                                    <small class="form-text text-muted">Nilai tengah untuk pemisah kuadran Y (vertikal)</small>
                                </div>
                                <hr>
                                <div class="form-row">
                                    <div class="form-group col-md-6">
                                        <label for="xMin"><strong>X Min</strong></label>
                                        <input type="number" class="form-control" id="xMin" name="xMin" required placeholder="Contoh: 0">
                                        <small class="form-text text-muted">Nilai minimum sumbu X</small>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label for="xMax"><strong>X Max</strong></label>
                                        <input type="number" class="form-control" id="xMax" name="xMax" required placeholder="Contoh: 65000">
                                        <small class="form-text text-muted">Nilai maksimum sumbu X</small>
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="form-group col-md-6">
                                        <label for="yMin"><strong>Y Min</strong></label>
                                        <input type="number" class="form-control" id="yMin" name="yMin" step="0.01" required placeholder="Contoh: 30">
                                        <small class="form-text text-muted">Nilai minimum sumbu Y</small>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label for="yMax"><strong>Y Max</strong></label>
                                        <input type="number" class="form-control" id="yMax" name="yMax" step="0.01" required placeholder="Contoh: 90">
                                        <small class="form-text text-muted">Nilai maksimum sumbu Y</small>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                            <button type="button" class="btn btn-primary" id="btnSaveSettingKuadran">
                                <i class="fas fa-save"></i> Simpan
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            
        </div>
    </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@2.1.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0/dist/chartjs-plugin-datalabels.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
<script>
    $("body").removeClass("show-sidebar");
    $("body").addClass("mini-sidebar");

    $(document).ready(function() {
        $('#toggleView').change(function() {
            if($(this).is(':checked')) {
                loadtablenew2('sd');
            } else {
                loadtablenew2('hi');
            }
        });
    });

        $('#downloadPNG').click(function() {
            var tableDiv = document.getElementById('tablediv3');
            html2canvas(tableDiv, {
                allowTaint: true,
                useCORS: true,
                scale: 2,
                width: tableDiv.scrollWidth,
                height: tableDiv.scrollHeight
            }).then(function(canvas) {
                var link = document.createElement('a');
                link.download = 'kinerja_kebun.png';
                link.href = canvas.toDataURL();
                link.click();
            });
        });
    

    $("#btnSettingKuadran").click(function() {
        $.ajax({
            url: '{{ url("picapetak") }}/settingKuadranKinerja',
            type: 'GET',
            success: function(response) {
                $('#cashCostMid').val(response.cashCostMid);
                $('#ipoMid').val(response.ipoMid);
                $('#xMin').val(response.xMin);
                $('#xMax').val(response.xMax);
                $('#yMin').val(response.yMin);
                $('#yMax').val(response.yMax);
                $('#modalSettingKuadran').modal('show');
            },
            error: function(xhr, status, error) {
                alert('Gagal memuat pengaturan kuadran');
                console.error('AJAX error: ' + status + ' - ' + error);
            }
        });
    });

    $("#btnSaveSettingKuadran").click(function() {
        var formData = {
            cashCostMid: $('#cashCostMid').val(),
            ipoMid: $('#ipoMid').val(),
            xMin: $('#xMin').val(),
            xMax: $('#xMax').val(),
            yMin: $('#yMin').val(),
            yMax: $('#yMax').val()
        };

        $.ajax({
            url: '{{ url("picapetak") }}/updateSettingKuadranKinerja',
            type: 'GET',
            data: formData,
            success: function(response) {
                $('#modalSettingKuadran').modal('hide');
                loadtablenew(); // Reload the table with new settings
                loadtable(); // Reload the chart and table with new settings
            },
            error: function(xhr, status, error) {
                alert('Gagal menyimpan pengaturan kuadran');
                console.error('AJAX error: ' + status + ' - ' + error);
            }
        });
    });
    $("#btnLihatTarget").click(function() {
        var cluster = $('#clusterFilter').val();
        var bulan = $('#bulanFilter').val();
        $('#targetSasaranContent').html('<div class="text-center"><i class="fa fa-spinner fa-spin fa-3x"></i><br>Loading...</div>');
        $('#modalTargetSasaran').modal('show');
        $.ajax({
            url: '{{ url("picapetak") }}/getKuadranKinerjaKebun',
            type: 'GET',
            data: { cluster: cluster, bulan: bulan },
            success: function(response) {
                $('#targetSasaranContent').html(response.html || response);
            },
            error: function(xhr, status, error) {
                $('#targetSasaranContent').html('<div class="text-danger"><i class="fas fa-exclamation-circle"></i> Gagal memuat data target/sasaran.</div>');
                console.error('AJAX error: ' + status + ' - ' + error);
            }
        });
    });

    // Register ChartDataLabels plugin globally
    Chart.register(ChartDataLabels);
    
    loadtable();
    loadtablenew2();
    $('#loadChart').click(function() {
        
        loadtable();
        loadtablenew2();    
    });

    function loadtable() {
        $('#chartdiv').html('<div class="text-center"><i class="fa fa-spinner fa-spin fa-3x"></i><br>Loading...</div>');
        var cluster = $('#clusterFilter').val();
        var bulan = $('#bulanFilter').val();
        $.ajax({
            url: '{{ url("picapetak") }}/getKuadranKinerja',
            type: 'GET',
            data: {
                cluster: cluster,
                bulan: bulan
            },
            success: function(response) {
                $('#chartdiv').html('');
                renderQuadrantChart(response.data, response.setting);
                console.log('Chart data loaded:', response.data);
                loadtablenew();                
            },
            error: function(xhr, status, error) {
                $('#chartdiv').html('<div class="text-danger">Gagal memuat data </div>');
                console.error('AJAX error: ' + status + ' - ' + error);
            }
        });
    }

    function loadtablenew() {
        $('#tablediv').html('<div class="text-center"><i class="fa fa-spinner fa-spin fa-3x"></i><br>Loading...</div>');
        var cluster = $('#clusterFilter').val();
        var bulan = $('#bulanFilter').val();
        $.ajax({
            url: '{{ url("picapetak") }}/getKuadranKinerjanew',
            type: 'GET',
            data: {
                cluster: cluster,
                bulan: bulan
            },
            success: function(response) {
                $('#tablediv').html(response.html); 
                colorizeTableRows(response.setting);               
            },
            error: function(xhr, status, error) {
                $('#tablediv').html('<div class="text-danger">Gagal memuat data </div>');
                console.error('AJAX error: ' + status + ' - ' + error);
            }
        });
    }

     function loadtablenew2($kat = 'sd') {
        
        $('#tablediv2').html('<div class="text-center"><i class="fa fa-spinner fa-spin fa-3x"></i><br>Loading...</div>');
        var cluster = $('#clusterFilter').val();
        var bulan = $('#bulanFilter').val();
        $.ajax({
            url: '{{ url("picapetak") }}/getKuadranKinerjaTable888',
            type: 'GET',
            data: {
                cluster: cluster,
                bulan: bulan,
                kategori: $kat
            },
            success: function(response) {
                $('#tablediv2').html(response.html);  
                var date = new Date(response.tanggal);
                var monthNames = ['JANUARI','FEBRUARI','MARET','APRIL','MEI','JUNI','JULI','AGUSTUS','SEPTEMBER','OKTOBER','NOVEMBER','DESEMBER'];
                var month = monthNames[date.getMonth()];
                var year = date.getFullYear();
                var day = date.getDate();
                if($kat == 'hi'){
                    $('#kuadranTitle').text('HARI INI '+ day + ' ' + month + ' ' + year);
                } else {
                    $('#kuadranTitle').text('SAMPAI DENGAN '+ day + ' ' + month + ' ' + year);
                }              
            },
            error: function(xhr, status, error) {
                $('#tablediv2').html('<div class="text-danger">Gagal memuat data </div>');
                console.error('AJAX error: ' + status + ' - ' + error);
            }
        });
    }

    function getKuadranColor(x, y, settings = null) {
        const cashcost_mid = settings?.cashCostMid || 14143;
        const ipo_mid = settings?.ipoMid || 80;
        const colorQ1 = 'rgb(75, 192, 75)';
        const colorQ2 = 'rgb(64, 144, 255)';
        const colorQ3 = 'rgb(255, 0, 0)';
        const colorQ4 = 'rgb(255, 193, 7)';
        if (y >= ipo_mid) {
            return x < cashcost_mid ? colorQ1 : colorQ2;
        } else {
            return x < cashcost_mid ? colorQ4 : colorQ3;
        }
    }

    function colorizeTableRows(settings = null) {
        console.log('Colorizing table rows with settings:', settings);
        $('#tablediv tbody tr').each(function() {
            
            var $cells = $(this).find('td');
            console.log($cells.eq(13).text(), $cells.eq(17).text());
            if ($cells.length < 18) return;
            var x = parseFloat($cells.eq(13).text().replace(/,/g, ''));
            var y = parseFloat($cells.eq(17).text().replace(/,/g, ''));
            
            if (isNaN(x) || isNaN(y)) return;
            var color = getKuadranColor(x, y, settings);
            var $nameCell = $cells.eq(0);
            if ($nameCell.find('.kuadran-dot').length === 0) {
                $nameCell.prepend('<span class="kuadran-dot" style="display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:8px;vertical-align:middle;background-color:' + color + ';"></span>');
            }
        });
    }

    function renderQuadrantChart(chartData, settings = null) {
        if (!chartData || chartData.length === 0) {
            $('#chartdiv').html('<div class="text-center text-muted">Tidak ada data untuk ditampilkan</div>');
            return;
        }

        // Load settings from backend or use defaults
        const cashcost_mid = settings?.cashCostMid || 14143;
        const ipo_mid = settings?.ipoMid || 80;
        const xMin = settings?.xMin || 0;
        const xMax = settings?.xMax || 65000;
        const yMin = settings?.yMin || 30;
        const yMax = settings?.yMax || 90;

        // Warna tiap kuadran
        const colorQ1 = 'rgb(75, 192, 75)';   // Kinerja Baik, Biaya Efisien
        const colorQ2 = 'rgb(64, 144, 255)';  // Kinerja Baik, Biaya Tinggi
        const colorQ3 = 'rgb(255, 0, 0)';     // Kinerja Rendah, Biaya Tinggi
        const colorQ4 = 'rgb(255, 193, 7)';   // Kinerja Rendah, Biaya Efisien

        function getQuadrantColor(x, y) {
            if (y >= ipo_mid) {
                return x < cashcost_mid ? colorQ1 : colorQ2;
            } else {
                return x < cashcost_mid ? colorQ4 : colorQ3;
            }
        }

        // Gabungkan semua data, beri warna sesuai kuadran tiap titik
        const allData = chartData.map(item => ({
            x: item.nilai_x,
            y: item.nilai_y,
            label: item.nama_kebun
        }));

        console.log('All data for chart:', allData);

        const pointColors = allData.map(d => getQuadrantColor(d.x, d.y));
        const pointRadius = allData.map(d => {
            const minRadius = 18;
            const maxRadius = 4;
            return minRadius + ((d.y - 60) / 40) * (maxRadius - minRadius);
        });

        const offset = allData.map(d => {
            const minOffset = 15;
            const maxOffset = 10;
            return minOffset + ((d.y - 60) / 40) * (maxOffset - minOffset);
        });
            

        const ctx = document.createElement('canvas');
        ctx.id = 'quadrantChart';
        ctx.style.maxHeight = '500px';
        ctx.style.minHeight = '300px';
        ctx.style.backgroundColor = '#ffffff';
        $('#chartdiv').html('').append(ctx);

        const midXLabel = 'Rp' + (cashcost_mid / 1000).toFixed(3) + ' ribu/kg';
        const midYLabel = ipo_mid + '%';

        new Chart(ctx, {
            type: 'scatter',
            data: {
                datasets: [
                    {
                        label: 'Kebun',
                        data: allData,
                        backgroundColor: pointColors,
                        borderColor: '#ffffff',
                        borderWidth: 1.5,
                        pointRadius: pointRadius,
                        pointHoverRadius: 10
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                plugins: {
                    title: {
                        display: true,
                        text: '',
                        padding: {
                            bottom: 30
                        }
                    },
                    legend: {
                        display: false,
                        position: 'bottom',
                        labels: {
                            font: {
                                size: 10
                            },
                            padding: 15,
                            usePointStyle: true,
                            color: '#808080'
                        }
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return context.raw.label + ' - CASHCOST: ' + context.parsed.x.toLocaleString('id-ID') + ' - IPO: ' + context.parsed.y.toFixed(2);
                            
                            }
                        }
                    },
                    datalabels: {
                        display: true,
                        align: 'top',
                        anchor: 'top',
                        offset: offset,
                        formatter: function(value, context) {
                            return value.label;
                        },
                        font: {
                            size: 9
                        },
                        color: pointColors,
                        borderColor: 'black',
                        borderRadius: 4,
                        padding: 5,
                        clamp: true,
                        
                    },
                    annotation: {
                        annotations: {
                            boxQ1: {
                                type: 'box',
                                xMin: cashcost_mid,
                                xMax: xMax,
                                yMin: ipo_mid,
                                yMax: yMax,
                                backgroundColor: 'rgba(254, 254, 254, 0.1)',
                                borderWidth: 0
                            },
                            labelQ1: {
                                type: 'label',
                                xValue: (cashcost_mid + xMax) / 2,
                                yValue: (ipo_mid + yMax) / 2 - 5,
                                content: [''],
                                font: {
                                    size: 12,
                                    weight: 'bold'
                                },
                                color: '#2d5e99'
                            },
                            boxQ2: {
                                type: 'box',
                                xMin: xMin,
                                xMax: cashcost_mid,
                                yMin: ipo_mid,
                                yMax: yMax,
                                backgroundColor: 'rgba(245, 246, 249, 0.1)',
                                borderWidth: 0
                            },
                            labelQ2: {
                                type: 'label',
                                xValue: (xMin + cashcost_mid) / 2,
                                yValue: (ipo_mid + yMax) / 2 - 5,
                                content: [''],
                                font: {
                                    size: 12,
                                    weight: 'bold'
                                },
                                color: '#2d7d2d'
                            },
                            boxQ3: {
                                type: 'box',
                                xMin: cashcost_mid,
                                xMax: xMax,
                                yMin: yMin,
                                yMax: ipo_mid,
                                backgroundColor: 'rgba(245, 246, 249, 0.1)',
                                borderWidth: 0
                            },
                            labelQ3: {
                                type: 'label',
                                xValue: (cashcost_mid + xMax) / 2,
                                yValue: (yMin + ipo_mid) / 2,
                                content: [''],
                                font: {
                                    size: 12,
                                    weight: 'bold'
                                },
                                color: '#9a0000'
                            },
                            boxQ4: {
                                type: 'box',
                                xMin: xMin,
                                xMax: cashcost_mid,
                                yMin: yMin,
                                yMax: ipo_mid,
                                backgroundColor: 'rgba(245, 246, 249, 0.1)',
                                borderWidth: 0
                            },
                            labelQ4: {
                                type: 'label',
                                xValue: (xMin + cashcost_mid) / 2,
                                yValue: (yMin + ipo_mid) / 2,
                                content: [''],
                                font: {
                                    size: 12,
                                    weight: 'bold'
                                },
                                color: '#999900'
                            },
                            line1: {
                                type: 'line',
                                xMin: cashcost_mid,
                                xMax: cashcost_mid,
                                borderColor: 'rgb(2, 126, 4)',
                                borderWidth: 2,
                                borderDash: [5, 5],
                                label: {
                                    content: midXLabel,
                                    display: true,
                                    enabled: true,
                                    position: 'start',
                                    backgroundColor: 'rgb(0, 183, 3)',
                                    color: 'rgb(255, 255, 255)',
                                    font: { weight: 'bold' }
                                }
                            },
                            line2: {
                                type: 'line',
                                yMin: ipo_mid,
                                yMax: ipo_mid,
                                borderColor: 'rgb(2, 126, 4)',
                                borderWidth: 2,
                                borderDash: [5, 5],
                                label: {
                                    content: midYLabel,
                                    display: true,
                                    enabled: true,
                                    position: 'start',
                                    backgroundColor: 'rgb(0, 183, 3)',
                                    color: 'rgb(255, 255, 255)',
                                    font: { weight: 'bold' }
                                }
                            }
                        }
                    }
                },
                scales: {
                    x: {
                        title: {
                            display: true,
                            text: 'Cash Cost (RP/Kg)',
                            font: { weight: 'bold' }
                        },
                        min: xMin,
                        max: xMax
                    },
                    y: {
                        title: {
                            display: true,
                            text: 'IPO (Real Produktivitas+Real Rendemen+Real Pasok) (%)',
                            font: { weight: 'bold' }
                        },
                        min: yMin,
                        max: yMax,
                        reverse: false // Membalik sumbu y, min di atas
                    }
                }
            },
            plugins: [ChartDataLabels]
        });

        // Collect kebun in each quadrant
        const kebunQ1 = allData.filter(d => getQuadrantColor(d.x, d.y) === colorQ1);
        const kebunQ2 = allData.filter(d => getQuadrantColor(d.x, d.y) === colorQ2);
        const kebunQ3 = allData.filter(d => getQuadrantColor(d.x, d.y) === colorQ3);
        const kebunQ4 = allData.filter(d => getQuadrantColor(d.x, d.y) === colorQ4);

        const countQ1 = kebunQ1.length;
        const countQ2 = kebunQ2.length;
        const countQ3 = kebunQ3.length;
        const countQ4 = kebunQ4.length;

        // Generate list HTML for kebun
        const generateKebunList = (kebunArray) => {
            if (kebunArray.length === 0) {
                return '<small style="color: #999;">Tidak ada kebun</small>';
            }
            return `<div style="display: flex; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px;">${kebunArray.map(d => `<div style="padding: 6px 8px; color: #555; font-size: 11px; background: rgba(255,255,255,0.5); border: 1px solid rgba(0,0,0,0.1); border-radius: 4px; text-align: center;">${d.label}</div>`).join('')}</div>`;
        };

      

        // Add quadrant legend information below the chart
        const legendHtml = `
            <div style="padding: 20px; background: linear-gradient(135deg, #ffffff 0%, #f4f7fb 100%); border-radius: 12px; box-shadow: 0 4px 18px rgba(0,0,0,0.08); border: 1px solid #e6ebf2;">
                <h5 style="margin-bottom: 18px; font-weight: 700; color: #2c3e50; display: flex; align-items: center; gap: 8px;">
                    <i class="fas fa-info-circle" style="color: #3490dc;"></i> <span class="typing-text">Penjelasan Kuadran</span>
                </h5>
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
                    <div style="position: relative; padding: 18px 16px 14px; background: linear-gradient(135deg, rgba(75,192,75,0.18), rgba(75,192,75,0.40)); border-left: 5px solid #2d7d2d; border-radius: 8px; transition: transform 0.2s, box-shadow 0.2s;" onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 6px 16px rgba(45,125,45,0.25)';" onmouseout="this.style.transform='';this.style.boxShadow='';">
                        <div style="position: absolute; top: 10px; right: 10px; padding: 2px 8px; background: rgba(45,125,45,0.15); border: 1px solid rgba(45,125,45,0.35); border-radius: 999px; color: #2d7d2d; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;">Kuadran 1</div>
                        <strong style="color: #2d7d2d; display: flex; align-items: center; gap: 8px; font-size: 20px;">
                            <i class="fas fa-trophy"></i> <span class="typing-text">${countQ1} Kebun</span>
                        </strong>
                        <div style="margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(45,125,45,0.2);">${generateKebunList(kebunQ1)}</div>
                        <small style="display: block; margin-top: 12px; color: #3a4a3a;"><span class="typing-text">Kinerja Baik, Biaya Efisien. Kebun dengan performa optimal: IPO tinggi dan cashcost terkendali.</span></small>
                        ${countQ1 > 0 ? '<div style="margin-top: 10px; font-size: 11px; line-height: 1.55; color: #245c24;"><strong>Strategi:</strong> <span class="typing-text">Fokus Maintain - optimasi performa produksi eksisting, menjaga efisiensi pembiayaan, dan replikasi kinerja dalam skala luas.</span></div>' : ''}
                    </div>
                    <div style="position: relative; padding: 18px 16px 14px; background: linear-gradient(135deg, rgba(64,144,255,0.18), rgba(64,144,255,0.40)); border-left: 5px solid #2d5e99; border-radius: 8px; transition: transform 0.2s, box-shadow 0.2s;" onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 6px 16px rgba(45,94,153,0.25)';" onmouseout="this.style.transform='';this.style.boxShadow='';">
                        <div style="position: absolute; top: 10px; right: 10px; padding: 2px 8px; background: rgba(45,94,153,0.15); border: 1px solid rgba(45,94,153,0.35); border-radius: 999px; color: #2d5e99; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;">Kuadran 2</div>
                        <strong style="color: #2d5e99; display: flex; align-items: center; gap: 8px; font-size: 20px;">
                            <i class="fas fa-chart-line"></i> <span class="typing-text">${countQ2} Kebun</span>
                        </strong>
                        <div style="margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(45,94,153,0.2);">${generateKebunList(kebunQ2)}</div>
                        <small style="display: block; margin-top: 12px; color: #2e3f55;"><span class="typing-text">Kinerja Baik, Biaya Tinggi. Kebun produktif, tetapi biaya masih perlu dikendalikan.</span></small>
                        ${countQ2 > 0 ? '<div style="margin-top: 10px; font-size: 11px; line-height: 1.55; color: #245c24;"><strong>Strategi:</strong> <span class="typing-text">Fokus Efisiensi - turunkan beban pembiayaan, optimasi performa produksi eksisting, serta kendalikan mutu tebang dan pasok.</span></div>' : ''}
                    </div>
                    <div style="position: relative; padding: 18px 16px 14px; background: linear-gradient(135deg, rgba(229,200,0,0.18), rgba(229,200,0,0.45)); border-left: 5px solid #999900; border-radius: 8px; transition: transform 0.2s, box-shadow 0.2s;" onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 6px 16px rgba(153,153,0,0.25)';" onmouseout="this.style.transform='';this.style.boxShadow='';">
                        <div style="position: absolute; top: 10px; right: 10px; padding: 2px 8px; background: rgba(153,153,0,0.15); border: 1px solid rgba(153,153,0,0.35); border-radius: 999px; color: #8a8a00; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;">Kuadran 3</div>
                        <strong style="color: #8a8a00; display: flex; align-items: center; gap: 8px; font-size: 20px;">
                            <i class="fas fa-arrow-trend-down"></i> <span class="typing-text">${countQ4} Kebun</span>
                        </strong>
                        <div style="margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(153,153,0,0.2);">${generateKebunList(kebunQ4)}</div>
                        <small style="display: block; margin-top: 12px; color: #5a5a2e;"><span class="typing-text">Kinerja Rendah, Biaya Efisien. Biaya sudah efisien, tetapi kinerja produksi perlu ditingkatkan.</span></small>
                        ${countQ4 > 0 ? '<div style="margin-top: 10px; font-size: 11px; line-height: 1.55; color: #245c24;"><strong>Strategi:</strong> <span class="typing-text">Fokus Produktivitas - tingkatkan performa produksi eksisting dan jaga efisiensi pembiayaan.</span></div>' : ''}
                    </div>
                    <div style="position: relative; padding: 18px 16px 14px; background: linear-gradient(135deg, rgba(255,0,0,0.15), rgba(255,0,0,0.40)); border-left: 5px solid #9a0000; border-radius: 8px; transition: transform 0.2s, box-shadow 0.2s;" onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 6px 16px rgba(154,0,0,0.25)';" onmouseout="this.style.transform='';this.style.boxShadow='';">
                        <div style="position: absolute; top: 10px; right: 10px; padding: 2px 8px; background: rgba(154,0,0,0.15); border: 1px solid rgba(154,0,0,0.35); border-radius: 999px; color: #9a0000; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;">Kuadran 4</div>
                        <strong style="color: #9a0000; display: flex; align-items: center; gap: 8px; font-size: 20px;">
                            <i class="fas fa-exclamation-triangle"></i> <span class="typing-text">${countQ3} Kebun</span>
                        </strong>
                        <div style="margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(154,0,0,0.2);">${generateKebunList(kebunQ3)}</div>
                        <small style="display: block; margin-top: 12px; color: #5a2e2e;"><span class="typing-text">Kinerja Rendah, Biaya Tinggi. Prioritas utama perbaikan: kinerja rendah dan biaya tinggi.</span></small>
                        ${countQ3 > 0 ? '<div style="margin-top: 10px; font-size: 11px; line-height: 1.55; color: #245c24;"><strong>Strategi:</strong> <span class="typing-text">Fokus Survive - evaluasi total performa produksi eksisting dan lakukan cost cutting secara menyeluruh.</span></div>' : ''}
                    </div>
                </div>
            </div>
        `;
        
        // Clear and insert HTML
        const $desckuadran = $("#desckuadran");
        $desckuadran.html(legendHtml);
        
        // Apply typing effect to all typing-text elements
        const typingElements = $desckuadran.find('.typing-text');
        typingElements.each(function(index) {
            const $el = $(this);
            const originalText = $el.text();
            let charIndex = 0;
            $el.text('');
            
            const typingInterval = setInterval(() => {
                if (charIndex < originalText.length) {
                    $el.text(originalText.substring(0, charIndex + 1));
                    charIndex++;
                } else {
                    clearInterval(typingInterval);
                }
            }, 15 + (index * 10)); // Stagger effect between elements
        });
        // $('#chartdiv').append(legendHtml);
    }
</script>
@endsection