@extends('layout.app')
@section('title','Login')
@section('body_class', 'bg-body')
@section('content')
<div class="d-flex flex-column flex-root">
	<!--begin::Authentication - Sign-in -->
	<div class="d-flex flex-column flex-column-fluid bgi-position-y-bottom position-x-center bgi-no-repeat bgi-size-contain bgi-attachment-fixed" >
		<!--begin::Content-->
		<div class="d-flex flex-center flex-column flex-column-fluid p-10 pb-lg-20">
			<!--begin::Logo-->
			<a href="{{ url('index') }}" class="py-10">
				<!--begin::Desktop modes-->
				<img alt="Logo" src="{{ URL::asset('/assets/media/logos/logo_7m.png') }}" class="d-none d-lg-inline-block h-70px" />
				<!--end::Desktop modes-->
				<!--begin::Table & mobile modes-->
				<img alt="Logo" src="{{ URL::asset('/assets/media/logos/logo_7m.png') }}" class="d-lg-none h-70px" />
				<!--end::Table & mobile modes-->
			</a>
			<!--end::Logo-->
			<!--begin::Wrapper-->
			<div class="w-lg-600px bg-body rounded shadow-sm p-10 p-lg-15 mx-auto">
				<!--begin::Form-->
				<form class="form" novalidate="novalidate" id="kt_sign_in_form" action="" method="" autocomplete="off">
					{{ csrf_field() }}
					<!--begin::Heading-->
					<div class="text-center mb-10">
						<!--begin::Title-->
						<h1 class="text-dark mb-3">Login to 7Mantra</h1>
						<!--end::Title-->
					</div>
					<!--begin::Heading-->
					<div class="fv-row mb-10 text-center">
						<label class="form-label fs-6 fw-bolder text-dark mx-10" id="email">Email/User Name</label>
						<label class="form-label fs-6 fw-bolder text-dark mx-10" id="mobile">Mobile No</label>
					</div>
					<div class="email-login">
						<!--begin::Input group-->
						<div class="fv-row mb-10">
							<!--begin::Label-->
							<label class="form-label fs-6 fw-bolder text-dark">Email/User Name</label>
							<!--end::Label-->
							<!--begin::Input-->
							<input class="form-control border-primary border-hover form-control-lg form-control-solid" type="text" name="email" autocomplete="off" placeholder="Your email" />
							<!--end::Input-->
						</div>
						<!--end::Input group-->
						<!--begin::Input group-->
						<div class="fv-row mb-10">
							<!--begin::Wrapper-->
							<div class="d-flex flex-stack mb-2">
								<!--begin::Label-->
								<label class="form-label fw-bolder text-dark fs-6 mb-0">Password</label>
								<!--end::Label-->
								<!--begin::Link-->
								<!--end::Link-->
							</div>
							<!--end::Wrapper-->
							<!--begin::Input-->
							<input class="form-control border-primary border-hover form-control-lg form-control-solid" type="password" name="password" autocomplete="off" placeholder="Your Password"/>
							<!--end::Input-->
						</div>
						<!--end::Input group-->
						<div class="text-center email-submit">
							<!--begin::Submit button-->
							<button type="submit" id="kt_sign_in_submit" class="btn btn-lg btn-primary w-100 mb-5" onclick="location.href='{{ route('index') }}';">
								<span class="indicator-label">Continue</span>
								<span class="indicator-progress">Please wait...
									<span class="spinner-border spinner-border-sm align-middle ms-2"></span>
								</span>
							</button>
							<!--end::Submit button-->
						</div>
						<a href="{{ url('forgot_password') }}" class="link-primary fs-6 fw-bolder">Forgot Password?</a>
					</div>
					<div class="mobile-login">
						<!--begin::Input group-->
						<div class="fv-row mb-10">
							<!--begin::Label-->
							<label class="form-label fs-6 fw-bolder text-dark">Mobile No</label>
							<!--end::Label-->
							<!--begin::Input-->
							<input class="form-control border-primary border-hover form-control-lg form-control-solid" type="tel" name="mobile" autocomplete="off" placeholder="Your Mobile number" onkeypress="return onlyNumberKey(event)" onkeyup="return checkMobileLength(value)" />
							<!--end::Input-->
						</div>
						<!--end::Input group-->

						<!--begin::Input group-->
						<div class="fv-row mb-10 d-none" id="otp">
							<!--begin::Label-->
							<div class="fw-bolder text-start text-dark fs-6 mb-1 ms-1">Type your 6 digit security code</div>
							<!--end::Label-->
							<!--begin::Input group-->
							<div class="d-flex flex-wrap flex-stack">
								<input type="text" data-inputmask="'mask': '9', 'placeholder': ''" maxlength="1" class="form-control form-control-solid h-60px w-60px fs-2qx text-center border-primary border-hover mx-1 my-2" value="" name="otp[]" />
								<input type="text" data-inputmask="'mask': '9', 'placeholder': ''" maxlength="1" class="form-control form-control-solid h-60px w-60px fs-2qx text-center border-primary border-hover mx-1 my-2" value="" name="otp[]" />
								<input type="text" data-inputmask="'mask': '9', 'placeholder': ''" maxlength="1" class="form-control form-control-solid h-60px w-60px fs-2qx text-center border-primary border-hover mx-1 my-2" value="" name="otp[]" />
								<input type="text" data-inputmask="'mask': '9', 'placeholder': ''" maxlength="1" class="form-control form-control-solid h-60px w-60px fs-2qx text-center border-primary border-hover mx-1 my-2" value="" name="otp[]" />
								<input type="text" data-inputmask="'mask': '9', 'placeholder': ''" maxlength="1" class="form-control form-control-solid h-60px w-60px fs-2qx text-center border-primary border-hover mx-1 my-2" value="" name="otp[]" />
								<input type="text" data-inputmask="'mask': '9', 'placeholder': ''" maxlength="1" class="form-control form-control-solid h-60px w-60px fs-2qx text-center border-primary border-hover mx-1 my-2" value="" name="otp[]" />
							</div>
							<!--begin::Input group-->
							<a href="{{ route('sent_otp') }}" class="fw-bolder fs-4">Resend OTP</a>
						</div>
						<!--begin::Actions-->
						<!--end::Actions-->
						<div class="text-center mobile-submit">
							<!--begin::Submit button-->
							<button type="button" id="" class="btn btn-lg btn-primary w-100 mb-5 disabled" onclick="">
								<span class="indicator-label" id="otp-timer">Send OTP</span>
								<span class="indicator-progress">Please wait...
									<span class="spinner-border spinner-border-sm align-middle ms-2"></span>
								</span>
							</button>
							<!--end::Submit button-->
						</div>
						<div class="text-center otp-submit">
							<!--begin::Submit button-->
							<button type="submit" id="kt_sign_in_submit" class="btn btn-lg btn-primary w-100 mb-5" onclick="location.href='{{ route('index') }}';">
								<span class="indicator-label">Verify OTP</span>
								<span class="indicator-progress">Please wait...
									<span class="spinner-border spinner-border-sm align-middle ms-2"></span>
								</span>
							</button>
							<!--end::Submit button-->
						</div>
					</div>
				</form>
				<!--end::Form-->
				<p class="my-10 fs-3 fw-bolder">Call Ambulance</p>
				<div class="text-center">
					<a href="tel:+91108" class="mx-10 fs-4">
						<span class="fa fa-phone mx-2 fa-rotate-90" aria-hidden="true"></span>
						108
					</a>
					<a href="tel:+91112" class="mx-10 fs-4">
						<span class="fa fa-phone mx-2 fa-rotate-90" aria-hidden="true"></span>
						112
					</a>
				</div>
			</div>

			<!--end::Wrapper-->
			@include('layout.footer')
		</div>
		<!--end::Content-->
	</div>
	<!--end::Authentication - Sign-in-->
