@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="tahun">Tahun</label>
							<select class="form-control" id="tahun" name="tahun" required>
								<option value="">Pilih Tahun</option>								
								<option value="{{ date('Y') }}">{{ date('Y') }}</option>
								<option value="{{ date('Y') - 1 }}">{{ date('Y') - 1 }}</option>
								<option value="{{ date('Y') - 2 }}">{{ date('Y') - 2 }}</option>
							</select>
						</div>
					</div>
					<div class="col-md-2">
						<div class="form-group">
							<label for="bulan">Bulan</label>
							<select class="form-control" id="bulan" name="bulan" required>
								<option value="">Pilih Bulan</option>
								<option value="1">Januari</option>
								<option value="2">Februari</option>
								<option value="3">Maret</option>
								<option value="4">April</option>
								<option value="5">Mei</option>
								<option value="6">Juni</option>
								<option value="7">Juli</option>
								<option value="8">Agustus</option>
								<option value="9">September</option>
								<option value="10">Oktober</option>
								<option value="11">November</option>
								<option value="12">Desember</option>
							</select>
						</div>
					</div>
					<div class="col-md-2">
						<div class="form-group">
							<label for="minggu">Minggu</label>
							<select class="form-control" id="minggu" name="minggu">
								<option value="">Pilih Minggu</option>
								<option value="1">Minggu 1</option>
								<option value="2">Minggu 2</option>
								<option value="3">Minggu 3</option>
								<option value="4">Minggu 4</option>
								<option value="5">Minggu 5</option>
							</select>
						</div>
					</div>
					<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"
								readonly 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="" readonly
								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-2">
						<div class="form-group">
							<label for="kode_rayon">Kode Rayon</label>
							<select class="form-control" id="kode_rayon" name="kode_rayon"></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 class="col-md-9">
						<div class="form-group text-right">
							<button type="button" id="verifikasiBtn" class="btn btn-xs btn-info mt-4"><i
									class="fa fa-check"></i> Ajukan Verifikasi</button>
						</div>
					</div>
				</div>

			</form>
		</div>

	<ul class="nav nav-tabs mt-3" id="myTab" role="tablist">
	<li class="nav-item">
		<a class="nav-link active" id="data-tab" data-toggle="tab" href="#dataTab" role="tab">Data</a>
	</li>
	<li class="nav-item">
		<a class="nav-link" id="verifikasi-tab" data-toggle="tab" href="#verifikasiTab" role="tab">Verifikasi Data</a>
	</li>
	<li class="nav-item">
		<a class="nav-link" id="monitoring-tab" data-toggle="tab" href="#monitoringTab" role="tab">Monitoring</a>
	</li>
</ul>

