<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ระบบตรวจสอบสลิปการโอนเงิน</title>
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- Main CSS -->
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- Debug Mode Indicator -->
<div class="debug-indicator" id="debug-indicator" style="display: none;">
🐛 DEBUG MODE
</div>
<div class="container">
<header class="header">
<h1><i class="bi bi-shield-check"></i> ระบบตรวจสอบสลิปการโอนเงิน</h1>
<p id="header-description">ตรวจสอบและดึงข้อมูลสลิปการโอนเงินอัตโนมัติ</p>
<!-- Progress Steps -->
<div class="progress-steps" id="progress-steps">
<div class="step active" data-step="upload">
<div class="step-icon"><i class="bi bi-cloud-upload"></i></div>
<div class="step-label">อัปโหลด</div>
</div>
<div class="step-connector"></div>
<div class="step" data-step="preview">
<div class="step-icon"><i class="bi bi-image"></i></div>
<div class="step-label">ตัวอย่าง</div>
</div>
<div class="step-connector"></div>
<div class="step" data-step="process">
<div class="step-icon"><i class="bi bi-gear"></i></div>
<div class="step-label">ประมวลผล</div>
</div>
<div class="step-connector"></div>
<div class="step" data-step="results">
<div class="step-icon"><i class="bi bi-check-circle"></i></div>
<div class="step-label">ผลลัพธ์</div>
</div>
</div>
</header>
<main class="main-content">
<!-- Upload Section -->
<section class="upload-section" id="upload-section">
<div class="section-header">
<h2><i class="bi bi-cloud-upload"></i> ขั้นตอนที่ 1: อัปโหลดสลิป</h2>
<p>เลือกวิธีการอัปโหลดสลิปการโอนเงินที่คุณต้องการตรวจสอบ</p>
</div>
<div class="upload-area" id="upload-area">
<div class="upload-icon">
<i class="bi bi-cloud-upload"></i>
</div>
<h3>เลือกวิธีการอัปโหลดสลิป</h3>
<p>ลากวางไฟล์ที่นี่ หรือเลือกวิธีอื่น</p>
<div class="upload-buttons">
<button class="btn btn-primary" id="file-btn">
<i class="bi bi-folder"></i> เลือกไฟล์
</button>
<button class="btn btn-secondary" id="camera-btn">
<i class="bi bi-camera"></i> ถ่ายรูป
</button>
<button class="btn btn-accent" id="qr-btn">
<i class="bi bi-qr-code-scan"></i> สแกน QR
</button>
</div>
<small class="upload-info">
รองรับไฟล์ JPG, PNG, WEBP ขนาดไม่เกิน 5MB
</small>
</div>
<div class="next-step-info">
<i class="bi bi-info-circle"></i>
<span>ขั้นตอนถัดไป: ตรวจสอบรูปภาพและเลือกพื้นที่ QR Code</span>
</div>
<input type="file" id="file-input" accept="image/*" style="display: none;">
</section>
<!-- Camera Section -->
<section class="camera-section" id="camera-section" style="display: none;">
<div class="camera-container">
<video id="camera-video" autoplay playsinline></video>
<canvas id="camera-canvas" style="display: none;"></canvas>
<div class="camera-overlay">
<div class="camera-frame"></div>
</div>
</div>
<div class="camera-controls">
<button class="btn btn-primary" id="capture-btn">
<i class="bi bi-camera"></i> ถ่ายรูป
</button>
<button class="btn btn-secondary" id="camera-cancel-btn">
<i class="bi bi-x"></i> ยกเลิก
</button>
</div>
</section>
<!-- Image Preview Section -->
<section class="image-preview-section" id="image-preview-section" style="display: none;">
<div class="section-header">
<h2><i class="bi bi-image"></i> ขั้นตอนที่ 2: ตรวจสอบรูปภาพ</h2>
<p>ตรวจสอบรูปภาพและเลือกพื้นที่ QR Code เพื่อเพิ่มความแม่นยำ</p>
</div>
<div class="image-preview-container">
<h3><i class="bi bi-image"></i> ตัวอย่างรูปภาพ</h3>
<!-- Image Display -->
<div class="preview-image-wrapper">
<img id="preview-image" src="" alt="Preview Image" class="preview-image">
<div class="qr-crop-overlay" id="qr-crop-overlay" style="display: none;">
<div class="crop-selection" id="crop-selection">
<div class="crop-handle top-left"></div>
<div class="crop-handle top-right"></div>
<div class="crop-handle bottom-left"></div>
<div class="crop-handle bottom-right"></div>
<div class="crop-handle top-center"></div>
<div class="crop-handle bottom-center"></div>
<div class="crop-handle left-center"></div>
<div class="crop-handle right-center"></div>
</div>
</div>
</div>
<!-- Bank Selection -->
<div class="bank-selection">
<h4><i class="bi bi-bank"></i> เลือกธนาคาร</h4>
<p class="bank-description">เลือกธนาคารเพื่อแสดงพื้นที่ QR แนะนำ หรือคลิก-ลากบนรูปเพื่อสร้างกรอบใหม่ ลากกรอบเพื่อเลื่อน ลากมุมเพื่อปรับขนาด</p>
<div class="bank-options">
<label class="bank-option">
<input type="radio" name="preview-bank-type" value="full" checked>
<span class="bank-label">ทั้งรูป (ไม่จำกัด QR)</span>
</label>
<label class="bank-option">
<input type="radio" name="preview-bank-type" value="SCB">
<span class="bank-label">ไทยพาณิชย์ (SCB)</span>
</label>
<label class="bank-option">
<input type="radio" name="preview-bank-type" value="KBANK">
<span class="bank-label">กสิกรไทย (KBANK)</span>
</label>
<label class="bank-option">
<input type="radio" name="preview-bank-type" value="BBL">
<span class="bank-label">กรุงเทพ (BBL)</span>
</label>
<label class="bank-option">
<input type="radio" name="preview-bank-type" value="KTB">
<span class="bank-label">กรุงไทย (KTB)</span>
</label>
<label class="bank-option">
<input type="radio" name="preview-bank-type" value="TTB">
<span class="bank-label">ทหารไทยธนชาต (TTB)</span>
</label>
<label class="bank-option">
<input type="radio" name="preview-bank-type" value="BAY">
<span class="bank-label">กรุงศรีอยุธยา (BAY)</span>
</label>
<label class="bank-option">
<input type="radio" name="preview-bank-type" value="GSB">
<span class="bank-label">ออมสิน (GSB)</span>
</label>
<label class="bank-option">
<input type="radio" name="preview-bank-type" value="custom">
<span class="bank-label">กำหนดเอง</span>
</label>
</div>
</div>
<!-- Actions -->
<div class="results-actions">
<button class="btn btn-primary" id="process-slip-btn">
<i class="bi bi-search"></i> ตรวจสอบสลิป
</button>
<button class="btn btn-secondary" id="preview-back-btn">
<i class="bi bi-arrow-left"></i> กลับ
</button>
<button class="btn btn-accent" id="change-image-btn">
<i class="bi bi-image"></i> เปลี่ยนรูป
</button>
</div>
<div class="next-step-info">
<i class="bi bi-info-circle"></i>
<span>ขั้นตอนถัดไป: ระบบจะประมวลผลและอ่านข้อมูลจากสลิป</span>
</div>
</div>
</section>
<!-- QR Scanner Section -->
<section class="qr-section" id="qr-section" style="display: none;">
<div class="qr-scanner-container">
<h3><i class="bi bi-qr-code-scan"></i> สแกน QR Code</h3>
<!-- QR Camera -->
<div class="qr-camera-container">
<video id="qr-video" autoplay playsinline></video>
<canvas id="qr-canvas" style="display: none;"></canvas>
<div class="qr-overlay">
<div class="qr-frame"></div>
<p class="qr-instruction">จัดให้ QR Code อยู่ในกรอบ</p>
</div>
</div>
<!-- QR Results -->
<div class="qr-results" id="qr-results" style="display: none;">
<h4><i class="bi bi-check-circle"></i> ผลการสแกน QR</h4>
<div class="qr-data-display">
<div class="qr-raw-section">
<label>ข้อมูลดิบ:</label>
<textarea id="qr-raw-display" readonly rows="3"></textarea>
</div>
<div class="qr-parsed-section">
<label>ข้อมูลที่ถอดรหัสแล้ว:</label>
<div class="parsed-data" id="parsed-qr-data">
<div class="data-item">
<span class="label">จำนวนเงิน:</span>
<span class="value" id="qr-amount-display">-</span>
</div>
<div class="data-item">
<span class="label">วันที่-เวลา:</span>
<span class="value" id="qr-datetime-display">-</span>
</div>
<div class="data-item">
<span class="label">ผู้โอน:</span>
<span class="value" id="qr-sender-display">-</span>
</div>
<div class="data-item">
<span class="label">ผู้รับ:</span>
<span class="value" id="qr-receiver-display">-</span>
</div>
<div class="data-item">
<span class="label">รหัสอ้างอิง:</span>
<span class="value" id="qr-reference-display">-</span>
</div>
</div>
</div>
</div>
<div class="qr-actions">
<button class="btn btn-primary" id="qr-scan-again-btn">
<i class="bi bi-arrow-counterclockwise"></i> สแกนใหม่
</button>
<button class="btn btn-accent" id="qr-copy-data-btn">
<i class="bi bi-clipboard"></i> คัดลอกข้อมูล
</button>
</div>
</div>
<div class="qr-controls">
<button class="btn btn-secondary" id="qr-cancel-btn">
<i class="bi bi-x"></i> ยกเลิก
</button>
</div>
</div>
</section>
<!-- Processing Section -->
<section class="processing-section" id="processing-section" style="display: none;">
<div class="section-header">
<h2><i class="bi bi-gear"></i> ขั้นตอนที่ 3: ประมวลผล</h2>
<p>กำลังอ่านข้อความและ QR Code จากสลิป กรุณารอสักครู่...</p>
</div>
<div class="processing-container">
<div class="processing-preview">
<img id="processing-image" src="" alt="Preview">
</div>
<div class="processing-status">
<div class="progress-bar">
<div class="progress-fill" id="progress-fill"></div>
</div>
<p id="processing-text">กำลังประมวลผล...</p>
</div>
</div>
</section>
<!-- Results Section -->
<section class="results-section" id="results-section" style="display: none;">
<div class="section-header">
<h2><i class="bi bi-check-circle"></i> ขั้นตอนที่ 4: ผลลัพธ์</h2>
<p>ผลการตรวจสอบสลิปการโอนเงินของคุณ</p>
</div>
<div class="results-container">
<div class="results-header">
<h2><i class="bi bi-check-circle-fill"></i> ผลการตรวจสอบ</h2>
<div class="verification-status" id="verification-status">
<span id="verification-text">ตรวจสอบแล้ว</span>
</div>
</div>
<!-- Main Slip Data -->
<div class="slip-data">
<h3><i class="bi bi-receipt"></i> ข้อมูลสลิป</h3>
<div class="data-row">
<span class="label">จำนวนเงิน:</span>
<span class="value amount" id="slip-amount">-</span>
</div>
<div class="data-row">
<span class="label">วันที่-เวลา:</span>
<span class="value" id="slip-datetime">-</span>
</div>
<div class="data-row">
<span class="label">ผู้โอน:</span>
<span class="value" id="slip-sender">-</span>
</div>
<div class="data-row">
<span class="label">ผู้รับ:</span>
<span class="value" id="slip-receiver">-</span>
</div>
<div class="data-row">
<span class="label">รหัสอ้างอิง:</span>
<span class="value" id="slip-reference">-</span>
</div>
<div class="data-row">
<span class="label">ข้อมูล QR ดิบ:</span>
<div class="qr-raw-data" id="qr-raw-text">
</div>
</div>
</div>
<!-- Raw OCR Data -->
<div class="raw-data-content" id="raw-data-content">
<div class="raw-data-section">
<h4>ข้อความดิบจาก OCR:</h4>
<textarea id="raw-ocr-text" readonly rows="5"></textarea>
</div>
</div>
<div class="results-actions">
<button class="btn btn-primary" id="copy-data-btn">
<i class="bi bi-clipboard"></i> คัดลอกข้อมูล
</button>
<button class="btn btn-accent" id="copy-raw-btn">
<i class="bi bi-code"></i> คัดลอกข้อมูลดิบ
</button>
<button class="btn btn-secondary" id="reset-btn">
<i class="bi bi-arrow-counterclockwise"></i> ตรวจสอบใหม่
</button>
</div>
<div class="next-step-info">
<i class="bi bi-check-circle"></i>
<span>การตรวจสอบเสร็จสิ้น! คุณสามารถคัดลอกข้อมูลหรือตรวจสอบสลิปใหม่</span>
</div>
</div>
</section>
<!-- Error Section -->
<section class="error-section" id="error-section" style="display: none;">
<div class="error-container">
<div class="error-icon">
<i class="bi bi-exclamation-triangle"></i>
</div>
<h3>เกิดข้อผิดพลาด</h3>
<p id="error-message">ไม่สามารถประมวลผลได้</p>
<button class="btn btn-primary" id="error-retry-btn">
<i class="bi bi-arrow-counterclockwise"></i> ลองใหม่
</button>
</div>
</section>
</main>
</div>
<!-- Notification Toast -->
<div class="toast" id="toast" style="display: none;">
<div class="toast-content">
<i class="toast-icon"></i>
<span class="toast-message"></span>
</div>
</div>
<!-- External Libraries -->
<script src="https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js"></script>
<!-- Application Modules -->
<script src="js/ImagePreviewManager.js"></script>
<script src="js/QRCropSelector.js"></script>
<script src="js/QRScanner.js"></script>
<script src="js/OCRProcessor.js"></script>
<script src="js/SlipParser.js"></script>
<script src="js/SlipVerifier.js"></script>
<script src="js/app.js"></script>
</body>
</html>