<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Kelola Berita & Artikel | 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">
  <!-- Quill WYSIWYG Editor -->
  <link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet">
  <style>
    .ql-container { font-size: 1rem; font-family: 'Plus Jakarta Sans', sans-serif; min-height: 260px; border-radius: 0 0 6px 6px; }
    .ql-toolbar { border-radius: 6px 6px 0 0; background: #f8fafc; }
    .ql-editor { min-height: 240px; line-height: 1.7; }
  </style>
</head>
<body>

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

    <div class="admin-content">
      <%- include('partials/admin-header', { title: 'Kelola Berita & Pengumuman Sekolah' }) %>

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

        <div class="card" style="margin-bottom: 2rem;">
          <div class="card-header">
            <h3><i class="fa-solid fa-plus-circle text-primary"></i> Tambah Artikel Berita Baru</h3>
          </div>
          <div class="card-body">
            <form action="/admin/berita/add" method="POST" enctype="multipart/form-data">
              
              <div class="grid-2col">
                <div class="form-group">
                  <label for="title">Judul Berita</label>
                  <input type="text" id="title" name="title" class="form-control" placeholder="Contoh: Siswa TJKT SMK Teratai Putih 3 Raih Juara Networking" required>
                </div>

                <div class="form-group">
                  <label for="category">Kategori Berita</label>
                  <select id="category" name="category" class="form-control" required>
                    <option value="akademik">Kabar Akademik</option>
                    <option value="prestasi">Prestasi Siswa</option>
                    <option value="ekstrakurikuler">Ekstrakurikuler</option>
                    <option value="kegiatan">Kegiatan Sekolah</option>
                  </select>
                </div>
              </div>

              <div class="grid-2col">
                <div class="form-group">
                  <label for="author">Penulis / Author</label>
                  <input type="text" id="author" name="author" class="form-control" value="Humas SMK Teratai Putih Global 3">
                </div>

                <div class="form-group">
                  <label for="imageFile"><i class="fa-solid fa-image text-gold"></i> Gambar Thumbnail (Sampul Kartu Berita)</label>
                  <input type="file" id="imageFile" name="imageFile" accept="image/*" class="form-control">
                  <small class="form-hint">Gambar ini tampil di kartu berita di halaman daftar berita. Format JPG/PNG, maks. 5MB.</small>
                </div>
              </div>

              <div class="form-group">
                <label for="imageUrl">Atau Masukkan URL Thumbnail (Opsional)</label>
                <input type="url" id="imageUrl" name="imageUrl" class="form-control" placeholder="https://images.unsplash.com/...">
              </div>

              <div class="form-group" style="background: rgba(15,44,89,0.04); border: 1px dashed var(--primary-navy); border-radius: 8px; padding: 1.5rem;">
                <label for="galleryFiles"><i class="fa-solid fa-images text-gold"></i> Foto Galeri Artikel <span style="font-weight: 400; color: var(--text-muted);">(Opsional)</span></label>
                <input type="file" id="galleryFiles" name="galleryFiles" accept="image/*" multiple class="form-control">
                <small class="form-hint">Pilih satu atau lebih foto untuk ditampilkan sebagai galeri di dalam halaman artikel. Format JPG/PNG.</small>
              </div>

              <div class="form-group">
                <label for="summary">Ringkasan Berita</label>
                <textarea id="summary" name="summary" class="form-control" rows="3" placeholder="Ringkasan singkat untuk tampilan kartu berita..." required></textarea>
                <small class="form-hint">Sistem akan otomatis menerjemahkan ke Bahasa Inggris.</small>
              </div>

              <div class="form-group">
                <label for="content">Isi Lengkap Berita <span style="color: var(--text-muted); font-weight: 400; font-size: 0.85rem;">(Gunakan toolbar di bawah untuk format teks)</span></label>
                <!-- Quill editor container -->
                <div id="quillEditor" style="background: #fff;"></div>
                <!-- Hidden input yang akan diisi oleh Quill sebelum form submit -->
                <input type="hidden" id="content" name="content">
              </div>

              <button type="submit" class="btn btn-primary btn-lg">
                <i class="fa-solid fa-paper-plane"></i> Publikasikan Artikel Berita
              </button>
            </form>
          </div>
        </div>

        <!-- LIST ARTICLES TABLE -->
        <div class="card">
          <div class="card-header">
            <h3><i class="fa-solid fa-list"></i> Daftar Berita Aktif (<%= news.length %> Artikel)</h3>
          </div>
          <div class="card-body p-0">
            <div class="table-responsive">
              <table class="admin-table">
                <thead>
                  <tr>
                    <th>Gambar</th>
                    <th>Judul Berita</th>
                    <th>Kategori</th>
                    <th>Tanggal</th>
                    <th>Penulis</th>
                    <th>Aksi</th>
                  </tr>
                </thead>
                <tbody>
                  <% news.forEach(item => { %>
                    <tr>
                      <td style="width: 70px;">
                        <img src="<%= item.image %>" alt="<%= item.title %>" style="width: 56px; height: 40px; object-fit: cover; border-radius: 6px;">
                      </td>
                      <td>
                        <strong><%= item.title %></strong>
                        <p class="text-muted text-sm" style="margin-top: 0.2rem;"><%= item.summary.substring(0, 70) %>...</p>
                      </td>
                      <td><span class="badge badge-primary"><%= item.category %></span></td>
                      <td><%= item.date %></td>
                      <td><%= item.author %></td>
                      <td>
                        <form action="/admin/berita/delete/<%= item.id %>" method="POST" onsubmit="return confirm('Yakin ingin menghapus artikel berita ini?');" style="display:inline;">
                          <button type="submit" class="btn-icon text-danger" title="Hapus Artikel">
                            <i class="fa-solid fa-trash-can"></i>
                          </button>
                        </form>
                      </td>
                    </tr>
                  <% }); %>
                </tbody>
              </table>
            </div>
          </div>
        </div>

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

<script src="https://cdn.quilljs.com/1.3.7/quill.min.js"></script>
<script>
  // Initialize Quill with full toolbar
  const quill = new Quill('#quillEditor', {
    theme: 'snow',
    placeholder: 'Tuliskan isi berita lengkap di sini...',
    modules: {
      toolbar: [
        [{ 'header': [1, 2, 3, false] }],
        ['bold', 'italic', 'underline', 'strike'],
        [{ 'color': [] }, { 'background': [] }],
        [{ 'list': 'ordered'}, { 'list': 'bullet' }],
        [{ 'indent': '-1'}, { 'indent': '+1' }],
        ['link', 'blockquote', 'code-block'],
        ['clean']
      ]
    }
  });

  // Before form submit, copy Quill HTML content into hidden input
  document.querySelector('form[action="/admin/berita/add"]').addEventListener('submit', function(e) {
    const htmlContent = quill.root.innerHTML;
    // Prevent submitting empty editor
    if (quill.getText().trim().length === 0) {
      e.preventDefault();
      alert('Isi lengkap berita tidak boleh kosong!');
      return;
    }
    document.getElementById('content').value = htmlContent;
  });
</script>
</body>
</html>
