Project

General

Profile

Download (65.1 KB)

3.Defect #3714 » malaria-bednet-distribute-mudblazor_2.html

Pattanan Kaewkaew, 22/04/2026 03:40 AM

 
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>การปฏิบัติงานแจกมุ้ง | Malaria Control</title>
<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=IBM+Plex+Sans+Thai:wght@300;400;500;600;700&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
:root {
--mud-primary: #0d7a5f;
--mud-primary-hover: #095842;
--mud-primary-lighten: rgba(13, 122, 95, 0.08);
--mud-primary-lighten-2: rgba(13, 122, 95, 0.16);
--mud-success: #00c853;
--mud-error: #e53935;
--mud-error-lighten: #fdecea;
--mud-warning: #ff9800;
--mud-info: #2196f3;
--mud-surface: #ffffff;
--mud-background: #f5f7f9;
--mud-text-primary: rgba(0, 0, 0, 0.87);
--mud-text-secondary: rgba(0, 0, 0, 0.6);
--mud-text-disabled: rgba(0, 0, 0, 0.38);
--mud-divider: rgba(0, 0, 0, 0.12);
--mud-divider-light: rgba(0, 0, 0, 0.08);
--mud-action-hover: rgba(0, 0, 0, 0.04);
--mud-action-active: rgba(0, 0, 0, 0.08);
--mud-input-border: rgba(0, 0, 0, 0.42);
--mud-elevation-1: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
--mud-elevation-2: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
--mud-elevation-4: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
--mud-elevation-8: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
--mud-radius: 4px;
--mud-radius-lg: 8px;
--transition: 225ms cubic-bezier(0.4, 0, 0.2, 1);

/* LLIN / LLIHN group colors */
--llin-color: #1976d2;
--llin-bg: #e3f2fd;
--llin-bg-soft: rgba(25, 118, 210, 0.04);
--llihn-color: #e65100;
--llihn-bg: #fff3e0;
--llihn-bg-soft: rgba(230, 81, 0, 0.04);
}

* { box-sizing: border-box; }

html, body {
margin: 0; padding: 0;
font-family: 'IBM Plex Sans Thai', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--mud-background);
color: var(--mud-text-primary);
font-size: 14px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}

.material-icons { font-family: 'Material Icons'; font-size: 20px; vertical-align: middle; user-select: none; }

/* ========= APP LAYOUT ========= */
.mud-layout {
display: grid;
grid-template-columns: 260px 1fr;
min-height: 100vh;
}

.mud-drawer {
background: var(--mud-surface);
border-right: 1px solid var(--mud-divider);
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
}

.mud-drawer-header {
padding: 20px 16px;
display: flex;
align-items: center;
gap: 12px;
border-bottom: 1px solid var(--mud-divider);
min-height: 64px;
}
.mud-brand-logo {
width: 40px; height: 40px;
border-radius: 10px;
background: linear-gradient(135deg, var(--mud-primary) 0%, var(--mud-primary-hover) 100%);
display: grid; place-items: center;
color: white; font-weight: 700; font-size: 18px;
flex-shrink: 0;
}
.mud-brand-title { font-size: 14px; font-weight: 600; line-height: 1.2; }
.mud-brand-sub { font-size: 11px; color: var(--mud-text-secondary); margin-top: 2px; }

.mud-nav-group-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--mud-text-secondary);
padding: 20px 20px 8px;
font-weight: 600;
}

.mud-nav-link {
display: flex;
align-items: center;
gap: 14px;
padding: 10px 20px;
color: var(--mud-text-primary);
cursor: pointer;
text-decoration: none;
font-size: 14px;
transition: background var(--transition);
border-left: 3px solid transparent;
}
.mud-nav-link:hover { background: var(--mud-action-hover); }
.mud-nav-link.active {
background: var(--mud-primary-lighten);
color: var(--mud-primary);
border-left-color: var(--mud-primary);
font-weight: 500;
}
.mud-nav-link .material-icons { font-size: 20px; opacity: 0.8; }
.mud-nav-link.active .material-icons { opacity: 1; }

/* ========= APP BAR ========= */
.mud-appbar {
background: var(--mud-surface);
box-shadow: var(--mud-elevation-1);
padding: 0 24px;
min-height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
z-index: 10;
}
.mud-breadcrumbs {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--mud-text-secondary);
}
.mud-breadcrumbs a { color: var(--mud-text-secondary); text-decoration: none; transition: color var(--transition); }
.mud-breadcrumbs a:hover { color: var(--mud-primary); }
.mud-breadcrumbs .sep { color: var(--mud-text-disabled); }
.mud-breadcrumbs .current { color: var(--mud-text-primary); font-weight: 500; }

.mud-appbar-actions { display: flex; align-items: center; gap: 12px; }

.mud-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 12px 4px 4px;
background: var(--mud-action-hover);
border-radius: 999px;
font-size: 13px;
}
.mud-avatar {
width: 28px; height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, var(--mud-primary) 0%, var(--mud-primary-hover) 100%);
color: white;
display: grid; place-items: center;
font-size: 12px; font-weight: 600;
}

.mud-main { display: flex; flex-direction: column; min-width: 0; }
.mud-container {
padding: 24px;
max-width: 1400px;
width: 100%;
margin: 0 auto;
}

.page-header {
margin-bottom: 20px;
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 24px;
flex-wrap: wrap;
}
.page-title {
font-size: 24px;
font-weight: 500;
margin: 0 0 4px;
color: var(--mud-text-primary);
}
.page-sub { color: var(--mud-text-secondary); font-size: 14px; }

.mud-badge-status {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
background: #fff3e0;
color: #e65100;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
}
.mud-badge-status .material-icons { font-size: 14px; }

/* ========= TABS ========= */
.mud-tabs {
background: var(--mud-surface);
border-radius: var(--mud-radius) var(--mud-radius) 0 0;
border-bottom: 1px solid var(--mud-divider);
display: flex;
padding: 0 8px;
margin-bottom: 16px;
box-shadow: var(--mud-elevation-1);
}
.mud-tab {
padding: 14px 20px;
font-size: 14px;
font-weight: 500;
color: var(--mud-text-secondary);
cursor: pointer;
border: none;
background: none;
font-family: inherit;
position: relative;
transition: color var(--transition), background var(--transition);
display: flex;
align-items: center;
gap: 10px;
letter-spacing: 0.04em;
min-height: 48px;
}
.mud-tab:hover { background: var(--mud-action-hover); color: var(--mud-text-primary); }
.mud-tab::after {
content: '';
position: absolute;
left: 12px; right: 12px; bottom: -1px;
height: 2px;
background: transparent;
transition: background var(--transition);
}
.mud-tab.active { color: var(--mud-primary); }
.mud-tab.active::after { background: var(--mud-primary); }
.mud-tab-icon {
display: inline-grid; place-items: center;
width: 22px; height: 22px;
border-radius: 50%;
background: var(--mud-action-active);
color: var(--mud-text-secondary);
font-size: 12px; font-weight: 600;
transition: all var(--transition);
}
.mud-tab.active .mud-tab-icon { background: var(--mud-primary); color: white; }

