<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Site Settings | Admin Panel</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/css/style.css">
  <style>
    .admin-nav {
      background-color: var(--bg-card);
      border-bottom: 1px solid var(--border-color);
      padding: 12px 20px;
    }
    .admin-nav-container {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .admin-menu {
      display: flex;
      gap: 10px;
    }
    .admin-menu a {
      color: var(--text-muted);
      text-decoration: none;
      padding: 8px 16px;
      border-radius: 8px;
      font-weight: 600;
      font-size: 0.9rem;
    }
    .admin-menu a:hover, .admin-menu a.active {
      background-color: var(--accent-gold);
      color: #000;
    }
    .settings-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 20px;
    }
    .settings-card {
      background-color: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      padding: 20px;
    }
    .settings-card h3 {
      color: var(--accent-gold);
      margin-bottom: 15px;
      border-bottom: 1px solid var(--border-color);
      padding-bottom: 10px;
    }
    .alert-msg {
      background: rgba(46, 196, 182, 0.2);
      border: 1px solid var(--accent-green);
      color: var(--accent-green);
      padding: 10px 15px;
      border-radius: 8px;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>

  <!-- Admin Header -->
  <header class="site-header">
    <div class="header-container">
      <a href="/admin/dashboard" class="logo-area">
        <div class="logo-icon">ADMIN</div>
        <div class="logo-text">
          <h1><%= settings.siteTitle %></h1>
          <span>SITE SETTINGS</span>
        </div>
      </a>
      <div>
        <a href="/" target="_blank" class="btn-admin" style="margin-right: 10px;"><i class="fas fa-external-link-alt"></i> View Site</a>
        <a href="/admin/logout" class="btn-admin" style="border-color: var(--accent-red); color: var(--accent-red);"><i class="fas fa-sign-out-alt"></i> Logout</a>
      </div>
    </div>
  </header>

  <!-- Admin Sub Nav -->
  <nav class="admin-nav">
    <div class="admin-nav-container">
      <div class="admin-menu">
        <a href="/admin/dashboard"><i class="fas fa-tachometer-alt"></i> Dashboard</a>
        <a href="/admin/agents"><i class="fas fa-users-cog"></i> Manage Agents</a>
        <a href="/admin/settings" class="active"><i class="fas fa-sliders-h"></i> Site Settings</a>
        <a href="/admin/complaints"><i class="fas fa-exclamation-circle"></i> Complaints</a>
      </div>
    </div>
  </nav>

  <main class="main-container">

    <% if (msg) { %>
      <div class="alert-msg"><i class="fas fa-info-circle"></i> <%= msg %></div>
    <% } %>

    <h2 style="margin-bottom: 20px; color: #fff;"><i class="fas fa-sliders-h"></i> Website Control & Configurations</h2>

    <div class="settings-grid">
      <!-- Site Information & Announcement -->
      <div class="settings-card">
        <h3><i class="fas fa-globe"></i> General Branding & Notice</h3>
        <form action="/admin/settings" method="POST">
          <div class="form-group">
            <label>Browser Page Title</label>
            <input type="text" name="siteTitle" class="form-control" value="<%= settings.siteTitle %>" required>
          </div>
          <div class="form-group">
            <label>Logo Main Text</label>
            <input type="text" name="logoText" class="form-control" value="<%= settings.logoText %>" required>
          </div>
          <div class="form-group">
            <label>Logo Subtitle</label>
            <input type="text" name="logoSub" class="form-control" value="<%= settings.logoSub %>" required>
          </div>
          <div class="form-group">
            <label>Hero Promotional Banner Image URL</label>
            <input type="text" name="heroBannerUrl" class="form-control" value="<%= settings.heroBannerUrl || '' %>" placeholder="https://...">
          </div>
          <div class="form-group">
            <label>App Download APK / WhatsApp Link</label>
            <input type="text" name="appDownloadUrl" class="form-control" value="<%= settings.appDownloadUrl || '' %>" placeholder="https://...">
          </div>
          <div class="form-group">
            <label>Live Scrolling Marquee Notice (Top Banner)</label>
            <textarea name="siteNotice" class="form-control" rows="4" required><%= settings.siteNotice %></textarea>
          </div>
          <div class="form-group">
            <label>Official Helpline WhatsApp Number</label>
            <input type="text" name="supportWhatsapp" class="form-control" value="<%= settings.supportWhatsapp %>">
          </div>
          <div class="form-group">
            <label>Official Telegram Channel Link</label>
            <input type="text" name="supportTelegram" class="form-control" value="<%= settings.supportTelegram %>">
          </div>
          <div class="form-group">
            <label>Footer Copyright Text</label>
            <input type="text" name="footerText" class="form-control" value="<%= settings.footerText %>">
          </div>
          <button type="submit" class="btn-submit"><i class="fas fa-save"></i> Save Site Settings</button>
        </form>
      </div>

      <!-- Change Admin Password -->
      <div class="settings-card" style="height: fit-content;">
        <h3><i class="fas fa-key"></i> Security & Password</h3>
        <form action="/admin/password" method="POST">
          <div class="form-group">
            <label>New Admin Password</label>
            <input type="password" name="newPassword" class="form-control" placeholder="Enter new password" required>
          </div>
          <button type="submit" class="btn-submit" style="background: var(--accent-green); color: #000;">
            <i class="fas fa-lock"></i> Update Password
          </button>
        </form>
      </div>
    </div>

  </main>

</body>
</html>
