
<body class="bg-[#10181e]" style="font-family: 'Space Grotesk', sans-serif;">
  <div>
  <%- include('./components/wrapper') %>
  <div class="md:pl-64 flex flex-col flex-1 h-screen"> <%- include('./components/header') %>
  <main class="flex-1 pb-32">
  <div class="py-6">
  <%- include('./components/skeleton') %>
  <div class="hidden max-w-screen-2xl pt-8 mx-auto px-4 sm:px-6 md:px-16" id="content">
  <div class="lg:flex lg:items-center lg:justify-between rounded-3xl mb-8">
  <div class="min-w-0 flex-1">
  <div class="flex">
  <div class="relative">
  <h2 class="text-xl font-semibold text-white sm:truncate tracking-tight">Resources Store</h2>
  <p class="text-sm font-normal text-zinc-400">Buy resources with your choice of <%= coins %></p>
  </div>
  </div>
  </div>
  </div>
  <% if (req.query.success == "BOUGHTRESOURCE") { %>
    <div class="rounded-2xl bg-[#162027]/30 shadow border-t border-white/5 p-8 mb-5">
      <div class="flex">
        <div class="flex-shrink-0">
          <img src="../public/done.png" class="h-7 w-7 mt-2">
        </div>
        <div class="ml-5">
          <h3 class="text-md font-medium tracking-tight text-white">Purchased Item</h3>
          <div class="mt-1 text-sm text-zinc-400">
            <p>You Have Successfully Purchased The Item Now you Can Upgrade your servers.</p>
          </div>
        </div>
      </div>
    </div>
  <% } %> <% if (req.query.err == "NOTENOUGHCOINS") { %>
  <div class="bg-red-900/50 border-l-4 border-red-400 rounded-lg text-red-100 px-4 py-3 relative" role="alert">
  <div class="flex">
  <div class="py-1">
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-red-400 mr-3">
  <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
  </svg>
  </div>
  <div>
  <p class="font-bold">Insufficient Balance</p>
  <p class="text-sm relative">You do not have enough coins to complete this purchase.</p>
  </div>
  <span onclick="location.href = '../store';" class="absolute top-0 bottom-0 right-0 px-4 py-3">
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-red-400">
  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
  </svg>
  </span>
  </div>
  </div>
  <% } else if (req.query.err == "INVALIDAMOUNT") { %>
  <div class="bg-red-900/50 border-l-4 border-red-400 rounded-lg text-red-100 px-4 py-3 relative mb-8" role="alert">
  <div class="flex">
  <div class="py-1">
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-red-400 mr-3">
  <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
  </svg>
  </div>
  <div>
  <p class="font-bold">Invalid Amount</p>
  <p class="text-sm relative">The amount entered is invalid. Please check and try again.</p>
  </div>
  <span onclick="location.href = '../admin';" class="absolute top-0 bottom-0 right-0 px-4 py-3">
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-red-400">
  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
  </svg>
  </span>
  </div>
  </div>
  <% } else if (req.query.success == "BOUGHTPLAN") { %>
  <div class="bg-green-900/50 border-l-4 border-green-400 rounded-lg text-green-100 px-4 py-3 relative mb-8" role="alert">
  <div class="flex">
  <div class="py-1">
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-400 mr-3">
  <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
  </svg>
  </div>
  <div>
  <p class="font-bold">Plan Purchased Successfully</p>
  <p class="text-sm relative">You have successfully purchased the plan.</p>
  </div>
  <span onclick="location.href = '/store';" class="absolute top-0 bottom-0 right-0 px-4 py-3">
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-400">
  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
  </svg>
  </span>
  </div>
  </div>
  <% } else if (req.query.err == "ALREADYPLAN") { %>
  <div class="bg-yellow-900/50 border-l-4 border-yellow-400 rounded-lg text-yellow-100 px-4 py-3 relative mb-8" role="alert">
  <div class="flex">
  <div class="py-1">
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-yellow-400 mr-3">
  <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
  </svg>
  </div>
  <div>
  <p class="font-bold">Plan Already Purchased</p>
  <p class="text-sm relative">You already have this plan.</p>
  </div>
  <span onclick="location.href = '/store';" class="absolute top-0 bottom-0 right-0 px-4 py-3">
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-yellow-400">
  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
  </svg>
  </span>
  </div>
  </div>
  <% } else if (req.query.err == "INVALIDPLAN") { %>
  <div class="bg-red-900/50 border-l-4 border-red-400 rounded-lg text-red-100 px-4 py-3 relative mb-8" role="alert">
  <div class="flex">
  <div class="py-1">
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-red-400 mr-3">
  <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
  </svg>
  </div>
  <div>
  <p class="font-bold">Invalid Plan</p>
  <p class="text-sm relative">The plan you selected is not valid. Please choose a valid plan.</p>
  </div>
  <span onclick="location.href = '/store';" class="absolute top-0 bottom-0 right-0 px-4 py-3">
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-red-400">
  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
  </svg>
  </span>
  </div>
  </div>
  <% } %>
  <div id="productList" class="flex flex-row gap-4 flex-wrap w-full mb-2">
  <!-- Products will be inserted here by JavaScript -->
  </div>

  <div class="relative flex flex-col space-y-3 rounded-2xl bg-[#162027]/30 shadow border-t border-white/5 px-6 py-5 transition">
    <h1 class="text-lg font-semibold text-white">Claim Promo Code</h1>
  
    <input type="text" id="claim-code" 
      class="w-full border border-white/5 bg-[#162027]/30 focus:ring-blue-500 focus:border-transparent transition font-medium pl-4 py-3 text-sm text-zinc-400 placeholder:text-zinc-500 tracking-tight rounded-2xl" 
      placeholder="Enter Promo Code">
  
    <a href="javascript:claimPromoCode()" 
       class="inline-flex items-center justify-center rounded-full bg-<%= theme.buttoncolor %> px-6 py-2.5 text-sm font-normal text-white transition-colors duration-200 hover:bg-blue-600">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" />
      </svg>
      Claim Promo Code
    </a>
  </div>
  
  </div>
  </div>
  </main>
  <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script>
  // Define products data
  const products = [
  { type: 'ram', name: '1GB of memory', costZTT: 400 },
  { type: 'cpu', name: '1 CPU core', costZTT: 300 },
  { type: 'disk', name: '1GB of storage', costZTT: 200 },
  ];
  
  // Function to update the product display based on selected currency
  function updateProductDisplay(currency) {
  const productList = document.getElementById('productList');
  productList.innerHTML = ''; // Clear existing products
  
  // Generate HTML for each product based on the selected currency
  products.forEach(product => {
  const cost = `${product.costZTT} LHC`
  const productHTML = `
  <div class="decoration flex flex-col relative w-full md:w-72">
  <a href="/buyresource?resource=${product.type}&amount=1" class="w-full md:w-72 flex flex-col space-y-2 bg-[#121b21] border-2 border-transparent hover:border-[#121b21] focus:border-[#121b21] rounded-lg shadow-md transition relative">
  <div class="w-full h-full bg-no-repeat bg-center bg-cover rounded-lg rounded-b-none" style="background-image: url('${product.image}');">
  <div class="bg-gradient-to-t from-[#121b21] to-[#121b21]/20 w-full h-full backdrop-blur-sm rounded-kg"></div>
  </div>
  <div class="flex flex-col p-6">
  <div class="flex flex-row justify-between">
  <h4 class="font-semibold text-white text-md mt-1">${product.name}</h4>
  <p class="text-xl font-semibold text-white flex flex-row items-center gap-2">
  <span class="text-<%= theme.textcolor %> text-sm ml-3 bg-<%= theme.buttoncolor %> px-4 py-1.5 rounded-full">${cost}</span>
  </p>
  </div>
  </div>
  </a>
  </div>`;
  productList.innerHTML += productHTML;
  });
  }
  // Initial display update
  updateProductDisplay('ZTT');
  </script>
  </div>
  </div>
  </div>
  </div>
  </main>
  <script>
  async function claimPromoCode() {
    const code = document.getElementById('claim-code').value;
  
    if (!code) {
      alert('Please enter the promo code.');
      return;
    }
  
    try {
      const response = await fetch('/claim-promocode', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ code }), // No userId is needed
      });
  
      const data = await response.json();
  
      if (response.ok) {
        alert(`Code Claimed`);
      } else {
        alert(`Error: ${data.error}`);
      }
    } catch (error) {
      alert('Something went wrong. Please try again.');
    }
  }
  </script>
  <%- include('./components/footer') %>
  </div>
  </div>
  </body>