Update index.html

index.html

@@ -941,18 +941,24 @@
     function normalizeText(text) {
       if (!text) return '';
       return text.toString().toLowerCase().trim()
-        .replace(/\s+/g, ' ');
+        .replace(/[่้๊๋์]/g, '')  // Remove Thai tonal marks
+        .replace(/\s+/g, ' ')    // Normalize spaces
+        .normalize('NFD').replace(/[\u0300-\u036f]/g, ''); // Remove accents
     }
 
-    // Search function supporting Thai, English, and numbers
+    // Advanced search function with multiple strategies
     function searchWorkers(query) {
       const normalizedQuery = normalizeText(query);
-      if (!normalizedQuery) {
+      if (!normalizedQuery || normalizedQuery.length < 1) {
         filteredData = [...allWorkerData];
         return filteredData;
       }
 
+      // Split query into individual terms
+      const searchTerms = normalizedQuery.split(/\s+/).filter(term => term.length > 0);
+      
       filteredData = allWorkerData.filter(worker => {
+        // Collect all searchable fields
         const searchFields = [
           worker.requestNumber,
           worker.englishName,
@@ -960,26 +966,119 @@
           worker.personalID,
           worker.workPermitNumber,
           worker.alienReferenceNumber,
-          worker.nationality
+          worker.nationality,
+          worker.age,
+          worker.birthDate
         ];
 
-        return searchFields.some(field => {
-          const normalizedField = normalizeText(field);
-          return normalizedField.includes(normalizedQuery);
+        // Normalize all fields
+        const normalizedFields = searchFields.map(field => normalizeText(field));
+        
+        // Strategy 1: Exact phrase match
+        const phraseMatch = normalizedFields.some(field => 
+          field.includes(normalizedQuery)
+        );
+        
+        // Strategy 2: All terms match (AND logic)
+        const allTermsMatch = searchTerms.every(term => 
+          normalizedFields.some(field => field.includes(term))
+        );
+        
+        // Strategy 3: Any term match (OR logic)
+        const anyTermMatch = searchTerms.some(term => 
+          normalizedFields.some(field => field.includes(term))
+        );
+        
+        // Strategy 4: Partial match with scoring
+        let partialMatchScore = 0;
+        searchTerms.forEach(term => {
+          normalizedFields.forEach(field => {
+            if (field.includes(term)) {
+              partialMatchScore++;
+            }
+          });
         });
+        
+        // Return true if any strategy matches
+        return phraseMatch || allTermsMatch || anyTermMatch || partialMatchScore > 0;
+      });
+
+      // Sort by relevance
+      filteredData.sort((a, b) => {
+        const aScore = calculateRelevanceScore(a, normalizedQuery, searchTerms);
+        const bScore = calculateRelevanceScore(b, normalizedQuery, searchTerms);
+        return bScore - aScore;
       });
 
       return filteredData;
     }
 
-    // Highlight matched text
+    // Calculate relevance score for sorting
+    function calculateRelevanceScore(worker, query, terms) {
+      let score = 0;
+      const fields = [
+        { value: worker.requestNumber, weight: 5 },
+        { value: worker.englishName, weight: 4 },
+        { value: worker.thaiName, weight: 4 },
+        { value: worker.personalID, weight: 3 },
+        { value: worker.workPermitNumber, weight: 3 },
+        { value: worker.alienReferenceNumber, weight: 2 },
+        { value: worker.nationality, weight: 1 }
+      ];
+
+      fields.forEach(field => {
+        const normalizedField = normalizeText(field.value);
+        
+        // Exact match bonus
+        if (normalizedField === query) {
+          score += 10 * field.weight;
+        }
+        
+        // Contains query
+        if (normalizedField.includes(query)) {
+          score += 5 * field.weight;
+        }
+        
+        // Contains all terms
+        if (terms.every(term => normalizedField.includes(term))) {
+          score += 3 * field.weight;
+        }
+        
+        // Contains any term
+        terms.forEach(term => {
+          if (normalizedField.includes(term)) {
+            score += field.weight;
+          }
+        });
+      });
+
+      return score;
+    }
+
+    // Highlight matched text with improved accuracy
     function highlightText(text, query) {
       if (!text || !query) return text || '';
+      
+      const normalizedText = normalizeText(text);
       const normalizedQuery = normalizeText(query);
-      if (!normalizedQuery) return text;
+      
+      if (!normalizedQuery || !normalizedText.includes(normalizedQuery)) {
+        return text;
+      }
 
-      const regex = new RegExp(`(${escapeRegex(query)})`, 'gi');
-      return text.replace(regex, '<span class="highlight">$1</span>');
+      // Find the actual position in the original text
+      const searchTerms = normalizedQuery.split(/\s+/);
+      let highlightedText = text;
+      
+      searchTerms.forEach(term => {
+        if (term.length > 0) {
+          // Create regex that's case-insensitive and handles Thai
+          const regex = new RegExp(`(${escapeRegex(term)})`, 'gi');
+          highlightedText = highlightedText.replace(regex, '<span class="highlight">$1</span>');
+        }
+      });
+      
+      return highlightedText;
     }
 
     function escapeRegex(string) {
@@ -1003,7 +1102,7 @@
       }
     }
 
-    // Render dropdown list
+    // Render dropdown list with improved performance
     function renderDropdownList(query = '') {
       const workers = searchWorkers(query);
       
@@ -1015,6 +1114,7 @@
               <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
             </svg>
             <p>ไม่พบผลลัพธ์สำหรับ "${query}"</p>
+            <small>ลองค้นหาโดยใช้เลขที่ขออนุญาต, ชื่อ, เลขบัตรประชาชน, หรือเลขใบอนุญาตทำงาน</small>
           </div>
         `;
         return;
@@ -1037,10 +1137,16 @@
             <img class="dropdown-item-image" 
                  src="${worker.profileImage || 'https://via.placeholder.com/40?text=N/A'}" 
                  alt="${worker.englishName || 'Worker'}"
+                 loading="lazy"
                  onerror="this.src='https://via.placeholder.com/40?text=N/A'"/>
             <div class="dropdown-item-content">
               <div class="dropdown-item-title">${displayName}</div>
               <div class="dropdown-item-subtitle">เลขที่: ${displayId}</div>
+              <div class="dropdown-item-meta">
+                <span>${worker.nationality || 'N/A'}</span>
+                <span>•</span>
+                <span>${worker.personalID ? worker.personalID.slice(-4) : 'N/A'}</span>
+              </div>
             </div>
             <div class="dropdown-item-checkbox" onclick="event.stopPropagation(); toggleWorkerSelection(${originalIndex})">
               <div class="custom-checkbox ${isChecked ? 'checked' : ''}" role="checkbox" aria-checked="${isChecked}">
@@ -1079,27 +1185,33 @@
 
     // Select a worker to view
     function selectWorker(index) {
-      currentIndex = index;
-      displayWorkerData(index);
-      updateDropdownHeader();
-      randomizeBothOverlays();
+      if (index >= 0 && index < allWorkerData.length) {
+        currentIndex = index;
+        displayWorkerData(index);
+        updateDropdownHeader();
+        randomizeBothOverlays();
+        toggleDropdown(true); // Close dropdown after selection
+      }
     }
 
     // Toggle worker selection for PDF download
     function toggleWorkerSelection(index) {
-      if (selectedWorkers.has(index)) {
-        selectedWorkers.delete(index);
-      } else {
-        selectedWorkers.add(index);
+      if (index >= 0 && index < allWorkerData.length) {
+        if (selectedWorkers.has(index)) {
+          selectedWorkers.delete(index);
+        } else {
+          selectedWorkers.add(index);
+        }
+        updateSelectionUI();
+        renderDropdownList(searchInput.value);
       }
-      updateSelectionUI();
-      renderDropdownList(searchInput.value);
     }
 
     // Update selection UI
     function updateSelectionUI() {
       const count = selectedWorkers.size;
       selectedCountEl.textContent = `เลือกแล้ว ${count} รายการ`;
+      selectedCountEl.className = count > 0 ? 'has-selection' : '';
       downloadSelectedBtn.disabled = count === 0;
       downloadSelectedBtn.innerHTML = `
         <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -1152,15 +1264,20 @@
 
     searchInput.addEventListener('input', (e) => {
       const query = e.target.value;
-      renderDropdownList(query);
       
-      if (query) {
-        searchIcon.style.display = 'none';
-        clearSearch.classList.add('visible');
-      } else {
-        searchIcon.style.display = 'block';
-        clearSearch.classList.remove('visible');
-      }
+      // Debounce search for better performance
+      clearTimeout(searchInput.debounceTimer);
+      searchInput.debounceTimer = setTimeout(() => {
+        renderDropdownList(query);
+        
+        if (query) {
+          searchIcon.style.display = 'none';
+          clearSearch.classList.add('visible');
+        } else {
+          searchIcon.style.display = 'block';
+          clearSearch.classList.remove('visible');
+        }
+      }, 300);
     });
 
     clearSearch.addEventListener('click', () => {
@@ -1181,6 +1298,13 @@
       }
     });
 
+    // Keyboard navigation for dropdown
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape' && isDropdownOpen) {
+        toggleDropdown(true);
+      }
+    });
+
     // Button event listeners
     grayscaleBtn.addEventListener('click', toggleGrayscale);
     downloadCurrentBtn.addEventListener('click', downloadCurrentPDF);
