<?php
if (isset($_SESSION['message'])) {
    echo $_SESSION['message'];
}
?>

<style>
:root{
    --acc-cyan:#22D3EE;
    --acc-cyan-dim:rgba(34,211,238,.14);
    --acc-indigo:#6366F1;
    --acc-indigo-dim:rgba(99,102,241,.14);
    --acc-emerald:#34D399;
    --acc-emerald-dim:rgba(52,211,153,.14);
    --acc-amber:#FBBF24;
    --acc-amber-dim:rgba(251,191,36,.14);
    --acc-rose:#FB7185;
    --acc-rose-dim:rgba(251,113,133,.14);
}

.ach-banner{
    display:flex;align-items:center;justify-content:center;gap:10px;
    background:linear-gradient(135deg, rgba(34,211,238,.14), rgba(99,102,241,.10));
    border:1px solid var(--line);border-radius:16px;padding:14px 18px;margin-bottom:22px;
    color:var(--text);font-weight:700;font-size:13.5px;text-align:center;letter-spacing:.02em;
}
.ach-banner i{color:var(--acc-amber);font-size:15px;}

.ach-heading{
    font-family:var(--font-display);letter-spacing:.03em;font-size:22px;color:var(--text);
    display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:26px;
}
.ach-heading .ach-heading-ico{
    width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
    font-size:15px;color:#04101a;background:linear-gradient(120deg, var(--acc-cyan), var(--acc-indigo));
    box-shadow:0 6px 14px -4px rgba(34,211,238,.5);
}

.ach-card{
    background:var(--surface);border:1px solid var(--line);border-radius:18px;
    padding:22px 20px;text-align:center;height:100%;
    display:flex;flex-direction:column;
    transition:border-color .2s ease, transform .2s ease;
}
.ach-card:hover{border-color:var(--acc-cyan);transform:translateY(-3px);}
.ach-card.is-done{border-color:var(--acc-emerald);}

.ach-desc{
    font-size:15px;font-weight:700;color:var(--text);margin:0 0 16px;
    min-height:44px;display:flex;align-items:center;justify-content:center;
}

.ach-progress-wrap{margin-bottom:18px;}
.ach-progress-track{
    position:relative;height:22px;border-radius:999px;background:var(--surface-3);
    border:1px solid var(--line);overflow:hidden;
}
.ach-progress-fill{
    height:100%;border-radius:999px;
    background:linear-gradient(90deg, var(--acc-cyan), var(--acc-indigo));
    display:flex;align-items:center;justify-content:flex-end;
    transition:width .4s ease;
}
.ach-card.is-done .ach-progress-fill{background:linear-gradient(90deg, var(--acc-emerald), #0FA37A);}
.ach-progress-label{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--text);
    text-shadow:0 1px 2px rgba(0,0,0,.4);
}

.ach-rewards{
    display:flex;align-items:center;justify-content:center;gap:0;
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    padding:14px 0;margin-bottom:18px;
}
.ach-reward{
    flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
    font-family:var(--font-mono);font-weight:700;font-size:14.5px;color:var(--acc-emerald);
}
.ach-reward img{width:15px;height:15px;}
.ach-reward .bx{color:var(--acc-amber);font-size:15px;}
.ach-reward-sep{width:1px;align-self:stretch;background:var(--line);margin:0 4px;}

.ach-claim-btn{
    display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
    border:none;border-radius:12px;padding:11px 16px;font-weight:700;font-size:13.5px;
    font-family:'Inter',sans-serif;cursor:pointer;margin-top:auto;
    background:linear-gradient(120deg, var(--acc-cyan), var(--acc-indigo));color:#04101a;
    box-shadow:0 8px 18px -6px rgba(34,211,238,.4);
    transition:filter .15s ease, transform .15s ease;
}
.ach-claim-btn:hover{filter:brightness(1.08);transform:translateY(-1px);}
.ach-claim-btn:disabled{
    background:var(--surface-3);color:var(--text-dim);box-shadow:none;cursor:default;
    border:1px solid var(--line);
}
.ach-claim-btn:disabled:hover{transform:none;filter:none;}
</style>

<div class="ach-banner">
    <i class="fas fa-exclamation-circle"></i>
    YOU WILL GET YOUR REWARDS AT 00:00 UTC DAILY
</div>

<div class="ads">
    <?= $settings['achievements_top_ad'] ?>
</div>

<div class="row">
    <div class="col-lg-12">

        <h4 class="ach-heading"><span class="ach-heading-ico"><i class="fas fa-bullseye"></i></span> Complete Daily Missions & Get Extra Tokens</h4>

        <div class="row">
            <?php foreach ($achievements as $achievement) {
                $isDone = ($achievement['completed'] >= $achievement['condition']);
            ?>
            <div class="col-lg-4 mb-4">
                <div class="ach-card <?= $isDone ? 'is-done' : '' ?>">

                    <div class="ach-desc"><?= $achievement['description'] ?></div>

                    <div class="ach-progress-wrap">
                        <div class="ach-progress-track">
                            <div class="ach-progress-fill" style="width: <?= $achievement['progress'] ?>%;" role="progressbar" aria-valuenow="<?= $achievement['progress'] ?>" aria-valuemin="0" aria-valuemax="100"></div>
                            <span class="ach-progress-label"><?= $achievement['completed'] ?> / <?= $achievement['condition'] ?></span>
                        </div>
                    </div>

                    <div class="ach-rewards">
                        <span class="ach-reward"><img src="/img/coin2.png" draggable="false" alt=""> <?= currency($achievement['reward_usd'], $settings['currency_rate']) ?></span>
                        <span class="ach-reward-sep"></span>
                        <span class="ach-reward"><i class="bx bxs-bolt"></i> <?= $achievement['reward_energy'] ?></span>
                    </div>

                    <form action="<?= site_url('achievements/claim/' . $achievement['id']) ?>" method="POST">
                        <input type="hidden" name="<?= $csrf_name ?>" value="<?= $csrf_hash ?>">
                        <?php if ($isDone) { ?>
                            <button type="submit" class="ach-claim-btn"><i class="far fa-check-circle"></i> Claim Reward</button>
                        <?php } else { ?>
                            <button disabled type="submit" class="ach-claim-btn"><i class="fas fa-hourglass-end fa-spin"></i> In Progress</button>
                        <?php } ?>
                    </form>

                </div>
            </div>
            <?php } ?>
        </div>

    </div>
</div>

<div class="ads">
    <?= $settings['achievements_footer_ad'] ?>
</div>