<?php
declare(strict_types=1);
require_once __DIR__ . '/../config/auth.php';
require_login();
require_permission('Bill Print Settings');
$title = 'Bill Print Settings';
function bps_h($v): string { return htmlspecialchars((string)$v, ENT_QUOTES, 'UTF-8'); }
require_once __DIR__ . '/../includes/header.php';
?>
<div class="container-fluid py-3">
  <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3"><div><h2 class="mb-1">Bill Print Settings</h2><div class="text-muted">Choose the paper profile for this browser/workstation, test the layout, and reuse the setting when printing an order.</div></div></div>
  <div class="alert alert-info"><strong>Important:</strong> select the physical printer in Chrome's print dialog. This page can control the bill layout/paper dimensions, but browsers do not allow a website to silently choose a printer or change the printer driver.</div>
  <div class="card shadow-sm mb-4"><div class="card-header fw-semibold">Paper / Printer Profile</div><div class="card-body">
    <div class="row g-3 align-items-end">
      <div class="col-12 col-md-5"><label class="form-label" for="paperFormat">Paper size</label><select class="form-select" id="paperFormat">
        <option value="a4" data-width="210" data-height="297" data-kind="sheet">A4 — 210 × 297 mm</option>
        <option value="a5" data-width="148" data-height="210" data-kind="sheet">A5 — 148 × 210 mm</option>
        <option value="80x80" data-width="80" data-height="80" data-kind="receipt">Thermal roll — 80 mm</option>
        <option value="76x80" data-width="76" data-height="80" data-kind="receipt">Thermal roll — 76 mm</option>
        <option value="57x58" data-width="57" data-height="58" data-kind="receipt">Thermal roll — 57/58 mm</option>
        <option value="58x50" data-width="58" data-height="50" data-kind="receipt">Thermal roll — 58 mm compact</option>
        <option value="56x45" data-width="56" data-height="45" data-kind="receipt">Thermal roll — 56 mm</option>
        <option value="dm55plain" data-width="139.7" data-height="279.4" data-kind="dotmatrix">Dot matrix — 5.5 × 11 in</option>
        <option value="dm95plain" data-width="241.3" data-height="279.4" data-kind="dotmatrix">Dot matrix — 9.5 × 11 in</option>
        <option value="custom" data-kind="custom">Custom paper</option>
      </select></div>
      <div class="col-6 col-md-2"><label class="form-label" for="marginTop">Top margin (mm)</label><input class="form-control" id="marginTop" type="number" min="0" max="40" step="0.5" value="2"></div>
      <div class="col-6 col-md-2"><label class="form-label" for="marginBottom">Bottom margin (mm)</label><input class="form-control" id="marginBottom" type="number" min="0" max="40" step="0.5" value="2"></div>
      <div class="col-6 col-md-2"><label class="form-label" for="marginLeft">Left margin (mm)</label><input class="form-control" id="marginLeft" type="number" min="0" max="40" step="0.5" value="2"></div>
      <div class="col-6 col-md-2"><label class="form-label" for="marginRight">Right margin (mm)</label><input class="form-control" id="marginRight" type="number" min="0" max="40" step="0.5" value="2"></div>
      <div class="col-6 col-md-2 custom-size-row" id="customWidthWrap"><label class="form-label" for="customWidth">Custom width (mm)</label><input class="form-control" id="customWidth" type="number" min="30" max="500" step="0.5" value="80"></div>
      <div class="col-6 col-md-2 custom-size-row" id="customHeightWrap"><label class="form-label" for="customHeight">Custom height (mm)</label><input class="form-control" id="customHeight" type="number" min="30" max="1000" step="0.5" value="100"></div>
    </div>
    <div class="d-flex flex-wrap gap-2 mt-3"><button class="btn btn-primary" id="saveSettings" type="button">Save This Workstation</button><button class="btn btn-outline-primary" id="testPrint" type="button">Print Test Page</button><button class="btn btn-outline-secondary" id="resetSettings" type="button">Reset to 80 mm</button></div>
    <div class="small text-muted mt-3" id="status" role="status"></div>
  </div></div>
  <div class="card shadow-sm"><div class="card-header fw-semibold">Print Test Preview</div><div class="card-body"><div id="testSheet" class="test-sheet"><div class="text-center"><h3>SC IT GLOBAL SERVICES</h3><div>SMART ORDER MANAGEMENT</div><strong>PRINT TEST</strong></div><hr><div>Order No: TEST-00001</div><div>Date: <?=date('Y-m-d')?></div><hr><table><thead><tr><th>Item</th><th>Qty</th><th>Amount</th></tr></thead><tbody><tr><td>NADU RICE</td><td>5.000 KG</td><td>5,000.00</td></tr><tr><td>Sample Long Product Name</td><td>2 BAG</td><td>2,400.00</td></tr></tbody><tfoot><tr><th colspan="2">Grand Total</th><th>7,400.00</th></tr></tfoot></table><hr><div class="text-center">Thank you for your business.</div></div></div></div>
