@extends('user.layouts')
@section('title', 'Reset Password')
@section('header')



@endsection
@section('content')




<div class="container-fluid">
    <div class="row">
        <div class="">
            <h3 class="page-top-heading">Reset Password</h3>
        </div>
    </div>

    <div class="row d-flex justify-content-center mt-4">
        <div class="col-lg-7">
            <div class="card basic-card">
                <div class="p-3 card-header mb-2">
                    <h4 class="card-title">Change Password</h4>
                </div>
                <div class="card-body pt-0">

                <form action="{{ route('reset_pwd') }}" method="POST" id="resetPasswordForm">

    @csrf

    <div class="row">

        <!-- Current Password -->
        <div class="col-lg-12">

            <div class="form-group mb-3">

                <label for="current-password" class="form-label">
                    Current Password
                </label>

                <div class="input-group">

                    <input type="password"
                        class="form-control"
                        id="current-password"
                        name="current_pwd"
                        placeholder="Enter Current Password"
                        required>

                    <span class="input-group-text toggle-password"
                        data-target="#current-password"
                        style="cursor: pointer;">

                        <i class="fa fa-eye"></i>

                    </span>

                </div>

            </div>

        </div>


        <!-- New Password -->
        <div class="col-lg-12">

            <div class="form-group mb-2">

                <label for="new-password" class="form-label">
                    New Password
                </label>

                <div class="input-group">

                    <input type="password"
                        class="form-control"
                        id="new-password"
                        name="new_pwd"
                        placeholder="Enter New Password"
                        required>

                    <span class="input-group-text toggle-password"
                        data-target="#new-password"
                        style="cursor: pointer;">

                        <i class="fa fa-eye"></i>

                    </span>

                </div>

            </div>

        </div>


        <!-- Password Rules -->
       <div class="col-lg-12 mb-3">

    <small id="password-rules" class="text-danger">

        Password must contain:
        Minimum 4 characters,
        1 uppercase letter,
        1 lowercase letter,
        1 number,
        1 special character

    </small>

</div>


        <!-- Confirm Password -->
        <div class="col-lg-12">

            <div class="form-group mb-3">

                <label for="confirm-new-password" class="form-label">
                    Confirm New Password
                </label>

                <div class="input-group">

                    <input type="password"
                        class="form-control"
                        id="confirm-new-password"
                        name="confirm_pwd"
                        placeholder="Re-enter New Password"
                        required>

                    <span class="input-group-text toggle-password"
                        data-target="#confirm-new-password"
                        style="cursor: pointer;">

                        <i class="fa fa-eye"></i>

                    </span>

                </div>

            </div>

        </div>


        <!-- Submit Button -->
        <div class="col-lg-12">

            <button type="submit"
                id="resetPasswordBtn"
                class="btn btn-primary full-width-btn mt-3 mb-2">

                <i class="fa fa-key me-2"></i>

                Reset Password

            </button>

        </div>

    </div>

</form>

                </div>
            </div>

        </div>
    </div>



</div>
<!-- Container Fluid -->


<script>
    document.querySelectorAll('.toggle-password').forEach(span => {

        span.addEventListener('click', () => {

            const target = document.querySelector(span.dataset.target);

            const type = target.getAttribute('type') === 'password' ?
                'text' :
                'password';

            target.setAttribute('type', type);

            span.innerHTML = type === 'password'

                ?
                '<i class="fa fa-eye"></i>'

                :
                '<i class="fa fa-eye-slash"></i>';
        });

    });


    // PASSWORD VALIDATION

    const newPassword = document.getElementById('new-password');

    const passwordRules = document.getElementById('password-rules');

    newPassword.addEventListener('keyup', function() {

        const password = this.value;

        const strongPassword =
            /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_]).{8,}$/;

        if (strongPassword.test(password)) {

            passwordRules.classList.remove('text-danger');

            passwordRules.classList.add('text-success');

            passwordRules.innerHTML = 'Strong Password ✓';

        } else {

            passwordRules.classList.remove('text-success');

            passwordRules.classList.add('text-danger');

            passwordRules.innerHTML = `
            Password must contain:<br>
            • Minimum 8 characters<br>
            • At least 1 uppercase letter<br>
            • At least 1 lowercase letter<br>
            • At least 1 number<br>
            • At least 1 special character
        `;
        }

    });


    // PREVENT MULTIPLE SUBMIT

   document.getElementById('resetPasswordForm')
    .addEventListener('submit', function(e) {

        if (!this.checkValidity()) {
            return;
        }

        const btn = document.getElementById('resetPasswordBtn');

        btn.innerHTML =
            '<i class="fa fa-spinner fa-spin me-2"></i>Please Wait...';

        btn.disabled = true;
    });
</script>

@endsection
@section('footer')





@endsection