admin.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Admin Dashboard - Paid VIP Email Management | FDOWN</title>
  <link rel="stylesheet" href="styles.css?v=15.0-light">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <!-- Popunder Ad Script -->
  <script src="https://pl31769223.profitableratecpmnetwork.com/24/c2/65/24c265c87577d30b381ddafb430d03e7.js"></script>
</head>
<body style="background-color: var(--bg-main);">

  <!-- Header -->
  <header class="navbar">
    <div class="nav-container">
      <a href="index.html" class="brand-logo">
        <div class="logo-icon">
          <i class="fa-solid fa-crown"></i>
        </div>
        <div class="logo-text">FDOWN <span>Admin Control Panel</span></div>
      </a>

      <div style="display: flex; gap: 12px; align-items: center;">
        <a href="index.html" class="btn-header">
          <i class="fa-solid fa-house"></i> Back to Main Downloader
        </a>
      </div>
    </div>
  </header>

  <!-- Main Content -->
  <main class="main-content" style="max-width: 800px; margin: 40px auto; padding: 0 20px;">
    
    <div class="card-box" style="padding: 35px; border-color: var(--border-highlight); box-shadow: var(--shadow-card), var(--shadow-glow);">
      
      <div class="card-header" style="justify-content: space-between;">
        <div style="display: flex; align-items: center; gap: 12px;">
          <div class="card-header-icon" style="background: rgba(139, 92, 246, 0.2); color: #a78bfa;">
            <i class="fa-solid fa-crown"></i>
          </div>
          <div>
            <h2>VIP & Admin Pass Email Manager</h2>
            <p style="font-size: 0.85rem; color: var(--text-secondary);">Add emails of paid subscribers (Rs. 500/Mo) or your own admin accounts</p>
          </div>
        </div>

        <span class="badge-4k" style="font-size: 0.8rem; padding: 6px 12px;">Unlimited 4K Access</span>
      </div>

      <!-- Add New Paid User Email Form -->
      <form id="add-email-form" style="margin: 25px 0; background: var(--bg-input); border: 1px solid var(--border-color); padding: 20px; border-radius: var(--radius-md);">
        <label style="font-weight: 600; font-size: 0.95rem; color: var(--text-primary); display: block; margin-bottom: 8px;">
          <i class="fa-solid fa-user-plus" style="color: var(--primary-teal);"></i> Add New Paid VIP User Email:
        </label>

        <div style="display: flex; gap: 10px; flex-wrap: wrap;">
          <input type="email" id="new-vip-email" class="url-input" style="flex: 1; min-width: 250px; font-size: 0.95rem; padding-left: 16px;" placeholder="e.g. client_email@gmail.com..." required>
          <button type="submit" class="btn-download" style="padding: 0 24px; font-size: 0.95rem;">
            <i class="fa-solid fa-plus"></i> Grant VIP Access
          </button>
        </div>
      </form>

      <!-- Active VIP Emails List Table -->
      <div style="margin-top: 30px;">
        <h3 style="font-size: 1.1rem; margin-bottom: 15px; display: flex; align-items: center; justify-content: space-between;">
          <span><i class="fa-solid fa-users-gear" style="color: var(--primary-teal);"></i> Active VIP & Admin Emails (<span id="total-emails-count">0</span>)</span>
          <button id="btn-refresh-list" class="btn-info" style="font-size: 0.8rem; padding: 4px 10px;"><i class="fa-solid fa-rotate"></i> Refresh</button>
        </h3>

        <div id="emails-list-container" style="display: flex; flex-direction: column; gap: 10px;">
          <!-- Dynamically populated via JS -->
        </div>
      </div>

    </div>

  </main>

  <div class="toast" id="toast">
    <i class="fa-solid fa-circle-check" style="color: var(--accent-green);"></i>
    <span id="toast-msg">Email updated!</span>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const addEmailForm = document.getElementById('add-email-form');
      const newVipEmailInput = document.getElementById('new-vip-email');
      const emailsListContainer = document.getElementById('emails-list-container');
      const totalEmailsCount = document.getElementById('total-emails-count');
      const btnRefreshList = document.getElementById('btn-refresh-list');
      const toast = document.getElementById('toast');
      const toastMsg = document.getElementById('toast-msg');

      function showToast(msg) {
        if (!toast || !toastMsg) return;
        toastMsg.textContent = msg;
        toast.classList.add('show');
        setTimeout(() => toast.classList.remove('show'), 4000);
      }

      // Fetch All Emails
      async function loadAdminEmails() {
        try {
          const resp = await fetch('/api/admin/emails');
          const data = await resp.json();

          if (data.success && data.emails) {
            renderEmailsList(data.emails);
          }
        } catch (err) {
          showToast('Failed to load email list.');
        }
      }

      // Render List
      function renderEmailsList(emails) {
        emailsListContainer.innerHTML = '';
        if (totalEmailsCount) totalEmailsCount.textContent = emails.length;

        if (emails.length === 0) {
          emailsListContainer.innerHTML = '<p style="color: var(--text-muted); font-size: 0.9rem;">No VIP emails added yet.</p>';
          return;
        }

        emails.forEach(email => {
          const item = document.createElement('div');
          item.style.cssText = 'background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 10px; padding: 12px 18px; display: flex; justify-content: space-between; align-items: center;';
          item.innerHTML = `
            <div style="display: flex; align-items: center; gap: 10px;">
              <i class="fa-solid fa-circle-check" style="color: var(--accent-green);"></i>
              <strong style="color: var(--text-primary); font-size: 0.95rem;">${email}</strong>
              <span class="badge-hd" style="background: rgba(139, 92, 246, 0.2); color: #a78bfa; border: 1px solid #8b5cf6;">Unlimited 4K Pass</span>
            </div>
            <button type="button" class="btn-info btn-remove-email" data-email="${email}" style="color: #ef4444; border-color: rgba(239, 68, 68, 0.3); font-size: 0.8rem; padding: 6px 12px;">
              <i class="fa-solid fa-trash-can"></i> Remove
            </button>
          `;
          emailsListContainer.appendChild(item);
        });

        // Bind Remove Handlers
        document.querySelectorAll('.btn-remove-email').forEach(btn => {
          btn.addEventListener('click', async () => {
            const targetEmail = btn.getAttribute('data-email');
            if (confirm(`Remove VIP Access for ${targetEmail}?`)) {
              try {
                const resp = await fetch('/api/admin/remove-email', {
                  method: 'POST',
                  headers: { 'Content-Type': 'application/json' },
                  body: JSON.stringify({ email: targetEmail })
                });
                const data = await resp.json();
                if (data.success) {
                  showToast(data.message);
                  renderEmailsList(data.emails);
                }
              } catch (err) {
                showToast('Error removing email.');
              }
            }
          });
        });
      }

      // Add New Email Handler
      if (addEmailForm) {
        addEmailForm.addEventListener('submit', async (e) => {
          e.preventDefault();
          const emailVal = newVipEmailInput.value.trim();
          if (!emailVal) return;

          try {
            const resp = await fetch('/api/admin/add-email', {
              method: 'POST',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify({ email: emailVal })
            });
            const data = await resp.json();

            if (data.success) {
              showToast(data.message);
              newVipEmailInput.value = '';
              renderEmailsList(data.emails);
            } else {
              showToast(data.message);
            }
          } catch (err) {
            showToast('Error adding email.');
          }
        });
      }

      if (btnRefreshList) btnRefreshList.addEventListener('click', loadAdminEmails);

      loadAdminEmails();
    });
  </script>
</body>
</html>