@extends('layouts.app')

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

</div>

<div  class="card">
<div class="p-3">
        <div class="row">
            <div class="col-md-4">
            <label class="font-weight-bolder text-success" for="filter_kebun">
                <i class="fas fa-seedling" style="margin-right:5px; color:#28a745;"></i> Kebun
            </label>
            <select name="filter_kebun" id="filter_kebun" class="form-control border-success">
              
            </select>
            </div>
            <div class="col-md-4">
            <label class="font-weight-bolder text-primary" for="filter_rayon">
                <i class="fas fa-map-marker-alt" style="margin-right:5px; color:#007bff;"></i> Rayon
            </label>
            <select name="filter_rayon" id="filter_rayon" class="form-control border-primary">
               
            </select>
            </div>
            <div class="col-md-4">
            <label class="font-weight-bolder text-warning" for="filter_afdeling">
                <i class="fas fa-industry" style="margin-right:5px; color:#ffc107;"></i> Afdeling
            </label>
            <select name="filter_afdeling" id="filter_afdeling" class="form-control border-warning">
               
            </select>
            </div>
        </div>
    
</div>

	<div class="card-body">
<div class="row">
    <div class="col-4 table-bordered">
        <button type="button" class="btn btn-info mb-2 w-100" id="btnShowJmlBatangMeter">
            <i class="fas fa-info-circle"></i> Info Kriteria Jumlah Batang/Meter
        </button>       
        <table class="table table-bordered">
            <tbody>
                    <tr>
                        <td style="text-align:center">
                            <div style="width:20px; height:20px; background:#000000; border-radius:3px; margin:auto"></div>
                            <span class="font-weight-bolder" id="potensi-jml-Hitam" style="color:#000000; text-shadow: 1px 1px 2px #fff, 0 0 1px #fff;">0.0%</span>
                        </td>
                        <td style="text-align:center">
                            <div style="width:20px; height:20px; background:#FF0000; border-radius:3px; margin:auto"></div>
                            <span class="font-weight-bolder" id="potensi-jml-Merah" style="color:#FF0000; text-shadow: 1px 1px 2px #fff, 0 0 1px #fff;">0.0%</span>
                        </td>
                        <td style="text-align:center">
                            <div style="width:20px; height:20px; background:#FFFF00; border-radius:3px; margin:auto; border:1px solid #ccc"></div>
                            <span class="font-weight-bolder" id="potensi-jml-Kuning" style="color:#FFFF00; text-shadow: 1px 1px 2px #000, 0 0 1px #000;">0.0%</span>
                        </td>
                        <td style="text-align:center">
                            <div style="width:20px; height:20px; background:#008000; border-radius:3px; margin:auto"></div>
                            <span class="font-weight-bolder" id="potensi-jml-Hijau" style="color:#008000; text-shadow: 1px 1px 2px #fff, 0 0 1px #fff;">0.0%</span>
                        </td>
                        <td style="text-align:center">
                            <div style="width:20px; height:20px; background:#FFD700; border-radius:3px; margin:auto; border:1px solid #ccc"></div>
                            <span class="font-weight-bolder" id="potensi-jml-Emas" style="color:#FFD700; text-shadow: 1px 1px 2px #000, 0 0 1px #000;">0.0%</span>
                        </td>

                </tr>
             
            </tbody>
        </table>
        <div id="pie-container-jml" style="height:400px;"></div>
    </div>
    <div class="col-4 table-bordered">
        <button type="button" class="btn btn-success mb-2 w-100" id="btnShowTinggiBatang">
            <i class="fas fa-info-circle"></i> Info Kriteria Tinggi Batang (Mtr)
        </button>
        <table class="table table-bordered">
            <tbody>
                    <tr>

  <td style="text-align:center">
                            <div style="width:20px; height:20px; background:#000000; border-radius:3px; margin:auto"></div>
                            <span class="font-weight-bolder" id="potensi-tinggi-Hitam" style="color:#000000; text-shadow: 1px 1px 2px #fff, 0 0 1px #fff;">0.0%</span>
                        </td>
                        <td style="text-align:center">
                            <div style="width:20px; height:20px; background:#FF0000; border-radius:3px; margin:auto"></div>
                            <span class="font-weight-bolder" id="potensi-tinggi-Merah" style="color:#FF0000; text-shadow: 1px 1px 2px #fff, 0 0 1px #fff;">0.0%</span>
                        </td>
                        <td style="text-align:center">
                            <div style="width:20px; height:20px; background:#FFFF00; border-radius:3px; margin:auto; border:1px solid #ccc"></div>
                            <span class="font-weight-bolder" id="potensi-tinggi-Kuning" style="color:#FFFF00; text-shadow: 1px 1px 2px #000, 0 0 1px #000;">0.0%</span>
                        </td>
                        <td style="text-align:center">
                            <div style="width:20px; height:20px; background:#008000; border-radius:3px; margin:auto"></div>
                            <span class="font-weight-bolder" id="potensi-tinggi-Hijau" style="color:#008000; text-shadow: 1px 1px 2px #fff, 0 0 1px #fff;">0.0%</span>
                        </td>
                        <td style="text-align:center">
                            <div style="width:20px; height:20px; background:#FFD700; border-radius:3px; margin:auto; border:1px solid #ccc"></div>
                            <span class="font-weight-bolder" id="potensi-tinggi-Emas" style="color:#FFD700; text-shadow: 1px 1px 2px #000, 0 0 1px #000;">0.0%</span>
                        </td>

                </tr>
             
            </tbody>
        </table>
        <div id="pie-container-tinggi" style="height:400px;"></div>
    </div>
    <div class="col-4 table-bordered">
        <button type="button" class="btn btn-warning mb-2 w-100" id="btnShowDiameterBatang">
            <i class="fas fa-info-circle"></i> Info Kriteria Diameter Batang (mm)
        </button>
        <table class="table table-bordered">
            <tbody>
                    <tr>
                   <td style="text-align:center">
                            <div style="width:20px; height:20px; background:#000000; border-radius:3px; margin:auto"></div>
                            <span class="font-weight-bolder" id="potensi-diameter-Hitam" style="color:#000000; text-shadow: 1px 1px 2px #fff, 0 0 1px #fff;">0.0%</span>
                        </td>
                        <td style="text-align:center">
                            <div style="width:20px; height:20px; background:#FF0000; border-radius:3px; margin:auto"></div>
                            <span class="font-weight-bolder" id="potensi-diameter-Merah" style="color:#FF0000; text-shadow: 1px 1px 2px #fff, 0 0 1px #fff;">0.0%</span>
                        </td>
                        <td style="text-align:center">
                            <div style="width:20px; height:20px; background:#FFFF00; border-radius:3px; margin:auto; border:1px solid #ccc"></div>
                            <span class="font-weight-bolder" id="potensi-diameter-Kuning" style="color:#FFFF00; text-shadow: 1px 1px 2px #000, 0 0 1px #000;">0.0%</span>
                        </td>
                        <td style="text-align:center">
                            <div style="width:20px; height:20px; background:#008000; border-radius:3px; margin:auto"></div>
                            <span class="font-weight-bolder" id="potensi-diameter-Hijau" style="color:#008000; text-shadow: 1px 1px 2px #fff, 0 0 1px #fff;">0.0%</span>
                        </td>
                        <td style="text-align:center">
                            <div style="width:20px; height:20px; background:#FFD700; border-radius:3px; margin:auto; border:1px solid #ccc"></div>
                            <span class="font-weight-bolder" id="potensi-diameter-Emas" style="color:#FFD700; text-shadow: 1px 1px 2px #000, 0 0 1px #000;">0.0%</span>
                        </td>

                </tr>
             
            </tbody>
        </table>
        <div id="pie-container-diameter" style="height:400px;"></div>
    </div>
    <div class="col-4 table-bordered">
        <div id="bar-container-jml"></div>
    </div>
    <div class="col-4 table-bordered">
        <div id="bar-container-tinggi"></div>
        </div>
    <div class="col-4 table-bordered">
        <div id="bar-container-diameter"></div>
        </div>
