<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>QR Label Generator 58x39mm</title>

<!-- QR Code Library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

<style>
body{
    font-family: Arial, sans-serif;
    text-align:center;
    margin:2px;
}

/* Input Section */
.container{
    margin-bottom:20px;
}

input{
    padding:6px;
    margin:5px;
    width:220px;
}

button{
    padding:8px 15px;
    cursor:pointer;
}

/* ===== LABEL DESIGN ===== */
.label{
    width:39mm;
    height:58mm;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    padding:3mm;
    box-sizing:border-box;
    overflow:hidden;
}

/* QR section */
.qr-section{
    width:40%;
    display:flex;
    justify-content:center;
    align-items:center;
}

/* Info section */
.info-section{
    width:58%;
    text-align:left;
    font-size:12px;
}

.item-name{
    font-weight:bold;
    font-size:13px;
    margin-bottom:5px;
}

.price{
    font-size:14px;
    font-weight:bold;
    margin-top:5px;
}

.code{
    font-size:10px;
    margin-top:4px;
    word-break:break-all;
}

/* ===== PRINT SETTINGS ===== */
@media print {

    @page {
        size: 39mm 58mm;
        margin: 0;
    }

    html, body {
        width: 39mm;
        height: 58mm;
        margin: 0;
        padding: 0;
    }

    body * {
        visibility: hidden;
    }

    .label, .label * {
        visibility: visible;
    }

    .label {
        position: absolute;
        left: 10;
        top: 10;
        width: 39mm;
        height: 58mm;
    }
}
</style>
</head>

<body>

<h2>QR Label Generator (55x38mm)</h2>

<div class="container">
    <input type="text" id="code" value="<?php echo $_GET['barcode'];?>(<?php echo $_GET['per'];?>)سێتی"><br>
    <input type="text" id="name" value="<?php echo $_GET['n'];?>"><br>
    <input type="text" id="price" value="<?php echo $_GET['price'];?> $"><br>
    <button onclick="generateQR()">Generate</button>
    <button onclick="printLabel()">Print</button>
</div>

<!-- LABEL -->
<div class="label" id="label" align="center">

    <div class="qr-section">
        <div id="qrcode"></div>
    </div>

    <div class="info-section">
        <div class="item-name" id="itemName"></div>
        <div class="price" id="itemPrice"></div>
        <div class="code" id="itemCode"></div>
    </div>

</div>

<script>

function generateQR(){

    let code = document.getElementById("code").value;
    let name = document.getElementById("name").value;
    let price = document.getElementById("price").value;

    if(code === ""){
        alert("Please enter a code");
        return;
    }

    // Clear old QR
    document.getElementById("qrcode").innerHTML = "";

    new QRCode(document.getElementById("qrcode"), {
        text: code,
        width: 90,
        height: 90
    });

    document.getElementById("itemName").innerText = name;
    document.getElementById("itemPrice").innerText = price;
    document.getElementById("itemCode").innerText = code;
}

/* Professional Print Method */
function printLabel() {

    let printContents = document.getElementById("label").outerHTML;

    let newWindow = window.open("", "", "width=400,height=300");

    newWindow.document.write(`
        <html>
        <head>
        <style>
            @page { size: 55mm 38mm; margin:0; }
            html, body { margin:0; padding:0; width:55mm; height:38mm; }
        </style>
        </head>
        <body>${printContents}</body>
        </html>
    `);

    newWindow.document.close();
    newWindow.focus();
    newWindow.print();
    newWindow.close();
}

</script>

</body>
</html>