@extends('layouts.app')

@section('title') Password Reset @endsection

@section('content')
<div class="container py-5">
	<div class="row">
		<div class="col-lg-5 mx-auto">
			<div class="card">
				<div class="card-header">
					<h6 class="card-title">Password Reset</h6>
				</div>

				<div class="card-body">
					<p class="lead mb-4">Enter a new password that you can easily remembered.</p>

					<form id="form-password-reset" action="{{ route('password.update') }}" method="POST">					
						<div class="form-group">
							<label class="form-label" for="new-password">New Password</label>
							<input type="password" id="new-password" class="form-control form-control-lg" name="new_password" autocomplete="off">
						</div>

						<div class="form-group">
							<label class="form-label" for="new-password-confirmation">Confirm New Password</label>
							<input type="password" id="new-password-confirmation" class="form-control form-control-lg" name="new_password_confirmation" autocomplete="off">
						</div>

						<div class="text-center mt-4">
							<input type="hidden" name="token" value="{{ $token }}">
							<button type="submit" class="btn btn-lg btn-outline-dark"><i class="fas fa-pencil-alt"></i> Reset</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
@endsection

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

		const form = $(this);

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

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

			if (data.status == 'success')
			{
				form[0].reset();

				setTimeout(function()
				{
					window.location = `{{ route('login') }}`;
				}, 4000);
			}
		});
	});
</script>
@endsection