@extends('layouts.app')

@section('content')
{{--*/ usort($tableGrid, "SiteHelpers::_sort") /*--}}
<div class="page-titles mb-4" style="position:sticky;top:0;z-index:10;background:#f9f9f9;">
	<h2 class="font-weight-bold" style="font-size:2rem; color:#343a40;">
		{{ $pageTitle }}
		<small class="text-muted" style="font-size:1rem;">{{ $pageNote }}</small>
	</h2>
	<hr style="border-top:2px solid #dee2e6; margin-top:8px;">
</div>
<div  class="card">
	<div class="card-body">
		<div class="toolbar-nav">
			<div class="row">
				<div class="col-md-6">
					<div class="btn-group">
						<button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-bars"></i> Bulk Action </button>
				        <ul class="dropdown-menu">
				         @if($access['is_excel'] ==1)
							<li class="nav-item"><a href="{{ url( $pageModule .'/export?do=excel&return='.$return) }}" class="nav-link"> Export CSV </a></li>	
						@endif
				        </ul>
				    </div>	
				</div>    
			</div>
		<div class="table-responsive modern-table-container" style="min-height:300px; position:relative;">

			{!! Form::open(['url'=>'dronesprayingfa/delete/', 'class'=>'form-horizontal', 'id'=>'SximoTable']) !!}
			<div style="max-height:400px; overflow-y:auto;">
				<table class="table table-hover table-striped modern-table" id="freezeHeaderTable">
					<thead class="thead-dark" style="position:sticky; top:0; z-index:2; background:#343a40;">
						<tr>
							<th class="number">No</th>
							@foreach ($tableGrid as $t)
								@if($t['view'] =='1')
									<th>{{ $t['label'] }}</th>
								@endif
							@endforeach
						</tr>
					</thead>
					<tbody>
						@foreach ($rowData as $row)
							<tr>
								<td width="30">{{ ++$i }}</td>
								@foreach ($tableGrid as $field)
									@if($field['view'] =='1')
										<?php $limited = isset($field['limited']) ? $field['limited'] :''; ?>
										@if(SiteHelpers::filterColumn($limited ))
											<td>
												{!! SiteHelpers::formatRows($row->{$field['field']}, $field, $row) !!}
											</td>
										@endif
									@endif
								@endforeach
							</tr>
						@endforeach
					</tbody>
				</table>
			</div>
			<input type="hidden" name="md" value="" />
			{!! Form::close() !!}

			<div class="mt-5">
				<h4 class="font-weight-bold mb-3" style="font-size:1.5rem;">Rekap Drone Spraying FA Petak</h4>
				
				
              
            </select>
				<div class="table-responsive modern-table-container">
					<table id="rekapFreezeHeaderTable" class="table table-hover table-striped modern-table" style="width:100%">
						<thead class="thead-dark" style="position:sticky; top:0; z-index:2; background:#343a40;">
							<tr>
								<!-- Kolom akan diisi otomatis oleh DataTables -->
							</tr>
						</thead>
						<tbody>
						</tbody>
					</table>
					<script>
					$(document).ready(function() {
					

						// Tambahkan tombol download
						// Tambahkan select filter kebun sebelum tombol download
						$('#rekapFreezeHeaderTable').before(
							'<div class="mb-2 d-flex align-items-center">' +
								'<select name="filter_kebun" id="filter_kebun" class="form-control border-success mr-2 select2" style="max-width:250px;"></select>' +
								'<button id="downloadRekapExcel" class="btn btn-success btn-sm ml-2"><i class="fa fa-download"></i> Download Rekap Excel</button>' +
							'</div>'
						);
						$('#downloadRekapExcel').on('click', function() {
							var kebun = $('#filter_kebun').val();
							var url = '{{ url("dronesprayingfa/downloadExcel") }}?filter_kebun=' + encodeURIComponent(kebun);
							window.location.href = url;
						});

						$('#rekapFreezeHeaderTable').DataTable({
							processing: true,
							serverSide: true,
							ajax: {
								url: '{{ url("dronesprayingfa?action_task=getRekapDataDatatableAjax") }}',
								type: 'POST',
								data: function(d) {
									d.filter_kebun = $('#filter_kebun').val();
								}
							},
							scrollY: '300px',
							scrollCollapse: true,
							paging: true,
							order: [],
							columns: [
								{ data: 'cluster', title: 'Cluster' },
								{ data: 'kebun', title: 'Kebun' },
								{ data: 'kode_rayon', title: 'Kode Rayon' },
								{ data: 'rayon', title: 'Rayon' },
								{ data: 'afdeling', title: 'Afdeling' },
								{ data: 'lahan_id', title: 'Lahan Id' },
								{ data: 'kode_kat', title: 'Kode Kat' },
								{ data: 'ha_fa_1', title: 'Ha Fa 1' },
								{ data: 'ha_fa_2', title: 'Ha Fa 2' },
								{ data: 'ha_drone_spraying', title: 'Ha Drone Spraying' },
								{ data: 'entry_by', title: 'Entry By' },
								{ data: 'tgl_input_terbaru', title: 'Tgl Input Terbaru' },
								// Tambahkan kolom lain sesuai kebutuhan
							]
						});

							$("#filter_kebun").jCombo("{!! url('dataprodisconsole/comboselect?filter=master_kebun:nama_kebun:nama_kebun') !!}",
							{ initial_text : 'Pilih Kebun' });
						$('#filter_kebun').on('change', function() {
							$('#rekapFreezeHeaderTable').DataTable().ajax.reload();
						});
					});
					</script>
				</div>

				
			</div>
			<style>
				#rekapFreezeHeaderTable thead th {
					position: sticky;
					top: 0;
					z-index: 3;
					background: #343a40;
					color: #fff;
				}
			</style>
		</div>

		<style>
		.modern-table-container {
			box-shadow: 0 2px 8px rgba(0,0,0,0.08);
			border-radius: 8px;
			background: #f9f9f9;
			padding: 16px;
		}
		.modern-table {
			border-radius: 8px;
			overflow: hidden;
			background: #fff;
		}
		.modern-table thead th {
			background: #343a40;
			color: #fff;
			font-weight: 600;
			border-bottom: 2px solid #dee2e6;
		}
		.modern-table tbody tr:hover {
			background: #e9ecef;
			transition: background 0.2s;
		}
		.modern-table td, .modern-table th {
			vertical-align: middle;
			padding: 12px 8px;
		}
		</style>
		
		
		@include('footer')
	</div>  
</div>
@stop