@extends('auth.engineer.engineer-auth')
@section('auth-content')
<div class="d-flex flex-wrap h-100 login-container">
    <div class="flex-fill h-100">
        <h1 style="font-family:'Poppins'; font-weight: 100 !important">Login Authentication</h1>
        <ul>
            <li class="my-2"><small>Never share your email and password to anyone.</small></li>
            <li class="my-2"><small>Protect yourself from malicious user by changing password regularly.</small></li>
            <li class="my-2"><small>Beware of social engineering.</small></li>
        </ul>
        <img src="{{asset('/assets/images/authentication.svg')}}" alt="image1" class="img-fluid">
    </div>
    <div class="flex-fill h-100">
        <h3 class="text-center" style="padding: 30px 0px;font-family: 'Poppins';font-weight: 100 !important;">Welcome Contractor Engineer!</h3>
        <form method="POST" action="{{ route('engineer.login.validate') }}">

            @csrf

            <div class="input-group gap-2 my-4">
                <div class="icon-container border-0 input-group-text">
                    <i class="fa-solid fa-envelope"></i>
                </div>
                <input id="email" type="email" class="form-control border-top-0 border-end-0 border-start-0 bg-white n-bg @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" autocomplete="email" autofocus placeholder="Email">
            </div>

            <div class="input-group gap-2 my-4">
                <div class="icon-container border-0 input-group-text">
                    <i class="fa-solid fa-lock"></i>
                </div>
                <input id="password" type="password" class="form-control border-top-0 border-end-0 border-start-0 bg-white n-bg @error('password') is-invalid @enderror" name="password" autocomplete="current-password" placeholder="Password">
            </div>

            <div class="form-group d-flex justify-content-center my-2">
                <div class="form-check d-flex justify-content-center align-items-center">
                    <input class="form-check-input n-bg me-1" type="checkbox" name="remember" id="engineer-remember" {{ old('remember') ? 'checked' : '' }}>

                    <label class="form-check-label n-bg" style="margin-top: 4px !important; font-size:10px;" for="engineer-remember">
                        {{ __('Remember Me') }}
                    </label>
                </div>
            </div>

            <div class="form-group d-flex justify-content-center align-items-center flex-column my-2">
                <button type="submit" class="btn btn-outline-success d-block" style="padding: 10px; border-radius: 3rem !important;width: 50%;">
                    {{ __('LOGIN') }}
                </button>

                <a class="btn btn-link d-block my-2" style="color: #00c988; font-size:12px;" href="{{ route('engineer.password.request') }}">
                    {{ __('Forgot Your Password?') }}
                </a>
            </div>
        </form>
    </div>
</div>
@endsection