@extends('layouts.app')

@section('content')

<div class="container mt-4">

<h3>Applications List</h3>

{{-- ================= Filter ================= --}}
<form method="GET" class="row mb-3">

<div class="col-md-4">
<input type="text" name="search" class="form-control"
placeholder="Search by name / mobile / nid"
value="{{ request('search') }}">
</div>

<div class="col-md-3">
<select name="status" class="form-select">
<option value="">All Status</option>
<option value="pending" {{ request('status')=='pending'?'selected':'' }}>Pending</option>
<option value="review" {{ request('status')=='review'?'selected':'' }}>Review</option>
<option value="approved" {{ request('status')=='approved'?'selected':'' }}>Approved</option>
<option value="rejected" {{ request('status')=='rejected'?'selected':'' }}>Rejected</option>
</select>
</div>

<div class="col-md-2">
<button class="btn btn-dark w-100">Filter</button>
</div>

</form>

{{-- ================= Table ================= --}}

<div class="table-responsive">
<table class="table table-bordered table-hover">

<thead class="table-dark">
<tr>
<th>ID</th>
<th>Name</th>
<th>Mobile</th>
<th>NID</th>
<th>Status</th>
<th>Created</th>
<th>Action</th>
</tr>
</thead>

<tbody>

@forelse($applications as $app)

<tr>
<td>{{ $app->id }}</td>
<td>{{ $app->full_name }}</td>
<td>{{ $app->mobile }}</td>
<td>{{ $app->nid }}</td>

<td>
<span class="badge bg-{{ 
$app->status=='approved' ? 'success' : 
($app->status=='rejected' ? 'danger' : 
($app->status=='review' ? 'warning' : 'secondary')) 
}}">
{{ ucfirst($app->status) }}
</span>
</td>

<td>{{ $app->created_at->format('d M Y') }}</td>

<td>
<a href="{{ url('/application/'.$app->id) }}"
class="btn btn-sm btn-info">
View
</a>

<a href="{{ url('/application/'.$app->id.'/edit') }}"
class="btn btn-sm btn-success">
Edit
</a>
</td>

</tr>

@empty

<tr>
<td colspan="7" class="text-center">No Applications Found</td>
</tr>

@endforelse

</tbody>

</table>
</div>

{{-- Pagination --}}
<div class="mt-3">
{{ $applications->withQueryString()->links() }}
</div>

</div>

@endsection