<?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-100:#ccfbf1;--teal-50:#f0fdfa;--green-500:#10b981;--amber-500:#f59e0b;--amber-100:#fef3c7;--red-500:#ef4444;--slate-50:#f8fafc;--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-detail{font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--slate-900);}
.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);}

/* Hero header */
.detail-hero{background:linear-gradient(135deg,var(--teal-800),var(--teal-600));border-radius:16px;padding:24px;color:#fff;margin-bottom:20px;}
.detail-hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px;}
.detail-hero h2{font-size:1.2rem;font-weight:800;margin:0 0 6px;}
.detail-hero .subtitle{font-size:.82rem;opacity:.8;}
.hero-badges{display:flex;gap:8px;flex-wrap:wrap;}
.badge{padding:4px 12px;border-radius:20px;font-size:.72rem;font-weight:700;display:inline-flex;align-items:center;gap:5px;}
.badge-white{background:rgba(255,255,255,.2);color:#fff;}
.badge-draft{background:rgba(255,255,255,.15);color:#fff;}
.badge-menunggu{background:#fef3c7;color:#92400e;}
.badge-final{background:#dcfce7;color:#166534;}
.hero-meta{display:flex;flex-wrap:wrap;gap:16px;}
.hero-meta-item{display:flex;align-items:center;gap:7px;font-size:.8rem;opacity:.85;}

/* Section cards */
.section-card{background:#fff;border-radius:14px;border:1.5px solid var(--slate-200);box-shadow:var(--card-shadow);overflow:hidden;margin-bottom:18px;}
.section-card-header{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:linear-gradient(90deg,var(--teal-50),#fff);border-bottom:1px solid var(--teal-100);}
.section-card-header .title{font-size:.88rem;font-weight:800;color:var(--teal-800);display:flex;align-items:center;gap:8px;}
.section-card-body{padding:18px;}

/* Info grid */
.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.info-item{display:flex;align-items:flex-start;gap:10px;}
.info-item i{color:var(--teal-600);width:18px;margin-top:3px;flex-shrink:0;}
.info-item .info-label{font-size:.72rem;color:var(--slate-400);margin-bottom:2px;}
.info-item .info-value{font-size:.84rem;font-weight:700;color:var(--slate-700);}

/* Peserta table */
.peserta-table{width:100%;border-collapse:collapse;}
.peserta-table th{background:var(--teal-50);color:var(--teal-800);font-size:.75rem;font-weight:700;padding:9px 14px;text-align:left;border-bottom:2px solid var(--teal-100);}
.peserta-table td{padding:10px 14px;font-size:.83rem;border-bottom:1px solid var(--slate-100);vertical-align:middle;}
.peserta-table tr:last-child td{border-bottom:none;}
.peserta-table tr:hover td{background:var(--slate-50);}
.avatar-circle{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:800;color:#fff;flex-shrink:0;}
.hadir-badge{padding:3px 10px;border-radius:20px;font-size:.7rem;font-weight:700;}
.hadir-hadir{background:#dcfce7;color:#166534;}
.hadir-tidak{background:#fee2e2;color:#991b1b;}
.hadir-izin{background:#fef3c7;color:#92400e;}

/* Poin list */
.poin-item{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:10px;border:1.5px solid var(--slate-200);background:var(--slate-50);margin-bottom:10px;transition:all .15s;}
.poin-item:last-child{margin-bottom:0;}
.poin-item:hover{border-color:var(--teal-200);background:var(--teal-50);}
.poin-num{min-width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:800;color:#fff;flex-shrink:0;}
.pn-tinggi{background:#dc2626;}
.pn-sedang{background:var(--amber-500);}
.pn-rendah{background:var(--slate-400);}
.poin-text{flex:1;font-size:.85rem;font-weight:600;color:var(--slate-700);line-height:1.5;}
.prio-badge{padding:3px 10px;border-radius:20px;font-size:.7rem;font-weight:700;flex-shrink:0;}
.prio-tinggi{background:#fee2e2;color:#991b1b;}
.prio-sedang{background:var(--amber-100);color:#92400e;}
.prio-rendah{background:var(--slate-100);color:var(--slate-600);}

/* catatan box */
.catatan-box{background:var(--teal-50);border:1.5px solid var(--teal-100);border-radius:10px;padding:16px;font-size:.85rem;color:var(--slate-700);line-height:1.7;}

/* action buttons */
.btn-action{display:inline-flex;align-items:center;gap:7px;padding:10px 20px;border-radius:50px;font-family:'Plus Jakarta Sans',sans-serif;font-size:.84rem;font-weight:700;text-decoration:none;cursor:pointer;transition:all .2s;}
.btn-teal{background:linear-gradient(135deg,var(--teal-600),var(--teal-500));color:#fff;border:none;box-shadow:0 4px 12px rgba(13,148,136,.28);}
.btn-teal:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(13,148,136,.38);color:#fff;}
.btn-outline-s{background:#fff;color:var(--slate-600);border:1.5px solid var(--slate-200);}
.btn-outline-s:hover{background:var(--slate-100);color:var(--slate-800);}
.btn-warning-s{background:var(--amber-100);color:#92400e;border:1px solid #fde68a;}
.btn-warning-s:hover{background:#fde68a;}
.btn-danger-s{background:#fee2e2;color:#991b1b;border:1px solid #fecaca;}
.btn-danger-s:hover{background:#fecaca;}
.btn-print{background:var(--teal-50);color:var(--teal-700);border:1.5px solid var(--teal-100);}
.btn-print:hover{background:var(--teal-100);color:var(--teal-800);}

/* status badge dropdown */
.status-changer{display:flex;align-items:center;gap:8px;}
.status-select{padding:5px 12px;border-radius:20px;border:1.5px solid var(--slate-200);font-family:'Plus Jakarta Sans',sans-serif;font-size:.75rem;font-weight:700;cursor:pointer;outline:none;background:#fff;}

.hadir-summary{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.hadir-count{display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:20px;font-size:.77rem;font-weight:700;}
.hc-hadir{background:#dcfce7;color:#166534;}
.hc-tidak{background:#fee2e2;color:#991b1b;}
.hc-izin{background:var(--amber-100);color:#92400e;}
</style>

<div class="nt-detail">

  <!-- Page Header -->
  <div class="ar-page-header">
    <div class="ar-header-left">
      <h4>
        <span class="hi"><i class="bi bi-journal-check"></i></span>
        Detail Notulen
      </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>Detail</span>
      </div>
    </div>
    <div class="d-flex gap-2 flex-wrap">
      <!-- TOMBOL CETAK — menggantikan Export PDF -->
      <a href="<?= base_url('notulen/cetak/' . $n->id) ?>" class="btn-action btn-print" target="_blank">
        <i class="bi bi-printer"></i> Cetak
      </a>
      <?php if (!is_warga()): ?>
      <a href="<?= base_url('notulen/edit/' . $n->id) ?>" class="btn-action btn-teal">
        <i class="bi bi-pencil"></i> Edit
      </a>
      <?php endif; ?>
    </div>
  </div>

  <!-- Hero Banner -->
  <div class="detail-hero">
    <div class="detail-hero-top">
      <div style="flex:1;min-width:0;">
        <div class="hero-badges mb-2">
          <span class="badge badge-white"><?= htmlspecialchars($n->tim) ?></span>
          <?php if ($n->status === 'draft'): ?>
            <span class="badge badge-draft"><i class="bi bi-pencil-square"></i> Draft</span>
          <?php elseif ($n->status === 'menunggu'): ?>
            <span class="badge badge-menunggu"><i class="bi bi-hourglass-split"></i> Menunggu Persetujuan</span>
          <?php else: ?>
            <span class="badge badge-final"><i class="bi bi-check-circle-fill"></i> Final</span>
          <?php endif; ?>
        </div>
        <h2><?= htmlspecialchars($n->judul_rapat) ?></h2>
        <div class="subtitle">Moderator: <?= htmlspecialchars($n->moderator) ?> &nbsp;•&nbsp; Notulis: <?= htmlspecialchars($n->notulis) ?></div>
      </div>
      <?php if (!is_warga()): ?>
      <div class="dropdown">
        <button class="btn btn-sm" style="background:rgba(255,255,255,.2);color:#fff;border:none;border-radius:9px;padding:8px 12px;" data-bs-toggle="dropdown">
          <i class="bi bi-three-dots-vertical"></i>
        </button>
        <ul class="dropdown-menu dropdown-menu-end">
          <li><a class="dropdown-item" href="<?= base_url('notulen/edit/' . $n->id) ?>"><i class="bi bi-pencil me-2 text-primary"></i>Edit Notulen</a></li>
          <!-- DROPDOWN CETAK — menggantikan Export PDF -->
          <li><a class="dropdown-item" href="<?= base_url('notulen/cetak/' . $n->id) ?>" target="_blank"><i class="bi bi-printer me-2 text-success"></i>Cetak Notulen</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item text-danger" href="<?= base_url('notulen/hapus/' . $n->id) ?>" onclick="return confirm('Yakin hapus notulen ini?')"><i class="bi bi-trash me-2"></i>Hapus Notulen</a></li>
        </ul>
      </div>
      <?php endif; ?>
    </div>
    <div class="hero-meta">
      <div class="hero-meta-item"><i class="bi bi-calendar3"></i>
        <?= date('l, d F Y', strtotime($n->tanggal)) ?>
      </div>
      <div class="hero-meta-item"><i class="bi bi-clock"></i>
        <?= $n->waktu_mulai ? date('H:i', strtotime($n->waktu_mulai)) : '-' ?>
        <?= $n->waktu_selesai ? ' – ' . date('H:i', strtotime($n->waktu_selesai)) : '' ?>
      </div>
      <div class="hero-meta-item"><i class="bi bi-geo-alt"></i>
        <?= htmlspecialchars($n->tempat) ?>
      </div>
      <div class="hero-meta-item"><i class="bi bi-people"></i>
        <?= count(array_filter($peserta, fn($p) => $p->kehadiran === 'hadir')) ?>/<?= count($peserta) ?> hadir
      </div>
    </div>
  </div>

  <div class="row">

    <!-- Kiri: Info + Catatan -->
    <div class="col-lg-4">
      <div class="section-card">
        <div class="section-card-header">
          <div class="title"><i class="bi bi-info-circle"></i> Info Rapat</div>
        </div>
        <div class="section-card-body">
          <div class="info-grid">
            <div class="info-item">
              <i class="bi bi-tag"></i>
              <div>
                <div class="info-label">Tim / Proyek</div>
                <div class="info-value"><?= htmlspecialchars($n->tim) ?></div>
              </div>
            </div>
            <div class="info-item">
              <i class="bi bi-calendar3"></i>
              <div>
                <div class="info-label">Tanggal</div>
                <div class="info-value"><?= date('d M Y', strtotime($n->tanggal)) ?></div>
              </div>
            </div>
            <div class="info-item">
              <i class="bi bi-clock"></i>
              <div>
                <div class="info-label">Waktu</div>
                <div class="info-value">
                  <?= $n->waktu_mulai ? date('H:i', strtotime($n->waktu_mulai)) : '-' ?>
                  <?= $n->waktu_selesai ? '–' . date('H:i', strtotime($n->waktu_selesai)) : '' ?>
                </div>
              </div>
            </div>
            <div class="info-item">
              <i class="bi bi-geo-alt"></i>
              <div>
                <div class="info-label">Tempat</div>
                <div class="info-value"><?= htmlspecialchars($n->tempat) ?></div>
              </div>
            </div>
            <div class="info-item">
              <i class="bi bi-person-workspace"></i>
              <div>
                <div class="info-label">Moderator</div>
                <div class="info-value"><?= htmlspecialchars($n->moderator) ?></div>
              </div>
            </div>
            <div class="info-item">
              <i class="bi bi-journal-text"></i>
              <div>
                <div class="info-label">Notulis</div>
                <div class="info-value"><?= htmlspecialchars($n->notulis) ?></div>
              </div>
            </div>
          </div>

          <?php if (!is_warga()): ?>
          <div class="mt-3 pt-3" style="border-top:1px solid var(--slate-100);">
            <div style="font-size:.75rem;font-weight:700;color:var(--slate-500);margin-bottom:8px;">Ubah Status</div>
            <div class="d-flex gap-2 align-items-center">
              <select id="statusSelect" class="status-select flex-fill" onchange="updateStatus(<?= $n->id ?>)">
                <option value="draft"    <?= $n->status == 'draft'    ? 'selected' : '' ?>>📝 Draft</option>
                <option value="menunggu" <?= $n->status == 'menunggu' ? 'selected' : '' ?>>⏳ Menunggu</option>
                <option value="final"    <?= $n->status == 'final'    ? 'selected' : '' ?>>✅ Final</option>
              </select>
              <span id="statusMsg" style="font-size:.72rem;color:var(--teal-600);display:none;"><i class="bi bi-check-circle"></i> Tersimpan</span>
            </div>
          </div>
          <?php endif; ?>

        </div>
      </div>

      <?php if ($n->catatan): ?>
      <div class="section-card">
        <div class="section-card-header">
          <div class="title"><i class="bi bi-sticky"></i> Catatan & Kesimpulan</div>
        </div>
        <div class="section-card-body">
          <div class="catatan-box"><?= nl2br(htmlspecialchars($n->catatan)) ?></div>
        </div>
      </div>
      <?php endif; ?>
    </div>

    <!-- Kanan: Peserta + Poin -->
    <div class="col-lg-8">

      <!-- Daftar Hadir -->
      <div class="section-card">
        <div class="section-card-header">
          <div class="title"><i class="bi bi-person-check"></i> Daftar Hadir</div>
          <div>
            <?php
            $jml_hadir = count(array_filter($peserta, fn($p) => $p->kehadiran === 'hadir'));
            $jml_tidak = count(array_filter($peserta, fn($p) => $p->kehadiran === 'tidak'));
            $jml_izin  = count(array_filter($peserta, fn($p) => $p->kehadiran === 'izin'));
            ?>
            <span class="badge" style="background:#dcfce7;color:#166534;">✅ <?= $jml_hadir ?> hadir</span>
            <?php if ($jml_tidak): ?>
            <span class="badge" style="background:#fee2e2;color:#991b1b;">❌ <?= $jml_tidak ?> tidak</span>
            <?php endif; ?>
            <?php if ($jml_izin): ?>
            <span class="badge" style="background:var(--amber-100);color:#92400e;">📝 <?= $jml_izin ?> izin</span>
            <?php endif; ?>
          </div>
        </div>
        <div class="section-card-body" style="padding:0;">
          <?php if (!empty($peserta)): ?>
          <table class="peserta-table">
            <thead>
              <tr>
                <th style="width:44px;">#</th>
                <th>Nama</th>
                <th>Jabatan</th>
                <th>Kehadiran</th>
              </tr>
            </thead>
            <tbody>
              <?php
              $av_colors = ['#0d9488','#3b82f6','#f59e0b','#10b981','#8b5cf6','#ef4444'];
              foreach ($peserta as $idx => $p):
               $initials = implode('', array_map(
    fn($w) => !empty($w) ? strtoupper($w[0]) : '',
    array_slice(explode(' ', trim($p->nama)), 0, 2)
));
if (empty($initials)) $initials = '?';
              ?>
              <tr>
                <td>
                  <div class="avatar-circle" style="background:<?= $av_colors[$idx % count($av_colors)] ?>">
                    <?= htmlspecialchars($initials) ?>
                  </div>
                </td>
                <td><strong><?= htmlspecialchars($p->nama) ?></strong></td>
                <td style="color:var(--slate-500);"><?= htmlspecialchars($p->jabatan) ?></td>
                <td>
                  <?php if ($p->kehadiran === 'hadir'): ?>
                    <span class="hadir-badge hadir-hadir">✅ Hadir</span>
                  <?php elseif ($p->kehadiran === 'tidak'): ?>
                    <span class="hadir-badge hadir-tidak">❌ Tidak Hadir</span>
                  <?php else: ?>
                    <span class="hadir-badge hadir-izin">📝 Izin</span>
                  <?php endif; ?>
                </td>
              </tr>
              <?php endforeach; ?>
            </tbody>
          </table>
          <?php else: ?>
          <div class="text-center py-4 text-muted">
            <i class="bi bi-people fs-2 d-block mb-2 opacity-50"></i>
            <small>Belum ada peserta yang dicatat</small>
          </div>
          <?php endif; ?>
        </div>
      </div>

      <!-- Poin Pembahasan -->
      <div class="section-card">
        <div class="section-card-header">
          <div class="title"><i class="bi bi-list-ol"></i> Poin Pembahasan</div>
          <span class="badge" style="background:var(--teal-100);color:var(--teal-800);"><?= count($poin) ?> poin</span>
        </div>
        <div class="section-card-body">
          <?php if (!empty($poin)): ?>
            <?php foreach ($poin as $idx => $p):
              $pn_cls = 'pn-' . $p->prioritas;
              $pr_cls = 'prio-' . $p->prioritas;
              $pr_label = $p->prioritas === 'tinggi' ? '🔴 Tinggi' : ($p->prioritas === 'sedang' ? '🟡 Sedang' : '⚪ Rendah');
            ?>
            <div class="poin-item">
              <div class="poin-num <?= $pn_cls ?>"><?= $idx + 1 ?></div>
              <div class="poin-text"><?= htmlspecialchars($p->teks) ?></div>
              <span class="prio-badge <?= $pr_cls ?>"><?= $pr_label ?></span>
            </div>
            <?php endforeach; ?>
          <?php else: ?>
          <div class="text-center py-4 text-muted">
            <i class="bi bi-list-ul fs-2 d-block mb-2 opacity-50"></i>
            <small>Belum ada poin pembahasan</small>
          </div>
          <?php endif; ?>
        </div>
      </div>

    </div>
  </div>

  <!-- Bottom actions -->
  <div class="d-flex flex-wrap gap-2 mt-2 mb-4">
    <a href="<?= base_url('notulen') ?>" class="btn-action btn-outline-s">
      <i class="bi bi-arrow-left"></i> Kembali
    </a>
    <?php if (!is_warga()): ?>
    <a href="<?= base_url('notulen/edit/' . $n->id) ?>" class="btn-action btn-warning-s">
      <i class="bi bi-pencil"></i> Edit Notulen
    </a>
    <?php endif; ?>
    <!-- TOMBOL CETAK BAWAH — menggantikan Download PDF -->
    <a href="<?= base_url('notulen/cetak/' . $n->id) ?>" class="btn-action btn-print" target="_blank">
      <i class="bi bi-printer"></i> Cetak / PDF
    </a>
  </div>

</div>

<script>
function updateStatus(id) {
  const status = document.getElementById('statusSelect').value;
  fetch('<?= base_url("notulen/update_status/") ?>' + id, {
    method: 'POST',
    headers: {'Content-Type': 'application/x-www-form-urlencoded', 'X-Requested-With': 'XMLHttpRequest'},
    body: 'status=' + encodeURIComponent(status) + '&<?= $this->security->get_csrf_token_name() ?>=<?= $this->security->get_csrf_hash() ?>'
  })
  .then(r => r.json())
  .then(data => {
    if (data.success) {
      const msg = document.getElementById('statusMsg');
      msg.style.display = 'inline';
      setTimeout(() => msg.style.display = 'none', 2500);
    }
  });
}
</script>