/* ========= PAPER ========= */
.mud-paper {
background: var(--mud-surface);
border-radius: var(--mud-radius);
box-shadow: var(--mud-elevation-1);
padding: 24px;
margin-bottom: 16px;
}
.mud-paper-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid var(--mud-divider-light);
}
.mud-paper-title {
display: flex;
align-items: center;
gap: 12px;
font-size: 16px;
font-weight: 500;
}
.mud-paper-title-icon {
width: 36px; height: 36px;
border-radius: 8px;
background: var(--mud-primary-lighten);
color: var(--mud-primary);
display: grid; place-items: center;
}
.mud-paper-title-icon .material-icons { font-size: 20px; }
.mud-paper-subtitle {
font-size: 12px;
color: var(--mud-text-secondary);
font-weight: 400;
margin-top: 2px;
}

/* ========= GRID ========= */
.mud-grid { display: grid; gap: 20px; }
.mud-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.mud-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.mud-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.mud-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.mud-grid.cols-6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1200px) {
.mud-grid.cols-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 960px) {
.mud-grid.cols-6, .mud-grid.cols-5, .mud-grid.cols-4, .mud-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.mud-grid.cols-6, .mud-grid.cols-5, .mud-grid.cols-4, .mud-grid.cols-3, .mud-grid.cols-2 { grid-template-columns: 1fr; }
}

/* ========= TEXT FIELD ========= */
.mud-field { position: relative; padding-top: 6px; }
.mud-input-root { position: relative; width: 100%; }
.mud-input {
width: 100%;
padding: 14px 12px 10px;
border: 1px solid var(--mud-input-border);
border-radius: var(--mud-radius);
background: var(--mud-surface);
font-family: inherit;
font-size: 14px;
color: var(--mud-text-primary);
outline: none;
transition: border-color var(--transition);
min-height: 44px;
}
.mud-input:hover:not(:disabled) { border-color: var(--mud-text-primary); }
.mud-input:focus {
border: 2px solid var(--mud-primary);
padding: 13px 11px 9px;
}
.mud-input:disabled {
background: #fafafa;
color: var(--mud-text-disabled);
border-color: var(--mud-divider);
cursor: not-allowed;
}

.mud-label {
position: absolute;
left: 10px;
top: -7px;
padding: 0 4px;
background: var(--mud-surface);
font-size: 12px;
color: var(--mud-text-secondary);
pointer-events: none;
transition: color var(--transition);
z-index: 1;
}
.mud-input:focus ~ .mud-label { color: var(--mud-primary); }
.mud-label .req { color: var(--mud-error); margin-left: 2px; }

