

<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>
<div class="mt-4">

<div class="row">
    <div class="col-md-12">
         <div class="kk-table-card">
            <div class="card-body kk-hero">
                <h2 class="text-center"><i class="fas fa-chart-line" style="margin-right:10px; color:#28a745;"></i>ON FARM PERFORMANCE KOMODITI TEBU</h2>
            </div>
        </div>    
    </div>
    <div class="col-md-12">
       <div class=" mb-3">
            <div class="">
                <div class="card kk-table-card">                        
                <div class="row card-body">
                    
                    <div class="col-md-2">
                        <label class="font-weight-bolder text-success" for="clusterFilter">
                            <i class="fas fa-layer-group" style="margin-right:5px; color:#28a745;"></i> Cluster
                        </label>
                        <select id="clusterFilter" class="form-control border-success">
                            <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>
                    </div>
                    <div class="col-md-2">
                        <label class="font-weight-bolder text-info" for="kebunFilter">
                            <i class="fas fa-tree" style="margin-right:5px; color:#17a2b8;"></i> Kebun
                        </label>
                        <select id="kebunFilter" class="form-control border-info">
                            <option value="">Pilih Kebun</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="font-weight-bolder text-warning" for="rayonFilter">
                            <i class="fas fa-map-marked-alt" style="margin-right:5px; color:#ffc107;"></i> Rayon
                        </label>
                        <select id="rayonFilter" class="form-control border-warning">
                            <option value="">Pilih Rayon</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="font-weight-bolder text-danger" for="tglFilter">
                            <i class="fas fa-calendar-alt" style="margin-right:5px; color:#dc3545;"></i> Tanggal
                        </label>
                        <input type="date" id="tglFilter" class="form-control border-danger" value="{{ date('Y-m-d') }}">
                    </div>
                    <div class="col-md-2">
                        <label class="font-weight-bolder text-warning" for="loadChart">
                            <i class="fas fa-chart-line" style="margin-right:5px; color:#ffc107;"></i> Action
                        </label>
                        <div>
                            <button id="loadChart" class="btn btn-warning btn-block">
                                <i class="fas fa-sync-alt"></i> Tampilkan
                            </button>
                        </div>
                    </div>
                </div>
                </div>

                <div class="mt-4">
                    <div class="row">
                        <div class="col-md-7">  
                            <div class="card kk-table-card mb-2">
                                <div class="card-body" id="prodlistdiv">
                                    <div class="text-center text-muted">Silakan pilih Cluster dan Bulan, lalu klik Tampilkan untuk melihat grafik kuadran.</div>
                                </div>
                            </div>    
                            <div class="card kk-table-card mb-2">
                                <div class="card-header">
                                    @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" id="chartdiv">
                                    <div class="text-center text-muted">Silakan pilih Cluster dan Bulan, lalu klik Tampilkan untuk melihat grafik kuadran.</div>
                                </div>
                            </div>
                            <div class="card kk-table-card mb-2">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-6 col-md-3 mb-2" style="flex: 0 0 20%; padding: 10px;">
                                            <div onclick="klikSelect('produktivitas')" class="card border kk-select-card h-100 text-center p-2 border-info bg-info text-white shadow" data-card="produktivitas" style="cursor:pointer;">
                                                <div class="card-body p-1">
                                                    <i class="fas fa-seedling fa-2x mb-1 text-success"></i>
                                                    <div class="font-weight-bold small">Produktivitas</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6 col-md-3 mb-2" style="flex: 0 0 20%; padding: 10px;">
                                            <div onclick="klikSelect('mutuab')" class="card border kk-select-card h-100 text-center p-2" data-card="mutuab" style="cursor:pointer;">
                                                <div class="card-body p-1">
                                                    <i class="fas fa-certificate fa-2x mb-1 text-primary"></i>
                                                    <div class="font-weight-bold small">% Mutu Tebu A+B</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6 col-md-3 mb-2" style="flex: 0 0 20%; padding: 10px;">
                                            <div onclick="klikSelect('klentek1')" class="card border kk-select-card h-100 text-center p-2" data-card="klentek1" style="cursor:pointer;">
                                                <div class="card-body p-1">
                                                    <i class="fas fa-cut fa-2x mb-1 text-warning"></i>
                                                    <div class="font-weight-bold small">Klentek 1</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6 col-md-3 mb-2" style="flex: 0 0 20%; padding: 10px;">
                                            <div onclick="klikSelect('klentek2')" class="card border kk-select-card h-100 text-center p-2" data-card="klentek2" style="cursor:pointer;">
                                                <div class="card-body p-1">
                                                    <i class="fas fa-scissors fa-2x mb-1 text-info"></i>
                                                    <div class="font-weight-bold small">Klentek 2</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6 col-md-3 mb-2" style="flex: 0 0 20%; padding: 10px;">
                                            <div onclick="klikSelect('cashcost')" class="card border kk-select-card h-100 text-center p-2" data-card="cashcost" style="cursor:pointer;">
                                                <div class="card-body p-1">
                                                    <i class="fas fa-money-bill-wave fa-2x mb-1 text-danger"></i>
                                                    <div class="font-weight-bold small">Cashcost</div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                    </div>
                                    <input type="hidden" id="selected_card" name="selected_card" value="">
                                </div>
                            </div>
                            <div class="card kk-table-card mb-2">
                                <div class="card-body">
                                    <ul class="nav nav-tabs" id="paramPicaTab" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link active" id="paramtab-tab" data-toggle="tab" href="#paramtabdiv" role="tab" aria-controls="paramtabdiv" aria-selected="true">Parameter</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" id="picatab-tab" data-toggle="tab" href="#picatabdiv" role="tab" aria-controls="picatabdiv" aria-selected="false">Nilai PICA</a>
                                        </li>
                                    </ul>
                                    <div class="tab-content mt-2" id="paramPicaTabContent">
                                        <div class="tab-pane fade show active" id="paramtabdiv" role="tabpanel" aria-labelledby="paramtab-tab">
                                            <div class="text-center text-muted">Silakan pilih Cluster dan Bulan, lalu klik Tampilkan untuk melihat grafik kuadran.</div>
                                        </div>
                                        <div class="tab-pane fade" id="picatabdiv" role="tabpanel" aria-labelledby="picatab-tab">
                                            <div class="text-center text-muted">Silakan pilih Cluster dan Bulan, lalu klik Tampilkan untuk melihat grafik kuadran.</div>
                                        </div>
                                    </div>
                                </div>
                            </div>                          
                            
                        </div>
                        <div class="col-md-5">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="kk-table-card">
                                        <div class="card-body kk-hero">
                                            <h2 class="text-center">Monitoring Indicator</h2>
                                        </div>
                                    </div>    
                                    <div class="card kk-table-card">
                                        <div class="card-body">
                                        <div id="proddiv">
                                            <div class="text-center text-muted">Silakan pilih Cluster dan Bulan, lalu klik Tampilkan untuk melihat tabel.</div>
                                        </div>
                                        <div id="mutudiv">
                                            <div class="text-center text-muted">Silakan pilih Cluster dan Bulan, lalu klik Tampilkan untuk melihat tabel.</div>
                                        </div>
                                        <div id="klentekdiv">
                                            <div class="text-center text-muted">Silakan pilih Cluster dan Bulan, lalu klik Tampilkan untuk melihat tabel.</div>
                                        </div>
                                        <div id="kesegarandiv">
                                            <div class="text-center text-muted">Silakan pilih Cluster dan Bulan, lalu klik Tampilkan untuk melihat tabel.</div>
                                        </div>
                                        <div id="umurndiv">
                                            <div class="text-center text-muted">Silakan pilih Cluster dan Bulan, lalu klik Tampilkan untuk melihat tabel.</div>
                                        </div>
                                        
                                        </div>
                                    </div>
                                    <div class="card kk-table-card mt-3">
                                        <div class="card-header p-0 border-bottom-0">
                                            <ul class="nav nav-tabs nav-justified" id="picaTabs" role="tablist">
                                                <li class="nav-item" role="presentation">
                                                    <a class="nav-link active d-flex align-items-center justify-content-center gap-2" id="pi-tab" data-toggle="tab" href="#pi-tab-pane" role="tab" aria-controls="pi-tab-pane" aria-selected="true" style="border-radius: 0; font-weight: 600; padding: 14px 20px;">
                                                        <i class="fas fa-exclamation-triangle text-warning"></i>
                                                        Problem Identification
                                                    </a>
                                                </li>
                                                <li class="nav-item" role="presentation">
                                                    <a class="nav-link d-flex align-items-center justify-content-center gap-2" id="ca-tab" data-toggle="tab" href="#ca-tab-pane" role="tab" aria-controls="ca-tab-pane" aria-selected="false" style="border-radius: 0; font-weight: 600; padding: 14px 20px;">
                                                        <i class="fas fa-tools text-success"></i>
                                                        Rekapitulasi Corrective Action
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="card-body">
                                            <div class="tab-content" id="picaTabsContent">
                                                <div class="tab-pane fade show active" style="height: 600px;overflow: scroll;" id="pi-tab-pane" role="tabpanel" aria-labelledby="pi-tab">
                                                    <div id="pidiv">
                                                        <div class="text-center text-muted py-3">Silakan pilih Cluster dan Bulan, lalu klik Tampilkan untuk melihat tabel.</div>
                                                    </div>
                                                </div>
                                                <div class="tab-pane fade" style="height: 600px;overflow: scroll;"  id="ca-tab-pane" role="tabpanel" aria-labelledby="ca-tab">
                                                    <div id="cadiv">
                                                        <div class="text-center text-muted py-3">Silakan pilih Cluster dan Bulan, lalu klik Tampilkan untuk melihat tabel.</div>                                                         
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                            
                        </div>    
                    </div>
                    
                </div>
            </div>
        </div>
    </div>

    
