<!DOCTYPE html>
<html lang="id" data-theme="dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Settings - BuzzMart Admin</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/css/style.css">
  <link rel="stylesheet" href="/css/admin.css">
</head>
<body>
  <div class="admin-body">
    <%- include('_sidebar', { adminPath, currentPath: 'settings' }) %>

    <main class="admin-main">
      <button class="admin-mobile-toggle" onclick="document.getElementById('adminSidebar').classList.toggle('show')">
        <i class="fa-solid fa-bars"></i>
      </button>

      <div class="admin-page-header-row">
        <div>
          <h1 class="admin-page-title"><i class="fa-solid fa-gear"></i> Settings Toko</h1>
          <p class="admin-page-subtitle">Konfigurasi informasi umum toko BuzzMart</p>
        </div>
      </div>

      <% if (saved) { %>
        <div class="auth-success" style="margin-bottom:20px;">
          <i class="fa-solid fa-circle-check"></i> Settings berhasil disimpan
        </div>
      <% } %>

      <form action="/<%= adminPath %>/settings" method="POST">
        <div class="admin-card">
          <div class="admin-card-title"><i class="fa-solid fa-store"></i> Informasi Toko</div>
          <div class="admin-form-grid cols-2">
            <div class="form-group">
              <label class="form-label"><i class="fa-solid fa-signature"></i> Nama Toko</label>
              <input type="text" name="storeName" class="form-input" value="<%= settings.storeName %>" required>
            </div>
            <div class="form-group">
              <label class="form-label"><i class="fa-solid fa-quote-left"></i> Tagline</label>
              <input type="text" name="tagline" class="form-input" value="<%= settings.tagline %>">
            </div>
          </div>
          <div class="form-group">
            <label class="form-label"><i class="fa-solid fa-image"></i> URL Logo</label>
            <input type="text" name="logo" class="form-input" value="<%= settings.logo %>">
            <p style="font-size:11px; color:var(--text-muted); margin-top:6px;">
              Logo ini otomatis muncul di header, footer, favicon browser, dan halaman login.
            </p>
          </div>
        </div>

        <div class="admin-card">
          <div class="admin-card-title"><i class="fa-solid fa-panorama"></i> Banner Hero (Halaman Utama)</div>

          <% if (settings.heroImage) { %>
            <img src="<%= settings.heroImage %>" alt="Preview banner" style="width:100%; max-height:200px; object-fit:cover; border-radius:12px; border:1px solid var(--border-gold); margin-bottom:16px;" onerror="this.style.display='none'">
          <% } %>

          <div class="form-group">
            <label class="form-label"><i class="fa-solid fa-link"></i> URL Gambar Banner</label>
            <input type="text" name="heroImage" class="form-input" placeholder="/img/hero-banner.png" value="<%= settings.heroImage %>">
          </div>
          <div class="admin-form-grid cols-2">
            <div class="form-group">
              <label class="form-label"><i class="fa-solid fa-heading"></i> Judul Banner</label>
              <input type="text" name="heroTitle" class="form-input" placeholder="FREE FIRE" value="<%= settings.heroTitle %>">
            </div>
            <div class="form-group">
              <label class="form-label"><i class="fa-solid fa-heading"></i> Sub-judul Banner</label>
              <input type="text" name="heroSubtitle" class="form-input" placeholder="APKMOD" value="<%= settings.heroSubtitle %>">
            </div>
          </div>
        </div>

        <div class="admin-card">
          <div class="admin-card-title"><i class="fa-solid fa-share-nodes"></i> Social Media</div>
          <div class="admin-form-grid cols-2">
            <div class="form-group">
              <label class="form-label"><i class="fa-brands fa-whatsapp"></i> WhatsApp</label>
              <input type="text" name="whatsapp" class="form-input" placeholder="https://wa.me/628xxxx" value="<%= settings.whatsapp %>">
            </div>
            <div class="form-group">
              <label class="form-label"><i class="fa-brands fa-telegram"></i> Telegram</label>
              <input type="text" name="telegram" class="form-input" placeholder="https://t.me/username" value="<%= settings.telegram %>">
            </div>
          </div>
          <div class="admin-form-grid cols-2">
            <div class="form-group">
              <label class="form-label"><i class="fa-brands fa-youtube"></i> YouTube</label>
              <input type="text" name="youtube" class="form-input" placeholder="https://youtube.com/@username" value="<%= settings.youtube %>">
            </div>
            <div class="form-group">
              <label class="form-label"><i class="fa-brands fa-tiktok"></i> TikTok</label>
              <input type="text" name="tiktok" class="form-input" placeholder="https://tiktok.com/@username" value="<%= settings.tiktok %>">
            </div>
          </div>
        </div>

        <div class="admin-card">
          <div class="admin-card-title"><i class="fa-solid fa-credit-card"></i> Payment (Pakasir)</div>
          <div class="form-group">
            <label class="form-label"><i class="fa-solid fa-hashtag"></i> Pakasir Slug/Project</label>
            <input type="text" name="pakasirSlug" class="form-input" value="<%= settings.pakasirSlug %>">
            <p style="font-size:11px; color:var(--text-muted); margin-top:6px;">
              API Key Pakasir dikonfigurasi lewat file .env server (PAKASIR_API_KEY), bukan dari sini demi keamanan.
            </p>
          </div>
        </div>

        <div class="admin-card">
          <div class="admin-card-title"><i class="fa-solid fa-headset"></i> Customer Service</div>
          <div class="admin-form-grid cols-2">
            <div class="form-group">
              <label class="form-label"><i class="fa-solid fa-phone"></i> Nomor CS (ditampilkan)</label>
              <input type="text" name="csWhatsappNumber" class="form-input" placeholder="+62 800-0000-000" value="<%= settings.csWhatsappNumber %>">
            </div>
            <div class="form-group">
              <label class="form-label"><i class="fa-brands fa-whatsapp"></i> Link WhatsApp CS</label>
              <input type="text" name="csWhatsappLink" class="form-input" placeholder="https://wa.me/6280000000000" value="<%= settings.csWhatsappLink %>">
            </div>
          </div>
          <p style="font-size:11px; color:var(--text-muted); margin-top:-6px;">
            Tombol CS melayang akan otomatis tampil di halaman toko jika link WhatsApp CS diisi.
          </p>
        </div>

        <div class="admin-card">
          <div class="admin-card-title"><i class="fa-brands fa-tiktok"></i> Tutorial Download (Link Umum)</div>
          <div class="form-group">
            <label class="form-label"><i class="fa-brands fa-tiktok"></i> Link Video TikTok Cara Download Mod</label>
            <input type="text" name="tiktokTutorialUrl" class="form-input" placeholder="https://www.tiktok.com/@buzzmart/video/xxxxx" value="<%= settings.tiktokTutorialUrl %>">
          </div>
          <p style="font-size:11px; color:var(--text-muted); margin-top:-6px;">
            Link ini dipakai sebagai tutorial untuk SEMUA produk yang belum punya link tutorial sendiri. Untuk set link berbeda per produk, isi field "Link Tutorial TikTok" di halaman Edit Produk masing-masing.
          </p>
        </div>

        <div class="admin-card">
          <div class="admin-card-title"><i class="fa-solid fa-bullhorn"></i> Popup Informasi (Channel Mod, dll)</div>
          <div class="form-group">
            <label class="checkbox-row">
              <input type="checkbox" name="popupEnabled" <%= settings.popupEnabled ? 'checked' : '' %>>
              Aktifkan popup informasi (tampil sekali per sesi browser pengunjung)
            </label>
          </div>
          <div class="admin-form-grid cols-2">
            <div class="form-group">
              <label class="form-label"><i class="fa-solid fa-heading"></i> Judul Popup</label>
              <input type="text" name="popupTitle" class="form-input" placeholder="Gabung Channel Kami!" value="<%= settings.popupTitle %>">
            </div>
            <div class="form-group">
              <label class="form-label"><i class="fa-solid fa-tag"></i> Label Tombol</label>
              <input type="text" name="popupChannelLabel" class="form-input" placeholder="Gabung Channel WhatsApp" value="<%= settings.popupChannelLabel %>">
            </div>
          </div>
          <div class="form-group">
            <label class="form-label"><i class="fa-solid fa-message"></i> Pesan Popup</label>
            <textarea name="popupMessage" class="form-input" rows="3" placeholder="Dapatkan update mod terbaru..."><%= settings.popupMessage %></textarea>
          </div>
          <div class="form-group">
            <label class="form-label"><i class="fa-brands fa-whatsapp"></i> Link Channel WhatsApp Mod</label>
            <input type="text" name="popupChannelLink" class="form-input" placeholder="https://whatsapp.com/channel/xxxxx" value="<%= settings.popupChannelLink %>">
          </div>
        </div>

        <button type="submit" class="btn-admin-primary">
          <i class="fa-solid fa-floppy-disk"></i> Simpan Settings
        </button>
      </form>
    </main>
  </div>
</body>
</html>
