@extends('app')
@section('content')
<div class="adminpanel_login_container">
    <div class="login-box px-lg-2 py-4">
        <div class="d-flex justify-content-between flex-column flex-md-row align-items-center">
            <a class="logo-img" href="{{ '/' }}"></a>
            <h3 class="text-center">ADMINISTRATION PANEL</h3>
        </div>
    </div>
    <div class="row justify-content-center p-0 m-0">
        <div class="p-lg-3 adminpanel_form-container col-12 col-sm-9 col-md-8 col-lg-7 col-xl-5">
            <div class="login-form shadow p-3 p-lg-4 m-2 m-lg-4 rounded-5 mb-5">
                <div class="text-blue text-center">
                    <p class="fw-bold pb-1 pt-3 login">LOGIN-ADMINISTRATION PANEL</p>
                    <p class="sign-in text-brown fw-bold mb-0"><span id="login-role-name"></span></p>
                </div>
                <div class="p-2 p-lg-4 px-3 ">
                    <form action="">
                        <div class="mb-1">
                            <label for="username" class="username col-form-label">Username or Email <sup>*</sup></label>
                            <input type="text" class="form-control username admin_panel_username"
                                placeholder="Username">
                        </div>
                        <div class="password-container m-0">
                            <label for="password" class="password col-form-label">Password <sup>*</sup></label>
                            <div class="position-relative">
                                <input type="password" placeholder="Password"
                                    class="form-control signin-password admin_panel_password" id="password"
                                    autocomplete="off">
                                <span id="eye-icon" class="eye eyeIcon position-absolute"><i class="fa-regular fa-eye-slash closed-eye-icon3 eye-icon"></i></span>
                            </div>
                        </div>

                        <p class="text-end mt-3">
                            <a href="/admin-panel/forgot-password" class=" forgot-password">
                                Forgot Password?</a>
                        </p>
                        <!-- <button class="bg-blue border p-2 rounded-3 w-100 text-white fw-bold mt-5" id="logInButton">
                            Login
                            <span id="login-spinner" class="spinner-border spinner-border-sm d-none" role="status"
                                aria-hidden="true"></span>
                        </button> -->
                        <a href="" class="btn bg-blue border p-2 rounded-3 w-100 text-white fw-bold logInButton" id="adminpanel_login">
                            Login
                            <span id="login-spinner" class="spinner-border spinner-border-sm d-none" role="status"
                                aria-hidden="true"></span>
                        </a>
                    </form>
                </div>
            </div>
        </div>

    </div>
</div>
@vite(['resources/js/admin_panel/admin_panel_login.js'])

@endsection