<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Receipt Pro</title>
<link href="https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<link rel="stylesheet" href="./css/style.css">
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js"></script>
</head>
<body>
<div class="app-container">
<aside class="left-panel">
<div class="panel-tabs">
<button class="panel-tab active" data-tab="templates"><i class="fa-solid fa-layer-group"></i> Templates</button>
<button class="panel-tab" data-tab="components"><i class="fa-solid fa-puzzle-piece"></i> Components</button>
</div>
<div class="panel-content">
<div id="tab-templates" class="tab-pane active">
<div class="toolbar-row">
<button id="btn-save-template" class="btn btn-success btn-sm"><i class="fa-solid fa-floppy-disk"></i> บันทึก Template</button>
</div>
<div id="templates-list"></div>
</div>
<div id="tab-components" class="tab-pane">
<div id="components-list"></div>
</div>
</div>
</aside>
<main class="center-panel">
<div class="toolbar">
<div class="toolbar-group">
<label>กระดาษ:</label>
<select id="paper-size">
<option value="a4">A4</option>
<option value="80mm" selected>80mm</option>
<option value="58mm">58mm</option>
</select>
</div>
<div class="toolbar-divider"></div>
<button id="btn-clear" class="btn btn-warning btn-sm"><i class="fa-solid fa-broom"></i> ล้าง</button>
<label class="btn btn-info btn-sm file-label">
<i class="fa-solid fa-file-import"></i> Import
<input id="import-file" type="file" accept="application/json">
</label>
<button id="btn-export" class="btn btn-info btn-sm"><i class="fa-solid fa-file-export"></i> Export</button>
<div class="toolbar-divider"></div>
<button id="btn-print" class="btn btn-primary btn-sm"><i class="fa-solid fa-print"></i> พิมพ์</button>
<button id="btn-save-receipt" class="btn btn-success btn-sm"><i class="fa-solid fa-receipt"></i> บันทึกใบเสร็จ</button>
</div>
<div class="canvas-area">
<div id="receipt-canvas" class="receipt-canvas paper-80mm">
<div id="drop-zone" class="drop-zone">
<div class="drop-zone-empty">
<div style="font-size:36px">📋</div>
<div>ลากคอมโพเนนต์มาวางที่นี่ หรือเลือก Template</div>
</div>
</div>
</div>
</div>
</main>
<aside class="right-panel">
<div class="panel-tabs">
<button class="panel-tab active" data-tab="properties" title="Properties"><i class="fa-solid fa-sliders"></i></button>
<button class="panel-tab" data-tab="items" title="รายการ"><i class="fa-solid fa-cart-shopping"></i></button>
<button class="panel-tab" data-tab="data" title="ข้อมูล"><i class="fa-solid fa-database"></i></button>
<button class="panel-tab" data-tab="receipts" title="ใบเสร็จ"><i class="fa-solid fa-clock-rotate-left"></i></button>
</div>
<div class="panel-content">
<div id="tab-properties" class="tab-pane active">
<div id="properties-content" class="empty-hint">เลือกคอมโพเนนต์เพื่อแก้ไข</div>
</div>
<div id="tab-items" class="tab-pane">
<div class="prop-group">
<h3>รายการสินค้า</h3>
<div id="items-list" class="items-list"></div>
<button id="btn-add-item" class="btn btn-primary btn-sm btn-block"><i class="fa-solid fa-plus"></i> เพิ่มรายการ</button>
</div>
</div>
<div id="tab-data" class="tab-pane">
<div class="prop-group">
<h3>ข้อมูลร้าน</h3>
<div class="prop-field"><label>ชื่อร้าน</label><input id="data-store-name" type="text"></div>
<div class="prop-field"><label>สาขา</label><input id="data-store-branch" type="text"></div>
<div class="prop-field"><label>ที่อยู่</label><textarea id="data-store-address"></textarea></div>
<div class="prop-field"><label>เบอร์โทร</label><input id="data-store-phone" type="text"></div>
<div class="prop-field"><label>เลขผู้เสียภาษี</label><input id="data-store-tax" type="text"></div>
<div class="prop-field"><label>โลโก้ร้าน (URL)</label><input id="data-store-logo" type="text" placeholder="https://..."></div>
<div class="prop-field"><label>อัปโหลดโลโก้</label><input id="upload-store-logo" type="file" accept="image/*"></div>
<div class="prop-field"><label>PromptPay ID</label><input id="data-store-promptpay" type="text" placeholder="เบอร์/เลขบัตรประชาชน"></div>
</div>
<div class="prop-group">
<h3>ข้อมูลใบเสร็จ</h3>
<div class="prop-field"><label>เลขที่ใบเสร็จ</label><input id="data-receipt-id" type="text"></div>
<div class="prop-field"><label>โต๊ะ</label><input id="data-table" type="text"></div>
<div class="prop-field"><label>พนักงาน</label><input id="data-staff" type="text"></div>
<div class="prop-field"><label>VAT (%)</label><input id="data-vat-rate" type="number" step="0.01" value="7"></div>
</div>
</div>
<div id="tab-receipts" class="tab-pane">
<div id="receipts-list"></div>
</div>
</div>
</aside>
</div>
<script src="./js/state.js"></script>
<script src="./js/templates.js"></script>
<script src="./js/components.js"></script>
<script src="./js/properties.js"></script>
<script src="./js/items.js"></script>
<script src="./js/storage.js"></script>
<script src="./js/print.js"></script>
<script src="./js/app.js"></script>
</body>
</html>