@extends('layout.app_forms')
@section('content')
    <div class="account-content">
        <style>
            .login-userheading img {
                max-width: 70px !important;
                margin-bottom: 10px !important;
            }
            .login-userheading h3 {
                margin-bottom: 5px !important;
                font-size: 20px !important;
            }
            .login-userheading h4 {
                margin-bottom: 15px !important;
                font-size: 14px !important;
            }
            .form-login {
                margin-bottom: 15px !important;
            }
            .form-login label {
                margin-bottom: 5px !important;
            }
            .login-userset {
                padding: 20px !important;
            }
            @media (max-width: 991.98px) {
                .login-new .login-content {
                    width: 100%;
                    min-width: 100%;
                    padding: 15px;
                }
                .login-userset {
                    padding: 15px !important;
                }
            }
        </style>
        <div class="login-wrapper login-new">
            <div class="container">
                <div class="login-content user-login">
                    @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul class="mb-0">
                            {{-- @foreach ($errors->all() as $error)
                                <li>Incorrect email or password</li>
                            @endforeach
                        </ul> --}}
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                    @endif
                  
                    <form action="{{ route('login') }}" method="POST">
                        @csrf
                        <div class="login-userset">
                            <div class="login-userheading">
                                <h4>
                                    <img 
                                        src="{{ URL::asset('assets/img/police-logotwo.png') }}" 
                                        alt="Police Logo" 
                                        style="max-width: 100px; height: auto; display: block; margin:  auto; border-radius: 10px;"
                                    >
                                </h4>
                                <h3>Sign In</h3>
                                <h4>Access the Ufund QR  using your username and password.</h4>
                            </div>
                            <div class="form-login">
                                <label class="form-label">Username</label>
                                <div class="form-addons">
                                    <input id="username" type="text" placeholder="Enter Username"
                                    class="w-100 rounded-lg bg-gray-200 p-2 form-control @error('username') is-invalid @enderror"
                                    name="email"  required autocomplete="username" autofocus>
                                    <img src="{{ URL::asset('/build/img/icons/mail.svg') }}" alt="img">
                                  
                                </div>
                                @error('username')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                            <div class="form-login">
                                <label>Password</label>
                                <div class="pass-group">
                                    <input id="password" class="pass-input" type="password" placeholder="Enter Password"
                                    class="w-100 form-control-sm  rounded-lg bg-gray-200 p-2 form-control @error('password') is-invalid @enderror"
                                    name="password" required autocomplete="current-password">
                                    <span class="fas toggle-password fa-eye-slash"></span>
                                </div>
                            </div>
                            <div class="form-login authentication-check">
                                <div class="row">
                                    <div class="col-6">
                                        <div class="custom-control custom-checkbox">
                                            <label class="checkboxs ps-4 mb-0 pb-0 line-height-1">
                                                <input type="checkbox" name="remember">
                                                <span class="checkmarks"></span>Remember me
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-6 text-end">
                                        <a class="forgot-link" href="{{ url('forgot-password-3') }}">Forgot Password?</a>
                                    </div>
                                </div>
                            </div>
                            <div class="form-login">
                                <button class="btn btn-login" type="submit">Sign In</button>
                            </div>  
                             <p>Copyright &copy;UFUNDI DRIVING <span style="font-weight: 800; color: black;">V1.0.1</span> All rights reserved</p>
                        </div>
                       
                    </form>
                    

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