@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 active" aria-current="page">Edit</li>
	</ol>
</nav>

<div class="card mb-3">
	<form id="form-edit" action="{{ route('agents.update') }}" method="POST">
		<div class="card-header d-flex align-items-center justify-content-between">
			<h5 class="mb-0">Edit Agent</h5>

			<button type="submit" class="btn btn-secondary text-white"><i class="fas fa-save"></i> Save</button>
		</div>
		
		<div class="card-body">
			<div class="container-fluid">
				<div class="row mb-3">
					<label class="col-md-2 col-form-label">Email</label>

					<div class="col-md-10">
						<input type="text" class="form-control" name="email" value="{{ $agent->email }}">
						<div class="form-text">required</div>
					</div>
				</div>

				<div class="row mb-3">
					<label class="col-md-2 col-form-label">First Name</label>

					<div class="col-md-10">
						<input type="text" class="form-control" name="first_name" value="{{ $agent->first_name }}">
						<div class="form-text">required</div>
					</div>
				</div>

				<div class="row mb-3">
					<label class="col-md-2 col-form-label">Last Name</label>

					<div class="col-md-10">
						<input type="text" class="form-control" name="last_name" value="{{ $agent->last_name }}">
						<div class="form-text">required</div>
					</div>
				</div>

				<div class="row mb-3">
					<label class="col-md-2 col-form-label">Tier</label>

					<div class="col-md-10">
						<select class="form-select" name="tier">
							@for ($i = 1; $i <= 5; $i++)
							<option value="{{ $i }}" @if ($agent->tier == $i){{ 'selected' }}@endif>{{ $i }}</option>
							@endfor
						</select>

						<div class="form-text">required</div>
					</div>
				</div>

				<div class="row mb-3">
					<label class="col-md-2 col-form-label">Credit Limit</label>

					<div class="col-md-10">
						<div class="input-group">
							<input type="number" class="form-control" name="credit_limit" value="{{ $agent->credit_limit }}">
							<span class="input-group-text">credit(s)</span>
						</div>

						<div class="form-text">required</div>
					</div>
				</div>

				<div class="row mb-3">
					<label class="col-md-2 col-form-label">Settlement Day</label>

					<div class="col-md-10">
						<select class="form-select" name="settlement_day">
							@foreach (range(1, 28) as $day)
							<option value="{{ $day }}" @if ($day == $agent->settlement_day){{ 'selected' }}@endif>{{ $day }}</option>
							@endforeach
						</select>

						<div class="form-text">required</div>
					</div>
				</div>
			</div>
		</div>
		
		<input type="hidden" name="id" value="{{ $agent->id }}">
	</form>
</div>

<div class="card">
	<form id="form-password" action="{{ route('agents.password.update') }}" method="POST">
		<div class="card-header d-flex align-items-center justify-content-between">
			<h5 class="mb-0">Change Password</h5>

			<button type="submit" class="btn btn-secondary text-white">
				<i class="fas fa-save"></i> Save
			</button>
		</div>
		
		<div class="card-body">
			<div class="container-fluid">
				<div class="row mb-3">
					<label class="col-md-2 col-form-label">Password</label>

					<div class="col-md-10">
						<input type="password" class="form-control" name="password">
						<div class="form-text">required | minimum 6 characters </div>
					</div>
				</div>

				<div class="row mb-3">
					<label class="col-md-2 col-form-label">Password Confirmation</label>

					<div class="col-md-10">
						<input type="password" class="form-control" name="password_confirmation">
						<div class="form-text">required | minimum 6 characters </div>
					</div>
				</div>
			</div>
		</div>
		
		<input type="hidden" name="id" value="{{ $agent->id }}">
	</form>
</div>
@endsection

@section('js')
<script>
	$('#form-edit').submit(function(e)
	{
		e.preventDefault();

		const form = $(this);

		$.ajax({
			url: $(this).attr('action'),
			type: $(this).attr('method'),
			data: $(this).serialize(),
			dataType: 'json'

		}).done(function(res)
		{
			showNoty(res);
		});
	});

	$('#form-password').submit(function(e)
	{
		e.preventDefault();

		const form = $(this);

		$.ajax({
			url: $(this).attr('action'),
			type: $(this).attr('method'),
			data: $(this).serialize(),
			dataType: 'json'

		}).done(function(res)
		{
			showNoty(res);

			if (res.status == 'success')
			{
				form[0].reset();
			}
		});
	});
</script>
@endsection