@extends('layouts.app')

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

@section('admin-content')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>{{ $pageInfo['title'] }}</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-form"><a href="{{ route('admin.dashboard') }}">{{ __('Dashboard') }}</a> / </li>
                        <li class="breadcrumb-form active">&nbsp;{{ $pageInfo['title'] }}</li>
                    </ol>
                </div>
            </div>
			<div class="row mt-4">
				<div class="col-md-12">
					<div class="card">
						<div class="card-body">
							<form action="{{ route('reports.upcountry') }}" 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">
												<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">
												<option value="">Semua Cabang</option>
												<!-- Cabang options will be dynamically populated -->
											</select>
										</div>
									</div>
									<div class="col-md-2">
										<div class="form-group mb-3">
											<label for="status">Start Date</label>
											<input type="date" name="start_date" class="form-control" value="{{ request()->start_date }}">
										</div>
									</div>
									<div class="col-md-2">
										<div class="form-group mb-3">
											<label for="status">End Date</label>
											<input type="date" name="end_date" class="form-control" value="{{ request()->end_date }}">
										</div>
									</div>
									<div class="col-md-2">
										<div class="form-group mb-3">
											<label for="status">Status</label>
											<select name="status" id="status" class="form-control">
												<option value="">Semua Status</option>
												<option value="On Progress" {{ request()->status == 'On Progress' ? 'selected' : '' }}>On Progress</option>
												<option value="Approved" {{ request()->status == 'Approved' ? 'selected' : '' }}>Approved</option>
												<option value="Closed" {{ request()->status == 'Closed' ? 'selected' : '' }}>Closed</option>
												<option value="Rejected" {{ request()->status == 'Rejected' ? 'selected' : '' }}>Rejected</option>
											</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.upcountry') }}" class="btn btn-secondary">Reset</a>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
        </div>
    </section>

	@php
		use App\Helpers\NextCloudHelper;
	@endphp

    <section class="content">
        <div class="container-fluid">
            <!-- Form Up Country Table -->
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="header-title">Form Up Country</h4>
                            <div class="data-tables">
								@include('backend.layouts.partials.messages')
								<div class="table-responsive">
									<table id="dataTable-table">
										<thead class="bg-light text-capitalize">
											<tr>
												<th>#</th>
												<th>No Expense</th>
												<th>Nama</th>
												<th>Region</th>
												<th>Cabang</th>
												<th>Rayon</th>
												<th>Tanggal</th>
												<th>Tujuan</th>
												<th>Jarak</th>
												<th>Total</th>
												<th>Total Approved</th>
												<th>Account Number</th>
												<th>Status</th>
											</tr>
										</thead>
										<tbody>
											@foreach ($forms as $item)
												<tr>
													<td>{{ $loop->iteration }}</td>
													<td>{{ $item->expense_number }}</td>
													<td>{{ $item->user->name }}</td>
													<td>{{ $item->user->region->cabang->region->name }}</td>
													<td>{{ $item->user->cabang->cabang->name }}</td>
													<td>{{ $item->rayon->code }}</td>
													<td>{{ \Carbon\Carbon::parse($item->tanggal)->locale('id')->isoFormat('D MMMM Y') }}</td>
													<td>{{ $item->tujuan }}</td>
													<td>{{ $item->jarak }} km</td>
													<td>{{ number_format($item->total, 0, ',', '.') }}</td>
													<td>
														@if ($item->approved_total)
															{{ number_format($item->approved_total, 0, ',', '.') }}
														@else
															-
														@endif
													</td>
													<td>{{ $item->account_number }}</td>
													<td>
														@if ($item->status == 'On Progress')
															<span class="badge badge-warning text-white">{{ $item->status }}</span>
														@elseif ($item->status == 'Approved' || $item->status == 'Final Approved')
															<span class="badge badge-success text-white">{{ $item->status }}</span>
														@else
															<span class="badge badge-danger text-white">{{ $item->status }}</span>
														@endif
													</td>
												</tr>
											@endforeach
										</tbody>
									</table>
								</div>
                            </div>
                        </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