@extends('layouts.app')

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

@section('admin-content')
	<section class="content-header">
		<div class="container-fluid">
			<div class="row">
                <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">
				<!-- Total Expense -->
				<div class="col-lg-3 col-6">
					<div class="small-box bg-info">
						<div class="inner">
							<h3>Rp {{ number_format($forms->sum('total'), 0, ',', '.') }}</h3>
							<p>Total Expense</p>
						</div>
						<div class="icon">
							<i class="fas fa-wallet"></i>
						</div>
					</div>
				</div>
				<!-- Approved Expense -->
				<div class="col-lg-3 col-6">
					<div class="small-box bg-success">
						<div class="inner">
							<h3>Rp {{ number_format($forms->whereIn('status', ['Approved', 'Closed'])->sum('approved_total'), 0, ',', '.') }}</h3>
							<p>Approved Expenses</p>
						</div>
						<div class="icon">
							<i class="fas fa-check-circle"></i>
						</div>
					</div>
				</div>
				<!-- Pending Expense -->
				<div class="col-lg-3 col-6">
					<div class="small-box bg-warning">
						<div class="inner">
							<h3 class="text-white">Rp {{ number_format($forms->where('status', 'On Progress')->sum('total'), 0, ',', '.') }}</h3>
							<p class="text-white">Pending Expenses</p>
						</div>
						<div class="icon">
							<i class="fas fa-hourglass-half"></i>
						</div>
					</div>
				</div>
				<!-- Budget Available -->
				<div class="col-lg-3 col-6">
					<div class="small-box bg-purple">
						<div class="inner">
							{{-- <h3 class="text-white">Rp {{ number_format($availableBudget, 0, ',', '.') }}</h3> --}}
							{{-- check if availableBudget is not - --}}
							<h3 class="text-white">{{ $availableBudget == '0' ? '-' : 'Rp' . number_format($availableBudget, 0, ',', '.') }}</h3>
							<p class="text-white">Available Budget</p>
						</div>
						<div class="icon">
							<i class="fas fa-money-bill"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
    <section class="content">
        <div class="container-fluid">
			<div class="row">
				<div class="col-md-12">
					<div class="card">
						<div class="card-body">
							<form action="{{ route('reports.all') }}" 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="month">Pilih Periode Bulan</label>
											<select name="month" id="month" class="form-control">
												<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-2">
										<div class="form-group mb-3">
											<label for="year">Pilih Periode Tahun</label>
											<select name="year" id="year" class="form-control">
												<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 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 1" {{ request()->status == 'Approved 1' ? 'selected' : '' }}>Approved 1</option>
												<option value="Approved 2" {{ request()->status == 'Approved 2' ? 'selected' : '' }}>Approved 2</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.all') }}" 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">
            <!-- All Forms Table -->
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="header-title">All Forms</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>Tipe</th>
												<th>Nama</th>
												<th>Region</th>
												<th>Cabang</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->type }}</td>
													<td>{{ $item->user->name }}</td>
													<td>{{ $item->user->region->cabang->region->name }}</td>
													<td>{{ $item->user->cabang->cabang->name }}</td>
													<td>{{ number_format($item->total, 0, ',', '.') }}</td>
													<td>{{ number_format($item->approved_total, 0, ',', '.') }}</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 1' || $item->status == 'Approved 2' || $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, 25, 50, -1], [10, 25, 50, "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