| Server IP : 104.21.73.108 / Your IP : 216.73.216.59 Web Server : Apache/2 System : Linux cat167-197.static.lnwhostname.com 5.10.0-20-amd64 #1 SMP Debian 5.10.158-2 (2022-12-13) x86_64 User : paphayomho ( 1042) PHP Version : 5.6.40 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname MySQL : ON | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /home/paphayomho/domains/paphayomhospital.go.th/private_html/ |
Upload File : |
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ระบบทำบัตรผู้ป่วยออนไลน์ | โรงพยาบาลป่าพะยอม</title>
<meta name="description" content="ระบบทำบัตรผู้ป่วยออนไลน์ โรงพยาบาลป่าพะยอม จังหวัดพัทลุง">
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700;800&family=Noto+Sans+Thai:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<style>
/* ========== CSS Variables ========== */
:root {
--green-primary: #1E8E5A;
--green-dark: #155f3d;
--green-light: #e6f7ef;
--green-accent: #27ae74;
--blue-light: #EBF5FF;
--blue-accent: #3B82F6;
--gray-bg: #F8FAFC;
--gray-border: #E2E8F0;
--gray-text: #64748B;
--dark-bg: #0F1923;
--dark-card: #1A2535;
--dark-border: #2D3F55;
--dark-text: #CBD5E1;
--error: #EF4444;
--warning: #F59E0B;
--success: #10B981;
--font-th: 'Sarabun', 'Noto Sans Thai', sans-serif;
}
* { box-sizing: border-box; }
body {
font-family: var(--font-th);
background: var(--gray-bg);
color: #1e293b;
transition: background 0.3s, color 0.3s;
min-height: 100vh;
}
/* Dark Mode */
body.dark {
background: var(--dark-bg);
color: var(--dark-text);
}
body.dark .card { background: var(--dark-card); border-color: var(--dark-border); }
body.dark .form-input, body.dark .form-select { background: #0f1923; border-color: var(--dark-border); color: var(--dark-text); }
body.dark .form-input:focus, body.dark .form-select:focus { border-color: var(--green-primary); }
body.dark .section-header { background: linear-gradient(135deg, #1a3a2a, #0f1923); }
body.dark .step-bar { background: var(--dark-card); }
body.dark label { color: #94a3b8; }
body.dark .upload-zone { background: #0f1923; border-color: var(--dark-border); }
body.dark .upload-zone:hover { border-color: var(--green-primary); background: #1a2535; }
body.dark .consent-box { background: #1a2535; border-color: var(--dark-border); }
body.dark .step-connector { background: var(--dark-border); }
body.dark footer { background: var(--dark-card); border-color: var(--dark-border); }
/* ========== Layout ========== */
.container-max { max-width: 860px; margin: 0 auto; padding: 0 1rem; }
/* ========== Navbar ========== */
.navbar {
background: white;
border-bottom: 3px solid var(--green-primary);
position: sticky; top: 0; z-index: 100;
box-shadow: 0 2px 12px rgba(30,142,90,0.10);
transition: background 0.3s;
}
body.dark .navbar { background: var(--dark-card); border-bottom-color: var(--green-primary); }
.navbar-inner { display: flex; align-items: center; justify-content: space-between; padding: 0.7rem 1.2rem; max-width: 1100px; margin: 0 auto; }
.logo-wrap { display: flex; align-items: center; gap: 0.7rem; }
.logo-icon { width: 44px; height: 44px; background: var(--green-primary); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.logo-icon svg { width: 26px; height: 26px; fill: white; }
.logo-text { line-height: 1.2; }
.logo-text .t1 { font-size: 0.78rem; color: var(--gray-text); font-weight: 500; }
.logo-text .t2 { font-size: 1rem; font-weight: 800; color: var(--green-primary); }
.dark-toggle {
background: none; border: 2px solid var(--gray-border); border-radius: 50px; padding: 6px 14px;
font-size: 0.85rem; cursor: pointer; color: var(--gray-text); display: flex; align-items: center; gap: 6px;
transition: all 0.2s;
}
.dark-toggle:hover { border-color: var(--green-primary); color: var(--green-primary); }
body.dark .dark-toggle { border-color: var(--dark-border); color: var(--dark-text); }
/* ========== Hero Section ========== */
.hero {
background: linear-gradient(135deg, #0d5c35 0%, #1E8E5A 50%, #27ae74 100%);
color: white;
padding: 3.5rem 1.5rem 2.5rem;
text-align: center;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute; inset: 0;
background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.hero-badge {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25);
border-radius: 50px; padding: 5px 16px; font-size: 0.82rem; font-weight: 600;
margin-bottom: 1rem; backdrop-filter: blur(4px);
}
.hero h1 { font-size: clamp(1.6rem, 5vw, 2.4rem); font-weight: 800; margin-bottom: 0.4rem; line-height: 1.2; }
.hero h2 { font-size: clamp(1rem, 3vw, 1.3rem); font-weight: 600; opacity: 0.9; margin-bottom: 1.2rem; }
.hero p { font-size: clamp(0.9rem, 2.5vw, 1rem); opacity: 0.85; max-width: 580px; margin: 0 auto 2rem; line-height: 1.8; }
.reg-id-display {
display: inline-block; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25);
border-radius: 8px; padding: 6px 18px; font-size: 0.85rem; font-weight: 700;
letter-spacing: 1px; margin-bottom: 1.5rem; font-family: 'Courier New', monospace;
}
/* Step Indicators */
.steps-row {
display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: wrap;
margin-bottom: 2rem;
}
.step-item {
display: flex; flex-direction: column; align-items: center; gap: 6px;
background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2);
border-radius: 14px; padding: 14px 18px; min-width: 90px; backdrop-filter: blur(4px);
transition: all 0.2s;
}
.step-item .s-num {
width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.25);
display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.9rem;
}
.step-item .s-label { font-size: 0.78rem; font-weight: 600; text-align: center; line-height: 1.3; }
.step-connector { width: 28px; height: 2px; background: rgba(255,255,255,0.3); flex-shrink: 0; }
@media (max-width: 500px) {
.step-connector { width: 14px; }
.step-item { min-width: 72px; padding: 10px 10px; }
.step-item .s-label { font-size: 0.7rem; }
}
.btn-start {
background: white; color: var(--green-primary);
font-family: var(--font-th); font-weight: 800; font-size: 1.1rem;
padding: 14px 40px; border-radius: 50px; border: none; cursor: pointer;
box-shadow: 0 8px 24px rgba(0,0,0,0.2); transition: all 0.25s;
display: inline-flex; align-items: center; gap: 10px;
}
.btn-start:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,0.25); }
.btn-start:active { transform: translateY(0); }
/* ========== Form Pages ========== */
.page { display: none; }
.page.active { display: block; }
/* Step Bar */
.step-bar {
background: white; padding: 1rem 1.5rem;
border-bottom: 1px solid var(--gray-border);
transition: background 0.3s;
}
.step-bar-inner { max-width: 860px; margin: 0 auto; }
.step-track { display: flex; align-items: center; gap: 0; }
.step-dot-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; position: relative; }
.step-dot {
width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--gray-border);
display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700;
background: white; color: var(--gray-text); transition: all 0.3s; flex-shrink: 0;
}
body.dark .step-dot { background: var(--dark-card); }
.step-dot.active { background: var(--green-primary); border-color: var(--green-primary); color: white; box-shadow: 0 0 0 4px rgba(30,142,90,0.2); }
.step-dot.done { background: var(--success); border-color: var(--success); color: white; }
.step-dot-label { font-size: 0.7rem; font-weight: 600; color: var(--gray-text); white-space: nowrap; }
.step-dot-wrap.active .step-dot-label { color: var(--green-primary); font-weight: 700; }
.step-line { flex: 1; height: 2px; background: var(--gray-border); transition: background 0.3s; margin-bottom: 18px; }
.step-line.done { background: var(--success); }
/* ========== Cards ========== */
.card {
background: white; border-radius: 18px; border: 1px solid var(--gray-border);
margin-bottom: 1.2rem; overflow: hidden;
box-shadow: 0 2px 12px rgba(0,0,0,0.05);
transition: background 0.3s, border-color 0.3s;
}
.section-header {
background: linear-gradient(135deg, #e6f7ef, #f0faf5);
padding: 1rem 1.4rem;
border-bottom: 1px solid var(--gray-border);
display: flex; align-items: center; gap: 10px;
}
.section-header .sh-icon {
width: 36px; height: 36px; background: var(--green-primary); border-radius: 10px;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.section-header .sh-icon i { color: white; font-size: 0.9rem; }
.section-header h3 { font-size: 1rem; font-weight: 700; color: #1e293b; }
body.dark .section-header h3 { color: #e2e8f0; }
.section-header .sh-badge {
margin-left: auto; font-size: 0.72rem; padding: 3px 10px; border-radius: 50px;
font-weight: 600;
}
.sh-badge.required { background: #fee2e2; color: #dc2626; }
.sh-badge.optional { background: #e0f2fe; color: #0369a1; }
.card-body { padding: 1.4rem; }
/* ========== Form Fields ========== */
.field-group { margin-bottom: 1rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
@media (max-width: 580px) {
.field-row, .field-row-3 { grid-template-columns: 1fr; gap: 0.7rem; }
}
label {
display: block; font-size: 0.85rem; font-weight: 600; color: #374151; margin-bottom: 5px;
}
label .req { color: var(--error); margin-left: 2px; }
.form-input, .form-select {
width: 100%; padding: 11px 14px; border: 2px solid var(--gray-border); border-radius: 10px;
font-family: var(--font-th); font-size: 0.95rem; outline: none; transition: all 0.2s;
background: white; color: #1e293b;
}
.form-input:focus, .form-select:focus {
border-color: var(--green-primary);
box-shadow: 0 0 0 3px rgba(30,142,90,0.12);
}
.form-input.error { border-color: var(--error); box-shadow: 0 0 0 3px rgba(239,68,68,0.1); }
.error-msg { color: var(--error); font-size: 0.78rem; margin-top: 4px; display: none; font-weight: 500; }
.error-msg.show { display: block; }
.input-hint { color: var(--gray-text); font-size: 0.78rem; margin-top: 4px; }
/* Radio Group */
.radio-group { display: flex; gap: 10px; flex-wrap: wrap; }
.radio-opt input[type=radio] { display: none; }
.radio-opt label {
display: flex; align-items: center; gap: 7px; cursor: pointer;
padding: 9px 16px; border: 2px solid var(--gray-border); border-radius: 10px;
font-size: 0.9rem; font-weight: 500; transition: all 0.2s; margin: 0;
background: white; color: #374151;
}
body.dark .radio-opt label { background: var(--dark-card); color: var(--dark-text); border-color: var(--dark-border); }
.radio-opt input:checked + label {
border-color: var(--green-primary); background: var(--green-light); color: var(--green-dark);
}
body.dark .radio-opt input:checked + label { background: rgba(30,142,90,0.15); }
.radio-opt label::before {
content: ''; width: 16px; height: 16px; border-radius: 50%;
border: 2px solid var(--gray-border); flex-shrink: 0; transition: all 0.2s;
}
.radio-opt input:checked + label::before {
border-color: var(--green-primary); background: var(--green-primary);
box-shadow: inset 0 0 0 3px white;
}
/* Upload Zone */
.upload-zone {
border: 2.5px dashed var(--gray-border); border-radius: 12px; padding: 24px;
text-align: center; cursor: pointer; transition: all 0.2s;
background: var(--gray-bg);
}
.upload-zone:hover { border-color: var(--green-primary); background: var(--green-light); }
.upload-zone .uz-icon { font-size: 2rem; color: var(--green-primary); margin-bottom: 8px; }
.upload-zone .uz-title { font-weight: 700; font-size: 0.95rem; color: #374151; }
body.dark .upload-zone .uz-title { color: var(--dark-text); }
.upload-zone .uz-sub { font-size: 0.78rem; color: var(--gray-text); margin-top: 4px; }
.file-preview-list { margin-top: 10px; }
.file-preview-item {
display: flex; align-items: center; gap: 10px; padding: 8px 12px;
background: var(--green-light); border-radius: 8px; margin-top: 6px;
font-size: 0.85rem;
}
body.dark .file-preview-item { background: rgba(30,142,90,0.15); }
.file-preview-item .fp-icon { color: var(--green-primary); flex-shrink: 0; }
.file-preview-item .fp-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-preview-item .fp-remove { background: none; border: none; cursor: pointer; color: var(--error); font-size: 0.9rem; padding: 2px 6px; }
.file-preview-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
/* Consent */
.consent-box {
background: var(--gray-bg); border: 1px solid var(--gray-border); border-radius: 12px; padding: 1.2rem;
}
.consent-item { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.consent-item:last-child { margin-bottom: 0; }
.consent-item input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--green-primary); flex-shrink: 0; margin-top: 2px; cursor: pointer; }
.consent-item label { font-size: 0.9rem; line-height: 1.6; cursor: pointer; color: #374151; margin: 0; font-weight: 500; }
body.dark .consent-item label { color: var(--dark-text); }
/* ========== Buttons ========== */
.btn-primary {
background: var(--green-primary); color: white; border: none; border-radius: 12px;
font-family: var(--font-th); font-size: 1rem; font-weight: 700; padding: 13px 28px;
cursor: pointer; transition: all 0.25s; display: inline-flex; align-items: center; gap: 8px;
box-shadow: 0 4px 14px rgba(30,142,90,0.3);
}
.btn-primary:hover { background: var(--green-dark); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(30,142,90,0.35); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.btn-secondary {
background: white; color: #374151; border: 2px solid var(--gray-border); border-radius: 12px;
font-family: var(--font-th); font-size: 1rem; font-weight: 600; padding: 11px 24px;
cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; gap: 8px;
}
body.dark .btn-secondary { background: var(--dark-card); color: var(--dark-text); border-color: var(--dark-border); }
.btn-secondary:hover { border-color: var(--green-primary); color: var(--green-primary); }
.btn-full { width: 100%; justify-content: center; }
.btn-lg { padding: 16px 32px; font-size: 1.1rem; border-radius: 14px; }
/* Nav buttons */
.form-nav { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 0; gap: 1rem; }
.form-nav > * { flex: 1; }
/* ========== Summary Review ========== */
.summary-section { margin-bottom: 1rem; }
.summary-title { font-size: 0.82rem; font-weight: 700; color: var(--green-primary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 500px) { .summary-grid { grid-template-columns: 1fr; } }
.summary-item { padding: 8px 12px; background: var(--gray-bg); border-radius: 8px; }
body.dark .summary-item { background: #0f1923; }
.summary-item .si-label { font-size: 0.75rem; color: var(--gray-text); }
.summary-item .si-value { font-size: 0.92rem; font-weight: 600; margin-top: 2px; }
/* ========== Success Page ========== */
#page-success {
display: none; text-align: center; padding: 3rem 1.5rem;
}
#page-success.active { display: block; }
.success-icon-wrap {
width: 110px; height: 110px; background: linear-gradient(135deg, var(--green-primary), var(--green-accent));
border-radius: 50%; display: flex; align-items: center; justify-content: center;
margin: 0 auto 1.5rem; box-shadow: 0 8px 32px rgba(30,142,90,0.3);
animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.success-icon-wrap i { font-size: 3rem; color: white; }
@keyframes popIn {
from { transform: scale(0); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.success-card {
background: white; border-radius: 20px; border: 1px solid var(--gray-border);
padding: 2rem; max-width: 560px; margin: 0 auto;
box-shadow: 0 8px 32px rgba(0,0,0,0.08);
animation: slideUp 0.5s ease 0.3s both;
}
body.dark .success-card { background: var(--dark-card); border-color: var(--dark-border); }
@keyframes slideUp {
from { transform: translateY(30px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.success-reg-id {
display: inline-block; background: var(--green-light); border: 1.5px solid var(--green-primary);
color: var(--green-dark); border-radius: 10px; padding: 8px 20px;
font-size: 1.1rem; font-weight: 800; letter-spacing: 1.5px; font-family: 'Courier New', monospace;
margin: 1rem 0;
}
.contact-box {
background: var(--green-light); border-left: 4px solid var(--green-primary);
border-radius: 0 10px 10px 0; padding: 1rem 1.2rem; margin-top: 1.2rem; text-align: left;
}
body.dark .contact-box { background: rgba(30,142,90,0.1); }
/* ========== Loading Overlay ========== */
#loading-overlay {
position: fixed; inset: 0; background: rgba(15,25,35,0.7); z-index: 9999;
display: none; flex-direction: column; align-items: center; justify-content: center;
backdrop-filter: blur(4px);
}
#loading-overlay.show { display: flex; }
.spinner {
width: 56px; height: 56px; border: 5px solid rgba(255,255,255,0.2);
border-top-color: var(--green-primary); border-radius: 50%; animation: spin 0.85s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { color: white; font-size: 1rem; font-weight: 600; margin-top: 16px; }
/* ========== Draft Banner ========== */
.draft-banner {
background: #fef3c7; border: 1px solid #fcd34d; border-radius: 10px;
padding: 10px 14px; margin-bottom: 1rem; display: none; align-items: center; gap: 10px; font-size: 0.85rem;
}
.draft-banner.show { display: flex; }
body.dark .draft-banner { background: rgba(253,211,77,0.1); border-color: #b45309; color: #fcd34d; }
.draft-banner i { color: #d97706; }
/* ========== Misc ========== */
footer {
background: white; border-top: 1px solid var(--gray-border);
padding: 1.2rem; text-align: center; font-size: 0.8rem; color: var(--gray-text);
margin-top: 2rem;
}
.guardian-section { display: none; }
.autocomplete-wrap { position: relative; }
.autocomplete-list {
position: absolute; top: 100%; left: 0; right: 0; background: white;
border: 2px solid var(--green-primary); border-top: none; border-radius: 0 0 10px 10px;
max-height: 200px; overflow-y: auto; z-index: 50;
}
body.dark .autocomplete-list { background: var(--dark-card); border-color: var(--green-primary); }
.autocomplete-item {
padding: 9px 14px; cursor: pointer; font-size: 0.9rem; transition: background 0.15s;
}
.autocomplete-item:hover { background: var(--green-light); }
body.dark .autocomplete-item:hover { background: rgba(30,142,90,0.15); }
.char-count { font-size: 0.75rem; color: var(--gray-text); text-align: right; margin-top: 3px; }
/* Progress bar at top */
.progress-bar-top { height: 4px; background: var(--gray-border); position: fixed; top: 0; left: 0; right: 0; z-index: 200; }
.progress-bar-fill { height: 100%; background: var(--green-primary); transition: width 0.4s ease; width: 0%; }
/* Floating save draft */
.fab-save {
position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 50;
background: var(--green-primary); color: white; border: none; border-radius: 50px;
padding: 12px 20px; font-family: var(--font-th); font-size: 0.85rem; font-weight: 700;
cursor: pointer; box-shadow: 0 6px 20px rgba(30,142,90,0.35);
display: none; align-items: center; gap: 8px; transition: all 0.2s;
}
.fab-save:hover { transform: translateY(-2px); }
.fab-save.show { display: flex; }
/* Toast */
.toast {
position: fixed; bottom: 5rem; left: 50%; transform: translateX(-50%) translateY(20px);
background: #1e293b; color: white; padding: 10px 20px; border-radius: 50px;
font-size: 0.85rem; font-weight: 600; opacity: 0; transition: all 0.3s; z-index: 1000;
white-space: nowrap;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.success-toast { background: var(--success); }
.toast.error-toast { background: var(--error); }
/* Section animations */
.card { animation: fadeSlide 0.35s ease both; }
@keyframes fadeSlide {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
/* Age auto badge */
.age-badge {
display: inline-flex; align-items: center; gap: 5px;
background: var(--blue-light); color: var(--blue-accent); border-radius: 6px;
padding: 4px 10px; font-size: 0.8rem; font-weight: 700; margin-top: 5px;
}
</style>
</head>
<body>
<!-- Progress Bar Top -->
<div class="progress-bar-top"><div class="progress-bar-fill" id="progressFill"></div></div>
<!-- Loading Overlay -->
<div id="loading-overlay">
<div class="spinner"></div>
<div class="loading-text">กำลังส่งข้อมูล กรุณารอสักครู่...</div>
</div>
<!-- Toast Notification -->
<div class="toast" id="toast"></div>
<!-- Navbar -->
<nav class="navbar">
<div class="navbar-inner">
<div class="logo-wrap">
<div class="logo-icon">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
<path d="M9 11v4m3-6v6m3-4v4" stroke="white" stroke-width="1.5" fill="none"/>
</svg>
</div>
<div class="logo-text">
<div class="t1">โรงพยาบาลป่าพะยอม จ.พัทลุง</div>
<div class="t2">Pa Phayom Hospital</div>
</div>
</div>
<button class="dark-toggle" onclick="toggleDark()" id="darkBtn">
<i class="fa fa-moon"></i> โหมดมืด
</button>
</div>
</nav>
<!-- ======================================================
PAGE 1: WELCOME
====================================================== -->
<div id="page-welcome" class="page active">
<section class="hero">
<div style="position:relative;z-index:1;">
<div class="hero-badge">
<i class="fa fa-hospital"></i>
โรงพยาบาลชุมชนคุณภาพ ระดับ F2
</div>
<h1>ระบบทำบัตรผู้ป่วยออนไลน์</h1>
<h2>โรงพยาบาลป่าพะยอม</h2>
<div class="reg-id-display" id="previewRegId">รหัสลงทะเบียน: กำลังสร้าง...</div>
<p>อำนวยความสะดวกให้ประชาชนสามารถส่งข้อมูลเพื่อจัดทำบัตรผู้ป่วยใหม่ผ่านระบบออนไลน์ ลดระยะเวลารอคอย และช่วยให้เจ้าหน้าที่เตรียมข้อมูลได้ถูกต้องครบถ้วน</p>
<div class="steps-row">
<div class="step-item">
<div class="s-num"><i class="fa fa-pen-to-square" style="font-size:0.9rem;"></i></div>
<div class="s-label">① กรอก<br>ข้อมูล</div>
</div>
<div class="step-connector"></div>
<div class="step-item">
<div class="s-num"><i class="fa fa-paperclip" style="font-size:0.9rem;"></i></div>
<div class="s-label">② แนบ<br>เอกสาร</div>
</div>
<div class="step-connector"></div>
<div class="step-item">
<div class="s-num"><i class="fa fa-list-check" style="font-size:0.9rem;"></i></div>
<div class="s-label">③ ตรวจสอบ<br>ข้อมูล</div>
</div>
<div class="step-connector"></div>
<div class="step-item">
<div class="s-num"><i class="fa fa-paper-plane" style="font-size:0.9rem;"></i></div>
<div class="s-label">④ ส่ง<br>ข้อมูล</div>
</div>
</div>
<button class="btn-start" onclick="startRegistration()">
<i class="fa fa-play"></i>
เริ่มลงทะเบียน
</button>
</div>
</section>
<div class="container-max" style="padding-top:2rem;padding-bottom:2rem;">
<!-- Info cards -->
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;">
<div class="card">
<div class="card-body" style="text-align:center;">
<div style="width:52px;height:52px;background:var(--green-light);border-radius:14px;display:flex;align-items:center;justify-content:center;margin:0 auto 0.8rem;">
<i class="fa fa-clock" style="color:var(--green-primary);font-size:1.4rem;"></i>
</div>
<div style="font-weight:700;font-size:1rem;margin-bottom:4px;">ลดเวลารอ</div>
<div style="font-size:0.83rem;color:var(--gray-text);">เตรียมข้อมูลล่วงหน้า ไม่ต้องรอกรอกที่ห้องบัตร</div>
</div>
</div>
<div class="card">
<div class="card-body" style="text-align:center;">
<div style="width:52px;height:52px;background:#eff6ff;border-radius:14px;display:flex;align-items:center;justify-content:center;margin:0 auto 0.8rem;">
<i class="fa fa-shield-halved" style="color:#3b82f6;font-size:1.4rem;"></i>
</div>
<div style="font-weight:700;font-size:1rem;margin-bottom:4px;">ข้อมูลปลอดภัย</div>
<div style="font-size:0.83rem;color:var(--gray-text);">ข้อมูลส่วนตัวถูกเข้ารหัสและใช้เฉพาะการรักษาพยาบาล</div>
</div>
</div>
<div class="card">
<div class="card-body" style="text-align:center;">
<div style="width:52px;height:52px;background:#fff7ed;border-radius:14px;display:flex;align-items:center;justify-content:center;margin:0 auto 0.8rem;">
<i class="fa fa-mobile-screen" style="color:#f97316;font-size:1.4rem;"></i>
</div>
<div style="font-weight:700;font-size:1rem;margin-bottom:4px;">ใช้งานง่าย</div>
<div style="font-size:0.83rem;color:var(--gray-text);">รองรับทุกอุปกรณ์ สมาร์ตโฟน แท็บเล็ต คอมพิวเตอร์</div>
</div>
</div>
<div class="card">
<div class="card-body" style="text-align:center;">
<div style="width:52px;height:52px;background:#fdf4ff;border-radius:14px;display:flex;align-items:center;justify-content:center;margin:0 auto 0.8rem;">
<i class="fa fa-calendar-check" style="color:#a855f7;font-size:1.4rem;"></i>
</div>
<div style="font-weight:700;font-size:1rem;margin-bottom:4px;">ดำเนินการไว</div>
<div style="font-size:0.83rem;color:var(--gray-text);">เจ้าหน้าที่จัดทำบัตรภายใน 1 วันทำการ</div>
</div>
</div>
</div>
<div class="card" style="margin-top:1rem;">
<div class="card-body">
<div style="display:flex;align-items:flex-start;gap:12px;">
<i class="fa fa-triangle-exclamation" style="color:#f59e0b;font-size:1.2rem;margin-top:3px;flex-shrink:0;"></i>
<div>
<div style="font-weight:700;margin-bottom:4px;font-size:0.95rem;">เอกสารที่ต้องเตรียม</div>
<div style="font-size:0.88rem;color:var(--gray-text);line-height:1.8;">
📋 บัตรประชาชน (ตัวจริงหรือรูปถ่าย) |
🏠 ทะเบียนบ้าน (ถ้ามี) |
📄 เอกสารสิทธิการรักษา (บัตรทอง / ประกันสังคม / ข้าราชการ)
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ======================================================
PAGE 2: FORM STEP 1 - Patient Info
====================================================== -->
<div id="page-form" class="page">
<!-- Step Progress Bar -->
<div class="step-bar">
<div class="step-bar-inner">
<div class="step-track">
<div class="step-dot-wrap active" id="sdot-1">
<div class="step-dot active" id="dot-1">1</div>
<div class="step-dot-label">ข้อมูลผู้ป่วย</div>
</div>
<div class="step-line" id="sline-1"></div>
<div class="step-dot-wrap" id="sdot-2">
<div class="step-dot" id="dot-2">2</div>
<div class="step-dot-label">เอกสาร</div>
</div>
<div class="step-line" id="sline-2"></div>
<div class="step-dot-wrap" id="sdot-3">
<div class="step-dot" id="dot-3">3</div>
<div class="step-dot-label">ตรวจสอบ</div>
</div>
<div class="step-line" id="sline-3"></div>
<div class="step-dot-wrap" id="sdot-4">
<div class="step-dot" id="dot-4">4</div>
<div class="step-dot-label">ยืนยัน</div>
</div>
</div>
</div>
</div>
<div class="container-max" style="padding-top:1.5rem;padding-bottom:2rem;">
<!-- Draft Banner -->
<div class="draft-banner" id="draftBanner">
<i class="fa fa-floppy-disk"></i>
<span>พบข้อมูลที่บันทึกไว้ก่อนหน้า ต้องการกู้คืนข้อมูลหรือไม่?</span>
<button onclick="loadDraft()" class="btn-primary" style="padding:5px 14px;font-size:0.82rem;">กู้คืน</button>
<button onclick="clearDraft()" class="btn-secondary" style="padding:5px 14px;font-size:0.82rem;">เริ่มใหม่</button>
</div>
<!-- Registration ID display -->
<div style="text-align:center;margin-bottom:1rem;">
<span style="font-size:0.82rem;color:var(--gray-text);">รหัสลงทะเบียน:</span>
<span id="regIdDisplay" style="font-weight:800;color:var(--green-primary);font-family:monospace;font-size:1rem;margin-left:6px;"></span>
</div>
<!-- ===== STEP 1 CONTENT ===== -->
<div id="step1-content">
<!-- SECTION 1: Patient Info -->
<div class="card">
<div class="section-header">
<div class="sh-icon"><i class="fa fa-user"></i></div>
<h3>ส่วนที่ 1 : ข้อมูลผู้ป่วย</h3>
<span class="sh-badge required">จำเป็น</span>
</div>
<div class="card-body">
<div class="field-row">
<div class="field-group">
<label>ชื่อ <span class="req">*</span></label>
<input type="text" id="firstName" class="form-input" placeholder="ชื่อ (ไม่ต้องใส่คำนำหน้า)" oninput="validateField(this)">
<div class="error-msg" id="err-firstName">กรุณากรอกชื่อ</div>
</div>
<div class="field-group">
<label>นามสกุล <span class="req">*</span></label>
<input type="text" id="lastName" class="form-input" placeholder="นามสกุล" oninput="validateField(this)">
<div class="error-msg" id="err-lastName">กรุณากรอกนามสกุล</div>
</div>
</div>
<div class="field-group">
<label>เลขบัตรประชาชน <span class="req">*</span></label>
<input type="text" id="idCard" class="form-input" placeholder="X-XXXX-XXXXX-XX-X (13 หลัก)" maxlength="17" oninput="formatIdCard(this)" style="letter-spacing:1px;font-family:monospace;">
<div class="error-msg" id="err-idCard">กรุณากรอกเลขบัตรประชาชน 13 หลักที่ถูกต้อง</div>
<div class="input-hint"><i class="fa fa-info-circle"></i> กรอกเฉพาะตัวเลข 13 หลัก ระบบจะจัดรูปแบบให้อัตโนมัติ</div>
</div>
<div class="field-row">
<div class="field-group">
<label>วันเดือนปีเกิด <span class="req">*</span></label>
<input type="date" id="birthDate" class="form-input" onchange="calcAge()" max="">
<div class="error-msg" id="err-birthDate">กรุณาเลือกวันเกิด</div>
<div id="ageBadge" class="age-badge" style="display:none;">
<i class="fa fa-birthday-cake"></i>
<span id="ageText"></span>
</div>
</div>
<div class="field-group">
<label>อายุ (ปี) <span class="req">*</span></label>
<input type="number" id="age" class="form-input" placeholder="อายุ" min="0" max="150" oninput="checkGuardian()">
<div class="error-msg" id="err-age">กรุณากรอกอายุ</div>
</div>
</div>
<div class="field-group">
<label>เพศ <span class="req">*</span></label>
<div class="radio-group">
<div class="radio-opt"><input type="radio" name="gender" id="genderM" value="ชาย"><label for="genderM"><i class="fa fa-mars"></i> ชาย</label></div>
<div class="radio-opt"><input type="radio" name="gender" id="genderF" value="หญิง"><label for="genderF"><i class="fa fa-venus"></i> หญิง</label></div>
<div class="radio-opt"><input type="radio" name="gender" id="genderO" value="อื่นๆ"><label for="genderO"><i class="fa fa-genderless"></i> อื่นๆ</label></div>
</div>
<div class="error-msg" id="err-gender">กรุณาเลือกเพศ</div>
</div>
<div class="field-group">
<label>เบอร์โทรศัพท์ <span class="req">*</span></label>
<input type="tel" id="phone" class="form-input" placeholder="0XX-XXX-XXXX" maxlength="12" oninput="formatPhone(this)">
<div class="error-msg" id="err-phone">กรุณากรอกเบอร์โทรที่ถูกต้อง (10 หลัก)</div>
</div>
<!-- Address -->
<div style="margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--gray-border);">
<div style="font-weight:700;font-size:0.9rem;color:var(--green-primary);margin-bottom:0.8rem;">
<i class="fa fa-location-dot"></i> ที่อยู่ปัจจุบัน
</div>
<div class="field-row-3">
<div class="field-group">
<label>บ้านเลขที่ / หมู่</label>
<input type="text" id="addrMoo" class="form-input" placeholder="เช่น 123 หมู่ 5">
</div>
<div class="field-group">
<label>ตำบล / แขวง <span class="req">*</span></label>
<input type="text" id="addrTambon" class="form-input" placeholder="ตำบล" oninput="validateField(this)">
<div class="error-msg" id="err-addrTambon">กรุณากรอกตำบล</div>
</div>
<div class="field-group">
<label>อำเภอ / เขต <span class="req">*</span></label>
<input type="text" id="addrAmphoe" class="form-input" placeholder="อำเภอ" oninput="validateField(this)">
<div class="error-msg" id="err-addrAmphoe">กรุณากรอกอำเภอ</div>
</div>
</div>
<div class="field-group">
<label>จังหวัด <span class="req">*</span></label>
<div class="autocomplete-wrap">
<input type="text" id="addrProvince" class="form-input" placeholder="พิมพ์ชื่อจังหวัด..." oninput="autocompleteProvince(this)" autocomplete="off">
<div class="autocomplete-list" id="provinceList" style="display:none;"></div>
</div>
<div class="error-msg" id="err-addrProvince">กรุณากรอกจังหวัด</div>
</div>
</div>
<!-- Rights -->
<div style="margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--gray-border);">
<div style="font-weight:700;font-size:0.9rem;color:var(--green-primary);margin-bottom:0.8rem;">
<i class="fa fa-id-card"></i> สิทธิการรักษา
</div>
<div class="field-row">
<div class="field-group">
<label>สิทธิการรักษา <span class="req">*</span></label>
<select id="treatmentRight" class="form-select" onchange="validateField(this)">
<option value="">-- เลือกสิทธิ --</option>
<option value="UC">บัตรทอง (UC/30 บาท)</option>
<option value="ประกันสังคม">ประกันสังคม (SSO)</option>
<option value="ข้าราชการ">ข้าราชการ / ลูกจ้างรัฐ</option>
<option value="ชำระเงินเอง">ชำระเงินเอง (เงินสด)</option>
<option value="อื่นๆ">อื่นๆ</option>
</select>
<div class="error-msg" id="err-treatmentRight">กรุณาเลือกสิทธิการรักษา</div>
</div>
<div class="field-group">
<label>โรงพยาบาลตามสิทธิ</label>
<input type="text" id="rightHospital" class="form-input" placeholder="ชื่อโรงพยาบาลตามสิทธิ">
</div>
</div>
</div>
</div>
</div>
<!-- SECTION 2: Emergency Contact -->
<div class="card">
<div class="section-header">
<div class="sh-icon"><i class="fa fa-phone-volume"></i></div>
<h3>ส่วนที่ 2 : ข้อมูลติดต่อฉุกเฉิน</h3>
<span class="sh-badge required">จำเป็น</span>
</div>
<div class="card-body">
<div class="field-row">
<div class="field-group">
<label>ชื่อ-นามสกุลผู้ติดต่อ <span class="req">*</span></label>
<input type="text" id="emgName" class="form-input" placeholder="ชื่อ-นามสกุล" oninput="validateField(this)">
<div class="error-msg" id="err-emgName">กรุณากรอกชื่อผู้ติดต่อฉุกเฉิน</div>
</div>
<div class="field-group">
<label>ความสัมพันธ์ <span class="req">*</span></label>
<select id="emgRelation" class="form-select" onchange="validateField(this)">
<option value="">-- ความสัมพันธ์ --</option>
<option>บิดา/มารดา</option><option>คู่สมรส</option><option>บุตร/ธิดา</option>
<option>พี่/น้อง</option><option>ญาติ</option><option>เพื่อน</option><option>อื่นๆ</option>
</select>
<div class="error-msg" id="err-emgRelation">กรุณาเลือกความสัมพันธ์</div>
</div>
</div>
<div class="field-group">
<label>เบอร์โทรศัพท์ผู้ติดต่อ <span class="req">*</span></label>
<input type="tel" id="emgPhone" class="form-input" placeholder="0XX-XXX-XXXX" maxlength="12" oninput="formatPhone(this)">
<div class="error-msg" id="err-emgPhone">กรุณากรอกเบอร์ผู้ติดต่อฉุกเฉิน</div>
</div>
</div>
</div>
<!-- SECTION 3: Additional Info (Optional) -->
<div class="card">
<div class="section-header">
<div class="sh-icon"><i class="fa fa-circle-info"></i></div>
<h3>ส่วนที่ 3 : ข้อมูลเพิ่มเติม</h3>
<span class="sh-badge optional">ไม่บังคับ</span>
</div>
<div class="card-body">
<div class="field-row">
<div class="field-group">
<label>ชื่อบิดา</label>
<input type="text" id="fatherName" class="form-input" placeholder="ชื่อ-นามสกุลบิดา">
</div>
<div class="field-group">
<label>ชื่อมารดา</label>
<input type="text" id="motherName" class="form-input" placeholder="ชื่อ-นามสกุลมารดา">
</div>
</div>
<div class="field-row-3">
<div class="field-group">
<label>อาชีพ</label>
<select id="occupation" class="form-select">
<option value="">-- เลือกอาชีพ --</option>
<option>เกษตรกร</option><option>รับจ้าง</option><option>ค้าขาย</option>
<option>ข้าราชการ</option><option>พนักงานเอกชน</option><option>นักเรียน/นักศึกษา</option>
<option>แม่บ้าน</option><option>ไม่มีอาชีพ</option><option>อื่นๆ</option>
</select>
</div>
<div class="field-group">
<label>ศาสนา</label>
<select id="religion" class="form-select">
<option value="">-- เลือกศาสนา --</option>
<option>พุทธ</option><option>อิสลาม</option><option>คริสต์</option><option>อื่นๆ</option>
</select>
</div>
<div class="field-group">
<label>กรุ๊ปเลือด</label>
<select id="bloodType" class="form-select">
<option value="">-- ไม่ทราบ --</option>
<option>A</option><option>B</option><option>AB</option><option>O</option>
<option>A+</option><option>A-</option><option>B+</option><option>B-</option>
<option>AB+</option><option>AB-</option><option>O+</option><option>O-</option>
</select>
</div>
</div>
</div>
</div>
<!-- SECTION GUARDIAN (Dynamic - if age < 15) -->
<div class="card guardian-section" id="guardianSection">
<div class="section-header" style="background:linear-gradient(135deg,#fff3e0,#fff8f0);">
<div class="sh-icon" style="background:#f97316;"><i class="fa fa-child"></i></div>
<h3>ส่วนที่ 4 : ข้อมูลผู้ปกครอง (ผู้ป่วยอายุต่ำกว่า 15 ปี)</h3>
<span class="sh-badge required">จำเป็น</span>
</div>
<div class="card-body">
<div class="field-row">
<div class="field-group">
<label>ชื่อ-นามสกุลผู้ปกครอง <span class="req">*</span></label>
<input type="text" id="guardianName" class="form-input" placeholder="ชื่อ-นามสกุลผู้ปกครอง">
</div>
<div class="field-group">
<label>ความสัมพันธ์ <span class="req">*</span></label>
<select id="guardianRelation" class="form-select">
<option value="">-- ความสัมพันธ์ --</option>
<option>บิดา</option><option>มารดา</option><option>ปู่/ย่า</option>
<option>ตา/ยาย</option><option>ผู้ปกครองตามกฎหมาย</option>
</select>
</div>
</div>
<div class="field-row">
<div class="field-group">
<label>เลขบัตรประชาชนผู้ปกครอง</label>
<input type="text" id="guardianIdCard" class="form-input" placeholder="13 หลัก" maxlength="17" oninput="formatIdCard(this)" style="font-family:monospace;">
</div>
<div class="field-group">
<label>เบอร์โทรผู้ปกครอง</label>
<input type="tel" id="guardianPhone" class="form-input" placeholder="0XX-XXX-XXXX" maxlength="12" oninput="formatPhone(this)">
</div>
</div>
</div>
</div>
<div class="form-nav">
<button class="btn-secondary" onclick="goWelcome()">
<i class="fa fa-arrow-left"></i> กลับ
</button>
<button class="btn-primary" onclick="goStep2()">
ถัดไป: แนบเอกสาร <i class="fa fa-arrow-right"></i>
</button>
</div>
</div>
<!-- ===== STEP 2 CONTENT: Documents ===== -->
<div id="step2-content" style="display:none;">
<div class="card">
<div class="section-header">
<div class="sh-icon"><i class="fa fa-file-arrow-up"></i></div>
<h3>ส่วนที่ 5 : เอกสารแนบ</h3>
<span class="sh-badge required">บัตรประชาชนจำเป็น</span>
</div>
<div class="card-body">
<div style="background:var(--blue-light);border-radius:10px;padding:12px 16px;margin-bottom:1.2rem;font-size:0.85rem;display:flex;gap:10px;align-items:flex-start;">
<i class="fa fa-circle-info" style="color:var(--blue-accent);margin-top:2px;flex-shrink:0;"></i>
<div>รองรับไฟล์ <strong>JPG, PNG, PDF</strong> ขนาดสูงสุดไฟล์ละ <strong>5 MB</strong> | เอกสารจะถูกส่งให้เจ้าหน้าที่ห้องบัตรตรวจสอบ</div>
</div>
<!-- ID Card Upload -->
<div class="field-group">
<label>รูปบัตรประชาชน <span class="req">*</span></label>
<div class="upload-zone" id="zone-idCard" onclick="document.getElementById('file-idCard').click()" ondragover="event.preventDefault();this.style.borderColor='var(--green-primary)'" ondrop="handleDrop(event,'file-idCard','preview-idCard')">
<i class="fa fa-id-card uz-icon"></i>
<div class="uz-title">คลิกหรือลากไฟล์มาวาง</div>
<div class="uz-sub">รูปบัตรประชาชนของผู้ป่วย (JPG/PNG/PDF)</div>
</div>
<input type="file" id="file-idCard" accept=".jpg,.jpeg,.png,.pdf" style="display:none" onchange="showPreview(this,'preview-idCard')">
<div class="file-preview-list" id="preview-idCard"></div>
<div class="error-msg" id="err-file-idCard">กรุณาแนบรูปบัตรประชาชน</div>
</div>
<!-- House Registration -->
<div class="field-group">
<label>รูปทะเบียนบ้าน <span style="font-weight:400;color:var(--gray-text);font-size:0.8rem;">(ถ้ามี)</span></label>
<div class="upload-zone" onclick="document.getElementById('file-house').click()" ondragover="event.preventDefault()" ondrop="handleDrop(event,'file-house','preview-house')">
<i class="fa fa-house uz-icon"></i>
<div class="uz-title">คลิกหรือลากไฟล์มาวาง</div>
<div class="uz-sub">รูปทะเบียนบ้าน (JPG/PNG/PDF)</div>
</div>
<input type="file" id="file-house" accept=".jpg,.jpeg,.png,.pdf" style="display:none" onchange="showPreview(this,'preview-house')">
<div class="file-preview-list" id="preview-house"></div>
</div>
<!-- Rights Document -->
<div class="field-group">
<label>เอกสารสิทธิการรักษา <span style="font-weight:400;color:var(--gray-text);font-size:0.8rem;">(ถ้ามี)</span></label>
<div class="upload-zone" onclick="document.getElementById('file-rights').click()" ondragover="event.preventDefault()" ondrop="handleDrop(event,'file-rights','preview-rights')">
<i class="fa fa-file-medical uz-icon"></i>
<div class="uz-title">คลิกหรือลากไฟล์มาวาง</div>
<div class="uz-sub">บัตรทอง / ประกันสังคม / ข้าราชการ (JPG/PNG/PDF)</div>
</div>
<input type="file" id="file-rights" accept=".jpg,.jpeg,.png,.pdf" style="display:none" onchange="showPreview(this,'preview-rights')">
<div class="file-preview-list" id="preview-rights"></div>
</div>
</div>
</div>
<div class="form-nav">
<button class="btn-secondary" onclick="goStepBack(2)"><i class="fa fa-arrow-left"></i> กลับ</button>
<button class="btn-primary" onclick="goStep3()">ถัดไป: ตรวจสอบข้อมูล <i class="fa fa-arrow-right"></i></button>
</div>
</div>
<!-- ===== STEP 3 CONTENT: Review ===== -->
<div id="step3-content" style="display:none;">
<div class="card">
<div class="section-header">
<div class="sh-icon"><i class="fa fa-list-check"></i></div>
<h3>ตรวจสอบข้อมูลทั้งหมด</h3>
</div>
<div class="card-body" id="summaryContent">
<!-- filled by JS -->
</div>
</div>
<div class="form-nav">
<button class="btn-secondary" onclick="goStepBack(3)"><i class="fa fa-arrow-left"></i> แก้ไขข้อมูล</button>
<button class="btn-primary" onclick="goStep4()">ถัดไป: ยืนยันและส่ง <i class="fa fa-arrow-right"></i></button>
</div>
</div>
<!-- ===== STEP 4 CONTENT: Consent & Submit ===== -->
<div id="step4-content" style="display:none;">
<div class="card">
<div class="section-header">
<div class="sh-icon"><i class="fa fa-file-signature"></i></div>
<h3>ส่วนที่ 6 : การยืนยันและส่งข้อมูล</h3>
</div>
<div class="card-body">
<div style="background:var(--green-light);border-radius:12px;padding:1rem 1.2rem;margin-bottom:1.2rem;border-left:4px solid var(--green-primary);">
<div style="font-weight:700;font-size:0.9rem;color:var(--green-dark);margin-bottom:4px;"><i class="fa fa-shield-halved"></i> นโยบายความเป็นส่วนตัว</div>
<div style="font-size:0.82rem;line-height:1.7;color:#374151;">โรงพยาบาลป่าพะยอมจะเก็บรวบรวม ใช้ และเปิดเผยข้อมูลส่วนบุคคลของท่านเพื่อประโยชน์ในการให้บริการทางการแพทย์เท่านั้น ตามพระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล พ.ศ. 2562 (PDPA)</div>
</div>
<div class="consent-box">
<div class="consent-item">
<input type="checkbox" id="consent1" onchange="checkConsents()">
<label for="consent1">ข้าพเจ้ารับรองว่าข้อมูลทั้งหมดที่กรอกในแบบฟอร์มนี้เป็นความจริงและถูกต้องครบถ้วน</label>
</div>
<div class="consent-item">
<input type="checkbox" id="consent2" onchange="checkConsents()">
<label for="consent2">ข้าพเจ้ายินยอมให้โรงพยาบาลป่าพะยอมจัดเก็บและใช้ข้อมูลส่วนบุคคลเพื่อจัดทำเวชระเบียนและบัตรผู้ป่วย</label>
</div>
</div>
<div class="error-msg" id="err-consent" style="display:none;font-size:0.85rem;margin-top:8px;">กรุณายืนยันการยินยอมทั้ง 2 ข้อ ก่อนส่งข้อมูล</div>
<div style="margin-top:1.5rem;">
<button class="btn-primary btn-full btn-lg" id="submitBtn" onclick="submitForm()" disabled>
<i class="fa fa-paper-plane"></i> ส่งข้อมูลเพื่อทำบัตรผู้ป่วย
</button>
</div>
<div style="text-align:center;margin-top:0.8rem;font-size:0.8rem;color:var(--gray-text);">
<i class="fa fa-lock"></i> ข้อมูลถูกเข้ารหัสและส่งผ่านช่องทางที่ปลอดภัย
</div>
</div>
</div>
<div class="form-nav" style="padding-top:0;">
<button class="btn-secondary" onclick="goStepBack(4)"><i class="fa fa-arrow-left"></i> กลับ</button>
<div style="flex:1;"></div>
</div>
</div>
</div><!-- /container -->
</div>
<!-- ======================================================
PAGE 3: SUCCESS
====================================================== -->
<div id="page-success">
<div class="container-max" style="padding-top:3rem;padding-bottom:3rem;">
<div class="success-icon-wrap">
<i class="fa fa-circle-check"></i>
</div>
<div class="success-card">
<h2 style="font-size:1.6rem;font-weight:800;color:var(--green-primary);margin-bottom:0.4rem;">ส่งข้อมูลสำเร็จแล้ว! 🎉</h2>
<p style="color:var(--gray-text);font-size:0.95rem;margin-bottom:0.5rem;">โรงพยาบาลป่าพะยอมได้รับข้อมูลของท่านเรียบร้อยแล้ว</p>
<div class="success-reg-id" id="successRegId">PPH-XXXXXXXX-XXXX</div>
<p style="font-size:0.88rem;color:var(--gray-text);margin-bottom:0;">กรุณาจดรหัสลงทะเบียนไว้เป็นหลักฐาน</p>
<div style="margin:1.2rem 0;padding:1rem;background:var(--green-light);border-radius:12px;">
<div style="font-size:1rem;font-weight:700;color:var(--green-dark);margin-bottom:8px;">
<i class="fa fa-calendar-clock"></i> ระยะเวลาดำเนินการ
</div>
<div style="font-size:0.9rem;color:#374151;line-height:1.7;">
เจ้าหน้าที่ห้องบัตรจะดำเนินการจัดทำบัตรผู้ป่วยใหม่ภายใน<br>
<strong style="font-size:1.1rem;color:var(--green-primary);">1 วันทำการ</strong>
<span style="font-size:0.83rem;"> และจะดำเนินการให้เร็วที่สุด</span>
</div>
</div>
<div class="contact-box">
<div style="font-weight:700;font-size:0.9rem;color:var(--green-dark);margin-bottom:6px;">
<i class="fa fa-phone"></i> ติดต่อกรณีเร่งด่วน
</div>
<div style="font-size:0.9rem;font-weight:600;">ห้องบัตร โรงพยาบาลป่าพะยอม</div>
<div style="font-size:1rem;font-weight:800;color:var(--green-primary);margin-top:4px;">
<a href="tel:074673967" style="text-decoration:none;color:inherit;">📞 074-673967 ต่อ 104</a>
</div>
</div>
<div style="margin-top:1.5rem;display:flex;flex-direction:column;gap:10px;">
<button class="btn-primary btn-full" onclick="goHome()">
<i class="fa fa-house"></i> กลับหน้าแรก
</button>
<button class="btn-secondary btn-full" onclick="window.print()">
<i class="fa fa-print"></i> พิมพ์หลักฐาน
</button>
</div>
</div>
</div>
</div>
<!-- FAB Save Draft -->
<button class="fab-save" id="fabSave" onclick="saveDraft()">
<i class="fa fa-floppy-disk"></i> บันทึกร่าง
</button>
<footer>
<div>โรงพยาบาลป่าพะยอม | อำเภอป่าพะยอม จังหวัดพัทลุง 93110 | โทร. 074-673967</div>
<div style="margin-top:4px;">ระบบทำบัตรผู้ป่วยออนไลน์ v1.0 | รหัส HCODE: 11422</div>
</footer>
<!-- ======================================================
JAVASCRIPT
====================================================== -->
<script>
// ============ CONFIG ============
// วาง URL ของ Google Apps Script ที่นี่
const GAS_URL = 'https://script.google.com/macros/s/AKfycbzeZhl6Lh3JfktRTUZ0IJ0mltKpZLED4McS2UqezX7GmpP0UMzEYKxqU8yWOVKlzj7x/exec';
// ============ STATE ============
let currentStep = 0;
let regId = '';
let submitting = false;
let uploadedFiles = { idCard: null, house: null, rights: null };
// Thai provinces list
const PROVINCES = ['กระบี่','กาญจนบุรี','กาฬสินธุ์','กำแพงเพชร','ขอนแก่น','จันทบุรี','ฉะเชิงเทรา','ชลบุรี','ชัยนาท','ชัยภูมิ','ชุมพร','เชียงราย','เชียงใหม่','ตรัง','ตราด','ตาก','นครนายก','นครปฐม','นครพนม','นครราชสีมา','นครศรีธรรมราช','นครสวรรค์','นนทบุรี','นราธิวาส','น่าน','บึงกาฬ','บุรีรัมย์','ปทุมธานี','ประจวบคีรีขันธ์','ปราจีนบุรี','ปัตตานี','พระนครศรีอยุธยา','พะเยา','พังงา','พัทลุง','พิจิตร','พิษณุโลก','เพชรบุรี','เพชรบูรณ์','แพร่','ภูเก็ต','มหาสารคาม','มุกดาหาร','แม่ฮ่องสอน','ยโสธร','ยะลา','ร้อยเอ็ด','ระนอง','ระยอง','ราชบุรี','ลพบุรี','ลำปาง','ลำพูน','เลย','ศรีสะเกษ','สกลนคร','สงขลา','สตูล','สมุทรปราการ','สมุทรสงคราม','สมุทรสาคร','สระแก้ว','สระบุรี','สิงห์บุรี','สุโขทัย','สุพรรณบุรี','สุราษฎร์ธานี','สุรินทร์','หนองคาย','หนองบัวลำภู','อ่างทอง','อำนาจเจริญ','อุดรธานี','อุตรดิตถ์','อุทัยธานี','อุบลราชธานี'];
// ============ INIT ============
window.onload = function() {
generateRegId();
checkDraft();
document.getElementById('birthDate').max = new Date().toISOString().split('T')[0];
// default province for Pa Phayom
setTimeout(() => {
if (!document.getElementById('addrProvince').value) {
document.getElementById('addrProvince').value = 'พัทลุง';
document.getElementById('addrAmphoe').value = 'ป่าพะยอม';
}
}, 100);
};
// ============ GENERATE REG ID ============
function generateRegId() {
const now = new Date();
const dateStr = now.getFullYear().toString() +
String(now.getMonth()+1).padStart(2,'0') +
String(now.getDate()).padStart(2,'0');
const rand = String(Math.floor(Math.random()*9000)+1000);
regId = `PPH-${dateStr}-${rand}`;
document.getElementById('previewRegId').textContent = `รหัสลงทะเบียน: ${regId}`;
const el = document.getElementById('regIdDisplay');
if (el) el.textContent = regId;
}
// ============ DARK MODE ============
function toggleDark() {
document.body.classList.toggle('dark');
const btn = document.getElementById('darkBtn');
const isDark = document.body.classList.contains('dark');
btn.innerHTML = isDark ? '<i class="fa fa-sun"></i> โหมดสว่าง' : '<i class="fa fa-moon"></i> โหมดมืด';
localStorage.setItem('darkMode', isDark ? '1' : '0');
}
if (localStorage.getItem('darkMode') === '1') {
document.body.classList.add('dark');
document.getElementById('darkBtn').innerHTML = '<i class="fa fa-sun"></i> โหมดสว่าง';
}
// ============ NAVIGATION ============
function showPage(id) {
document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
document.getElementById(id).classList.add('active');
const success = document.getElementById('page-success');
success.classList.remove('active');
success.style.display = 'none';
if (id === 'page-success') {
success.style.display = 'block';
success.classList.add('active');
}
window.scrollTo({ top: 0, behavior: 'smooth' });
}
function startRegistration() {
showPage('page-form');
setStep(1);
document.getElementById('fabSave').classList.add('show');
document.getElementById('regIdDisplay').textContent = regId;
}
function goWelcome() {
showPage('page-welcome');
document.getElementById('fabSave').classList.remove('show');
updateProgress(0);
}
function goHome() {
showPage('page-welcome');
document.getElementById('fabSave').classList.remove('show');
generateRegId();
updateProgress(0);
}
// ============ STEP LOGIC ============
function setStep(n) {
currentStep = n;
// Show/hide step content
['step1-content','step2-content','step3-content','step4-content'].forEach((id,i) => {
document.getElementById(id).style.display = (i+1 === n) ? 'block' : 'none';
});
// Update dots
for (let i=1; i<=4; i++) {
const dot = document.getElementById(`dot-${i}`);
const wrap = document.getElementById(`sdot-${i}`);
dot.className = 'step-dot';
wrap.className = 'step-dot-wrap';
if (i < n) { dot.classList.add('done'); dot.innerHTML = '<i class="fa fa-check" style="font-size:0.75rem;"></i>'; }
else if (i === n) { dot.classList.add('active'); dot.textContent = i; wrap.classList.add('active'); }
else { dot.textContent = i; }
if (i < 4) {
const line = document.getElementById(`sline-${i}`);
line.className = 'step-line' + (i < n ? ' done' : '');
}
}
updateProgress(n / 4 * 100);
window.scrollTo({ top: 0, behavior: 'smooth' });
}
function updateProgress(pct) {
document.getElementById('progressFill').style.width = pct + '%';
}
// ============ VALIDATION ============
function validateField(el) {
const errEl = document.getElementById(`err-${el.id}`);
if (el.value.trim()) {
el.classList.remove('error');
if (errEl) errEl.classList.remove('show');
return true;
} else {
el.classList.add('error');
if (errEl) errEl.classList.add('show');
return false;
}
}
function validateIdCard(val) {
const digits = val.replace(/[^0-9]/g,'');
return digits.length === 13;
}
function validatePhone(val) {
const digits = val.replace(/[^0-9]/g,'');
return digits.length === 10;
}
function formatIdCard(el) {
let digits = el.value.replace(/[^0-9]/g,'').slice(0,13);
let formatted = '';
if (digits.length > 0) formatted += digits.slice(0,1);
if (digits.length > 1) formatted += '-' + digits.slice(1,5);
if (digits.length > 5) formatted += '-' + digits.slice(5,10);
if (digits.length > 10) formatted += '-' + digits.slice(10,12);
if (digits.length > 12) formatted += '-' + digits.slice(12,13);
el.value = formatted;
const errEl = document.getElementById(`err-${el.id}`);
if (digits.length === 13) {
el.classList.remove('error');
if (errEl) errEl.classList.remove('show');
}
}
function formatPhone(el) {
let digits = el.value.replace(/[^0-9]/g,'').slice(0,10);
let formatted = '';
if (digits.length > 0) formatted += digits.slice(0,3);
if (digits.length > 3) formatted += '-' + digits.slice(3,6);
if (digits.length > 6) formatted += '-' + digits.slice(6,10);
el.value = formatted;
}
function calcAge() {
const birthDate = document.getElementById('birthDate').value;
if (!birthDate) return;
const birth = new Date(birthDate);
const today = new Date();
let age = today.getFullYear() - birth.getFullYear();
const m = today.getMonth() - birth.getMonth();
if (m < 0 || (m === 0 && today.getDate() < birth.getDate())) age--;
document.getElementById('age').value = age;
document.getElementById('ageBadge').style.display = 'inline-flex';
document.getElementById('ageText').textContent = `อายุ ${age} ปี`;
checkGuardian();
}
function checkGuardian() {
const age = parseInt(document.getElementById('age').value);
const section = document.getElementById('guardianSection');
if (!isNaN(age) && age < 15) {
section.style.display = 'block';
section.classList.add('card'); // ensure styled
} else {
section.style.display = 'none';
}
}
function autocompleteProvince(el) {
const q = el.value.trim();
const list = document.getElementById('provinceList');
if (!q) { list.style.display='none'; return; }
const matches = PROVINCES.filter(p => p.includes(q));
if (!matches.length) { list.style.display='none'; return; }
list.innerHTML = matches.map(p => `<div class="autocomplete-item" onclick="selectProvince('${p}')">${p}</div>`).join('');
list.style.display = 'block';
}
function selectProvince(p) {
document.getElementById('addrProvince').value = p;
document.getElementById('provinceList').style.display = 'none';
document.getElementById('err-addrProvince').classList.remove('show');
document.getElementById('addrProvince').classList.remove('error');
}
document.addEventListener('click', function(e) {
if (!e.target.closest('.autocomplete-wrap')) {
document.getElementById('provinceList').style.display = 'none';
}
});
// ============ STEP 2: VALIDATE & GO ============
function goStep2() {
let ok = true;
const req = ['firstName','lastName','addrTambon','addrAmphoe','addrProvince','emgName','emgRelation','emgPhone'];
req.forEach(id => { if (!validateField(document.getElementById(id))) ok = false; });
// ID Card
const idVal = document.getElementById('idCard').value;
if (!validateIdCard(idVal)) {
document.getElementById('idCard').classList.add('error');
document.getElementById('err-idCard').classList.add('show');
ok = false;
} else {
document.getElementById('idCard').classList.remove('error');
document.getElementById('err-idCard').classList.remove('show');
}
// Birth date
if (!document.getElementById('birthDate').value) {
document.getElementById('birthDate').classList.add('error');
document.getElementById('err-birthDate').classList.add('show');
ok = false;
}
// Age
if (!document.getElementById('age').value) {
document.getElementById('age').classList.add('error');
document.getElementById('err-age').classList.add('show');
ok = false;
}
// Gender
if (!document.querySelector('input[name=gender]:checked')) {
document.getElementById('err-gender').classList.add('show');
ok = false;
} else {
document.getElementById('err-gender').classList.remove('show');
}
// Phone
if (!validatePhone(document.getElementById('phone').value)) {
document.getElementById('phone').classList.add('error');
document.getElementById('err-phone').classList.add('show');
ok = false;
}
// Treatment right
if (!document.getElementById('treatmentRight').value) {
document.getElementById('treatmentRight').classList.add('error');
document.getElementById('err-treatmentRight').classList.add('show');
ok = false;
}
// Emergency phone
if (!validatePhone(document.getElementById('emgPhone').value)) {
document.getElementById('emgPhone').classList.add('error');
document.getElementById('err-emgPhone').classList.add('show');
ok = false;
}
if (!ok) {
showToast('กรุณากรอกข้อมูลที่จำเป็นให้ครบถ้วน', 'error');
document.querySelector('.form-input.error, .form-select.error')?.scrollIntoView({ behavior:'smooth', block:'center' });
return;
}
saveDraftSilent();
setStep(2);
}
function goStep3() {
// Validate ID card file
if (!document.getElementById('file-idCard').files.length) {
document.getElementById('err-file-idCard').classList.add('show');
showToast('กรุณาแนบรูปบัตรประชาชน', 'error');
return;
}
document.getElementById('err-file-idCard').classList.remove('show');
buildSummary();
setStep(3);
}
function goStep4() {
setStep(4);
}
function goStepBack(from) {
setStep(from - 1);
}
// ============ SUMMARY ============
function buildSummary() {
const g = (id) => document.getElementById(id)?.value || '-';
const gender = document.querySelector('input[name=gender]:checked')?.value || '-';
const html = `
<div class="summary-section">
<div class="summary-title"><i class="fa fa-user"></i> ข้อมูลผู้ป่วย</div>
<div class="summary-grid">
<div class="summary-item"><div class="si-label">ชื่อ-นามสกุล</div><div class="si-value">${g('firstName')} ${g('lastName')}</div></div>
<div class="summary-item"><div class="si-label">เลขบัตรประชาชน</div><div class="si-value" style="font-family:monospace;">${g('idCard')}</div></div>
<div class="summary-item"><div class="si-label">วันเกิด</div><div class="si-value">${formatThaiDate(g('birthDate'))}</div></div>
<div class="summary-item"><div class="si-label">อายุ</div><div class="si-value">${g('age')} ปี</div></div>
<div class="summary-item"><div class="si-label">เพศ</div><div class="si-value">${gender}</div></div>
<div class="summary-item"><div class="si-label">เบอร์โทร</div><div class="si-value">${g('phone')}</div></div>
<div class="summary-item" style="grid-column:1/-1;"><div class="si-label">ที่อยู่</div><div class="si-value">${g('addrMoo')} ต.${g('addrTambon')} อ.${g('addrAmphoe')} จ.${g('addrProvince')}</div></div>
<div class="summary-item"><div class="si-label">สิทธิการรักษา</div><div class="si-value">${g('treatmentRight')}</div></div>
<div class="summary-item"><div class="si-label">รพ.ตามสิทธิ</div><div class="si-value">${g('rightHospital')}</div></div>
</div>
</div>
<div class="summary-section" style="margin-top:1rem;">
<div class="summary-title"><i class="fa fa-phone-volume"></i> ผู้ติดต่อฉุกเฉิน</div>
<div class="summary-grid">
<div class="summary-item"><div class="si-label">ชื่อ</div><div class="si-value">${g('emgName')}</div></div>
<div class="summary-item"><div class="si-label">ความสัมพันธ์</div><div class="si-value">${g('emgRelation')}</div></div>
<div class="summary-item"><div class="si-label">เบอร์โทร</div><div class="si-value">${g('emgPhone')}</div></div>
</div>
</div>
<div class="summary-section" style="margin-top:1rem;">
<div class="summary-title"><i class="fa fa-circle-info"></i> ข้อมูลเพิ่มเติม</div>
<div class="summary-grid">
<div class="summary-item"><div class="si-label">บิดา</div><div class="si-value">${g('fatherName') || '-'}</div></div>
<div class="summary-item"><div class="si-label">มารดา</div><div class="si-value">${g('motherName') || '-'}</div></div>
<div class="summary-item"><div class="si-label">อาชีพ</div><div class="si-value">${g('occupation') || '-'}</div></div>
<div class="summary-item"><div class="si-label">ศาสนา</div><div class="si-value">${g('religion') || '-'}</div></div>
<div class="summary-item"><div class="si-label">กรุ๊ปเลือด</div><div class="si-value">${g('bloodType') || '-'}</div></div>
</div>
</div>
<div class="summary-section" style="margin-top:1rem;">
<div class="summary-title"><i class="fa fa-paperclip"></i> เอกสารแนบ</div>
<div>
${document.getElementById('file-idCard').files.length ? `<div class="file-preview-item"><i class="fa fa-check-circle fp-icon"></i><span>รูปบัตรประชาชน: ${document.getElementById('file-idCard').files[0].name}</span></div>` : ''}
${document.getElementById('file-house').files.length ? `<div class="file-preview-item"><i class="fa fa-check-circle fp-icon"></i><span>ทะเบียนบ้าน: ${document.getElementById('file-house').files[0].name}</span></div>` : '<div style="font-size:0.83rem;color:var(--gray-text);">- ไม่มีทะเบียนบ้าน</div>'}
${document.getElementById('file-rights').files.length ? `<div class="file-preview-item"><i class="fa fa-check-circle fp-icon"></i><span>เอกสารสิทธิ: ${document.getElementById('file-rights').files[0].name}</span></div>` : '<div style="font-size:0.83rem;color:var(--gray-text);">- ไม่มีเอกสารสิทธิ</div>'}
</div>
</div>
`;
document.getElementById('summaryContent').innerHTML = html;
}
function formatThaiDate(dateStr) {
if (!dateStr || dateStr === '-') return '-';
const d = new Date(dateStr);
if (isNaN(d)) return dateStr;
const months = ['มกราคม','กุมภาพันธ์','มีนาคม','เมษายน','พฤษภาคม','มิถุนายน','กรกฎาคม','สิงหาคม','กันยายน','ตุลาคม','พฤศจิกายน','ธันวาคม'];
return `${d.getDate()} ${months[d.getMonth()]} ${d.getFullYear()+543}`;
}
// ============ CONSENT & SUBMIT ============
function checkConsents() {
const c1 = document.getElementById('consent1').checked;
const c2 = document.getElementById('consent2').checked;
document.getElementById('submitBtn').disabled = !(c1 && c2);
if (c1 && c2) document.getElementById('err-consent').style.display = 'none';
}
async function submitForm() {
if (submitting) return;
submitting = true;
document.getElementById('submitBtn').disabled = true;
showLoading(true);
try {
const formData = collectFormData();
// Convert files to base64
const files = await collectFiles();
formData.files = files;
// Send to Google Apps Script
if (GAS_URL && GAS_URL !== 'YOUR_GOOGLE_APPS_SCRIPT_URL_HERE') {
const response = await fetch(GAS_URL, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(formData)
});
const result = await response.json();
if (!result.success) throw new Error(result.message || 'เกิดข้อผิดพลาด');
} else {
// Demo mode - simulate delay
await new Promise(r => setTimeout(r, 2000));
console.log('Demo mode - Form data:', formData);
}
// Clear draft
localStorage.removeItem('pph_draft');
showLoading(false);
showSuccess();
} catch (err) {
showLoading(false);
submitting = false;
document.getElementById('submitBtn').disabled = false;
showToast('เกิดข้อผิดพลาด: ' + err.message, 'error');
console.error(err);
}
}
function collectFormData() {
const g = (id) => document.getElementById(id)?.value || '';
const gender = document.querySelector('input[name=gender]:checked')?.value || '';
const age = parseInt(g('age'));
return {
regId,
timestamp: new Date().toISOString(),
firstName: g('firstName'),
lastName: g('lastName'),
idCard: g('idCard').replace(/-/g,''),
birthDate: g('birthDate'),
age: g('age'),
gender,
phone: g('phone').replace(/-/g,''),
addrMoo: g('addrMoo'),
addrTambon: g('addrTambon'),
addrAmphoe: g('addrAmphoe'),
addrProvince: g('addrProvince'),
address: `${g('addrMoo')} ต.${g('addrTambon')} อ.${g('addrAmphoe')} จ.${g('addrProvince')}`,
treatmentRight: g('treatmentRight'),
rightHospital: g('rightHospital'),
emgName: g('emgName'),
emgRelation: g('emgRelation'),
emgPhone: g('emgPhone').replace(/-/g,''),
fatherName: g('fatherName'),
motherName: g('motherName'),
occupation: g('occupation'),
religion: g('religion'),
bloodType: g('bloodType'),
guardianName: age < 15 ? g('guardianName') : '',
guardianRelation: age < 15 ? g('guardianRelation') : '',
guardianIdCard: age < 15 ? g('guardianIdCard').replace(/-/g,'') : '',
guardianPhone: age < 15 ? g('guardianPhone').replace(/-/g,'') : '',
status: 'รอดำเนินการ'
};
}
async function collectFiles() {
const result = {};
const fileInputs = ['file-idCard','file-house','file-rights'];
const keys = ['idCard','house','rights'];
for (let i=0; i<fileInputs.length; i++) {
const el = document.getElementById(fileInputs[i]);
if (el.files.length) {
result[keys[i]] = await fileToBase64(el.files[0]);
result[keys[i]+'_name'] = el.files[0].name;
result[keys[i]+'_type'] = el.files[0].type;
}
}
return result;
}
function fileToBase64(file) {
return new Promise((resolve) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result.split(',')[1]);
reader.readAsDataURL(file);
});
}
function showSuccess() {
document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
document.getElementById('fabSave').classList.remove('show');
const sp = document.getElementById('page-success');
sp.style.display = 'block';
document.getElementById('successRegId').textContent = regId;
updateProgress(100);
window.scrollTo({ top: 0, behavior: 'smooth' });
}
// ============ FILE UPLOAD ============
function showPreview(input, previewId) {
const container = document.getElementById(previewId);
container.innerHTML = '';
Array.from(input.files).forEach(file => {
const item = document.createElement('div');
item.className = 'file-preview-item';
const isImage = file.type.startsWith('image/');
if (isImage) {
const img = document.createElement('img');
img.className = 'file-preview-thumb';
img.src = URL.createObjectURL(file);
item.appendChild(img);
} else {
const icon = document.createElement('i');
icon.className = 'fa fa-file-pdf fp-icon';
item.appendChild(icon);
}
const name = document.createElement('span');
name.className = 'fp-name';
name.textContent = file.name + ' (' + (file.size/1024).toFixed(0) + ' KB)';
item.appendChild(name);
container.appendChild(item);
if (file.size > 5*1024*1024) {
showToast(`ไฟล์ ${file.name} มีขนาดเกิน 5 MB`, 'error');
input.value = '';
container.innerHTML = '';
}
});
}
function handleDrop(event, inputId, previewId) {
event.preventDefault();
const dt = event.dataTransfer;
const input = document.getElementById(inputId);
input.files = dt.files;
showPreview(input, previewId);
}
// ============ DRAFT / LOCAL STORAGE ============
function saveDraftSilent() {
const g = (id) => document.getElementById(id)?.value || '';
const gender = document.querySelector('input[name=gender]:checked')?.value || '';
const draft = {
firstName:g('firstName'), lastName:g('lastName'), idCard:g('idCard'),
birthDate:g('birthDate'), age:g('age'), gender,
phone:g('phone'), addrMoo:g('addrMoo'), addrTambon:g('addrTambon'),
addrAmphoe:g('addrAmphoe'), addrProvince:g('addrProvince'),
treatmentRight:g('treatmentRight'), rightHospital:g('rightHospital'),
emgName:g('emgName'), emgRelation:g('emgRelation'), emgPhone:g('emgPhone'),
fatherName:g('fatherName'), motherName:g('motherName'),
occupation:g('occupation'), religion:g('religion'), bloodType:g('bloodType'),
regId, savedAt: new Date().toISOString()
};
localStorage.setItem('pph_draft', JSON.stringify(draft));
}
function saveDraft() {
saveDraftSilent();
showToast('บันทึกร่างแล้ว ✓', 'success');
}
function checkDraft() {
const raw = localStorage.getItem('pph_draft');
if (raw) {
try {
const d = JSON.parse(raw);
if (d.firstName) document.getElementById('draftBanner').classList.add('show');
} catch(e) {}
}
}
function loadDraft() {
const raw = localStorage.getItem('pph_draft');
if (!raw) return;
const d = JSON.parse(raw);
const s = (id, val) => { const el=document.getElementById(id); if(el&&val) el.value=val; };
s('firstName',d.firstName); s('lastName',d.lastName); s('idCard',d.idCard);
s('birthDate',d.birthDate); s('age',d.age); s('phone',d.phone);
s('addrMoo',d.addrMoo); s('addrTambon',d.addrTambon); s('addrAmphoe',d.addrAmphoe);
s('addrProvince',d.addrProvince); s('treatmentRight',d.treatmentRight);
s('rightHospital',d.rightHospital); s('emgName',d.emgName); s('emgRelation',d.emgRelation);
s('emgPhone',d.emgPhone); s('fatherName',d.fatherName); s('motherName',d.motherName);
s('occupation',d.occupation); s('religion',d.religion); s('bloodType',d.bloodType);
if (d.gender) {
const el = document.querySelector(`input[name=gender][value="${d.gender}"]`);
if (el) el.checked = true;
}
if (d.regId) regId = d.regId;
document.getElementById('regIdDisplay').textContent = regId;
document.getElementById('draftBanner').classList.remove('show');
calcAge();
showToast('กู้คืนข้อมูลสำเร็จ ✓', 'success');
}
function clearDraft() {
localStorage.removeItem('pph_draft');
document.getElementById('draftBanner').classList.remove('show');
showToast('ล้างข้อมูลร่างแล้ว', '');
}
// ============ UI HELPERS ============
function showLoading(show) {
document.getElementById('loading-overlay').className = show ? 'show' : '';
}
function showToast(msg, type) {
const t = document.getElementById('toast');
t.textContent = msg;
t.className = 'toast show' + (type === 'success' ? ' success-toast' : type === 'error' ? ' error-toast' : '');
setTimeout(() => { t.className = 'toast'; }, 3200);
}
// Auto-save every 30 seconds when on form page
setInterval(() => {
if (currentStep > 0 && document.getElementById('firstName')?.value) {
saveDraftSilent();
}
}, 30000);
</script>
</body>
</html>