<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Slip Transaksi Tabungan</title>
    <style>
        * { margin:0; padding:0; box-sizing:border-box }
        body { font-family:Arial,sans-serif; font-size:12px; padding:20px }
        .slip { max-width:320px; margin:0 auto; border:1px solid #000; padding:14px }
        .slip h3 { text-align:center; font-size:14px; margin-bottom:2px }
        .slip .subtitle { text-align:center; font-size:10px; color:#666; margin-bottom:12px }
        .slip .divider { border-top:1px dashed #000; margin:8px 0 }
        .slip table { width:100%; font-size:12px }
        .slip table td { padding:2px 0; vertical-align:top }
        .slip table td:first-child { width:70px; color:#555 }
        .slip .amount { font-size:16px; font-weight:bold; text-align:center; padding:8px 0 }
        .slip .setoran { color:#198754 }
        .slip .penarikan { color:#dc3545 }
        .slip .footer { text-align:center; font-size:10px; margin-top:12px; color:#666 }
        @media print {
            body { padding:0 }
            .slip { border:none }
            .no-print { display:none }
        }
    </style>
</head>
<body>

<div class="slip">
    <h3>SLIP TRANSAKSI TABUNGAN</h3>
    <div class="subtitle"><?= esc($transaction['transaction_number']) ?></div>
    <div class="divider"></div>

    <table>
        <tr><td>Nama</td><td>: <strong><?= esc($transaction['full_name']) ?></strong></td></tr>
        <tr><td>NIS</td><td>: <?= esc($transaction['nis']) ?></td></tr>
        <tr><td>Tanggal</td><td>: <?= date('d/m/Y', strtotime($transaction['transaction_date'])) ?></td></tr>
        <tr><td>Jenis</td><td>: <strong><?= $transaction['transaction_type'] === 'setoran' ? 'SETORAN' : 'PENARIKAN' ?></strong></td></tr>
    </table>

    <div class="divider"></div>

    <div class="amount <?= $transaction['transaction_type'] === 'setoran' ? 'setoran' : 'penarikan' ?>">
        <?= $transaction['transaction_type'] === 'setoran' ? '+' : '-' ?>
        Rp <?= number_format($transaction['amount'], 0, ',', '.') ?>
    </div>

    <div class="divider"></div>

    <table>
        <tr><td>Saldo Akhir</td><td>: <strong>Rp <?= number_format($transaction['balance_after'], 0, ',', '.') ?></strong></td></tr>
        <?php if ($transaction['notes']): ?>
        <tr><td>Catatan</td><td>: <?= esc($transaction['notes']) ?></td></tr>
        <?php endif; ?>
        <tr><td>Petugas</td><td>: <?= esc($tabunganOfficerName ?: 'Belum ditentukan') ?></td></tr>
    </table>

    <div class="footer">
        Dicetak: <?= date('d/m/Y H:i') ?>
    </div>
</div>

<div class="no-print" style="text-align:center;margin-top:16px">
    <button onclick="window.print()" style="padding:8px 24px;cursor:pointer">Cetak</button>
    <button onclick="window.close()" style="padding:8px 24px;cursor:pointer;margin-left:8px">Tutup</button>
</div>

</body>
</html>
