@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">
					<!-- Form Filter Tanggal -->
					<form method="GET" action="{{ url('rekaplkplv2') }}" class="form-inline mb-3">
						<div class="form-group mx-2">
							<label for="start_date">Tanggal Awal: </label>
							<input type="date" name="start_date" id="start_date" class="form-sm-control ml-2" value="{{ request('start_date') }}">
						</div>

						<div class="form-group mx-2">
							<label for="end_date">Tanggal Akhir: </label>
							<input type="date" name="end_date" id="end_date" class="form-sm-control ml-2" value="{{ request('end_date') }}">
						</div>

						<button type="submit" class="btn btn-sm btn-primary mx-2"><i class="fa fa-filter"></i> Filter</button>
						<a href="{{ url('rekaplkplv2') }}" class="btn btn-sm btn-secondary mx-2">Reset</a>
						<button id="downloadExcel" class="btn btn-sm btn-success">Download Excel</button>
					</form>
				</div>
			</div>
		</div>


		<div class="table-responsive" style="height:500px;">
			<table id="dataTable" class="table table-hover table-striped">
				<thead style="position: sticky; top: 0; background-color: #fff; z-index: 1;">
					<tr>
						<th class="number"> No </th>			
						<th>Cluster</th>
						<th>Kebun</th>
						<th>Rayon</th>
						<th>Kode Kategori</th>
						<th>HA Serah Tanah</th>
						<th>HA Tanam Kepras</th>
						<th>HA Sulam</th>
						<th>HA Pupuk 1</th>
						<th>HA Pupuk 2</th>
						<th>HA Bumbun 1</th>
						<th>HA Bumbun 2</th>
						<th>HA Pengairan</th>
						<th>HA Penyiangan</th>
						<th>HA Klentek 1</th>
						<th>HA Klentek 2</th>
						<th>HA Klentek 3</th>
						<th>Entry By</th>
						<th>Tanggal Input Terbaru</th>
						<th>Status</th>
					</tr>
				</thead>

				<tbody>
					@php $i = 0; @endphp
					@foreach ($rekapData as $row)
						<tr>
							<td>{{ ++$i }}</td>
							<td>{{ $row->cluster }}</td>
							<td>{{ $row->kebun }}</td>
							<td>{{ $row->rayon }}</td>
							<td>{{ $row->kode_kat }}</td>
							<td>{{ $row->ha_serah_tanah }}</td>
							<td>{{ $row->ha_tanam_kepras }}</td>
							<td>{{ $row->ha_sulam }}</td>
							<td>{{ $row->ha_pupuk_1 }}</td>
							<td>{{ $row->ha_pupuk_2 }}</td>
							<td>{{ $row->ha_bumbun_1 }}</td>
							<td>{{ $row->ha_bumbun_2 }}</td>
							<td>{{ $row->ha_pengairan }}</td>
							<td>{{ $row->ha_penyiangan }}</td>
							<td>{{ $row->ha_klentek_1 }}</td>
							<td>{{ $row->ha_klentek_2 }}</td>
							<td>{{ $row->ha_klentek_3 }}</td>
							<td>{{ $row->entry_by }}</td>
							<td>{{ $row->tgl_input_terbaru }}</td>
							<td data-id="{{ base64_encode(json_encode([
								'cluster' => $row->cluster,
								'kebun' => $row->kebun,
								'rayon' => $row->rayon,
								'kode_kat' => $row->kode_kat,
								'ha_serah_tanah' => $row->ha_serah_tanah,
								'ha_tanam_kepras' => $row->ha_tanam_kepras,
								'ha_sulam' => $row->ha_sulam,
								'ha_pupuk_1' => $row->ha_pupuk_1,
								'ha_pupuk_2' => $row->ha_pupuk_2,
								'ha_bumbun_1' => $row->ha_bumbun_1,
								'ha_bumbun_2' => $row->ha_bumbun_2,
								'ha_pengairan' => $row->ha_pengairan,
								'ha_penyiangan' => $row->ha_penyiangan,
								'ha_klentek_1' => $row->ha_klentek_1,
								'ha_klentek_2' => $row->ha_klentek_2,
								'ha_klentek_3' => $row->ha_klentek_3,
								'entry_by' => $row->entry_by,
								'tgl_input_terbaru' => $row->tgl_input_terbaru
							])) }}"></td>

						</tr>
					@endforeach
				</tbody>
			</table>
			<input type="hidden" name="md" value="" />
		</div>
		
	</div>
</div>

<!-- Tambahkan script untuk download Excel -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<script>
	document.getElementById('downloadExcel').addEventListener('click', function () {
		// Ambil tabel
		var table = document.getElementById('dataTable');
		var workbook = XLSX.utils.table_to_book(table, { sheet: "Sheet1" });

		// Unduh file Excel
		XLSX.writeFile(workbook, 'rekap_data.xlsx');
	});

	document.querySelectorAll('td[data-id]').forEach(function (cell) {
		var dataId = cell.getAttribute('data-id');
		fetch('{{ url("rekaplkplv2?action_task=checkrekaplkplv2") }}', {
			method: 'POST',
			headers: {
				'Content-Type': 'application/json'
			},
			body: JSON.stringify({ id: dataId })
		})
		.then(response => response.json())
		.then(data => {
			if (data.status === 'success') {
				if (data.count == 1) {
					cell.textContent = 'Approved 1';
					cell.style.color = 'orange';
				} else {
					cell.textContent = 'Approved 2';
					cell.style.color = 'green';
				}
			} else {
				cell.textContent = 'Not Approved';
				var button = document.createElement('button');
				var giidd = "{{ \Session::get('gid') }}";
				if(giidd == 6){
					button.textContent = 'Approve';
					button.className = 'btn btn-sm btn-primary ml-2';
					button.addEventListener('click', function () {
						fetch('{{ url("rekaplkplv2?action_task=approverekaplkplv2") }}', {
							method: 'POST',
							headers: {
								'Content-Type': 'application/json'
							},
							body: JSON.stringify({ id: dataId })
						})
						.then(response => response.json())
						.then(data => {
							if (data.status === 'success') {
								cell.textContent = 'Approved';
								cell.style.color = 'green';
							} else {
								alert('Approval failed: ' + data.message);
							}
						})
						.catch(error => {
							alert('Error during approval: ' + error);
						});
					});
					cell.appendChild(button);
				}
				cell.style.color = 'red';
				
			}
		})
		.catch(error => {
			cell.textContent = 'Error';
			cell.style.color = 'orange';
			console.error('Error:', error);
		});
	});

</script>
@stop