</div>

<!-- Modal Pengaturan 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 Pica</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 Y (vertikal)</small>
                                </div>
                                <div class="form-group">
                                    <label for="nilaiMid"><strong>Nilai Mid Point (%)</strong></label>
                                    <input type="number" class="form-control" id="nilaiMid" name="nilai" step="0.01" required placeholder="Contoh: 80">
                                    <small class="form-text text-muted">Nilai tengah untuk pemisah kuadran X (horizontal)</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" step="0.01" 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" step="0.01" required placeholder="Contoh: 2">
                                        <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" required placeholder="Contoh: 0">
                                        <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" required placeholder="Contoh: 10000">
                                        <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>

<script>
    $("body").removeClass("show-sidebar");
    $("body").addClass("mini-sidebar");

 

    $("#filter_kebun").jCombo("{!! url('dataprodisconsole/comboselect?filter=master_kebun:kode_kebun:nama_kebun') !!}",
                                    {  initial_text : 'Pilih Kebun'});
                    
                        $("#filter_rayon").jCombo("{!! url('dataprodisconsole/comboselect?filter=master_rayon:kode_rayon:nama_rayon&parent=kode_kebun:') !!}",
                                        {  initial_text : 'Pilih Rayon', parent: "#filter_kebun"}); 
                        $("#filter_afdeling").jCombo("{!! url('dataprodisconsole/comboselect?filter=master_afd:kode_afd:nama_asman|kode_afd&parent=kode_rayon:') !!}",
                                    {  initial_text : 'Pilih Afdeling', parent: "#filter_rayon"});

                         $("#kebunFilter").jCombo("{!! url('dataprodisconsole/comboselect?filter=master_kebun:kode_kebun:nama_kebun') !!}",
                                    {  initial_text : 'Pilih Kebun'});
                        $("#rayonFilter").jCombo("{!! url('dataprodisconsole/comboselect?filter=master_rayon:kode_rayon:nama_rayon&parent=kode_kebun:') !!}",
                                        {  initial_text : 'Pilih Rayon', parent: "#kebunFilter"}); 

                        $("#filter-kebun-kuadran").jCombo("{!! url('dataprodisconsole/comboselect?filter=master_kebun:kode_kebun:nama_kebun') !!}",
                                    {  initial_text : 'Total KSO'});


                                    // $("#filter_kebun, #filter_rayon, #filter_afdeling").on('change', showLineAreaChart);

