 @extends('Dashboard.auth_master_page')


 @section('meta_title'){{ 'myLEAP Login - AryanIct.com' }}@endsection


 @section('title')
     <span>Sign In</span>
 @endsection


 @section('description')
     <p>
         Welcome, please login or <a href="{{ route('register.index') }}"> sign up </a> for a new account.
     </p>
 @endsection



 @section('content')
     <div class="row g-0 justify-content-center">

         @if (Session::has('success_message'))
             <br>
             <p style="color:green;text-align: center">{{ Session::get('success_message') }}</p>
             <br>
         @endif

        @error('email')
        <p style="color:red;text-align: center">{{ $message }}</p>
        <br>
        @enderror

        
         @if (Session::has('error_message'))
             <p style="color:red;text-align: center">{{ Session::get('error_message') }}</p>
             <br>
         @endif
         @if (Session::has('info_message'))
             <p style="color:#3182CE;text-align: center">{{ Session::get('info_message') }}</p>
             <br>
         @endif

         <div class="col-sm-8 col-xl-4">
             <form class="js-validation-signin" action="{{ route('login') }}" method="POST" id="login_form" >
                 @csrf
                 <div class="mb-4">
                     <input type="email" class="form-control form-control-lg form-control-alt py-3 @error('email') is-invalid @enderror" id="login-username"
                         name="email" placeholder="Email">
                     
                 </div>
                 <div class="mb-4">
                     <input type="password" class="form-control form-control-lg form-control-alt py-3 @error('password') is-invalid @enderror" id="login-password"
                         name="password" placeholder="Password">
                         @error('password')
                         <div id="login-password-error" class="invalid-feedback animated fadeIn">{{ $message }}</div>
                         @enderror
                         
                    <i class="fas fa-eye-slash toggle-password" toggle="form-confirm"
                    style="float: right;margin-right: 10px;margin-top: -40px;position: relative;z-index: 10;"></i>
                 </div>
                 <div class="form-row">
                     <div class="form-group">
                         {{-- {!! NoCaptcha::renderJs() !!}
                         {!! NoCaptcha::display() !!} --}}

                         {!! RecaptchaV3::field('login') !!}
                         
                         @error('g-recaptcha-response')
                        <div style="color:#dc2626;font-size: .875rem;margin-top: .375rem;width:100%">{{ $message }}</div>
                         @enderror
                         
                     </div>

                 </div>
                 <br>
                 <div class="d-flex justify-content-between align-items-center mb-4">
                     <div>
                         <a class="text-muted fs-sm fw-medium d-block d-lg-inline-block mb-1"
                             href="{{ route('password.request') }}">
                             Forgot Password?
                         </a>

                     </div>

                     <div>
                         <button type="submit" class="btn btn-lg btn-alt-primary">
                             <i class="fa fa-fw fa-sign-in-alt me-1 opacity-50"></i> Sign In
                         </button>
                     </div>
                 </div>


             </form>
         </div>
     </div>
 @endsection

 @section('script')
     <script>

         $(".toggle-password").click(function() {



             $(this).toggleClass("fa-eye fa-eye-slash");
             var input = $('#login-password');

             if (input.attr("type") == "password") {
                 input.attr("type", "text");
             } else {
                 input.attr("type", "password");
             }
         });
     </script>
 @endsection
