@extends('layouts.auth')
@section('title', 'Login')
@section('content')
<center><img src="{{ $dataConfigs['logo'] ?? null }}"  style="width: 200px" alt="" class="img-fluid mb-4"></center>
<h4 class="mb-3 f-w-400">Sign in into your account</h4>
<form method="POST" action="{{ url($_SERVER['REQUEST_URI']) }}">
   @csrf
   @include('common.alert')
   <div class="input-group mb-2">
      <div class="input-group-prepend">
         <span class="input-group-text"><i class="feather icon-mail"></i></span>
      </div>
      <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="input-group mb-3">
      <div class="input-group-prepend">
         <span class="input-group-text"><i class="feather icon-lock"></i></span>
      </div>
      <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>
   <input type="checkbox" id="togglePassword">Show Password</br>
   <button type="submit" class="btn btn-primary">
   {{ __('Login') }}
   </button>

   <a href="{{ route('client.password.request') }}">Forgot Password?</a>
</form>
<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