@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>Clusterisasi - Tinggi Batang </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="kebunFilter" class="form-sm-control">
                        </select>
                        <input type="date" id="startDateFilter" class="form-sm-control" placeholder="Tanggal Mulai" value="2024-01-01">
                        <input type="date" id="endDateFilter" class="form-sm-control" placeholder="Tanggal Akhir">
                        <select id="umurFilter" class="form-sm-control">
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                        </select>

                        <button id="loadChart" class="btn btn-xs btn-primary">Tampilkan</button>
                        <button type="button" id="exportexcel" class="btn btn-sm btn-success"><i class="fa fa-file-excel"></i> Download Excel</button>
                    </div>
                </div>
            </div>
            <div id="chartdiv" class="p-relative"></div>

             <div class="card mt-3">
            <div class="card-header bg-info text-white">
                <h5 class="mb-0 text-white">Kriteria Tinggi Batang (Mtr)</h5>
            </div>
            <div class="modal-body">
                <div class="table-responsive mb-3">
                    <table class="table table-bordered table-sm text-center">
                        <thead class="bg-success font-weight-bold">
                            <tr>
                                <th>Kriteria</th>
                                @for($i=1;$i<=12;$i++)
                                    <th>{{ $i }}</th>
                                @endfor
                                <th>> BST</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="font-weight-bold">a. Emas</td>
                                <td>0</td><td>0</td><td>&ge;60</td><td>&ge;80</td><td>&ge;120</td><td>&ge;160</td><td>&ge;190</td><td>&ge;220</td><td>&ge;250</td><td>&ge;280</td><td>&ge;300</td><td>&ge;300</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td class="font-weight-bold">b. Hijau</td>
                                <td>0</td><td>0</td><td>50 - 60</td><td>70 - 80</td><td>105 - 120</td><td>145 - 160</td><td>180 - 190</td><td>205 - 220</td><td>235 - 250</td><td>265 - 280</td><td>285 - 300</td><td>285 - 300</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td class="font-weight-bold">c. Kuning</td>
                                <td>0</td><td>0</td><td>45 - 50</td><td>60 - 70</td><td>90 - 105</td><td>130 - 145</td><td>165 - 180</td><td>190 - 205</td><td>220 - 235</td><td>250 - 265</td><td>270 - 285</td><td>270 - 285</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td class="font-weight-bold">d. Merah</td>
                                <td>0</td><td>0</td><td>40 - 50</td><td>50 - 60</td><td>75 - 90</td><td>115 - 130</td><td>145 - 165</td><td>175 - 190</td><td>205 - 220</td><td>235 - 250</td><td>255 - 270</td><td>255 - 270</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td class="font-weight-bold">e. Hitam</td>
                                <td>0</td><td>0</td><td>20 - 40</td><td>20 - 40</td><td>20 - 40</td><td>20 - 40</td><td>20 - 40</td><td>20 - 40</td><td>20 - 40</td><td>20 - 40</td><td>20 - 40</td><td>20 - 40</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td class="font-weight-bold">f. Abu-abu</td>
                                <td>&lt;20</td><td>&lt;20</td><td>&lt;20</td><td>&lt;20</td><td>&lt;20</td><td>&lt;20</td><td>&lt;20</td><td>&lt;20</td><td>&lt;20</td><td>&lt;20</td><td>&lt;20</td><td>&lt;20</td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                    <small class="text-muted">*) untuk pengamatan ini menggunakan parameter pertumbuhan tanaman (perhitungan sampai dengan sendi segitiga daun pertama)</small>
                </div>
                <div class="mb-2">
                    <strong>Narasi dan literatur yang digunakan :</strong>
                    <ul>
                        <li>Tinggi batang diukur pada rumpun yang di tengah panjang juring misalnya 10 mtr, maka rumpun ke 4 - 6 mt</li>
                        <li>Pertumbuhan tinggi batang sangat ditentukan oleh:</li>
                        <ul>
                            <li>1. Varietas</li>
                            <li>2. Kecukupan air</li>
                            <li>3. Pemenuhan sinar matahari</li>
                            <li>4. Kondisi aerasi tanah yang ditentukan oleh pengolahan dan kultivasi lahan</li>
                            <li>5. Kecukupan unsur hara yang ditentukan oleh efisiensi pemupukan</li>
                        </ul>
                        <li>Respon tanaman terhadap kecukupan faktor penentu pertumbuhan ini akan menghasilkan ukuran tinggi batang yang berbeda berdasarkan umur tanaman.</li>
                        <li>Dasar penentuan tinggi batang berdasarkan data rerata dari berbagai varietas uji multilokasi. Rerata tinggi dari hasil data uji mulok dengan produktivitas &gt; 100 ton/ha adalah 300 cm. Sebaran data tiap bulan mengacu pada grafik pertumbuhan tinggi batang (Loah, 1986). Relevansi data menggunakan data tahun 2022 sampai dengan 2025.</li>
                    </ul>
                    <strong>Literatur:</strong>
                    <ol>
                        <li>Pawirosemadi, Marsadi. 2011. Dasar-dasar Teknologi Budidaya Tebu dan Pengolahan hasilnya.</li>
                        <li>Koto Syahrial, et al. 2017. Panduan Aplikasi Budidaya Tebu,</li>
                        <li>Loah.B.1986. Analisa Pertumbuhan Serta Hasil Panen Tanaman Tebu. Latihan Kerja Kebun Percobaan Pabrik Gula. P3GI. 33 hal.</li>
                        <li>P3GI. 1997. Petunjuk Pelaksanaan Percobaan Screning Jenis Tebu.</li>
                    </ol>
                </div>
            </div>
</div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $('#exportexcel').on('click', function() {
        var table = document.getElementById('rekap-table');
        
        if (!table) {
            alert('Table tidak ditemukan!');
            return;
        }
        
        var wb = XLSX.utils.table_to_book(table, {sheet: "Pemeliharaan Tinggi Rayonkebun"});

        var filename = 'Pemeliharaan_Tinggi_Rayonkebun' + '.xlsx';
        
        XLSX.writeFile(wb, filename);
    });
</script>
<script>
    loadtable();
    $("#kebunFilter").jCombo("{!! url('dataprodisconsole/comboselect?filter=master_kebun:kode_kebun:nama_kebun') !!}", {
        initial_text: 'Pilih Kebun'
    });
    $('#loadChart').click(function() {
        loadtable();
    });

    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 kebun = $('#kebunFilter').val();
        var start_date = $('#startDateFilter').val();
        var end_date = $('#endDateFilter').val();
        var umur = $('#umurFilter').val();
        $.ajax({
            url: '{{ url("picapetak") }}/gettablePicapemeliharaantinggirayonkebun',
            type: 'GET',
            data: {
                cluster: cluster,
                kebun: kebun,
                start_date: start_date,
                end_date: end_date,
                umur: umur
            },
            success: function(response) {
                $('#chartdiv').html(response);
            },
            error: function(xhr, status, error) {
                $('#chartdiv').html('<div class="text-danger">Gagal memuat data </div>');
                console.error('AJAX error: ' + status + ' - ' + error);
            }
        });
    }
</script>
@endsection