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

<div class="print-btn">
  <button onclick="window.print()" style="background:#E53935; color:#fff;">&#128438; Cetak Semua</button>
  <button onclick="window.close()" style="background:#555; color:#fff; margin-left:6px;">Tutup</button>
</div>

<?php foreach ($data_slips as $ds):
  $slip = $ds['slip'];
  $pendapatan = $ds['pendapatan'];
  $potongan   = $ds['potongan'];
  $total_pend = array_sum(array_column($pendapatan, 'nilai'));
  $total_pot  = array_sum(array_column($potongan, 'nilai'));
?>

<div class="slip-wrapper">
  <div class="slip-header">
    <?php if (company_logo_url() !== ''): ?>
    <div style="margin-right:10px;">
      <img src="<?= company_logo_url() ?>" alt="Logo" style="max-height:42px; width:auto;">
    </div>
    <?php endif; ?>
    <div>
      <div class="company-name"><?= htmlspecialchars(company_name()) ?></div>
      <div style="font-size:10px; color:#888;"><?= htmlspecialchars(company_address()) ?></div>
    </div>
    <div class="slip-title">
      SLIP GAJI<br>
      <span style="font-size:10px; font-weight:normal; color:#888;">
        <?= bulan_indonesia($periode->bulan) ?> <?= $periode->tahun ?>
      </span><br>
      <span style="font-size:10px; font-weight:normal; color:#888;">
        <?= tgl_indonesia($periode->tanggal_mulai) ?> s/d <?= tgl_indonesia($periode->tanggal_selesai) ?>
      </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>
    <div class="meta-group">
      <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">Lembur</span><span class="meta-value">: <?= $slip->total_jam_lembur ?? 0 ?> jam</span></div>
    </div>
  </div>

  <div class="section-title">Pendapatan</div>
  <table class="komponen">
    <thead><tr><th>Komponen</th><th class="text-right">Nominal (Rp)</th></tr></thead>
    <tbody>
      <?php foreach ($pendapatan as $k): ?>
        <tr><td><?= htmlspecialchars($k->nama_komponen) ?></td><td class="text-right"><?= rupiah($k->nilai) ?></td></tr>
      <?php endforeach; ?>
      <tr class="subtotal-row"><td class="text-right">Total Pendapatan</td><td class="text-right"><?= rupiah($total_pend) ?></td></tr>
    </tbody>
  </table>

  <div class="section-title">Potongan</div>
  <table class="komponen">
    <thead><tr><th>Komponen</th><th class="text-right">Nominal (Rp)</th></tr></thead>
    <tbody>
      <?php foreach ($potongan as $k): ?>
        <tr><td><?= htmlspecialchars($k->nama_komponen) ?></td><td class="text-right"><?= rupiah($k->nilai) ?></td></tr>
      <?php endforeach; ?>
      <?php if (empty($potongan)): ?>
        <tr><td colspan="2" class="text-center" style="color:#aaa;">Tidak ada potongan</td></tr>
      <?php endif; ?>
      <tr class="subtotal-row"><td class="text-right">Total Potongan</td><td class="text-right"><?= rupiah($total_pot) ?></td></tr>
    </tbody>
  </table>

  <div class="neto-box">
    <span>GAJI BERSIH</span>
    <span style="font-size:15px;"><?= rupiah($slip->gaji_neto) ?></span>
  </div>

  <div class="tanda-tangan">
    <div class="ttd-block">
      <div style="font-size:10px; color:#666;">Diterima oleh,</div>
      <div class="ttd-space"></div>
      <div style="font-size:10px;"><?= htmlspecialchars($slip->nama_lengkap) ?></div>
    </div>
    <div class="ttd-block">
      <div style="font-size:10px; color:#666;">Disetujui oleh,</div>
      <div class="ttd-space"></div>
      <div style="font-size:10px;">HRD / Pimpinan</div>
    </div>
  </div>
</div>

<?php endforeach; ?>

</body>
</html>