</div>
<style>
.custom-size-row{display:none}.test-sheet{box-sizing:border-box;margin:0 auto;background:#fff;color:#000;border:1px dashed #c4ccd6;padding:6mm;width:80mm;max-width:100%;font:10px Arial,Helvetica,sans-serif;overflow-wrap:anywhere}.test-sheet h3{font-size:12px;margin:0 0 3px}.test-sheet table{width:100%;border-collapse:collapse;table-layout:fixed}.test-sheet th,.test-sheet td{text-align:left;padding:3px 1px;border-bottom:1px solid #ddd;overflow-wrap:anywhere}.test-sheet th:last-child,.test-sheet td:last-child{text-align:right;word-break:normal}.test-sheet td:nth-child(2),.test-sheet th:nth-child(2){text-align:center}@media print{.sidebar,.app-navbar,.card:not(:has(#testSheet)),.alert,.btn,.form-label,.form-control,.form-select{display:none!important}body{background:#fff!important}.main-content{padding:0!important}.test-sheet{width:var(--test-width,80mm)!important;max-width:none!important;margin:0!important;border:0!important;padding:var(--test-top,2mm) var(--test-right,2mm) var(--test-bottom,2mm) var(--test-left,2mm)!important;font-size:10px!important}.card:has(#testSheet){border:0!important;box-shadow:none!important}.card:has(#testSheet) .card-header{display:none!important}.card:has(#testSheet) .card-body{padding:0!important}}
</style>
<script>
(function(){
const $=id=>document.getElementById(id), key='smartOrderPrintSettings.v1', paper=$('paperFormat');
function num(id,min,max,def){const n=Number($(id).value);return Number.isFinite(n)&&n>=min&&n<=max?n:def;}
function size(){const o=paper.options[paper.selectedIndex];if(paper.value==='custom')return{width:num('customWidth',30,500,80),height:num('customHeight',30,1000,100),kind:'custom'};return{width:Number(o.dataset.width),height:Number(o.dataset.height),kind:o.dataset.kind||'sheet'};}
function margins(){return{top:num('marginTop',0,40,2),bottom:num('marginBottom',0,40,2),left:num('marginLeft',0,40,2),right:num('marginRight',0,40,2)};}
function apply(){const s=size(),m=margins();const receipt=s.kind==='receipt';$('customWidthWrap').style.display=paper.value==='custom'?'block':'none';$('customHeightWrap').style.display=paper.value==='custom'?'block':'none';$('testSheet').style.width=s.width+'mm';$('testSheet').style.padding=m.top+'mm '+m.right+'mm '+m.bottom+'mm '+m.left+'mm';document.documentElement.style.setProperty('--test-width',s.width+'mm');document.documentElement.style.setProperty('--test-top',m.top+'mm');document.documentElement.style.setProperty('--test-right',m.right+'mm');document.documentElement.style.setProperty('--test-bottom',m.bottom+'mm');document.documentElement.style.setProperty('--test-left',m.left+'mm');return{paper:paper.value,size:s,pageHeight:s.kind==='receipt'?100:s.height,margins:m};}
function load(){try{const d=JSON.parse(localStorage.getItem(key)||'null');if(!d)return;if(d.paper&&[...paper.options].some(o=>o.value===d.paper))paper.value=d.paper;if(d.margins){for(const k of ['top','bottom','left','right'])if(Number.isFinite(Number(d.margins[k])))$('margin'+k[0].toUpperCase()+k.slice(1)).value=d.margins[k];}if(d.size){if(Number.isFinite(Number(d.size.width)))$('customWidth').value=d.size.width;if(Number.isFinite(Number(d.size.height)))$('customHeight').value=d.size.height;}}catch(e){}}
function save(){const d=apply();try{localStorage.setItem(key,JSON.stringify(d));$('status').textContent='Saved for this browser/workstation. Open an order bill and choose the printer in the print dialog.';}catch(e){$('status').textContent='Browser storage is unavailable; these settings will apply only on this page.';}}
paper.addEventListener('change',()=>{const o=paper.options[paper.selectedIndex];if(o.dataset.kind==='sheet')for(const id of ['marginTop','marginBottom','marginLeft','marginRight'])$(id).value='10';else for(const id of ['marginTop','marginBottom','marginLeft','marginRight'])$(id).value='2';apply();});['marginTop','marginBottom','marginLeft','marginRight','customWidth','customHeight'].forEach(id=>$(id).addEventListener('input',apply));
$('saveSettings').addEventListener('click',save);$('resetSettings').addEventListener('click',()=>{paper.value='80x80';$('marginTop').value='2';$('marginBottom').value='2';$('marginLeft').value='2';$('marginRight').value='2';$('customWidth').value='80';$('customHeight').value='100';apply();save();});$('testPrint').addEventListener('click',()=>{const d=apply(),s=d.size;document.getElementById('status').textContent='In Chrome print dialog, select the matching printer and paper size. Scale should normally be 100% / Actual Size.';const style=document.createElement('style');style.id='testPrintPageRule';const testHeight=s.kind==='receipt'?Math.max(100,s.height):s.height;style.textContent='@page{size:'+s.width+'mm '+testHeight+'mm;margin:0}@media print{html,body{margin:0!important;padding:0!important;background:#fff!important}}';document.head.appendChild(style);window.print();style.remove();});
load();apply();
})();
</script>
<?php require_once __DIR__ . '/../includes/footer.php'; ?>
