@extends("app")
@section('head_title', 'Login'.' | '.getcong('site_name') )
@section('head_url', Request::url())
@section("content")
{!! NoCaptcha::renderJs() !!}
<style>
.search-fields input:focus {   
border: 2px solid #000;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(68, 70, 68, 0.6);
outline: 0 none;
.fs-2{font-size: 2rem;}
}
</style>

    <div class="container mp-0" style="position: relative;">
        <div class="row">
            <div class="col pt-70 mpl-0 mpr-0">
                <div class="">
                   <div id="login-form" class="login-form pb-70">
                        <h1 class="text-left fs-2" style="font-family: Inter !important;">Log in</h1>
                        @if(Session::has('flash_message'))
                            <div class="alert alert-danger">{{ Session::get('flash_message') }}</div>
                        @endif
                        <p>Welcome back! Please enter your details.</p>
                       {!! Form::open(array('url' => 'login','class'=>'search-form','id'=>'loginform','role'=>'form')) !!} 
                        <div class="search-fields">
                            <label>Email address</label>
                            <input type="email" name="email" id="email" />
                            @if ($errors->has('email'))
                                <span style="color:#fb0303">
                                    {{ $errors->first('email') }}
                                </span>
                            @endif
                        </div>
                        <div class="search-fields">
                            <label>Password</label>
                              <input type="password" name="password" id="password" /><i class="fa fa-eye-slash pass-view" aria-hidden="true" onclick="myFunction()"></i>
                              <p><a style="color:#000;" href="{{ url('password/email') }}">Forgot Password ?</a></p>
							  @if ($errors->has('password'))
                                <span style="color:#fb0303">
                                    {{ $errors->first('password') }}
                                </span>
                            @endif
                        </div>
                        <!--<div class="mb-3 form-check">
                            <input type="checkbox" class="form-check-input" id="exampleCheck1">
                            <label class="form-check-label  fs-14" for="exampleCheck1">Rememeber me</label><a class="frgpwd  fs-14" href="{{ url('password/email') }}">Forgot password?</a>
                        </div>-->
                        <div class="mb-3 form-check pb-20">
							<input type="checkbox" class="form-check-input" name="term" checked="" value="1" id="agreed" style="border-radius: 100%;" required="">
							<label class="form-check-label fs-14" for="agreed"> I accept all the <a href="{{url('/terms-conditions')}}" class="text-black">Terms &amp; Conditions</a> and <a href="{{url('/privacy-policy')}}" class="text-black">Privacy Policy</a></label>
						</div>
                        <div class="search-fields" align="center">
                        {!! NoCaptcha::display() !!}
                        @if ($errors->has('g-recaptcha-response'))
                            <span style="color:#fb0303">
                                {{ $errors->first('g-recaptcha-response') }}
                            </span>
                        @endif
                        </div> 
                        
                        <div class="search-button-container button-box">
                          <button class="btn bg-black text-white w-100">Sign in</button>
                            <!--google login-->
							<a href="{{ url('social_login/google') }}" class="link border w-100 block text-center" style="padding: 8px;margin-top: 10px;font-size: 0.9em;border-radius: 100px;"><svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="25" height="25" viewBox="0 0 48 48"><path fill="#FFC107" d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z"></path><path fill="#FF3D00" d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z"></path><path fill="#4CAF50" d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z"></path><path fill="#1976D2" d="M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z"></path></svg><span style="padding-left:10px;">Sign in with Google</span></a>	
                            <!--google login end-->
                          <div class="search-fields text-center" style="font-size: 15px; padding-top:20px">                            
                                <p>Don't have account ? <a style="color:#000" href="{{ url('register') }}">Sign up</a></p>
                          </div>
                        </div>
                      {!! Form::close() !!}  
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="container mp-0">
            <p class="text-thik fs-14">©ACASA 2023 | Privacy | <a class="link" href="tel:+97142706989">+97142706989</a> | <a class="link" target="_blank" href="https://wa.link/wif9wh"><img src="{{url('/public/assets/svg/whatsapp.svg')}}"></a></p>
        </div>
    </div>
	@endsection      
@push('scripts')   
	<script>
	function myFunction() {
	  var x = document.getElementById("password");
	  if (x.type === "password") {
		x.type = "text";
	  } else {
		x.type = "password";
	  }
	}
	$('.pass-view').on('click', function(){
		$('.password').attr('type', 'text');
		
	});
	</script>
@endpush