<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>

<style>
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
:root{--teal-800:#0b5a52;--teal-700:#0b7a6e;--teal-600:#0d9488;--teal-500:#14b8a6;--teal-400:#2dd4bf;--teal-50:#f0fdfa;--teal-100:#ccfbf1;--amber-500:#f59e0b;--amber-100:#fef3c7;--red-500:#ef4444;--slate-100:#f1f5f9;--slate-200:#e2e8f0;--slate-400:#94a3b8;--slate-500:#64748b;--slate-700:#334155;--slate-900:#0f172a;--card-shadow:0 1px 3px rgba(0,0,0,.06),0 4px 20px rgba(0,0,0,.06);}

.nt-form-wrap{font-family:'Plus Jakarta Sans',system-ui,sans-serif;}
.ar-page-header{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:14px;margin-bottom:24px;}
.ar-header-left h4{font-size:1.2rem;font-weight:800;color:var(--teal-800);margin:0 0 5px;display:flex;align-items:center;gap:11px;}
.ar-header-left h4 .hi{width:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,var(--teal-600),var(--teal-500));display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.05rem;box-shadow:0 4px 12px rgba(13,148,136,.32);flex-shrink:0;}
.ar-breadcrumb{display:flex;align-items:center;gap:6px;font-size:.77rem;color:var(--slate-400);padding-left:51px;}
.ar-breadcrumb a{color:var(--teal-600);text-decoration:none;font-weight:600;}
.ar-breadcrumb .sep{color:var(--slate-200);}

