@extends('layouts.app')

@section('title') Login @endsection

@section('content')
<div class="container py-5">
	<h1 class="heading display-4 text-center">Agent Zone</h1>

	<div class="row justify-content-center">
		<div class="col-lg-6 mx-auto">
			<div class="card">
				<div class="card-header">
					<h6 class="card-title">Agent Login</h6>
				</div>
				
				<div class="card-body">
					<p class="lead mb-4">I'm an existing agent.</p>

					<form class="form-auth" action="{{ route('login') }}" method="POST">					
						<div class="mb-3">
							<label for="email" class="form-label">Email</label>
							<input type="text" id="email" class="form-control form-control-lg" name="email">
						</div>
						
						<div class="mb-3">
							<label class="form-label" for="password">Password</label>
							<input type="password" id="password" class="form-control form-control-lg" name="password" autocomplete="off">
						</div>

						<div class="text-center mt-4">
							<button type="submit" class="btn btn-lg btn-outline-dark">
								Log In
							</button>

							<div class="text-muted small mt-3">Please contact admin for help: +6501245939 or chai@invoke.my</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
@endsection

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

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

		}).done(function(res)
		{
			if (res.status == 'error')
			{
				showNoty(res);
			}

			else
			{
				location.reload();
			}
		});
	});
</script>	
@endsection