<div class="tab-content mt-3" id="myTabContent">
	<div class="tab-pane fade show active" id="dataTab" role="tabpanel">
		<div class="text-left mt-3 mb-3">
			<h6 class="text-dark font-weight-bold">
				<i class="far fa-calendar-alt"></i> Mingguan: 
				<span id="info-lkp-date1" class="badge badge-primary">-</span>
			</h6>
		</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>
		<!-- informasi LKP sampai dengan -->
		<div class="text-left mt-3 mb-3">
			<h6 class="text-dark font-weight-bold">
				<i class="far fa-calendar-alt"></i> Data Sampai Dengan: 
				<span id="info-lkp-date2" class="badge badge-primary">-</span>
			</h6>
		</div>
		
		<div id="results2">
			<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 verifikasi tersedia. Silakan ajukan verifikasi pada tab Data.</p>
			</div>
		</div>
	</div>
	<div class="tab-pane fade" id="verifikasiTab" role="tabpanel">
		<div id="verifikasi-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 verifikasi tersedia. Silakan ajukan verifikasi pada tab Data.</p>
			</div>
		</div>
	</div>
	<div class="tab-pane fade" id="monitoringTab" role="tabpanel">
		<div id="monitoring-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 monitoring tersedia.</p>
			</div>
		</div>
	</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 Lahan Pekerjaan"
			});
			// Generate filename with current date
			var filename = "Rekap_Lahan_Pekerjaan_" + $("#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"
	});
	$("#kode_rayon").jCombo("{{ url('dataprodisconsole/comboselect?filter=master_rayon:kode_rayon:nama_rayon') }}", {
		initial_text: "Semua Rayon"
	});
	// Set date range to last 7 days
	$(document).ready(function() {
		$("#filterForm").on("submit", function(e) {
			e.preventDefault();
			fetchConsoleProdis();
			fetchConsoleProdisVerifikasi();
		});
	});

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

	function fetchConsoleProdisVerifikasi() {
		var formData = {
			start_date: $("#start_date").val(),
			end_date: $("#end_date").val(),
			kebun: $("#kode_kebun").val(),
			rayon: $("#kode_rayon").val()
		};
		$.ajax({
			url: "{{ url('reportlkp/getRekapPcrcRayonSdVerifikasi') }}",
			type: "GET",
			data: formData,
			beforeSend: function() {
				$("#results2").html(
					"<div class=\"text-center\"><i class=\"fa fa-spinner fa-spin\"></i> Loading...</div>");
					$("#info-lkp-date2").text($("#end_date").val());
			},
			success: function(response) {
				$("#results2").html(response);
			},
			error: function(xhr, status, error) {
				$("#results2").html("<div class=\"alert alert-danger\">Error: " + error + "</div>");
			}
		});
	}
	$("#verifikasiBtn").on("click", function() {
		var table = $("#results table")[0];
		if (!table) {
			alert("Tidak ada data untuk diverifikasi");
			return;
		}
		var kebun = $("#kode_kebun").val();
		if (!kebun) {
			alert("Silakan pilih kebun sebelum mengajukan verifikasi.");
			return;
		}
		if (!confirm("Apakah Anda yakin ingin mengajukan verifikasi?")) {
			return;
		}

		// Cek apakah tanggal sekarang sudah melewati end_date
		var today = new Date();
		var endDate = new Date($("#end_date").val());
		if (today < endDate) {
			alert("Tanggal selesai belum tercapai. Anda hanya dapat mengajukan verifikasi setelah tanggal selesai.");
			return;
		}
		var formData = {
			tahun: $("#tahun").val(),
			bulan: $("#bulan").val(),
			minggu: $("#minggu").val(),
			start_date: $("#start_date").val(),
			end_date: $("#end_date").val(),
			kebun: $("#kode_kebun").val(),
			rayon: $("#kode_rayon").val()
		};
		$.ajax({
			url: "{{ url('reportlkp?action_task=ajukanVerifikasiPcrc') }}",
			type: "POST",
			data: formData,
			headers: {
				'X-CSRF-TOKEN': '{{ csrf_token() }}'
			},
			beforeSend: function() {
				$("#myTab a[href=\"#verifikasiTab\"]").tab("show");
			},
			success: function(response) {
				fetchVerifikasiData();
			},
			error: function(xhr, status, error) {}
		});
	});
	// Fetch verification data when verifikasi tab is clicked
	$("#verifikasi-tab").on("click", function() {
		fetchVerifikasiData();
	});

	function fetchVerifikasiData() {
		var formData = {
			tahun: $("#tahun").val(),
			bulan: $("#bulan").val(),
			minggu: $("#minggu").val(),
			start_date: $("#start_date").val(),
			end_date: $("#end_date").val(),
			kebun: $("#kode_kebun").val(),
			rayon: $("#kode_rayon").val()
		};
		$.ajax({
			url: "{{ url('reportlkp/getDataVerifikasiLkp') }}",
			type: "GET",
			data: formData,
			beforeSend: function() {
				$("#verifikasi-results").html(
					"<div class=\"text-center\"><i class=\"fa fa-spinner fa-spin\"></i> Loading...</div>");
			},
			success: function(response) {
				$("#verifikasi-results").html(response);
			},
			error: function(xhr, status, error) {
				$("#verifikasi-results").html("<div class=\"alert alert-danger\">Error: " + error + "</div>");
			}
		});
	}
	$(document).ready(function() {
		$("#tahun,#bulan, #minggu").on("change", function() {
			var bulan = parseInt($("#bulan").val());
			var minggu = parseInt($("#minggu").val());
			if (bulan && minggu) {
				var year = $("#tahun").val() || new Date().getFullYear();
				// Tentukan rentang hari berdasarkan nomor minggu
				var startDay, endDay;
				switch (minggu) {
					case 1:
						startDay = 1;
						endDay = 7;
						break;
					case 2:
						startDay = 8;
						endDay = 14;
						break;
					case 3:
						startDay = 15;
						endDay = 21;
						break;
					case 4:
						startDay = 22;
						// Hari terakhir bulan tersebut
						endDay = new Date(year, bulan, 0).getDate();
						break;
					default:
						return;
				}
				// Format tanggal menjadi YYYY-MM-DD
				function pad(n) {
					return n < 10 ? '0' + n : n;
				}
				var startDate = year + '-' + pad(bulan) + '-' + pad(startDay);
				var endDate = year + '-' + pad(bulan) + '-' + pad(endDay);
				$("#start_date").val(startDate);
				$("#end_date").val(endDate);
			}
		});
	});

	$("#monitoring-tab").on("click", function() {
		fetchMonitoringData();
	});

	function fetchMonitoringData() {
		var formData = {
			tahun: $("#tahun").val()
		};
		$.ajax({
			url: "{{ url('reportlkp/getMonitoringVerifikasiLkp') }}",
			type: "GET",
			data: formData,
			beforeSend: function() {
				$("#monitoring-results").html(
					"<div class=\"text-center\"><i class=\"fa fa-spinner fa-spin\"></i> Loading...</div>");
			},
			success: function(response) {
				$("#monitoring-results").html(response);
			},
			error: function(xhr, status, error) {
				$("#monitoring-results").html("<div class=\"alert alert-danger\">Error: " + error + "</div>");
			}
		});
	}
</script>
@stop