function resizeIframe() {
	
	var iframes = document.querySelectorAll('iframe');
	console.log('Resizing iframes:', iframes.length);
	iframes.forEach(function(iframe) {
		// Example: set height to content height if same-origin, else keep fixed
		try {
			var doc = iframe.contentDocument || iframe.contentWindow.document;
			if (doc && doc.body) {
				var scrollHeight = doc.body.scrollHeight;
				var bodyHeight = doc.body.offsetHeight;
				iframe.style.height = (scrollHeight > bodyHeight ? bodyHeight : scrollHeight ) + 'px';

			}
            iframe.setAttribute('scrolling', 'no');
            iframe.style.overflow = 'hidden';
            iframe.contentWindow.document.body.style.overflow = 'hidden';
			iframe.contentWindow.document.body.style.height = 'fit-content';
		} catch (e) {
			// Cross-origin, cannot access content
			// Optionally, keep fixed height or handle differently
		}
	});
}

// Resize every 1 second
setInterval(resizeIframe, 1000);
</script>


<script>
    // Register ChartDataLabels plugin globally
    $(document).ready(function() {
        Chart.register(ChartDataLabels);

        loadtable();
        // loadtableKuadran();
        $('#loadChart').click(function() {
            loadtable();
        });
    });


       $("#btnSettingKuadran").click(function() {
        $.ajax({
            url: '{{ url("picapetak") }}/settingKuadranpica',
            type: 'GET',
            success: function(response) {
                $('#cashCostMid').val(response.cashCostMid);
                $('#nilaiMid').val(response.nilaiMid);
                $('#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(),
            nilaiMid: $('#nilaiMid').val(),
            xMin: $('#xMin').val(),
            xMax: $('#xMax').val(),
            yMin: $('#yMin').val(),
            yMax: $('#yMax').val()
        };

        $.ajax({
            url: '{{ url("picapetak") }}/updateSettingKuadranpica',
            type: 'GET',
            data: formData,
            success: function(response) {
                $('#modalSettingKuadran').modal('hide');
                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);
            }
        });
    });

    function loadtable() {
        $('#tablediv').html('<div class="text-center"><i class="fa fa-spinner fa-spin fa-3x"></i><br>Loading...</div>');
        var cluster = $('#clusterFilter').val();
        var tglValue = $('#tglFilter').val();
        var bulan = new Date(tglValue).getMonth() + 1;
        $.ajax({
            url: '{{ url("picapetak") }}/gettableCashcostPanen',
            type: 'GET',
            data: {
                cluster: cluster,
                bulan: bulan
            },
            success: function(response) {
                $('#tablediv').html(response.html);
                renderQuadrantChart(response.chartData, response.setting);
                loadPicaDashboard();
                loadBarChartProduktivitas();
                loadBarChartMutu();
                loadBarChartKlentek();
                loadDashboard1Pica();
                loadDashboardKesegaran();
                loadDashboard1Produktivitas('produktivitas');
                loadDashboardKlasifikasiProtas();
                loadTableAreaProblemCard();
                loadTableCorrectiveCard();
            },
            error: function(xhr, status, error) {
                $('#tablediv').html('<div class="text-danger">Gagal memuat data </div>');
                console.error('AJAX error: ' + status + ' - ' + error);
            }
        });
    }

    function loadPicaDashboard() {
        $('#prodlistdiv').html('<div class="text-center"><i class="fa fa-spinner fa-spin fa-3x"></i><br>Loading...</div>');
        var cluster = $('#clusterFilter').val();
        var kebun = $('#kebunFilter').val();
        var rayon = $('#rayonFilter').val();
        var tgl = $('#tglFilter').val(); // Get current date in YYYY-MM-DD format
        $.ajax({
            url: '{{ url("picapetak/getPicaDashboard") }}',
            type: 'GET',
            data: {
                cluster: cluster,
                kebun: kebun,
                rayon: rayon,
                tgl: tgl
            },
            success: function(response) {
                $('#prodlistdiv').html(response);
            },
            error: function(xhr, status, error) {
                $('#prodlistdiv').html('<div class="text-danger">Gagal memuat data dashboard</div>');
                console.error('AJAX error: ' + status + ' - ' + error);
            }
        });
    }

    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 || 8500;
        const nilai_mid = settings?.nilaiMid || 2;
        const xMin = settings?.xMin || 0;
        const xMax = settings?.xMax || 5;
        const yMin = settings?.yMin || 0;
        const yMax = settings?.yMax || 25000;

        // Gabungkan semua data dengan gradient colors
        const allData = chartData.map(item => ({
            x: item.nilai_pica,
            y: item.real_cashcost,
            label: item.nama_kebun,
            kebun: item.kode_kebun,
            // Tentukan warna berdasarkan kuadran
            color: getQuadrantColor(item.nilai_pica, item.real_cashcost, nilai_mid, cashcost_mid),


        }));

        const ctx = document.createElement('canvas');
        ctx.id = 'quadrantChart';
        ctx.style.maxHeight = '600px';
        const notesContainer = $('<div class="mt-3"></div>');
        $('#chartdiv').html('').append(ctx).append(notesContainer);

        const quadrantConfigs = [
            {
                quadrant: 'KUADRAN 1',
                emoji: '🟢',
                title: 'Kinerja Optimal',
                description: 'Produktivitas Tinggi, Biaya Efisien. Kebun dengan produktivitas tebu tinggi dan cash cost terkendali.',
                strategy: 'Fokus Maintain & Replicate – pertahankan produktivitas dan efisiensi biaya serta replikasi best practice.',
                match: (item) => item.nilai_pica >= nilai_mid && item.real_cashcost < cashcost_mid,
                className: 'border-success bg-success-light',
                borderColor: 'rgba(76, 175, 80, 0.9)',
                itembgColor: 'rgba(203, 255, 205, 0.33)'
            },
            {
                quadrant: 'KUADRAN 2',
                emoji: '🟡',
                title: 'Produktif, Biaya Tinggi',
                description: 'Produktivitas Tinggi, Biaya Tinggi. Kebun produktif, namun biaya produksi masih perlu dikendalikan.',
                strategy: 'Fokus Cost Efficiency – pertahankan produktivitas sambil melakukan optimalisasi biaya produksi.',
                match: (item) => item.nilai_pica >= nilai_mid && item.real_cashcost >= cashcost_mid,
                className: 'border-warning bg-warning-light',
                borderColor: 'rgba(255, 193, 7, 0.9)',
                itembgColor: 'rgba(255, 243, 205, 0.33)'
            },
            {
                quadrant: 'KUADRAN 3',
                emoji: '🟠',
                title: 'Efisien, Produktivitas Rendah',
                description: 'Produktivitas Rendah, Biaya Efisien. Biaya telah terkendali, tetapi produktivitas tebu masih perlu ditingkatkan.',
                strategy: 'Fokus Productivity Improvement – tingkatkan performa produksi dengan tetap menjaga efisiensi biaya.',
                match: (item) => item.nilai_pica < nilai_mid && item.real_cashcost < cashcost_mid,
                className: 'border-orange bg-orange-light',
                borderColor: 'rgba(255, 152, 0, 0.9)',
                itembgColor: 'rgba(255, 230, 205, 0.33)'
            },
            {
                quadrant: 'KUADRAN 4',
                emoji: '🔴',
                title: 'Prioritas Perbaikan',
                description: 'Produktivitas Rendah, Biaya Tinggi. Kondisi belum optimal karena produktivitas rendah disertai cash cost yang tinggi.',
                strategy: 'Fokus Turnaround – evaluasi menyeluruh terhadap performa produksi dan biaya serta lakukan perbaikan secara terintegrasi.',
                match: (item) => item.nilai_pica < nilai_mid && item.real_cashcost >= cashcost_mid,
                className: 'border-danger bg-danger-light',
                borderColor: 'rgba(244, 67, 54, 0.9)',
                itembgColor: 'rgba(255, 205, 205, 0.33)'
            }
        ];

        const quadrantGrid = `
            <div class="row g-3">
                ${quadrantConfigs.map((item, index) => {
                    const matchedKebun = chartData
                        .filter(data => item.match(data))
                        .map(data => ` <div style="padding: 6px 8px; color: #555; font-size: 11px; background: ${item.itembgColor}; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 4px; text-align: center;">${data.nama_kebun || data.kode_kebun || 'Unknown'}</div>`);
                    const kebunList = matchedKebun.length ? matchedKebun.join(' ') : 'Tidak ada kebun';

                    return `
                        <div class="col-md-6 mb-2">
                            <div class="card h-100 border ${item.className}" style="border-left: 6px solid ${item.borderColor} !important;">
                                <div class="card-body p-3">
                                    <div class="d-flex align-items-start justify-content-between gap-2">
                                        <div>
                                            <div class="font-weight-bold text-dark">${item.emoji} ${item.quadrant}</div>
                                            <div class="small text-muted mt-3" style="display: flex; gap: 6px; flex-wrap: wrap;width: 135%;">${kebunList}</div>
                                        </div>
                                        <span class="badge badge-light border px-2 py-1">${item.title}</span>
                                    </div>
                                    <p class="mb-2 mt-2 small text-dark">${item.description}</p>
                                    <div class="small"><strong>Strategi:</strong> ${item.strategy}</div>
                                </div>
                            </div>
                        </div>
                    `;
                }).join('')}
            </div>
        `;

        quadrantSummary = quadrantGrid;

        notesContainer.html(quadrantSummary);

        new Chart(ctx, {
            type: 'scatter',
            data: {
            datasets: [
                {
                label: 'Kebun',
                data: allData,
                backgroundColor: allData.map(d => d.color),
                borderColor: allData.map(d => d.color),
                pointRadius: 8,
                pointHoverRadius: 11,
                pointBorderWidth: 2,
                pointBorderColor: '#000',
                pointStyle: 'circle'
                }
            ]
            },
            options: {
            responsive: true,
            maintainAspectRatio: true,
            onClick: function(event, elements) {

                if (elements.length > 0) {
                const dataIndex = elements[0].index;
                const clickedData = allData[dataIndex];
                                console.log('Clicked elements:', clickedData);
                const params = new URLSearchParams({
                    kebun: clickedData.kebun || '',
                    rayon: '',
                    afdeling: '',
                    problem_group: '',
                    area_problem: ''
                });
                const url = `{{ url('picapetak/chartLineAreaProblemDetail') }}?` + params.toString();
                SximoModal(url, 'Data Petak PICA');
                }
            },
            plugins: {
                title: {
                display: true,
                text: 'GRAFIK KUADRAN MASA PANEN',
                font: {
                    size: 18,
                    weight: 'bold',
                    family: "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif"
                },
                padding: 20,
                color: '#2c3e50'
                },
                legend: {
                display: false
                },
                tooltip: {
                backgroundColor: 'rgba(0, 0, 0, 0.8)',
                padding: 12,
                titleFont: { size: 13, weight: 'bold' },
                bodyFont: { size: 12 },
                borderColor: '#fff',
                borderWidth: 1,
                displayColors: true,
                callbacks: {
                    title: function(context) {
                        return context[0].raw.label;
                    },
                    label: function(context) {
                    return 'PICA: ' + context.parsed.x.toFixed(2) + ' | Cashcost: ' + context.parsed.y.toLocaleString('id-ID') + ' IDR';
                    
                    }
                }
                },
                datalabels: {
                display: true,
                align: 'top',
                offset: 8,
                formatter: function(value, context) {
                    return value.label;
                },
                font: {
                    size: 10,
                    weight: 'bold',
                    family: "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif"
                },
                color: '#2c3e50',
                textStrokeColor: '#fff',
                textStrokeWidth: 2
                },
                annotation: {
                annotations: {
                    boxQ1: {
                    type: 'box',
                    xMin: nilai_mid,
                    xMax: xMax,
                    yMin: cashcost_mid,
                    yMax: yMax,
                    backgroundColor: 'rgba(248, 252, 7, 0.57)',
                    borderWidth: 2,
                    borderColor: 'rgba(255, 147, 7, 0.5)'
                    },
                    boxQ2: {
                    type: 'box',
                    xMin: nilai_mid,
                    xMax: xMax,
                    yMin: yMin,
                    yMax: cashcost_mid,
                    backgroundColor: 'rgba(76, 175, 80, 0.15)',
                    borderWidth: 2,
                    borderColor: 'rgba(76, 175, 80, 0.5)'
                    },
                    boxQ3: {
                    type: 'box',
                    xMin: xMin,
                    xMax: nilai_mid,
                    yMin: cashcost_mid,
                    yMax: yMax,
                    backgroundColor: 'rgba(244, 67, 54, 0.15)',
                    borderWidth: 2,
                    borderColor: 'rgba(244, 67, 54, 0.5)'
                    },
                    boxQ4: {
                    type: 'box',
                    xMin: xMin,
                    xMax: nilai_mid,
                    yMin: yMin,
                    yMax: cashcost_mid,
                    backgroundColor: 'rgba(255, 153, 0, 0.62)',
                    borderWidth: 2,
                    borderColor: 'rgba(255, 152, 0, 0.5)'
                    },
                    line1: {
                    type: 'line',
                    xMin: nilai_mid,
                    xMax: nilai_mid,
                    borderColor: 'rgba(0, 0, 0, 0.4)',
                    borderWidth: 2,
                    borderDash: [6, 4],
                    label: {
                        content: 'Avg PICA = 2',
                        enabled: true,
                        fontSize: 11,
                        fontColor: '#666'
                    }
                    },
                    line2: {
                    type: 'line',
                    yMin: cashcost_mid,
                    yMax: cashcost_mid,
                    borderColor: 'rgba(0, 0, 0, 0.4)',
                    borderWidth: 2,
                    borderDash: [6, 4],
                    label: {
                        content: 'Cashcost Mid = ' + cashcost_mid,
                        enabled: true,
                        fontSize: 11,
                        fontColor: '#666'
                    }
                    }
                }
                }
            },
            scales: {
                x: {
                title: {
                    display: true,
                    text: 'Nilai PICA',
                    font: { size: 13, weight: 'bold', family: "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif" },
                    color: '#2c3e50',
                    padding: 10
                },
                min: xMin,
                max: xMax,
                grid: {
                    drawBorder: true,
                    color: 'rgba(0, 0, 0, 0.1)',
                    drawTicks: true
                },
                ticks: {
                    font: { size: 11 },
                    color: '#666'
                }
                },
                y: {
                title: {
                    display: true,
                    text: 'Real Cashcost (IDR)',
                    font: { size: 13, weight: 'bold', family: "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif" },
                    color: '#2c3e50',
                    padding: 10
                },
                min: yMin,
                max: yMax,
                reverse: true,
                grid: {
                    drawBorder: true,
                    color: 'rgba(0, 0, 0, 0.1)',
                    drawTicks: true
                },
                ticks: {
                    font: { size: 11 },
                    color: '#666',
                    callback: function(value) {
                        return value.toLocaleString('id-ID');
                    }
                }
                }
            }
            },
            plugins: [ChartDataLabels]
        });
        

    }

    // Fungsi untuk menentukan warna berdasarkan kuadran
    function getQuadrantColor(pica, cashcost, avg_pica, cashcost_mid) {
        if (pica >= avg_pica && cashcost < cashcost_mid) {
            return 'rgba(76, 175, 80, 0.9)'; // Q2: Hijau - Baik
        } else if (pica >= avg_pica && cashcost >= cashcost_mid) {
            return 'rgba(255, 193, 7, 0.9)'; // Q1: Kuning - Sedang
        } else if (pica < avg_pica && cashcost >= cashcost_mid) {
            return 'rgba(244, 67, 54, 0.9)'; // Q3: Merah - Buruk
        } else {
            return 'rgba(255, 152, 0, 0.9)'; // Q4: Orange - Neutral
        }
    }

   

    // AJAX untuk Bar Chart Produktivitas
    function loadBarChartProduktivitas() {
        $.ajax({
            url: "{{ url('picapetak/getBarChartProduktivitas') }}",
            type: 'GET',
            data: {
                cluster: $('#clusterFilter').val(),
                kebun: $('#kebunFilter').val(),
                rayon: $('#rayonFilter').val(),
                tgl: $('#tglFilter').val()
            },
            dataType: 'json',
            success: function(response) {
                if (response.status === 'success') {
                    $('#proddiv').html(response.html);
                    // Reinitialize Chart setelah HTML dimuat
                    setTimeout(function() {
                        // Chart sudah di-render dari HTML yang diterima
                    }, 100);
                } else {
                    $('#proddiv').html('<div class="alert alert-danger">Error loading chart</div>');
                }
            },
            error: function(xhr, status, error) {
                console.error('AJAX Error:', error);
                $('#proddiv').html('<div class="alert alert-danger">Failed to load chart data</div>');
            }
        });
    }

    // AJAX untuk Bar Chart Mutu
    function loadBarChartMutu() {
        $.ajax({
            url: "{{ url('picapetak/getDashboardMutu') }}",
            type: 'GET',
            data: {
                cluster: $('#clusterFilter').val(),
                kebun: $('#kebunFilter').val(),
                rayon: $('#rayonFilter').val(),
                tgl: $('#tglFilter').val()
            },
            dataType: 'json',
            success: function(response) {
                if (response.status === 'success') {
                    $('#mutudiv').html(response.html);
                    // Reinitialize Chart setelah HTML dimuat
                    setTimeout(function() {
                        // Chart sudah di-render dari HTML yang diterima
                    }, 100);
                } else {
                    $('#mutudiv').html('<div class="alert alert-danger">Error loading chart</div>');
                }
            },
            error: function(xhr, status, error) {
                console.error('AJAX Error:', error);
                $('#mutudiv').html('<div class="alert alert-danger">Failed to load chart data</div>');
            }
        });
    }

    // AJAX untuk Bar Chart Klentek
    function loadBarChartKlentek() {
        $.ajax({
            url: "{{ url('picapetak/getDashboardKlentek') }}",
            type: 'GET',
            data: {
                cluster: $('#clusterFilter').val(),
                kebun: $('#kebunFilter').val(),
                rayon: $('#rayonFilter').val(),
                tgl: $('#tglFilter').val()
            },
            dataType: 'json',
            success: function(response) {
                if (response.status === 'success') {
                    $('#klentekdiv').html(response.html);
                    // Reinitialize Chart setelah HTML dimuat
                    setTimeout(function() {
                        // Chart sudah di-render dari HTML yang diterima
                    }, 100);
                } else {
                    $('#klentekdiv').html('<div class="alert alert-danger">Error loading chart</div>');
                }
            },
            error: function(xhr, status, error) {
                console.error('AJAX Error:', error);
                $('#klentekdiv').html('<div class="alert alert-danger">Failed to load chart data</div>');
            }
        });
    }

    // AJAX untuk Dashboard Kesegaran
    function loadDashboardKesegaran() {
        $.ajax({
            url: "{{ url('picapetak/getDashboardKesegaran') }}",
            type: 'GET',
            data: {
                cluster: $('#clusterFilter').val(),
                kebun: $('#kebunFilter').val(),
                rayon: $('#rayonFilter').val(),
                tgl: $('#tglFilter').val()
            },
            dataType: 'json',
            success: function(response) {
                if (response.status === 'success') {
                    $('#kesegarandiv').html(response.html);
                    // Reinitialize Chart setelah HTML dimuat
                    setTimeout(function() {
                        // Chart sudah di-render dari HTML yang diterima
                    }, 100);
                } else {
                    $('#kesegarandiv').html('<div class="alert alert-danger">Error loading chart</div>');
                }
            },
            error: function(xhr, status, error) {
                console.error('AJAX Error:', error);
                $('#kesegarandiv').html('<div class="alert alert-danger">Failed to load chart data</div>');
            }
        });
    }

    // AJAX untuk Dashboard Klasifikasi Protas
    function loadDashboardKlasifikasiProtas() {
        $.ajax({
            url: "{{ url('picapetak/getDashboardKlasifikasiProtas') }}",
            type: 'GET',
            data: {
                cluster: $('#clusterFilter').val(),
                kebun: $('#kebunFilter').val(),
                rayon: $('#rayonFilter').val(),
                tgl: $('#tglFilter').val()
            },
            dataType: 'json',
            success: function(response) {
                if (response.status === 'success') {
                    $('#umurndiv').html(response.html);
                    // Reinitialize Chart setelah HTML dimuat
                    setTimeout(function() {
                        // Chart sudah di-render dari HTML yang diterima
                    }, 100);
                } else {
                    $('#umurndiv').html('<div class="alert alert-danger">Error loading chart</div>');
                }
            },
            error: function(xhr, status, error) {
                console.error('AJAX Error:', error);
                $('#umurndiv').html('<div class="alert alert-danger">Failed to load chart data</div>');
            }
        });
    }

    // AJAX untuk Dashboard 1 Pica
    function loadDashboard1Pica() {
        $.ajax({
            url: "{{ url('picapetak/getDashboard1Pica') }}",
            type: 'GET',
            data: {
                cluster: $('#clusterFilter').val(),
                kebun: $('#kebunFilter').val(),
                rayon: $('#rayonFilter').val(),
                tgl: $('#tglFilter').val()
            },
            dataType: 'text',
            success: function(response) {

                    $('#picatabdiv').html(response);
                 
            },
            error: function(xhr, status, error) {
                console.error('AJAX Error:', error);
                $('#picatabdiv').html('<div class="alert alert-danger">Failed to load chart data</div>');
            }
        });
    }

    function klikSelect(param){
        
        $('#selected_card').val(param);
        $('.kk-select-card').removeClass('border-info bg-info text-white shadow');
        $('.kk-select-card i').css('color', '');
        $('.kk-select-card .font-weight-bold').css('color', '');

        var selectedCard = $('.kk-select-card[data-card="' + param + '"]');
        selectedCard.addClass('border-info bg-info text-white shadow');
        selectedCard.find('i').css('color', '#fff');
        selectedCard.find('.font-weight-bold').css('color', '#fff');

        console.log('Selected card:', $('#selected_card').val());

        setTimeout(function() {
            loadDashboard1Produktivitas($('#selected_card').val());
        }, 100);

    }

    // AJAX untuk Dashboard 1 Produktivitas
    function loadDashboard1Produktivitas(parameter) {
        $('#paramtabdiv').html('<div class="text-center"><i class="fas fa-spinner fa-spin"></i> Loading...</div>');
        $.ajax({
            url: "{{ url('picapetak/getDashboard1Produktivitas') }}",
            type: 'GET',
            data: {
                cluster: $('#clusterFilter').val(),
                kebun: $('#kebunFilter').val(),
                rayon: $('#rayonFilter').val(),
                parameter: parameter,
            },
            dataType: 'text',
            success: function(response) {

                    $('#paramtabdiv').html(response);
                 
            },
            error: function(xhr, status, error) {
                console.error('AJAX Error:', error);
                $('#paramtabdiv').html('<div class="alert alert-danger">Failed to load chart data</div>');
            }
        });
    }

    // AJAX untuk Area Problem Card
    function loadTableAreaProblemCard() {
        // $.ajax({
        //     url: "{{ url('picapetak/getTableAreaProblemCard') }}",
        //     type: 'GET',
        //     data: {
        //         cluster: $('#clusterFilter').val(),
        //         kebun: $('#kebunFilter').val(),
        //         rayon: $('#rayonFilter').val(),
        //         tgl: $('#tglFilter').val()
        //     },
        //     dataType: 'text',
        //     success: function(response) {
        //         $('#pidiv').html(response);
        //     },
        //     error: function(xhr, status, error) {
        //         console.error('AJAX Error:', error);
        //         $('#pidiv').html('<div class="alert alert-danger">Failed to load area problem card data</div>');
        //     }
        // });
        var p_cluster= $('#clusterFilter').val();
        var p_kode_kebun= $('#kebunFilter').val();
        var p_kode_rayon= $('#rayonFilter').val();
        var p_tanggal_sd= $('#tglFilter').val();
        $('#pidiv').html('<iframe src="https://prodis.ksotebu.com/masterkonten/load_content?id=d830d81ca1c690777bde4a6d62254485&p_cluster=' + encodeURIComponent(p_cluster) + '&p_kode_kebun=' + encodeURIComponent(p_kode_kebun) + '&p_kode_rayon=' + encodeURIComponent(p_kode_rayon) + '&p_tanggal_sd=' + encodeURIComponent(p_tanggal_sd) + '" style="width:100%; height:500px; border:none;"></iframe>');
    }

    // AJAX untuk Corrective Card
    function loadTableCorrectiveCard() {
        // $.ajax({
        //     url: "{{ url('picapetak/getTableCorrectiveCard') }}",
        //     type: 'GET',
        //     data: {
        //         cluster: $('#clusterFilter').val(),
        //         kebun: $('#kebunFilter').val(),
        //         rayon: $('#rayonFilter').val(),
        //         tgl: $('#tglFilter').val()
        //     },
        //     dataType: 'text',
        //     success: function(response) {
        //         $('#cadiv').html(response);
        //     },
        //     error: function(xhr, status, error) {
        //         console.error('AJAX Error:', error);
        //         $('#cadiv').html('<div class="alert alert-danger">Failed to load corrective card data</div>');
        //     }
        // });
        var p_cluster= $('#clusterFilter').val();
        var p_kode_kebun= $('#kebunFilter').val();
        var p_kode_rayon= $('#rayonFilter').val();
        var p_tanggal_sd= $('#tglFilter').val();

        $('#cadiv').html('<iframe src="https://prodis.ksotebu.com/masterkonten/load_content?id=d9bcd249b312df57b08e58d04c383e34&p_cluster=' + encodeURIComponent(p_cluster) + '&p_kode_kebun=' + encodeURIComponent(p_kode_kebun) + '&p_kode_rayon=' + encodeURIComponent(p_kode_rayon) + '&p_tanggal_sd=' + encodeURIComponent(p_tanggal_sd) + '" style="width:100%; height:500px; border:none;"></iframe>');
    }

    

</script>