/* Override label bg when inside a tinted section-box */
.section-box-tinted .mud-label { background: var(--box-bg, #fafafa); }

.mud-input-helper {
font-size: 11px;
color: var(--mud-text-secondary);
margin-top: 3px;
margin-left: 12px;
}

.mud-select {
appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-opacity='.54' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 36px !important;
cursor: pointer;
}

.mud-input-adornment-end {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
color: var(--mud-text-secondary);
display: grid; place-items: center;
pointer-events: none;
}
.mud-input-adornment-end.clickable { pointer-events: auto; cursor: pointer; }
.mud-input-adornment-end .material-icons { font-size: 20px; }

textarea.mud-input { resize: vertical; min-height: 60px; font-family: inherit; }

/* ========= RADIO GROUP ========= */
.mud-radio-group-label {
font-size: 13px;
font-weight: 500;
color: var(--mud-text-secondary);
margin-bottom: 8px;
display: block;
}
.mud-radio-group-label .req { color: var(--mud-error); margin-left: 2px; }

.mud-radio-group {
display: flex;
flex-wrap: wrap;
gap: 4px 20px;
}

.mud-radio {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px 6px 6px;
cursor: pointer;
user-select: none;
border-radius: 999px;
transition: background var(--transition);
}
.mud-radio:hover { background: var(--mud-action-hover); }
.mud-radio-circle {
width: 20px; height: 20px;
border: 2px solid var(--mud-text-secondary);
border-radius: 50%;
position: relative;
transition: border-color var(--transition);
flex-shrink: 0;
}
.mud-radio.checked .mud-radio-circle { border-color: var(--mud-primary); }
.mud-radio.checked .mud-radio-circle::after {
content: '';
position: absolute;
inset: 3px;
background: var(--mud-primary);
border-radius: 50%;
animation: radioGrow 180ms ease-out;
}
@keyframes radioGrow { from { transform: scale(0); } to { transform: scale(1); } }
.mud-radio-label { font-size: 14px; color: var(--mud-text-primary); }

/* ========= CHECKBOX ========= */
.mud-checkbox {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px 6px 6px;
cursor: pointer;
user-select: none;
border-radius: 999px;
transition: background var(--transition);
}
.mud-checkbox:hover { background: var(--mud-action-hover); }
.mud-checkbox-box {
width: 20px; height: 20px;
border: 2px solid var(--mud-text-secondary);
border-radius: 3px;
display: grid; place-items: center;
transition: all var(--transition);
flex-shrink: 0;
}
.mud-checkbox.checked .mud-checkbox-box {
background: var(--mud-primary);
border-color: var(--mud-primary);
}
.mud-checkbox.checked .mud-checkbox-box::after {
content: '';
width: 11px; height: 6px;
border-left: 2px solid white;
border-bottom: 2px solid white;
transform: rotate(-45deg) translate(1px, -1px);
}
.mud-checkbox-label { font-size: 14px; color: var(--mud-text-primary); }

/* ========= BUTTON ========= */
.mud-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 8px 16px;
border-radius: var(--mud-radius);
font-size: 14px;
font-weight: 500;
font-family: inherit;
cursor: pointer;
border: none;
letter-spacing: 0.04em;
transition: all var(--transition);
min-height: 36px;
white-space: nowrap;
position: relative;
overflow: hidden;
}
.mud-button .material-icons { font-size: 18px; }
.mud-button-filled { background: var(--mud-primary); color: white; box-shadow: var(--mud-elevation-2); }
.mud-button-filled:hover { background: var(--mud-primary-hover); box-shadow: var(--mud-elevation-4); }
.mud-button-outlined { background: transparent; color: var(--mud-primary); border: 1px solid rgba(13, 122, 95, 0.5); }
.mud-button-outlined:hover { background: var(--mud-primary-lighten); border-color: var(--mud-primary); }
.mud-button-text { background: transparent; color: var(--mud-primary); padding: 8px 12px; }
.mud-button-text:hover { background: var(--mud-primary-lighten); }
.mud-button-text-default { color: var(--mud-text-secondary); }
.mud-button-text-default:hover { background: var(--mud-action-hover); }

/* ========= ICON BUTTON ========= */
.mud-icon-button {
width: 36px; height: 36px;
border-radius: 50%;
border: none;
background: transparent;
cursor: pointer;
color: var(--mud-text-secondary);
display: grid; place-items: center;
transition: background var(--transition), color var(--transition);
}
.mud-icon-button:hover { background: var(--mud-action-hover); color: var(--mud-text-primary); }
.mud-icon-button.danger:hover { background: var(--mud-error-lighten); color: var(--mud-error); }
.mud-icon-button.primary-color { color: var(--mud-primary); }
.mud-icon-button.primary-color:hover { background: var(--mud-primary-lighten); }
.mud-icon-button .material-icons { font-size: 20px; }

/* ========= SECTION BOX ========= */
.section-box {
border: 1px solid var(--mud-divider);
border-radius: var(--mud-radius);
padding: 18px 20px;
background: #fafafa;
}
.section-box-label {
font-size: 12px;
font-weight: 600;
color: var(--mud-text-secondary);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 14px;
display: flex;
align-items: center;
gap: 6px;
padding-bottom: 10px;
border-bottom: 1px dashed var(--mud-divider);
}
.section-box-label .material-icons { font-size: 16px; color: var(--mud-primary); }

/* Tinted section boxes (LLIN / LLIHN groups) */
.section-box-tinted { border-left-width: 4px; }
.section-box-llin {
background: var(--llin-bg-soft);
border-color: rgba(25, 118, 210, 0.2);
border-left-color: var(--llin-color);
--box-bg: #fbfcfe;
}
.section-box-llin .section-box-label { color: var(--llin-color); }
.section-box-llin .section-box-label .material-icons { color: var(--llin-color); }

.section-box-llihn {
background: var(--llihn-bg-soft);
border-color: rgba(230, 81, 0, 0.2);
border-left-color: var(--llihn-color);
--box-bg: #fffbf7;
}
.section-box-llihn .section-box-label { color: var(--llihn-color); }
.section-box-llihn .section-box-label .material-icons { color: var(--llihn-color); }

.section-box-distribute {
background: rgba(13, 122, 95, 0.04);
border-color: rgba(13, 122, 95, 0.2);
border-left-color: var(--mud-primary);
--box-bg: #fbfdfc;
}

.mud-divider { height: 1px; background: var(--mud-divider); margin: 20px 0; border: none; }

/* ========= TABLE ========= */
.mud-table-container {
background: var(--mud-surface);
border-radius: var(--mud-radius);
box-shadow: var(--mud-elevation-1);
overflow: hidden;
}
.mud-table-toolbar {
padding: 12px 20px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
border-bottom: 1px solid var(--mud-divider-light);
}
.mud-table-title {
font-size: 16px;
font-weight: 500;
display: flex;
align-items: center;
gap: 10px;
}
.mud-table-count {
background: var(--mud-action-active);
padding: 2px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 500;
color: var(--mud-text-secondary);
}
.mud-table-search { position: relative; max-width: 260px; flex: 1; }
.mud-table-search .material-icons {
position: absolute; left: 12px; top: 50%;
transform: translateY(-50%);
color: var(--mud-text-secondary);
font-size: 18px;
pointer-events: none;
}
.mud-table-search input {
width: 100%;
padding: 8px 12px 8px 40px;
border: 1px solid var(--mud-divider);
border-radius: var(--mud-radius);
font-family: inherit;
font-size: 13px;
outline: none;
transition: border-color var(--transition);
}
.mud-table-search input:focus { border-color: var(--mud-primary); }

.mud-table-scroll {
overflow-x: auto;
max-width: 100%;
}
table.mud-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
min-width: 1400px;
}
.mud-table th {
text-align: left;
padding: 10px 12px;
font-weight: 500;
color: var(--mud-text-secondary);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
background: #fafafa;
border-bottom: 1px solid var(--mud-divider);
white-space: nowrap;
vertical-align: middle;
}
.mud-table th.num, .mud-table td.num { text-align: right; }
.mud-table th.center, .mud-table td.center { text-align: center; }
.mud-table td {
padding: 12px;
border-bottom: 1px solid var(--mud-divider-light);
font-size: 14px;
}
.mud-table tbody tr { transition: background var(--transition); cursor: pointer; }
.mud-table tbody tr:hover td { background-color: var(--mud-action-hover); }
.mud-table tbody tr:hover td.cell-llin { background-color: rgba(25, 118, 210, 0.06); }
.mud-table tbody tr:hover td.cell-llihn { background-color: rgba(230, 81, 0, 0.06); }
.mud-table tbody tr:hover td.cell-distribute { background-color: rgba(13, 122, 95, 0.06); }
.mud-table tbody tr:last-child td { border-bottom: none; }
.mud-table tbody tr.selected td { background-color: var(--mud-primary-lighten); }

/* ========= STICKY (FROZEN) LAST COLUMN - จัดการ ========= */
.mud-table th.sticky-right,
.mud-table td.sticky-right {
position: sticky;
right: 0;
z-index: 2;
background: var(--mud-surface);
box-shadow: -4px 0 8px -4px rgba(0, 0, 0, 0.08);
border-left: 1px solid var(--mud-divider);
}
.mud-table th.sticky-right {
background: #fafafa;
z-index: 3;
}
.mud-table tbody tr:hover td.sticky-right {
background: #f5f5f5;
}
.mud-table tbody tr.selected td.sticky-right {
background: var(--mud-primary-lighten);
}

/* Grouped column headers */
.mud-table th.group-llin {
background: var(--llin-bg);
color: var(--llin-color);
text-align: center;
font-size: 12px;
font-weight: 600;
border-bottom: 2px solid var(--llin-color);
}
.mud-table th.group-llihn {
background: var(--llihn-bg);
color: var(--llihn-color);
text-align: center;
font-size: 12px;
font-weight: 600;
border-bottom: 2px solid var(--llihn-color);
}
.mud-table th.sub-llin {
background: rgba(25, 118, 210, 0.05);
color: var(--llin-color);
border-bottom-color: rgba(25, 118, 210, 0.3);
}
.mud-table th.sub-llihn {
background: rgba(230, 81, 0, 0.05);
color: var(--llihn-color);
border-bottom-color: rgba(230, 81, 0, 0.3);
}
.mud-table th.sub-distribute {
background: rgba(13, 122, 95, 0.05);
color: var(--mud-primary);
border-bottom-color: rgba(13, 122, 95, 0.3);
}
.mud-table th.group-distribute {
background: var(--mud-primary-lighten);
color: var(--mud-primary);
text-align: center;
font-size: 12px;
font-weight: 600;
border-bottom: 2px solid var(--mud-primary);
}