</div>
		@include('footer')
</div>
</div>

<div class="modal fade" id="modalJmlBatangMeter" tabindex="-1" role="dialog" aria-labelledby="modalJmlBatangMeterLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
              <div class="modal-header bg-success text-white">
                <h5 class="modal-title" id="modalJmlBatangMeterLabel">Kriteria Jumlah Batang/Meter</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 class="table-responsive mb-3">
                  <table class="table table-bordered table-sm text-center">
                    <thead class="bg-warning font-weight-bold">
                      <tr>
                        <th>Kriteria</th>
                        <?php for($i=1;$i<=12;$i++): ?>
                          <th><?= $i ?></th>
                        <?php endfor; ?>
                        <th>> BST</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td class="font-weight-bold">a. Emas</td>
                        <td>&ge;8</td><td>&ge;10</td><td>&ge;14</td><td>&ge;15</td><td>&ge;13</td><td>&ge;12</td><td>&ge;11</td><td>&ge;11</td><td>&ge;10</td><td>&ge;10</td><td>&ge;10</td><td>&ge;10</td>
                        <td></td>
                      </tr>
                      <tr>
                        <td class="font-weight-bold">b. Hijau</td>
                        <td>7 - 8</td><td>9 - 10</td><td>13 - 14</td><td>14 - 15</td><td>12 - 13</td><td>11 - 12</td><td>10 - 11</td><td>10 - 11</td><td>9 - 10</td><td>9 - 10</td><td>9 - 10</td><td>9 - 10</td>
                        <td></td>
                      </tr>
                      <tr>
                        <td class="font-weight-bold">c. Kuning</td>
                        <td>6 - 7</td><td>8 - 9</td><td>12 - 13</td><td>13 - 14</td><td>11 - 12</td><td>10 - 11</td><td>9 - 10</td><td>9 - 10</td><td>8 - 9</td><td>8 - 9</td><td>8 - 9</td><td>8 - 9</td>
                        <td></td>
                      </tr>
                      <tr>
                        <td class="font-weight-bold">d. Merah</td>
                        <td>5 - 6</td><td>7 - 8</td><td>11 - 12</td><td>12 - 13</td><td>10 - 11</td><td>9 - 10</td><td>8 - 9</td><td>8 - 9</td><td>7 - 8</td><td>7 - 8</td><td>7 - 8</td><td>7 - 8</td>
                        <td></td>
                      </tr>
                      <tr>
                        <td class="font-weight-bold">e. Hitam</td>
                        <td>&lt; 5</td><td>&lt; 7</td><td>&lt; 11</td><td>&lt; 12</td><td>&lt; 10</td><td>&lt; 9</td><td>&lt; 8</td><td>&lt; 8</td><td>&lt; 7</td><td>&lt; 7</td><td>&lt; 7</td><td>&lt; 7</td>
                        <td></td>
                      </tr>
                    </tbody>
                  </table>
                  <small class="text-muted">*) Sumber : Laoh (1986), data diolah P3GI</small>
                </div>
                <div class="mb-2">
                  <strong>Narasi dan literatur yang digunakan :</strong>
                  <ul>
                    <li>Jumlah batang/meter sangat ditentukan pada fase perkecambahan, dimana faktor perkecambahan dipengaruhi oleh interkasi genotip dan lingkungan. Pada faktor genotip ditentukan oleh pemilihan varietas yang sesuai dengan tipologi lahan.</li>
                    <li>Kunci sukses pada fase perkecambahan (umur 1 - 1,5 bulan) adalah kemurnian varietas, seleksi dan sortasi benih, jumlah benih per hektar, pemberian air dan nutrisi (Nitrogen &amp; P2O5)</li>
                    <li>Kriteria kerapatan batang dinyatakan tinggi (&gt; 10), sedang (8-10) dan rendah(&lt; 8) batang per meter juring.</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 class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
              </div>
            </div>
          </div>
        </div>


        <div class="modal fade" id="modalTinggiBatang" tabindex="-1" role="dialog" aria-labelledby="modalTinggiBatangLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
              <div class="modal-header bg-success text-white">
                <h5 class="modal-title" id="modalTinggiBatangLabel">Kriteria Tinggi Batang (Mtr)</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 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>
                        <?php for($i=1;$i<=12;$i++): ?>
                          <th><?= $i ?></th>
                        <?php 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 class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
              </div>
            </div>
          </div>
        </div>

        <div class="modal fade" id="modalDiameterBatang" tabindex="-1" role="dialog" aria-labelledby="modalDiameterBatangLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
              <div class="modal-header bg-success text-dark">
                <h5 class="modal-title" id="modalDiameterBatangLabel">Kriteria Diameter Batang (mm)</h5>
                <button type="button" class="close text-dark" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </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>
                        <?php for($i=1;$i<=12;$i++): ?>
                          <th><?= $i ?></th>
                        <?php endfor; ?>
                        <th>> BST</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td class="font-weight-bold">a. Emas</td>
                        <td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>&ge; 25</td><td>&ge; 25</td><td>&ge; 25</td><td>&ge; 25</td><td>&ge; 25</td><td>&ge; 25</td><td>&ge; 25</td>
                        <td></td>
                      </tr>
                      <tr>
                        <td class="font-weight-bold">b. Hijau</td>
                        <td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>24 - 25</td><td>24 - 25</td><td>24 - 25</td><td>24 - 25</td><td>24 - 25</td><td>24 - 25</td><td>24 - 25</td>
                        <td></td>
                      </tr>
                      <tr>
                        <td class="font-weight-bold">c. Kuning</td>
                        <td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>23 - 24</td><td>23 - 24</td><td>23 - 24</td><td>23 - 24</td><td>23 - 24</td><td>23 - 24</td><td>23 - 24</td>
                        <td></td>
                      </tr>
                      <tr>
                        <td class="font-weight-bold">d. Merah</td>
                        <td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>22 - 23</td><td>22 - 23</td><td>22 - 23</td><td>22 - 23</td><td>22 - 23</td><td>22 - 23</td><td>22 - 23</td>
                        <td></td>
                      </tr>
                      <tr>
                        <td class="font-weight-bold">e. Hitam</td>
                        <td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>10 - 22</td><td>10 - 22</td><td>10 - 22</td><td>10 - 22</td><td>10 - 22</td><td>10 - 22</td><td>10 - 22</td>
                        <td></td>
                      </tr>
                      <tr>
                        <td class="font-weight-bold">f. Abu-abu</td>
                        <td>&lt; 10</td><td>&lt; 10</td><td>&lt; 10</td><td>&lt; 10</td><td>&lt; 10</td><td>&lt; 10</td><td>&lt; 10</td><td>&lt; 10</td><td>&lt; 10</td><td>&lt; 10</td><td>&lt; 10</td><td>&lt; 10</td>
                        <td></td>
                      </tr>
                    </tbody>
                  </table>
                  <small class="text-muted">*) Konfimasi data pendukung ke P3GI dab Puslit</small>
                </div>
                <div class="mb-2">
                  <strong>Narasi dan literatur yang digunakan :</strong>
                  <ul>
                    <li>Diameter batang dipengaruhi oleh genetik varietas dan kesesuaian tipologi wilayah.</li>
                    <li>Sehingga dengan varietas yang sama belum tentu memiliki ukuran diameter yang sama jika ditanam pada tipologi lahan yang berbeda.</li>
                  </ul>
                  <strong>Literatur:</strong>
                  <ol>
                    <li>Data uji multilokasi P3GI</li>
                    <li>Data percobaan orvar Puslit Jengkol</li>
                    <li>Data percobaan orvar Puslit Sukosari</li>
                  </ol>
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
              </div>
            </div>
          </div>
        </div>

                <script>
        $(function(){
            $('#btnShowDiameterBatang').on('click', function(){
                $('#modalDiameterBatang').modal('show');
            });
        });
        </script>
                <script>
        $(function(){
            $('#btnShowTinggiBatang').on('click', function(){
                $('#modalTinggiBatang').modal('show');
            });
        });
        </script>
        <script>
        $(function(){
            $('#btnShowJmlBatangMeter').on('click', function(){
                $('#modalJmlBatangMeter').modal('show');
            });
        });
        </script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script>
                            $("#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"});


