<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>Forgot Password - CV111</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
    *{box-sizing:border-box; margin:0; padding:0;}
    :root{
        --bg:#0A0714; --card:#181129; --border:rgba(255,255,255,.07); --border-hi:rgba(155,93,229,.35);
        --gold:#F5C542; --purple:#9B5DE5;
        --grad-main:linear-gradient(135deg,#6C3FC5 0%,#9B5DE5 50%,#B57EF0 100%);
        --text:#FFFFFF; --muted:#9691B0; --red:#FF5C7A; --green:#22D67A;
    }
    body{min-height:100vh; font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; color:var(--text);
        background:radial-gradient(circle at 20% 0%, rgba(155,93,229,.15), transparent 45%), var(--bg);
        display:flex; align-items:center; justify-content:center; padding:20px;}
    .card{width:100%; max-width:400px;}
    .panel{background:linear-gradient(160deg, #1D1533 0%, #120D24 100%); border:1px solid var(--border-hi);
        border-radius:24px; padding:28px 24px; box-shadow:0 24px 60px -15px rgba(108,63,197,.4);}
    .panel h2{font-size:20px; font-weight:800; margin-bottom:6px;}
    .panel .sub{font-size:12.5px; color:var(--muted); margin-bottom:22px; line-height:1.6;}
    .field-box{background:var(--card); border:1.5px solid var(--border); border-radius:14px; padding:14px 16px; margin-bottom:14px;}
    .field-box label{display:block; font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; font-weight:700; margin-bottom:6px;}
    .field-box input{width:100%; background:none; border:none; outline:none; color:var(--text); font-size:14.5px; font-weight:600; font-family:'Poppins';}
    .btn-submit{width:100%; padding:16px; border-radius:16px; border:none; font-weight:800; font-size:15px; cursor:pointer;
        background:var(--grad-main); color:#fff; box-shadow:0 14px 30px -10px rgba(108,63,197,.6); margin-top:6px;}
    .msg{padding:12px 14px; border-radius:12px; font-size:12.5px; font-weight:600; margin-bottom:14px;}
    .msg-err{background:rgba(255,92,122,.1); border:1px solid rgba(255,92,122,.3); color:var(--red);}
    .msg-ok{background:rgba(34,214,122,.1); border:1px solid rgba(34,214,122,.3); color:var(--green);}
    .hidden{display:none !important;}
    .footer-link{text-align:center; margin-top:20px; font-size:13px; color:var(--muted);}
    .footer-link a{color:var(--gold); font-weight:700; text-decoration:none;}
</style>
</head>
<body>
<div class="card">
    <div class="panel">
        <h2>Password ভুলে গেছো?</h2>
        <div class="sub">তোমার তথ্য জমা দাও — আমাদের Support Team Verify করে, শীঘ্রই নতুন Password Active করে দেবে।</div>

        <div id="msgBox" class="hidden"></div>

        <div class="field-box">
            <label>তোমার Mobile Number</label>
            <input type="tel" id="mobile" placeholder="01XXXXXXXXX">
        </div>
        <div class="field-box">
            <label>নতুন Password (যা চাও)</label>
            <input type="password" id="newPassword" placeholder="নতুন Password">
        </div>
        <div class="field-box">
            <label>পরিচয় নিশ্চিতকরণ</label>
            <input type="text" id="verifyNote" placeholder="যেমন: শেষ Deposit-এর Amount, বা Invitation Code">
        </div>

        <button class="btn-submit" onclick="submitRequest()" id="submitBtn">Request পাঠাও</button>

        <div class="footer-link"><a href="/newlogin.php">← Login-এ ফিরে যাও</a></div>
    </div>
</div>

<script>
async function submitRequest() {
    const mobile = document.getElementById('mobile').value.trim();
    const newPassword = document.getElementById('newPassword').value;
    const verifyNote = document.getElementById('verifyNote').value.trim();
    const msgBox = document.getElementById('msgBox');
    const btn = document.getElementById('submitBtn');

    if (!/^01[0-9]{9}$/.test(mobile)) {
        msgBox.className = 'msg msg-err'; msgBox.textContent = 'সঠিক ১১-সংখ্যার Mobile Number দাও।'; return;
    }
    if (!newPassword || newPassword.length < 6) {
        msgBox.className = 'msg msg-err'; msgBox.textContent = 'Password কমপক্ষে ৬ অক্ষরের হতে হবে।'; return;
    }
    if (!verifyNote) {
        msgBox.className = 'msg msg-err'; msgBox.textContent = 'পরিচয় নিশ্চিত করার তথ্য দাও।'; return;
    }

    btn.textContent = 'পাঠানো হচ্ছে...';

    try {
        const res = await fetch('/forgotpassword_api.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ mobile, newPassword, verifyNote })
        });
        const data = await res.json();
        msgBox.classList.remove('hidden');
        if (data.code === 0) {
            msgBox.className = 'msg msg-ok';
            msgBox.textContent = '✅ Request জমা হয়েছে! Support Team শীঘ্রই Verify করে Password Active করে দেবে।';
            document.getElementById('mobile').value = '';
            document.getElementById('newPassword').value = '';
            document.getElementById('verifyNote').value = '';
        } else {
            msgBox.className = 'msg msg-err';
            msgBox.textContent = data.msg || 'ব্যর্থ হয়েছে।';
        }
    } catch (e) {
        msgBox.classList.remove('hidden');
        msgBox.className = 'msg msg-err';
        msgBox.textContent = 'একটা সমস্যা হয়েছে।';
    }
    btn.textContent = 'Request পাঠাও';
}
</script>
</body>
</html>
