\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jszip\/3.10.1\/jszip.min.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/FileSaver.js\/2.0.5\/FileSaver.min.js\"><\/script>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Sarabun:wght@400;700&display=swap');\n body { font-family: 'Sarabun', sans-serif; }\n .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.8); justify-content: center; align-items: center; padding: 1rem; }\n .modal-content-wrapper { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }\n .modal-image { margin: auto; display: block; max-width: 90%; max-height: 80vh; }\n .modal-close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; cursor: pointer; }\n .modal-nav { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: white; font-weight: bold; font-size: 20px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; background-color: rgba(0,0,0,0.5); }\n .prev { left: 0; border-radius: 3px 0 0 3px; }\n .next { right: 0; border-radius: 0 3px 3px 0; }\n .modal-nav:hover { background-color: rgba(0,0,0,0.8); }\n .category-btn.active { background-color: #4f46e5; color: white; }\n .download-btn:disabled, .view-gallery-btn:disabled { opacity: 0.5; cursor: not-allowed; }\n #category-filters-wrapper { position: sticky; top: 0; z-index: 50; background-color: #f9fafb; padding-top: 1rem; padding-bottom: 1rem; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }\n #search-container { position: relative; width: 100%; max-width: 500px; margin: 0 auto 1rem; }\n #clear-search-btn { display: none; }\n .details-modal-content { background-color: #fff; border-radius: 0.5rem; max-width: 500px; width: 100%; max-height: 90vh; overflow-y: auto; }\n\n \/* --- [\u0e40\u0e1e\u0e34\u0e48\u0e21] \u0e2a\u0e44\u0e15\u0e25\u0e4c\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e41\u0e16\u0e1a\u0e2b\u0e21\u0e27\u0e14\u0e2b\u0e21\u0e39\u0e48\u0e17\u0e35\u0e48\u0e40\u0e25\u0e37\u0e48\u0e2d\u0e19\u0e44\u0e14\u0e49 --- *\/\n #category-filters {\n display: flex;\n flex-wrap: nowrap; \/* \u0e1b\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e19\u0e01\u0e32\u0e23\u0e02\u0e36\u0e49\u0e19\u0e1a\u0e23\u0e23\u0e17\u0e31\u0e14\u0e43\u0e2b\u0e21\u0e48 *\/\n overflow-x: auto; \/* \u0e17\u0e33\u0e43\u0e2b\u0e49\u0e40\u0e25\u0e37\u0e48\u0e2d\u0e19\u0e41\u0e19\u0e27\u0e19\u0e2d\u0e19\u0e44\u0e14\u0e49 *\/\n -webkit-overflow-scrolling: touch; \/* \u0e17\u0e33\u0e43\u0e2b\u0e49\u0e40\u0e25\u0e37\u0e48\u0e2d\u0e19\u0e25\u0e37\u0e48\u0e19\u0e1a\u0e19 iOS *\/\n justify-content: flex-start; \/* \u0e08\u0e31\u0e14\u0e1b\u0e38\u0e48\u0e21\u0e0a\u0e34\u0e14\u0e0b\u0e49\u0e32\u0e22 *\/\n scrollbar-width: none; \/* \u0e0b\u0e48\u0e2d\u0e19 scrollbar \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a Firefox *\/\n }\n #category-filters::-webkit-scrollbar {\n display: none; \/* \u0e0b\u0e48\u0e2d\u0e19 scrollbar \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a Chrome, Safari *\/\n }\n #category-filters .category-btn {\n flex-shrink: 0; \/* \u0e1b\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e19\u0e1b\u0e38\u0e48\u0e21\u0e16\u0e39\u0e01\u0e1a\u0e35\u0e1a *\/\n }\n <\/style>\n<\/head>\n<body class=\"bg-gray-50\">\n\n <div class=\"container mx-auto px-4 sm:px-6 lg:px-8\">\n <header class=\"text-center my-8\">\n <h1 class=\"text-3xl md:text-4xl font-bold text-gray-800\">\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e40\u0e23\u0e32<\/h1>\n <p class=\"text-gray-600 mt-2\">\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32\u0e2d\u0e31\u0e1b\u0e40\u0e14\u0e15\u0e23\u0e32\u0e22\u0e27\u0e31\u0e19<\/p>\n <\/header>\n <\/div>\n\n <div id=\"category-filters-wrapper\">\n <div class=\"container mx-auto px-4\">\n <div id=\"search-container\">\n <input type=\"text\" id=\"search-input\" placeholder=\"\u0e04\u0e49\u0e19\u0e2b\u0e32\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32...\" class=\"w-full pl-4 pr-10 py-2 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-indigo-500\">\n <button id=\"clear-search-btn\" class=\"absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-gray-700\">\n <svg class=\"h-5 w-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z\" clip-rule=\"evenodd\"><\/path><\/svg>\n <\/button>\n <\/div>\n \n <div id=\"category-filters\" class=\"flex gap-2\"><\/div>\n <\/div>\n <\/div>\n \n <div class=\"container mx-auto p-4 sm:p-6 lg:px-8\">\n <div id=\"product-list\" class=\"grid grid-cols-2 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 sm:gap-6\">\n <p id=\"loading-message\" class=\"col-span-full text-center text-gray-500\">\u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32…<\/p>\n <\/div>\n <div id=\"error-message\" class=\"hidden col-span-full text-center mt-8 p-4 bg-red-100 text-red-700 rounded-lg\"><\/div>\n <\/div>\n\n \n <div id=\"imageModal\" class=\"modal\">\n <span class=\"modal-close\" id=\"imageModalCloseBtn\">×<\/span>\n <div class=\"modal-content-wrapper\">\n <a class=\"prev modal-nav\" id=\"prevBtn\">❮<\/a>\n <img class=\"modal-image\" id=\"modalImage\">\n <a class=\"next modal-nav\" id=\"nextBtn\">❯<\/a>\n <\/div>\n <\/div>\n \n \n <div id=\"detailsModal\" class=\"modal\">\n <div class=\"details-modal-content\">\n <div class=\"p-4 flex justify-between items-center border-b\">\n <h3 class=\"text-xl font-bold text-gray-800\">\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32<\/h3>\n <button id=\"detailsModalCloseBtn\" class=\"text-gray-500 hover:text-gray-800 text-3xl leading-none\">×<\/button>\n <\/div>\n <div id=\"detailsModalBody\" class=\"p-6 space-y-4\">\n \n <\/div>\n <\/div>\n <\/div>\n\n <script>\n const GOOGLE_SHEET_URL = 'https:\/\/docs.google.com\/spreadsheets\/d\/1ksWsiq0zuUPmF5NpeAw7Z3tJ-CcT3XpfsFdbtMC51NA\/edit?usp=sharing';\n\n const productListContainer = document.getElementById('product-list');\n const loadingMessage = document.getElementById('loading-message');\n const errorMessageContainer = document.getElementById('error-message');\n const categoryFiltersContainer = document.getElementById('category-filters');\n const searchInput = document.getElementById('search-input');\n const clearSearchBtn = document.getElementById('clear-search-btn');\n \n const imageModal = document.getElementById('imageModal');\n const modalImage = document.getElementById('modalImage');\n const imageModalCloseBtn = document.getElementById('imageModalCloseBtn');\n const prevBtn = document.getElementById('prevBtn');\n const nextBtn = document.getElementById('nextBtn');\n\n const detailsModal = document.getElementById('detailsModal');\n const detailsModalBody = document.getElementById('detailsModalBody');\n const detailsModalCloseBtn = document.getElementById('detailsModalCloseBtn');\n \n let allProducts = [];\n let currentGallery = { images: [], index: 0 };\n\n document.addEventListener('DOMContentLoaded', loadProducts);\n\n imageModalCloseBtn.onclick = () => imageModal.style.display = \"none\";\n prevBtn.onclick = (e) => { e.stopPropagation(); showGalleryImage(-1); };\n nextBtn.onclick = (e) => { e.stopPropagation(); showGalleryImage(1); };\n modalImage.onclick = (e) => e.stopPropagation();\n imageModal.onclick = () => imageModal.style.display = \"none\";\n \n detailsModalCloseBtn.onclick = () => detailsModal.style.display = \"none\";\n detailsModal.onclick = (e) => {\n if (e.target === detailsModal) {\n detailsModal.style.display = \"none\";\n }\n };\n\n searchInput.addEventListener('input', handleSearch);\n clearSearchBtn.addEventListener('click', clearSearch);\n\n async function loadProducts() {\n if (GOOGLE_SHEET_URL === 'YOUR_GOOGLE_SHEET_PUBLISHED_CSV_URL_HERE') {\n loadingMessage.style.display = 'none';\n errorMessageContainer.textContent = '\u0e01\u0e23\u0e38\u0e13\u0e32\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32 GOOGLE_SHEET_URL \u0e43\u0e19\u0e44\u0e1f\u0e25\u0e4c\u0e42\u0e04\u0e49\u0e14\u0e01\u0e48\u0e2d\u0e19\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19';\n errorMessageContainer.classList.remove('hidden');\n return;\n }\n function getCsvUrl(url) {\n return url.includes('\/edit') ? url.replace(\/\\\/edit.*$\/, '\/export?format=csv') : url;\n }\n const csvUrl = getCsvUrl(GOOGLE_SHEET_URL);\n try {\n const response = await fetch(csvUrl);\n if (!response.ok) throw new Error(`HTTP error! status: ${response.status}. <br><br>**\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e23\u0e08\u0e33:** \u0e04\u0e38\u0e13\u0e44\u0e14\u0e49\u0e01\u0e14 \"\u0e40\u0e1c\u0e22\u0e41\u0e1e\u0e23\u0e48\u0e44\u0e1b\u0e22\u0e31\u0e07\u0e40\u0e27\u0e47\u0e1a\" \u0e43\u0e19 Google Sheet \u0e41\u0e25\u0e49\u0e27\u0e2b\u0e23\u0e37\u0e2d\u0e22\u0e31\u0e07?`);\n const csvText = await response.text();\n if (csvText.trim().startsWith('<!DOCTYPE html>')) {\n throw new Error('\u0e25\u0e34\u0e07\u0e01\u0e4c\u0e17\u0e35\u0e48\u0e44\u0e14\u0e49\u0e21\u0e32\u0e40\u0e1b\u0e47\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a \u0e44\u0e21\u0e48\u0e43\u0e0a\u0e48\u0e44\u0e1f\u0e25\u0e4c CSV. \u0e01\u0e23\u0e38\u0e13\u0e32\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e27\u0e48\u0e32\u0e04\u0e38\u0e13\u0e44\u0e14\u0e49 \"\u0e40\u0e1c\u0e22\u0e41\u0e1e\u0e23\u0e48\u0e44\u0e1b\u0e22\u0e31\u0e07\u0e40\u0e27\u0e47\u0e1a\" \u0e40\u0e1b\u0e47\u0e19\u0e44\u0e1f\u0e25\u0e4c CSV \u0e41\u0e25\u0e49\u0e27');\n }\n allProducts = parseCSV(csvText);\n loadingMessage.style.display = 'none';\n displayCategories();\n const initialCategory = 'all';\n displayProducts(initialCategory);\n setActiveCategoryButton(initialCategory);\n } catch (error) {\n console.error('\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\u0e43\u0e19\u0e01\u0e32\u0e23\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25:', error);\n loadingMessage.style.display = 'none';\n errorMessageContainer.innerHTML = `\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14: ${error.message}`;\n errorMessageContainer.classList.remove('hidden');\n }\n }\n\n function parseCSV(csvText) {\n const rows = csvText.trim().split(\/\\r?\\n\/);\n const headers = rows[0].split(',').map(h => h.trim());\n const products = [];\n for (let i = 1; i < rows.length; i++) {\n const values = rows[i].split(\/,(?=(?:(?:[^\"]*\"){2})*[^\"]*$)\/).map(v => v.trim().replace(\/^\"|\"$\/g, ''));\n if (values.length >= 5) {\n let product = {};\n product.name = values[0];\n product.price = parseFloat(values[1]).toLocaleString('th-TH');\n product.unit = values[2];\n product.category = values[3];\n product.imageUrls = values[4].split(';').map(url => url.trim()).filter(url => url);\n product.notes = values[5] || '';\n products.push(product);\n }\n }\n return products;\n }\n \n function displayProducts(filterCategory, searchTerm = '') {\n productListContainer.innerHTML = '';\n let categoryFiltered = filterCategory === 'all' ? allProducts : allProducts.filter(p => p.category === filterCategory);\n const finalFiltered = searchTerm ? categoryFiltered.filter(p => p.name.toLowerCase().includes(searchTerm)) : categoryFiltered;\n\n if (finalFiltered.length === 0) {\n productListContainer.innerHTML = `<p class=\"col-span-full text-center text-gray-500\">\u0e44\u0e21\u0e48\u0e1e\u0e1a\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32\u0e17\u0e35\u0e48\u0e15\u0e23\u0e07\u0e01\u0e31\u0e19<\/p>`;\n return;\n }\n\n finalFiltered.forEach(product => {\n const card = document.createElement('div');\n card.className = \"bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 flex flex-col\";\n const firstImage = product.imageUrls[0] || 'https:\/\/placehold.co\/600x400\/e2e8f0\/333333?text=No+Image';\n \n card.innerHTML = `\n <div class=\"relative\">\n <img decoding=\"async\" src=\"${firstImage}\" alt=\"${product.name}\" class=\"w-full h-40 sm:h-48 object-cover cursor-pointer\" onerror=\"this.onerror=null;this.src='https:\/\/placehold.co\/600x400\/e2e8f0\/333333?text=No+Image';\">\n <\/div>\n <div class=\"p-3 sm:p-4 flex-grow flex flex-col\">\n <h3 class=\"text-base sm:text-lg font-bold text-gray-800 leading-tight\">${product.name}<\/h3>\n <p class=\"text-lg sm:text-xl font-bold text-indigo-600 mt-2 flex-grow\">\n \u0e3f${product.price}\n <span class=\"text-xs sm:text-sm font-normal text-gray-500\">${product.unit ? `\/${product.unit}` : ''}<\/span>\n <\/p>\n <div class=\"mt-4 pt-3 sm:pt-4 border-t border-gray-200 space-y-2\">\n <button class=\"view-details-btn w-full bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded transition duration-300 text-sm\">\n \u0e14\u0e39\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21\n <\/button>\n <button class=\"download-btn w-full bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded transition duration-300 text-sm\" ${product.imageUrls.length === 0 ? 'disabled' : ''}>\n \u0e14\u0e32\u0e27\u0e19\u0e4c\u0e42\u0e2b\u0e25\u0e14\u0e23\u0e39\u0e1b\n <\/button>\n <\/div>\n <\/div>\n `;\n productListContainer.appendChild(card);\n card.querySelector('img').addEventListener('click', () => openGallery(product.imageUrls, 0));\n card.querySelector('.view-details-btn').addEventListener('click', () => showDetailsModal(product));\n card.querySelector('.download-btn').addEventListener('click', (e) => downloadImages(e, product));\n });\n }\n \n function showDetailsModal(product) {\n let currentDetailIndex = 0;\n\n const updateDetailImage = () => {\n const imgElement = detailsModal.querySelector('#detail-image');\n const counterElement = detailsModal.querySelector('#detail-image-counter');\n if (imgElement) imgElement.src = product.imageUrls[currentDetailIndex] || 'https:\/\/placehold.co\/600x400\/e2e8f0\/333333?text=No+Image';\n if (counterElement) counterElement.textContent = `${currentDetailIndex + 1} \/ ${product.imageUrls.length}`;\n };\n\n let imageGalleryHtml = '';\n if (product.imageUrls.length > 0) {\n imageGalleryHtml = `\n <div class=\"relative\">\n <img decoding=\"async\" id=\"detail-image\" src=\"${product.imageUrls[0]}\" alt=\"${product.name}\" class=\"w-full h-64 object-cover rounded-lg mb-4\" onerror=\"this.onerror=null;this.src='https:\/\/placehold.co\/600x400\/e2e8f0\/333333?text=No+Image';\">\n ${product.imageUrls.length > 1 ? `\n <button id=\"detail-prev-btn\" class=\"modal-nav prev\">❮<\/button>\n <button id=\"detail-next-btn\" class=\"modal-nav next\">❯<\/button>\n <span id=\"detail-image-counter\" class=\"absolute bottom-2 right-2 bg-black bg-opacity-50 text-white text-xs px-2 py-1 rounded\">${1} \/ ${product.imageUrls.length}<\/span>\n ` : ''}\n <\/div>\n `;\n } else {\n imageGalleryHtml = `<img decoding=\"async\" src=\"https:\/\/placehold.co\/600x400\/e2e8f0\/333333?text=No+Image\" alt=\"${product.name}\" class=\"w-full h-64 object-cover rounded-lg mb-4\">`;\n }\n \n let notesHtml = '';\n if (product.notes) {\n if (product.notes.includes(';')) {\n const notesList = product.notes.split(';').map(note => `<li>${note.trim()}<\/li>`).join('');\n notesHtml = `<h4 class=\"font-bold text-gray-700\">\u0e2b\u0e21\u0e32\u0e22\u0e40\u0e2b\u0e15\u0e38:<\/h4><ul class=\"list-disc list-inside text-gray-600\">${notesList}<\/ul>`;\n } else {\n notesHtml = `<h4 class=\"font-bold text-gray-700\">\u0e2b\u0e21\u0e32\u0e22\u0e40\u0e2b\u0e15\u0e38:<\/h4><p class=\"text-gray-600\">${product.notes}<\/p>`;\n }\n }\n\n detailsModalBody.innerHTML = `\n ${imageGalleryHtml}\n <h3 class=\"text-2xl font-bold text-gray-900\">${product.name}<\/h3>\n <p class=\"text-2xl font-bold text-indigo-600\">\n \u0e3f${product.price}\n <span class=\"text-base font-normal text-gray-500\">${product.unit ? `\/${product.unit}` : ''}<\/span>\n <\/p>\n ${notesHtml}\n `;\n detailsModal.style.display = \"flex\";\n\n if (product.imageUrls.length > 1) {\n const detailPrevBtn = detailsModal.querySelector('#detail-prev-btn');\n const detailNextBtn = detailsModal.querySelector('#detail-next-btn');\n\n detailPrevBtn.onclick = (e) => {\n e.stopPropagation();\n currentDetailIndex = (currentDetailIndex - 1 + product.imageUrls.length) % product.imageUrls.length;\n updateDetailImage();\n };\n detailNextBtn.onclick = (e) => {\n e.stopPropagation();\n currentDetailIndex = (currentDetailIndex + 1) % product.imageUrls.length;\n updateDetailImage();\n };\n }\n }\n\n function setActiveCategoryButton(category) {\n document.querySelectorAll('.category-btn').forEach(btn => btn.classList.remove('active'));\n const activeButton = document.querySelector(`.category-btn[data-category=\"${category}\"]`);\n if (activeButton) activeButton.classList.add('active');\n }\n function displayCategories() {\n const categories = ['all', ...new Set(allProducts.map(p => p.category).filter(c => c))];\n categoryFiltersContainer.innerHTML = categories.map(category => `\n <button class=\"category-btn px-4 py-2 bg-white text-gray-700 rounded-full shadow-sm hover:bg-gray-200 transition\" data-category=\"${category}\">\n ${category === 'all' ? '\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14' : category}\n <\/button>\n `).join('');\n categoryFiltersContainer.addEventListener('click', (e) => {\n if (e.target.tagName === 'BUTTON') {\n const category = e.target.dataset.category;\n clearSearch();\n displayProducts(category);\n setActiveCategoryButton(category);\n }\n });\n }\n function handleSearch() {\n const searchTerm = searchInput.value.toLowerCase();\n const activeCategory = document.querySelector('.category-btn.active')?.dataset.category || 'all';\n displayProducts(activeCategory, searchTerm);\n clearSearchBtn.style.display = searchTerm ? 'flex' : 'none';\n }\n function clearSearch() {\n searchInput.value = '';\n handleSearch();\n }\n function openGallery(images, index) {\n if (!images || images.length === 0) return;\n currentGallery = { images, index };\n modalImage.src = images[index];\n imageModal.style.display = \"flex\";\n updateGalleryNav();\n }\n function showGalleryImage(direction) {\n currentGallery.index += direction;\n if (currentGallery.index >= currentGallery.images.length) currentGallery.index = 0;\n if (currentGallery.index < 0) currentGallery.index = currentGallery.images.length - 1;\n modalImage.src = currentGallery.images[currentGallery.index];\n updateGalleryNav();\n }\n function updateGalleryNav() {\n prevBtn.style.display = nextBtn.style.display = currentGallery.images.length > 1 ? 'block' : 'none';\n }\n async function downloadImages(event, product) {\n const button = event.currentTarget;\n button.disabled = true;\n button.textContent = '\u0e01\u0e33\u0e25\u0e31\u0e07\u0e40\u0e15\u0e23\u0e35\u0e22\u0e21\u0e44\u0e1f\u0e25\u0e4c...';\n const proxyUrl = 'https:\/\/corsproxy.io\/?'; \n try {\n const zip = new JSZip();\n const promises = product.imageUrls.map(async (url, index) => {\n const response = await fetch(`${proxyUrl}${encodeURIComponent(url)}`); \n if (!response.ok) throw new Error(`\u0e44\u0e21\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e42\u0e2b\u0e25\u0e14\u0e23\u0e39\u0e1b: ${url}`);\n const blob = await response.blob();\n const filename = `${product.name.replace(\/[\\s\/\\\\?%*:|\"<>]\/g, '_')}_${index + 1}.${blob.type.split('\/')[1] || 'jpg'}`;\n zip.file(filename, blob);\n });\n await Promise.all(promises);\n zip.generateAsync({ type: \"blob\" }).then(content => {\n saveAs(content, `${product.name.replace(\/[\\s\/\\\\?%*:|\"<>]\/g, '_')}_images.zip`);\n button.disabled = false;\n button.textContent = `\u0e14\u0e32\u0e27\u0e19\u0e4c\u0e42\u0e2b\u0e25\u0e14\u0e23\u0e39\u0e1b`;\n });\n } catch (error) {\n console.error(\"\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\u0e43\u0e19\u0e01\u0e32\u0e23\u0e14\u0e32\u0e27\u0e19\u0e4c\u0e42\u0e2b\u0e25\u0e14:\", error);\n alert(\"\u0e02\u0e2d\u0e2d\u0e20\u0e31\u0e22, \u0e44\u0e21\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e14\u0e32\u0e27\u0e19\u0e4c\u0e42\u0e2b\u0e25\u0e14\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e\u0e44\u0e14\u0e49 \u0e2d\u0e32\u0e08\u0e21\u0e35\u0e1b\u0e31\u0e0d\u0e2b\u0e32\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07 CORS \u0e2b\u0e23\u0e37\u0e2d\u0e25\u0e34\u0e07\u0e01\u0e4c\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e\u0e44\u0e21\u0e48\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07\");\n button.disabled = false;\n button.textContent = `\u0e14\u0e32\u0e27\u0e19\u0e4c\u0e42\u0e2b\u0e25\u0e14\u0e23\u0e39\u0e1b`;\n }\n }\n <\/script>\n\n<\/body>\n<\/html>\n\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32 \u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e40\u0e23\u0e32 \u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32\u0e2d\u0e31\u0e1b\u0e40\u0e14\u0e15\u0e23\u0e32\u0e22\u0e27\u0e31\u0e19 \u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32… × ❮ ❯ \u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32 ×<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-78","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/demo.cha-nan-ya.com\/index.php?rest_route=\/wp\/v2\/pages\/78","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.cha-nan-ya.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.cha-nan-ya.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.cha-nan-ya.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.cha-nan-ya.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=78"}],"version-history":[{"count":8,"href":"https:\/\/demo.cha-nan-ya.com\/index.php?rest_route=\/wp\/v2\/pages\/78\/revisions"}],"predecessor-version":[{"id":86,"href":"https:\/\/demo.cha-nan-ya.com\/index.php?rest_route=\/wp\/v2\/pages\/78\/revisions\/86"}],"wp:attachment":[{"href":"https:\/\/demo.cha-nan-ya.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=78"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":78,"date":"2025-08-20T07:02:14","date_gmt":"2025-08-20T07:02:14","guid":{"rendered":"https:\/\/demo.cha-nan-ya.com\/?page_id=78"},"modified":"2025-08-25T05:53:08","modified_gmt":"2025-08-25T05:53:08","slug":"test","status":"publish","type":"page","link":"https:\/\/demo.cha-nan-ya.com\/?page_id=78","title":{"rendered":"test"},"content":{"rendered":"\n\n\n\n \n \n \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jszip\/3.10.1\/jszip.min.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/FileSaver.js\/2.0.5\/FileSaver.min.js\"><\/script>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Sarabun:wght@400;700&display=swap');\n body { font-family: 'Sarabun', sans-serif; }\n .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.8); justify-content: center; align-items: center; padding: 1rem; }\n .modal-content-wrapper { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }\n .modal-image { margin: auto; display: block; max-width: 90%; max-height: 80vh; }\n .modal-close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; cursor: pointer; }\n .modal-nav { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: white; font-weight: bold; font-size: 20px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; background-color: rgba(0,0,0,0.5); }\n .prev { left: 0; border-radius: 3px 0 0 3px; }\n .next { right: 0; border-radius: 0 3px 3px 0; }\n .modal-nav:hover { background-color: rgba(0,0,0,0.8); }\n .category-btn.active { background-color: #4f46e5; color: white; }\n .download-btn:disabled, .view-gallery-btn:disabled { opacity: 0.5; cursor: not-allowed; }\n #category-filters-wrapper { position: sticky; top: 0; z-index: 50; background-color: #f9fafb; padding-top: 1rem; padding-bottom: 1rem; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }\n #search-container { position: relative; width: 100%; max-width: 500px; margin: 0 auto 1rem; }\n #clear-search-btn { display: none; }\n .details-modal-content { background-color: #fff; border-radius: 0.5rem; max-width: 500px; width: 100%; max-height: 90vh; overflow-y: auto; }\n\n \/* --- [\u0e40\u0e1e\u0e34\u0e48\u0e21] \u0e2a\u0e44\u0e15\u0e25\u0e4c\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e41\u0e16\u0e1a\u0e2b\u0e21\u0e27\u0e14\u0e2b\u0e21\u0e39\u0e48\u0e17\u0e35\u0e48\u0e40\u0e25\u0e37\u0e48\u0e2d\u0e19\u0e44\u0e14\u0e49 --- *\/\n #category-filters {\n display: flex;\n flex-wrap: nowrap; \/* \u0e1b\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e19\u0e01\u0e32\u0e23\u0e02\u0e36\u0e49\u0e19\u0e1a\u0e23\u0e23\u0e17\u0e31\u0e14\u0e43\u0e2b\u0e21\u0e48 *\/\n overflow-x: auto; \/* \u0e17\u0e33\u0e43\u0e2b\u0e49\u0e40\u0e25\u0e37\u0e48\u0e2d\u0e19\u0e41\u0e19\u0e27\u0e19\u0e2d\u0e19\u0e44\u0e14\u0e49 *\/\n -webkit-overflow-scrolling: touch; \/* \u0e17\u0e33\u0e43\u0e2b\u0e49\u0e40\u0e25\u0e37\u0e48\u0e2d\u0e19\u0e25\u0e37\u0e48\u0e19\u0e1a\u0e19 iOS *\/\n justify-content: flex-start; \/* \u0e08\u0e31\u0e14\u0e1b\u0e38\u0e48\u0e21\u0e0a\u0e34\u0e14\u0e0b\u0e49\u0e32\u0e22 *\/\n scrollbar-width: none; \/* \u0e0b\u0e48\u0e2d\u0e19 scrollbar \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a Firefox *\/\n }\n #category-filters::-webkit-scrollbar {\n display: none; \/* \u0e0b\u0e48\u0e2d\u0e19 scrollbar \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a Chrome, Safari *\/\n }\n #category-filters .category-btn {\n flex-shrink: 0; \/* \u0e1b\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e19\u0e1b\u0e38\u0e48\u0e21\u0e16\u0e39\u0e01\u0e1a\u0e35\u0e1a *\/\n }\n <\/style>\n<\/head>\n<body class=\"bg-gray-50\">\n\n <div class=\"container mx-auto px-4 sm:px-6 lg:px-8\">\n <header class=\"text-center my-8\">\n <h1 class=\"text-3xl md:text-4xl font-bold text-gray-800\">\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e40\u0e23\u0e32<\/h1>\n <p class=\"text-gray-600 mt-2\">\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32\u0e2d\u0e31\u0e1b\u0e40\u0e14\u0e15\u0e23\u0e32\u0e22\u0e27\u0e31\u0e19<\/p>\n <\/header>\n <\/div>\n\n <div id=\"category-filters-wrapper\">\n <div class=\"container mx-auto px-4\">\n <div id=\"search-container\">\n <input type=\"text\" id=\"search-input\" placeholder=\"\u0e04\u0e49\u0e19\u0e2b\u0e32\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32...\" class=\"w-full pl-4 pr-10 py-2 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-indigo-500\">\n <button id=\"clear-search-btn\" class=\"absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-gray-700\">\n <svg class=\"h-5 w-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z\" clip-rule=\"evenodd\"><\/path><\/svg>\n <\/button>\n <\/div>\n \n <div id=\"category-filters\" class=\"flex gap-2\"><\/div>\n <\/div>\n <\/div>\n \n <div class=\"container mx-auto p-4 sm:p-6 lg:px-8\">\n <div id=\"product-list\" class=\"grid grid-cols-2 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 sm:gap-6\">\n <p id=\"loading-message\" class=\"col-span-full text-center text-gray-500\">\u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32…<\/p>\n <\/div>\n <div id=\"error-message\" class=\"hidden col-span-full text-center mt-8 p-4 bg-red-100 text-red-700 rounded-lg\"><\/div>\n <\/div>\n\n \n <div id=\"imageModal\" class=\"modal\">\n <span class=\"modal-close\" id=\"imageModalCloseBtn\">×<\/span>\n <div class=\"modal-content-wrapper\">\n <a class=\"prev modal-nav\" id=\"prevBtn\">❮<\/a>\n <img class=\"modal-image\" id=\"modalImage\">\n <a class=\"next modal-nav\" id=\"nextBtn\">❯<\/a>\n <\/div>\n <\/div>\n \n \n <div id=\"detailsModal\" class=\"modal\">\n <div class=\"details-modal-content\">\n <div class=\"p-4 flex justify-between items-center border-b\">\n <h3 class=\"text-xl font-bold text-gray-800\">\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32<\/h3>\n <button id=\"detailsModalCloseBtn\" class=\"text-gray-500 hover:text-gray-800 text-3xl leading-none\">×<\/button>\n <\/div>\n <div id=\"detailsModalBody\" class=\"p-6 space-y-4\">\n \n <\/div>\n <\/div>\n <\/div>\n\n <script>\n const GOOGLE_SHEET_URL = 'https:\/\/docs.google.com\/spreadsheets\/d\/1ksWsiq0zuUPmF5NpeAw7Z3tJ-CcT3XpfsFdbtMC51NA\/edit?usp=sharing';\n\n const productListContainer = document.getElementById('product-list');\n const loadingMessage = document.getElementById('loading-message');\n const errorMessageContainer = document.getElementById('error-message');\n const categoryFiltersContainer = document.getElementById('category-filters');\n const searchInput = document.getElementById('search-input');\n const clearSearchBtn = document.getElementById('clear-search-btn');\n \n const imageModal = document.getElementById('imageModal');\n const modalImage = document.getElementById('modalImage');\n const imageModalCloseBtn = document.getElementById('imageModalCloseBtn');\n const prevBtn = document.getElementById('prevBtn');\n const nextBtn = document.getElementById('nextBtn');\n\n const detailsModal = document.getElementById('detailsModal');\n const detailsModalBody = document.getElementById('detailsModalBody');\n const detailsModalCloseBtn = document.getElementById('detailsModalCloseBtn');\n \n let allProducts = [];\n let currentGallery = { images: [], index: 0 };\n\n document.addEventListener('DOMContentLoaded', loadProducts);\n\n imageModalCloseBtn.onclick = () => imageModal.style.display = \"none\";\n prevBtn.onclick = (e) => { e.stopPropagation(); showGalleryImage(-1); };\n nextBtn.onclick = (e) => { e.stopPropagation(); showGalleryImage(1); };\n modalImage.onclick = (e) => e.stopPropagation();\n imageModal.onclick = () => imageModal.style.display = \"none\";\n \n detailsModalCloseBtn.onclick = () => detailsModal.style.display = \"none\";\n detailsModal.onclick = (e) => {\n if (e.target === detailsModal) {\n detailsModal.style.display = \"none\";\n }\n };\n\n searchInput.addEventListener('input', handleSearch);\n clearSearchBtn.addEventListener('click', clearSearch);\n\n async function loadProducts() {\n if (GOOGLE_SHEET_URL === 'YOUR_GOOGLE_SHEET_PUBLISHED_CSV_URL_HERE') {\n loadingMessage.style.display = 'none';\n errorMessageContainer.textContent = '\u0e01\u0e23\u0e38\u0e13\u0e32\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32 GOOGLE_SHEET_URL \u0e43\u0e19\u0e44\u0e1f\u0e25\u0e4c\u0e42\u0e04\u0e49\u0e14\u0e01\u0e48\u0e2d\u0e19\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19';\n errorMessageContainer.classList.remove('hidden');\n return;\n }\n function getCsvUrl(url) {\n return url.includes('\/edit') ? url.replace(\/\\\/edit.*$\/, '\/export?format=csv') : url;\n }\n const csvUrl = getCsvUrl(GOOGLE_SHEET_URL);\n try {\n const response = await fetch(csvUrl);\n if (!response.ok) throw new Error(`HTTP error! status: ${response.status}. <br><br>**\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e23\u0e08\u0e33:** \u0e04\u0e38\u0e13\u0e44\u0e14\u0e49\u0e01\u0e14 \"\u0e40\u0e1c\u0e22\u0e41\u0e1e\u0e23\u0e48\u0e44\u0e1b\u0e22\u0e31\u0e07\u0e40\u0e27\u0e47\u0e1a\" \u0e43\u0e19 Google Sheet \u0e41\u0e25\u0e49\u0e27\u0e2b\u0e23\u0e37\u0e2d\u0e22\u0e31\u0e07?`);\n const csvText = await response.text();\n if (csvText.trim().startsWith('<!DOCTYPE html>')) {\n throw new Error('\u0e25\u0e34\u0e07\u0e01\u0e4c\u0e17\u0e35\u0e48\u0e44\u0e14\u0e49\u0e21\u0e32\u0e40\u0e1b\u0e47\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a \u0e44\u0e21\u0e48\u0e43\u0e0a\u0e48\u0e44\u0e1f\u0e25\u0e4c CSV. \u0e01\u0e23\u0e38\u0e13\u0e32\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e27\u0e48\u0e32\u0e04\u0e38\u0e13\u0e44\u0e14\u0e49 \"\u0e40\u0e1c\u0e22\u0e41\u0e1e\u0e23\u0e48\u0e44\u0e1b\u0e22\u0e31\u0e07\u0e40\u0e27\u0e47\u0e1a\" \u0e40\u0e1b\u0e47\u0e19\u0e44\u0e1f\u0e25\u0e4c CSV \u0e41\u0e25\u0e49\u0e27');\n }\n allProducts = parseCSV(csvText);\n loadingMessage.style.display = 'none';\n displayCategories();\n const initialCategory = 'all';\n displayProducts(initialCategory);\n setActiveCategoryButton(initialCategory);\n } catch (error) {\n console.error('\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\u0e43\u0e19\u0e01\u0e32\u0e23\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25:', error);\n loadingMessage.style.display = 'none';\n errorMessageContainer.innerHTML = `\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14: ${error.message}`;\n errorMessageContainer.classList.remove('hidden');\n }\n }\n\n function parseCSV(csvText) {\n const rows = csvText.trim().split(\/\\r?\\n\/);\n const headers = rows[0].split(',').map(h => h.trim());\n const products = [];\n for (let i = 1; i < rows.length; i++) {\n const values = rows[i].split(\/,(?=(?:(?:[^\"]*\"){2})*[^\"]*$)\/).map(v => v.trim().replace(\/^\"|\"$\/g, ''));\n if (values.length >= 5) {\n let product = {};\n product.name = values[0];\n product.price = parseFloat(values[1]).toLocaleString('th-TH');\n product.unit = values[2];\n product.category = values[3];\n product.imageUrls = values[4].split(';').map(url => url.trim()).filter(url => url);\n product.notes = values[5] || '';\n products.push(product);\n }\n }\n return products;\n }\n \n function displayProducts(filterCategory, searchTerm = '') {\n productListContainer.innerHTML = '';\n let categoryFiltered = filterCategory === 'all' ? allProducts : allProducts.filter(p => p.category === filterCategory);\n const finalFiltered = searchTerm ? categoryFiltered.filter(p => p.name.toLowerCase().includes(searchTerm)) : categoryFiltered;\n\n if (finalFiltered.length === 0) {\n productListContainer.innerHTML = `<p class=\"col-span-full text-center text-gray-500\">\u0e44\u0e21\u0e48\u0e1e\u0e1a\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32\u0e17\u0e35\u0e48\u0e15\u0e23\u0e07\u0e01\u0e31\u0e19<\/p>`;\n return;\n }\n\n finalFiltered.forEach(product => {\n const card = document.createElement('div');\n card.className = \"bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 flex flex-col\";\n const firstImage = product.imageUrls[0] || 'https:\/\/placehold.co\/600x400\/e2e8f0\/333333?text=No+Image';\n \n card.innerHTML = `\n <div class=\"relative\">\n <img decoding=\"async\" src=\"${firstImage}\" alt=\"${product.name}\" class=\"w-full h-40 sm:h-48 object-cover cursor-pointer\" onerror=\"this.onerror=null;this.src='https:\/\/placehold.co\/600x400\/e2e8f0\/333333?text=No+Image';\">\n <\/div>\n <div class=\"p-3 sm:p-4 flex-grow flex flex-col\">\n <h3 class=\"text-base sm:text-lg font-bold text-gray-800 leading-tight\">${product.name}<\/h3>\n <p class=\"text-lg sm:text-xl font-bold text-indigo-600 mt-2 flex-grow\">\n \u0e3f${product.price}\n <span class=\"text-xs sm:text-sm font-normal text-gray-500\">${product.unit ? `\/${product.unit}` : ''}<\/span>\n <\/p>\n <div class=\"mt-4 pt-3 sm:pt-4 border-t border-gray-200 space-y-2\">\n <button class=\"view-details-btn w-full bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded transition duration-300 text-sm\">\n \u0e14\u0e39\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21\n <\/button>\n <button class=\"download-btn w-full bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded transition duration-300 text-sm\" ${product.imageUrls.length === 0 ? 'disabled' : ''}>\n \u0e14\u0e32\u0e27\u0e19\u0e4c\u0e42\u0e2b\u0e25\u0e14\u0e23\u0e39\u0e1b\n <\/button>\n <\/div>\n <\/div>\n `;\n productListContainer.appendChild(card);\n card.querySelector('img').addEventListener('click', () => openGallery(product.imageUrls, 0));\n card.querySelector('.view-details-btn').addEventListener('click', () => showDetailsModal(product));\n card.querySelector('.download-btn').addEventListener('click', (e) => downloadImages(e, product));\n });\n }\n \n function showDetailsModal(product) {\n let currentDetailIndex = 0;\n\n const updateDetailImage = () => {\n const imgElement = detailsModal.querySelector('#detail-image');\n const counterElement = detailsModal.querySelector('#detail-image-counter');\n if (imgElement) imgElement.src = product.imageUrls[currentDetailIndex] || 'https:\/\/placehold.co\/600x400\/e2e8f0\/333333?text=No+Image';\n if (counterElement) counterElement.textContent = `${currentDetailIndex + 1} \/ ${product.imageUrls.length}`;\n };\n\n let imageGalleryHtml = '';\n if (product.imageUrls.length > 0) {\n imageGalleryHtml = `\n <div class=\"relative\">\n <img decoding=\"async\" id=\"detail-image\" src=\"${product.imageUrls[0]}\" alt=\"${product.name}\" class=\"w-full h-64 object-cover rounded-lg mb-4\" onerror=\"this.onerror=null;this.src='https:\/\/placehold.co\/600x400\/e2e8f0\/333333?text=No+Image';\">\n ${product.imageUrls.length > 1 ? `\n <button id=\"detail-prev-btn\" class=\"modal-nav prev\">❮<\/button>\n <button id=\"detail-next-btn\" class=\"modal-nav next\">❯<\/button>\n <span id=\"detail-image-counter\" class=\"absolute bottom-2 right-2 bg-black bg-opacity-50 text-white text-xs px-2 py-1 rounded\">${1} \/ ${product.imageUrls.length}<\/span>\n ` : ''}\n <\/div>\n `;\n } else {\n imageGalleryHtml = `<img decoding=\"async\" src=\"https:\/\/placehold.co\/600x400\/e2e8f0\/333333?text=No+Image\" alt=\"${product.name}\" class=\"w-full h-64 object-cover rounded-lg mb-4\">`;\n }\n \n let notesHtml = '';\n if (product.notes) {\n if (product.notes.includes(';')) {\n const notesList = product.notes.split(';').map(note => `<li>${note.trim()}<\/li>`).join('');\n notesHtml = `<h4 class=\"font-bold text-gray-700\">\u0e2b\u0e21\u0e32\u0e22\u0e40\u0e2b\u0e15\u0e38:<\/h4><ul class=\"list-disc list-inside text-gray-600\">${notesList}<\/ul>`;\n } else {\n notesHtml = `<h4 class=\"font-bold text-gray-700\">\u0e2b\u0e21\u0e32\u0e22\u0e40\u0e2b\u0e15\u0e38:<\/h4><p class=\"text-gray-600\">${product.notes}<\/p>`;\n }\n }\n\n detailsModalBody.innerHTML = `\n ${imageGalleryHtml}\n <h3 class=\"text-2xl font-bold text-gray-900\">${product.name}<\/h3>\n <p class=\"text-2xl font-bold text-indigo-600\">\n \u0e3f${product.price}\n <span class=\"text-base font-normal text-gray-500\">${product.unit ? `\/${product.unit}` : ''}<\/span>\n <\/p>\n ${notesHtml}\n `;\n detailsModal.style.display = \"flex\";\n\n if (product.imageUrls.length > 1) {\n const detailPrevBtn = detailsModal.querySelector('#detail-prev-btn');\n const detailNextBtn = detailsModal.querySelector('#detail-next-btn');\n\n detailPrevBtn.onclick = (e) => {\n e.stopPropagation();\n currentDetailIndex = (currentDetailIndex - 1 + product.imageUrls.length) % product.imageUrls.length;\n updateDetailImage();\n };\n detailNextBtn.onclick = (e) => {\n e.stopPropagation();\n currentDetailIndex = (currentDetailIndex + 1) % product.imageUrls.length;\n updateDetailImage();\n };\n }\n }\n\n function setActiveCategoryButton(category) {\n document.querySelectorAll('.category-btn').forEach(btn => btn.classList.remove('active'));\n const activeButton = document.querySelector(`.category-btn[data-category=\"${category}\"]`);\n if (activeButton) activeButton.classList.add('active');\n }\n function displayCategories() {\n const categories = ['all', ...new Set(allProducts.map(p => p.category).filter(c => c))];\n categoryFiltersContainer.innerHTML = categories.map(category => `\n <button class=\"category-btn px-4 py-2 bg-white text-gray-700 rounded-full shadow-sm hover:bg-gray-200 transition\" data-category=\"${category}\">\n ${category === 'all' ? '\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14' : category}\n <\/button>\n `).join('');\n categoryFiltersContainer.addEventListener('click', (e) => {\n if (e.target.tagName === 'BUTTON') {\n const category = e.target.dataset.category;\n clearSearch();\n displayProducts(category);\n setActiveCategoryButton(category);\n }\n });\n }\n function handleSearch() {\n const searchTerm = searchInput.value.toLowerCase();\n const activeCategory = document.querySelector('.category-btn.active')?.dataset.category || 'all';\n displayProducts(activeCategory, searchTerm);\n clearSearchBtn.style.display = searchTerm ? 'flex' : 'none';\n }\n function clearSearch() {\n searchInput.value = '';\n handleSearch();\n }\n function openGallery(images, index) {\n if (!images || images.length === 0) return;\n currentGallery = { images, index };\n modalImage.src = images[index];\n imageModal.style.display = \"flex\";\n updateGalleryNav();\n }\n function showGalleryImage(direction) {\n currentGallery.index += direction;\n if (currentGallery.index >= currentGallery.images.length) currentGallery.index = 0;\n if (currentGallery.index < 0) currentGallery.index = currentGallery.images.length - 1;\n modalImage.src = currentGallery.images[currentGallery.index];\n updateGalleryNav();\n }\n function updateGalleryNav() {\n prevBtn.style.display = nextBtn.style.display = currentGallery.images.length > 1 ? 'block' : 'none';\n }\n async function downloadImages(event, product) {\n const button = event.currentTarget;\n button.disabled = true;\n button.textContent = '\u0e01\u0e33\u0e25\u0e31\u0e07\u0e40\u0e15\u0e23\u0e35\u0e22\u0e21\u0e44\u0e1f\u0e25\u0e4c...';\n const proxyUrl = 'https:\/\/corsproxy.io\/?'; \n try {\n const zip = new JSZip();\n const promises = product.imageUrls.map(async (url, index) => {\n const response = await fetch(`${proxyUrl}${encodeURIComponent(url)}`); \n if (!response.ok) throw new Error(`\u0e44\u0e21\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e42\u0e2b\u0e25\u0e14\u0e23\u0e39\u0e1b: ${url}`);\n const blob = await response.blob();\n const filename = `${product.name.replace(\/[\\s\/\\\\?%*:|\"<>]\/g, '_')}_${index + 1}.${blob.type.split('\/')[1] || 'jpg'}`;\n zip.file(filename, blob);\n });\n await Promise.all(promises);\n zip.generateAsync({ type: \"blob\" }).then(content => {\n saveAs(content, `${product.name.replace(\/[\\s\/\\\\?%*:|\"<>]\/g, '_')}_images.zip`);\n button.disabled = false;\n button.textContent = `\u0e14\u0e32\u0e27\u0e19\u0e4c\u0e42\u0e2b\u0e25\u0e14\u0e23\u0e39\u0e1b`;\n });\n } catch (error) {\n console.error(\"\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\u0e43\u0e19\u0e01\u0e32\u0e23\u0e14\u0e32\u0e27\u0e19\u0e4c\u0e42\u0e2b\u0e25\u0e14:\", error);\n alert(\"\u0e02\u0e2d\u0e2d\u0e20\u0e31\u0e22, \u0e44\u0e21\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e14\u0e32\u0e27\u0e19\u0e4c\u0e42\u0e2b\u0e25\u0e14\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e\u0e44\u0e14\u0e49 \u0e2d\u0e32\u0e08\u0e21\u0e35\u0e1b\u0e31\u0e0d\u0e2b\u0e32\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07 CORS \u0e2b\u0e23\u0e37\u0e2d\u0e25\u0e34\u0e07\u0e01\u0e4c\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e\u0e44\u0e21\u0e48\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07\");\n button.disabled = false;\n button.textContent = `\u0e14\u0e32\u0e27\u0e19\u0e4c\u0e42\u0e2b\u0e25\u0e14\u0e23\u0e39\u0e1b`;\n }\n }\n <\/script>\n\n<\/body>\n<\/html>\n\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32 \u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e40\u0e23\u0e32 \u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32\u0e2d\u0e31\u0e1b\u0e40\u0e14\u0e15\u0e23\u0e32\u0e22\u0e27\u0e31\u0e19 \u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32… × ❮ ❯ \u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32 ×<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-78","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/demo.cha-nan-ya.com\/index.php?rest_route=\/wp\/v2\/pages\/78","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.cha-nan-ya.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.cha-nan-ya.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.cha-nan-ya.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.cha-nan-ya.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=78"}],"version-history":[{"count":8,"href":"https:\/\/demo.cha-nan-ya.com\/index.php?rest_route=\/wp\/v2\/pages\/78\/revisions"}],"predecessor-version":[{"id":86,"href":"https:\/\/demo.cha-nan-ya.com\/index.php?rest_route=\/wp\/v2\/pages\/78\/revisions\/86"}],"wp:attachment":[{"href":"https:\/\/demo.cha-nan-ya.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=78"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}