function renderPie(container, title, data, categories) {
  // Render pie chart
  Highcharts.chart(container, {
    chart: { type: 'pie' },
    title: { text: title },
    plotOptions: {
      pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        dataLabels: {
          enabled: true,
          format: '{point.name}: {point.y}<br>{point.percentage:.1f} %',
        },
        point: {
          events: {
            click: function() {
              var afdeling = document.getElementById('filter_afdeling').value;
              var kebun = document.getElementById('filter_kebun').value;
              var rayon = document.getElementById('filter_rayon').value;
              if (container === 'pie-container-jml') {
                SximoModal('getTableDataPicaMorfologi?pica=' + encodeURIComponent(this.name)+'&kebun=' + kebun + '&rayon=' + rayon + '&afd=' + afdeling+'&tipe=1', 'Data Detail Petak PICA ' + this.name);
              } else if (container === 'pie-container-tinggi') {
                SximoModal('getTableDataPicaMorfologi?pica=' + encodeURIComponent(this.name)+'&kebun=' + kebun + '&rayon=' + rayon + '&afd=' + afdeling+'&tipe=2', 'Data Detail Petak PICA Tinggi ' + this.name);
              } else if (container === 'pie-container-diameter') {
                SximoModal('getTableDataPicaMorfologi?pica=' + encodeURIComponent(this.name)+'&kebun=' + kebun + '&rayon=' + rayon + '&afd=' + afdeling+'&tipe=3', 'Data Detail Petak PICA Diameter ' + this.name);
              }
            }
          }
        },
        showInLegend: false
      }
    },
    series: [{
      name: 'Jumlah',
      colorByPoint: true,
      data: categories.map((cat, i) => {
        let color = undefined;
        if (cat.toLowerCase() === 'emas') color = '#FFD700';
        else if (cat.toLowerCase() === 'hijau') color = '#008000';
        else if (cat.toLowerCase() === 'kuning') color = '#FFFF00';
        else if (cat.toLowerCase() === 'merah') color = '#FF0000';
        else if (cat.toLowerCase() === 'hitam') color = '#000000';
        else color = 'grey'; // Default color for other categories
        // Set jumlah batang ke potensi-jml-(i+1)
        if(container == 'pie-container-jml') {
          const potensiId = 'potensi-jml-' + cat;
          const potensiElem = document.getElementById(potensiId);
          if (potensiElem) {
            // Hitung prosentase
            const total = data.reduce((sum, val) => sum + val, 0);
            const percent = total > 0 ? ((data[i] / total) * 100).toFixed(1) : 0;
            potensiElem.innerHTML =  percent + '% ';
          }
        }
        // Set tinggi batang ke potensi-tinggi-(i+1)
        else if(container == 'pie-container-tinggi') {  
          const potensiId = 'potensi-tinggi-' + cat;
          const potensiElem = document.getElementById(potensiId);
          if (potensiElem) {
            // Hitung prosentase
            const total = data.reduce((sum, val) => sum + val, 0);
            const percent = total > 0 ? ((data[i] / total) * 100).toFixed(1) : 0;
            potensiElem.innerHTML =  percent + '% ';
          }
        }
        // Set diameter batang ke potensi-diameter-(i+1)
        else if(container == 'pie-container-diameter') {
          const potensiId = 'potensi-diameter-' + cat;
          const potensiElem = document.getElementById(potensiId);
          if (potensiElem) {
            // Hitung prosentase    
            const total = data.reduce((sum, val) => sum + val, 0);
            const percent = total > 0 ? ((data[i] / total) * 100).toFixed(1) : 0;
            potensiElem.innerHTML =  percent +  '% ';
          }
        }
      
        return {
          name: cat,
          y: data[i],
          color: color
        };
      })
    }]
  });
  // Tambahkan informasi total jumlah semua di bawah chart dengan tampilan menarik
  const total = data.reduce((sum, val) => sum + val, 0);
  let infoId = container + '-total-info';
  let infoElem = document.getElementById(infoId);
  if (!infoElem) {
    infoElem = document.createElement('div');
    infoElem.id = infoId;
    infoElem.style.fontWeight = 'bold';
    infoElem.style.marginTop = '12px';
    infoElem.style.padding = '10px 0';
    infoElem.style.textAlign = 'center';
    infoElem.style.borderRadius = '8px';
    infoElem.style.background = 'linear-gradient(90deg, #3bb54a 0%, #ffa500 60%, #1e90ff 100%)';
    infoElem.style.color = '#fff';
    infoElem.style.boxShadow = '0 2px 8px rgba(0,0,0,0.08)';
    let chartElem = document.getElementById(container);
    if (chartElem && chartElem.parentNode) {
      chartElem.parentNode.insertBefore(infoElem, chartElem.nextSibling);
    }
  }
  // Tambahkan ikon dan animasi angka
  infoElem.innerHTML = `
    <span style="font-size:1.3em;vertical-align:middle;">
      <i class="fas fa-chart-pie" style="margin-right:8px;color:#FFD700;text-shadow:1px 1px 2px #000;"></i>
      <span id="${infoId}-number" style="font-size:1.5em; font-weight:bold; color:#fff;">0</span>
      <span style="font-size:1em; margin-left:6px;">Total Data</span>
    </span>
  `;
  // Animasi angka total
  let current = 0;
  const step = Math.ceil(total / 30);
  function animateNumber() {
    if (current < total) {
      current += step;
      if (current > total) current = total;
      document.getElementById(`${infoId}-number`).textContent = current;
      requestAnimationFrame(animateNumber);
    } else {
      document.getElementById(`${infoId}-number`).textContent = total;
    }
  }
  animateNumber();
}

