@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-12">
						<div class="row">
							<div class="col-md-2">
							
							<select name="filter_jawa" id="filter_jawa" class="form-control border-success">
								<option value="">Pilih Jawa/Luar</option>
								<option value="JAWA">Jawa</option>
								<option value="LUAR JAWA">Luar Jawa</option>
							</select>
							</div>
							<div class="col-md-2">
							
							<select name="filter_cluster" id="filter_cluster" class="form-control border-success">
								<option value="">Pilih Cluster</option>
								<option value="SUMATERA 1">SUMATERA 1</option>
								<option value="SUMATERA 2">SUMATERA 2</option>
								<option value="JATENG">JATENG</option>
								<option value="JATIM 1">JATIM 1</option>
								<option value="JATIM 2">JATIM 2</option>
								<option value="SULAWESI">SULAWESI</option>
							</select>
							</div>
							<div class="col-md-2">
							
							<select name="filter_kebun" id="filter_kebun" class="form-control border-success">
							
							</select>
							</div>
							<div class="col-md-2">
							
							<select name="filter_rayon" id="filter_rayon" class="form-control border-primary">
							
							</select>
							</div>
							<div class="col-md-2">
							
							<select name="filter_periode" id="filter_periode" class="form-control border-primary">
								<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-2">
								<input type="date" class="form-control border-primary" id="filter_tgl" placeholder="Pilih Tanggal">
							</div>
							<div class="col-md-2">
								<button type="button" class="btn btn-primary" id="btn_filter">Filter</button>
								<button type="button" class="btn btn-success" id="btn_download_excel">Download Excel</button>

																
							</div>
						</div>
				</div>    
			</div>
		<div >

	



		<div class="table-responsive" id="divtable" style="min-height:300px; max-height:600px; overflow-y:auto;">
			<!-- Tabel akan dimuat di sini oleh AJAX -->
		</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'});

				$("#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"});
		function fetchData() {
			const params = {
				jawa_luarjawa: $('#filter_jawa').val(),
				cluster: $('#filter_cluster').val(),
				kode_kebun: $('#filter_kebun').val(),
				nama_rayon: $('#filter_rayon').val(),
				periode: $('#filter_periode').val(),
				tgl: $('#filter_tgl').val()
			};

			// Tampilkan loading
			$('#divtable').html('<div class="text-center my-5"><span class="spinner-border text-primary"></span><br>Loading...</div>');

			$.ajax({
				url: '{{ url("prognosasisatebu/getDataFromSP") }}',
				method: 'GET',
				data: params,
				success: function(response) {
					$('#divtable').html(response);
				},
				error: function(xhr) {
					$('#divtable').html('<div class="text-danger text-center my-5">Terjadi kesalahan saat mengambil data.</div>');
				}
			});
		}

		// Panggil fetchData sesuai kebutuhan, misal saat halaman dimuat
		$(document).ready(function() {
			fetchData();
		});

		$('#btn_filter').on('click', function() {
			fetchData();
		});
		</script>
		<script>
			$('#btn_download_excel').on('click', function() {
				// Ambil data tabel dari divtable
				var table = document.querySelector('#tabledata');
				if (!table) {
					alert('Data belum tersedia untuk diunduh.');
					return;
				}
				var wb = XLSX.utils.table_to_book(table, {sheet:"Sheet1"});
				XLSX.writeFile(wb, 'data.xlsx');
			});
			</script>
		
		@include('footer')
	</div>  
</div>
@stop