<?php
require_once '../includes/auth.php';
require_once '../db.php';
require_once '../includes/header.php';
require_once '../includes/sidebar.php';

$id = (int)($_GET['id'] ?? 0);
if ($id <= 0) die("Invalid Invoice");
?>

<!-- SCREEN CSS -->
<link rel="stylesheet" href="../assets/css/screen_invoice.css">

<!-- TEMPLATE CSS (DYNAMIC) -->
<link rel="stylesheet" id="templateStyle">

<!-- BARCODE & QR -->
<script src="../assets/js/JsBarcode.all.min.js"></script>
<script src="../assets/js/qrcode.min.js"></script>

<div class="content-wrapper">
<div class="main-content">

    <!-- TOOLBAR -->
    <div class="invoice-toolbar no-print">
        <button><a href="index.php">⬅ Back</a></button>

        &nbsp;&nbsp;

        <label>
            Template:
            <select id="templateSelect">
                <option value="simple">Simple</option>
                <option value="tally">Tally</option>
                <option value="modern">Modern</option>
            </select>
        </label>

<button onclick="window.print()" class="align-item=right">🖨 Print A4</button>
    </div>

    <!-- PREVIEW -->
    <div class="invoice-wrapper" id="invoicePreview">
        Loading invoice...
    </div>

</div>
</div>

<script>
const invoiceId = <?= $id ?>;

/* =========================
   LOAD INVOICE
   ========================= */
function loadLayout() {
    const template = document.getElementById('templateSelect').value;

    /* Switch CSS */
    document.getElementById('templateStyle').href =
        `templates/${template}/style.css`;

    /* Load HTML */
    fetch(`layout_loader.php?id=${invoiceId}&template=${template}&type=invoice`)
        .then(r => r.text())
        .then(html => {
            document.getElementById('invoicePreview').innerHTML = html;
            setTimeout(renderCodes, 50);
        })
        .catch(err => {
            document.getElementById('invoicePreview').innerHTML =
                '<b style="color:red">Failed to load invoice</b>';
            console.error(err);
        });
}

/* =========================
   BARCODE + QR
   ========================= */
function renderCodes() {

    const barcodeEl = document.getElementById("barcode");
    if (barcodeEl) {
        JsBarcode(barcodeEl, barcodeEl.dataset.invoice, {
            format: "CODE128",
            width: 1.4,
            height: 45,
            displayValue: false,
            margin: 0
        });
    }

    const qrEl = document.getElementById("upiQR");
    if (qrEl) {
        qrEl.innerHTML = "";

        const upi    = qrEl.dataset.upi;
        const name   = qrEl.dataset.name;
        const amount = qrEl.dataset.amount;

        new QRCode(qrEl, {
            text: `upi://pay?pa=${upi}&pn=${encodeURIComponent(name)}&am=${amount}`,
            width: 120,
            height: 120
        });
    }
}

/* =========================
   EVENTS
   ========================= */
document.getElementById('templateSelect')
    .addEventListener('change', loadLayout);

/* INITIAL LOAD */
loadLayout();
</script>

<?php require_once '../includes/footer.php'; ?>
