<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>Promo Code - 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%);
        --grad-gold:linear-gradient(135deg,#F5C542,#E0A926);
        --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%),
                   radial-gradient(circle at 90% 100%, rgba(245,197,66,.1), transparent 40%), var(--bg);
        display:flex; align-items:center; justify-content:center; padding:20px;
    }
    .card{width:100%; max-width:400px;}
    .top-bar{ display:flex; align-items:center; gap:12px; margin-bottom:20px; }
    .top-bar a{ width:36px; height:36px; border-radius:12px; background:var(--card); border:1px solid var(--border);
        display:flex; align-items:center; justify-content:center; color:var(--gold); text-decoration:none; }
    .top-bar span{ font-weight:800; font-size:16px; }

    .panel{background:linear-gradient(160deg, #1D1533 0%, #120D24 100%); border:1px solid var(--border-hi);
        border-radius:24px; padding:28px 24px; text-align:center; box-shadow:0 24px 60px -15px rgba(108,63,197,.4);}

    .icon-box{ width:70px; height:70px; margin:0 auto 18px; border-radius:20px; background:var(--grad-gold);
        display:flex; align-items:center; justify-content:center; box-shadow:0 16px 34px -8px rgba(245,197,66,.5); }
    .icon-box i{ font-size:28px; color:#1a1400; }

    .panel h2{font-size:19px; font-weight:800; margin-bottom:6px;}
    .panel .sub{font-size:12.5px; color:var(--muted); margin-bottom:24px;}

    .field-box{background:var(--card); border:1.5px solid var(--border); border-radius:14px; padding:16px; margin-bottom:16px; transition:.2s;}
    .field-box:focus-within{border-color:var(--purple); box-shadow:0 0 0 4px rgba(155,93,229,.12);}
    .field-box input{width:100%; background:none; border:none; outline:none; color:var(--text); font-size:18px; font-weight:800;
        text-align:center; letter-spacing:2px; text-transform:uppercase; font-family:'Poppins';}
    .field-box input::placeholder{ letter-spacing:normal; text-transform:none; font-weight:600; font-size:14px; }

    .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); transition:transform .12s;}
    .btn-submit:active{transform:scale(.98);}
    .btn-submit:disabled{ opacity:.6; }

    .msg{padding:12px 14px; border-radius:12px; font-size:12.5px; font-weight:600; margin-bottom:16px;}
    .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;}
</style>
</head>
<body>
<?php $pt = __DIR__ . '/page_transition.php'; if (file_exists($pt)) { include $pt; } ?>

<div class="card">
    <div class="top-bar">
        <a href="/newprofile.php"><i class="fa-solid fa-arrow-left"></i></a>
        <span>Promo Code</span>
    </div>

    <div class="panel">
        <div class="icon-box"><i class="fa-solid fa-ticket"></i></div>
        <h2>তোমার Promo-Code লেখো</h2>
        <div class="sub">Valid Code দিলে, সাথে সাথেই Bonus তোমার Balance-এ যোগ হবে</div>

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

        <div class="field-box">
            <input type="text" id="promoInput" placeholder="যেমন: WELCOME50" maxlength="30">
        </div>

        <button class="btn-submit" onclick="redeemCode()" id="submitBtn">Redeem করো</button>
    </div>
</div>

<script>
const token = localStorage.getItem('token');
if (!token) window.location.href = '/newlogin.php';

async function redeemCode() {
    const code = document.getElementById('promoInput').value.trim();
    const msgBox = document.getElementById('msgBox');
    const btn = document.getElementById('submitBtn');

    if (!code) {
        msgBox.className = 'msg msg-err';
        msgBox.textContent = 'একটা Promo-Code লেখো।';
        return;
    }

    btn.disabled = true;
    btn.textContent = 'Check হচ্ছে...';

    try {
        const res = await fetch('/promo_code_redeem.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },
            body: JSON.stringify({ code })
        });
        const data = await res.json();

        msgBox.classList.remove('hidden');
        if (data.code === 0) {
            msgBox.className = 'msg msg-ok';
            msgBox.textContent = '🎉 ' + data.msg;
            document.getElementById('promoInput').value = '';
        } else {
            msgBox.className = 'msg msg-err';
            msgBox.textContent = data.msg || 'কিছু একটা সমস্যা হয়েছে';
        }
    } catch (e) {
        msgBox.classList.remove('hidden');
        msgBox.className = 'msg msg-err';
        msgBox.textContent = 'একটা সমস্যা হয়েছে: ' + e.message;
    }

    btn.disabled = false;
    btn.textContent = 'Redeem করো';
}
</script>

</body>
</html>
