@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">
			<form id="filterForm" class="form-horizontal">
				<div class="row">
					
					<div class="col-md-2">
						<div class="form-group">
							<label for="start_date">Tanggal Mulai</label>
							<input type="date" class="form-control" id="start_date" name="start_date" value="2023-01-01"
								 required>
						</div>
					</div>
					<div class="col-md-2">
						<div class="form-group">
							<label for="end_date">Tanggal Selesai</label>
							<input type="date" class="form-control" id="end_date" name="end_date" value="" 
								required>
						</div>
					</div>
					<div class="col-md-2">
						<div class="form-group">
							<label for="kode_kebun">Kode Kebun</label>
							<select class="form-control" id="kode_kebun" name="kode_kebun"></select>

						</div>
					</div>
					<div class="col-md-3">
						<div class="form-group">
							<button type="submit" class="btn btn-xs btn-primary mt-4">Filter</button>
							<button type="button" class="btn btn-xs btn-success mt-4" id="downloadBtn">
								<i class="fa fa-download"></i> Download Excel
							</button>
						</div>
					</div>
					
				</div>

			</form>
		</div>

	            <div id="results">
					<div class="text-center text-muted py-5">
						<i class="fas fa-inbox" style="font-size: 3rem; opacity: 0.3;"></i>
						<p class="mt-3">Tidak ada data tersedia. Silakan gunakan filter di atas untuk menampilkan data.</p>
					</div>
				</div>

	</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<script>
	$(document).ready(function() {
		$("#downloadBtn").on("click", function() {
			// Get the table from results div
			var table = $("#results table")[0];
			if (!table) {
				alert("Tidak ada data untuk didownload");
				return;
			}
			// Convert table to workbook
			var wb = XLSX.utils.table_to_book(table, {
				sheet: "Rekap LKP Kebun Rayon Detail"
			});
			// Generate filename with current date
			var filename = "Rekap_LKP_Kebun_Rayon" + $("#start_date").val() + "_to_" + $("#end_date")
			.val() + ".xlsx";
			// Download the file
			XLSX.writeFile(wb, filename);
		});
	});
</script>
<script>
	$("#kode_kebun").jCombo("{{ url('dataprodisconsole/comboselect?filter=master_kebun:kode_kebun:nama_kebun') }}", {
		initial_text: "Semua Kebun"
	});
	// Set date range to last 7 days
	$(document).ready(function() {
		$("#filterForm").on("submit", function(e) {
			e.preventDefault();
			fetchConsoleProdis();
		});
	});

	function fetchConsoleProdis() {
		var formData = {
			start_date: $("#start_date").val(),
			end_date: $("#end_date").val(),
			kebun: $("#kode_kebun").val()
		};
		$.ajax({
			url: "{{ url('reportlkp/getRekapPcrcRayonBulanan') }}",
			type: "GET",
			data: formData,
			beforeSend: function() {
				$("#results").html(
					"<div class=\"text-center\"><i class=\"fa fa-spinner fa-spin\"></i> Loading...</div>");
			},
			success: function(response) {
				$("#results").html(response);
			},
			error: function(xhr, status, error) {
				$("#results").html("<div class=\"alert alert-danger\">Error: " + error + "</div>");
			}
		});
	}
	
	

</script>
@stop