.mud-table td.cell-llin { background: rgba(25, 118, 210, 0.02); }
.mud-table td.cell-llihn { background: rgba(230, 81, 0, 0.02); }
.mud-table td.cell-distribute { background: rgba(13, 122, 95, 0.02); }

.row-actions { display: flex; gap: 2px; justify-content: flex-end; }

/* Number cell */
.num-cell {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 24px;
padding: 0 6px;
border-radius: 4px;
font-size: 13px;
font-weight: 500;
}
.num-cell-zero { color: var(--mud-text-disabled); font-weight: 400; }
.num-cell-total { background: #f5f5f5; color: var(--mud-text-primary); font-weight: 600; }

/* ========= SUMMARY PANEL ========= */
.mud-summary {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px;
padding: 16px 20px;
border-top: 1px solid var(--mud-divider-light);
background: #fafafa;
}
.summary-item {
display: flex;
flex-direction: column;
padding: 8px 12px;
border-radius: var(--mud-radius);
position: relative;
}
.summary-item::before {
content: '';
position: absolute;
left: 0; top: 4px; bottom: 4px;
width: 3px;
border-radius: 2px;
background: var(--item-color, var(--mud-divider));
}
.summary-item.group-llin { background: var(--llin-bg-soft); }
.summary-item.group-llihn { background: var(--llihn-bg-soft); }
.summary-label {
font-size: 11px;
color: var(--mud-text-secondary);
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 500;
display: flex;
align-items: center;
gap: 4px;
}
.summary-label .material-icons { font-size: 13px; color: var(--item-color, var(--mud-text-secondary)); }
.summary-value {
font-size: 22px;
font-weight: 600;
color: var(--mud-text-primary);
margin-top: 2px;
line-height: 1.2;
}
.summary-value small {
font-size: 12px;
color: var(--mud-text-secondary);
margin-left: 4px;
font-weight: 400;
}

/* ========= LAYOUT ========= */
.households-layout {
display: grid;
grid-template-columns: 420px minmax(0, 1fr);
gap: 16px;
align-items: start;
}
.households-layout > * { min-width: 0; }
@media (max-width: 1200px) {
.households-layout { grid-template-columns: minmax(0, 1fr); }
}

/* ========= ACTION BAR ========= */
.mud-action-bar {
position: sticky;
bottom: 0;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-top: 1px solid var(--mud-divider);
padding: 12px 24px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
margin: 0 -24px -24px;
z-index: 5;
box-shadow: 0 -2px 8px rgba(0,0,0,.04);
}
.action-status { font-size: 13px; color: var(--mud-text-secondary); display: flex; align-items: center; gap: 8px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mud-warning); }
.status-dot.saved { background: var(--mud-success); }
.action-btns { display: flex; gap: 8px; }

/* Activity legend chip */
.activity-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.activity-chip {
padding: 3px 10px;
border-radius: 999px;
font-size: 12px;
background: var(--mud-primary-lighten);
color: var(--mud-primary);
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 4px;
}
.activity-chip .material-icons { font-size: 14px; }

/* Mobile */
.mobile-menu-btn { display: none; }
@media (max-width: 960px) {
.mud-layout { grid-template-columns: 1fr; }
.mud-drawer {
position: fixed; top: 0; left: 0; width: 260px; z-index: 30;
transform: translateX(-100%);
transition: transform var(--transition);
box-shadow: var(--mud-elevation-8);
}
.mud-drawer.open { transform: translateX(0); }
.mobile-menu-btn { display: grid; place-items: center; }
.mud-appbar { padding: 0 16px; }
.mud-container { padding: 16px; }
.mud-action-bar { margin: 0 -16px -16px; padding: 12px 16px; }
.user-name { display: none; }
}

.overlay {
display: none;
position: fixed; inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 25;
}
.overlay.show { display: block; }

.tab-panel { display: none; animation: fadeIn 0.2s ease; }
.tab-panel.active { display: block; }
@keyframes fadeIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}

/* Auto-calc hint badge inside field */
.calc-hint {
font-size: 10px;
padding: 2px 6px;
border-radius: 3px;
background: var(--mud-primary-lighten);
color: var(--mud-primary);
font-weight: 500;
margin-left: 6px;
white-space: nowrap;
}
</style>
</head>
<body>

<div class="mud-layout">
<!-- ========= DRAWER ========= -->
<aside class="mud-drawer" id="drawer">
<div class="mud-drawer-header">
<div class="mud-brand-logo">M</div>
<div>
<div class="mud-brand-title">Malaria Control</div>
<div class="mud-brand-sub">กรมควบคุมโรค</div>
</div>
</div>

<div class="mud-nav-group-label">หน้าหลัก</div>
<a class="mud-nav-link"><span class="material-icons">dashboard</span>แดชบอร์ด</a>
<a class="mud-nav-link"><span class="material-icons">search</span>ค้นหาผู้ป่วย</a>

<div class="mud-nav-group-label">การควบคุมพาหะ</div>
<a class="mud-nav-link"><span class="material-icons">blur_on</span>การฉีดพ่นสารเคมี</a>
<a class="mud-nav-link"><span class="material-icons">shield</span>มุ้งชุบสารเคมี</a>
<a class="mud-nav-link active"><span class="material-icons">inventory_2</span>แจกมุ้ง</a>
<a class="mud-nav-link"><span class="material-icons">pest_control</span>สำรวจลูกน้ำยุง</a>

<div class="mud-nav-group-label">รายงาน</div>
<a class="mud-nav-link"><span class="material-icons">bar_chart</span>สรุปผลงาน</a>
<a class="mud-nav-link"><span class="material-icons">description</span>เอกสารส่งออก</a>
</aside>

<div class="overlay" id="overlay" onclick="toggleDrawer()"></div>

<div class="mud-main">
<div class="mud-appbar">
<div style="display:flex;align-items:center;gap:8px;">
<button class="mud-icon-button mobile-menu-btn" onclick="toggleDrawer()">
<span class="material-icons">menu</span>
</button>
<nav class="mud-breadcrumbs">
<a href="#">หน้าแรก</a>
<span class="sep">›</span>
<a href="#">การควบคุมพาหะ</a>
<span class="sep">›</span>
<span class="current">การปฏิบัติงานแจกมุ้ง</span>
</nav>
</div>
<div class="mud-appbar-actions">
<button class="mud-icon-button"><span class="material-icons">notifications</span></button>
<button class="mud-icon-button"><span class="material-icons">help_outline</span></button>
<div class="mud-chip">
<div class="mud-avatar">จท</div>
<span class="user-name">หน่วย คม.6.5.3 ไผ่เขียว</span>
</div>
</div>
</div>

