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

<h4 class="mb-4">Desain Struk</h4>

<div class="row">
    <!-- Form Input -->
    <div class="col-md-6">
        <form action="<?= base_url('admin/setting/receipt/save') ?>" method="post" enctype="multipart/form-data">
            <div class="mb-3">
                <label for="logo">Logo (Opsional)</label>
                <input type="file" name="logo" id="logo" class="form-control" accept="image/*" onchange="previewLogo(this)">
                <?php if (!empty($setting['logo'])): ?>
                    <div class="mt-2">
                        <img src="<?= base_url('uploads/' . $setting['logo']) ?>" style="max-width: 150px;" id="current-logo">
                    </div>
                <?php endif; ?>
            </div>

            <div class="mb-3">
                <label for="header">Header Struk</label>
                <textarea name="header" id="header" class="form-control" rows="4" oninput="updatePreview()"><?= esc($setting['header'] ?? '') ?></textarea>
            </div>
            <div class="mb-3">
                <label for="footer">Footer Struk</label>
                <textarea name="footer" id="footer" class="form-control" rows="4" oninput="updatePreview()"><?= esc($setting['footer'] ?? '') ?></textarea>
            </div>
            <button class="btn btn-primary">Simpan Desain</button>
        </form>
    </div>

    <!-- Preview Struk -->
    <div class="col-md-6">
        <div class="card">
            <div class="card-header bg-light"><strong>Preview 58mm (Thermal)</strong></div>
            <div class="card-body d-flex justify-content-center" style="background-color: #111;">
                <div id="receipt-preview" style="
                    width: 220px;
                    background-color: white;
                    color: black;
                    font-family: monospace;
                    font-size: 12px;
                    padding: 10px;
                    border: 1px dashed #aaa;
                ">
                    <div id="preview-logo" style="text-align: center; margin-bottom: 8px;">
                        <?php if (!empty($setting['logo'])): ?>
                            <img src="<?= base_url('uploads/' . $setting['logo']) ?>" style="max-width: 100px;" id="preview-logo-img">
                        <?php else: ?>
                            <img src="" style="max-width: 100px; display: none;" id="preview-logo-img">
                        <?php endif; ?>
                    </div>
                    <pre id="preview-header" style="text-align: center"><?= esc($setting['header'] ?? '') ?></pre>
                    <hr>
                    <p>Item A     x1    Rp10.000</p>
                    <p>Item B     x2    Rp20.000</p>
                    <hr>
                    <p><strong>Total: Rp30.000</strong></p>
                    <hr>
                    <pre id="preview-footer" style="text-align: center"><?= esc($setting['footer'] ?? '') ?></pre>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Script -->
<script>
function updatePreview() {
    document.getElementById('preview-header').innerText = document.getElementById('header').value;
    document.getElementById('preview-footer').innerText = document.getElementById('footer').value;
}

function previewLogo(input) {
    const preview = document.getElementById('preview-logo-img');
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        reader.onload = function(e) {
            preview.src = e.target.result;
            preview.style.display = 'block';
        }
        reader.readAsDataURL(input.files[0]);
    }
}
</script>

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