 <!DOCTYPE html>
<html lang="id">

<head>

    <meta charset="UTF-8">

    <title>Struk Denda</title>

    <style>

        *{ box-sizing:border-box; }

        body{

            font-family: Arial, Helvetica, sans-serif;

            font-size:13px;

            margin:40px;

        }

        h2,h3,p{

            margin:2px;

            text-align:center;

        }

        table{

            width:100%;

            border-collapse:collapse;

            margin-top:15px;

        }

        table th{

            border:1px solid black;

            padding:6px;

            background:#f2f2f2;

        }

        table td{

            border:1px solid black;

            padding:6px;

        }

        .info{

            margin-top:20px;

        }

        .info td{

            border:none;

            padding:3px;

        }

        .total{

            margin-top:20px;

            width:40%;

            float:right;

        }

        .total td{

            border:1px solid black;

            padding:8px;

        }

        .ttd{

            margin-top:90px;

            width:100%;

        }

        .ttd td{

            border:none;

            text-align:center;

            vertical-align:top;

            padding-top:30px;

            padding-bottom:10px;

            width:50%;

        }

        .ttd .garis-ttd{

            margin-top:80px;

            border-top:1px solid black;

            padding-top:8px;

            display:inline-block;

            width:200px;

        }

        /* Toolbar navigasi */
        .struk-toolbar{
            display:flex;
            gap:10px;
            justify-content:center;
            margin-bottom:30px;
            padding:12px 20px;
            background:#f8f9fa;
            border:1px solid #dee2e6;
            border-radius:6px;
            position:sticky;
            top:10px;
            z-index:999;
        }
        .struk-toolbar .btn{
            display:inline-flex;
            align-items:center;
            gap:6px;
            padding:10px 24px;
            font-size:14px;
            font-weight:600;
            border:none;
            border-radius:5px;
            cursor:pointer;
            text-decoration:none;
            transition:all 0.2s ease;
        }
        .struk-toolbar .btn-print{
            background:#28a745;
            color:#fff;
        }
        .struk-toolbar .btn-print:hover{
            background:#218838;
        }
        .struk-toolbar .btn-exit{
            background:#dc3545;
            color:#fff;
        }
        .struk-toolbar .btn-exit:hover{
            background:#c82333;
        }
        @media print{
            .struk-toolbar{ display:none !important; }
        }

    </style>

</head>

<body>

<!-- Toolbar tombol navigasi -->
<div class="struk-toolbar">
    <button class="btn btn-print" onclick="window.print()">
        🖨 Cetak
    </button>
    <button class="btn btn-exit" onclick="exitStruk()">
        ✕ Tutup / Exit
    </button>
</div>

<h2>PERPUSTAKAAN</h2>

<h3>STRUK PEMBAYARAN DENDA</h3>

<hr>

<?php

$data = $struk[0];

?>

<table class="info">

<tr>

<td width="180">Nama</td>

<td width="10">:</td>

<td><?= $data['nama']; ?></td>

</tr>

<tr>

<td>NIS</td>

<td>:</td>

<td><?= $data['nisn']; ?></td>

</tr>

<tr>

<td>Kelas</td>

<td>:</td>

<td><?= $data['kelas']; ?></td>

</tr>

<tr>

<td>Tanggal Cetak</td>

<td>:</td>

<td><?= date('d-m-Y H:i'); ?></td>

</tr>

</table>

<table>

<thead>

<tr>

<th>No</th>

<th>Kode Buku</th>

<th>Judul Buku</th>

<th>Tgl Pinjam</th>

<th>Jatuh Tempo</th>

<th>Tgl Kembali</th>

<th>Terlambat</th>

<th>Denda</th>

</tr>

</thead>

<tbody>

<?php

$no=1;

foreach($struk as $s):

?>

<tr>

<td align="center"><?= $no++; ?></td>

<td><?= $s['kode_buku']; ?></td>

<td><?= $s['judul']; ?></td>

<td><?= date('d-m-Y',strtotime($s['tanggal_pinjam'])); ?></td>

<td><?= date('d-m-Y',strtotime($s['tanggal_kembali'])); ?></td>

<td>

<?php if($s['tanggal_dikembalikan']): ?>

<?= date('d-m-Y',strtotime($s['tanggal_dikembalikan'])); ?>

<?php else: ?>

<span style="color:red;font-weight:bold;">Belum Kembali</span>

<?php endif; ?>

</td>

<td align="center">

<?= $s['hari_terlambat']; ?> Hari

</td>

<td align="right">

Rp <?= number_format($s['denda'],0,',','.'); ?>

</td>

</tr>

<?php endforeach; ?>

</tbody>

</table>

<table class="total">

<tr>

<th>Total Denda</th>

<th>

Rp <?= number_format($totalDenda,0,',','.'); ?>

</th>

</tr>

</table>

<div style="clear:both"></div>

<br>

<table class="ttd">

<tr>

<td>

Petugas

<br><br><br>

<div class="garis-ttd">_________________________</div>

</td>

<td>

Peminjam

<br><br><br>

<div class="garis-ttd"><?= $data['nama']; ?></div>

</td>

</tr>

    </table>

    <script>
        function exitStruk() {
            // Coba tutup jendela (untuk popup target="_blank")
            if (window.opener) {
                window.close();
            } else {
                // Kalau gagal, redirect ke dashboard
                window.location.href = '<?= base_url("dashboard") ?>';
            }
        }
    </script>

</body>

</html>
