<%- include('layout/header', { pageTitle: 'Data Mahasiswa & Iuran', pageDesc: 'Kelola data seluruh anggota kelas dan pantau pelunasan kas mingguan' }) %>

<div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;">
  <div>
    <h2 style="font-size: 1.2rem; font-weight: 700;">Status Iuran: Minggu ke-<%= currentWeek.week %> (<%= currentWeek.year %>)</h2>
    <p style="font-size: 0.85rem; color: var(--text-muted);">
      Lunas: <strong style="color: var(--accent-emerald);"><%= weeklyStatus.totalPaid %></strong> • 
      Belum: <strong style="color: var(--accent-rose);"><%= weeklyStatus.totalUnpaid %></strong> dari total <%= weeklyStatus.totalMembers %> mahasiswa aktif
    </p>
  </div>
  <button onclick="openModal('modalAddMember')" class="btn btn-primary">
    ➕ Tambah Mahasiswa
  </button>
</div>

<!-- Tabel Mahasiswa -->
<div class="glass-card">
  <div class="table-responsive">
    <table>
      <thead>
        <tr>
          <th>No</th>
          <th>Nama Mahasiswa</th>
          <th>Nomor WhatsApp</th>
          <th>Status Anggota</th>
          <th>Iuran Minggu Ini</th>
          <th style="text-align: right;">Aksi</th>
        </tr>
      </thead>
      <tbody>
        <% if (members.length === 0) { %>
          <tr>
            <td colspan="6" style="text-align: center; padding: 30px; color: var(--text-dim);">
              Belum ada data mahasiswa. Klik "Tambah Mahasiswa" untuk menambahkan.
            </td>
          </tr>
        <% } %>
        <% members.forEach((m, idx) => { 
             const iuranInfo = weeklyStatus.all.find(w => w.id === m.id);
             const isPaid = iuranInfo && iuranInfo.is_paid === 1;
        %>
          <tr>
            <td><%= idx + 1 %></td>
            <td>
              <strong style="color: #fff;"><%= m.name %></strong>
            </td>
            <td><%= m.phone_number ? m.phone_number : '<span style="color: var(--text-dim);">-</span>' %></td>
            <td>
              <% if (m.is_active) { %>
                <span class="badge badge-connected">Aktif</span>
              <% } else { %>
                <span class="badge badge-disconnected">Nonaktif</span>
              <% } %>
            </td>
            <td>
              <% if (isPaid) { %>
                <span class="badge badge-connected">✅ Lunas (<%= formatter.formatRupiah(iuranInfo.amount) %>)</span>
              <% } else { %>
                <span class="badge badge-disconnected">❌ Belum Bayar</span>
              <% } %>
            </td>
            <td style="text-align: right;">
              <div style="display: inline-flex; gap: 8px;">
                <% if (!isPaid) { %>
                  <button onclick="quickPay('<%= m.id %>', '<%= m.name %>')" class="btn btn-success btn-sm" title="Tandai Bayar Iuran">
                    💵 Bayar
                  </button>
                <% } %>
                <button onclick="editMember('<%= m.id %>', '<%= m.name %>', '<%= m.phone_number || '' %>', <%= m.is_active %>)" class="btn btn-secondary btn-sm" title="Edit">
                  ✏️
                </button>
                <form action="/members/delete/<%= m.id %>" method="POST" onsubmit="return confirm('Hapus <%= m.name %> dari daftar?');" style="display: inline;">
                  <button type="submit" class="btn btn-danger btn-sm" title="Hapus">
                    🗑️
                  </button>
                </form>
              </div>
            </td>
          </tr>
        <% }) %>
      </tbody>
    </table>
  </div>
</div>

