<%- include('layout/header', { pageTitle: 'Pesan & Siaran WhatsApp', pageDesc: 'Atur template pengingat kelas dan kirim pengumuman langsung dengan tag seluruh anggota' }) %>

<% if (msgStatus === 'template_saved') { %>
  <div class="alert alert-success">✅ Template pesan berhasil diperbarui!</div>
<% } else if (msgStatus === 'settings_saved') { %>
  <div class="alert alert-success">✅ Pengaturan sistem berhasil disimpan!</div>
<% } else if (msgStatus === 'broadcast_sent') { %>
  <div class="alert alert-success">🚀 Siaran pengumuman berhasil dikirim ke grup WhatsApp!</div>
<% } %>

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 24px;">
  <!-- Kolom 1: Siaran Langsung (Live Broadcast) -->
  <div class="glass-card">
    <div class="card-header">
      <h3 class="card-title">
        <span>📢</span> Kirim Pengumuman Instan
      </h3>
      <span class="badge badge-connected">Live WA</span>
    </div>
    <p style="font-size: 0.85rem; color: var(--text-muted); margin-bottom: 20px;">
      Kirim pesan broadcast ke grup target secara langsung dari dashboard web.
    </p>

    <form action="/messages/broadcast" method="POST">
      <div class="form-group">
        <label for="broadcastText">Isi Pengumuman / Pesan</label>
        <textarea id="broadcastText" name="message_text" rows="5" placeholder="Tuliskan isi pengumuman kelas di sini..." required></textarea>
      </div>

      <div class="form-group" style="flex-direction: row; align-items: center; gap: 10px; background: rgba(99, 102, 241, 0.1); padding: 12px; border-radius: var(--radius-md); border: 1px solid rgba(99, 102, 241, 0.25);">
        <input type="checkbox" id="mentionAll" name="mention_all" value="1" checked style="width: auto;">
        <label for="mentionAll" style="margin: 0; cursor: pointer; color: #fff;">
          <strong>Tag Seluruh Anggota Grup (@everyone)</strong><br>
          <span style="font-size: 0.78rem; color: var(--text-muted);">Semua anggota dalam grup akan menerima notifikasi tag.</span>
        </label>
      </div>

      <button type="submit" class="btn btn-primary" style="width: 100%; margin-top: 10px;">
        🚀 Kirim Siaran ke Grup
      </button>
    </form>
  </div>

  <!-- Kolom 2: Pengaturan Grup & Bot -->
  <div class="glass-card">
    <div class="card-header">
      <h3 class="card-title">
        <span>⚙️</span> Pengaturan Sistem & Target Grup
      </h3>
    </div>
    <p style="font-size: 0.85rem; color: var(--text-muted); margin-bottom: 20px;">
      Konfigurasi grup target tempat pengingat otomatis dikirimkan.
    </p>

    <form action="/messages/settings/update" method="POST">
      <div class="form-group">
        <label for="targetGroup">ID Grup WhatsApp Target (JID)</label>
        <input type="text" id="targetGroup" name="target_group_jid" value="<%= settings.target_group_jid || '' %>" placeholder="Contoh: 120363012345678901@g.us">
        <small style="color: var(--text-dim); margin-top: 4px;">
          Tip: Anda juga bisa mengetikkan <code>!bot setgroup</code> langsung di grup WA untuk mengisi kolom ini secara otomatis.
        </small>
      </div>

      <div class="form-group">
        <label for="adminNumbers">Nomor Admin Whitelist (Pisahkan Koma)</label>
        <input type="text" id="adminNumbers" name="admin_numbers" value="<%= settings.admin_numbers || '' %>" placeholder="Contoh: 6281234567890, 6289876543210">
      </div>

      <div class="form-group">
        <label for="weeklyAmount">Nominal Iuran Mingguan Standar (Rp)</label>
        <input type="number" id="weeklyAmount" name="weekly_dues_amount" value="<%= settings.weekly_dues_amount || '10000' %>">
      </div>

      <button type="submit" class="btn btn-secondary" style="width: 100%; margin-top: 10px;">
        💾 Simpan Pengaturan
      </button>
    </form>
  </div>
</div>

<!-- Editor Template Pesan Pengingat -->
<div class="glass-card">
  <div class="card-header">
    <h3 class="card-title">
      <span>📝</span> Kustomisasi Template Pengingat Kelas
    </h3>
  </div>
  <p style="font-size: 0.85rem; color: var(--text-muted); margin-bottom: 16px;">
    Gunakan tag variabel: <code>{matkul}</code>, <code>{dosen}</code>, <code>{jam}</code>, <code>{note}</code>, <code>{hari}</code> untuk mengisi data secara otomatis saat notifikasi dikirim.
  </p>

  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 20px;">
    <% templates.forEach(t => { %>
      <div style="background: rgba(0, 0, 0, 0.25); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 18px;">
        <h4 style="font-size: 1rem; margin-bottom: 4px; color: var(--accent-primary);"><%= t.title %></h4>
        <p style="font-size: 0.78rem; color: var(--text-dim); margin-bottom: 14px;">Key: <code><%= t.key_name %></code></p>

        <form action="/messages/template/update" method="POST">
          <input type="hidden" name="key_name" value="<%= t.key_name %>">
          <input type="hidden" name="title" value="<%= t.title %>">
          <div class="form-group">
            <textarea name="content" rows="7" style="font-family: 'JetBrains Mono', monospace; font-size: 0.85rem;" required><%= t.content %></textarea>
          </div>
          <button type="submit" class="btn btn-secondary btn-sm" style="width: 100%;">
            💾 Simpan Template Ini
          </button>
        </form>
      </div>
    <% }) %>
  </div>
</div>

<%- include('layout/footer') %>
