<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Forgot Password — EduTrack PRO</title>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<style>

:root {

    --primary: #1e3a5f; 

    --secondary: #3498db;

}

body {

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    background: linear-gradient(135deg, #1e3a5f 0%, #3498db 50%, #1e3a5f 100%);

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

}

.login-container { width: 100%; max-width: 450px; }

.login-card {

    background: #fff;

    border-radius: 20px;

    box-shadow: 0 20px 60px rgba(0,0,0,0.3);

    overflow: hidden;

}

.login-header {

    background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 100%);

    padding: 40px 30px 35px;

    text-align: center;

    color: white;

    position: relative;

    overflow: hidden;

}

.login-header::before {

    content: '';

    position: absolute;

    top: -50%; left: -50%;

    width: 200%; height: 200%;

    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);

}

.login-header i { font-size: 48px; margin-bottom: 12px; position: relative; }

.login-header h1 { font-size: 22px; font-weight: 700; margin-bottom: 6px; position: relative; }

.login-header p  { font-size: 13px; opacity: 0.85; position: relative; margin: 0; }



.login-body { padding: 35px; }



.form-group { margin-bottom: 22px; }

.form-group label {

    display: block; margin-bottom: 7px;

    font-weight: 600; color: #1e3a5f; font-size: 13px;

}

.input-group { position: relative; }

.input-group > i {

    position: absolute; left: 16px; top: 50%;

    transform: translateY(-50%); color: #7f8c8d; z-index: 5;

}

.form-control {

    height: 50px; border: 2px solid #e0e6ed; border-radius: 10px;

    padding: 12px 16px 12px 44px;

    font-size: 14px; transition: all 0.3s; background: #f8f9fa;

}

.form-control:focus {

    border-color: #3498db;

    box-shadow: 0 0 0 4px rgba(52,152,219,0.15);

    background: white;

}

.form-control.no-icon { padding-left: 16px; }

.eye-toggle {

    position: absolute; right: 14px; top: 50%;

    transform: translateY(-50%);

    cursor: pointer; color: #7f8c8d; z-index: 10; font-size: 15px;

    background: none; border: none; padding: 0;

}

.eye-toggle:hover { color: #3498db; }



.btn-primary-custom {

    width: 100%; height: 50px;

    background: linear-gradient(135deg, #1e3a5f 0%, #3498db 100%);

    border: none; border-radius: 10px; color: white;

    font-size: 15px; font-weight: 600; cursor: pointer;

    transition: all 0.3s;

    display: flex; align-items: center; justify-content: center; gap: 10px;

}

.btn-primary-custom:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(52,152,219,0.4); }

.btn-primary-custom:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }



.back-link {

    display: block; text-align: center; margin-top: 20px;

    color: #3498db; font-size: 14px; text-decoration: none; font-weight: 500;

}

.back-link:hover { text-decoration: underline; }



.alert {

    border-radius: 10px; padding: 13px 16px; margin-bottom: 18px;

    border: none; display: flex; align-items: flex-start; gap: 10px; font-size: 14px;

}

