@extends('layouts.app')

@section('content')
{{--*/ usort($tableGrid, "SiteHelpers::_sort") /*--}}

<div  class="card">
	<div class="card-body" style="background: linear-gradient(0deg, rgb(34 193 195 / 14%) 0%, rgb(253 187 45 / 10%) 100%);}">
		<div class="toolbar-nav">
			<div class="row">
				    
			</div>
		<div >

		<div class="d-flex justify-content-center my-4 w-100">
			<h3 class="px-4 py-2 rounded w-100 text-center" style="background: linear-gradient(90deg, #007bff 0%, #28a745 100%); color: #fff;">
				Monitoring PICA
			</h3>
		</div>
		<div class="row mb-4">
			<div class="col-md-4">
				<div class="card text-center shadow" style="background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);">
					<div class="card-body">
						<i class="fas fa-th-large fa-2x mb-2" style="color:#007bff;"></i>
						<h5 class="card-title font-bold">Total Petak</h5>
						<p class="card-text display-4 font-weight-bold text-info" style="font-size:3rem; letter-spacing:2px; border: 2px solid #fff; border-radius: 10px; background: rgba(255,255,255,0.2); display: inline-block; padding: 0.5em 1em;">
							{{ $total_petak ?? 0 }}
						</p>
						
					</div>
				</div>
			</div>
			<div class="col-md-4">
				<div class="card text-center shadow" style="background: linear-gradient(135deg, #e8f5e9 0%, #a5d6a7 100%);">
					<div class="card-body">
						<i class="fas fa-clipboard-list fa-2x mb-2" style="color:#28a745;"></i>
						<h5 class="card-title font-bold">Petak dengan Problem</h5>
						<p class="card-text display-4 font-weight-bold text-success" style="font-size:3rem; letter-spacing:2px; border: 2px solid #fff; border-radius: 10px; background: rgba(255,255,255,0.2); display: inline-block; padding: 0.5em 1em;">
							{{ $total_pica ?? 0 }}
						</p>
						
					</div>
				</div>
			</div>
			<div class="col-md-4">
				<div class="card text-center shadow" style="background: linear-gradient(135deg, #fffde7 0%, #ffe082 100%);">
					<div class="card-body">
						<i class="fas fa-tools fa-2x mb-2" style="color:#ffc107;"></i>
						<h5 class="card-title font-bold">Petak dengan Corective Action</h5>
						<p class="card-text display-4 font-weight-bold text-warning" style="font-size:3rem; letter-spacing:2px; border: 2px solid #fff; border-radius: 10px; background: rgba(255,255,255,0.2); display: inline-block; padding: 0.5em 1em;">
							{{ $total_pica_corrective ?? 0 }}
						</p>
						
					</div>
				</div>
			</div>
		</div>

		<div class="d-flex justify-content-center my-4">
			<h3 class="px-4 py-2 rounded w-100 text-center" style="background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%); color: #fff;">
				Problem Identification Corrective Action
			</h3>
		</div>

		<div class="row">
	<div class="col-md-3">
		<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-3">
		<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-3">
		<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-3 d-flex align-items-end">
		<button id="btnFilter" class="btn btn-danger w-100" style="height: 48px;">
			<i class="fas fa-filter mr-2"></i> Filter
		</button>
	</div>
</div>
<hr>
		<h3 class="text-center font-bold mt-3" style="display:none;background: url(assets/images/bganim2.gif);background-position: center;background-size: cover;max-width: 548px;margin: 0 auto;border-radius: 45px;margin-bottom: 22px;box-shadow: 2px 2px 17px #cccaca;" id="nama_asman">Nama Asman</h3>

<div class="row" style=" max-width: 548px;margin: 0 auto;display:none;" id="filterproblem">
	<div class="col-md-6">

		<select name="filter_problem_group" id="filter_problem_group" class="form-control border-success">

		</select>
	</div>
	<div class="col-md-6">

		<select name="filter_area" id="filter_area" class="form-control border-primary">

		</select>
	</div>

</div>

		 <div id="getdataproblem" style="min-height:300px;max-width: 584px;margin: 0 auto;"></div>

		 <hr>
		<div class="row">
			<div class="col-md-6"> 
				<div id="columnChartContainer" style="height: 400px; margin-bottom: 30px;"></div>
			</div>
			<div class="col-md-6"> 
				<div id="stackedColumnChartContainer" style="height: 400px; margin-bottom: 30px;"></div>
			</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|nik&parent=kode_rayon:') !!}",
							{  initial_text : 'Pilih Afdeling', parent: "#filter_rayon"});

				$("#filter_afdeling").on("change", function() {
					var selectedText = $(this).find("option:selected").text();
					if(selectedText === "") {
						selectedText = "Nama Asman";
						$("#nama_asman").hide();
						$("#filterproblem").hide();
						$("#getdataproblem").html('');
					}
					var html = '';
					// Split by "|" if exists
					if (selectedText.indexOf('|') !== -1) {
						$("#nama_asman").show();
						$("#filterproblem").show();
						$("#getdataproblem").html('');
						var parts = selectedText.split('|');
						html += '<img src="uploads/foto_asman/' + parts[2].replace(/\s+/g, '') + '.jpg" alt="Foto Asman" class="rounded-circle shadow mb-2" style="width:80px;height:80px;object-fit:cover;border:3px solid #28a745;">';
						html += '<div class="font-weight-bold text-warning" style="font-size:1.5rem;">' + parts[0] + '</div>';
						html += '<div class="text-muted" style="font-size:1.1rem;">' + parts[1] + '</div>';
					} else {
						html += '<div class="font-weight-bold text-success" style="font-size:1.5rem;">' + selectedText + '</div>';
					}
					$("#nama_asman").html(html);
				});

				$("#filter_problem_group").jCombo("{!! url('dataprodisconsole/comboselect?filter=master_problem_group_pica:id:problem_group') !!}",
					{  initial_text : 'Pilih Problem Group'});                    

				$("#filter_area").jCombo("{!! url('dataprodisconsole/comboselect?filter=master_area_pica:id:area_problem') !!}",
					{  initial_text : 'Pilih Area'});    
					
					function getDataProblem() {
						var afd = $("#filter_afdeling").val();
						var problemGroup = $("#filter_problem_group").val();
						var area = $("#filter_area").val();
						if (afd !== "" && problemGroup !== "" && area !== "") {
							$.ajax({
								url: "{!! url('monitoringpica/getDataByParams') !!}",
								type: "GET",
								data: {
									kode_afd: afd,
									problem_group: problemGroup,
									area: area
								},
								success: function(response) {
									$("#getdataproblem").html(response);
								},
								error: function() {
									$("#getdataproblem").html('<div class="alert alert-danger">Gagal mengambil data.</div>');
								}
							});
						} else {
							$("#getdataproblem").html('<div class="alert alert-warning">Silakan pilih Afdeling, Problem Group, dan Area terlebih dahulu.</div>');
						}
					}

						function loadColumnChartData() {
								var kode_kebun = $("#filter_kebun").val() || '';
								var problem_group = $("#filter_problem_group").val() || '';
								var area = $("#filter_area").val() || '';
								$.getJSON("{!! url('monitoringpica/getColumnChartData') !!}", {
									kode_kebun: kode_kebun,
									problem_group: problem_group,
									area: area
								}, function(response) {
									renderColumnChart(response.categories, response.data);
								});
						}

						function loadStackedColumnChartData() {
								var kode_kebun = $("#filter_kebun").val() || '';
								var problem_group = $("#filter_problem_group").val() || '';
								var area = $("#filter_area").val() || '';
								$.getJSON("{!! url('monitoringpica/getStackedColumnChartData') !!}", {
									kode_kebun: kode_kebun,
									problem_group: problem_group,
									area: area
								}, function(response) {
									renderStackedColumnChart(response.categories, response.series);
								});
						}

					$("#filter_problem_group, #filter_area").on("change", function() {
						getDataProblem();
						loadColumnChartData();
						loadStackedColumnChartData();
					});

					$("#btnFilter").on("click", function() {
						getDataProblem();
						loadColumnChartData();
						loadStackedColumnChartData();
					});


			function renderColumnChart(categories, data) {
				Highcharts.chart('columnChartContainer', {
					chart: {
						type: 'column',
						backgroundColor: {
							linearGradient: [0, 0, 500, 500],
							stops: [
								[0, '#e3f2fd'],
								[1, '#bbdefb']
							]
						},
						borderRadius: 15,
						shadow: true
					},
					title: {
						text: 'Grafik Jumlah Petak per Problem',
						style: {
							color: '#007bff',
							fontWeight: 'bold',
							fontSize: '22px'
						}
					},
					xAxis: {
						categories: categories,
						title: {
							text: 'Problem',
							style: { color: '#007bff', fontWeight: 'bold' }
						},
						labels: {
							style: { color: '#333', fontSize: '14px' }
						},
						lineColor: '#007bff',
						tickColor: '#007bff'
					},
					yAxis: {
						min: 0,
						title: {
							text: 'Jumlah Petak',
							style: { color: '#28a745', fontWeight: 'bold' }
						},
						gridLineColor: '#e0e0e0',
						labels: {
							style: { color: '#333', fontSize: '14px' }
						}
					},
					legend: {
						enabled: false
					},
					tooltip: {
						backgroundColor: '#fff',
						borderColor: '#007bff',
						borderRadius: 10,
						style: { color: '#333', fontSize: '15px' },
						headerFormat: '<span style="font-size:16px"><b>{point.key}</b></span><br/>',
						pointFormat: '<span style="color:#28a745"><b>{point.y}</b></span> Petak'
					},
					plotOptions: {
						column: {
							borderRadius: 8,
							colorByPoint: true,
							colors: ['#007bff', '#28a745', '#ffc107', '#ff7e5f', '#feb47b', '#a5d6a7', '#ffe082'],
							dataLabels: {
								enabled: true,
								format: '{point.y}',
								style: {
									fontWeight: 'bold',
									color: '#fff',
									textOutline: '1px #333'
								},
								backgroundColor: 'rgba(40,167,69,0.7)',
								borderRadius: 5,
								padding: 4
							}
						}
					},
					series: [{
						name: 'Jumlah Petak',
						data: data
					}],
					credits: {
						enabled: false
					}
				});
			}
			function renderStackedColumnChart(categories, series) {
				Highcharts.chart('stackedColumnChartContainer', {
					chart: {
						type: 'column',
						backgroundColor: {
							linearGradient: [0, 0, 500, 500],
							stops: [
								[0, '#fffde7'],
								[1, '#ffe082']
							]
						},
						borderRadius: 15,
						shadow: true
					},
					title: {
						text: 'Grafik Jumlah Petak per Rayon',
						style: {
							color: '#ff7e5f',
							fontWeight: 'bold',
							fontSize: '22px'
						}
					},
					xAxis: {
						categories: categories,
						title: {
							text: 'Rayon',
							style: { color: '#ff7e5f', fontWeight: 'bold' }
						},
						labels: {
							style: { color: '#333', fontSize: '14px' }
						},
						lineColor: '#ff7e5f',
						tickColor: '#ff7e5f'
					},
					yAxis: {
						min: 0,
						title: {
							text: 'Jumlah Petak',
							style: { color: '#ffc107', fontWeight: 'bold' }
						},
						gridLineColor: '#ffe082',
						labels: {
							style: { color: '#333', fontSize: '14px' }
						},
						stackLabels: {
							enabled: true,
							style: {
								fontWeight: 'bold',
								color: '#ff7e5f',
								textOutline: '1px #fffde7'
							}
						}
					},
					legend: {
						align: 'center',
						verticalAlign: 'bottom',
						backgroundColor: '#fffde7',
						borderColor: '#ff7e5f',
						borderWidth: 1,
						itemStyle: {
							color: '#ff7e5f',
							fontWeight: 'bold'
						}
					},
					tooltip: {
						backgroundColor: '#fff',
						borderColor: '#ffc107',
						borderRadius: 10,
						style: { color: '#333', fontSize: '15px' },
						headerFormat: '<span style="font-size:16px"><b>{point.x}</b></span><br/>',
						pointFormat: '<span style="color:#ff7e5f"><b>{series.name}</b></span>: <span style="color:#ffc107"><b>{point.y}</b></span><br/>Total: <b>{point.stackTotal}</b>'
					},
					plotOptions: {
						column: {
							stacking: 'normal',
							borderRadius: 8,
							colorByPoint: false,
							dataLabels: {
								enabled: true,
								format: '{point.y}',
								style: {
									fontWeight: 'bold',
									color: '#fff',
									textOutline: '1px #ff7e5f'
								},
								backgroundColor: 'rgba(255,193,7,0.7)',
								borderRadius: 5,
								padding: 4
							}
						}
					},
					series: series.map(function(s, i) {
						const colors = ['#ff7e5f', '#feb47b', '#ffc107', '#ffe082', '#a5d6a7', '#007bff', '#28a745'];
						return Object.assign({}, s, { color: colors[i % colors.length] });
					}),
					credits: {
						enabled: false
					}
				});
			}

	

		</script>
		@include('footer')
	</div>  
</div>
@stop