@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">Change Password</p>
                    <p class="sign-in text-brown fw-bold mb-0"><span id="login-role-name"></span></p>
                </div>
                <div class="p-2 px-lg-4 px-3 ">
                    <form action="">
                        <div class="mb-1">
                            <label for="username" class="username col-form-label">New Password<sup>*</sup></label>
                            <div class="position-relative">
                                <input type="password" placeholder="Enter your new password"
                                    class="form-control username newPassword"
                                    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>
                                <small id="newPassword-error" class="text-danger"></small>
                            </div>

                            <!-- <input type="text" class="form-control username newPassword" placeholder="Enter your new password"> -->
                        </div>
                        <div class="password-container m-0">
                            <label for="password" class="password col-form-label">Confirm Password<sup>*</sup></label>
                            <div class="position-relative">
                                <input type="password" placeholder="Enter your new confirm password"
                                    class="form-control signin-password confirmPassword" 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>
                                <small id="confirmPassword-error" class="text-danger"></small>
                            </div>
                        </div>
                        <a href="" class="btn bg-blue border p-2 rounded-3 w-100 text-white fw-bold mt-5 logInButton" id="changePasswordBtn">
                            Submit
                            <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/change_password.js'])

@endsection