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

<div class="page-titles">
    <h2> {{ $pageTitle }} <small> {{ $pageNote }} </small></h2>
</div>

<div id="petaktebangGrid">

    <div class="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">
                        <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">
                                @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 id="chartdiv" class="p-relative"></div>
                            </div>
                            <div class="col-md-12 mt-4">
                                <div id="tablediv" class="p-relative"></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 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>
    // Register ChartDataLabels plugin globally
    Chart.register(ChartDataLabels);
    
    loadtable();
    $('#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 bulan = $('#bulanFilter').val();
        $.ajax({
            url: '{{ url("picapetak") }}/gettableCashcostPanen',
            type: 'GET',
            data: {
                cluster: cluster,
                bulan: bulan
            },
            success: function(response) {
                $('#tablediv').html(response.html);
                renderQuadrantChart(response.chartData, response.setting);
                
            },
            error: function(xhr, status, error) {
                $('#tablediv').html('<div class="text-danger">Gagal memuat data </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;
        }


        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, beri warna hitam untuk semua titik
        const allData = chartData.map(item => ({
            x: item.nilai_pica,
            y: item.real_cashcost,
            label: item.nama_kebun
        }));

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

        new Chart(ctx, {
            type: 'scatter',
            data: {
                datasets: [
                    {
                        label: 'Kebun',
                        data: allData,
                        backgroundColor: 'black',
                        borderColor: 'black',
                        pointRadius: 6
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                plugins: {
                    title: {
                        display: true,
                        text: 'GRAFIK KUADRAN MASA PANEN'
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return context.raw.label + ' - PICA: ' + context.parsed.x.toFixed(2) + ' - Cashcost: ' + context.parsed.y.toLocaleString('id-ID') + ' IDR';
                            
                            }
                        }
                    },
                    datalabels: {
                        display: true,
                        align: 'top',
                        formatter: function(value, context) {
                            return value.label;
                        },
                        font: {
                            size: 9
                        },
                        color: 'black'
                    },
                    annotation: {
                        annotations: {
                            boxQ1: {
                                type: 'box',
                                xMin: nilai_mid,
                                xMax: xMax,
                                yMin: cashcost_mid,
                                yMax: yMax,
                                backgroundColor: 'rgba(255, 159, 64, 0.44)',
                                borderWidth: 0
                            },
                            boxQ2: {
                                type: 'box',
                                xMin: nilai_mid,
                                xMax: xMax,
                                yMin: yMin,
                                yMax: cashcost_mid,
                                backgroundColor: 'rgba(75, 192, 75, 0.44)',
                                borderWidth: 0
                            },
                            boxQ3: {
                                type: 'box',
                                xMin: xMin,
                                xMax: nilai_mid,
                                yMin: cashcost_mid,
                                yMax: yMax,
                                backgroundColor: 'rgba(255, 0, 0, 0.44)',
                                borderWidth: 0
                            },
                            boxQ4: {
                                type: 'box',
                                xMin: xMin,
                                xMax: nilai_mid,
                                yMin: yMin,
                                yMax: cashcost_mid,
                                backgroundColor: 'rgba(229, 255, 0, 0.44)',
                                borderWidth: 0
                            },
                            line1: {
                                type: 'line',
                                xMin: nilai_mid,
                                xMax: nilai_mid,
                                borderColor: 'rgb(255, 0, 0)',
                                borderWidth: 2,
                                borderDash: [5, 5],
                                label: {
                                    content: 'Avg PICA = ' + nilai_mid,
                                    enabled: true
                                }
                            },
                            line2: {
                                type: 'line',
                                yMin: cashcost_mid,
                                yMax: cashcost_mid,
                                borderColor: 'rgb(0, 0, 255)',
                                borderWidth: 2,
                                borderDash: [5, 5],
                                label: {
                                    content: 'Cashcost Tengah = ' + cashcost_mid,
                                    enabled: true
                                }
                            }
                        }
                    }
                },
                scales: {
                    x: {
                        title: {
                            display: true,
                            text: 'Nilai PICA'
                        },
                        min: xMin,
                        max: xMax
                    },
                    y: {
                        title: {
                            display: true,
                            text: 'Real Cashcost'
                        },
                        min: yMin,
                        max: yMax,
                        reverse: true // Membalik sumbu y, min di atas
                    }
                }
            },
            plugins: [ChartDataLabels]
        });
    }
</script>
@endsection