@extends('layouts.app')

@section('content')
{{--*/ usort($tableGrid, "SiteHelpers::_sort") /*--}}
<style>
.select2-container{
	border: 2px solid #ffc107 !important;
    border-radius: 8px;
    background: linear-gradient(90deg, #fffbe6 0%, #fff 100%);
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.15);
    font-weight: 500;
}
</style>
<div class="page-titles">
  <h2> {{ $pageTitle }} <small> {{ $pageNote }} </small></h2>
</div>
<div  class="card">
	<div class="card-body">
		<div class="toolbar-nav">
			<form method="GET" action="" class="mb-3">
				<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-info" for="filter_tahun">
							<i class="fas fa-calendar-alt" style="margin-right:5px; color:#17a2b8;"></i> Tahun
						</label>
						<select name="filter_tahun" id="filter_tahun" class="form-control border-info">
							<option value="">Pilih Tahun</option>
							@php
								$currentYear = date('Y');
								$startYear = $currentYear - 10;
								$selectedYear = request()->get('filter_tahun');
							@endphp
							@for($year = $currentYear; $year >= $startYear; $year--)
								<option value="{{ $year }}" {{ $selectedYear == $year ? 'selected' : '' }}>{{ $year }}</option>
							@endfor
						</select>
					</div>
					<div class="col-md-3">
						<label class="font-weight-bolder text-warning" for="filter_periode">
							<i class="fas fa-industry" style="margin-right:5px; color:#007bff;"></i> Periode
						</label>
						<select name="filter_periode[]" id="filter_periode" multiple class="form-control border-primary select2" style="border: 2px solid #ffc107; border-radius: 8px; background: linear-gradient(90deg, #fffbe6 0%, #fff 100%); box-shadow: 0 2px 8px rgba(255,193,7,0.15); font-weight: 500;">
							<option value="">Pilih Periode</option>
							<option value="1A">1A</option>
							<option value="1B">1B</option>
							<option value="2A">2A</option>
							<option value="2B">2B</option>
							<option value="3A">3A</option>
							<option value="3B">3B</option>
							<option value="4A">4A</option>		
							<option value="4B">4B</option>
							<option value="5A">5A</option>	
							<option value="5B">5B</option>
							<option value="6A">6A</option>
							<option value="6B">6B</option>
							<option value="7A">7A</option>
							<option value="7B">7B</option>
							<option value="8A">8A</option>
							<option value="8B">8B</option>	
							<option value="9A">9A</option>
							<option value="9B">9B</option>
							<option value="10A">10A</option>
							<option value="10B">10B</option>
							<option value="11A">11A</option>
							<option value="11B">11B</option>
							<option value="12A">12A</option>
							<option value="12B">12B</option>
						</select>
					</div>    
					<div class="col-md-3 text-right">
						<button type="submit" class="btn btn-success" id="filterBtn">
							<span id="filterBtnIcon"><i class="fas fa-filter"></i></span>
							<span id="filterBtnText"> Filter</span>
							<span id="filterBtnLoading" style="display:none;"><i class="fas fa-spinner fa-spin"></i> Loading...</span>
						</button>

						<button type="button" class="btn btn-warning" id="downloadBtn">
							<i class="fas fa-download"></i> Download
						</button>
						
					</div>
				</div>
				
			</form>
		<div >

	

		@if(count($results) > 0)
			
		<div style="max-height:600px; overflow:auto;">
			<table class="table table-bordered table-striped">

				<thead class="thead-light" style="position: sticky; top: 0; z-index: 2;">
					<tr>
						<th class="text-center bg-success text-white" style="font-size:14px;">No</th>
						@foreach($results[0] as $key => $value)
							<th class="text-center bg-warning text-dark" style="font-size:14px;">
								{{ ucwords(str_replace('_', ' ', $key)) }}
							</th>
						@endforeach
					</tr>
				</thead>
				<tbody>
					@foreach($results as $no => $row)
						<tr>
							<td>{{ $no+1 }}</td>
							@foreach($row as $k => $value)
								@if(stripos($k, 'Lapor') !== false)
									<td>
										<a href="#" onclick="getdetail('{{ str_replace('_lapor', '', $k) }}', '{{ $row->afd_new }}', 1)" rel="noopener noreferrer">
											{{ $value }}
										</a>
									</td>
								@elseif(stripos($k, 'Tanamkepras') !== false)
									<td><a href="#" onclick="getdetail('{{ str_replace('_tanamkepras', '', $k) }}','{{ $row->afd_new }}', 2)" rel="noopener noreferrer">{{ $value }}</a></td>
								@else
									<td>{{ $value }}</td>
								@endif
							@endforeach
						</tr>
					@endforeach
				</tbody>
			</table>
		</div>
		
		@endif
		
		@include('footer')
	</div>  
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<script>
	                        $("#filter_kebun").jCombo("{!! url('dataprodisconsole/comboselect?filter=master_kebun:kode_kebun:nama_kebun') !!}",
                                    {  initial_text : 'Pilih Kebun', selected_val : '{{ request()->get('filter_kebun') }}' });

															document.getElementById('downloadBtn').addEventListener('click', function() {
																var table = document.querySelector('table');
																var wb = XLSX.utils.table_to_book(table, {sheet:"Sheet1"});
																XLSX.writeFile(wb, 'data-export.xlsx');
															});


                        $("#filter_rayon").jCombo("{!! url('dataprodisconsole/comboselect?filter=master_rayon:kode_rayon:nama_rayon&parent=kode_kebun:') !!}",
                                        {  initial_text : 'Pilih Rayon', parent: "#filter_kebun", selected_value : '{{ request()->get('filter_rayon') }}' }); 

										function getdetail(periode,afdeling,kategori){
											// Get the selected values from the filters
											var kebun = "{{ request()->get('filter_kebun') }}";
											var rayon = "{{ request()->get('filter_rayon') }}";
											var tahun = "{{ request()->get('filter_tahun') }}";

											SximoModal('rekaplapormorfologi/detail?filter_kebun=' + kebun + '&filter_rayon=' + rayon + '&filter_tahun=' + tahun + '&filter_periode=' + periode + '&filter_afdeling=' + afdeling + '&kategori=' + kategori, 'Detail');
										}

										document.addEventListener('DOMContentLoaded', function() {
								var filterBtn = document.getElementById('filterBtn');
								var filterBtnIcon = document.getElementById('filterBtnIcon');
								var filterBtnText = document.getElementById('filterBtnText');
								var filterBtnLoading = document.getElementById('filterBtnLoading');
								filterBtn.closest('form').addEventListener('submit', function() {
									filterBtn.disabled = true;
									filterBtnIcon.style.display = 'none';
									filterBtnText.style.display = 'none';
									filterBtnLoading.style.display = '';
								});
							});
</script>
@stop