<?php
require_once '../../config/config.php';
require_once '../../config/database.php';
require_once '../../core/helpers.php';
requireLogin();

$id   = (int)($_GET['id'] ?? 0);
$data = Database::fetchOne(
    "SELECT k.*, s.nama_sekolah, s.kecamatan, s.kepala_sekolah, s.jenis
     FROM kegiatan_pendampingan k
     JOIN sekolah s ON s.id=k.sekolah_id
     WHERE k.id=?", [$id]
);
if (!$data) { setFlash('error','Kegiatan tidak ditemukan.'); redirect(BASE_URL.'/modules/kegiatan/index.php'); }

// Akses kontrol sekolah
if (isSekolah() && $_SESSION['sekolah_id'] != $data['sekolah_id']) {
    setFlash('error','Anda tidak memiliki akses ke data ini.');
    redirect(BASE_URL.'/modules/kegiatan/index.php');
}

$fotoList = Database::fetchAll("SELECT * FROM foto_kegiatan WHERE kegiatan_id=? ORDER BY urutan", [$id]);
$fileList = Database::fetchAll("SELECT * FROM file_laporan WHERE kegiatan_id=? ORDER BY created_at", [$id]);

$pageTitle  = 'Detail Kegiatan';
$activePage = 'kegiatan';
require_once ROOT_PATH . '/views/layouts/header.php';
?>

<div class="page-header">
  <div class="page-header-title">
    <h1><i class="bi bi-journal-richtext me-2 text-primary"></i>Detail Kegiatan</h1>
    <nav><ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="<?= BASE_URL ?>/modules/dashboard/index.php">Dashboard</a></li>
      <li class="breadcrumb-item"><a href="<?= BASE_URL ?>/modules/kegiatan/index.php">Kegiatan</a></li>
      <li class="breadcrumb-item active">Detail</li>
    </ol></nav>
  </div>
  <div class="d-flex gap-2">
    <?php if(isAdmin()): ?>
    <a href="form.php?id=<?= $id ?>" class="btn btn-outline-warning btn-sm"><i class="bi bi-pencil me-1"></i>Edit</a>
    <?php endif; ?>
    <a href="<?= BASE_URL ?>/exports/cetak_kegiatan.php?id=<?= $id ?>" class="btn btn-outline-danger btn-sm" target="_blank">
      <i class="bi bi-printer me-1"></i>Cetak PDF
    </a>
  </div>
</div>

