<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pengaturan Sistem | CMS Admin SMK Teratai Putih 3</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
  <link rel="stylesheet" href="/css/admin.css">
</head>
<body>

  <div class="admin-wrapper">
    <%- include('partials/admin-sidebar') %>

    <div class="admin-content">
      <%- include('partials/admin-header', { title: 'Pengaturan Sistem' }) %>

      <main class="admin-main">
        <% if (message) { %>
          <div class="alert alert-success" style="margin-bottom: 1.5rem;">
            <%= message %>
          </div>
        <% } %>

        <div class="grid-2col">
          <!-- UPLOAD LOGO SEKOLAH -->
          <div class="card">
            <div class="card-header">
              <h3><i class="fa-solid fa-image text-blue"></i> Logo Sekolah</h3>
            </div>
            <div class="card-body">
              <p class="text-muted" style="margin-bottom: 1rem;">Logo ini akan digunakan pada Menu Website Publik dan Sidebar Panel Admin.</p>
              
              <div style="margin-bottom: 1.5rem; text-align: center; padding: 1.5rem; background: var(--bg-light); border-radius: var(--radius-sm); border: 1px dashed var(--border-color);">
                <% if (settings.images && settings.images.sekolah_logo) { %>
                  <img src="<%= settings.images.sekolah_logo %>" alt="Logo Saat Ini" style="max-width: 200px; max-height: 120px; object-fit: contain;">
                <% } else { %>
                  <i class="fa-solid fa-graduation-cap" style="font-size: 4rem; color: var(--primary-navy);"></i>
                  <p style="margin-top: 1rem; color: var(--text-muted);">Logo belum diatur (Menggunakan ikon bawaan)</p>
                <% } %>
              </div>

              <form action="/admin/content/photo" method="POST" enctype="multipart/form-data">
                <input type="hidden" name="imageKey" value="sekolah_logo">
                <input type="hidden" name="redirectUrl" value="/admin/settings?msg=Logo Sekolah berhasil diperbarui">
                
                <div class="form-group">
                  <label for="sekolah_logo_file">Pilih Gambar Baru (JPG, PNG)</label>
                  <input type="file" id="sekolah_logo_file" name="photoFile" class="form-control" accept="image/*" required>
                </div>
                
                <button type="submit" class="btn btn-primary" style="width: 100%;">
                  <i class="fa-solid fa-upload"></i> Unggah & Simpan Logo
                </button>
              </form>
            </div>
          </div>

          <!-- PENGATURAN KREDENSIAL ADMIN -->
          <div class="card">
            <div class="card-header">
              <h3><i class="fa-solid fa-shield-halved text-red"></i> Keamanan & Akses Login</h3>
            </div>
            <div class="card-body">
              <p class="text-muted" style="margin-bottom: 1rem;">Ubah nama pengguna (username) dan kata sandi (password) untuk mengakses panel CMS Admin ini.</p>
              
              <form action="/admin/settings/credentials" method="POST">
                <div class="form-group">
                  <label for="adminUsername">Username Baru</label>
                  <input type="text" id="adminUsername" name="adminUsername" class="form-control" value="<%= settings.adminUsername || 'admin' %>" required>
                </div>
                
                <div class="form-group">
                  <label for="adminPassword">Password Baru</label>
                  <input type="password" id="adminPassword" name="adminPassword" class="form-control" value="<%= settings.adminPassword || 'adminteratai3' %>" required>
                </div>
                
                <div class="alert alert-warning" style="margin-top: 1rem; margin-bottom: 1rem; font-size: 0.9rem;">
                  <i class="fa-solid fa-triangle-exclamation"></i> <strong>Perhatian:</strong> Setelah menekan tombol Simpan, sesi Anda mungkin akan dimuat ulang dan Anda harus login menggunakan kredensial yang baru.
                </div>
                
                <button type="submit" class="btn btn-danger" style="width: 100%;">
                  <i class="fa-solid fa-floppy-disk"></i> Simpan Kredensial Baru
                </button>
              </form>
            </div>
          </div>
        </div>

        <div class="card" style="margin-bottom: 2rem;">
          <div class="card-header">
            <h3><i class="fa-brands fa-whatsapp text-green"></i> Pengaturan Notifikasi & Kontak PPDB</h3>
          </div>
          <div class="card-body">
            <p class="text-muted" style="margin-bottom: 1rem;">Ubah nomor WhatsApp admin yang akan menerima notifikasi pendaftar PPDB Online dan pesan masuk.</p>
            
            <form action="/admin/settings/whatsapp" method="POST">
              <div class="form-group">
                <label for="adminWhatsapp">Nomor WhatsApp Admin</label>
                <input type="text" id="adminWhatsapp" name="adminWhatsapp" class="form-control" value="<%= settings.adminWhatsapp || '6281234567890' %>" placeholder="Gunakan kode negara (Contoh: 6281234567890)" required>
                <small class="form-hint">Harap gunakan format <code>62</code> di awal (pengganti angka 0), contoh: <code>6281234567890</code></small>
              </div>
              
              <button type="submit" class="btn btn-success" style="width: 100%; max-width: 300px;">
                <i class="fa-solid fa-floppy-disk"></i> Simpan Nomor WhatsApp
              </button>
            </form>
          </div>
        </div>

      </main>
    </div>
  </div>

</body>
</html>
