@extends('layouts.app')

@section('title')
    {{ $pageInfo['title'] }}
@endsection

@section('admin-content')
    <section class="content-header">
        <div class="container-fluid">
			<div class="row mt-1">
				<div class="col-md-12">
					<div class="card">
						<div class="card-body">
							<form action="{{ route('reports.jurnal.generate') }}" method="GET">
								<div class="d-flex">
									<div class="col-md-3">
										<div class="form-group mb-3">
											<label for="region">Pilih Region</label>
											<select name="region" id="region" class="form-control" required>
												<option value="">Semua Region</option>
												@foreach ($regions as $region)
													<option value="{{ $region->code }}" {{ request()->region == $region->code ? 'selected' : '' }}>
														{{ $region->name }}
													</option>
												@endforeach
											</select>
										</div>
									</div>
									<div class="col-md-3">
										<div class="form-group mb-3">
											<label for="cabang">Pilih Cabang</label>
											<select name="cabang" id="cabang" class="form-control" required>
												<option value="">Semua Cabang</option>
												<!-- Cabang options will be dynamically populated -->
											</select>
										</div>
									</div>
									<div class="col-md-3">
										<div class="form-group mb-3">
											<label for="month">Pilih Periode Bulan</label>
											<select name="month" id="month" class="form-control" required>
												<option value="">Pilih Bulan</option>
												<option value="january" {{ request()->month == 'january' ? 'selected' : '' }}>Januari</option>
												<option value="february" {{ request()->month == 'february' ? 'selected' : '' }}>Februari</option>
												<option value="march" {{ request()->month == 'march' ? 'selected' : '' }}>Maret</option>
												<option value="april" {{ request()->month == 'april' ? 'selected' : '' }}>April</option>
												<option value="may" {{ request()->month == 'may' ? 'selected' : '' }}>Mei</option>
												<option value="june" {{ request()->month == 'june' ? 'selected' : '' }}>Juni</option>
												<option value="july" {{ request()->month == 'july' ? 'selected' : '' }}>Juli</option>
												<option value="august" {{ request()->month == 'august' ? 'selected' : '' }}>Agustus</option>
												<option value="september" {{ request()->month == 'september' ? 'selected' : '' }}>September</option>
												<option value="october" {{ request()->month == 'october' ? 'selected' : '' }}>Oktober</option>
												<option value="november" {{ request()->month == 'november' ? 'selected' : '' }}>November</option>
												<option value="december" {{ request()->month == 'december' ? 'selected' : '' }}>Desember</option>
											</select>
										</div>
									</div>

									<div class="col-md-3">
										<div class="form-group mb-3">
											<label for="year">Pilih Periode Tahun</label>
											<select name="year" id="year" class="form-control" required>
												<option value="">Pilih Tahun</option>
												@for ($i = 2024; $i <= date('Y'); $i++)
													<option value="{{ $i }}" {{ request()->year == $i ? 'selected' : '' }}>{{ $i }}</option>
												@endfor
											</select>
										</div>
									</div>
											
								</div>

								<div class="col-md-3">
									<div class="form-group">
										<button type="submit" class="btn btn-primary">Filter</button>
										<a href="{{ route('reports.jurnal') }}" class="btn btn-secondary">Reset</a>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
        </div>
    </section>
@endsection

@section('scripts')
	<script>
		if ($('#dataTable-table').length) {
			$('#dataTable-table').DataTable({
				responsive: false,
				dom: 'Blfrtip',
				lengthMenu: [ [10, 50, 100, -1], [10, 50, 100, "All"] ], // Control the entries dropdown
				buttons: [
					{
						extend: 'excel',
						text: 'Excel'
					},
					{
						extend: 'pdf',
						text: 'PDF',
						orientation: 'landscape',
						pageSize: 'A4',
						exportOptions: {
							columns: ':visible'
						}
					},
					{
						extend: 'print',
						text: 'Print',
						orientation: 'landscape',
						exportOptions: {
							columns: ':visible'
						}
					},
					'colvis'
				]
			});
		}
	</script>

	<script>
		document.getElementById('region').addEventListener('change', function () {
			const regionCode = this.value;
			const cabangSelect = document.getElementById('cabang');

			// Clear existing options
			cabangSelect.innerHTML = '<option value="">Semua Cabang</option>';

			if (regionCode) {
				fetch(`/api/cabang-by-region/${regionCode}`)
					.then(response => response.json())
					.then(data => {
						data.forEach(cabang => {
							const option = document.createElement('option');
							option.value = cabang.code;
							option.textContent = cabang.name;
							cabangSelect.appendChild(option);
						});
					})
					.catch(error => console.error('Error fetching cabang data:', error));
			}
		});
	</script>
@endsection