<?php
$setting = function_exists('app_setting') ? app_setting() : [];
$appName = trim((string) ($setting['nama_perusahaan'] ?? $setting['nama_aplikasi'] ?? 'Nusa POS')) ?: 'Nusa POS';
$tanggal = ! empty($transaksi['tanggal_service']) ? date('d/m/Y', strtotime($transaksi['tanggal_service'])) : date('d/m/Y');
$jam = ! empty($transaksi['created_at']) ? date('H:i', strtotime($transaksi['created_at'])) : date('H:i');
$totalDibayar = (float) ($totalDibayar ?? 0);
$totalService = (float) ($transaksi['total_service'] ?? 0);
$sisa = max(0, $totalService - $totalDibayar);
?>
<!doctype html>
<html lang="id">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Nota Service <?= esc($transaksi['no_transaksi'] ?? '') ?></title>
    <style>
        @page { size: 58mm auto; margin: 0; }
        * { box-sizing: border-box; }
        html, body {
            width: 58mm;
            margin: 0;
            padding: 0;
            background: #f3f4f6;
            color: #111;
            font-family: "Courier New", Courier, monospace;
            font-size: 10px;
            line-height: 1.25;
        }
        .receipt { width: 58mm; min-height: 100vh; margin: 0 auto; padding: 3mm; background: #fff; }
        .screen-actions {
            display: flex;
            gap: 6px;
            padding: 8px;
            background: #111827;
            position: sticky;
            top: 0;
            z-index: 2;
        }
        .screen-actions a, .screen-actions button {
            border: 0;
            border-radius: 4px;
            padding: 7px 8px;
            background: #fff;
            color: #111827;
            font: 600 12px Arial, sans-serif;
            text-decoration: none;
            cursor: pointer;
        }
        .header, .footer { text-align: center; }
        .store-name { font-size: 12px; font-weight: 700; text-transform: uppercase; overflow-wrap: anywhere; }
        .muted { color: #333; }
        .line { border-top: 1px dashed #111; margin: 5px 0; }
        .row { display: flex; justify-content: space-between; gap: 8px; }
        .label { flex: 0 0 auto; }
        .value { text-align: right; overflow-wrap: anywhere; }
        .section-title { font-weight: 700; margin-bottom: 4px; }
        .item { margin-bottom: 5px; }
        .item-name { font-weight: 700; overflow-wrap: anywhere; }
        .item-calc { display: flex; justify-content: space-between; gap: 8px; padding-left: 5px; }
        .item-calc.no-indent { padding-left: 0; }
        .totals .row { margin: 2px 0; }
        .total-main { font-weight: 700; font-size: 11px; }
        .footer { margin-top: 8px; }
        @media print {
            html, body { width: 58mm; background: #fff; }
            .screen-actions { display: none; }
            .receipt { min-height: 0; margin: 0; padding: 3mm; box-shadow: none; }
        }
    </style>
</head>
<body>
    <div class="screen-actions">
        <button type="button" onclick="window.print()">Cetak</button>
        <a href="<?= site_url('admin/service/detail/' . $transaksi['id']) ?>">Kembali</a>
    </div>

    <?= view('admin/service/partials/nota_thermal_body', get_defined_vars()) ?>

    <script>
        window.addEventListener('load', function () {
            setTimeout(function () {
                window.print();
            }, 300);
        });
    </script>
</body>
</html>