@@ -1194,12 +1318,26 @@
         console.error(`Image element with ID "${imgElementId}" not found.`);
         return;
       }
-      imgElement.src = src || defaultSrc;
+      
+      // Use a placeholder if no src is provided
+      if (!src) {
+        imgElement.src = defaultSrc;
+        imgElement.alt = workerName || type;
+        return;
+      }
+      
+      imgElement.src = src;
       imgElement.alt = workerName || type;
       imgElement.crossOrigin = "anonymous";
+      
       imgElement.onerror = function() {
-        imgElement.src = defaultSrc;
-        imgElement.alt = 'No Image';
+        console.warn(`Failed to load image for ${type}: ${src}`);
+        this.src = defaultSrc;
+        this.alt = 'No Image';
+      };
+      
+      imgElement.onload = function() {
+        console.log(`Successfully loaded image for ${type}: ${workerName}`);
       };
     }
 
@@ -1427,13 +1565,13 @@
       document.getElementById('alienReferenceReceipt').innerHTML = worker.alienReferenceNumber || 'N/A';
       document.getElementById('personalIDReceipt').innerHTML = worker.personalID || 'N/A';
       setImageSrc('profilePic', worker.profileImage, defaultProfileSrc, worker.englishName, 'profile picture');
+      
+      const currentDomain = window.location.origin;
+      const workerPageUrl = `${currentDomain}/worker.html?id=${encodeURIComponent(worker.requestNumber || '')}`;
+      const receiptUrl = `${currentDomain}/pdf.html?id=${encodeURIComponent(worker.requestNumber || '')}`;
 
