<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Redeem - Argus Dashboard</title>
    <meta name="author" content="KartoffelChips">
    <meta name="description" content="Argus - Watch Discord bots on your server.">
    <%- include("../partials/icons.ejs") %>

    <meta property="og:title" content="Argus - Watch your bot">
    <meta property="og:site_name" content="Redeem - Argus Dashboard">
    <meta property="og:url" content="https://argus-bot.com/">
    <meta property="og:description" content="Argus - Watch Discord bots on your server.">
    <meta property="og:type" content="website">
    <meta property="og:image" content="/assets/img/ogimage.jpg">

    <link href="/assets/css/dashboard/main.css" rel="stylesheet">
    <link href="/assets/css/dashboard/redeem.css" rel="stylesheet">
</head>
<body>
    <div class="loader"></div>

    <%- include("../partials/messageBox.ejs", {}) %>

    <%- include("../partials/nav.ejs", { user: user }) %>

    <main>
        <div class="section">
            <h2>Redeem</h2>
            <div class="redeemBox main">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#fefefe"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path opacity="0.1" d="M4 12.5V16C4 17.8856 4 18.8284 4.58579 19.4142C5.17157 20 6.11438 20 8 20H9H15H16C17.8856 20 18.8284 20 19.4142 19.4142C20 18.8284 20 17.8856 20 16V12.5C20 12.2239 19.7761 12 19.5 12H4.5C4.22386 12 4 12.2239 4 12.5Z" fill="#fefefe"></path> <path d="M3 9.5C3 9.03534 3 8.80302 3.03843 8.60982C3.19624 7.81644 3.81644 7.19624 4.60982 7.03843C4.80302 7 5.03534 7 5.5 7H12H18.5C18.9647 7 19.197 7 19.3902 7.03843C20.1836 7.19624 20.8038 7.81644 20.9616 8.60982C21 8.80302 21 9.03534 21 9.5V9.5V9.5C21 9.96466 21 10.197 20.9616 10.3902C20.8038 11.1836 20.1836 11.8038 19.3902 11.9616C19.197 12 18.9647 12 18.5 12H12H5.5C5.03534 12 4.80302 12 4.60982 11.9616C3.81644 11.8038 3.19624 11.1836 3.03843 10.3902C3 10.197 3 9.96466 3 9.5V9.5V9.5Z" stroke="#fefefe" stroke-width="2" stroke-linejoin="round"></path> <path d="M4 12V16C4 17.8856 4 18.8284 4.58579 19.4142C5.17157 20 6.11438 20 8 20H9H15H16C17.8856 20 18.8284 20 19.4142 19.4142C20 18.8284 20 17.8856 20 16V12" stroke="#fefefe" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M12 7V20" stroke="#fefefe" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M11.3753 6.21913L9.3959 3.74487C8.65125 2.81406 7.26102 2.73898 6.41813 3.58187C5.1582 4.8418 6.04662 7 7.82843 7L11 7C11.403 7 11.6271 6.53383 11.3753 6.21913Z" stroke="#fefefe" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M12.6247 6.21913L14.6041 3.74487C15.3488 2.81406 16.739 2.73898 17.5819 3.58187C18.8418 4.8418 17.9534 7 16.1716 7L13 7C12.597 7 12.3729 6.53383 12.6247 6.21913Z" stroke="#fefefe" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
                <input type="text" id="codeInput" maxlength="16px" placeholder="XXXXXXXXXXXXXXXX" style="text-transform:uppercase">
                <button onclick="redeemCode(this)" id="redeemBtn">Redeem</button>
            </div>

            <% if (userDoc.redeemCodeLog.length > 0) {%>
                <h2>Already redeemed</h2>
                <div class="redeemList" id="redeemList">
                    <% userDoc.redeemCodeLog.reverse().forEach(log => {%>
                        <% if (log.redeemed > new Date().getTime() - 2629800000) {%>
                            <div class="redeemBox">
                                <%if (log.type === "points") {%>
                                    <img src="/assets/img/token.png">
                                <%} else if (log.type === "premium") {%>
                                    <img src="/assets/img/premium_small.png">
                                <%}%>
    
                                <%if (log.type === "points") {%>
                                    <span>x <%= log.amount %></span>
                                <%} else if (log.type === "premium") {%>
                                    <span data-premiumamount="premium"><%= log.amount %></span>
                                <%}%>
    
                                <span class="code"><%= log.code %></span>
    
                                <span class="date"><%= new Date(log.redeemed).toLocaleTimeString([], {minute: "2-digit", hour: "2-digit", day: "numeric", month: "2-digit", year: "numeric"}); %></span>
                            </div>
                        <% }; %>
                    <% }); %>
                </div>
            <%}%>
        </div>
    </main>

    <%- include("../partials/footer.ejs", {}) %>
    
    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js"></script>
    <script src="/assets/js/assets.js"></script>
    <script src="/assets/js/redeem.js"></script>
</body>
</html>