<div class="mud-container">
<div class="page-header">
<div>
<h1 class="page-title">การปฏิบัติงานแจกมุ้ง</h1>
<div class="page-sub">บันทึกและจัดการข้อมูลการสำรวจและแจกมุ้งในพื้นที่ควบคุมโรค</div>
</div>
<div style="display:flex;gap:12px;align-items:center;">
<span class="mud-badge-status">
<span class="material-icons">edit</span>
กำลังแก้ไข
</span>
<span style="font-size:13px;color:var(--mud-text-secondary);">
รหัสงาน: <strong style="color:var(--mud-text-primary);font-weight:500;">NET-2569-00078</strong>
</span>
</div>
</div>

<!-- TABS -->
<div class="mud-tabs">
<button class="mud-tab active" onclick="switchTab('basic')">
<span class="mud-tab-icon">1</span>
ข้อมูลพื้นที่
</button>
<button class="mud-tab" onclick="switchTab('household')">
<span class="mud-tab-icon">2</span>
ข้อมูลครัวเรือน
</button>
</div>

<!-- ========= TAB 1: BASIC ========= -->
<div class="tab-panel active" id="tab-basic">

<!-- AREA -->
<div class="mud-paper">
<div class="mud-paper-header">
<div class="mud-paper-title">
<div class="mud-paper-title-icon"><span class="material-icons">place</span></div>
<div>
พื้นที่ปฏิบัติงาน
<div class="mud-paper-subtitle">ข้อมูลที่อยู่ของพื้นที่ที่จะดำเนินการ</div>
</div>
</div>
</div>

<div class="mud-grid cols-6">
<div class="mud-field">
<div class="mud-input-root">
<select class="mud-input mud-select" disabled><option>จันทบุรี</option></select>
<label class="mud-label">จังหวัด<span class="req">*</span></label>
</div>
</div>
<div class="mud-field">
<div class="mud-input-root">
<select class="mud-input mud-select" disabled><option>โป่งน้ำร้อน</option></select>
<label class="mud-label">อำเภอ<span class="req">*</span></label>
</div>
</div>
<div class="mud-field">
<div class="mud-input-root">
<select class="mud-input mud-select" disabled><option>โป่งน้ำร้อน</option></select>
<label class="mud-label">ตำบล<span class="req">*</span></label>
</div>
</div>
<div class="mud-field">
<div class="mud-input-root">
<select class="mud-input mud-select" disabled><option>หมู่ที่ 1</option></select>
<label class="mud-label">หมู่ที่<span class="req">*</span></label>
</div>
</div>
<div class="mud-field" style="grid-column: span 2;">
<div class="mud-input-root">
<select class="mud-input mud-select" disabled><option>คลองตาคง</option></select>
<label class="mud-label">กลุ่มบ้าน<span class="req">*</span></label>
</div>
</div>
</div>

<!-- ระยะพื้นที่ -->
<div class="section-box" style="margin-top: 20px;">
<label class="mud-radio-group-label">ระยะพื้นที่<span class="req">*</span></label>
<div class="mud-radio-group">
<label class="mud-radio" onclick="setRadio(this)">
<span class="mud-radio-circle"></span>
<span class="mud-radio-label">A1</span>
</label>
<label class="mud-radio" onclick="setRadio(this)">
<span class="mud-radio-circle"></span>
<span class="mud-radio-label">A2</span>
</label>
<label class="mud-radio checked" onclick="setRadio(this)">
<span class="mud-radio-circle"></span>
<span class="mud-radio-label">B1</span>
</label>
<label class="mud-radio" onclick="setRadio(this)">
<span class="mud-radio-circle"></span>
<span class="mud-radio-label">B2</span>
</label>
</div>
</div>
</div>

<!-- ACTIVITY -->
<div class="mud-paper">
<div class="mud-paper-header">
<div class="mud-paper-title">
<div class="mud-paper-title-icon"><span class="material-icons">event_available</span></div>
<div>
รายละเอียดกิจกรรม
<div class="mud-paper-subtitle">วันที่ ประเภทกิจกรรม และแหล่งที่มาของมุ้ง</div>
</div>
</div>
</div>

<!-- Dates -->
<div class="mud-grid cols-4" style="margin-bottom: 20px;">
<div class="mud-field">
<div class="mud-input-root">
<input type="text" class="mud-input" value="01/01/2569">
<label class="mud-label">วันที่เริ่มสำรวจ</label>
<span class="mud-input-adornment-end"><span class="material-icons">event</span></span>
</div>
</div>
<div class="mud-field">
<div class="mud-input-root">
<input type="text" class="mud-input" value="01/01/2569">
<label class="mud-label">วันที่แจก</label>
<span class="mud-input-adornment-end"><span class="material-icons">event</span></span>
</div>
</div>
</div>

<!-- Activity checkboxes -->
<div class="section-box">
<label class="mud-radio-group-label">กิจกรรม<span class="req">*</span> <span style="font-size:11px; color:var(--mud-text-disabled); font-weight:400;">(เลือกได้หลายข้อ)</span></label>
<div style="display:flex; gap:4px 16px; flex-wrap:wrap; align-items:center;">
<label class="mud-checkbox checked" onclick="toggleCheck(this)">
<span class="mud-checkbox-box"></span>
<span class="mud-checkbox-label">สำรวจมุ้ง</span>
</label>
<label class="mud-checkbox checked" onclick="toggleCheck(this)">
<span class="mud-checkbox-box"></span>
<span class="mud-checkbox-label">แจกมุ้ง</span>
</label>
<label class="mud-checkbox" onclick="toggleCheck(this)">
<span class="mud-checkbox-box"></span>
<span class="mud-checkbox-label">แจกมุ้ง ต.2</span>
</label>
<label class="mud-checkbox" onclick="toggleCheck(this, 'school')">
<span class="mud-checkbox-box"></span>
<span class="mud-checkbox-label">แจกมุ้งในโรงเรียน</span>
</label>

<!-- School field, shown when 'แจกมุ้งในโรงเรียน' is checked -->
<div class="mud-field" id="school-field" style="flex: 1; min-width: 260px; max-width: 360px; padding-top: 0; display: none;">
<div class="mud-input-root">
<input type="text" class="mud-input" placeholder="ระบุชื่อโรงเรียน" style="padding-right: 40px;">
<label class="mud-label">โรงเรียน<span class="req">*</span></label>
<span class="mud-input-adornment-end clickable"><span class="material-icons">search</span></span>
</div>
</div>
</div>
</div>

<div class="mud-divider"></div>

<!-- Chemical source -->
<div class="section-box">
<label class="mud-radio-group-label">แหล่งมุ้ง<span class="req">*</span></label>
<div class="mud-radio-group">
<label class="mud-radio" onclick="setRadio(this)">
<span class="mud-radio-circle"></span>
<span class="mud-radio-label">งบปกติ</span>
</label>
<label class="mud-radio checked" onclick="setRadio(this)">
<span class="mud-radio-circle"></span>
<span class="mud-radio-label">กองทุนโลก</span>
</label>
<label class="mud-radio" onclick="setRadio(this)">
<span class="mud-radio-circle"></span>
<span class="mud-radio-label">แหล่งทุนอื่น</span>
</label>
<label class="mud-radio" onclick="setRadio(this)">
<span class="mud-radio-circle"></span>
<span class="mud-radio-label">RAI</span>
</label>
<label class="mud-radio" onclick="setRadio(this)">
<span class="mud-radio-circle"></span>
<span class="mud-radio-label">RAI2E</span>
</label>
</div>
</div>
</div>

