@extends('layouts.app')

@section('content')
{{--*/ usort($tableGrid, "SiteHelpers::_sort") /*--}}
<div class="page-titles">
  <h2> {{ $pageTitle }} <small> {{ $pageNote }} </small></h2>
</div>
<div  class="card">
	<div class="card-body">
		<div class="toolbar-nav">
			<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 class="col-md-4">
					<label class="font-weight-bolder text-warning" for="filter_tanggal_awal">
						<i class="fas fa-calendar-alt" style="margin-right:5px; color:#ffc107;"></i> Tanggal Awal
					</label>
					<input type="date" name="filter_tanggal_awal" id="filter_tanggal_awal" class="form-control border-warning">

				</div>
				<div class="col-md-4">
					<label class="font-weight-bolder text-warning mt-2" for="filter_tanggal_akhir">
						<i class="fas fa-calendar-alt" style="margin-right:5px; color:#ffc107;"></i> Tanggal Akhir
					</label>
					<input type="date" name="filter_tanggal_akhir" id="filter_tanggal_akhir" class="form-control border-warning">
				</div>
				<div class="col-md-4">
					<label class="font-weight-bolder text-warning mt-2" for="filter_tanggal_akhir">
						-
					</label>
					<button id="btn_get_chart" class="btn btn-success btn-block">
						<i class="fas fa-chart-bar" style="margin-right:6px;"></i> Get Chart
					</button>

					
					
				</div>
			</div>
		<div >

	
	<div class="row mb-3">
		<div class="col-md-4">
			<div id="chart_jml_petak" style="height: 300px;"></div>
		</div>
		<div class="col-md-4">
			<div id="chart_ha_tebang" style="height: 300px;"></div>
		</div>
		<div class="col-md-4">
			<div id="chart_protas" style="height: 300px;"></div>
		</div>
	</div>

	


		 <div class="table-responsive" style="min-height:300px;">
		<table id="rekapTable" class="table table-hover table-striped">
			<thead>
				<tr>
					<th>No</th>
					<th>kode_kebun</th>
					<th>nama_kebun</th>
					<th>kode_rayon</th>
					<th>nama_rayon</th>
					<th>afdeling</th>
					<th>lahan_id</th>
					<th>deskripsi_petak</th>
					<th>luas_poligon</th>
					<th>kemasakan</th>
					<th>bulan_tanam</th>
					<th>tgl_timbang_terakhir</th>
					<th>umur_tanaman_ditebang</th>
					<th>luas_takmar</th>
					<th>ton_takmar</th>
					<th>protas_takmar</th>
					<th>ha_tebang</th>
					<th>netto_ton</th>
					<th>protas</th>
					<th>persen_ha_tebang</th>
					<th>persen_netto_ton</th>
					<th>persen_protas</th>
					<th>keterangan_1</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>



		<script>
		$(document).ready(function() {
			var table = $('#rekapTable').DataTable({
				processing: true,
				serverSide: false,
				ajax: {
					url: '{{ url("rekaptimbangpetaktakmar/getDatatable") }}',
					data: function (d) {
						d.filter_kebun = $('#filter_kebun').val();
						d.filter_rayon = $('#filter_rayon').val();
						d.filter_afdeling = $('#filter_afdeling').val();
						d.filter_tanggal_awal = $('#filter_tanggal_awal').val();
						d.filter_tanggal_akhir = $('#filter_tanggal_akhir').val();
					},
					dataSrc: 'data'
				},
				columns: [
					{ 
						data: null,
						render: function (data, type, row, meta) {
							return meta.row + 1;
						}
					},
					{ data: 'kode_kebun' },
					{ data: 'nama_kebun' },
					{ data: 'kode_rayon' },
					{ data: 'nama_rayon' },
					{ data: 'afdeling' },
					{ data: 'lahan_id' },
					{ data: 'deskripsi_petak' },
					{ data: 'luas_poligon' },
					{ data: 'kemasakan' },
					{ data: 'bulan_tanam' },
					{ data: 'tgl_timbang_terakhir' },
					{ data: 'umur_tanaman_ditebang' },
					{ data: 'luas_takmar' },
					{ data: 'ton_takmar' },
					{ data: 'protas_takmar' },
					{ data: 'ha_tebang' },
					{ data: 'netto_ton' },
					{ data: 'protas' },
					{ data: 'persen_ha_tebang' },
					{ data: 'persen_netto_ton' },
					{ data: 'persen_protas' },
					{ data: 'keterangan_1' }
				]
			});

	$('#btn_get_chart').on('click', function(e){
							e.preventDefault();
							var $btn = $(this);
							$btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin" style="margin-right:6px;"></i> Loading...');
							// reload table and charts
							$('#rekapTable').DataTable().ajax.reload(null, false);
							loadCharts();
							// re-enable after a short delay (chart ajax will also finish, this is just UX)
							setTimeout(function(){
								$btn.prop('disabled', false).html('<i class="fas fa-chart-bar" style="margin-right:6px;"></i> Get Chart');
							}, 1200);
						});
		});
		</script>
		<input type="hidden" name="md" value="" />
		</div>
		
		
		@include('footer')
		<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"});


			</script>

			<script src="https://code.highcharts.com/highcharts.js"></script>

			<script>

		function renderColumnChart(container, title, categories, data, units, color){
			Highcharts.chart(container, {
				chart: { type: 'column' },
				title: { text: title },
				xAxis: { categories: categories, crosshair: true },
				yAxis: { title: { text: units || null } },
				plotOptions: {
					column: {
						cursor: 'pointer',
						dataLabels: {
							enabled: true,
							formatter: function() {
								if (this.y === null || this.y === undefined) return '';
								return this.y + (units ? ' ' + units : '');
							},
							inside: false,
							style: { fontWeight: '600', color: '#000' }
						},
						point: {
							events: {
								click: function() {
									try {
										var category = this.category;
										var seriesName = this.series && this.series.name ? this.series.name : title;
										// include current filters so modal can show contextual detail
										var params = [
											'category=' + encodeURIComponent(category),
											'series=' + encodeURIComponent(seriesName),
											'filter_kebun=' + encodeURIComponent($('#filter_kebun').val() || ''),
											'filter_rayon=' + encodeURIComponent($('#filter_rayon').val() || ''),
											'filter_afdeling=' + encodeURIComponent($('#filter_afdeling').val() || ''),
											'filter_tanggal_awal=' + encodeURIComponent($('#filter_tanggal_awal').val() || ''),
											'filter_tanggal_akhir=' + encodeURIComponent($('#filter_tanggal_akhir').val() || ''),
											'filter_umur=' + encodeURIComponent(category || '')
										].join('&');
										var url = 'rekaptimbangpetaktakmar/getGrafikRaw?' + params;
										if (typeof SximoModal === 'function') {
											SximoModal(url, 'detail rekap');
										} else {
											// fallback: open in new window
											window.open(url, '_blank');
										}
									} catch (e) {
										console.error('Error opening detail modal', e);
									}
								}
							}
						}
					}
				},
				tooltip: {
					headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
					pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
								 '<td style="padding:0"><b>{point.y}' + (units ? ' ' + units : '') + '</b></td></tr>',
					footerFormat: '</table>',
					shared: false,
				},
				credits: { enabled: false },
				series: [{ name: title, data: data, color: color }]
			});
		}

		function loadCharts(){
			$.ajax({
				url: '{{ url("rekaptimbangpetaktakmar/getChart") }}',
				method: 'GET',
				data: {
					filter_kebun: $('#filter_kebun').val(),
					filter_rayon: $('#filter_rayon').val(),
					filter_afdeling: $('#filter_afdeling').val(),
					filter_tanggal_awal: $('#filter_tanggal_awal').val(),
					filter_tanggal_akhir: $('#filter_tanggal_akhir').val()
				},
				dataType: 'json'
			}).done(function(res){
				var cats = res.categories || [];
				var series = res.series || [];
				// defensive mapping in case backend ordering changes
				var s_jml = series.find(s=>/jml/i.test(s.name)) || series[0] || { data: [] };
				var s_ha  = series.find(s=>/ha/i.test(s.name)) || series[1] || { data: [] };
				var s_pro = series.find(s=>/protas/i.test(s.name)) || series[2] || { data: [] };

				// assign distinct colors for each chart
				var color_jml = '#28a745'; // green
				var color_ha  = '#007bff'; // blue
				var color_pro = '#ff9f1a'; // orange

				renderColumnChart('chart_jml_petak', s_jml.name || 'Jml Petak', cats, s_jml.data || [], null, color_jml);
				renderColumnChart('chart_ha_tebang', 'Ha Tebang', cats, s_ha.data || [], '', color_ha);
				renderColumnChart('chart_protas', 'Protas', cats, s_pro.data || [], '', color_pro);
			}).fail(function(){
				// clear charts on error
				$('#chart_jml_petak, #chart_ha_tebang, #chart_protas').each(function(){
					$(this).html('<div class="text-muted p-3">Gagal memuat data chart</div>');
				});
			});
		}

	</script>
	</div>  
</div>
@stop