<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><?= htmlspecialchars($title) ?></title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 11px;
      color: #222;
      background: #f5f5f5;
    }
    .slip-wrapper {
      width: 740px;
      margin: 20px auto;
      background: #fff;
      border: 1px solid #ccc;
      padding: 24px 28px;
    }
    .slip-header {
      display: flex;
      align-items: center;
      border-bottom: 2px solid #E53935;
      padding-bottom: 12px;
      margin-bottom: 14px;
    }
    .slip-header .company-info { flex: 1; }
    .slip-header .company-name { font-size: 16px; font-weight: bold; color: #E53935; }
    .slip-header .slip-title {
      text-align: right;
      font-size: 13px;
      font-weight: bold;
      color: #555;
    }
    .slip-meta {
      display: flex;
      gap: 20px;
      background: #fafafa;
      border: 1px solid #eee;
      border-radius: 4px;
      padding: 10px 14px;
      margin-bottom: 14px;
    }
    .slip-meta .meta-group { flex: 1; }
    .meta-row { display: flex; margin-bottom: 4px; }
    .meta-label { width: 120px; color: #666; }
    .meta-value { font-weight: bold; }
    .section-title {
      font-size: 10px;
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #E53935;
      border-bottom: 1px solid #E53935;
      padding-bottom: 3px;
      margin-bottom: 8px;
      margin-top: 14px;
    }
    table.komponen {
      width: 100%;
      border-collapse: collapse;
      font-size: 11px;
    }
    table.komponen th {
      background: #E53935;
      color: #fff;
      padding: 5px 8px;
      text-align: left;
    }
    table.komponen td {
      padding: 4px 8px;
      border-bottom: 1px solid #f0f0f0;
    }
    table.komponen td.text-right, table.komponen th.text-right { text-align: right; }
    table.komponen tr:hover td { background: #fef5f5; }
    .subtotal-row td { font-weight: bold; border-top: 1px solid #ddd; background: #fff8f8; }
    .neto-box {
      margin-top: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #E53935;
      color: #fff;
      border-radius: 6px;
      padding: 10px 18px;
      font-size: 14px;
      font-weight: bold;
    }
    .tanda-tangan {
      display: flex;
      justify-content: space-between;
      margin-top: 30px;
      padding-top: 16px;
      border-top: 1px dashed #ccc;
    }
    .ttd-block { text-align: center; width: 180px; }
    .ttd-block .ttd-label { font-size: 10px; color: #666; }
    .ttd-block .ttd-space { height: 50px; border-bottom: 1px solid #555; margin: 8px 20px; }
    .print-btn {
      display: block;
      width: 740px;
      margin: 10px auto;
      text-align: right;
    }
    .print-btn button {
      padding: 6px 18px;
      background: #E53935;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 13px;
    }
    @media print {
      body { background: #fff; }
      .slip-wrapper { margin: 0; border: none; padding: 10px; }
      .print-btn { display: none; }
    }
  </style>
</head>
<body>

<div class="print-btn">
  <button onclick="window.print()"><i>&#128438;</i> Cetak / Simpan PDF</button>
  &nbsp;
  <button onclick="window.close()" style="background:#555;">Tutup</button>
</div>

<div class="slip-wrapper">

  <div class="slip-header">
    <?php if (company_logo_url() !== ''): ?>
    <div style="margin-right:12px;">
      <img src="<?= company_logo_url() ?>" alt="Logo" style="max-height:48px; width:auto;">
    </div>
    <?php endif; ?>
    <div class="company-info">
      <div class="company-name"><?= htmlspecialchars(company_name()) ?></div>
      <div style="font-size:11px; color:#666;"><?= htmlspecialchars(company_address()) ?></div>
    </div>
    <div class="slip-title">
      SLIP GAJI<br>
      <span style="font-size:11px; font-weight:normal; color:#888;">
        <?= bulan_indonesia($slip->bulan) ?> <?= $slip->tahun ?>
      </span>
    </div>
  </div>

  <div class="slip-meta">
    <div class="meta-group">
      <div class="meta-row"><span class="meta-label">NIP</span><span class="meta-value">: <?= htmlspecialchars($slip->nip) ?></span></div>
      <div class="meta-row"><span class="meta-label">Nama</span><span class="meta-value">: <?= htmlspecialchars($slip->nama_lengkap) ?></span></div>
      <div class="meta-row"><span class="meta-label">Divisi</span><span class="meta-value">: <?= htmlspecialchars($slip->nama_divisi) ?></span></div>
      <div class="meta-row"><span class="meta-label">Jabatan</span><span class="meta-value">: <?= htmlspecialchars($slip->nama_jabatan ?? '-') ?></span></div>
    </div>
    <div class="meta-group">
      <div class="meta-row"><span class="meta-label">Periode</span><span class="meta-value">: <?= tgl_indonesia($slip->tanggal_mulai) ?> s/d <?= tgl_indonesia($slip->tanggal_selesai) ?></span></div>
      <div class="meta-row"><span class="meta-label">Hari Hadir</span><span class="meta-value">: <?= $slip->hari_hadir ?? 0 ?> hari</span></div>
      <div class="meta-row"><span class="meta-label">Hari Absen</span><span class="meta-value">: <?= $slip->hari_absen ?? 0 ?> hari</span></div>
      <div class="meta-row"><span class="meta-label">Lembur</span><span class="meta-value">: <?= $slip->total_jam_lembur ?? 0 ?> jam</span></div>
    </div>
  </div>

  <!-- Pendapatan -->
  <div class="section-title">Pendapatan</div>
  <table class="komponen">
    <thead>
      <tr>
        <th style="width:40px;">No</th>
        <th>Komponen</th>
        <th>Jenis</th>
        <th class="text-right">Nominal (Rp)</th>
      </tr>
    </thead>
    <tbody>
      <?php $no = 1; $total_pend = 0; foreach ($pendapatan as $k): ?>
        <tr>
          <td><?= $no++ ?></td>
          <td>
            <?= htmlspecialchars($k->nama_komponen) ?>
            <?php if (!empty($k->jumlah_hari)): ?>
              <span style="color:#888; font-size:10px;">(<?= (int)$k->jumlah_hari ?> hari)</span>
            <?php endif; ?>
          </td>
          <td><?= ucfirst(strtolower($k->jenis)) ?></td>
          <td class="text-right"><?= rupiah($k->nilai) ?></td>
        </tr>
        <?php $total_pend += $k->nilai; ?>
      <?php endforeach; ?>
      <tr class="subtotal-row">
        <td colspan="3" class="text-right">Total Pendapatan</td>
        <td class="text-right"><?= rupiah($total_pend) ?></td>
      </tr>
    </tbody>
  </table>

  <!-- Potongan -->
  <div class="section-title">Potongan</div>
  <table class="komponen">
    <thead>
      <tr>
        <th style="width:40px;">No</th>
        <th>Komponen</th>
        <th>Keterangan</th>
        <th class="text-right">Nominal (Rp)</th>
      </tr>
    </thead>
    <tbody>
      <?php $no = 1; $total_pot = 0; foreach ($potongan as $k): ?>
        <tr>
          <td><?= $no++ ?></td>
          <td><?= htmlspecialchars($k->nama_komponen) ?></td>
          <?php
            $sumber_label = [
              'SYSTEM_DEFAULT'  => 'Standar',
              'PER_HARI'        => 'Per Hari',
              'FORMULA'         => 'Hasil rumus',
              'LEMBUR_APPROVED' => 'Lembur',
            ];
            $sumber_raw = $k->sumber ?? '-';
          ?>
          <td><?= htmlspecialchars($sumber_label[$sumber_raw] ?? $sumber_raw) ?></td>
          <td class="text-right"><?= rupiah($k->nilai) ?></td>
        </tr>
        <?php $total_pot += $k->nilai; ?>
      <?php endforeach; ?>
      <?php if (empty($potongan)): ?>
        <tr><td colspan="4" class="text-center text-muted">Tidak ada potongan</td></tr>
      <?php endif; ?>
      <tr class="subtotal-row">
        <td colspan="3" class="text-right">Total Potongan</td>
        <td class="text-right"><?= rupiah($total_pot) ?></td>
      </tr>
    </tbody>
  </table>

  <!-- Gaji Neto -->
  <div class="neto-box">
    <span>TOTAL GAJI BERSIH (NETO)</span>
    <span style="font-size:18px;"><?= rupiah($slip->gaji_neto) ?></span>
  </div>

  <!-- Rekening -->
  <?php if (!empty($slip->nama_bank)): ?>
  <div style="margin-top:12px; padding:8px 12px; background:#fff8f8; border:1px solid #fdd; border-radius:4px; font-size:11px;">
    <strong>Rekening Pembayaran:</strong>
    <?= htmlspecialchars($slip->nama_bank) ?> — <?= htmlspecialchars($slip->no_rekening ?? '-') ?>
    a.n <?= htmlspecialchars($slip->nama_rekening ?? $slip->nama_lengkap) ?>
  </div>
  <?php endif; ?>

  <!-- Tanda Tangan -->
  <div class="tanda-tangan">
    <div class="ttd-block">
      <div class="ttd-label">Diterima oleh,</div>
      <div class="ttd-space"></div>
      <div style="font-size:11px;"><?= htmlspecialchars($slip->nama_lengkap) ?></div>
    </div>
    <div class="ttd-block">
      <div class="ttd-label">Disetujui oleh,</div>
      <div class="ttd-space"></div>
      <div style="font-size:11px;">HRD / Pimpinan</div>
    </div>
  </div>

  <div style="margin-top:16px; text-align:center; font-size:10px; color:#aaa;">
    Dokumen ini dicetak secara otomatis oleh Sistem Penggajian JIG &bull; <?= date('d/m/Y H:i') ?>
  </div>

</div>
</body>
</html>