<!-- TEAM -->
<div class="mud-paper">
<div class="mud-paper-header">
<div class="mud-paper-title">
<div class="mud-paper-title-icon"><span class="material-icons">groups</span></div>
<div>
ทีมปฏิบัติงาน
<div class="mud-paper-subtitle">ผู้รับผิดชอบและผู้ควบคุมงาน</div>
</div>
</div>
</div>

<div class="mud-grid cols-2">
<div class="mud-field">
<div class="mud-input-root">
<input type="text" class="mud-input" value="จันทนาภรณ์ (pattanank@biophics.org)" style="padding-right:40px;">
<label class="mud-label">หัวหน้าทีม<span class="req">*</span></label>
<span class="mud-input-adornment-end clickable"><span class="material-icons">search</span></span>
</div>
</div>
<div class="mud-field">
<div class="mud-input-root">
<input type="text" class="mud-input" placeholder="ค้นหาผู้ควบคุม" style="padding-right:40px;">
<label class="mud-label">ผู้ควบคุม</label>
<span class="mud-input-adornment-end clickable"><span class="material-icons">search</span></span>
</div>
</div>
</div>

<div class="mud-field" style="margin-top: 20px;">
<div class="mud-input-root">
<textarea class="mud-input" placeholder="บันทึกเพิ่มเติมเกี่ยวกับการปฏิบัติงาน"></textarea>
<label class="mud-label">หมายเหตุ</label>
</div>
</div>
</div>
</div>

<!-- ========= TAB 2: HOUSEHOLD ========= -->
<div class="tab-panel" id="tab-household">

<div class="households-layout">
<!-- LEFT: ADD FORM -->
<div class="mud-paper" style="margin-bottom: 0;">
<div class="mud-paper-header">
<div class="mud-paper-title">
<div class="mud-paper-title-icon"><span class="material-icons">add_home</span></div>
เพิ่มครัวเรือน
</div>
</div>

<!-- Basic household info -->
<div class="mud-grid cols-2">
<div class="mud-field">
<div class="mud-input-root">
<input type="text" class="mud-input" placeholder="เช่น 45/2">
<label class="mud-label">บ้านเลขที่<span class="req">*</span></label>
</div>
</div>
<div class="mud-field">
<div class="mud-input-root">
<select class="mud-input mud-select">
<option>บ้าน</option>
<option>ศาสนสถาน</option>
<option>โรงเรียน</option>
<option>อื่นๆ</option>
</select>
<label class="mud-label">ประเภทบ้าน<span class="req">*</span></label>
</div>
</div>
</div>

<div class="mud-grid cols-2" style="margin-top: 16px;">
<div class="mud-field">
<div class="mud-input-root">
<input type="text" class="mud-input" placeholder="ชื่อ">
<label class="mud-label">ชื่อเจ้าบ้าน</label>
</div>
</div>
<div class="mud-field">
<div class="mud-input-root">
<input type="text" class="mud-input" placeholder="นามสกุล">
<label class="mud-label">สกุลเจ้าบ้าน</label>
</div>
</div>
</div>

<div class="mud-grid cols-2" style="margin-top: 16px;">
<div class="mud-field">
<div class="mud-input-root">
<input type="number" class="mud-input" value="0" style="text-align:center;">
<label class="mud-label">จำนวนประชากร<span class="req">*</span></label>
</div>
</div>
<div class="mud-field">
<div class="mud-input-root">
<input type="number" class="mud-input" value="0" style="text-align:center;">
<label class="mud-label">คนนอนในป่า<span class="req">*</span></label>
</div>
</div>
</div>

<!-- LLIN Section -->
<div class="section-box section-box-tinted section-box-llin" style="margin-top: 20px;">
<div class="section-box-label">
<span class="material-icons">shield</span>
สำรวจมุ้ง LLIN
</div>
<div class="mud-grid cols-2">
<div class="mud-field">
<div class="mud-input-root">
<input type="number" class="mud-input" value="0" style="text-align:center;">
<label class="mud-label">มุ้งธรรมดา<span class="req">*</span></label>
</div>
</div>
<div class="mud-field">
<div class="mud-input-root">
<input type="number" class="mud-input" value="0" id="llin-1y" onchange="calcLLIN()" style="text-align:center;">
<label class="mud-label">LLIN 1 ปี<span class="req">*</span></label>
</div>
</div>
</div>
<div class="mud-grid cols-2" style="margin-top: 14px;">
<div class="mud-field">
<div class="mud-input-root">
<input type="number" class="mud-input" value="0" id="llin-2y" onchange="calcLLIN()" style="text-align:center;">
<label class="mud-label">LLIN ไม่เกิน 2 ปี<span class="req">*</span></label>
</div>
</div>
<div class="mud-field">
<div class="mud-input-root">
<input type="number" class="mud-input" value="0" id="llin-3y" onchange="calcLLIN()" style="text-align:center;">
<label class="mud-label">LLIN ไม่เกิน 3 ปี<span class="req">*</span></label>
</div>
</div>
</div>
<div class="mud-grid cols-2" style="margin-top: 14px;">
<div class="mud-field">
<div class="mud-input-root">
<input type="number" class="mud-input" value="0" id="llin-over3y" onchange="calcLLIN()" style="text-align:center;">
<label class="mud-label">LLIN เกิน 3 ปี<span class="req">*</span></label>
</div>
</div>
<div class="mud-field">
<div class="mud-input-root">
<input type="number" class="mud-input" value="0" id="llin-total" disabled style="text-align:center; font-weight: 600;">
<label class="mud-label">รวม LLIN ทั้งหมด</label>
</div>
<div class="mud-input-helper">คำนวณอัตโนมัติ</div>
</div>
</div>
</div>

