@extends('frontend.layouts.template')
@section('content')
		<!--header-->
		<div class="row box-banner" style="">
			<div class="col-12 p-0 img-bg">
				<div class="box-page-login" style="">

					<div class="box-page-login-sub" style="">
						<div class="mb-3">
							<h3><b class="c-black">LOGIN</b></h3>
                            @if ($errors->any())
                                <div class="alert alert-danger">
                                    {{ $errors->first() }}
                                </div>
                            @endif
						</div>
						<div>
							<form method="POST" action="{{ url('login') }}">
                                <input type="hidden" name="_token" value="{{ csrf_token() }}" />
								<div class="form-group">
									<input type="email" class="form-control border-r0" required="" id="email" placeholder="Email Address" name="email">
								</div>
								<div class="form-group mb-0">
									<div class="input-group" id="show_hide_password">
										<input class="form-control border-r0" required type="password" name="password" placeholder="Password">
										<div class="input-group-addon">
											<a href=""><i class="fa fa-eye-slash c-black" aria-hidden="true"></i></a>
										</div>
									</div>
								</div>
								<div class="checkbox">
									<a href="javascript:;" class="c-black a-forgot" data-toggle="modal" data-target="#myModal" style="">Forgot Password?</a>
								</div>
								<div style="margin-top:15px;">
									<button type="submit" class="btn button-b text-center border-r0" style="width: 100%;">SIGN IN</button>
								</div>
							</form>
						</div>
					</div>
					<div class="mt-3 a-regis">
						<a href="{{ url('register') }}" class="btn button-c text-center border-r0" style="width: 100%;font-weight: 600;font-size: 16px;">
							REGISTER
						</a>
					</div>
				</div>
<!--				<img src="{{ asset('frontend/assetsnew/img/BG12.jpg') }}" alt="" class="img-bg-login">-->
			</div>
		</div>
@endsection
{{-- Forgot password --}}
@section('modals')
    <!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
	<div class="modal-dialog modal-md" style="transform: translate(0,-50%);top: 45%;">
		<div class="modal-content border-r0" style="background: unset;border: none;">
			<div class="modal-header" style="border:none">
				<button type="button" class="close" data-dismiss="modal" style="padding: 0;font-size: 40px;">&times;</button>
				<h4 class="modal-title"></h4>
			</div>
			<div class="modal-body" style="background: #fff;">

                <form  class="text-center c-black" id="box-forgot-a">
                    <div class="mt-4 mb-2">
                    	<img src="{{ asset('frontend/assetsnew/img/icon/login.png') }}" alt="" style="width: 35px;">
                    </div>
                    <div>
                    	<h4><b>Forgot your password?</b></h4>
                    	We will send a verification code on <br>
                    	your registered Email Address
                    </div>
                    <div style="padding: 15px 50px;">
                    	<input type="email" class="form-control border-r0" id="f-email" placeholder="Email Address" name="email">
                    </div>
                    <div class="mt-3 mb-3">
                    	<a href="javascript:;" class="button-close" data-dismiss="modal" style="font-size: 12px;padding: 7px 42px;box-shadow: unset;">CANCEL</a>
                    	<a href="javascript:;" class="button-b forgot-click-a" id="" style="font-size: 12px;padding: 7px 50px;box-shadow: unset;">NEXT</a>
                    </div>
                </form>

                <form class="text-center c-black" id="box-forgot-b">
                    <div class="mt-4 mb-2">
                    	<img src="{{ asset('frontend/assetsnew/img/icon/otp.png') }}" alt="" style="width: 45px;">
                    </div>
                    <div>
                    	<h4><b>Verification Code</b></h4>
                    	Enter verification code we just sent you on <br>
                    	your email Address
                    </div>
                    <div style="padding: 15px 50px;display: flex;text-align: center;">
						<div style="margin: 0 auto;">
							<input type="text" class="form-control border-r0" id="tex1" placeholder="X" name="text1" style="width: 35px;float: left;margin: 0 5px;">
							<input type="text" class="form-control border-r0" id="tex2" placeholder="X" name="text2" style="width: 35px;float: left;margin: 0 5px;">
							<input type="text" class="form-control border-r0" id="tex3" placeholder="X" name="text3" style="width: 35px;float: left;margin: 0 5px;">
							<input type="text" class="form-control border-r0" id="tex4" placeholder="X" name="text4" style="width: 35px;float: left;margin: 0 5px;">
						</div>
                    </div>
                    <div class="mt-3 mb-3">
                    	<a href="javascript:;" class="button-b forgot-click-b"  style="font-size: 12px;padding: 7px 50px;box-shadow: unset;">NEXT</a>
                    </div>
                </form>

				<form class="text-center c-black" id="box-forgot-c">
					<div class="mt-4 mb-2">
						<img src="{{ asset('frontend/assetsnew/img/icon/newpass.png') }}" alt="" style="width: 35px;">
					</div>
					<div>
						<h4><b>Enter new password</b></h4>
						Please enter new password below to reset <br>
						your password
					</div>
					<div class="box-p-50">
						<div class="input-group" id="show_hide_password">
							<input class="form-control border-r0" type="password" placeholder="Password">
							<div class="input-group-addon">
								<a href=""><i class="fa fa-eye-slash c-black" aria-hidden="true"></i></a>
							</div>
						</div>
						<div class="input-group mt-2" id="show_hide_password_1">
							<input class="form-control border-r0" type="password" placeholder="Confirm Password">
							<div class="input-group-addon">
								<a href=""><i class="fa fa-eye-slash c-black" aria-hidden="true"></i></a>
							</div>
						</div>
					</div>
					<div class="mt-3 mb-3">
						<button type="submit" class="button-b" style="font-size: 12px;padding: 7px 50px;box-shadow: unset;">NEXT</button>
					</div>
				</form>
			</div>
		</div>

	</div>
</div>

@endsection
{{-- Javascript --}}
@section('javascript')
    <script type="text/javascript">
    	$(document).ready(function() {
            $('.forgot-click-b').click(function() {
						$('#box-forgot-b').hide();
						$('#box-forgot-c').show();
			});

            $('.forgot-click-a').click(function() {
                $('#box-forgot-a').hide();
				$('#box-forgot-b').show();
			});

		$("#show_hide_password a").on('click', function(event) {
			event.preventDefault();
			if ($('#show_hide_password input').attr("type") == "text") {
				$('#show_hide_password input').attr('type', 'password');
				$('#show_hide_password i').addClass("fa-eye-slash");
				$('#show_hide_password i').removeClass("fa-eye");
			} else if ($('#show_hide_password input').attr("type") == "password") {
				$('#show_hide_password input').attr('type', 'text');
				$('#show_hide_password i').removeClass("fa-eye-slash");
				$('#show_hide_password i').addClass("fa-eye");
			}
		});

		$("#show_hide_password_1 a").on('click', function(event) {
			event.preventDefault();
			if ($('#show_hide_password_1 input').attr("type") == "text") {
				$('#show_hide_password_1 input').attr('type', 'password');
				$('#show_hide_password_1 i').addClass("fa-eye-slash");
				$('#show_hide_password_1 i').removeClass("fa-eye");
			} else if ($('#show_hide_password_1 input').attr("type") == "password") {
				$('#show_hide_password_1 input').attr('type', 'text');
				$('#show_hide_password_1 i').removeClass("fa-eye-slash");
				$('#show_hide_password_1 i').addClass("fa-eye");
			}
		});
	});


</script>
@endsection