<!DOCTYPE html>
<html lang="<%= lang || 'id' %>">
<head>
  <meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Kolektor | <%= 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">
</head>
<body>
<%- include('partials/sidebar', { activePage: 'collectors', 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-person-badge"></i>
      <span>Manajemen Kolektor</span>
    </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>
      <button class="btn btn-p btn-sm" onclick="openModal('addCollectorModal')"><i class="bi bi-plus-lg"></i> Tambah Kolektor</button>
    </div>
  </div>

  <div class="page">
    <% if (msg) { %>
      <div class="alert alert-<%= msg.type==='error'?'d':'s' %>"><%= msg.text %></div>
    <% } %>

    <div class="card">
      <div class="card-hd">
        <h6><i class="bi bi-list-ul"></i> Daftar Kolektor</h6>
      </div>
      <div class="tbl-wrap">
        <table class="dtbl">
          <thead>
            <tr>
              <th>Nama</th>
              <th>Username</th>
              <th>Password</th>
              <th>No. HP</th>
              <th>Status</th>
              <th>Aksi</th>
            </tr>
          </thead>
          <tbody>
            <% if (!collectors || collectors.length === 0) { %>
              <tr><td colspan="6" class="text-center text-muted" style="padding:20px">Belum ada data kolektor.</td></tr>
            <% } else { %>
              <% collectors.forEach(c => { %>
                <tr>
                  <td><strong><%= c.name %></strong></td>
                  <td><code><%= c.username %></code></td>
                  <td><span class="text-muted"><%= c.password %></span></td>
                  <td><%= c.phone || '-' %></td>
                  <td>
                    <span class="badge <%= c.is_active ? 'bs' : 'bd' %>"><%= c.is_active ? t('common.active','Aktif') : t('common.inactive','Nonaktif') %></span>
                  </td>
                  <td>
                    <div class="d-flex gap-2">
                      <button class="btn btn-g btn-icon btn-sm" onclick='editCollector(<%- JSON.stringify(c) %>)'><i class="bi bi-pencil"></i></button>
                      <form action="/admin/collectors/<%= c.id %>/delete" method="POST" onsubmit="return confirm('Hapus kolektor ini?')">
                        <button type="submit" class="btn btn-d btn-icon btn-sm"><i class="bi bi-trash"></i></button>
                      </form>
                    </div>
                  </td>
                </tr>
              <% }) %>
            <% } %>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<div class="mo" id="addCollectorModal">
  <div class="mb">
    <form action="/admin/collectors" method="POST">
      <div class="mh"><span class="mt">Tambah Kolektor Baru</span><button type="button" class="mc" onclick="closeModal('addCollectorModal')">&times;</button></div>
      <div class="mbody">
        <div class="fg"><label class="fl">Nama Lengkap</label><input type="text" name="name" class="fc" required></div>
        <div class="fg"><label class="fl">Username Login</label><input type="text" name="username" class="fc" required></div>
        <div class="fg"><label class="fl">Password</label><input type="text" name="password" class="fc" required></div>
        <div class="fg"><label class="fl">No. HP</label><input type="text" name="phone" class="fc" placeholder="08123456789"></div>
        <div class="fg">
          <label class="fl">
            <i class="bi bi-check-circle"></i> Auto-Approve Pembayaran
          </label>
          <select name="auto_approve" class="fs">
            <option value="0">Nonaktif (Perlu Approval Admin)</option>
            <option value="1">Aktif (Langsung Lunas)</option>
          </select>
          <div class="hint" style="margin-top:6px;font-size:11px;color:var(--muted)">
            Jika aktif, pembayaran yang dilaporkan kolektor ini akan langsung diproses tanpa perlu approval admin/kasir.
          </div>
        </div>
      </div>
      <div class="mf">
        <button type="button" class="btn btn-g" onclick="closeModal('addCollectorModal')">Batal</button>
        <button type="submit" class="btn btn-p">Simpan</button>
      </div>
    </form>
  </div>
</div>

<div class="mo" id="editCollectorModal">
  <div class="mb">
    <form id="editForm" method="POST">
      <div class="mh"><span class="mt">Edit Data Kolektor</span><button type="button" class="mc" onclick="closeModal('editCollectorModal')">&times;</button></div>
      <div class="mbody">
        <div class="fg"><label class="fl">Nama Lengkap</label><input type="text" name="name" id="e-name" class="fc" required></div>
        <div class="fg"><label class="fl">Username Login</label><input type="text" name="username" id="e-username" class="fc" required></div>
        <div class="fg"><label class="fl">Password</label><input type="text" name="password" id="e-password" class="fc" required></div>
        <div class="fg"><label class="fl">No. HP</label><input type="text" name="phone" id="e-phone" class="fc"></div>
        <div class="fg">
          <label class="fl">Status Akun</label>
          <select name="is_active" id="e-status" class="fs">
            <option value="1">Aktif</option>
            <option value="0">Nonaktif</option>
          </select>
        </div>
        <div class="fg">
          <label class="fl">
            <i class="bi bi-check-circle"></i> Auto-Approve Pembayaran
          </label>
          <select name="auto_approve" id="e-auto-approve" class="fs">
            <option value="0">Nonaktif (Perlu Approval Admin)</option>
            <option value="1">Aktif (Langsung Lunas)</option>
          </select>
          <div class="hint" style="margin-top:6px;font-size:11px;color:var(--muted)">
            Jika aktif, pembayaran yang dilaporkan kolektor ini akan langsung diproses tanpa perlu approval admin/kasir.
          </div>
        </div>
      </div>
      <div class="mf">
        <button type="button" class="btn btn-g" onclick="closeModal('editCollectorModal')">Batal</button>
        <button type="submit" class="btn btn-p">Simpan Perubahan</button>
      </div>
    </form>
  </div>
</div>

<script>
function openModal(id){document.getElementById(id).classList.add('show')}
function closeModal(id){document.getElementById(id).classList.remove('show')}
function editCollector(c){
  document.getElementById('editForm').action='/admin/collectors/'+c.id+'/update';
  document.getElementById('e-name').value=c.name||'';
  document.getElementById('e-username').value=c.username||'';
  document.getElementById('e-password').value=c.password||'';
  document.getElementById('e-phone').value=c.phone||'';
  document.getElementById('e-status').value=String(c.is_active ? 1 : 0);
  document.getElementById('e-auto-approve').value=String(c.auto_approve ? 1 : 0);
  openModal('editCollectorModal');
}
</script>
</body>
</html>

