<?= $this->extend('layouts/main') ?>
<?= $this->section('content') ?>

<h4 class="mb-4">Koneksi Printer (Browser Biasa)</h4>

<div class="alert alert-info">
    Halaman ini menggunakan <strong>cetak langsung via browser</strong> tanpa perlu QZ Tray.
</div>

<form method="post" action="<?= base_url('admin/setting/printer/save') ?>">
    <div class="mb-3">
        <label for="printer">Nama Printer (Opsional)</label>
        <input type="text" name="printer_name" id="printer_name" class="form-control"
               value="<?= esc($printer ?? '') ?>" placeholder="Nama printer (boleh dikosongkan)">
        <div class="form-text">Tidak wajib. Ini hanya untuk informasi saja.</div>
    </div>
    <button class="btn btn-primary">Simpan</button>
    <button type="button" onclick="testPrint()" class="btn btn-success">Test Print</button>
</form>

<iframe id="print-frame" style="display: none;"></iframe>

<script>
function testPrint() {
    const layout = <?= json_encode($receipt_layout ?? []) ?>;
    const setting = <?= json_encode($receipt_setting ?? []) ?>;

    const width = layout.width ?? 58;
    const fontSize = layout.font_size ?? 12;

    const header = (setting.header ?? 'HEADER').replace(/\n/g, '<br>');
    const footer = (setting.footer ?? 'FOOTER').replace(/\n/g, '<br>');
    const logo = setting.logo ?? '';
    const logoUrl = logo ? "<?= base_url('uploads') ?>/" + logo : null;

    const bodyItems = layout.body ?? [];

    let bodyHtml = '';
    bodyItems.forEach(item => {
        if (item.type === 'text') {
            const align = item.align ?? 'left';
            const content = (item.content ?? '').replace(/\n/g, '<br>');
            bodyHtml += `<div style="text-align:${align}">${content}</div>`;
        } else if (item.type === 'line') {
            bodyHtml += `<div class="line"></div>`;
        }
    });

    const html = `
        <html>
        <head>
            <style>
                @media print {
                    @page {
                        size: ${width}mm auto;
                        margin: 5mm 6mm;
                    }
                    body {
                        font-family: monospace;
                        font-size: ${fontSize}px;
                        margin: 0;
                    }
                }
                body {
                    font-family: monospace;
                    font-size: ${fontSize}px;
                    width: ${width * 3.78}px;
                    padding: 5px 6px;
                }
                .center { text-align: center; }
                .line { border-top: 1px dashed #000; margin: 6px 0; }
                img.logo {
                    max-width: 100px;
                    margin-bottom: 6px;
                }
            </style>
        </head>
        <body onload="window.print(); setTimeout(() => window.close(), 200);">
            <div class="center">
                ${logoUrl ? `<img src="${logoUrl}" class="logo">` : ''}<br>
                ${header}
                <div class="line"></div>
                <strong>TEST PRINT</strong><br>
                Tanggal: <?= date('d-m-Y H:i:s') ?><br>
                Mode: Browser Print<br>
                <div class="line"></div>
            </div>

            ${bodyHtml}

            <div class="center">
                <div class="line"></div>
                ${footer}
            </div>
        </body>
        </html>
    `;

    const printFrame = document.getElementById('print-frame');
    const doc = printFrame.contentWindow.document;
    doc.open();
    doc.write(html);
    doc.close();
}
</script>

<?= $this->endSection() ?>
