<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>แอดมินแผงควบคุม - ร้านขนมไทย</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&family=Mitr:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- Header -->
<header class="header">
<div class="admin-header">
<div class="header-content">
<div class="logo">
<i class="bi bi-cup-straw"></i>
<span>ร้านขนมไทย - แอดมิน</span>
</div>
<div class="header-actions">
<a href="index.html" class="btn btn-outline">หน้าร้าน</a>
<a href="pos.html" class="btn btn-outline">POS</a>
<a href="orders.html" class="btn btn-outline">คำสั่งซื้อ</a>
</div>
</div>
</div>
</header>
<!-- Admin Dashboard -->
<main class="admin-main">
<div class="admin-container">
<div class="admin-sidebar">
<div class="sidebar-menu">
<div class="menu-item active" data-page="dashboard">
<i class="bi bi-speedometer2"></i>
<span>แดชบอร์ด</span>
</div>
<div class="menu-item" data-page="products">
<i class="bi bi-box-seam"></i>
<span>จัดการสินค้า</span>
</div>
<div class="menu-item" data-page="categories">
<i class="bi bi-folder"></i>
<span>จัดการหมวดหมู่</span>
</div>
<div class="menu-item" data-page="orders">
<i class="bi bi-receipt"></i>
<span>คำสั่งซื้อ</span>
</div>
<div class="menu-item" data-page="settings">
<i class="bi bi-gear"></i>
<span>ตั้งค่า</span>
</div>
</div>
</div>
<div class="admin-content">
<!-- Dashboard Page -->
<div class="admin-page active" id="dashboardPage">
<h1>แดชบอร์ด</h1>
<div class="dashboard-stats">
<div class="stat-card">
<div class="stat-icon">
<i class="bi bi-cart3"></i>
</div>
<div class="stat-info">
<h3 id="totalOrders">0</h3>
<p>คำสั่งซื้อทั้งหมด</p>
</div>
</div>
<div class="stat-card">
<div class="stat-icon">
<i class="bi bi-currency-dollar"></i>
</div>
<div class="stat-info">
<h3 id="totalRevenue">฿0</h3>
<p>รายได้ทั้งหมด</p>
</div>
</div>
<div class="stat-card">
<div class="stat-icon">
<i class="bi bi-box-seam"></i>
</div>
<div class="stat-info">
<h3 id="totalProducts">0</h3>
<p>สินค้าทั้งหมด</p>
</div>
</div>
<div class="stat-card">
<div class="stat-icon">
<i class="bi bi-people"></i>
</div>
<div class="stat-info">
<h3 id="totalCustomers">0</h3>
<p>ลูกค้าทั้งหมด</p>
</div>
</div>
</div>
<div class="dashboard-charts">
<div class="chart-container">
<h3>ยอดขายรายวัน</h3>
<canvas id="salesChart"></canvas>
</div>
<div class="chart-container">
<h3>สินค้าขายดี</h3>
<canvas id="topProductsChart"></canvas>
</div>
</div>
<div class="dashboard-recent-orders">
<h3>คำสั่งซื้อล่าสุด</h3>
<div class="recent-orders-table">
<table>
<thead>
<tr>
<th>หมายเลขคำสั่งซื้อ</th>
<th>ลูกค้า</th>
<th>วันที่</th>
<th>ยอดรวม</th>
<th>สถานะ</th>
</tr>
</thead>
<tbody id="recentOrdersTable">
<!-- Recent orders will be loaded here -->
</tbody>
</table>
</div>
</div>
</div>
<!-- Products Management Page -->
<div class="admin-page" id="productsPage">
<div class="page-header">
<h1>จัดการสินค้า</h1>
<button class="btn btn-primary" id="addProductBtn">เพิ่มสินค้าใหม่</button>
</div>
<div class="products-table">
<table>
<thead>
<tr>
<th>รูปภาพ</th>
<th>ชื่อสินค้า</th>
<th>หมวดหมู่</th>
<th>ราคา</th>
<th>สต็อก</th>
<th>สถานะ</th>
<th>การจัดการ</th>
</tr>
</thead>
<tbody id="productsTable">
<!-- Products will be loaded here -->
</tbody>
</table>
</div>
</div>
<!-- Orders Management Page -->
<div class="admin-page" id="ordersPage">
<div class="page-header">
<h1>จัดการคำสั่งซื้อ</h1>
<div class="export-btn">
<button class="btn btn-outline" id="exportOrdersBtn">ส่งออก CSV</button>
</div>
</div>
<div class="orders-table">
<table>
<thead>
<tr>
<th>หมายเลขคำสั่งซื้อ</th>
<th>ลูกค้า</th>
<th>วันที่</th>
<th>ยอดรวม</th>
<th>วิธีการชำระเงิน</th>
<th>สถานะ</th>
<th>การจัดการ</th>
</tr>
</thead>
<tbody id="ordersTable">
<!-- Orders will be loaded here -->
</tbody>
</table>
</div>
</div>
<!-- Categories Management Page (embedded) -->
<div class="admin-page" id="categoriesPage">
<div class="page-header">
<h1>จัดการหมวดหมู่สินค้า</h1>
<button class="btn btn-primary" id="addCategoryBtn">เพิ่มหมวดหมู่</button>
</div>
<div class="card">
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th width="60">ไอคอน</th>
<th>ชื่อหมวดหมู่</th>
<th>คำอธิบาย</th>
<th>ID</th>
<th width="150" class="text-center">จัดการ</th>
</tr>
</thead>
<tbody id="categoriesTableBody">
<tr>
<td colspan="5" class="text-center">กำลังโหลด...</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Settings Page -->
<div class="admin-page" id="settingsPage">
<h1>ตั้งค่าร้าน</h1>
<div class="settings-form">
<div class="form-section">
<h3>ข้อมูลร้าน</h3>
<div class="form-group">
<label>ชื่อร้าน</label>
<input type="text" id="shopName" value="ร้านขนมไทย">
</div>
<div class="form-group">
<label>ที่อยู่</label>
<input type="text" id="shopAddress" value="123 ถนนขนมไทย แขวงขนมหวาน เขตหวานกรอบ กรุงเทพฯ 10100">
</div>
<div class="form-group">
<label>เบอร์โทรศัพท์</label>
<input type="text" id="shopPhone" value="02-123-4567">
</div>
<div class="form-group">
<label>อีเมล</label>
<input type="email" id="shopEmail" value="info@thaidessertshop.com">
</div>
</div>
<div class="form-section">
<h3>วิธีการชำระเงิน</h3>
<div class="checkbox-group">
<label class="checkbox-item">
<input type="checkbox" id="enablePromptpay" checked>
<span>เปิดใช้งาน PromptPay</span>
</label>
<label class="checkbox-item">
<input type="checkbox" id="enableBankTransfer" checked>
<span>เปิดใช้งานโอนเงินผ่านธนาคาร</span>
</label>
<label class="checkbox-item">
<input type="checkbox" id="enableCOD" checked>
<span>เปิดใช้งานเก็บเงินปลายทาง (COD)</span>
</label>
</div>
</div>
<div class="form-section">
<h3>วิธีการจัดส่ง</h3>
<div class="form-group">
<label>ค่าจัดส่ง (บาท)</label>
<input type="number" id="shippingCost" value="50">
</div>
<div class="checkbox-group">
<label class="checkbox-item">
<input type="checkbox" id="enableHomeDelivery" checked>
<span>เปิดใช้งานจัดส่งถึงบ้าน</span>
</label>
<label class="checkbox-item">
<input type="checkbox" id="enableStorePickup" checked>
<span>เปิดใช้งานรับที่ร้าน</span>
</label>
</div>
</div>
<button class="btn btn-primary" id="saveSettingsBtn">บันทึกการตั้งค่า</button>
</div>
</div>
</div>
</div>
</main>
<!-- Product Modal -->
<div class="modal" id="productModal">
<div class="modal-content">
<div class="modal-header">
<h2 id="productModalTitle">เพิ่มสินค้าใหม่</h2>
<span class="close-modal">×</span>
</div>
<div class="modal-body">
<form id="productForm">
<div class="form-group">
<label>ชื่อสินค้า</label>
<input type="text" id="productName" required>
</div>
<div class="form-group">
<label>หมวดหมู่</label>
<select id="productCategory" required>
</select>
</div>
<div class="form-group">
<label>ราคา (บาท)</label>
<input type="number" id="productPrice" required>
</div>
<div class="form-group">
<label>จำนวนในสต็อก</label>
<input type="number" id="productStock" required>
</div>
<div class="form-group">
<label>รายละเอียดสินค้า</label>
<textarea id="productDescription" rows="4"></textarea>
</div>
<div class="form-group">
<label>รูปภาพ (URL)</label>
<input type="text" id="productImage">
</div>
<div class="form-group">
<label>สถานะ</label>
<select id="productStatus">
<option value="active">ใช้งาน</option>
<option value="inactive">ไม่ใช้งาน</option>
</select>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-outline" id="cancelProductBtn">ยกเลิก</button>
<button class="btn btn-primary" id="saveProductBtn">บันทึก</button>
</div>
</div>
</div>
<!-- Category Modal -->
<div class="modal" id="categoryModal">
<div class="modal-content">
<div class="modal-header">
<h2 id="categoryModalTitle">เพิ่มหมวดหมู่ใหม่</h2>
<span class="close-modal">×</span>
</div>
<div class="modal-body">
<form id="categoryForm">
<input type="hidden" id="categoryIndex">
<div class="form-group">
<label for="categoryId">ID หมวดหมู่ *</label>
<input type="text" id="categoryId" required placeholder="เช่น ขนมสด (ไม่มีช่องว่าง)">
<small class="form-hint">ใช้สำหรับระบุหมวดหมู่ในระบบ (ภาษาไทยหรืออังกฤษ)</small>
</div>
<div class="form-group">
<label for="categoryName">ชื่อหมวดหมู่ *</label>
<input type="text" id="categoryName" required placeholder="เช่น ขนมสด">
</div>
<div class="form-group">
<label for="categoryDescription">คำอธิบาย</label>
<input type="text" id="categoryDescription" placeholder="เช่น ขนมชั้น, ขนมถ้วย, บัวลอย">
</div>
<div class="form-group">
<label for="categoryIcon">ไอคอน Bootstrap *</label>
<div class="icon-input">
<span class="icon-preview">
<i class="bi" id="categoryIconPreview"></i>
</span>
<input type="text" id="categoryIcon" required placeholder="เช่น bi-droplet" value="bi-folder">
</div>
<small class="form-hint">ดูไอคอนได้ที่ <a href="https://icons.getbootstrap.com/" target="_blank">Bootstrap Icons</a></small>
</div>
<div class="icon-suggestions">
<span class="icon-suggestion" data-icon="bi-droplet">bi-droplet</span>
<span class="icon-suggestion" data-icon="bi-sun">bi-sun</span>
<span class="icon-suggestion" data-icon="bi-star-fill">bi-star-fill</span>
<span class="icon-suggestion" data-icon="bi-heart-fill">bi-heart-fill</span>
<span class="icon-suggestion" data-icon="bi-fire">bi-fire</span>
<span class="icon-suggestion" data-icon="bi-cup-straw">bi-cup-straw</span>
<span class="icon-suggestion" data-icon="bi-house-heart">bi-house-heart</span>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-outline" id="cancelCategoryBtn">ยกเลิก</button>
<button class="btn btn-primary" id="saveCategoryBtn">บันทึก</button>
</div>
</div>
</div>
<!-- Toast Notification -->
<div class="toast" id="toast">
<div class="toast-content">
<i class="bi bi-check-circle"></i>
<span id="toastMessage">บันทึกข้อมูลสำเร็จ</span>
</div>
</div>
<script src="js/db.js"></script>
<script src="js/components.js"></script>
<script src="js/admin.js"></script>
</body>
</html>