<!DOCTYPE html>
<html lang="<%= lang || 'id' %>">
<head>
  <meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
  <title><%= title %> | <%= company %></title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
  <link rel="stylesheet" href="/css/admin.css">
  <style>
    .wa-tabs { display: flex; gap: 10px; margin-bottom: 14px; border-bottom: 1px solid var(--border); padding-bottom: 10px; }
    .wa-tab { padding: 8px 14px; border-radius: 8px; cursor: pointer; color: var(--muted); transition: all 0.2s; font-weight: 700; text-decoration: none; }
    .wa-tab:hover { background: rgba(255,255,255,0.06); color: var(--text); }
    .wa-tab.active { background: var(--primary); color: white; }
    .template-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
    @media (max-width: 768px) {
      .template-grid { grid-template-columns: 1fr; }
    }
  </style>
</head>
<body>
<%- include('partials/sidebar', { activePage: 'whatsapp', company }) %>
<div class="mw">
  <div class="topbar">
    <div class="tb-title"><button class="hb-menu" onclick="toggleSidebar()"><i class="bi bi-list"></i></button><i class="bi bi-whatsapp"></i> <%= title %></div>
    <div class="tb-right">
      <span class="adm-badge"><i class="bi bi-person-fill"></i> <%= (typeof session !== 'undefined' && session.isCashier) ? t('admin.role.cashier', 'Kasir') : t('admin.role.admin', 'Admin') %></span>
      <a href="/admin/logout" class="btn btn-g btn-sm"><i class="bi bi-box-arrow-left"></i></a>
    </div>
  </div>
  <div class="page">
    <% const waTab = 'templates'; %>
    <% if (msg) { %>
    <div class="alert alert-<%= msg.type==='success'?'s':'d' %>">
      <i class="bi bi-<%= msg.type==='success'?'check-circle':'exclamation-circle' %>"></i> <%= msg.text %>
    </div>
    <% } %>

    <div class="wa-tabs">
      <a href="/admin/whatsapp" class="wa-tab <%= waTab==='status' ? 'active' : '' %>"><i class="bi bi-phone"></i> Status</a>
      <a href="/admin/whatsapp/broadcast" class="wa-tab <%= waTab==='broadcast' ? 'active' : '' %>"><i class="bi bi-megaphone"></i> Broadcast & Pengingat</a>
      <a href="/admin/whatsapp/templates" class="wa-tab <%= waTab==='templates' ? 'active' : '' %>"><i class="bi bi-chat-left-quote"></i> Template Pesan</a>
    </div>

    <form method="POST" action="/admin/whatsapp/templates">
      <div class="card mb16">
        <div class="card-hd">
          <h6><i class="bi bi-chat-left-quote-fill"></i> Pengaturan Template Notifikasi WhatsApp</h6>
        </div>
        <div class="card-bd template-grid">
          <div>
            <div class="fg">
              <label class="fl">Template Pengingat Tagihan (Bulanan / Manual)</label>
              <textarea class="fc" name="whatsapp_auto_billing_message" rows="8" required style="width: 100%;"><%= templates.whatsapp_auto_billing_message %></textarea>
              <div style="font-size: 11px; color: var(--muted); margin-top: 6px;">
                <i class="bi bi-info-circle"></i> Variabel: <b>{{nama}}</b>, <b>{{tagihan}}</b>, <b>{{rincian}}</b>, <b>{{paket}}</b>, <b>{{link}}</b>.
              </div>
            </div>
            
            <div class="fg" style="margin-top: 20px;">
              <label class="fl">Template Tagihan QRIS (Manual)</label>
              <textarea class="fc" name="whatsapp_billing_qris_message" rows="8" required style="width: 100%;"><%= templates.whatsapp_billing_qris_message %></textarea>
              <div style="font-size: 11px; color: var(--muted); margin-top: 6px;">
                <i class="bi bi-info-circle"></i> Variabel: <b>{{nama}}</b>, <b>{{periode}}</b>, <b>{{paket}}</b>, <b>{{qris_nominal}}</b>, <b>{{qris_kode}}</b>, <b>{{qris_qr}}</b>.
              </div>
            </div>
          </div>

          <div>
            <div class="fg">
              <label class="fl">Template Pembayaran Sukses (Lunas)</label>
              <textarea class="fc" name="whatsapp_payment_success_message" rows="8" required style="width: 100%;"><%= templates.whatsapp_payment_success_message %></textarea>
              <div style="font-size: 11px; color: var(--muted); margin-top: 6px;">
                <i class="bi bi-info-circle"></i> Variabel: <b>{{nama}}</b>, <b>{{periode}}</b>, <b>{{total}}</b>, <b>{{metode}}</b>.
              </div>
            </div>

            <div class="fg" style="margin-top: 20px;">
              <label class="fl">Template Pemberitahuan Isolir (Otomatis / Manual)</label>
              <textarea class="fc" name="whatsapp_isolir_message" rows="8" required style="width: 100%;"><%= templates.whatsapp_isolir_message %></textarea>
              <div style="font-size: 11px; color: var(--muted); margin-top: 6px;">
                <i class="bi bi-info-circle"></i> Variabel: <b>{{nama}}</b>, <b>{{paket}}</b>, <b>{{tagihan}}</b>, <b>{{link}}</b>.
              </div>
            </div>
          </div>
        </div>
        <div class="card-bd" style="border-top: 1px solid var(--border); background: var(--bg2); display: flex; justify-content: flex-end;">
          <button type="submit" class="btn btn-p"><i class="bi bi-save"></i> Simpan Template</button>
        </div>
      </div>
    </form>
  </div>
</div>
</body>
</html>