function renderBar(container, title, categories, data, warna) {
    // Group data by bulan_tanam and warna
    // categories: array of bulan_tanam
    // warna: array of warna (same order as data)
    // data: array of jumlah (same order as warna/categories)
    // Build series for each warna

    // Get unique warna
    const warnaSet = Array.from(new Set(warna));
    // Get unique bulan_tanam
    const bulanSet = Array.from(new Set(categories));

    // Build mapping: { warna: [jumlah per bulan_tanam] }
    const series = warnaSet.map(w => {
        // For each bulan_tanam, find jumlah for this warna
        const dataPerBulan = bulanSet.map(bulan => {
            let jumlah = 0;
            for (let i = 0; i < categories.length; i++) {
                if (categories[i] === bulan && warna[i] === w) {
                    jumlah = data[i];
                    break;
                }
            }
            return jumlah;
        });

        // Color mapping
        let color;
        switch (w.toLowerCase()) {
            case 'emas': color = '#FFD700'; break;
            case 'hijau': color = '#008000'; break;
            case 'kuning': color = '#FFFF00'; break;
            case 'merah': color = '#FF0000'; break;
            case 'hitam': color = '#000000'; break;
            default: color = 'grey';
        }

        return {
            name: w,
            data: dataPerBulan,
            color: color
        };
    });

    Highcharts.chart(container, {
        chart: { type: 'column' },
        title: { text: title },
        xAxis: {
            categories: bulanSet.sort(),
            crosshair: true,
            title: { text: 'Umur (BST)' }
        },
        yAxis: {
            min: 0,
            title: { text: 'Jumlah' }
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                pointPadding: 0.2,
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                    format: '{point.y}<br>({point.percentage:.1f}%)'
                }
            }
        },
        legend: { enabled: false },
        series: series,
    });
}