<!-- LLIHN Section -->
<div class="section-box section-box-tinted section-box-llihn" style="margin-top: 16px;">
<div class="section-box-label">
<span class="material-icons">crib</span>
สำรวจมุ้งคลุมเปล LLIHN
</div>
<div class="mud-grid cols-2">
<div class="mud-field">
<div class="mud-input-root">
<input type="number" class="mud-input" value="0" id="llihn-1y" onchange="calcLLIHN()" style="text-align:center;">
<label class="mud-label">LLIHN 1 ปี<span class="req">*</span></label>
</div>
</div>
<div class="mud-field">
<div class="mud-input-root">
<input type="number" class="mud-input" value="0" id="llihn-2y" onchange="calcLLIHN()" style="text-align:center;">
<label class="mud-label">LLIHN ไม่เกิน 2 ปี<span class="req">*</span></label>
</div>
</div>
</div>
<div class="mud-grid cols-2" style="margin-top: 14px;">
<div class="mud-field">
<div class="mud-input-root">
<input type="number" class="mud-input" value="0" id="llihn-3y" onchange="calcLLIHN()" style="text-align:center;">
<label class="mud-label">LLIHN ไม่เกิน 3 ปี<span class="req">*</span></label>
</div>
</div>
<div class="mud-field">
<div class="mud-input-root">
<input type="number" class="mud-input" value="0" id="llihn-over3y" onchange="calcLLIHN()" style="text-align:center;">
<label class="mud-label">LLIHN เกิน 3 ปี<span class="req">*</span></label>
</div>
</div>
</div>
<div class="mud-field" style="margin-top: 14px;">
<div class="mud-input-root">
<input type="number" class="mud-input" value="0" id="llihn-total" disabled style="text-align:center; font-weight: 600;">
<label class="mud-label">รวม LLIHN ทั้งหมดในบ้าน</label>
</div>
<div class="mud-input-helper">คำนวณอัตโนมัติ</div>
</div>
</div>

<!-- Distribution Section -->
<div class="section-box section-box-tinted section-box-distribute" style="margin-top: 16px;">
<div class="section-box-label">
<span class="material-icons">redeem</span>
การจ่ายมุ้ง
</div>
<div class="mud-grid cols-2">
<div class="mud-field">
<div class="mud-input-root">
<input type="number" class="mud-input" value="0" style="text-align:center;">
<label class="mud-label">LLIN ที่ต้องการ</label>
</div>
</div>
<div class="mud-field">
<div class="mud-input-root">
<input type="number" class="mud-input" value="0" style="text-align:center;">
<label class="mud-label">LLIN ที่จ่าย</label>
</div>
</div>
</div>
<div class="mud-grid cols-2" style="margin-top: 14px;">
<div class="mud-field">
<div class="mud-input-root">
<input type="number" class="mud-input" value="0" style="text-align:center;">
<label class="mud-label">LLIHN ที่ต้องการ</label>
</div>
</div>
<div class="mud-field">
<div class="mud-input-root">
<input type="number" class="mud-input" value="0" style="text-align:center;">
<label class="mud-label">LLIHN ที่จ่าย</label>
</div>
</div>
</div>
<div class="mud-field" style="margin-top: 14px;">
<div class="mud-input-root">
<input type="number" class="mud-input" value="0" style="text-align:center;">
<label class="mud-label">สารทาป้องกันยุง</label>
</div>
</div>
</div>

<div class="mud-field" style="margin-top: 16px;">
<div class="mud-input-root">
<textarea class="mud-input" placeholder="บันทึกเพิ่มเติม"></textarea>
<label class="mud-label">หมายเหตุ</label>
</div>
</div>

<div style="display:flex;gap:8px;margin-top:20px;">
<button class="mud-button mud-button-filled" style="flex:1;">
<span class="material-icons">add</span>
เพิ่มข้อมูล
</button>
<button class="mud-button mud-button-outlined">
<span class="material-icons">restart_alt</span>
ล้างฟอร์ม
</button>
</div>
</div>

<!-- RIGHT: TABLE -->
<div>
<div class="mud-table-container">
<div class="mud-table-toolbar">
<div class="mud-table-title">
รายการครัวเรือน
<span class="mud-table-count">2 รายการ</span>
</div>
<div class="mud-table-search">
<span class="material-icons">search</span>
<input type="text" placeholder="ค้นหาบ้านเลขที่ / ชื่อ">
</div>
</div>

<div class="mud-table-scroll">
<table class="mud-table">
<thead>
<!-- Group headers -->
<tr>
<th rowspan="2" class="num">#</th>
<th rowspan="2">บ้านเลขที่</th>
<th rowspan="2">ชื่อเจ้าบ้าน</th>
<th rowspan="2">สกุลเจ้าบ้าน</th>
<th rowspan="2" class="num">ประชากร</th>
<th rowspan="2" class="num">คนนอนในป่า</th>
<th rowspan="2" class="num">มุ้งธรรมดา</th>
<th colspan="5" class="group-llin">
<span class="material-icons" style="font-size:14px;vertical-align:middle;">shield</span>
LLIN
</th>
<th colspan="5" class="group-llihn">
<span class="material-icons" style="font-size:14px;vertical-align:middle;">crib</span>
LLIHN
</th>
<th colspan="3" class="group-distribute">
<span class="material-icons" style="font-size:14px;vertical-align:middle;">redeem</span>
การจ่าย
</th>
<th rowspan="2" class="center sticky-right">จัดการ</th>
</tr>
<tr>
<th class="num sub-llin">1 ปี</th>
<th class="num sub-llin">ไม่เกิน 2 ปี</th>
<th class="num sub-llin">ไม่เกิน 3 ปี</th>
<th class="num sub-llin">เกิน 3 ปี</th>
<th class="num sub-llin">รวม</th>

<th class="num sub-llihn">1 ปี</th>
<th class="num sub-llihn">ไม่เกิน 2 ปี</th>
<th class="num sub-llihn">ไม่เกิน 3 ปี</th>
<th class="num sub-llihn">เกิน 3 ปี</th>
<th class="num sub-llihn">รวม</th>

