<?= $this->extend('layout/register_layout') ?>
<?= $this->section('content') ?>

<div class="registration-form container mt-5 mb-5 text-center">

    <?php if (session()->has('error')): ?>
        <p style="color: red;"><?= session('error') ?></p>
    <?php endif; ?>

    <form action="<?= site_url('user/processResetPassword'); ?>" method="post" onsubmit="return validatePassword()">
        <?= csrf_field() ?>
        <div class="text-center mb-4">
            <a href="<?= base_url('/') ?>">
                <img src="<?= base_url('assets/images/alrahma_logo.png') ?>" alt="" style="width: 120px; height: 120px; border-radius: 50%; object-fit: cover;"></a>
        </div>
        <h3 class="text-center text-success" style="font-family: Arial, sans-serif;">Reset Your Password</h3>
        <br>
        <input type="hidden" name="token" value="<?= esc($token); ?>">

        <!-- Password Field -->
        <div class="form-group position-relative mb-4 text-start">
            <label for="password"></label>
            <input type="password"
                class="form-control item pe-5"
                id="password"
                name="password"
                placeholder="Enter new password"
                maxlength="30"
                required>
            <span class="position-absolute top-50 end-0 translate-middle-y me-3"
                onclick="togglePasswordVisibility('password', this)"
                style="cursor: pointer;">
                <i class="fa-solid fa-eye"></i>
            </span>
            <small id="passwordHelp" class="text-danger d-none">
                Password must be at least 8 characters, include uppercase, lowercase, number, and special character.
            </small>
        </div>

        <!-- Confirm Password Field -->
        <div class="form-group position-relative mb-4 text-start">
            <label for="password_confirm"></label>
            <input type="password"
                class="form-control item pe-5"
                id="password_confirm"
                name="pass_confirm"
                placeholder="Confirm new password"
                maxlength="30"
                required>
            <span class="position-absolute top-50 end-0 translate-middle-y me-3"
                onclick="togglePasswordVisibility('password_confirm', this)"
                style="cursor: pointer;">
                <i class="fa-solid fa-eye"></i>
            </span>
            <small id="confirmPasswordHelp" class="text-danger d-none">
                Passwords do not match.
            </small>
        </div>

        <div class="mb-3 d-grid">
            <button type="submit" class="btn btn-success item">Reset Password</button>
        </div>
    </form>
</div>

<?= $this->endSection() ?>

<?= $this->section('scripts') ?>
<script>
    function togglePasswordVisibility(inputId, iconElement) {
        const input = document.getElementById(inputId);
        const icon = iconElement.querySelector('i');

        if (input.type === 'password') {
            input.type = 'text';
            icon.classList.remove('fa-eye');
            icon.classList.add('fa-eye-slash');
        } else {
            input.type = 'password';
            icon.classList.remove('fa-eye-slash');
            icon.classList.add('fa-eye');
        }
    }

    function validatePassword() {
        const password = document.getElementById('password').value;
        const passwordConfirm = document.getElementById('password_confirm').value;
        const passwordHelp = document.getElementById('passwordHelp');
        const confirmPasswordHelp = document.getElementById('confirmPasswordHelp');

        const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@\-=\+*#$%&!?])[A-Za-z\d@\-=\+*#$%&!?]{8,}$/;

        let valid = true;

        // Validate password format
        if (!passwordRegex.test(password)) {
            passwordHelp.classList.remove('d-none');
            valid = false;
        } else {
            passwordHelp.classList.add('d-none');
        }

        // Validate matching confirm password
        if (password !== passwordConfirm) {
            confirmPasswordHelp.classList.remove('d-none');
            valid = false;
        } else {
            confirmPasswordHelp.classList.add('d-none');
        }

        return valid;
    }
</script>
<?= $this->endSection() ?>