<div class="row g-3">
  <!-- Detail utama -->
  <div class="col-lg-8">
    <div class="card mb-3">
      <div class="card-header">
        <span class="card-header-title"><i class="bi bi-info-circle me-2"></i>Informasi Kegiatan</span>
        <?php $sc=['Draft'=>'secondary','Terkirim'=>'info','Disetujui'=>'success'][$data['status']]??'secondary'; ?>
        <span class="badge bg-<?= $sc ?>-subtle text-<?= $sc ?>"><?= e($data['status']) ?></span>
      </div>
      <div class="card-body">
        <div class="row g-3">
          <div class="col-sm-6">
            <div class="text-muted fs-tiny fw-700 text-uppercase mb-1">Nama Kegiatan</div>
            <div class="fw-600"><?= e($data['nama_kegiatan']) ?></div>
          </div>
          <div class="col-sm-6">
            <div class="text-muted fs-tiny fw-700 text-uppercase mb-1">Tanggal</div>
            <div><?= formatTanggal($data['tanggal_kegiatan'], 'd F Y') ?></div>
          </div>
          <div class="col-sm-6">
            <div class="text-muted fs-tiny fw-700 text-uppercase mb-1">Sekolah</div>
            <div class="fw-600"><?= e($data['nama_sekolah']) ?></div>
            <div class="text-muted small"><?= e($data['jenis']) ?> — Kec. <?= e($data['kecamatan']) ?></div>
          </div>
          <div class="col-sm-6">
            <div class="text-muted fs-tiny fw-700 text-uppercase mb-1">Kepala Sekolah</div>
            <div><?= e($data['kepala_sekolah']) ?></div>
          </div>
          <div class="col-sm-6">
            <div class="text-muted fs-tiny fw-700 text-uppercase mb-1">Sasaran</div>
            <div><?= e($data['sasaran']) ?></div>
          </div>
          <div class="col-sm-6">
            <div class="text-muted fs-tiny fw-700 text-uppercase mb-1">Jumlah Peserta</div>
            <div><?= $data['peserta'] ? $data['peserta'] . ' orang' : '—' ?></div>
          </div>
          <div class="col-12">
            <div class="text-muted fs-tiny fw-700 text-uppercase mb-1">Materi Pendampingan</div>
            <div class="p-3 bg-light rounded" style="font-size:.875rem"><?= nl2br(e($data['materi'])) ?></div>
          </div>
          <div class="col-12">
            <div class="text-muted fs-tiny fw-700 text-uppercase mb-1">Hasil Kegiatan</div>
            <div class="p-3 bg-light rounded" style="font-size:.875rem"><?= nl2br(e($data['hasil_kegiatan'])) ?></div>
          </div>
          <?php if($data['tindak_lanjut']): ?>
          <div class="col-12">
            <div class="text-muted fs-tiny fw-700 text-uppercase mb-1">Tindak Lanjut</div>
            <div class="p-3 bg-light rounded" style="font-size:.875rem"><?= nl2br(e($data['tindak_lanjut'])) ?></div>
          </div>
          <?php endif; ?>
          <?php if($data['narasi']): ?>
          <div class="col-12">
            <div class="text-muted fs-tiny fw-700 text-uppercase mb-1">Narasi Kegiatan</div>
            <div class="p-3 bg-light rounded" style="font-size:.875rem;line-height:1.8"><?= nl2br(e($data['narasi'])) ?></div>
          </div>
          <?php endif; ?>
        </div>
      </div>
    </div>

    <!-- Foto Kegiatan -->
    <?php if($fotoList): ?>
    <div class="card mb-3">
      <div class="card-header"><span class="card-header-title"><i class="bi bi-images me-2"></i>Dokumentasi Foto (<?= count($fotoList) ?>)</span></div>
      <div class="card-body">
        <div class="foto-grid">
          <?php foreach($fotoList as $foto): ?>
          <div class="foto-item">
            <img src="<?= BASE_URL ?>/uploads/foto_kegiatan/<?= e($foto['nama_file']) ?>" alt="<?= e($foto['keterangan']) ?>"
                 data-bs-toggle="modal" data-bs-target="#fotoModal"
                 data-src="<?= BASE_URL ?>/uploads/foto_kegiatan/<?= e($foto['nama_file']) ?>"
                 data-caption="<?= e($foto['keterangan']) ?>"
                 style="cursor:zoom-in">
            <?php if($foto['keterangan']): ?>
            <div class="foto-item-overlay">
              <span class="text-white text-center px-2" style="font-size:.75rem"><?= e($foto['keterangan']) ?></span>
            </div>
            <?php endif; ?>
          </div>
          <?php endforeach; ?>
        </div>
      </div>
    </div>
    <?php endif; ?>
  </div>

  <!-- Sidebar: File -->
  <div class="col-lg-4">
    <?php if($fileList): ?>
    <div class="card mb-3">
      <div class="card-header"><span class="card-header-title"><i class="bi bi-files me-2"></i>File Laporan</span></div>
      <div class="list-group list-group-flush">
        <?php foreach($fileList as $fl): ?>
        <div class="list-group-item border-0">
          <div class="d-flex align-items-center gap-2">
            <i class="bi bi-file-pdf text-danger fs-4"></i>
            <div class="flex-1 min-w-0">
              <div class="fw-600 text-truncate" style="font-size:.83rem"><?= e($fl['nama_asli']) ?></div>
              <div class="text-muted" style="font-size:.73rem"><?= formatBytes($fl['ukuran'] ?? 0) ?> • <?= formatTanggal($fl['created_at']) ?></div>
            </div>
            <a href="<?= BASE_URL ?>/uploads/dokumen/<?= e($fl['nama_file']) ?>" target="_blank" class="btn btn-sm btn-outline-primary flex-shrink-0">
              <i class="bi bi-download"></i>
            </a>
          </div>
        </div>
        <?php endforeach; ?>
      </div>
    </div>
    <?php endif; ?>

    <div class="card">
      <div class="card-header"><span class="card-header-title"><i class="bi bi-clock-history me-2"></i>Informasi</span></div>
      <div class="card-body" style="font-size:.83rem">
        <div class="mb-2"><span class="text-muted">Dibuat:</span> <?= formatTanggal($data['created_at'],'d M Y H:i') ?></div>
        <div><span class="text-muted">Diperbarui:</span> <?= formatTanggal($data['updated_at'],'d M Y H:i') ?></div>
      </div>
    </div>
  </div>
</div>

<!-- Foto Modal -->
<div class="modal fade" id="fotoModal" tabindex="-1">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content border-0">
      <div class="modal-header border-0 pb-0">
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body p-0 text-center">
        <img id="fotoModalImg" src="" class="img-fluid rounded" alt="">
        <p id="fotoModalCaption" class="text-muted p-3 mb-0"></p>
      </div>
    </div>
  </div>
</div>

<?php
$extraJs = <<<JS
<script>
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('[data-bs-target="#fotoModal"]').forEach(img => {
    img.addEventListener('click', function() {
      document.getElementById('fotoModalImg').src = this.dataset.src;
      document.getElementById('fotoModalCaption').textContent = this.dataset.caption;
    });
  });
});
</script>
JS;
require_once ROOT_PATH . '/views/layouts/footer.php';
?>
