@extends('app')
@section('content')
<div class="change-password-container  p-0 m-0">
    <div class="p-3 pe-5 pt-4 justify-content-between p-3 pe-5 pt-4  d-md-flex d-block align-items-center text-center text-md-start">
        <a class="logo-img" href="{{'/'}}"></a>
        <h4 class="text-blue fw-bold text-md-end py-3 py-lg-0"><span class="text-brown fw-bold">Future of Fundraising</span></h4>
    </div>
    <div class="row p-0 m-0 my-4">
        <div class="col-12 d-flex justify-content-center align-items-center">
            <div class="change-password-form shadow p-3 p-lg-5 rounded-5">
                <p class="change-password text-center pb-3">Create Password</p>
                <form action="">
                    <div class="px-3 px-sm-4 px-xl-5">
                        <p class="py-1 mb-0">
                            <input type="hidden" name="userId" id="userId">
                            <input type="hidden" name="roleId" id="roleId">
                            <label for="current-password">Temp Password <span class="text-danger"> *</span></label>
                            <div class="position-relative current-password-div">
                                <input type="password" placeholder="Temp Password"
                                class="form-control" id="current-password"
                                autocomplete="new-password">
                                <span class="eye eyeIcon position-absolute"><i class="fa-regular fa-eye-slash closed-eye-icon3 eye-icon"></i></span>
                            </div>
                        </p>
                        <p class="py-1 mb-0">
                            <label for="new-password">New Password <span class="text-danger"> *</span></label>
                            <div class="position-relative new-password-div">
                                <input type="password" placeholder="New Password"
                                class="form-control" id="new-password"
                                autocomplete="off">
                                <span class="eye eyeIcon position-absolute"><i class="fa-regular fa-eye-slash closed-eye-icon3 eye-icon"></i></span>
                            </div>
                        </p>
                        <p class="py-1 mb-0">
                            <label for="confirm-password">Confirm Password <span class="text-danger"> *</span></label>
                            <div class="position-relative confirm-password-div">
                                <input type="password" placeholder="Confirm Password"
                                class="form-control" id="confirm-password"
                                autocomplete="off">
                                <span class="eye eyeIcon position-absolute"><i class="fa-regular fa-eye-slash closed-eye-icon3 eye-icon"></i></span>
                            </div>
                        </p>
                        <p class="py-2">
                            <button class="bg-blue border p-2 rounded-2 w-100 text-white fw-bold"
                                id="create_password">Submit
                                <span class="spinner-border spinner-border-sm d-none change-psd-spinner"></span>
                            </button>
                        </p>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@vite(['resources/js/changepassword.js'])
@endsection