<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Budget Tracker - บันทึกรายรับรายจ่าย</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="header">
<h1><span class="material-icons">account_balance_wallet</span> Budget Tracker</h1>
<p>บันทึกรายรับรายจ่ายอย่างง่ายดาย</p>
</div>
<!-- Form Section -->
<div class="form-section">
<form id="transactionForm">
<div class="form-row">
<div class="form-group">
<label for="type">ประเภท</label>
<select id="type" required>
<option value="">เลือกประเภท</option>
<option value="income">รายรับ</option>
<option value="expense">รายจ่าย</option>
</select>
</div>
<div class="form-group">
<label for="category">หมวดหมู่</label>
<select id="category" required disabled>
<option value="">เลือกหมวดหมู่</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="description">รายการ</label>
<input type="text" id="description" placeholder="ระบุรายการ" required>
</div>
<div class="form-group">
<label for="amount">จำนวนเงิน (บาท)</label>
<input type="number" id="amount" placeholder="0.00" step="0.01" min="0" required>
</div>
</div>
<div class="form-group">
<label for="date">วันที่</label>
<input type="date" id="date" required>
</div>
<button type="submit" class="btn">
<span class="material-icons">add</span>
เพิ่มรายการ
</button>
</form>
</div>
<!-- Summary Section -->
<div class="summary-section">
<div class="summary-card income">
<div class="icon material-icons">trending_up</div>
<h3>รายรับ</h3>
<div class="amount" id="totalIncome">฿0.00</div>
</div>
<div class="summary-card expense">
<div class="icon material-icons">trending_down</div>
<h3>รายจ่าย</h3>
<div class="amount" id="totalExpense">฿0.00</div>
</div>
<div class="summary-card balance">
<div class="icon material-icons">account_balance</div>
<h3>คงเหลือ</h3>
<div class="amount" id="balance">฿0.00</div>
</div>
</div>
<!-- AI Section -->
<div class="ai-section">
<h3>
<span class="material-icons">psychology</span>
AI จัดหมวดหมู่อัตโนมัติ
</h3>
<div id="aiStatus" class="ai-status" style="display: none;"></div>
<p id="aiDescription" style="color:#4a5568; margin-bottom:10px;">AI จะช่วยจัดหมวดหมู่รายการที่ยังเป็น "อื่นๆ" โดยส่งคำอธิบายรายการไปให้ AI แล้วนำผลลัพธ์ (JSON) มาปรับหมวดหมู่ให้โดยอัตโนมัติ</p>
<pre id="aiPrompt" style="display:none; background:#f7fafc; padding:12px; border-radius:8px; color:#2d3748; white-space:pre-wrap; max-height:180px; overflow:auto;">Prompt will appear here</pre>
<button id="categorizeBtn" class="btn btn-secondary">
<span class="material-icons">category</span>
จัดหมวดหมู่รายการที่ยังไม่ได้จัด
</button>
</div>
<!-- Transactions Section -->
<div class="transactions-section">
<div class="transactions-header">
<h2>รายการล่าสุด</h2>
<div class="date-filter">
<label style="font-size: 0.9rem;">กรองตามวันที่:</label>
<input type="date" id="filterDate" placeholder="เลือกวันที่">
</div>
</div>
<div class="transactions-list" id="transactionsList">
<div class="empty-state">
<div class="material-icons">receipt</div>
<p>ยังไม่มีรายการ เพิ่มรายการแรกของคุณเลย!</p>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>