@extends('layouts.app')

@section('content')
{{--*/ usort($tableGrid, "SiteHelpers::_sort") /*--}}
<div class="page-titles">
  <h2> {{ $pageTitle }} <small> {{ $pageNote }} </small></h2>

  <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="row">
	<div class="col-6">
		<div id="pie-container" style="height:400px;"></div>
        <button type="button" class="btn btn-sm btn-info mb-2" id="btnInfoKategori" style="float:right;">
            <i class="fas fa-info-circle"></i> Info Kategori PICA
        </button>
        <div id="modalKategoriInfo" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modalKategoriInfoLabel" aria-hidden="true">
          <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
              <div class="modal-header bg-info text-white">
                <h5 class="modal-title" id="modalKategoriInfoLabel">Info Kategori 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">
                <table class="table table-bordered table-sm mb-0">
                  <thead>
                    <tr>
                      <th>Kategori</th>
                      <th>Kriteria</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr><td style="color:#FFD700;font-weight:bold;">Emas</td><td>&ge; 100 ton/ha</td></tr>
                    <tr><td style="color:#008000;font-weight:bold;">Hijau</td><td>85 &le; X &lt; 100 ton/ha</td></tr>
                    <tr><td style="color:#FFFF00;font-weight:bold;">Kuning</td><td>70 &le; X &lt; 85 ton/ha</td></tr>
                    <tr><td style="color:#FF0000;font-weight:bold;">Merah</td><td>60 &le; X &lt; 70 ton/ha</td></tr>
                    <tr><td style="color:#000000;font-weight:bold;">Hitam</td><td>&lt; 60 ton/ha</td></tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
        <script>
        document.getElementById('btnInfoKategori').addEventListener('click', function() {
            $('#modalKategoriInfo').modal('show');
        });
        </script>
	</div>
	<div class="col-6">
		<div id="pie-container-luas" style="height:400px;"></div>
	</div>
</div>
</div>

<div  class="card">
	<div class="card-body">
		<div class="toolbar-nav">
			<div class="row">
				<div class="col-md-6">
					<div class="btn-group">
						
				    </div>	
				</div>    
			</div>
		<div class="table-modern-wrapper" style="position:relative;">
			<div class="table-responsive" style="min-height:300px; max-height:500px; overflow-y:auto;">
                <div class="d-flex justify-content-end mb-2">
                    <?php
                    $clusters = ['SUMATERA 1','SUMATERA 2','JATENG','JATIM 1','JATIM 2','SULAWESI'];

                    $html = '<div style="margin-bottom:10px; margin-right:auto; display:flex; align-items:center;">';
                    $html .= '<label style="font-weight:600;margin-right:8px;">Cluster:</label>';
                    $html .= '<select id="clusterFilter" style="padding:4px 8px;">';
                    $html .= '<option value="">Semua</option>';
                    foreach ($clusters as $c) {
                        $html .= '<option value="' . htmlspecialchars($c, ENT_QUOTES, 'UTF-8') . '">' . htmlspecialchars($c, ENT_QUOTES, 'UTF-8') . '</option>';
                    }
                    $html .= '</select>';
                    $html .= '</div>';

                    echo $html;
                    ?>
                    <button id="btnExportExcel" class="btn btn-xm btn-success">
                        <i class="fas fa-file-excel"></i> Download Excel
                    </button>
                </div>

<div id="loaddatapica"></div>               

				<input type="hidden" name="md" value="" />
			</div>

		</div>
		<style>
		.table-modern-wrapper .table thead th {
			position: sticky;
			top: 0;
			background: #343a40;
			color: #fff;
			z-index: 2;
			box-shadow: 0 2px 2px -1px rgba(0,0,0,0.1);
		}
		.table-modern-wrapper .table {
			border-radius: 8px;
			overflow: hidden;
			box-shadow: 0 2px 8px rgba(0,0,0,0.05);
		}
		.table-modern-wrapper .table-striped tbody tr:nth-of-type(odd) {
			background-color: #f8f9fa;
		}
		.table-modern-wrapper .table-hover tbody tr:hover {
			background-color: #e9ecef;
		}
		</style>
		
		
		@include('footer')
	</div>  
</div>
<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"});

loadTablePicaPetak();

// Load table on filter change
['filter_kebun', 'filter_rayon', 'filter_afdeling','clusterFilter'].forEach(function(id) {
    document.getElementById(id).addEventListener('change', loadTablePicaPetak);
});

// Listen for filter changes
['filter_kebun', 'filter_rayon', 'filter_afdeling'].forEach(function(id) {
    document.getElementById(id).addEventListener('change', fetchPieDataPica);
});


// Initial load
fetchPieDataPica();

// Listen for filter changes
['filter_kebun', 'filter_rayon', 'filter_afdeling'].forEach(function(id) {
    document.getElementById(id).addEventListener('change', fetchPieDataLuasPica);
});

// Initial load
fetchPieDataLuasPica();
               

                function loadTablePicaPetak() {
                    const kebun = document.getElementById('filter_kebun').value;
                    const rayon = document.getElementById('filter_rayon').value;
                    const afdeling = document.getElementById('filter_afdeling').value;
                    const cluster = document.getElementById('clusterFilter').value;

                    const params = new URLSearchParams();
                    if (kebun) params.append('kebun', kebun);
                    if (rayon) params.append('rayon', rayon);
                    if (afdeling) params.append('afdeling', afdeling);
                    if (cluster) params.append('cluster', cluster);

                    const container = document.getElementById('loaddatapica');
                    container.innerHTML = '<div style="text-align:center;padding:40px;"><span class="spinner-border"></span> Loading...</div>';

                    fetch('{{ url($pageModule . "/getAjaxDataPicaPetak") }}' + (params.toString() ? '?' + params.toString() : ''), {
                        headers: { 'X-Requested-With': 'XMLHttpRequest' }
                    })
                    .then(response => {
                        if (!response.ok) throw new Error('Network response was not ok');
                        return response.text();
                    })
                    .then(html => {
                        container.innerHTML = html;
                        // reinitialize any JS plugins inside the loaded html if needed
                        if (window.$) {
                            try {
                                // example: re-enable tooltips
                                $('[data-toggle="tooltip"]').tooltip();
                            } catch (e) {}
                        }
                    })
                    .catch(err => {
                        console.error(err);
                        container.innerHTML = '<div class="text-danger p-3">Gagal memuat data. Silakan coba lagi.</div>';
                    });
                
                 
                }

                

                 


                                    // Tampilkan loading sebelum fetch data
document.getElementById('pie-container').innerHTML = '<div style="text-align:center;padding-top:180px;"><span class="spinner-border"></span> Loading...</div>';

function fetchPieDataPica() {
    // Get selected filter values
    const kebun = document.getElementById('filter_kebun').value;
    const rayon = document.getElementById('filter_rayon').value;
    const afdeling = document.getElementById('filter_afdeling').value;

    // Build query string
    const params = new URLSearchParams();
    if (kebun) params.append('kebun', kebun);
    if (rayon) params.append('rayon', rayon);
    if (afdeling) params.append('afdeling', afdeling);

    // Show loading
    document.getElementById('pie-container').innerHTML = '<div style="text-align:center;padding-top:180px;"><span class="spinner-border"></span> Loading...</div>';

    fetch('{{ url($pageModule . "/chartPieDataPica") }}' + (params.toString() ? '?' + params.toString() : ''))
        .then(response => response.json())
        .then(res => {
            Highcharts.chart('pie-container', {
                chart: { type: 'pie' },
                title: { text: 'DATA PETAK PICA' },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.y}</b> ({point.percentage:.1f}%)'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.y} ({point.percentage:.1f}%)'
                        },
                        point: {
                            events: {
                                click: function() {
                                    const kebun = encodeURIComponent(document.getElementById('filter_kebun').value || '');
                                    const rayon = encodeURIComponent(document.getElementById('filter_rayon').value || '');
                                    const afdeling = encodeURIComponent(document.getElementById('filter_afdeling').value || '');
                                    const url = 'picapetak/getTableDataPica?pica=' + encodeURIComponent(this.name) + '&kebun=' + kebun + '&rayon=' + rayon + '&afdeling=' + afdeling;
                                    SximoModal(url, 'Data Petak PICA  ' + this.name);
                                }
                            }
                        }
                    }
                },
                series: [{
                    name: 'Jumlah Petak',
                    colorByPoint: true,
                    data: res.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';
                        return {
                            name: cat,
                            y: res.data[i],
                            color: color
                        };
                    })
                }]
            });
        });
}


// Tampilkan loading sebelum fetch data
document.getElementById('pie-container-luas').innerHTML = '<div style="text-align:center;padding-top:180px;"><span class="spinner-border"></span> Loading...</div>';

function fetchPieDataLuasPica() {
    // Get selected filter values
    const kebun = document.getElementById('filter_kebun').value;
    const rayon = document.getElementById('filter_rayon').value;
    const afdeling = document.getElementById('filter_afdeling').value;

    // Build query string
    const params = new URLSearchParams();
    if (kebun) params.append('kebun', kebun);
    if (rayon) params.append('rayon', rayon);
    if (afdeling) params.append('afdeling', afdeling);

    // Show loading
    document.getElementById('pie-container-luas').innerHTML = '<div style="text-align:center;padding-top:180px;"><span class="spinner-border"></span> Loading...</div>';

    fetch('{{ url($pageModule . "/chartPieDataLuasPica") }}' + (params.toString() ? '?' + params.toString() : ''))
        .then(response => response.json())
        .then(res => {
            Highcharts.chart('pie-container-luas', {
                chart: { type: 'column' },
                title: { text: 'LUAS PETAK PICA' },
                xAxis: {
                    categories: res.categories,
                    title: { text: 'Kategori' }
                },
                yAxis: {
                    min: 0,
                    title: { text: 'Total Luas (Ha)' }
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.y} Ha</b> ({point.percentage:.1f}%)'
                },
                plotOptions: {
                    column: {
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.y} (Ha)',
                        },
                        point: {
                            events: {
                                click: function() {
                                    const kebun = encodeURIComponent(document.getElementById('filter_kebun').value || '');
                                    const rayon = encodeURIComponent(document.getElementById('filter_rayon').value || '');
                                    const afdeling = encodeURIComponent(document.getElementById('filter_afdeling').value || '');
                                    const url = 'picapetak/getTableDataPica?pica=' + encodeURIComponent(this.name) + '&kebun=' + kebun + '&rayon=' + rayon + '&afdeling=' + afdeling;
                                    SximoModal(url, 'Data Petak PICA  ' + this.name);
                                }
                            }
                        }
                    }
                },
                series: [{
                    name: 'Total Luas',
                    showInLegend: false,
                    colorByPoint: true,
                    data: res.categories.map((cat, i) => {
                        let color = undefined;
                        if (cat.toLowerCase() === 'emas') color = '#FFD700'; // gold
                        else if (cat.toLowerCase() === 'hijau') color = '#008000'; // green
                        else if (cat.toLowerCase() === 'kuning') color = '#FFFF00'; // yellow
                        else if (cat.toLowerCase() === 'merah') color = '#FF0000'; // red
                        else if (cat.toLowerCase() === 'hitam') color = '#000000'; // black
                        return {
                            name: cat,
                            y: res.data[i],
                            color: color
                        };
                    })
                }]
            });
        });
}


</script>

 <!-- SheetJS (XLSX) -->
                <script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script>

                <script>
                (function(){
                    function getFilename() {
                        const kebun = document.getElementById('filter_kebun').value || 'allkebun';
                        const rayon = document.getElementById('filter_rayon').value || 'allrayon';
                        const afd = document.getElementById('filter_afdeling').value || 'allafd';
                        const ts = new Date().toISOString().slice(0,19).replace(/:/g,'-');
                        return 'pica_petak_' + kebun + '_' + rayon + '_' + afd + '_' + ts + '.xlsx';
                    }

                    function exportFromTableDOM(tableEl, filename) {
                        const wb = XLSX.utils.table_to_book(tableEl, { sheet: "Sheet1" });
                        XLSX.writeFile(wb, filename);
                    }

                    function exportFromDataTableAPI(dt, filename) {
                        const headers = [];
                        $('#modernTable thead th').each(function(){ headers.push($(this).text().trim()); });

                        const rows = [headers];
                        dt.rows().every(function(){
                            const d = this.data();
                            // if row is object, use its values; otherwise use as-is
                            if (typeof d === 'object' && d !== null && !Array.isArray(d)) {
                                rows.push(Object.values(d));
                            } else {
                                rows.push(Array.isArray(d) ? d : [d]);
                            }
                        });

                        const ws = XLSX.utils.aoa_to_sheet(rows);
                        const wb = XLSX.utils.book_new();
                        XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
                        XLSX.writeFile(wb, filename);
                    }

                    document.getElementById('btnExportExcel').addEventListener('click', function(){
                        const filename = getFilename();
                        const tableEl = document.getElementById('tablepica');

                        // Prefer DOM export if table rows present
                        if (tableEl && tableEl.tBodies && tableEl.tBodies[0].rows.length > 0) {
                            try {
                                exportFromTableDOM(tableEl, filename);
                                return;
                            } catch (e) {
                                console.warn('table_to_book failed, fallback to DataTable API', e);
                            }
                        }

                        // Fallback: use DataTable API to build workbook
                        if ($.fn.dataTable && $.fn.dataTable.isDataTable('#tablepica')) {
                            const dt = $('#tablepica').DataTable();
                            const dataCount = dt.rows().count();
                            if (dataCount === 0) {
                                alert('Tidak ada data untuk diunduh.');
                                return;
                            }
                            exportFromDataTableAPI(dt, filename);
                            return;
                        }

                        alert('Tidak dapat mengekspor. Pastikan tabel sudah dimuat.');
                    });
                })();
                </script>
@stop