Server : LiteSpeed System : Linux barito.iixcp.rumahweb.net 5.14.0-611.49.1.el9_7.x86_64 #1 SMP PREEMPT_DYNAMIC Tue Apr 21 16:39:08 EDT 2026 x86_64 User : elvh3918 ( 1528) PHP Version : 8.2.31 Disable Function : mail Directory : /home/elvh3918/public_html/pmm/resources/views/components/ |
@section('modal-qrcode-generate')
<div class="modal fade" id="modal_qrcode_generate">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">QR Code Generator</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col mb-3">
<label class="form-label" for="qr_code">Code<span class="text-danger">*</span></label>
<input type="text" class="form-control"
id="qr_code" name="qr_code" placeholder="Enter text or URL" value="https://example.com"
required readonly
/>
</div>
</div>
<div class="row" hidden>
<div class="col mb-3">
<label class="form-label" for="qr_name">Name<span class="text-danger">*</span></label>
<input type="text" class="form-control"
id="qr_name" name="qr_name" placeholder="Enter name or URL" value="https://example.com"
required readonly
/>
</div>
</div>
<div class="row" hidden>
<div class="col mb-3">
<label class="form-label" for="qr_tenant">Tenant<span class="text-danger">*</span></label>
<input type="text" class="form-control"
id="qr_tenant" name="qr_tenant" placeholder="Enter tenant or URL" value="https://example.com"
required readonly
/>
</div>
</div>
<div class="row" hidden>
<div class="col mb-3">
<label class="form-label" for="qr_customer">Customer<span class="text-danger">*</span></label>
<input type="text" class="form-control"
id="qr_customer" name="qr_customer" placeholder="Enter customer or URL" value="https://example.com"
required readonly
/>
</div>
</div>
<div class="row" hidden>
<div class="col mb-3">
<label class="form-label" for="qr_created">Created<span class="text-danger">*</span></label>
<input type="text" class="form-control"
id="qr_created" name="qr_created" placeholder="Enter created or URL" value="https://example.com"
required readonly
/>
</div>
</div>
<div class="row">
<div class="col-4 mb-3">
<label class="form-label" for="size">Size<span class="text-danger">*</span></label>
<select class="form-control" name="size" id="size" onchange="generate()">
<option value="25">25</option>
<option value="50" selected>50</option>
<option value="75">75</option>
<option value="100">100</option>
<option value="128">128</option>
<option value="200">200</option>
<option value="300">300</option>
<option value="400">400</option>
</select>
</div>
<div class="col-4 mb-3">
<label class="form-label" for="ec">ECC<span class="text-danger">*</span></label>
<select class="form-control" name="ec" id="ec" onchange="generate()">
<option value="L">L (low)</option>
<option value="M" selected>M</option>
<option value="Q">Q</option>
<option value="H">H (best)</option>
</select>
</div>
<div class="col-4 mb-3">
<label class="form-label" for="qty">Qty<span class="text-danger">*</span></label>
<input type="number" class="form-control"
id="qty" name="qty" placeholder="Qty Print" value="1"
required
/>
</div>
</div>
<div id="qrcode" class="d-flex justify-content-center"></div>
</div>
<div class="modal-footer d-flex justify-content-start justify-content-md-end d-print-none">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="is_descript"
name="is_descript"/>
<label for="is_descript" class="form-check-label ml-1">Use Descript</label>
</div>
<button type="button" class="btn btn-dark" id="print">Print</button>
<button type="button" class="btn btn-warning" id="generate" hidden>Generate</button>
<button type="button" class="btn btn-primary" id="download">Download</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
@endsection
@section('page-script-modal-qrcode-generate')
<script src="{{ asset('assets/external/qrbarcode/qrcode-generate.min.js') }}"></script>
<script>
const qrcodeContainer = document.getElementById('qrcode');
const codeEl = document.getElementById('qr_code');
const sizeEl = document.getElementById('size');
const ecEl = document.getElementById('ec');
const genBtn = document.getElementById('generate');
const dlBtn = document.getElementById('download');
const prnBtn = document.getElementById('print');
let qr; // QRCode instance
function generate() {
const value = codeEl.value.trim() || ' ';
const size = parseInt(sizeEl.value, 10) || 200;
const ecLevel = ecEl.value || 'M';
// clear previous
qrcodeContainer.innerHTML = '';
// options: text, width, height, colorDark, colorLight, correctLevel
qr = new QRCode(qrcodeContainer, {
text: value,
width: size,
height: size,
correctLevel: QRCode.CorrectLevel[ecLevel] // using qrcodejs's enum
});
}
function downloadPNG() {
if (!qr) { generate(); } // ensure there is a QR
// qrcodejs produces either an <img> or <canvas> depending on browser
const img = qrcodeContainer.querySelector('img');
if (img && img.src) {
// create a temporary link and click it
const a = document.createElement('a');
a.href = img.src;
a.download = 'qrcode.png';
document.body.appendChild(a);
a.click();
a.remove();
return;
}
const canvas = qrcodeContainer.querySelector('canvas');
if (canvas) {
const dataURL = canvas.toDataURL('image/png');
const a = document.createElement('a');
a.href = dataURL;
a.download = 'qrcode.png';
document.body.appendChild(a);
a.click();
a.remove();
return;
}
alert('Unable to find QR image/canvas to download — try regenerating.');
}
function print() {
let divContents = document.getElementById("qrcode").innerHTML;
let divCode = document.getElementById("qr_code").value;
let divName = document.getElementById("qr_name").value;
let divTenant = document.getElementById("qr_tenant").value;
let divCustomer = document.getElementById("qr_customer").value;
let divCreated = document.getElementById("qr_created").value;
let qty = document.getElementById("qty").value;
var html = "";
html +='<flex>';
for (let index = 0; index < qty; index++) {
if (!document.getElementById("is_descript").checked) {
html +='<barcode>';
html += divContents;
html += '<text>' + divCode + '</text>';
html +='</barcode>';
} else {
html +='<barcode>';
html += '<div class="row">';
html += '<div class="column">' + divContents + '</div>';
html += '<div class="column">';
html += '<j1>' + divTenant + '</j1>';
html += '<text>' + divCustomer + '</text>';
html += '<text>' + divCode + '</text>';
html += '<text>' + divName + '</text>';
html += '<small>' + divCreated + '</small>';
html += '</div>';
html += '</div>';
html +='</barcode>';
}
}
html +='</flex>';
let printWindow = window.open();
printWindow.document.open();
if (!document.getElementById("is_descript").checked) {
printWindow.document.write(`
<html>
<head>
<title>Print QRCode</title>
<style>
body { font-family: Arial, sans-serif; }
</style>
</head>
<body>
${html}
<style>
flex {
display: flex;
flex-wrap: wrap;
}
barcode {
padding: 10px;
margin: 5px;
border-style: solid;
}
text {
width: 100%;
text-align: center;
display: block;
margin-top: 5px;
font-size: 10px;
}
</style>
</body>
</html>
`);
} else {
printWindow.document.write(`
<html>
<head>
<title>Print QRCode</title>
<style>
body { font-family: Arial, sans-serif; }
</style>
</head>
<body>
${html}
<style>
flex {
display: flex;
flex-wrap: wrap;
}
barcode {
padding: 10px;
margin: 5px;
border-style: solid;
}
j1 {
width: 100%;
display: block;
margin-left: 8px;
font-size: 12px;
font-weight:bold;
}
text {
width: 100%;
display: block;
margin-left: 8px;
font-size: 9px;
}
small {
width: 100%;
display: block;
margin-left: 8px;
font-size: 5px;
}
.column {
float: left;
}
.row:after {
content: "";
display: table;
clear: both;
}
</style>
</body>
</html>
`);
}
printWindow.document.close();
printWindow.print();
$('#modal_qrcode_generate').modal('hide');
}
genBtn.addEventListener('click', generate);
dlBtn.addEventListener('click', downloadPNG);
prnBtn.addEventListener('click', print);
// auto-generate initial QR
generate();
</script>
@endsection