.nt-form-card{background:#fff;border-radius:16px;border:1.5px solid var(--slate-200);box-shadow:var(--card-shadow);overflow:hidden;margin-bottom:20px;}
.nt-form-card-header{background:linear-gradient(135deg,var(--teal-800),var(--teal-600));color:#fff;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;}
.nt-form-card-header h5{margin:0;font-size:.95rem;font-weight:800;display:flex;align-items:center;gap:8px;}
.nt-form-card-body{padding:24px 22px;}

.form-row{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:14px;}
.form-group{flex:1;min-width:180px;}
.form-group.full{flex-basis:100%;min-width:100%;}
.form-label{font-size:.77rem;font-weight:700;color:var(--slate-500);margin-bottom:5px;display:block;}
.form-label span{color:var(--red-500);}
.form-control,.form-select{width:100%;padding:9px 13px;border-radius:9px;border:1.5px solid var(--slate-200);font-family:'Plus Jakarta Sans',sans-serif;font-size:.83rem;color:var(--slate-700);background:#fff;outline:none;transition:border-color .15s;}
.form-control:focus,.form-select:focus{border-color:var(--teal-400);}
textarea.form-control{resize:vertical;min-height:90px;}

.section-divider{font-size:.85rem;font-weight:800;color:var(--teal-700);padding:14px 0 10px;border-top:1px solid var(--slate-100);display:flex;align-items:center;gap:8px;margin-top:4px;}

.peserta-row{background:#f8fafc;border-radius:10px;padding:12px;margin-bottom:10px;border:1.5px solid var(--slate-200);display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;}
.poin-row-form{background:#f8fafc;border-radius:10px;padding:12px;margin-bottom:10px;border:1.5px solid var(--slate-200);display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.poin-num-badge{min-width:28px;height:28px;border-radius:8px;background:var(--teal-600);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:800;flex-shrink:0;}
.drag-handle{color:var(--slate-400);cursor:grab;font-size:1rem;flex-shrink:0;}

.btn-add-row{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:9px;border-radius:9px;border:1.5px dashed var(--teal-400);background:var(--teal-50);color:var(--teal-700);font-family:'Plus Jakarta Sans',sans-serif;font-size:.8rem;font-weight:700;cursor:pointer;transition:all .15s;margin-top:4px;}
.btn-add-row:hover{background:var(--teal-100);}
.btn-icon-sm{width:32px;height:32px;border-radius:8px;border:1.5px solid var(--slate-200);background:#fff;color:var(--slate-500);display:flex;align-items:center;justify-content:center;font-size:.8rem;cursor:pointer;transition:all .15s;flex-shrink:0;}
.btn-icon-sm:hover{border-color:#fca5a5;color:var(--red-500);background:#fff5f5;}

.form-actions{display:flex;gap:10px;margin-top:22px;}
.btn-cancel{padding:10px 24px;border-radius:50px;border:1.5px solid var(--slate-200);background:#fff;color:var(--slate-600);font-family:'Plus Jakarta Sans',sans-serif;font-size:.85rem;font-weight:700;cursor:pointer;flex:1;text-decoration:none;text-align:center;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:all .15s;}
.btn-cancel:hover{background:var(--slate-100);}
.btn-submit{padding:10px 24px;border-radius:50px;border:none;background:linear-gradient(135deg,var(--teal-600),var(--teal-500));color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-size:.85rem;font-weight:700;cursor:pointer;flex:2;box-shadow:0 4px 12px rgba(13,148,136,.28);transition:all .2s;display:inline-flex;align-items:center;justify-content:center;gap:6px;}
.btn-submit:hover{box-shadow:0 8px 20px rgba(13,148,136,.38);}

.status-bar{display:flex;gap:8px;flex-wrap:wrap;}
.status-opt{flex:1;min-width:100px;}
.status-opt input[type=radio]{display:none;}
.status-opt label{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px;border-radius:10px;border:2px solid var(--slate-200);font-size:.8rem;font-weight:700;cursor:pointer;transition:all .15s;text-align:center;}
.status-opt input[type=radio]:checked + label{border-color:var(--teal-500);background:var(--teal-50);color:var(--teal-700);}
.status-opt label:hover{border-color:var(--teal-300);}

@media(max-width:600px){.form-group{min-width:100%;flex-basis:100%;}.peserta-row,.poin-row-form{flex-direction:column;}}
</style>

<div class="nt-form-wrap">

  <!-- Header -->
  <div class="ar-page-header">
    <div class="ar-header-left">
      <h4>
        <span class="hi"><i class="bi bi-<?= isset($n) ? 'journal-check' : 'journal-plus' ?>"></i></span>
        <?= isset($n) ? 'Edit Notulen' : 'Buat Notulen Baru' ?>
      </h4>
      <div class="ar-breadcrumb">
        <a href="<?= base_url('dashboard') ?>">Dashboard</a>
        <span class="sep">/</span>
        <a href="<?= base_url('notulen') ?>">Notulen Rapat</a>
        <span class="sep">/</span>
        <span><?= isset($n) ? 'Edit' : 'Buat Baru' ?></span>
      </div>
    </div>
  </div>

  <div class="row justify-content-center">
    <div class="col-lg-9">

      <?php if (validation_errors()): ?>
      <div class="alert alert-danger d-flex gap-2 mb-3" style="border-radius:12px;">
        <i class="bi bi-exclamation-triangle-fill mt-1"></i>
        <div><?= validation_errors() ?></div>
      </div>
      <?php endif; ?>

      <form method="post" action="" id="formNotulen">

        <!-- ── Informasi Rapat ── -->
        <div class="nt-form-card">
          <div class="nt-form-card-header">
            <h5><i class="bi bi-info-circle"></i> Informasi Rapat</h5>
          </div>
          <div class="nt-form-card-body">

            <div class="form-row">
              <div class="form-group full">
                <label class="form-label">Judul Rapat <span>*</span></label>
                <input type="text" name="judul_rapat" class="form-control"
                  value="<?= set_value('judul_rapat', isset($n) ? $n->judul_rapat : '') ?>"
                  placeholder="Contoh: Rapat Evaluasi Keamanan RT 05 Juli 2025" required>
              </div>
            </div>

            <div class="form-row">
              <div class="form-group">
                <label class="form-label">Tanggal <span>*</span></label>
                <input type="date" name="tanggal" class="form-control"
                  value="<?= set_value('tanggal', isset($n) ? $n->tanggal : date('Y-m-d')) ?>" required>
              </div>
              <div class="form-group">
                <label class="form-label">Waktu Mulai</label>
                <input type="time" name="waktu_mulai" class="form-control"
                  value="<?= set_value('waktu_mulai', isset($n) ? $n->waktu_mulai : '') ?>">
              </div>
              <div class="form-group">
                <label class="form-label">Waktu Selesai</label>
                <input type="time" name="waktu_selesai" class="form-control"
                  value="<?= set_value('waktu_selesai', isset($n) ? $n->waktu_selesai : '') ?>">
              </div>
            </div>

            <div class="form-row">
              <div class="form-group">
                <label class="form-label">Tempat / Platform</label>
                <select name="tempat" class="form-select">
                  <?php
                  $tempat_list = ['Balai Warga RT','Rumah Ketua RT','Zoom Meeting','Google Meet','Microsoft Teams','WhatsApp Group','Lainnya'];
                  $current_tempat = isset($n) ? $n->tempat : '';
                  foreach ($tempat_list as $t):
                  ?>
                  <option value="<?= $t ?>" <?= ($current_tempat == $t) ? 'selected' : '' ?>><?= $t ?></option>
                  <?php endforeach; ?>
                </select>
              </div>
              <div class="form-group">
                <label class="form-label">Tim / Proyek <span>*</span></label>
                <select name="tim" class="form-select" required>
                  <?php foreach (['Keamanan','Kebersihan','Sosial','Infrastruktur','Umum'] as $t): ?>
                  <option value="<?= $t ?>" <?= (isset($n) && $n->tim == $t) ? 'selected' : '' ?>><?= $t ?></option>
                  <?php endforeach; ?>
                </select>
              </div>
            </div>

            <div class="form-row">
              <div class="form-group">
                <label class="form-label">Moderator <span>*</span></label>
                <input type="text" name="moderator" class="form-control"
                  value="<?= set_value('moderator', isset($n) ? $n->moderator : '') ?>"
                  placeholder="Nama moderator / pemimpin rapat" required>
              </div>
              <div class="form-group">
                <label class="form-label">Notulis <span>*</span></label>
                <input type="text" name="notulis" class="form-control"
                  value="<?= set_value('notulis', isset($n) ? $n->notulis : '') ?>"
                  placeholder="Nama penulis notulen" required>
              </div>
            </div>

          </div>
        </div>

        <!-- ── Daftar Hadir ── -->
        <div class="nt-form-card">
          <div class="nt-form-card-header">
            <h5><i class="bi bi-person-check"></i> Daftar Hadir</h5>
            <span style="font-size:.75rem;opacity:.8;">Tambahkan semua peserta rapat</span>
          </div>
          <div class="nt-form-card-body">
            <div id="pesertaContainer">
              <?php if (isset($peserta) && !empty($peserta)): ?>
                <?php foreach ($peserta as $p): ?>
                <div class="peserta-row">
                  <div class="form-group" style="flex:2;min-width:140px;">
                    <label class="form-label">Nama Peserta</label>
                    <input type="text" name="peserta_nama[]" class="form-control"
                      value="<?= htmlspecialchars($p->nama) ?>" placeholder="Nama lengkap">
                  </div>
                  <div class="form-group" style="flex:1;min-width:120px;">
                    <label class="form-label">Jabatan</label>
                    <input type="text" name="peserta_jabatan[]" class="form-control"
                      value="<?= htmlspecialchars($p->jabatan) ?>" placeholder="Ketua RT, Warga…">
                  </div>
                  <div class="form-group" style="flex:1;min-width:120px;">
                    <label class="form-label">Kehadiran</label>
                    <select name="peserta_kehadiran[]" class="form-select">
                      <option value="hadir"  <?= $p->kehadiran == 'hadir'  ? 'selected' : '' ?>>✅ Hadir</option>
                      <option value="tidak"  <?= $p->kehadiran == 'tidak'  ? 'selected' : '' ?>>❌ Tidak Hadir</option>
                      <option value="izin"   <?= $p->kehadiran == 'izin'   ? 'selected' : '' ?>>📝 Izin</option>
                    </select>
                  </div>
                  <button type="button" class="btn-icon-sm" onclick="hapusRow(this)" title="Hapus peserta">
                    <i class="bi bi-trash"></i>
                  </button>
                </div>
                <?php endforeach; ?>
              <?php else: ?>
              <div class="peserta-row">
                <div class="form-group" style="flex:2;min-width:140px;">
                  <label class="form-label">Nama Peserta</label>
                  <input type="text" name="peserta_nama[]" class="form-control" placeholder="Nama lengkap">
                </div>
                <div class="form-group" style="flex:1;min-width:120px;">
                  <label class="form-label">Jabatan</label>
                  <input type="text" name="peserta_jabatan[]" class="form-control" placeholder="Ketua RT, Warga…">
                </div>
                <div class="form-group" style="flex:1;min-width:120px;">
                  <label class="form-label">Kehadiran</label>
                  <select name="peserta_kehadiran[]" class="form-select">
                    <option value="hadir">✅ Hadir</option>
                    <option value="tidak">❌ Tidak Hadir</option>
                    <option value="izin">📝 Izin</option>
                  </select>
                </div>
                <button type="button" class="btn-icon-sm" onclick="hapusRow(this)" title="Hapus"><i class="bi bi-trash"></i></button>
              </div>
              <?php endif; ?>
            </div>
            <button type="button" class="btn-add-row" onclick="tambahPeserta()">
              <i class="bi bi-person-plus"></i> Tambah Peserta
            </button>
          </div>
        </div>

        <!-- ── Poin Pembahasan ── -->
        <div class="nt-form-card">
          <div class="nt-form-card-header">
            <h5><i class="bi bi-list-ol"></i> Poin Pembahasan</h5>
            <span style="font-size:.75rem;opacity:.8;">Urutkan berdasarkan prioritas pembahasan</span>
          </div>
          <div class="nt-form-card-body">
            <div id="poinContainer">
              <?php if (isset($poin) && !empty($poin)): ?>
                <?php foreach ($poin as $idx => $p): ?>
                <div class="poin-row-form">
                  <i class="bi bi-grip-vertical drag-handle"></i>
                  <div class="poin-num-badge"><?= $idx + 1 ?></div>
                  <input type="text" name="poin_teks[]" class="form-control"
                    value="<?= htmlspecialchars($p->teks) ?>"
                    placeholder="Topik / agenda pembahasan…" style="flex:2;">
                  <select name="poin_prioritas[]" class="form-select" style="max-width:135px;">
                    <option value="tinggi" <?= $p->prioritas == 'tinggi' ? 'selected' : '' ?>>🔴 Tinggi</option>
                    <option value="sedang" <?= $p->prioritas == 'sedang' ? 'selected' : '' ?>>🟡 Sedang</option>
                    <option value="rendah" <?= $p->prioritas == 'rendah' ? 'selected' : '' ?>>⚪ Rendah</option>
                  </select>
                  <button type="button" class="btn-icon-sm" onclick="hapusRow(this); renumberPoin()" title="Hapus">
                    <i class="bi bi-trash"></i>
                  </button>
                </div>
                <?php endforeach; ?>
              <?php else: ?>
              <div class="poin-row-form">
                <i class="bi bi-grip-vertical drag-handle"></i>
                <div class="poin-num-badge">1</div>
                <input type="text" name="poin_teks[]" class="form-control" placeholder="Topik / agenda pembahasan…" style="flex:2;">
                <select name="poin_prioritas[]" class="form-select" style="max-width:135px;">
                  <option value="tinggi">🔴 Tinggi</option>
                  <option value="sedang" selected>🟡 Sedang</option>
                  <option value="rendah">⚪ Rendah</option>
                </select>
                <button type="button" class="btn-icon-sm" onclick="hapusRow(this); renumberPoin()" title="Hapus"><i class="bi bi-trash"></i></button>
              </div>
              <?php endif; ?>
            </div>
            <button type="button" class="btn-add-row" onclick="tambahPoin()">
              <i class="bi bi-plus-circle"></i> Tambah Poin Pembahasan
            </button>
          </div>
        </div>

        <!-- ── Catatan & Status ── -->
        <div class="nt-form-card">
          <div class="nt-form-card-header">
            <h5><i class="bi bi-sticky"></i> Catatan & Status</h5>
          </div>
          <div class="nt-form-card-body">

            <div class="form-group full mb-3">
              <label class="form-label">Catatan / Kesimpulan Rapat</label>
              <textarea name="catatan" class="form-control" rows="4"
                placeholder="Tuliskan keputusan, tindak lanjut, atau catatan penting dari rapat..."><?= set_value('catatan', isset($n) ? $n->catatan : '') ?></textarea>
            </div>

            <label class="form-label mb-2">Status Notulen</label>
            <div class="status-bar">
              <div class="status-opt">
                <input type="radio" name="status" id="s_draft" value="draft"
                  <?= (!isset($n) || (isset($n) && $n->status == 'draft')) ? 'checked' : '' ?>>
                <label for="s_draft"><i class="bi bi-pencil-square text-secondary"></i> Draft</label>
              </div>
              <div class="status-opt">
                <input type="radio" name="status" id="s_menunggu" value="menunggu"
                  <?= (isset($n) && $n->status == 'menunggu') ? 'checked' : '' ?>>
                <label for="s_menunggu"><i class="bi bi-hourglass-split text-warning"></i> Menunggu Persetujuan</label>
              </div>
              <div class="status-opt">
                <input type="radio" name="status" id="s_final" value="final"
                  <?= (isset($n) && $n->status == 'final') ? 'checked' : '' ?>>
                <label for="s_final"><i class="bi bi-check-circle-fill text-success"></i> Final</label>
              </div>
            </div>

            <div class="form-actions">
              <a href="<?= base_url('notulen') ?>" class="btn-cancel">
                <i class="bi bi-x-circle"></i> Batal
              </a>
              <button type="submit" class="btn-submit">
                <i class="bi bi-check-circle"></i>
                <?= isset($n) ? 'Update Notulen' : 'Simpan Notulen' ?>
              </button>
            </div>

          </div>
        </div>

      </form>
    </div>
  </div>
</div>

<script>
function hapusRow(btn) {
  btn.closest('.peserta-row, .poin-row-form').remove();
  renumberPoin();
}

function tambahPeserta() {
  const c = document.getElementById('pesertaContainer');
  const div = document.createElement('div');
  div.className = 'peserta-row';
  div.innerHTML = `
    <div class="form-group" style="flex:2;min-width:140px;">
      <label class="form-label">Nama Peserta</label>
      <input type="text" name="peserta_nama[]" class="form-control" placeholder="Nama lengkap">
    </div>
    <div class="form-group" style="flex:1;min-width:120px;">
      <label class="form-label">Jabatan</label>
      <input type="text" name="peserta_jabatan[]" class="form-control" placeholder="Ketua RT, Warga…">
    </div>
    <div class="form-group" style="flex:1;min-width:120px;">
      <label class="form-label">Kehadiran</label>
      <select name="peserta_kehadiran[]" class="form-select">
        <option value="hadir">✅ Hadir</option>
        <option value="tidak">❌ Tidak Hadir</option>
        <option value="izin">📝 Izin</option>
      </select>
    </div>
    <button type="button" class="btn-icon-sm" onclick="hapusRow(this)" title="Hapus"><i class="bi bi-trash"></i></button>`;
  c.appendChild(div);
}

function tambahPoin() {
  const c = document.getElementById('poinContainer');
  const num = c.querySelectorAll('.poin-row-form').length + 1;
  const div = document.createElement('div');
  div.className = 'poin-row-form';
  div.innerHTML = `
    <i class="bi bi-grip-vertical drag-handle"></i>
    <div class="poin-num-badge">${num}</div>
    <input type="text" name="poin_teks[]" class="form-control" placeholder="Topik / agenda pembahasan…" style="flex:2;">
    <select name="poin_prioritas[]" class="form-select" style="max-width:135px;">
      <option value="tinggi">🔴 Tinggi</option>
      <option value="sedang" selected>🟡 Sedang</option>
      <option value="rendah">⚪ Rendah</option>
    </select>
    <button type="button" class="btn-icon-sm" onclick="hapusRow(this);renumberPoin()" title="Hapus"><i class="bi bi-trash"></i></button>`;
  c.appendChild(div);
}

function renumberPoin() {
  document.querySelectorAll('#poinContainer .poin-num-badge').forEach((el, i) => {
    el.textContent = i + 1;
  });
}
</script>