<!-- Modal Tambah Member -->
<div class="modal-overlay" id="modalAddMember">
  <div class="modal-content">
    <div class="card-header">
      <h3 class="card-title">Tambah Mahasiswa Baru</h3>
      <button onclick="closeModal('modalAddMember')" style="background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1.2rem;">✕</button>
    </div>
    <form action="/members/add" method="POST">
      <div class="form-group">
        <label for="memberName">Nama Lengkap</label>
        <input type="text" id="memberName" name="name" placeholder="Contoh: Budi Santoso" required>
      </div>
      <div class="form-group">
        <label for="memberPhone">Nomor WhatsApp (Opsional)</label>
        <input type="text" id="memberPhone" name="phone_number" placeholder="Contoh: 081234567890">
      </div>
      <div style="display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px;">
        <button type="button" onclick="closeModal('modalAddMember')" class="btn btn-secondary">Batal</button>
        <button type="submit" class="btn btn-primary">Simpan Mahasiswa</button>
      </div>
    </form>
  </div>
</div>

<!-- Modal Edit Member -->
<div class="modal-overlay" id="modalEditMember">
  <div class="modal-content">
    <div class="card-header">
      <h3 class="card-title">Edit Data Mahasiswa</h3>
      <button onclick="closeModal('modalEditMember')" style="background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1.2rem;">✕</button>
    </div>
    <form id="formEditMember" method="POST">
      <div class="form-group">
        <label for="editName">Nama Lengkap</label>
        <input type="text" id="editName" name="name" required>
      </div>
      <div class="form-group">
        <label for="editPhone">Nomor WhatsApp</label>
        <input type="text" id="editPhone" name="phone_number">
      </div>
      <div class="form-group" style="flex-direction: row; align-items: center; gap: 10px;">
        <input type="checkbox" id="editActive" name="is_active" value="1" style="width: auto;">
        <label for="editActive" style="margin: 0; cursor: pointer;">Status Mahasiswa Aktif</label>
      </div>
      <div style="display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px;">
        <button type="button" onclick="closeModal('modalEditMember')" class="btn btn-secondary">Batal</button>
        <button type="submit" class="btn btn-primary">Simpan Perubahan</button>
      </div>
    </form>
  </div>
</div>

<!-- Modal Bayar Iuran Cepat -->
<div class="modal-overlay" id="modalQuickPay">
  <div class="modal-content">
    <div class="card-header">
      <h3 class="card-title">Konfirmasi Bayar Iuran</h3>
      <button onclick="closeModal('modalQuickPay')" style="background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1.2rem;">✕</button>
    </div>
    <form action="/members/pay-iuran" method="POST">
      <input type="hidden" id="payMemberId" name="member_id">
      <input type="hidden" name="week_number" value="<%= currentWeek.week %>">
      <input type="hidden" name="year" value="<%= currentWeek.year %>">

      <p style="font-size: 0.95rem; margin-bottom: 16px;">
        Tandai lunas iuran minggu ke-<strong><%= currentWeek.week %> (<%= currentWeek.year %>)</strong> untuk mahasiswa: <br>
        <strong id="payMemberName" style="color: var(--accent-primary); font-size: 1.1rem;"></strong>
      </p>

      <div class="form-group">
        <label for="payAmount">Nominal Iuran (Rp)</label>
        <input type="number" id="payAmount" name="amount" value="10000" required>
      </div>

      <div style="display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px;">
        <button type="button" onclick="closeModal('modalQuickPay')" class="btn btn-secondary">Batal</button>
        <button type="submit" class="btn btn-success">✅ Konfirmasi Pembayaran</button>
      </div>
    </form>
  </div>
</div>

<script>
  function editMember(id, name, phone, isActive) {
    document.getElementById('formEditMember').action = '/members/edit/' + id;
    document.getElementById('editName').value = name;
    document.getElementById('editPhone').value = phone;
    document.getElementById('editActive').checked = Boolean(isActive);
    openModal('modalEditMember');
  }

  function quickPay(id, name) {
    document.getElementById('payMemberId').value = id;
    document.getElementById('payMemberName').innerText = name;
    openModal('modalQuickPay');
  }
</script>

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