<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>จัดการคำสั่งซื้อ - ร้านขนมไทย</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=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="container">
<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="admin.html" class="btn btn-outline">แอดมิน</a>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<main class="orders-main">
<div class="container">
<div class="orders-header">
<h1>จัดการคำสั่งซื้อ</h1>
<div class="orders-controls">
<div class="filter-tabs">
<div class="filter-tab active" data-filter="all">ทั้งหมด</div>
<div class="filter-tab" data-filter="pending">รอดำเนินการ</div>
<div class="filter-tab" data-filter="preparing">กำลังเตรียม</div>
<div class="filter-tab" data-filter="ready">พร้อมส่ง</div>
<div class="filter-tab" data-filter="completed">เสร็จสิ้น</div>
<div class="filter-tab" data-filter="canceled">ยกเลิก</div>
</div>
<div class="refresh-btn" id="refreshOrdersBtn">
<i class="bi bi-arrow-clockwise"></i>
<span>รีเฟรช</span>
</div>
</div>
</div>
<div class="orders-container">
<div class="orders-list" id="ordersList">
<!-- Orders will be loaded here -->
</div>
</div>
</div>
</main>
<!-- Order Details Modal -->
<div class="modal" id="orderDetailsModal">
<div class="modal-content">
<div class="modal-header">
<h2>รายละเอียดคำสั่งซื้อ</h2>
<span class="close-modal">×</span>
</div>
<div class="modal-body">
<div class="order-details-content" id="orderDetailsContent">
<!-- Order details will be loaded here -->
</div>
</div>
<div class="modal-footer">
<button class="btn btn-outline" id="closeOrderDetailsBtn">ปิด</button>
<button class="btn btn-primary" id="updateOrderStatusBtn">อัปเดตสถานะ</button>
</div>
</div>
</div>
<!-- Update Status Modal -->
<div class="modal" id="updateStatusModal">
<div class="modal-content">
<div class="modal-header">
<h2>อัปเดตสถานะคำสั่งซื้อ</h2>
<span class="close-modal">×</span>
</div>
<div class="modal-body">
<div class="status-options">
<div class="status-option" data-status="pending">
<i class="bi bi-clock"></i>
<span>รอดำเนินการ</span>
</div>
<div class="status-option" data-status="preparing">
<i class="bi bi-hourglass-split"></i>
<span>กำลังเตรียม</span>
</div>
<div class="status-option" data-status="ready">
<i class="bi bi-check-circle"></i>
<span>พร้อมส่ง</span>
</div>
<div class="status-option" data-status="completed">
<i class="bi bi-check2-all"></i>
<span>เสร็จสิ้น</span>
</div>
<div class="status-option" data-status="canceled">
<i class="bi bi-x-circle"></i>
<span>ยกเลิก</span>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-outline" id="cancelUpdateBtn">ยกเลิก</button>
<button class="btn btn-primary" id="confirmUpdateBtn">ยืนยัน</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/orders.js"></script>
</body>
</html>