<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Surat Keterangan Pindah/Keluar - <?= e($siswa['nama']) ?></title>
  <style>
    /* ===== PRINT STYLES ===== */
    @media print {
      .no-print { display: none !important; }
      body { margin: 0; padding: 0; }
      .surat { box-shadow: none !important; margin: 0 !important; }
    }

    /* ===== SCREEN STYLES ===== */
    * { box-sizing: border-box; }

    body {
      font-family: 'Times New Roman', Times, serif;
      font-size: 12pt;
      background: #e8e8e8;
      margin: 0;
      padding: 20px 0;
      color: #000;
    }

    /* Toolbar aksi */
    .toolbar {
      width: 21cm;
      margin: 0 auto 15px auto;
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
    }

    .btn-aksi {
      padding: 8px 18px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 13px;
      font-family: Arial, sans-serif;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .btn-cetak  { background: #0d6efd; color: #fff; }
    .btn-cetak:hover  { background: #0b5ed7; }
    .btn-kembali { background: #6c757d; color: #fff; }
    .btn-kembali:hover { background: #5c636a; }

    /* Form nomor surat */
    .form-nomor {
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: Arial, sans-serif;
      font-size: 13px;
      flex-wrap: wrap;
    }
    .form-nomor label { font-weight: bold; white-space: nowrap; }
    .form-nomor input {
      border: 1px solid #aaa;
      border-radius: 4px;
      padding: 5px 10px;
      font-size: 13px;
      width: 320px;
    }

    /* ===== SURAT ===== */
    .surat {
      width: 21cm;
      min-height: 29.7cm;
      margin: 0 auto;
      padding: 2cm 2.5cm 2cm 3cm;
      background: #fff;
      box-shadow: 0 2px 12px rgba(0,0,0,.18);
    }

    /* Kop surat */
    .kop {
      display: flex;
      align-items: center;
      gap: 18px;
      border-bottom: 3px double #000;
      padding-bottom: 10px;
      margin-bottom: 20px;
    }
    .kop-logo img {
      width: 70px;
      height: 70px;
      object-fit: contain;
    }
    .kop-logo-placeholder {
      width: 70px;
      height: 70px;
      border: 2px solid #000;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 9pt;
      text-align: center;
      color: #555;
    }
    .kop-teks {
      flex: 1;
      text-align: center;
    }
    .kop-teks .instansi {
      font-size: 10pt;
      font-weight: normal;
      margin: 0;
    }
    .kop-teks .nama-sekolah {
      font-size: 16pt;
      font-weight: bold;
      margin: 2px 0;
      text-transform: uppercase;
    }
    .kop-teks .alamat-sekolah {
      font-size: 9pt;
      margin: 0;
    }

    /* Judul surat */
    .judul-surat {
      text-align: center;
      margin: 25px 0 5px 0;
    }
    .judul-surat h2 {
      font-size: 14pt;
      font-weight: bold;
      text-decoration: underline;
      text-transform: uppercase;
      margin: 0;
      letter-spacing: 1px;
    }
    .nomor-surat {
      text-align: center;
      font-size: 11pt;
      margin-bottom: 20px;
    }
    /* Nomor surat yang bisa diedit (tampil di layar) */
    .nomor-display { display: inline; }
    .nomor-input-wrap { display: none; }

    /* Isi surat */
    .pembuka {
      text-align: justify;
      line-height: 1.8;
      margin-bottom: 15px;
    }

    .data-siswa {
      margin: 0 0 20px 1.5cm;
    }
    .data-row {
      display: flex;
      margin-bottom: 4px;
      line-height: 1.7;
    }
    .data-label {
      width: 5.5cm;
      flex-shrink: 0;
    }
    .data-sep {
      width: 0.5cm;
      flex-shrink: 0;
    }
    .data-value {
      flex: 1;
    }

    .penutup {
      text-align: justify;
      line-height: 1.8;
      margin-bottom: 30px;
    }

    /* Tanda tangan */
    .ttd-wrap {
      display: flex;
      justify-content: flex-end;
    }
    .ttd {
      text-align: center;
      width: 7cm;
    }
    .ttd .kota-tanggal {
      margin-bottom: 5px;
    }
    .ttd .jabatan {
      margin-bottom: 5px;
    }
    .ttd .ruang-ttd {
      height: 2.5cm;
    }
    .ttd .nama-kepsek {
      font-weight: bold;
      text-decoration: underline;
      text-transform: uppercase;
    }
    .ttd .nip-kepsek {
      font-size: 10pt;
    }

    /* Catatan */
    .catatan {
      margin-top: 25px;
      border-top: 1px solid #000;
      padding-top: 8px;
      font-size: 10pt;
      font-style: italic;
      line-height: 1.6;
    }
    .catatan strong {
      font-style: normal;
    }
  </style>
</head>
<body>

<?php
/* ===== Helper: format tanggal Indonesia ===== */
function formatTglIndonesia($tgl) {
    if (empty($tgl)) return '-';
    $bulanNama = ['','Januari','Februari','Maret','April','Mei','Juni',
                  'Juli','Agustus','September','Oktober','November','Desember'];
    $ts = strtotime($tgl);
    if (!$ts) return $tgl;
    return date('d', $ts) . ' ' . $bulanNama[(int)date('n', $ts)] . ' ' . date('Y', $ts);
}

/* ===== Data sekolah ===== */
$namaSekolah   = $sekolah['nama_sekolah']  ?? 'Nama Sekolah';
$alamatSekolah = $sekolah['alamat']        ?? '';
$teleponSekolah= $sekolah['telepon']       ?? '';
$kepsek        = $sekolah['kepala_sekolah']?? '';
$nipKepsek     = $sekolah['nip_kepala']    ?? '';
$logoSekolah   = $sekolah['logo']          ?? '';
$npsn          = $sekolah['npsn']          ?? '';

/* ===== Kota — hardcode sesuai lokasi sekolah ===== */
$kotaSekolah = 'Ramban Kulon';

/* ===== Tanggal hari ini ===== */
$bulanNama = ['','Januari','Februari','Maret','April','Mei','Juni',
              'Juli','Agustus','September','Oktober','November','Desember'];
$hariIni = date('d') . ' ' . $bulanNama[(int)date('n')] . ' ' . date('Y');

/* ===== Data siswa ===== */
$namaSiswa   = strtoupper($siswa['nama'] ?? '');
$nisSiswa    = $siswa['nis']  ?? '-';
$nisnSiswa   = $siswa['nisn'] ?? '-';
$kelasSiswa  = $siswa['nama_kelas'] ?? '-';
$jkSiswa     = ($siswa['jenis_kelamin'] === 'Laki-laki') ? 'Laki-Laki' : 'Perempuan';
$tempatLahir = $siswa['tempat_lahir'] ?? '';
$tglLahir    = formatTglIndonesia($siswa['tanggal_lahir'] ?? '');
$ttlSiswa    = ($tempatLahir ? $tempatLahir . ', ' : '') . $tglLahir;
?>

<!-- ===== TOOLBAR (no-print) ===== -->
<div class="toolbar no-print">
  <a href="<?= BASE_URL ?>/index.php?page=siswa_detail&id=<?= $siswa['id'] ?>"
     class="btn-aksi btn-kembali">
    &#8592; Kembali
  </a>

  <div class="form-nomor">
    <label for="inputNomor">Nomor Surat:</label>
    <input type="text" id="inputNomor" value="<?= e($nomorSurat) ?>"
           placeholder="Nomor surat..."
           oninput="document.getElementById('nomorDisplay').textContent = this.value">
  </div>

  <button class="btn-aksi btn-cetak" onclick="window.print()">
    &#128438; Cetak Surat
  </button>
</div>

<!-- ===== SURAT ===== -->
<div class="surat">

  <!-- KOP SURAT -->
  <div class="kop">
    <div class="kop-logo">
      <?php if (!empty($logoSekolah)): ?>
        <img src="<?= BASE_URL ?>/uploads/<?= e($logoSekolah) ?>" alt="Logo Sekolah">
      <?php else: ?>
        <div class="kop-logo-placeholder">LOGO<br>SEKOLAH</div>
      <?php endif; ?>
    </div>
    <div class="kop-teks">
      <p class="instansi">YAYASAN PENDIDIKAN PESANTREN DARUL FALAH RAMBAN KULON</p>
      <p class="nama-sekolah"><?= e($namaSekolah) ?></p>
      <p class="alamat-sekolah">
        <?= e($alamatSekolah) ?>
        <?= $teleponSekolah ? ' &nbsp;Telp. ' . e($teleponSekolah) : '' ?>
        <?= $npsn ? ' &nbsp;NPSN: ' . e($npsn) : '' ?>
      </p>
    </div>
  </div>

  <!-- JUDUL -->
  <div class="judul-surat">
    <h2>Surat Keterangan Pindah/Keluar</h2>
  </div>
  <div class="nomor-surat">
    Nomor: <span id="nomorDisplay"><?= e($nomorSurat) ?></span>
  </div>

  <!-- PEMBUKA -->
  <div class="pembuka">
    Yang bertanda tangan di bawah ini kepala sekolah <?= e($namaSekolah) ?> menerangkan bahwa :
  </div>

  <!-- DATA SISWA -->
  <div class="data-siswa">
    <div class="data-row">
      <span class="data-label">Nama Lengkap</span>
      <span class="data-sep">:</span>
      <span class="data-value"><strong><?= e($namaSiswa) ?></strong></span>
    </div>
    <div class="data-row">
      <span class="data-label">NIS</span>
      <span class="data-sep">:</span>
      <span class="data-value"><?= e($nisSiswa) ?></span>
    </div>
    <div class="data-row">
      <span class="data-label">NISN</span>
      <span class="data-sep">:</span>
      <span class="data-value"><?= e($nisnSiswa) ?></span>
    </div>
    <div class="data-row">
      <span class="data-label">Kelas</span>
      <span class="data-sep">:</span>
      <span class="data-value"><?= e($kelasSiswa) ?></span>
    </div>
    <div class="data-row">
      <span class="data-label">Jenis Kelamin</span>
      <span class="data-sep">:</span>
      <span class="data-value"><?= e($jkSiswa) ?></span>
    </div>
    <div class="data-row">
      <span class="data-label">Tempat, Tanggal Lahir</span>
      <span class="data-sep">:</span>
      <span class="data-value"><?= e($ttlSiswa) ?></span>
    </div>
    <div class="data-row">
      <span class="data-label">Nama Orang Tua/Wali</span>
      <span class="data-sep">:</span>
      <span class="data-value"><?= e($namaOrtu ?: '-') ?></span>
    </div>
  </div>

  <!-- PENUTUP -->
  <div class="penutup">
    Demikian surat keterangan ini dibuat, untuk diketahui dan dipergunakan sebagaimana mestinya.
  </div>

  <!-- TANDA TANGAN -->
  <div class="ttd-wrap">
    <div class="ttd">
      <div class="kota-tanggal"><?= e($kotaSekolah) ?>, <?= $hariIni ?></div>
      <div class="jabatan">Mengetahui,</div>
      <div class="jabatan">Kepala Sekolah</div>
      <div class="ruang-ttd"></div>
      <div class="nama-kepsek"><?= e(strtoupper($kepsek)) ?></div>
      <?php if (!empty($nipKepsek)): ?>
      <div class="nip-kepsek">NIP. <?= e($nipKepsek) ?></div>
      <?php endif; ?>
    </div>
  </div>

  <!-- CATATAN -->
  <div class="catatan">
    <strong>Catatan :</strong><br>
    Dengan mencetak surat keterangan pindah/keluar ini maka peserta didik dinyatakan telah
    pindah/keluar dari <?= e($namaSekolah) ?>.
  </div>

</div><!-- /surat -->

<script>
  // Auto-print setelah 500ms
  setTimeout(function() {
    // Hanya auto-print jika ada parameter autoprint di URL
    var params = new URLSearchParams(window.location.search);
    if (params.get('autoprint') === '1') {
      window.print();
    }
  }, 500);
</script>

</body>
</html>