// Bar chart load
function loadBarChart(kebun, rayon, afdeling, tipe, container, label) {
    var url = '/picapetak/chartBarDataPica';
    var params = [];
    if (kebun) params.push('kebun=' + kebun);
    if (rayon) params.push('rayon=' + rayon);
    if (afdeling) params.push('afd=' + afdeling);
    if (tipe) params.push('tipe=' + tipe);
    if (params.length) url += '?' + params.join('&');
    $.get(url, function(res) {
        renderBar(container, label, res.categories, res.data, res.warna);
    });
}

// Initial bar chart load



let chartsLoaded = false;

$('#filter_kebun, #filter_rayon, #filter_afdeling').on('change', function() {
  var afdeling = document.getElementById('filter_afdeling').value;
  var kebun = document.getElementById('filter_kebun').value;
  var rayon = document.getElementById('filter_rayon').value;
  

  if(chartsLoaded) {
    return false;
  }
  
  chartsLoaded = true;

  $.get('/picapetak/chartPieDataJmlBatangPica?kebun=' + kebun + '&rayon=' + rayon + '&afd=' + afdeling, function(res) {
    renderPie('pie-container-jml', 'Jumlah Batang', res.data, res.categories);
  });
  
  $.get('/picapetak/chartPieDataTinggiBatangPica?kebun=' + kebun + '&rayon=' + rayon + '&afd=' + afdeling, function(res) {
    renderPie('pie-container-tinggi', 'Tinggi Batang', res.data, res.categories);
  });
  
  $.get('/picapetak/chartPieDataDiameterBatangPica?kebun=' + kebun + '&rayon=' + rayon + '&afd=' + afdeling, function(res) {
    renderPie('pie-container-diameter', 'Diameter Batang', res.data, res.categories);
    chartsLoaded = false;
  });
});
// Initial load



// $.get('/picapetak/chartPieDataJmlBatangPica', function(res) {
//     renderPie('pie-container-jml', 'Jumlah Batang', res.data, res.categories);
//     loadBarChart('', '', '', 1, 'bar-container-jml', 'Jumlah Batang');
// });
// $.get('/picapetak/chartPieDataTinggiBatangPica', function(res) {
//     renderPie('pie-container-tinggi', 'Tinggi Batang', res.data, res.categories);
//     loadBarChart('', '', '', 2, 'bar-container-tinggi', 'Tinggi Batang');
// });
// $.get('/picapetak/chartPieDataDiameterBatangPica', function(res) {
//     renderPie('pie-container-diameter', 'Diameter Batang', res.data, res.categories);
//     loadBarChart('', '', '', 3, 'bar-container-diameter', 'Diameter Batang');
// });
</script>
@stop