@extends('layouts.app')

@section('title') Login @endsection

@section('content')
<div class="container py-5">
	<h4 class="heading text-center">User Login</h4>

	<div class="row justify-content-center">
		<div class="col-lg-5">
			<div class="card card-no-shadow">
				<div class="card-header">
					<h6 class="card-title">Login</h6>
				</div>
				
				<div class="card-body">
					<form class="form-auth" action="{{ route('login') }}" method="POST">					
						<div class="form-group">
							<label class="form-label" for="login-phone-number">Phone Number</label>
							<input type="text" id="login-phone-number" class="form-control form-control-lg" name="phone_number" placeholder="Phone Number">
						</div>

						<div class="form-group">
							<div>
								<label class="form-label" for="login-password">PASSWORD</label>
								<input type="password" id="login-password" class="form-control form-control-lg" name="password" autocomplete="off" placeholder="Password">
							</div>
							<div>
								<a href="{{ route('password.request') }}" class="forget-password">Forgot Password</a>
							</div>
						</div>

						<div class="mt-5">
							<button type="submit" class="btn btn-lg btn-login">Log In</button>
						</div>
					</form>
				</div>
			</div>
		</div>

<!-- 		<div class="col-lg-5">
			<div class="card">
				<div class="card-header">
					<h6 class="card-title">New Account</h6>
				</div>

				<div class="card-body">
					<p class="lead mb-4">Don't have an account?</p>

					<form class="form-auth" action="{{ route('register') }}" method="POST">
						<div class="form-group">
							<label class="form-label" for="first-name">First Name</label>
							<input type="text" id="first-name" class="form-control form-control-lg" name="first_name">
						</div>

						<div class="form-group">
							<label class="form-label" for="last-name">Last Name</label>
							<input type="text" id="last-name" class="form-control form-control-lg" name="last_name">
						</div>

						<div class="form-group">
							<label class="form-label" for="identity-number">Identity Number</label>
							<input type="text" id="identity-number" class="form-control form-control-lg" name="identity_number" placeholder="Optional">
						</div>

						<div class="form-group">
							<label class="form-label" for="email">Email</label>
							<input type="text" id="email" class="form-control form-control-lg" name="email">
						</div>

						<div class="form-group">
							<label class="form-label" for="phone-number">Phone Number</label>
							<input type="text" id="phone-number" class="form-control form-control-lg" name="phone_number">
						</div>

						<div class="form-group">
							<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="form-group">
							<label class="form-label" for="password-confirmation">Confirm Password</label>
							<input type="password" id="password-confirmation" class="form-control form-control-lg" name="password_confirmation" autocomplete="off">
						</div>	

						<div class="form-group">
							<label class="form-label" for="referrer-code">Referrer Code</label>
							<input type="text" id="referrer-code" class="form-control form-control-lg" name="referrer_code" value="{{ $referrer_code }}" placeholder="Optional">
						</div>	

						<div class="text-center mt-4">
							<button type="submit" class="btn btn-lg btn-outline-dark"><i class="fas fa-user"></i> Register</button>
						</div>
					</form>
				</div>
			</div>
		</div> -->
	</div>
</div>
@endsection

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

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

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

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