</div>
@endsection
@section('javascript')
<script src="assets/js/custom/authentication/sign-in/general.js"></script>
<script type="text/javascript">
	$('.mobile-login').hide();
	$('.email-login').show();
	$('#email').addClass('btn btn-primary');
	$('.mobile-submit').addClass('d-none');

	$('#email').on('click',function(){
		$('.mobile-login').hide();
		$('.email-login').show();
		$(this).addClass('btn btn-primary');
		$('#mobile').removeClass('btn btn-primary');
	});
	$('#mobile').on('click',function(){
		$('.email-login').hide();
		$('.mobile-login').show();
		$(this).addClass('btn btn-primary');
		$('#email').removeClass('btn btn-primary');
	});
	function onlyNumberKey(evt) {
        // Only ASCII character in that range allowed
        var ASCIICode = (evt.which) ? evt.which : evt.keyCode
        if (ASCIICode > 31 && (ASCIICode < 48 || ASCIICode > 57))
            return false;
        return true;
    }
    function checkMobileLength(val){
    	if(val.length == 10){
    		$('.mobile-submit').removeClass('d-none');
    		$('.mobile-submit > button').removeClass('disabled');
    	}
    	if(val.length > 10 || val.length < 10){
    		$('.mobile-submit').addClass('d-none');
    	}
    	return false;
    }
    $('.mobile-submit').on('click',function(e){
    	$('#otp').removeClass('d-none');
    });
</script>
@endsection