@extends('layouts.authapp')

@section('content')
<style>.show-hide span.show:before,.show-hide span:before {
    content: "show";
    display:none;
}</style>
<div class="login-main">
<a class="logo" href="{{url('/')}}">
                  <img class="img-fluid for-light" src="{{ asset('assets/images/logo/logo.png') }}" alt="looginpage">
                  <img class="img-fluid for-dark" src="{{ asset('assets/images/logo/logo.png') }}" alt="looginpage">
                </a>
<form class="theme-form" method="POST" action="{{ route('login') }}">
@csrf
        
                  <h3>Sign in to account</h3>
                  <p>Enter your Emp Code & password to login</p>
                  <div class="form-group">
                    <label class="col-form-label">Emp Code</label>
                    <input class="form-control @error('email') is-invalid @enderror" id="email" type="text" name="email" value="{{ old('email') }}" required  autofocus placeholder="1111111111">
                    @error('email')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                    </div>
                    <div class="form-group">
    <label class="col-form-label">Password</label>
    <div class="form-input position-relative">
        <input class="form-control @error('password') is-invalid @enderror" id="password" type="password" name="password" required placeholder="*********">
        <div class="show-hide" onclick="togglePassword()">
            <span >👁</span>
        </div>
    </div>
</div>
                  <div class="form-group mb-0">
                    <!--<div class="checkbox p-0">
                      <input id="checkbox1" type="checkbox">
                      <label class="text-muted" for="checkbox1">Remember password</label>
                    </div><a class="link" href="forget-password.html">Forgot password?</a>-->
                    <div class="text-end mt-3">
                      <button class="btn btn-primary btn-block w-100" type="submit">Sign in</button>
                    </div>
                  </div>
                  
                </form>
              </div>

@endsection
@section('footer')
<script>
function togglePassword() {
    var passwordField = document.getElementById("password");
    var toggleIcon = document.querySelector(".show-hide span");

    if (passwordField.type === "password") {
        passwordField.type = "text";
        toggleIcon.innerHTML = "🙈"; // Change icon to indicate it's visible
    } else {
        passwordField.type = "password";
        toggleIcon.innerHTML = "👁"; // Change icon back to hidden state
    }
}
</script>
@endsection