-const currentDomain = window.location.origin;
-const workerPageUrl = `${currentDomain}/worker.html?id=${encodeURIComponent(worker.requestNumber || '')}`;
-const receiptUrl = `${currentDomain}/pdf.html?id=${encodeURIComponent(worker.requestNumber || '')}`;
-
-setImageSrc('qrCode', `https://api.qrserver.com/v1/create-qr-code/?size=300x300&ecc=H&data=${encodeURIComponent(workerPageUrl)}`, defaultQrCodeSrc, worker.englishName, 'work permit QR code');
-setImageSrc('receiptQrCode', `https://api.qrserver.com/v1/create-qr-code/?size=300x300&ecc=H&data=${encodeURIComponent(receiptUrl)}`, defaultReceiptQrCodeSrc, worker.englishName, 'receipt QR code');
+      setImageSrc('qrCode', `https://api.qrserver.com/v1/create-qr-code/?size=300x300&ecc=H&data=${encodeURIComponent(workerPageUrl)}`, defaultQrCodeSrc, worker.englishName, 'work permit QR code');
+      setImageSrc('receiptQrCode', `https://api.qrserver.com/v1/create-qr-code/?size=300x300&ecc=H&data=${encodeURIComponent(receiptUrl)}`, defaultReceiptQrCodeSrc, worker.englishName, 'receipt QR code');
       
       const timestamp = getCurrentTimestamp();
       const workPermitTimestamp = `เอกสารอิเล็กทรอนิกส์ฉบับนี้ถูกสร้างจากระบบอนุญาตทำงานคนต่างด้าวที่มีสถานะการทำงานไม่ถูกต้องตามกฎหมาย ตามมติคณะรัฐมนตรีเมื่อวันที่ 24 กันยายน 2567<br>โดยกรมการจัดหางาน กระทรวงแรงงาน<br>พิมพ์เอกสาร วันที่ 10/04/2568 ${timestamp} `;
