<%@ Language=VBScript %>

<%

Option Explicit

Dim objConn, rs

%>

<!DOCTYPE html>

<html>

<head>

    <!--#include file="./includes/sql.asp"-->

    <title>Print QR Code</title>

    <script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>

    <style>

        /* ULINE S-20135: 8.5x11 sheet, 3x3 labels, 2 cols x 3 rows */

        /* Measured: top 0.875in, sides 1.1875in, gaps 0.125in */

        @page { size: letter; margin: 0; }

        body { font-family: Arial, sans-serif; background: #f0f0f0; margin: 0; padding: 20px; }

        

        .no-print { margin-bottom: 20px; text-align: center; }

        .print-btn { padding: 10px 30px; font-size: 16px; cursor: pointer; background: #667eea; color: white; border: none; border-radius: 5px; margin: 5px; }

        .position-select { padding: 8px; font-size: 14px; margin-left: 10px; }

        

        .print-sheet { width: 8.5in; height: 11in; background: white; margin: 0 auto; position: relative; border: 1px solid #ccc; }

        

        .label { 

            width: 3in; 

            height: 3in; 

            position: absolute; 

            display: flex; 

            flex-direction: column; 

            align-items: center; 

            justify-content: center; 

            padding: 0.1in; 

            box-sizing: border-box;

        }

        

        /* Label positions - top: 0.875in, left: 1.1875in, gap: 0.125in */

        .pos-1 { top: 0.875in; left: 1.1875in; }

        .pos-2 { top: 0.875in; left: 4.3125in; }

        .pos-3 { top: 4in; left: 1.1875in; }

        .pos-4 { top: 4in; left: 4.3125in; }

        .pos-5 { top: 7.125in; left: 1.1875in; }

        .pos-6 { top: 7.125in; left: 4.3125in; }

        

        .label.inactive { border: 1px dashed #ccc; }

        .label.active { border: 2px solid #667eea; }

        

        .model-name { font-size: 11pt; font-weight: bold; text-align: center; margin-bottom: 0.1in; color: #000; }

        .qr-container { text-align: center; }

        .info-section { margin-top: 0.1in; display: flex; flex-direction: column; align-items: center; }

        .info-inner { text-align: left; }

        .info-row { font-size: 9pt; color: #333; margin: 1px 0; white-space: nowrap; }

        .csf-name { font-size: 12pt; font-weight: bold; font-family: monospace; text-align: center; margin-bottom: 2px; }

        

        @media print {

            body { padding: 0; margin: 0; background: white; }

            .no-print { display: none; }

            .print-sheet { border: none; margin: 0; width: 8.5in; height: 11in; overflow: hidden; }

            .label { border: none !important; }

            .label.inactive { visibility: hidden; }

        }

    </style>

</head>

<body>

<%

Dim printerid, strSQL, csfName, winName, ipAddr, modelName



printerid = Request.QueryString("printerid")

If printerid = "" Then printerid = "0"

If Not IsNumeric(printerid) Then printerid = "0"



strSQL = "SELECT p.printercsfname, p.printerwindowsname, p.ipaddress, mo.modelnumber FROM printers p LEFT JOIN models mo ON p.modelid = mo.modelnumberid WHERE p.printerid = " & CLng(printerid)

Set rs = objConn.Execute(strSQL)



If rs.EOF Then

    csfName = "NOT FOUND"

    winName = ""

    ipAddr = ""

    modelName = ""

Else

    csfName = rs("printercsfname") & ""

    winName = rs("printerwindowsname") & ""

    ipAddr = rs("ipaddress") & ""

    modelName = rs("modelnumber") & ""

End If

rs.Close

Set rs = Nothing

objConn.Close

%>

<div class="no-print">

    <button class="print-btn" onclick="window.print()">Print QR Code</button>

    <label>Position: 

        <select class="position-select" id="posSelect" onchange="changePosition()">

            <option value="1">1 - Top Left</option>

            <option value="2">2 - Top Right</option>

            <option value="3">3 - Middle Left</option>

            <option value="4">4 - Middle Right</option>

            <option value="5">5 - Bottom Left</option>

            <option value="6">6 - Bottom Right</option>

        </select>

    </label>

</div>

<div class="print-sheet">

    <div class="label pos-1 active" id="label-1">

        <div class="model-name"><%=Server.HTMLEncode(modelName)%></div>

        <div class="qr-container"><div id="qrcode-1"></div></div>

        <div class="info-section">

            <div class="csf-name"><%=Server.HTMLEncode(csfName)%></div>

            <div class="info-inner">

<% If winName <> "" Then %>

                <div class="info-row"><%=Server.HTMLEncode(winName)%></div>

<% End If %>

<% If ipAddr <> "" Then %>

                <div class="info-row"><%=Server.HTMLEncode(ipAddr)%></div>

<% End If %>

            </div>

        </div>

    </div>

    <div class="label pos-2 inactive" id="label-2"></div>

    <div class="label pos-3 inactive" id="label-3"></div>

    <div class="label pos-4 inactive" id="label-4"></div>

    <div class="label pos-5 inactive" id="label-5"></div>

    <div class="label pos-6 inactive" id="label-6"></div>

</div>

<script>

var labelContent = document.getElementById("label-1").innerHTML;

var qrUrl = "https://tsgwp00525.rd.ds.ge.com/shopdb/displayprinter.asp?printerid=<%=printerid%>";



function generateQR(elementId) {

    var el = document.getElementById(elementId);

    if (el) {

        el.innerHTML = "";

        new QRCode(el, { text: qrUrl, width: 144, height: 144, correctLevel: QRCode.CorrectLevel.M });

    }

}



generateQR("qrcode-1");



function changePosition() {

    var pos = document.getElementById("posSelect").value;

    for (var i = 1; i <= 6; i++) {

        var label = document.getElementById("label-" + i);

        if (i == pos) {

            label.innerHTML = labelContent.replace("qrcode-1", "qrcode-" + i);

            label.className = "label pos-" + i + " active";

            generateQR("qrcode-" + i);

        } else {

            label.innerHTML = "";

            label.className = "label pos-" + i + " inactive";

        }

    }

}

</script>

</body>

</html>