.alert-danger  { background: rgba(231,76,60,0.12);  color: #c0392b; }

.alert-success { background: rgba(39,174,96,0.12);  color: #1e8449; }

.alert-info    { background: rgba(52,152,219,0.12); color: #1a6fa0; }



.step-indicator {

    display: flex; align-items: center; justify-content: center; gap: 0;

    margin-bottom: 28px;

}

.step {

    display: flex; align-items: center; justify-content: center;

    width: 32px; height: 32px; border-radius: 50%;

    font-size: 13px; font-weight: 700; border: 2px solid #d5dee8;

    color: #a0aab4; background: white; transition: all 0.3s; flex-shrink: 0;

}

.step.active  { border-color: #3498db; color: #3498db; }

.step.done    { border-color: #27ae60; background: #27ae60; color: white; }

.step-line    { width: 50px; height: 2px; background: #d5dee8; transition: background 0.3s; }

.step-line.done { background: #27ae60; }



.otp-inputs {

    display: flex; gap: 10px; justify-content: center; margin-bottom: 6px;

}

.otp-box {

    width: 48px; height: 56px; text-align: center;

    font-size: 22px; font-weight: 700; color: #1e3a5f;

    border: 2px solid #e0e6ed; border-radius: 10px;

    background: #f8f9fa; outline: none; transition: all 0.2s;

}

.otp-box:focus { border-color: #3498db; background: white; box-shadow: 0 0 0 3px rgba(52,152,219,0.15); }

.otp-box.filled { border-color: #27ae60; background: rgba(39,174,96,0.06); }



.resend-row { text-align: center; font-size: 13px; color: #7f8c8d; margin-top: 6px; }

.resend-link { color: #3498db; cursor: pointer; font-weight: 500; }

.resend-link:hover { text-decoration: underline; }

#resend-timer { font-weight: 600; }



.phone-hint {

    background: rgba(52,152,219,0.08); border-radius: 8px;

    padding: 10px 14px; font-size: 13px; color: #1a6fa0; margin-bottom: 20px;

    display: flex; align-items: center; gap: 8px;

}



.spinner {

    display: none; width: 18px; height: 18px;

    border: 3px solid rgba(255,255,255,0.3);

    border-radius: 50%; border-top-color: white;

    animation: spin 0.8s linear infinite;

}

@keyframes spin { to { transform: rotate(360deg); } }

</style>

</head>

<body>



<div class="login-container">

  <div class="login-card">



    <div class="login-header">

      <i class="fas fa-key"></i>

      <h1>Reset Password</h1>

      <p>We'll send a code to your registered phone</p>

    </div>



    <div class="login-body">



      <!-- Step Indicator -->

      <div class="step-indicator">

        <div class="step active" id="dot1">1</div>

        <div class="step-line" id="line1"></div>

        <div class="step" id="dot2">2</div>

        <div class="step-line" id="line2"></div>

        <div class="step done-hidden" id="dot3"><i class="fas fa-check" style="font-size:13px"></i></div>

      </div>



      <div id="alertBox"></div>



      <!-- ── STEP 1: Enter username ── -->

      <div id="step1">

        <div class="form-group">

          <label>Username</label>

          <div class="input-group">

            <i class="fas fa-user"></i>

            <input type="text" id="username" class="form-control" placeholder="Enter your username" autocomplete="username">

          </div>

        </div>

        <button class="btn-primary-custom" id="sendOtpBtn" onclick="sendOTP()">

          <span class="spinner" id="spinner1"></span>

          <span id="sendBtnText"><i class="fas fa-paper-plane me-2"></i>Send Reset Code</span>

        </button>

      </div>



      <!-- ── STEP 2: Enter OTP + new password ── -->

      <div id="step2" style="display:none;">

        <div class="phone-hint">

          <i class="fas fa-mobile-alt"></i>

          <span>Code sent to <strong id="maskedPhone">your phone</strong></span>

        </div>



        <div class="form-group">

          <label style="text-align:center;display:block;margin-bottom:12px;">Enter the 6-digit code</label>

          <div class="otp-inputs">

            <input type="text" class="otp-box" maxlength="1" inputmode="numeric" pattern="[0-9]">

            <input type="text" class="otp-box" maxlength="1" inputmode="numeric" pattern="[0-9]">

            <input type="text" class="otp-box" maxlength="1" inputmode="numeric" pattern="[0-9]">

            <input type="text" class="otp-box" maxlength="1" inputmode="numeric" pattern="[0-9]">

            <input type="text" class="otp-box" maxlength="1" inputmode="numeric" pattern="[0-9]">

            <input type="text" class="otp-box" maxlength="1" inputmode="numeric" pattern="[0-9]">

          </div>

          <div class="resend-row">

            <span id="resendTimerRow">Resend in <span id="resend-timer">10:00</span></span>

            <span id="resendLinkRow" style="display:none;">Didn't receive it? <span class="resend-link" onclick="resendOTP()">Resend code</span></span>

          </div>

        </div>



        <div class="form-group">

          <label>New Password</label>

          <div class="input-group" style="position:relative;">

            <i class="fas fa-lock"></i>

            <input type="password" id="newPassword" class="form-control" placeholder="At least 6 characters">

            <button class="eye-toggle" type="button" onclick="toggleEye('newPassword', this)">

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

            </button>

          </div>

        </div>



        <div class="form-group">

          <label>Confirm New Password</label>

          <div class="input-group" style="position:relative;">

            <i class="fas fa-lock"></i>

            <input type="password" id="confirmPassword" class="form-control" placeholder="Repeat new password">

            <button class="eye-toggle" type="button" onclick="toggleEye('confirmPassword', this)">

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

            </button>

          </div>

        </div>



        <button class="btn-primary-custom" id="resetBtn" onclick="verifyAndReset()">

          <span class="spinner" id="spinner2"></span>

          <span id="resetBtnText"><i class="fas fa-lock me-2"></i>Set New Password</span>

        </button>

      </div>



      <!-- ── STEP 3: Success ── -->

      <div id="step3" style="display:none;text-align:center;padding:10px 0 6px;">

        <div style="font-size:52px;margin-bottom:16px;">✅</div>

        <h5 style="color:#1e3a5f;font-weight:700;margin-bottom:8px;">Password Updated!</h5>

        <p style="color:#7f8c8d;font-size:14px;margin-bottom:24px;">Your password has been changed successfully.</p>

        <a href="login.php" class="btn-primary-custom" style="text-decoration:none;display:inline-flex;width:auto;padding:12px 32px;">

          <i class="fas fa-sign-in-alt me-2"></i>Go to Login

        </a>

      </div>



      <a href="login.php" class="back-link" id="backLink">

        <i class="fas fa-arrow-left me-1"></i>Back to Login

      </a>

    </div>



  </div>

</div>



<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>

<script>

// ── OTP boxes: auto-advance, backspace, paste ──

const otpBoxes = document.querySelectorAll('.otp-box');

otpBoxes.forEach((box, i) => {

    box.addEventListener('input', function() {

        this.value = this.value.replace(/\D/g, '');

        this.classList.toggle('filled', this.value !== '');

        if (this.value && i < otpBoxes.length - 1) otpBoxes[i + 1].focus();

    });

    box.addEventListener('keydown', function(e) {

        if (e.key === 'Backspace' && !this.value && i > 0) otpBoxes[i - 1].focus();

    });

    box.addEventListener('paste', function(e) {

        e.preventDefault();

        const text = (e.clipboardData || window.clipboardData).getData('text').replace(/\D/g, '');

        [...text.slice(0, 6)].forEach((ch, j) => {

            if (otpBoxes[j]) { otpBoxes[j].value = ch; otpBoxes[j].classList.add('filled'); }

        });

        otpBoxes[Math.min(text.length, 5)].focus();

    });

});



function getOtpValue() {

    return [...otpBoxes].map(b => b.value).join('');

}



// ── Step 1: Send OTP ──

function sendOTP(isResend = false) {

    const username = $('#username').val().trim();

    if (!username) { showAlert('Please enter your username', 'danger'); return; }



    setLoading('sendOtpBtn', 'spinner1', 'sendBtnText', true);



    $.ajax({

        url: 'ajax/send_reset_otp.php',

        type: 'POST',

        data: { username },

        dataType: 'json',

        success: function(r) {

            setLoading('sendOtpBtn', 'spinner1', 'sendBtnText', false);

            if (r.success) {

                if (isResend) {

                    showAlert('A new code has been sent.', 'success');

                    otpBoxes.forEach(b => { b.value = ''; b.classList.remove('filled'); });

                    otpBoxes[0].focus();

                }

                if (r.masked_phone) $('#maskedPhone').text(r.masked_phone);

                showStep(2);

                startTimer();

            } else {

                showAlert(r.message, 'danger');

            }

        },

        error: function() {

            setLoading('sendOtpBtn', 'spinner1', 'sendBtnText', false);

            showAlert('Connection error. Please try again.', 'danger');

        }

    });

}



function resendOTP() { sendOTP(true); }



// ── Step 2: Verify OTP + reset password ──

function verifyAndReset() {

    const otp      = getOtpValue();

    const pass     = $('#newPassword').val();

    const confirm  = $('#confirmPassword').val();



    if (otp.length < 6) { showAlert('Please enter the complete 6-digit code', 'danger'); return; }

    if (!pass)           { showAlert('Please enter a new password', 'danger'); return; }

    if (pass.length < 6) { showAlert('Password must be at least 6 characters', 'danger'); return; }

    if (pass !== confirm) { showAlert('Passwords do not match', 'danger'); return; }



    setLoading('resetBtn', 'spinner2', 'resetBtnText', true);



    $.ajax({

        url: 'ajax/verify_reset_otp.php',

        type: 'POST',

        data: { otp, new_password: pass, confirm_password: confirm },

        dataType: 'json',

        success: function(r) {

            setLoading('resetBtn', 'spinner2', 'resetBtnText', false);

            if (r.success) {

                showStep(3);

                clearInterval(timerInterval);

                $('#backLink').hide();

            } else {

                showAlert(r.message, 'danger');

            }

        },

        error: function() {

            setLoading('resetBtn', 'spinner2', 'resetBtnText', false);

            showAlert('Connection error. Please try again.', 'danger');

        }

    });

}



// ── UI helpers ──

function showStep(n) {

    $('#step1, #step2, #step3').hide();

    $('#step' + n).show();

    clearAlert();



    if (n >= 2) { $('#dot1').removeClass('active').addClass('done').html('<i class="fas fa-check" style="font-size:11px"></i>'); $('#line1').addClass('done'); $('#dot2').addClass('active'); }

    if (n >= 3) { $('#dot2').removeClass('active').addClass('done').html('<i class="fas fa-check" style="font-size:11px"></i>'); $('#line2').addClass('done'); $('#dot3').addClass('active'); }

}



function showAlert(msg, type) {

    const icon = type === 'success' ? 'check-circle' : type === 'info' ? 'info-circle' : 'exclamation-circle';

    $('#alertBox').html(`<div class="alert alert-${type}"><i class="fas fa-${icon}"></i><span>${msg}</span></div>`);

}

function clearAlert() { $('#alertBox').html(''); }



function setLoading(btnId, spinnerId, textId, on) {

    $('#' + btnId).prop('disabled', on);

    $('#' + spinnerId).css('display', on ? 'inline-block' : 'none');

    if (!on) return;

    const original = $('#' + textId).data('original') || $('#' + textId).html();

    if (!$('#' + textId).data('original')) $('#' + textId).data('original', original);

    $('#' + textId).text('Please wait...');

}



function toggleEye(inputId, btn) {

    const inp = document.getElementById(inputId);

    const icon = btn.querySelector('i');

    if (inp.type === 'password') { inp.type = 'text'; icon.classList.replace('fa-eye', 'fa-eye-slash'); }

    else { inp.type = 'password'; icon.classList.replace('fa-eye-slash', 'fa-eye'); }

}



// ── Countdown timer ──

let timerInterval;

function startTimer() {

    let seconds = 600;

    $('#resendTimerRow').show();

    $('#resendLinkRow').hide();



    clearInterval(timerInterval);

    timerInterval = setInterval(() => {

        seconds--;

        const m = Math.floor(seconds / 60);

        const s = seconds % 60;

        $('#resend-timer').text(m + ':' + String(s).padStart(2, '0'));

        if (seconds <= 0) {

            clearInterval(timerInterval);

            $('#resendTimerRow').hide();

            $('#resendLinkRow').show();

        }

    }, 1000);

}



// Allow Enter key on username field

$('#username').on('keypress', function(e) {

    if (e.which === 13) sendOTP();

});

</script>

</body>

</html>