@@ -1468,8 +1606,18 @@ setImageSrc('receiptQrCode', `https://api.qrserver.com/v1/create-qr-code/?size=3
         const percent = total > 0 ? Math.round((current / total) * 100) : 0;
         progressFill.style.width = `${percent}%`;
         progressText.textContent = `กำลังดาวน์โหลด ${current}/${total} (${percent}%)`;
+        
+        // Update progress bar color based on percentage
+        if (percent >= 90) {
+          progressFill.style.backgroundColor = '#10b981'; // Green
+        } else if (percent >= 50) {
+          progressFill.style.backgroundColor = '#f59e0b'; // Yellow
+        } else {
+          progressFill.style.backgroundColor = '#3b82f6'; // Blue
+        }
       } else {
         progressContainer.classList.remove('visible');
+        progressFill.style.width = '0%';
       }
     }
 
@@ -1482,104 +1630,167 @@ setImageSrc('receiptQrCode', `https://api.qrserver.com/v1/create-qr-code/?size=3
       grayscaleBtn.disabled = disabled;
     }
 
-    async function downloadPDF(workerItem, filenameSuffix = '') {
-  try {
-    randomizeBothOverlays();
-    const elements = [document.getElementById('page1-div'), document.getElementById('page2-div')];
-    const reqNum = workerItem.requestNumber || 'worker';
-const english = (workerItem.englishName || '').replace(/\s+/g, ''); // ตัดช่องว่างออก
-const last4 = reqNum.slice(-4); // เลขท้าย 4 หลัก
-
-// ถ้าอยากใช้เลขท้าย 4:
-const filename = `${last4}_${english || 'noname'}.pdf`;
-
-    const controls = document.querySelector('.controls-container');
-    if (controls) controls.style.display = 'none';
-    
-    if (allWorkerData[currentIndex].requestNumber !== workerItem.requestNumber) {
-      const tempIndex = allWorkerData.findIndex(w => w.requestNumber === workerItem.requestNumber);
-      if (tempIndex !== -1) displayWorkerData(tempIndex);
-    }
-    
-    const images = document.querySelectorAll('img');
-    await Promise.all(Array.from(images).map(img => {
-      return new Promise(resolve => {
-        if (img.complete && img.naturalWidth > 0) resolve();
-        else {
-          img.onload = resolve;
-          img.onerror = () => {
-            console.error(`Image failed to load: ${img.src}`);
-            resolve();
-          };
+    // Optimized PDF download function
+    async function downloadPDF(workerItem, isBatchDownload = false) {
+      try {
+        // Store current state
+        const originalIndex = currentIndex;
+        const originalGrayscale = isGrayscaleEnabled;
+        
+        // If this is a different worker, temporarily display it
+        if (workerItem.requestNumber !== allWorkerData[currentIndex]?.requestNumber) {
+          const tempIndex = allWorkerData.findIndex(w => w.requestNumber === workerItem.requestNumber);
+          if (tempIndex !== -1) {
+            displayWorkerData(tempIndex);
+            await new Promise(resolve => setTimeout(resolve, 500)); // Wait for data to load
+          }
         }
-      });
-    }));
-    
-    const container = document.createElement('div');
-    container.style.width = '892px';
-    container.style.height = '2522px';
-    container.className = 'pdf-export-container';
-    
-    const page1Clone = elements[0].cloneNode(true);
-    const page2Clone = elements[1].cloneNode(true);
-    page1Clone.style.marginBottom = '0';
-    page2Clone.style.marginTop = '0';
-    
-    container.appendChild(page1Clone);
-    container.appendChild(page2Clone);
-    document.body.appendChild(container);
-    
-    const allImages = container.querySelectorAll('img');
-    allImages.forEach(img => {
-      img.style.filter = 'grayscale(100%)';
-      img.style.webkitFilter = 'grayscale(100%)';
-    });
-   
-    
-    await new Promise(resolve => setTimeout(resolve, 100));
-    
-    const opt = {
-      margin: [0, 0, 0, 0],
-      filename: filename,
-      image: { type: 'jpeg', quality: 0.98 },
-      html2canvas: { 
-        scale: 3, 
-        useCORS: true, 
-        width: 892, 
-        height: 2522,
-        logging: false,
-        allowTaint: true,
-        backgroundColor: '#ffffff'
-      },
-      jsPDF: { 
-        unit: 'px', 
-        format: [892, 1261], 
-        orientation: 'portrait', 
-        compress: true 
+        
+        // Randomize overlays
+        randomizeBothOverlays();
+        await new Promise(resolve => setTimeout(resolve, 200)); // Wait for overlays
+        
+        // Hide controls during export
+        const controls = document.querySelector('.controls-container');
+        if (controls) controls.style.display = 'none';
+        
+        // Ensure all images are loaded
+        const images = document.querySelectorAll('img');
+        await Promise.all(Array.from(images).map(img => {
+          return new Promise(resolve => {
+            if (img.complete && img.naturalWidth > 0) {
+              resolve();
+            } else {
+              const timer = setTimeout(() => {
+                console.warn(`Timeout loading image: ${img.src}`);
+                resolve();
+              }, 5000);
+              
+              img.onload = () => {
+                clearTimeout(timer);
+                resolve();
+              };
+              img.onerror = () => {
+                clearTimeout(timer);
+                console.error(`Failed to load image: ${img.src}`);
+                resolve();
+              };
+            }
+          });
+        }));
+        
+        // Generate filename
+        const cleanName = (workerItem.englishName || workerItem.thaiName || 'unknown')
+          .replace(/[^a-zA-Z0-9ก-๙]/g, '_')
+          .substring(0, 20);
+        const reqNum = workerItem.requestNumber || '0000';
+        const last4 = reqNum.slice(-4);
+        const filename = `${last4}_${cleanName}_work_permit.pdf`;
+        
+        // Create container for PDF export
+        const container = document.createElement('div');
+        container.className = 'pdf-export-container';
+        container.style.width = '892px';
+        container.style.height = '2522px';
+        container.style.position = 'absolute';
+        container.style.left = '-9999px';
+        container.style.top = '0';
+        
+        // Clone the pages
+        const page1Clone = document.getElementById('page1-div').cloneNode(true);
+        const page2Clone = document.getElementById('page2-div').cloneNode(true);
+        
+        // Apply styles for PDF
+        [page1Clone, page2Clone].forEach(page => {
+          page.style.margin = '0';
+          page.style.padding = '0';
+          page.style.border = 'none';
+          
+          // Force grayscale for all images
+          page.querySelectorAll('img').forEach(img => {
+            img.style.filter = 'grayscale(100%)';
+            img.style.webkitFilter = 'grayscale(100%)';
+          });
+        });
+        
+        container.appendChild(page1Clone);
+        container.appendChild(page2Clone);
+        document.body.appendChild(container);
+        
+        // Wait a moment for rendering
+        await new Promise(resolve => setTimeout(resolve, 300));
+        
+        // Generate PDF
+        const opt = {
+          margin: [0, 0, 0, 0],
+          filename: filename,
+          image: { 
+            type: 'jpeg', 
+            quality: 0.95 
+          },
+          html2canvas: { 
+            scale: 2,
+            useCORS: true,
+            allowTaint: true,
+            backgroundColor: '#ffffff',
+            logging: false,
+            width: 892,
+            height: 2522,
+            scrollX: 0,
+            scrollY: 0,
+            windowWidth: 892
+          },
+          jsPDF: { 
+            unit: 'px', 
+            format: [892, 1261], 
+            orientation: 'portrait',
+            compress: true
+          }
+        };
+        
+        await html2pdf().set(opt).from(container).save();
+        
+        // Clean up
+        document.body.removeChild(container);
+        if (controls) controls.style.display = 'block';
+        
+        // Restore original state
+        if (originalIndex !== currentIndex) {
+          displayWorkerData(originalIndex);
+        }
+        
+        // Restore grayscale setting
+        if (originalGrayscale !== isGrayscaleEnabled) {
+          toggleGrayscale();
+        }
+        
+        return true;
+        
+      } catch (error) {
+        console.error('Error generating PDF:', error);
+        
+        // Ensure controls are visible
+        const controls = document.querySelector('.controls-container');
+        if (controls) controls.style.display = 'block';
+        
+        // Restore original worker view
+        if (currentIndex >= 0 && currentIndex < allWorkerData.length) {
+          displayWorkerData(currentIndex);
+        }
+        
+        if (!isBatchDownload) {
+          alert('เกิดข้อผิดพลาดในการสร้าง PDF กรุณาลองใหม่อีกครั้ง');
+        }
+        
+        return false;
       }
-    };
-    
-    await html2pdf().set(opt).from(container).save();
-    
-    document.body.removeChild(container);
-    if (controls) controls.style.display = 'block';
-    
-    if (allWorkerData[currentIndex].requestNumber !== workerItem.requestNumber) {
-      displayWorkerData(currentIndex);
-    }
-  } catch (error) {
-    console.error('Error generating PDF:', error);
-    alert('เกิดข้อผิดพลาดในการสร้าง PDF กรุณาลองใหม่อีกครั้ง');
-    const controls = document.querySelector('.controls-container');
-    if (controls) controls.style.display = 'block';
-  }
-}
+    }
 
     async function downloadCurrentPDF() {
       if (currentIndex >= 0 && currentIndex < allWorkerData.length) {
         setButtonsDisabled(true);
         try {
-          await downloadPDF(allWorkerData[currentIndex]);
+          await downloadPDF(allWorkerData[currentIndex], false);
         } catch (error) {
           alert('เกิดข้อผิดพลาดในการสร้าง PDF กรุณาลองใหม่อีกครั้ง');
         }
@@ -1596,29 +1807,58 @@ const filename = `${last4}_${english || 'noname'}.pdf`;
       }
 
       const selectedArray = Array.from(selectedWorkers).sort((a, b) => a - b);
-      const confirmDownload = confirm(`คุณต้องการดาวน์โหลดใบอนุญาตทำงานสำหรับพนักงาน ${selectedArray.length} รายการใช่หรือไม่?`);
+      const confirmDownload = confirm(`คุณต้องการดาวน์โหลดใบอนุญาตทำงานสำหรับพนักงาน ${selectedArray.length} รายการใช่หรือไม่?\n\nกระบวนการนี้อาจใช้เวลาสักครู่`);
       if (!confirmDownload) return;
 
       setButtonsDisabled(true);
       showProgress(true, 0, selectedArray.length);
 
+      let successCount = 0;
+      let failCount = 0;
+      const failList = [];
+
       for (let i = 0; i < selectedArray.length; i++) {
         const workerIndex = selectedArray[i];
+        const worker = allWorkerData[workerIndex];
+        
+        showProgress(true, i + 1, selectedArray.length);
+        
         try {
-          showProgress(true, i + 1, selectedArray.length);
-          displayWorkerData(workerIndex);
-          await downloadPDF(allWorkerData[workerIndex], `work_permit_${i + 1}`);
-          await new Promise(resolve => setTimeout(resolve, 800));
+          const success = await downloadPDF(worker, true);
+          if (success) {
+            successCount++;
+          } else {
+            failCount++;
+            failList.push(worker.requestNumber || `index: ${workerIndex}`);
+          }
+          
+          // Add delay between downloads to prevent browser overload
+          if (i < selectedArray.length - 1) {
+            await new Promise(resolve => setTimeout(resolve, 1000));
+          }
+          
         } catch (error) {
           console.error(`Error downloading PDF for worker at index ${workerIndex}:`, error);
-          continue;
+          failCount++;
+          failList.push(worker.requestNumber || `index: ${workerIndex}`);
         }
       }
 
       showProgress(false);
       setButtonsDisabled(false);
-      alert(`ดาวน์โหลดใบอนุญาตทำงานเรียบร้อยแล้ว ${selectedArray.length} รายการ`);
       
+      // Display results
+      let resultMessage = `ดาวน์โหลดสำเร็จ ${successCount} รายการ`;
+      if (failCount > 0) {
+        resultMessage += `\nล้มเหลว ${failCount} รายการ`;
+        if (failList.length > 0) {
+          resultMessage += `\nรายการที่ล้มเหลว: ${failList.slice(0, 5).join(', ')}${failList.length > 5 ? '...' : ''}`;
+        }
+      }
+      
+      alert(resultMessage);
+      
+      // Restore original view
       if (currentIndex >= 0 && currentIndex < allWorkerData.length) {
         displayWorkerData(currentIndex);
       }
@@ -1630,28 +1870,55 @@ const filename = `${last4}_${english || 'noname'}.pdf`;
         return;
       }
       
-      const confirmDownload = confirm(`คุณต้องการดาวน์โหลดใบอนุญาตทำงานสำหรับพนักงานทั้งหมด ${allWorkerData.length} รายการใช่หรือไม่?`);
+      const confirmDownload = confirm(`คุณต้องการดาวน์โหลดใบอนุญาตทำงานสำหรับพนักงานทั้งหมด ${allWorkerData.length} รายการใช่หรือไม่?\n\nกระบวนการนี้อาจใช้เวลานาน กรุณาอย่าปิดเบราว์เซอร์`);
       if (!confirmDownload) return;
 
       setButtonsDisabled(true);
       showProgress(true, 0, allWorkerData.length);
 
+      let successCount = 0;
+      let failCount = 0;
+      const failList = [];
+
       for (let i = 0; i < allWorkerData.length; i++) {
+        showProgress(true, i + 1, allWorkerData.length);
+        
         try {
-          showProgress(true, i + 1, allWorkerData.length);
-          displayWorkerData(i);
-          await downloadPDF(allWorkerData[i], `work_permit_${i + 1}`);
-          await new Promise(resolve => setTimeout(resolve, 800));
+          const success = await downloadPDF(allWorkerData[i], true);
+          if (success) {
+            successCount++;
+          } else {
+            failCount++;
+            failList.push(allWorkerData[i].requestNumber || `index: ${i}`);
+          }
+          
+          // Add delay between downloads
+          if (i < allWorkerData.length - 1) {
+            await new Promise(resolve => setTimeout(resolve, 800));
+          }
+          
         } catch (error) {
           console.error(`Error downloading PDF for worker at index ${i}:`, error);
-          continue;
+          failCount++;
+          failList.push(allWorkerData[i].requestNumber || `index: ${i}`);
         }
       }
 
       showProgress(false);
       setButtonsDisabled(false);
-      alert(`ดาวน์โหลดใบอนุญาตทำงานเรียบร้อยแล้ว ${allWorkerData.length} รายการ`);
       
+      // Display results
+      let resultMessage = `ดาวน์โหลดสำเร็จ ${successCount} รายการจากทั้งหมด ${allWorkerData.length} รายการ`;
+      if (failCount > 0) {
+        resultMessage += `\nล้มเหลว ${failCount} รายการ`;
+        if (failList.length > 0) {
+          resultMessage += `\nรายการที่ล้มเหลว (5 รายการแรก): ${failList.slice(0, 5).join(', ')}`;
+        }
+      }
+      
+      alert(resultMessage);
+      
+      // Restore original view
       if (currentIndex >= 0 && currentIndex < allWorkerData.length) {
         displayWorkerData(currentIndex);
       } else if (allWorkerData.length > 0) {
@@ -1663,10 +1930,36 @@ const filename = `${last4}_${english || 'noname'}.pdf`;
       try {
         await loadWorkerData();
         randomizeBothOverlays();
+        
+        // Add some CSS for highlighting
+        const style = document.createElement('style');
+        style.textContent = `
+          .highlight {
+            background-color: #ffeb3b;
+            color: #000;
+            font-weight: bold;
+            padding: 0 2px;
+            border-radius: 2px;
+          }
+          .dropdown-item-meta {
+            font-size: 12px;
+            color: #666;
+            margin-top: 2px;
+          }
+          .dropdown-item-meta span {
+            margin-right: 4px;
+          }
+          #selectedCount.has-selection {
+            color: #3b82f6;
+            font-weight: bold;
+          }
+        `;
+        document.head.appendChild(style);
+        
       } catch (e) {
         console.error('Error initializing application:', e);
       }
     };
-  </script>
+            </script>
 </body>
 </html>