@extends('layouts.app')

@section('content')
<nav aria-label="breadcrumb">
	<ol class="breadcrumb">
		<li class="breadcrumb-item">
			<a href="{{ route('agents.index') }}" class="text-decoration-none fw-bold">Agents</a>
		</li>

		<li class="breadcrumb-item">
			<a href="{{ route('agents.edit', ['id' => $agent->id]) }}" class="text-decoration-none fw-bold">{{ $agent->email }}</a>
		</li>
		
		<li class="breadcrumb-item active" aria-current="page">Payments</li>
	</ol>
</nav>

<div class="card">
	<div class="card-header d-flex align-items-center">
		<h5 class="mb-0">Agent Payments</h5>

		<div class="ms-auto">
			<a href="{{ route('agents.payments.create', ['agent_id' => $agent->id]) }}" class="btn btn-outline-secondary">
				<i class="fas fa-plus"></i> New
			</a>
		
			<button type="button" class="btn btn-secondary text-white" data-bs-toggle="collapse" data-bs-target="#collapse-filter">
				<i class="fas fa-sliders-h"></i> Filter
			</button>
		</div>
	</div>

	<div class="card-body">
		<div id="collapse-filter" class="collapse">
			<form class="form-filter pb-3" action="{{ route('agents.payments.index', ['agent_id' => $agent->id]) }}" method="GET">
				<div class="row g-3">
					<div class="col-lg-3">
						<label class="col-form-label">Sort</label>
						<select class="form-select" name="sort">
							<option value="amount">Amount</option>
							<option value="created_at" selected>Created At</option>
						</select>
					</div>

					<div class="col-lg-3">
						<label class="col-form-label">Order</label>
						<select class="form-select" name="order">
							<option value="ASC">Ascending</option>
							<option value="DESC" selected>Descending</option>
						</select>
					</div>

					<div class="col-lg-3">
						<label class="col-form-label">Search</label>
						<div class="input-group">
							<input type="search" class="form-control" name="keyword" placeholder="Keyword (remark)">
							<button type="submit" class="btn btn-secondary text-white"><i class="fas fa-search"></i></button>
						</div>						
					</div>
				</div>

				<input type="hidden" name="page" value="1">
			</form>
		</div>

		<div class="data">
			@include('partials.agent_payments')
		</div>
	</div>
</div>
@endsection