ฟังชั่นที่เคยมีกลับใช่ไม่ได้ทำให้มันใช้ได้และมีตัวอย่างการใช้งานเต็มรูปแบบ

index.html

@@ -174,7 +174,6 @@
     <script src="components/navbar.js"></script>
     <script src="components/sidebar.js"></script>
     <script src="components/footer.js"></script>
-    
     <!-- Navigation Links -->
     <script>
         // Listen for data updates from dashboard
@@ -190,4 +189,4 @@
 <script src="script.js"></script>
     <script>feather.replace();</script>
 </body>
-</html>
+</html>

script.js

@@ -76,15 +76,17 @@ function setupGlobalListeners() {
     document.getElementById('bg2-file')?.addEventListener('change', e => handleBgFile('2', e.target.files[0]));
     document.getElementById('json-file')?.addEventListener('change', handleJsonUpload);
     document.getElementById('pdf-upload')?.addEventListener('change', handlePdfUpload);
-    
     // Sidebar Actions
     document.getElementById('btn-apply-bg')?.addEventListener('click', applyBg);
     document.getElementById('btn-load-sample')?.addEventListener('click', loadSample);
     document.getElementById('btn-download-pdf')?.addEventListener('click', downloadPDF);
     document.getElementById('btn-download-all')?.addEventListener('click', downloadAllPDFs);
     document.getElementById('btn-qr-modal')?.addEventListener('click', openQRModal);
-
-    // View Switching
+    document.getElementById('btn-export-layout')?.addEventListener('click', exportLayout);
+    document.getElementById('btn-save-layout')?.addEventListener('click', saveLayoutToDB);
+    document.getElementById('btn-new-layout')?.addEventListener('click', newLayout);
+    document.getElementById('layout-import')?.addEventListener('change', (e) => importLayout(e.target.files[0]));
+// View Switching
     document.querySelectorAll('.tab-btn').forEach(btn => {
         btn.addEventListener('click', () => switchTab(btn.dataset.tab));
     });
@@ -106,15 +108,16 @@ function setupGlobalListeners() {
             if(modal) modal.classList.add('hidden');
         });
     });
-
     // QR Actions
     document.getElementById('qr-url')?.addEventListener('input', updateQRPreview);
     document.getElementById('btn-qr-apply')?.addEventListener('click', applyQRAndDownload);
     
     // History
     document.addEventListener('show-history', showHistory);
