@extends('layouts.auth')
@section('title', 'Login')
@section('content')
<!-- Progress bar on scroll -->
<div class="progress-top-bar"></div>

<!-- Loader -->
<!-- <div id="global-loader">
   <img src="{{asset('assets/vidiyal/img/loader.svg')}}" class="loader-img" alt="Loader">
</div> -->
<!-- /Loader -->

<div class="square-box">
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
</div>

{{-- <div class="bg-svg">
   <div class="page" >
      <div class="z-index-10">
         <div class="container">
            <div class="row">
               <div class="col-xl-5 col-lg-6 col-md-8 col-sm-8 col-xs-10 mx-auto my-auto py-4 justify-content-center">
                  <div class="card-sigin">
                     <!-- Demo content-->
                     <div class="main-card-signin d-md-flex">
                        <div class="wd-100p">
                           <div class="d-flex">
                              <a href="index.html">
                                 <img src="{{asset('assets/vidiyal/img/brand/favicon-white.png')}}" class="sign-favicon ht-40 logo-dark" alt="logo">
                                 <img src="{{asset('assets/vidiyal/img/brand/favicon-white-1.png')}}" class="sign-favicon ht-40 logo-light-theme" alt="logo">
                              </a>
                           </div>
                           <div class="mt-3">
                              <h2 class="tx-medium tx-primary">Welcome back!</h2>
                              <h6 class="font-weight-semibold mb-4 text-white-50">Please sign in to continue.</h6>
                              <div class="panel tabs-style7 scaleX mt-2">
                                 <div class="panel-head">
                                    
                                 </div>
                                 <div class="panel-body p-0">
                                    <div class="tab-content mt-3">
                                       <div class="tab-pane active" id="signinTab1">
                                       <form method="POST" action="{{ _route('client.staff.login') }}">
                                       @csrf
                                             <div class="form-group">
                                             <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus placeholder="Email address">
                                                @error('email')
                                                   <span class="invalid-feedback" role="alert">
                                                      <strong>{{ $message }}</strong>
                                                   </span>
                                                @enderror		
                                          </div>
                                             <div class="form-group">
                                             <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="current-password" placeholder="Password">
               
                                             @error('password')
                                                <span class="invalid-feedback" role="alert">
                                                   <strong>{{ $message }}</strong>
                                                </span>
                                             @enderror		
                                          </div>
                                             <div class="d-flex align-items-center justify-content-between">
                                                
                                                <button type="submit" class="btn btn-primary">Log In </button>
                                                <p class="mb-0"><a href="{{ _route('client.staff.password.request') }}" class="tx-primary">Forgot password?</a></p>
                                             </div>
                                          </form>
                                          
                                       </div>
                                       
                                    </div>
                                 </div>
                              </div>
                              
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div> --}}

@php
$logo_dark = $dataConfigs['logo_dark'] ?? is_default()['default_dark_logo'];
	$logo_dark_icon = $dataConfigs['logo'] ?? is_default()['default_dark_logo_icon'];
	$logo_white = $dataConfigs['logo'] ?? is_default()['default_white_logo'];
	$logo_white_icon = $dataConfigs['logo'] ?? is_default()['default_white_logo_icon'];

    $favicon = $dataConfigs['favicon'] ?? is_default()['favicon'];
    $brand_color = $dataConfigs['brand'] ?? 'default';
@endphp
<div class="authentication-wrapper authentication-2 ui-bg-cover ui-bg-overlay-container px-12" >
   <div class="ui-bg-overlay bg-dark opacity-25"></div>
   <div class="authentication-inner py-5" >
      <div class="card" >
            <div class="p-4 p-sm-5">
               <!-- [ Logo ] Start -->
               <div class="d-flex justify-content-center align-items-center pb-2 mb-4">
                  <div class="ui-w-140">
                        <div class="w-100 position-relative">
                           <img src="{{$logo_dark}}" class="mobile-logo ht-60 dark-logo-1" alt="logo">
                           <div class="clearfix"></div>
                        </div>
                  </div>
               </div>
               <!-- [ Logo ] End -->
               
               <!-- Form -->
               <div class="bg-light rounded p-4" style="backdrop-filter: blur(3px);">
                  <div class="row">
                        <div class="col-sm-6">
                           <h2 class="tx-medium tx-primary text-center">Welcome back!</h2>
                           <h5 class="text-center font-weight-normal mb-4">Login with your account details.</h5>
                           <form method="POST" action="{{ _route('client.staff.login') }}">
                              @csrf
                              @include('common.alert')
                              <div class="form-group mb-3">
                                 <input type="email" name="email" value="{{ old('email') }}" required class="form-control" placeholder="Email address">
                              </div>
                              <div class="form-group mb-3">
                                 <input type="password" name="password" class="form-control" placeholder="Password" required>
                              </div>
							 
                              <button type="submit" class="btn btn-primary btn-block mb-3">Login</button>
                              <div class="text-muted">
                                    Did you <a href="{{ _route('client.staff.password.request') }}"><span class="tx-primary">forget your password?</span></a>
                              </div>
                           </form>
                        </div>
                        <div class="col-sm-6 d-none d-sm-block">
                          
                           <img src="{{asset('assets/vaathi-01.png')}}" alt="images" class="img-fluid mobile-logo-1 dark-logo-1">
                           
                        </div>
                  </div>
               </div>
               <div class="text-center text-muted mt-4">
                  <p class="tx-primary">Copyrighted to Knewton Tech Pvt Ltd 2022-23</p>
                  {{-- By signing in or creating an account, you agree with our <a href="#!">Terms & conditions</a> and <a href="#!">Privacy policy</a>. --}}
               </div>
               <!-- [ Form ] End -->
               </div>
      </div>
   </div>
</div>
                           
                       
<script type="text/javascript">
const togglePassword = document.querySelector('#togglePassword');
const password = document.querySelector('#password');
togglePassword.addEventListener('click', function (e) {
    // toggle the type attribute
    const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
    password.setAttribute('type', type);
    // toggle the eye slash icon
    $('#togglePassword').attr('checked',true);
});
</script>
@endsection