<?php
// exports/cetak_kegiatan.php
// Cetak detail kegiatan ke format HTML yang bisa di-print/save PDF dari browser
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.jenis, s.kecamatan, s.kepala_sekolah, s.npsn, s.alamat
     FROM kegiatan_pendampingan k
     JOIN sekolah s ON s.id=k.sekolah_id
     WHERE k.id=?", [$id]
);
if (!$data) { die('Data tidak ditemukan.'); }

if (isSekolah() && $_SESSION['sekolah_id'] != $data['sekolah_id']) die('Akses ditolak.');

$fotos   = Database::fetchAll("SELECT * FROM foto_kegiatan WHERE kegiatan_id=? ORDER BY urutan LIMIT 6", [$id]);
$profil  = Database::fetchOne("SELECT * FROM profil_pendamping LIMIT 1");
$tanggal = formatTanggal($data['tanggal_kegiatan'], 'd F Y');
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Laporan Kegiatan — <?= e($data['nama_kegiatan']) ?></title>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
  * { box-sizing:border-box; margin:0; padding:0; }
  body { font-family:'Plus Jakarta Sans',sans-serif; font-size:11pt; color:#1a1a2e; background:#fff; }
  @page { size:A4 portrait; margin:20mm 18mm 20mm 18mm; }
  @media print { .no-print{display:none!important} body{margin:0} }

  /* Header instansi */
  .kop { display:flex; align-items:center; gap:14px; border-bottom:3px solid #1a3a6b; padding-bottom:10px; margin-bottom:14px; }
  .kop-icon { width:56px; height:56px; background:#1a3a6b; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .kop-icon svg { width:32px; height:32px; fill:#fff; }
  .kop-text h1 { font-size:14pt; font-weight:800; color:#1a3a6b; margin-bottom:2px; }
  .kop-text p  { font-size:9pt; color:#555; margin:0; }

  /* Judul laporan */
  .laporan-title { text-align:center; margin:14px 0; }
  .laporan-title h2 { font-size:13pt; font-weight:700; text-transform:uppercase; color:#1a3a6b; letter-spacing:.04em; }
  .laporan-title .underline { width:80px; height:3px; background:#c0392b; margin:6px auto; border-radius:2px; }

  /* Tabel info */
  table.info-tbl { width:100%; border-collapse:collapse; font-size:10pt; margin-bottom:12px; }
  table.info-tbl td { padding:5px 8px; vertical-align:top; border:1px solid #e0e0e0; }
  table.info-tbl td:first-child { width:32%; font-weight:600; background:#f5f8ff; color:#1a3a6b; }

  /* Section heading */
  .section-head { font-size:10pt; font-weight:700; color:#fff; background:#1a3a6b; padding:5px 10px; margin:14px 0 8px; border-radius:4px; }

  /* Narasi */
  .narasi { font-size:10.5pt; line-height:1.8; text-align:justify; padding:0 4px; }

  /* Foto grid */
  .foto-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:8px 0; }
  .foto-item { border:1px solid #e0e0e0; border-radius:6px; overflow:hidden; }
  .foto-item img { width:100%; height:110px; object-fit:cover; display:block; }
  .foto-item .ket { font-size:8pt; color:#555; text-align:center; padding:3px; }

  /* TTD -->  */
  .ttd-section { display:flex; justify-content:flex-end; margin-top:28px; }
  .ttd-box { text-align:center; font-size:10pt; }
  .ttd-box .ttd-space { height:60px; }
  .ttd-box .ttd-name { font-weight:700; border-top:1px solid #333; padding-top:4px; }

  /* Print button */
  .print-btn { position:fixed; bottom:20px; right:20px; padding:10px 20px; background:#1a3a6b; color:#fff; border:none; border-radius:8px; font-family:inherit; font-size:11pt; font-weight:600; cursor:pointer; box-shadow:0 4px 16px rgba(0,0,0,.25); z-index:999; }
  .back-btn { position:fixed; bottom:20px; right:140px; padding:10px 20px; background:#fff; color:#1a3a6b; border:2px solid #1a3a6b; border-radius:8px; font-family:inherit; font-size:11pt; font-weight:600; cursor:pointer; z-index:999; text-decoration:none; }
</style>
</head>
<body>

<div class="no-print" style="height:12px"></div>

<!-- KOP SURAT -->
<div class="kop">
  <div class="kop-icon">
    <svg viewBox="0 0 24 24"><path d="M12 3L1 9l11 6 9-4.91V17h2V9L12 3zM5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82z"/></svg>
  </div>
  <div class="kop-text">
    <h1><?= APP_INSTANSI ?></h1>
    <p>Jl. Ki Ageng Gribig No. 45, Malang, Jawa Timur &nbsp;|&nbsp; Telp. (0341) 123456</p>
  </div>
</div>

<!-- JUDUL -->
<div class="laporan-title">
  <h2>Laporan Kegiatan Pendampingan Sekolah</h2>
  <div class="underline"></div>
</div>

<!-- INFO KEGIATAN -->
<table class="info-tbl">
  <tr><td>Nama Kegiatan</td><td><?= e($data['nama_kegiatan']) ?></td></tr>
  <tr><td>Tanggal</td><td><?= $tanggal ?></td></tr>
  <tr><td>Sekolah</td><td><?= e($data['nama_sekolah']) ?> (NPSN: <?= e($data['npsn']) ?>)</td></tr>
  <tr><td>Jenis / Kecamatan</td><td><?= e($data['jenis']) ?> — Kec. <?= e($data['kecamatan']) ?></td></tr>
  <tr><td>Kepala Sekolah</td><td><?= e($data['kepala_sekolah']) ?></td></tr>
  <tr><td>Materi Pendampingan</td><td><?= nl2br(e($data['materi'])) ?></td></tr>
  <tr><td>Sasaran Kegiatan</td><td><?= e($data['sasaran']) ?></td></tr>
  <?php if($data['peserta']): ?>
  <tr><td>Jumlah Peserta</td><td><?= $data['peserta'] ?> orang</td></tr>
  <?php endif; ?>
</table>

<!-- HASIL -->
<div class="section-head">Hasil Kegiatan</div>
<p class="narasi"><?= nl2br(e($data['hasil_kegiatan'])) ?></p>

<?php if($data['narasi']): ?>
<div class="section-head">Narasi Kegiatan</div>
<p class="narasi"><?= nl2br(e($data['narasi'])) ?></p>
<?php endif; ?>

<?php if($data['tindak_lanjut']): ?>
<div class="section-head">Tindak Lanjut</div>
<p class="narasi"><?= nl2br(e($data['tindak_lanjut'])) ?></p>
<?php endif; ?>

<!-- FOTO -->
<?php if($fotos): ?>
<div class="section-head">Dokumentasi Foto</div>
<div class="foto-grid">
  <?php foreach($fotos as $foto): ?>
  <div class="foto-item">
    <img src="<?= ROOT_PATH ?>/uploads/foto_kegiatan/<?= e($foto['nama_file']) ?>" alt="">
    <?php if($foto['keterangan']): ?>
    <div class="ket"><?= e($foto['keterangan']) ?></div>
    <?php endif; ?>
  </div>
  <?php endforeach; ?>
</div>
<?php endif; ?>

<!-- TTD -->
<div class="ttd-section">
  <div class="ttd-box">
    <p>Malang, <?= $tanggal ?></p>
    <p>Pendamping Sekolah,</p>
    <div class="ttd-space"></div>
    <p class="ttd-name"><?= e($profil['nama_lengkap'] ?? 'Nama Pendamping') ?></p>
    <p style="font-size:9pt;color:#555">NIP. <?= e($profil['nip'] ?? '—') ?></p>
  </div>
</div>

<!-- Buttons -->
<div class="no-print">
  <a href="javascript:history.back()" class="back-btn">← Kembali</a>
  <button class="print-btn" onclick="window.print()">🖨 Cetak / Simpan PDF</button>
</div>

</body>
</html>