-
-    // Keyboard
+    
+    // Layout Management
+    document.addEventListener('layout-saved', updateFileCount);
+// Keyboard
     document.addEventListener('keydown', (e) => {
         if (e.ctrlKey || e.metaKey) {
             if (e.key === '=') { e.preventDefault(); zoomIn(); }
@@ -723,8 +726,64 @@ function updateTemplateZoom() {
         p.style.marginBottom = `${(1261 * (state.scale - 1))}px`;
     });
 }
-
 // --- Export & Generation ---
+async function exportLayout() {
+    const layout = await saveLayoutToStorage();
+    const name = document.getElementById('layout-name-input').value || layout.metadata.name || 'layout';
+    layout.metadata.name = name;
+    
+    const blob = new Blob([JSON.stringify(layout, null, 2)], { type: 'application/json' });
+    const link = document.createElement('a');
+    link.href = URL.createObjectURL(blob);
+    link.download = `${name}_${new Date().getTime()}.json`;
+    link.click();
+    
+    toast('Layout Exported', 'success');
+}
+
+async function importLayout(file) {
+    if (!file || !file.name.endsWith('.json')) {
+        toast('Please select a layout JSON file', 'error');
+        return;
+    }
+    
+    document.getElementById('layout-import-name').textContent = file.name;
+    
+    const reader = new FileReader();
+    reader.onload = async (e) => {
+        try {
+            const layout = JSON.parse(e.target.result);
+            if (!layout.fields || !layout.pages) {
+                throw new Error('Invalid layout format');
+            }
+            
+            state.currentLayoutConfig = layout;
+            applyLayoutConfig(layout);
+            
+            // Update form inputs
+            document.getElementById('layout-name-input').value = layout.metadata?.name || 'Imported Layout';
+            
+            // Load background images if they are base64
+            layout.pages.forEach(pageConfig => {
+                if (pageConfig.background && pageConfig.background.startsWith('data:')) {
+                    if (pageConfig.id === 'page1') {
+                        state.bg1B64 = pageConfig.background;
+                    } else if (pageConfig.id === 'page2') {
+                        state.bg2B64 = pageConfig.background;
+                    }
+                }
+            });
+            
+            toast('Layout Imported Successfully', 'success');
+            state.isLayoutLoaded = true;
+        } catch (err) {
+            toast('Failed to import layout: ' + err.message, 'error');
+            debugLog(err);
+        }
+    };
+    reader.readAsText(file);
+}
+
 async function downloadPDF() {
     if (state.data.length === 0) {
         toast('No data to export', 'error');
@@ -732,7 +791,7 @@ async function downloadPDF() {
     }
     
     loading(true, 'Generating PDF...');
-    try {
+try {
         const data = state.data[state.currentIndex];
         const layout = await saveLayoutToStorage(); // Capture current layout
         const element = document.createElement('div');
@@ -783,7 +842,6 @@ async function downloadPDF() {
 
         await html2pdf().set(opt).from(element).save();
         document.body.removeChild(element);
-        
         // Save layout to history
         const doc = {
             id: Date.now().toString(),
@@ -795,7 +853,7 @@ async function downloadPDF() {
         await saveDoc(doc);
         
         toast('PDF Downloaded & Layout Saved', 'success');
-    } catch (e) {
+} catch (e) {
         toast('Generation Failed', 'error');
         debugLog(e);
     } finally {
@@ -1016,7 +1074,6 @@ async function showHistory() {
     }
     document.getElementById('history-modal').classList.remove('hidden');
 }
-
 // Utils
 function rgbToHex(rgb) {
     if (!rgb) return '#000000';
@@ -1024,4 +1081,131 @@ function rgbToHex(rgb) {
     const rgbValues = rgb.match(/\d+/g);
     if (!rgbValues) return '#000000';
     return "#" + ((1 << 24) + (parseInt(rgbValues[0]) << 16) + (parseInt(rgbValues[1]) << 8) + parseInt(rgbValues[2])).toString(16).slice(1);
-}
+}
+
+// --- Complete Usage Examples ---
+function showUsageExamples() {
+    console.log('=== PDF Layout Wizard - Complete Usage Examples ===\n');
+    
+    console.log('1. BASIC USAGE:');
+    console.log('   - Load sample data: Click "Load Sample" in sidebar');
+    console.log('   - Edit field positions: Toggle Design Mode (pencil icon in navbar)');
+    console.log('   - Download PDF: Click "Download PDF" in sidebar');
+    
+    console.log('\n2. ADVANCED FEATURES:');
+    console.log('   ├─ Layout Management:');
+    console.log('   │  • Export Layout: Design Mode → Export Layout');
+    console.log('   │  • Import Layout: Sidebar → Import Layout');
+    console.log('   │  • Save Layout: Design Mode → Save Layout to History');
+    console.log('   │  • New Layout: Design Mode → New Layout');
+    console.log('   ├─ Data Management:');
+    console.log('   │  • JSON Import: Sidebar → Import JSON');
+    console.log('   │  • Data Dashboard: Navbar → Database icon');
+    console.log('   │  • Record Switching: Sidebar dropdown');
+    console.log('   ├─ PDF Features:');
+    console.log('   │  • PDF Upload: Sidebar → Import PDF');
+    console.log('   │  • PDF Viewer: Tab switch → PDF Viewer');
+    console.log('   │  • QR Integration: Navbar → Grid icon');
+    console.log('   └─ Export Options:');
+    console.log('      • Single PDF: Sidebar → Download PDF');
+    console.log('      • Batch Export: Sidebar → Download All');
+    console.log('      • Layout Export: Design Mode → Export Layout');
+    
+    console.log('\n3. KEYBOARD SHORTCUTS:');
+    console.log('   - Ctrl + S: Download PDF');
+    console.log('   - Ctrl + =: Zoom In');
+    console.log('   - Ctrl + -: Zoom Out');
+    console.log('   - ESC: Close modals / Exit Design Mode');
+    
+    console.log('\n4. DESIGN MODE WORKFLOW:');
+    console.log('   Step 1: Click Design Mode button (pencil icon)');
+    console.log('   Step 2: Click and drag fields to position');
+    console.log('   Step 3: Select field to edit properties (size, color, weight)');
+    console.log('   Step 4: Export layout for reuse');
+    console.log('   Step 5: Exit Design Mode (ESC or button)');
+    
+    console.log('\n5. DATA WORKFLOW:');
+    console.log('   • JSON Format: Must be array of objects with numbered keys (1-12)');
+    console.log('   • Dashboard: Open in new tab for full CRUD operations');
+    console.log('   • Real-time Update: Dashboard changes reflect in main app');
+    
+    console.log('\n6. PDF WORKFLOW:');
+    console.log('   • Upload Base PDF: Use PDF as template');
+    console.log('   • View Mode: Switch to PDF tab to preview');
+    console.log('   • QR Addition: Add QR codes to existing PDF');
+    console.log('   • Zoom Controls: Bottom HUD controls');
+    
+    console.log('\n7. HISTORY & STORAGE:');
+    console.log('   • Auto-save: All generations saved to history');
+    console.log('   • Layout Persistence: Saved in browser IndexedDB');
+    console.log('   • Restore: Click history items to restore');
+    console.log('   • Export/Import: Share layouts across devices');
+    
+    console.log('\n8. CUSTOMIZATION:');
+    console.log('   • CSS Variables: Modify :root colors in style.css');
+    console.log('   • Field Mapping: Edit fieldToKey object in script.js');
+    console.log('   • Default Layouts: Create preset layouts');
+    console.log('   • Branding: Update navbar title and icons');
+    console.log('   • Theme: Toggle light/dark mode');
+    
+    console.log('\n9. SAMPLE COMMANDS:');
+    console.log('   loadSample()          // Load demo data');
+    console.log('   toggleDesignMode()    // Toggle field editing');
+    console.log('   exportLayout()        // Save current layout');
+    console.log('   newLayout()           // Reset to blank layout');
+    console.log('   showData(0)           // Show first data record');
+    console.log('   downloadPDF()         // Generate PDF');
+    console.log('   saveLayoutToDB()      // Save layout to history');
+    console.log('   importLayout(file)    // Import layout JSON');
+    
+    console.log('\n10. TROUBLESHOOTING:');
+    console.log('    • Images not showing: Enable CORS in browser');
+    console.log('    • PDF generation slow: Reduce image sizes');
+    console.log('    • Layout not saving: Check browser storage limits');
+    console.log('    • QR codes broken: Verify URL includes protocol');
+    console.log('    • Fields misaligned: Check zoom level is 100%');
+    
+    console.log('\n=== Ready to use! Check dashboard.html for data management ===');
+}
+
+// Auto-show usage on first load
+if (!localStorage.getItem('pdf_wizard_usage_shown')) {
+    setTimeout(showUsageExamples, 2000);
+    localStorage.setItem('pdf_wizard_usage_shown', 'true');
+}
+
+// Example of programmatic usage:
+/*
+// 1. Create custom data
+const customData = [{
+    "1": "John Doe",
+    "2": "Senior Developer", 
+    "3": "Engineering",
+    "4": "https://example.com/photo.jpg",
+    "5": "2024-01-15",
+    "6": "2025-01-15",
+    "7": "Tech Corp",
+    "8": "San Francisco",
+    "9": "94105",
+    "10": "USA",
+    "11": "EMP001",
+    "12": "DOC2024001"
+}];
+
+// 2. Load data programmatically
+state.data = customData;
+populateDataDropdown();
+showData(0);
+
+// 3. Enable design mode
+toggleDesignMode();
+
+// 4. Export layout programmatically
+setTimeout(() => {
+    document.getElementById('layout-name-input').value = 'My Custom Layout';
+    exportLayout();
+}, 5000);
+
+// 5. Generate PDF with data
+setTimeout(downloadPDF, 8000);
+*/

style.css

@@ -300,7 +300,6 @@ body.design-mode .page:hover::before {
     4%,60% { transform: translate(-2px, 0) skew(0deg); }
     62% { transform: translate(0, 0) skew(5deg); }
 }
-
 /* Creative field styling */
 .field {
     font-family: 'Comic Neue', cursive;
@@ -313,6 +312,114 @@ body.design-mode .page:hover::before {
     animation: rainbow 3s ease infinite;
 }
 
+/* Design Mode Enhancement */
+body.design-mode .field {
+    cursor: grab;
+    border: 1px dashed #3b82f6 !important;
+    background: rgba(59, 130, 246, 0.1);
+    min-width: 20px;
+    min-height: 1em;
+}
+
+body.design-mode .field:hover {
+    background: rgba(59, 130, 246, 0.2);
+}
+
+body.design-mode .field.selected {
+    border: 2px solid #10b981 !important;
+    background: rgba(16, 185, 129, 0.1);
+    z-index: 50;
+}
+
+body.design-mode .page {
+    box-shadow: 0 0 0 1px #3b82f6;
+}
+
+/* Layout Management Styles */
+#sidebar-design .form-control {
+    @apply w-full px-3 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-slate-800 dark:text-slate-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors;
+}
+
+#sidebar-design .form-control:focus {
+    @apply border-blue-500 ring-2 ring-blue-500;
+}
+
+/* Import/Export buttons */
+#sidebar-design label[for="layout-import"] {
+    @apply cursor-pointer hover:bg-blue-50 dark:hover:bg-blue-900/30 transition-colors;
+}
+
+/* Property controls styling */
+#field-controls .form-group {
+    @apply mb-4;
+}
+
+#field-controls label {
+    @apply block text-xs font-bold text-slate-500 dark:text-slate-400 uppercase mb-2;
+}
+
+#field-controls input[type="number"],
+#field-controls select,
+#field-controls input[type="color"] {
+    @apply w-full;
+}
+
+/* Layout name input */
+#layout-name-input {
+    @apply font-mono text-sm;
+}
+
+/* Success feedback for saved layouts */
+@keyframes saved-pulse {
+    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
+    70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
+    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
+}
+
+.saved-indicator {
+    animation: saved-pulse 1s;
+}
+
+/* Enhanced field selection */
+body.design-mode .field.selected::before {
+    content: '';
+    position: absolute;
+    top: -4px;
+    left: -4px;
+    right: -4px;
+    bottom: -4px;
+    border: 2px solid #10b981;
+    border-radius: 4px;
+    pointer-events: none;
+    animation: selected-glow 1s ease-in-out infinite alternate;
+}
+
+@keyframes selected-glow {
+    from { opacity: 0.5; }
+    to { opacity: 1; }
+}
+
+/* Make the design panel more prominent */
+#sidebar-design {
+    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+}
+
+[data-theme="dark"] #sidebar-design {
+    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
+}
+
+/* Usage examples styling */
+.usage-example {
+    @apply bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4 mb-4;
+}
+
+.usage-example h4 {
+    @apply font-bold text-blue-800 dark:text-blue-200 mb-2;
+}
+
+.usage-example code {
+    @apply bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded text-sm font-mono;
+}
 /* Make the template view more engaging */
 #template-view {
     perspective: 1000px;