<th class="num sub-distribute">LLIN จ่าย</th>
<th class="num sub-distribute">LLIHN จ่าย</th>
<th class="num sub-distribute">สารทา</th>
</tr>
</thead>
<tbody>
<tr onclick="selectRow(this)">
<td class="num" style="color:var(--mud-text-disabled);">1</td>
<td><strong>1</strong></td>
<td>บุญธรรม</td>
<td>นิลยอง</td>
<td class="num">7</td>
<td class="num">0</td>
<td class="num">2</td>
<!-- LLIN -->
<td class="num cell-llin">1</td>
<td class="num cell-llin"><span class="num-cell num-cell-zero">0</span></td>
<td class="num cell-llin"><span class="num-cell num-cell-zero">0</span></td>
<td class="num cell-llin"><span class="num-cell num-cell-zero">0</span></td>
<td class="num cell-llin"><span class="num-cell num-cell-total">3</span></td>
<!-- LLIHN -->
<td class="num cell-llihn"><span class="num-cell num-cell-zero">0</span></td>
<td class="num cell-llihn"><span class="num-cell num-cell-zero">0</span></td>
<td class="num cell-llihn"><span class="num-cell num-cell-zero">0</span></td>
<td class="num cell-llihn"><span class="num-cell num-cell-zero">0</span></td>
<td class="num cell-llihn"><span class="num-cell num-cell-total">0</span></td>
<!-- Distribute -->
<td class="num cell-distribute">4</td>
<td class="num cell-distribute"><span class="num-cell num-cell-zero">0</span></td>
<td class="num cell-distribute"><span class="num-cell num-cell-zero">0</span></td>
<td class="sticky-right">
<div class="row-actions">
<button class="mud-icon-button"><span class="material-icons">visibility</span></button>
<button class="mud-icon-button primary-color"><span class="material-icons">edit</span></button>
<button class="mud-icon-button danger"><span class="material-icons">delete</span></button>
</div>
</td>
</tr>
<tr onclick="selectRow(this)">
<td class="num" style="color:var(--mud-text-disabled);">2</td>
<td><strong>2</strong></td>
<td>พิศมัย</td>
<td>วิสุทธิ์</td>
<td class="num">5</td>
<td class="num">1</td>
<td class="num">1</td>
<!-- LLIN -->
<td class="num cell-llin">2</td>
<td class="num cell-llin"><span class="num-cell num-cell-zero">0</span></td>
<td class="num cell-llin"><span class="num-cell num-cell-zero">0</span></td>
<td class="num cell-llin"><span class="num-cell num-cell-zero">0</span></td>
<td class="num cell-llin"><span class="num-cell num-cell-total">3</span></td>
<!-- LLIHN -->
<td class="num cell-llihn"><span class="num-cell num-cell-zero">0</span></td>
<td class="num cell-llihn"><span class="num-cell num-cell-zero">0</span></td>
<td class="num cell-llihn"><span class="num-cell num-cell-zero">0</span></td>
<td class="num cell-llihn"><span class="num-cell num-cell-zero">0</span></td>
<td class="num cell-llihn"><span class="num-cell num-cell-total">0</span></td>
<!-- Distribute -->
<td class="num cell-distribute">2</td>
<td class="num cell-distribute"><span class="num-cell num-cell-zero">0</span></td>
<td class="num cell-distribute"><span class="num-cell num-cell-zero">0</span></td>
<td class="sticky-right">
<div class="row-actions">
<button class="mud-icon-button"><span class="material-icons">visibility</span></button>
<button class="mud-icon-button primary-color"><span class="material-icons">edit</span></button>
<button class="mud-icon-button danger"><span class="material-icons">delete</span></button>
</div>
</td>
</tr>
</tbody>
</table>
</div>

<!-- SUMMARY PANEL -->
<div class="mud-summary">
<div class="summary-item" style="--item-color: var(--mud-primary);">
<div class="summary-label">
<span class="material-icons">home</span>
ครัวเรือนทั้งหมด
</div>
<div class="summary-value">2<small>ครัวเรือน</small></div>
</div>
<div class="summary-item" style="--item-color: var(--mud-info);">
<div class="summary-label">
<span class="material-icons">groups</span>
จำนวนคนทั้งหมด
</div>
<div class="summary-value">12<small>คน</small></div>
</div>
<div class="summary-item" style="--item-color: #ef6c00;">
<div class="summary-label">
<span class="material-icons">forest</span>
คนนอนในป่า
</div>
<div class="summary-value" style="color: #ef6c00;">1<small>คน</small></div>
</div>
<div class="summary-item group-llin" style="--item-color: var(--llin-color);">
<div class="summary-label">
<span class="material-icons">shield</span>
LLIN รวม
</div>
<div class="summary-value" style="color: var(--llin-color);">6<small>หลัง</small></div>
</div>
<div class="summary-item group-llihn" style="--item-color: var(--llihn-color);">
<div class="summary-label">
<span class="material-icons">crib</span>
LLIHN รวม
</div>
<div class="summary-value" style="color: var(--llihn-color);">0<small>หลัง</small></div>
</div>
<div class="summary-item" style="--item-color: var(--mud-success);">
<div class="summary-label">
<span class="material-icons">redeem</span>
มุ้งที่จ่าย
</div>
<div class="summary-value" style="color: var(--mud-success);">0<small>หลัง</small></div>
</div>
</div>
</div>

</div>
</div>
</div>

<!-- ACTION BAR -->
<div class="mud-action-bar">
<div class="action-status">
<span class="status-dot"></span>
ยังไม่ได้บันทึก · แก้ไขล่าสุด 14:32 น.
</div>
<div class="action-btns">
<button class="mud-button mud-button-text mud-button-text-default">
ยกเลิก
</button>
<button class="mud-button mud-button-outlined" onclick="alert('บันทึกร่างเรียบร้อย')">
<span class="material-icons">save_as</span>
บันทึกร่าง
</button>
<button class="mud-button mud-button-filled" onclick="saveForm()">
<span class="material-icons">save</span>
บันทึกข้อมูล
</button>
</div>
</div>
</div>
</div>
</div>

<script>
function switchTab(id) {
document.querySelectorAll('.mud-tab').forEach((t, i) => {
t.classList.toggle('active', (id === 'basic' && i === 0) || (id === 'household' && i === 1));
});
document.querySelectorAll('.tab-panel').forEach(p => p.classList.toggle('active', p.id === 'tab-' + id));
window.scrollTo({top: 0, behavior: 'smooth'});
}

function setRadio(el) {
el.parentElement.querySelectorAll('.mud-radio').forEach(r => r.classList.remove('checked'));
el.classList.add('checked');
}

function toggleCheck(el, kind) {
el.classList.toggle('checked');
if (kind === 'school') {
document.getElementById('school-field').style.display = el.classList.contains('checked') ? '' : 'none';
}
}

function calcLLIN() {
const ids = ['llin-1y', 'llin-2y', 'llin-3y', 'llin-over3y'];
const total = ids.reduce((sum, id) => sum + (parseInt(document.getElementById(id).value) || 0), 0);
document.getElementById('llin-total').value = total;
}

function calcLLIHN() {
const ids = ['llihn-1y', 'llihn-2y', 'llihn-3y', 'llihn-over3y'];
const total = ids.reduce((sum, id) => sum + (parseInt(document.getElementById(id).value) || 0), 0);
document.getElementById('llihn-total').value = total;
}

function selectRow(row) {
row.parentElement.querySelectorAll('tr').forEach(r => r.classList.remove('selected'));
row.classList.add('selected');
}

function toggleDrawer() {
document.getElementById('drawer').classList.toggle('open');
document.getElementById('overlay').classList.toggle('show');
}

function saveForm() {
const status = document.querySelector('.action-status');
status.innerHTML = '<span class="status-dot saved"></span>บันทึกสำเร็จเมื่อ ' +
new Date().toLocaleTimeString('th-TH', {hour:'2-digit',minute:'2-digit'}) + ' น.';
setTimeout(() => {
status.innerHTML = '<span class="status-dot"></span>ยังไม่ได้บันทึก · แก้ไขล่าสุด ' +
new Date().toLocaleTimeString('th-TH', {hour:'2-digit',minute:'2-digit'}) + ' น.';
}, 4000);
}
</script>

</body>
</html>
(5-5/5)