<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Dashboard - E-commerce Store</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Prompt:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<div class="admin-container">
<!-- Sidebar -->
<div class="sidebar" id="sidebar">
<div class="sidebar-header">
<h2><i class="fas fa-store"></i> Admin Panel</h2>
</div>
<nav class="sidebar-nav">
<div class="nav-item">
<a href="#" class="nav-link active" data-section="dashboard">
<i class="fas fa-chart-line"></i>
Dashboard
</a>
</div>
<div class="nav-item">
<a href="#" class="nav-link" data-section="orders">
<i class="fas fa-shopping-bag"></i>
Orders
</a>
</div>
<div class="nav-item">
<a href="#" class="nav-link" data-section="products">
<i class="fas fa-box"></i>
Products
</a>
</div>
<div class="nav-item">
<a href="#" class="nav-link" data-section="inventory">
<i class="fas fa-warehouse"></i>
Inventory
</a>
</div>
<div class="nav-item">
<a href="#" class="nav-link" data-section="customers">
<i class="fas fa-users"></i>
Customers
</a>
</div>
<div class="nav-item">
<a href="#" class="nav-link" data-section="analytics">
<i class="fas fa-chart-bar"></i>
Analytics
</a>
</div>
<div class="nav-item">
<a href="#" class="nav-link" data-section="settings">
<i class="fas fa-cog"></i>
Settings
</a>
</div>
</nav>
</div>
<!-- Main Content -->
<div class="main-content">
<div class="topbar">
<div class="topbar-left">
<button class="btn btn-outline d-md-none" id="sidebarToggle">
<i class="fas fa-bars"></i>
</button>
<h1 id="pageTitle">Dashboard</h1>
</div>
<div class="topbar-right">
<div class="user-menu" onclick="logout()">
<i class="fas fa-user-circle"></i>
<span id="userName">Admin</span>
<i class="fas fa-sign-out-alt"></i>
</div>
</div>
</div>
<div class="content-area">
<!-- Dashboard Section -->
<div class="page-section active" id="dashboard-section">
<!-- Stats Cards -->
<div class="stats-grid">
<div class="stat-card">
<div class="stat-card-header">
<div>
<h3>Total Revenue</h3>
<div class="stat-value" id="totalRevenue">₿0.00</div>
<div class="stat-change positive" id="revenueChange">+0.0%</div>
</div>
<div class="stat-icon blue">
<i class="fas fa-dollar-sign"></i>
</div>
</div>
</div>
<div class="stat-card">
<div class="stat-card-header">
<div>
<h3>Total Orders</h3>
<div class="stat-value" id="totalOrders">0</div>
<div class="stat-change positive" id="ordersChange">+0.0%</div>
</div>
<div class="stat-icon green">
<i class="fas fa-shopping-bag"></i>
</div>
</div>
</div>
<div class="stat-card">
<div class="stat-card-header">
<div>
<h3>Total Products</h3>
<div class="stat-value" id="totalProducts">0</div>
<div class="stat-change" id="productsChange">+0.0%</div>
</div>
<div class="stat-icon orange">
<i class="fas fa-box"></i>
</div>
</div>
</div>
<div class="stat-card">
<div class="stat-card-header">
<div>
<h3>Total Customers</h3>
<div class="stat-value" id="totalCustomers">0</div>
<div class="stat-change positive" id="customersChange">+0.0%</div>
</div>
<div class="stat-icon red">
<i class="fas fa-users"></i>
</div>
</div>
</div>
</div>
<!-- Charts -->
<div class="charts-grid">
<div class="chart-card">
<h3>Sales Trend</h3>
<canvas id="salesChart" width="400" height="200"></canvas>
</div>
<div class="chart-card">
<h3>Order Status</h3>
<canvas id="statusChart" width="300" height="200"></canvas>
</div>
</div>
<!-- Recent Orders -->
<div class="table-card">
<div class="table-header">
<h3>Recent Orders</h3>
<a href="#" class="btn btn-primary" onclick="showSection('orders')">
View All Orders
</a>
</div>
<table class="data-table">
<thead>
<tr>
<th>Order #</th>
<th>Customer</th>
<th>Status</th>
<th>Total</th>
<th>Date</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="recentOrdersTable">
<tr>
<td colspan="6" class="loading">
<div class="spinner"></div>
Loading recent orders...
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Orders Section -->
<div class="page-section" id="orders-section">
<div class="table-card">
<div class="table-header">
<h3>All Orders</h3>
<div style="display: flex; gap: 1rem;">
<select class="btn btn-outline" id="orderStatus">
<option value="">All Status</option>
<option value="pending">Pending</option>
<option value="confirmed">Confirmed</option>
<option value="processing">Processing</option>
<option value="shipped">Shipped</option>
<option value="delivered">Delivered</option>
<option value="cancelled">Cancelled</option>
</select>
<button class="btn btn-primary" onclick="loadOrders()">
<i class="fas fa-sync"></i> Refresh
</button>
</div>
</div>
<table class="data-table">
<thead>
<tr>
<th>Order #</th>
<th>Customer</th>
<th>Email</th>
<th>Status</th>
<th>Payment</th>
<th>Total</th>
<th>Date</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="ordersTable">
<tr>
<td colspan="8" class="loading">
<div class="spinner"></div>
Loading orders...
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Products Section -->
<div class="page-section" id="products-section">
<div class="table-card">
<div class="table-header">
<h3>Products</h3>
<button class="btn btn-primary">
<i class="fas fa-plus"></i> Add Product
</button>
</div>
<table class="data-table">
<thead>
<tr>
<th>Image</th>
<th>Name</th>
<th>SKU</th>
<th>Category</th>
<th>Price</th>
<th>Stock</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="productsTable">
<tr>
<td colspan="8" class="loading">
<div class="spinner"></div>
Loading products...
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Inventory Section -->
<div class="page-section" id="inventory-section">
<div class="stats-grid" style="margin-bottom: 2rem;">
<div class="stat-card">
<div class="stat-card-header">
<div>
<h3>Low Stock Items</h3>
<div class="stat-value" id="lowStockCount">0</div>
</div>
<div class="stat-icon orange">
<i class="fas fa-exclamation-triangle"></i>
</div>
</div>
</div>
<div class="stat-card">
<div class="stat-card-header">
<div>
<h3>Out of Stock</h3>
<div class="stat-value" id="outOfStockCount">0</div>
</div>
<div class="stat-icon red">
<i class="fas fa-times-circle"></i>
</div>
</div>
</div>
<div class="stat-card">
<div class="stat-card-header">
<div>
<h3>Total Inventory Value</h3>
<div class="stat-value" id="inventoryValue">₿0.00</div>
</div>
<div class="stat-icon blue">
<i class="fas fa-chart-line"></i>
</div>
</div>
</div>
</div>
<div class="table-card">
<div class="table-header">
<h3>Inventory Management</h3>
<button class="btn btn-primary" onclick="loadInventory()">
<i class="fas fa-sync"></i> Refresh
</button>
</div>
<table class="data-table">
<thead>
<tr>
<th>Product</th>
<th>SKU</th>
<th>Current Stock</th>
<th>Min Level</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="inventoryTable">
<tr>
<td colspan="6" class="loading">
<div class="spinner"></div>
Loading inventory...
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Customers Section -->
<div class="page-section" id="customers-section">
<div class="table-card">
<div class="table-header">
<h3>Customers</h3>
<input type="text" class="btn btn-outline" placeholder="Search customers..." id="customerSearch">
</div>
<table class="data-table">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Orders</th>
<th>Total Spent</th>
<th>Status</th>
<th>Joined</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="customersTable">
<tr>
<td colspan="8" class="loading">
<div class="spinner"></div>
Loading customers...
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Analytics Section -->
<div class="page-section" id="analytics-section">
<h2>Analytics & Reports</h2>
<p>Detailed analytics and reporting features coming soon...</p>
</div>
<!-- Settings Section -->
<div class="page-section" id="settings-section">
<h2>Settings</h2>
<div class="settings-container">
<div class="settings-tabs">
<button class="tab-btn active" onclick="showSettingsTab('general')">
<i class="fas fa-store"></i> General
</button>
<button class="tab-btn" onclick="showSettingsTab('payment')">
<i class="fas fa-credit-card"></i> Payment
</button>
<button class="tab-btn" onclick="showSettingsTab('shipping')">
<i class="fas fa-shipping-fast"></i> Shipping
</button>
<button class="tab-btn" onclick="showSettingsTab('products')">
<i class="fas fa-boxes"></i> Products
</button>
<button class="tab-btn" onclick="showSettingsTab('notifications')">
<i class="fas fa-bell"></i> Notifications
</button>
<button class="tab-btn" onclick="showSettingsTab('system')">
<i class="fas fa-server"></i> System
</button>
</div>
<div class="settings-content">
<!-- General Settings Tab -->
<div class="settings-tab active" id="generalTab">
<div class="card">
<div class="card-header">
<h3>General Settings</h3>
</div>
<div class="card-content">
<div class="form-row">
<div class="form-group">
<label>Store Name</label>
<input type="text" id="storeName" value="Fashion Store" placeholder="Your store name">
</div>
<div class="form-group">
<label>Store Email</label>
<input type="email" id="storeEmail" value="fashionstore@email.com" placeholder="Store email">
</div>
</div>
<div class="form-group">
<label>Store Description</label>
<textarea id="storeDescription" rows="3" placeholder="Short description about your store">เสื้อผ้าแฟชั่นคุณภาพดี ราคาย่อมเยา ส่งถึงบ้าน</textarea>
</div>
<div class="form-row">
<div class="form-group">
<label>Phone</label>
<input type="tel" id="storePhone" value="081-234-5678" placeholder="Phone number">
</div>
<div class="form-group">
<label>Address</label>
<input type="text" id="storeAddress" value="123 ถนนสุขุมวิท กรุงเทพฯ 10110" placeholder="Store address">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label>Facebook URL</label>
<input type="url" id="storeFacebook" value="https://facebook.com/fashionstore" placeholder="Facebook page URL">
</div>
<div class="form-group">
<label>Line ID</label>
<input type="text" id="storeLine" placeholder="Line ID for contact">
</div>
</div>
</div>
</div>
</div>
<!-- Payment Settings Tab -->
<div class="settings-tab" id="paymentTab">
<div class="card">
<div class="card-header">
<h3>Payment Settings</h3>
</div>
<div class="card-content">
<div class="payment-section">
<h4><i class="fas fa-qrcode"></i> PromptPay</h4>
<div class="form-row">
<div class="form-group">
<label>PromptPay Number</label>
<input type="text" id="promptPayNumber" value="0812345678" placeholder="Phone or ID number">
</div>
<div class="form-group">
<label>Account Name</label>
<input type="text" id="promptPayName" value="Fashion Store" placeholder="Account holder name">
</div>
</div>
</div>
<div class="payment-section">
<h4><i class="fas fa-university"></i> Bank Transfer</h4>
<div class="bank-accounts" id="bankAccounts">
<div class="bank-account">
<div class="form-row">
<div class="form-group">
<label>Bank</label>
<select>
<option value="scb">SCB - ไทยพาณิชย์</option>
<option value="kbank">KBANK - กสิกรไทย</option>
<option value="bbl">BBL - กรุงเทพ</option>
<option value="ktb">KTB - กรุงไทย</option>
<option value="ttb">TTB - ทีเม่</option>
</select>
</div>
<div class="form-group">
<label>Account Number</label>
<input type="text" placeholder="Bank account number">
</div>
</div>
<div class="form-group">
<label>Account Name</label>
<input type="text" placeholder="Account holder name">
</div>
</div>
</div>
<button type="button" class="btn btn-secondary" onclick="addBankAccount()">
<i class="fas fa-plus"></i> Add Bank Account
</button>
</div>
<div class="form-group">
<label class="checkbox-label">
<input type="checkbox" id="enableCOD"> Enable Cash on Delivery (COD)
</label>
</div>
</div>
</div>
</div>
<!-- Shipping Settings Tab -->
<div class="settings-tab" id="shippingTab">
<div class="card">
<div class="card-header">
<h3>Shipping Settings</h3>
</div>
<div class="card-content">
<div class="form-row">
<div class="form-group">
<label>Default Shipping Fee</label>
<div class="input-group">
<input type="number" id="defaultShippingFee" value="50" min="0">
<span class="input-suffix">บาท</span>
</div>
</div>
<div class="form-group">
<label>Free Shipping Minimum</label>
<div class="input-group">
<input type="number" id="freeShippingMin" value="1000" min="0">
<span class="input-suffix">บาท</span>
</div>
</div>
</div>
<h4>Shipping Zones</h4>
<div class="shipping-zones" id="shippingZones">
<div class="shipping-zone">
<div class="form-row">
<div class="form-group">
<label>Zone Name</label>
<input type="text" value="Bangkok & Suburbs" placeholder="Zone name">
</div>
<div class="form-group">
<label>Shipping Fee</label>
<div class="input-group">
<input type="number" value="50" min="0">
<span class="input-suffix">บาท</span>
</div>
</div>
</div>
<div class="form-group">
<label>Provinces</label>
<input type="text" value="Bangkok, Nonthaburi, Pathum Thani, Samut Prakan" placeholder="Provinces list">
</div>
</div>
</div>
<button type="button" class="btn btn-secondary" onclick="addShippingZone()">
<i class="fas fa-plus"></i> Add Shipping Zone
</button>
<div class="form-row">
<div class="form-group">
<label>Shipping Days (Min)</label>
<input type="number" id="shippingDaysMin" value="2" min="1">
</div>
<div class="form-group">
<label>Shipping Days (Max)</label>
<input type="number" id="shippingDaysMax" value="5" min="1">
</div>
</div>
</div>
</div>
</div>
<!-- Products Settings Tab -->
<div class="settings-tab" id="productsTab">
<div class="card">
<div class="card-header">
<h3>Product Settings</h3>
</div>
<div class="card-content">
<div class="settings-section">
<h4>Categories</h4>
<div class="categories-list" id="categoriesList">
<div class="category-item">
<input type="text" value="เสื้อ" placeholder="Category name">
<button type="button" class="btn btn-danger btn-sm" onclick="removeCategory(this)">
<i class="fas fa-trash"></i>
</button>
</div>
<div class="category-item">
<input type="text" value="กางเกง" placeholder="Category name">
<button type="button" class="btn btn-danger btn-sm" onclick="removeCategory(this)">
<i class="fas fa-trash"></i>
</button>
</div>
<div class="category-item">
<input type="text" value="กระโปรง" placeholder="Category name">
<button type="button" class="btn btn-danger btn-sm" onclick="removeCategory(this)">
<i class="fas fa-trash"></i>
</button>
</div>
<div class="category-item">
<input type="text" value="เดรส" placeholder="Category name">
<button type="button" class="btn btn-danger btn-sm" onclick="removeCategory(this)">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
<button type="button" class="btn btn-secondary" onclick="addCategory()">
<i class="fas fa-plus"></i> Add Category
</button>
</div>
<div class="settings-section">
<h4>Sizes</h4>
<div class="sizes-list" id="sizesList">
<div class="size-item">
<input type="text" value="XS" placeholder="Size">
<button type="button" class="btn btn-danger btn-sm" onclick="removeSize(this)">
<i class="fas fa-trash"></i>
</button>
</div>
<div class="size-item">
<input type="text" value="S" placeholder="Size">
<button type="button" class="btn btn-danger btn-sm" onclick="removeSize(this)">
<i class="fas fa-trash"></i>
</button>
</div>
<div class="size-item">
<input type="text" value="M" placeholder="Size">
<button type="button" class="btn btn-danger btn-sm" onclick="removeSize(this)">
<i class="fas fa-trash"></i>
</button>
</div>
<div class="size-item">
<input type="text" value="L" placeholder="Size">
<button type="button" class="btn btn-danger btn-sm" onclick="removeSize(this)">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
<button type="button" class="btn btn-secondary" onclick="addSize()">
<i class="fas fa-plus"></i> Add Size
</button>
</div>
<div class="settings-section">
<h4>Colors</h4>
<div class="colors-list" id="colorsList">
<div class="color-item">
<input type="text" value="White" placeholder="Color name">
<input type="color" value="#ffffff" title="Select color">
<button type="button" class="btn btn-danger btn-sm" onclick="removeColor(this)">
<i class="fas fa-trash"></i>
</button>
</div>
<div class="color-item">
<input type="text" value="Black" placeholder="Color name">
<input type="color" value="#000000" title="Select color">
<button type="button" class="btn btn-danger btn-sm" onclick="removeColor(this)">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
<button type="button" class="btn btn-secondary" onclick="addColor()">
<i class="fas fa-plus"></i> Add Color
</button>
</div>
</div>
</div>
</div>
<!-- Notifications Settings Tab -->
<div class="settings-tab" id="notificationsTab">
<div class="card">
<div class="card-header">
<h3>Notification Settings</h3>
</div>
<div class="card-content">
<div class="form-group">
<label>Admin Email</label>
<input type="email" id="adminEmail" value="admin@fashionstore.com" placeholder="Admin email for notifications">
</div>
<h4>Order Notifications</h4>
<div class="form-group">
<label class="checkbox-label">
<input type="checkbox" id="notifyNewOrder" checked> Notify on new orders
</label>
</div>
<div class="form-group">
<label class="checkbox-label">
<input type="checkbox" id="notifyPaymentReceived" checked> Notify on payment received
</label>
</div>
<div class="form-group">
<label class="checkbox-label">
<input type="checkbox" id="notifyLowStock" checked> Notify on low stock
</label>
</div>
<h4>Customer Notifications</h4>
<div class="form-group">
<label class="checkbox-label">
<input type="checkbox" id="sendOrderConfirmation" checked> Send order confirmation emails
</label>
</div>
<div class="form-group">
<label class="checkbox-label">
<input type="checkbox" id="sendShippingNotification" checked> Send shipping notification emails
</label>
</div>
<h4>Line Notify</h4>
<div class="form-group">
<label>Line Notify Token</label>
<input type="text" id="lineNotifyToken" placeholder="Line Notify Token for notifications">
<small>For order notifications via Line</small>
</div>
</div>
</div>
</div>
<!-- System Settings Tab -->
<div class="settings-tab" id="systemTab">
<div class="card">
<div class="card-header">
<h3>System Settings</h3>
</div>
<div class="card-content">
<div class="form-row">
<div class="form-group">
<label>Language</label>
<select id="systemLanguage">
<option value="th" selected>Thai</option>
<option value="en">English</option>
</select>
</div>
<div class="form-group">
<label>Currency</label>
<select id="systemCurrency">
<option value="THB" selected>Thai Baht (THB)</option>
<option value="USD">US Dollar (USD)</option>
<option value="EUR">Euro (EUR)</option>
</select>
</div>
</div>
<div class="form-group">
<label>Timezone</label>
<select id="systemTimezone">
<option value="Asia/Bangkok" selected>Asia/Bangkok</option>
<option value="UTC">UTC</option>
<option value="America/New_York">America/New_York</option>
</select>
</div>
<h4>API Configuration</h4>
<div class="form-group">
<label>API Base URL</label>
<input type="url" id="apiBaseUrl" value="http://localhost/store/api" placeholder="API base URL">
</div>
<div class="form-group">
<label class="checkbox-label">
<input type="checkbox" id="enableDebugMode"> Enable Debug Mode
</label>
</div>
<div class="form-group">
<label class="checkbox-label">
<input type="checkbox" id="enableMaintenanceMode"> Enable Maintenance Mode
</label>
</div>
<h4>Security</h4>
<div class="form-group">
<label>JWT Secret Key</label>
<div class="input-group">
<input type="password" id="jwtSecret" value="your-secret-key-change-this" placeholder="JWT Secret Key">
<button type="button" class="btn btn-secondary" onclick="generateJWTSecret()">
<i class="fas fa-sync"></i> Generate
</button>
</div>
</div>
<div class="form-group">
<label>Session Timeout (minutes)</label>
<input type="number" id="sessionTimeout" value="60" min="5" max="1440">
</div>
</div>
</div>
</div>
</div>
<div class="settings-actions">
<button type="button" class="btn btn-secondary" onclick="resetSettings()">
<i class="fas fa-undo"></i> Reset
</button>
<button type="button" class="btn btn-info" onclick="exportSettings()">
<i class="fas fa-download"></i> Export
</button>
<button type="button" class="btn btn-warning" onclick="importSettings()">
<i class="fas fa-upload"></i> Import
</button>
<button type="button" class="btn btn-primary" onclick="saveSettings()">
<i class="fas fa-save"></i> Save Settings
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Edit Product Modal -->
<div id="editProductModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3>Edit Product</h3>
<span class="close" onclick="closeEditProductModal()">×</span>
</div>
<div class="modal-body">
<form id="editProductForm">
<input type="hidden" id="editProductId">
<div class="form-row">
<div class="form-group">
<label for="editProductName">Product Name *</label>
<input type="text" id="editProductName" required>
</div>
<div class="form-group">
<label for="editProductSku">SKU *</label>
<input type="text" id="editProductSku" required>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="editProductCategory">Category</label>
<select id="editProductCategory">
<option value="">Select Category</option>
</select>
</div>
<div class="form-group">
<label for="editProductStatus">Status</label>
<select id="editProductStatus">
<option value="active">Active</option>
<option value="inactive">Inactive</option>
</select>
</div>
</div>
<div class="form-group">
<label for="editProductDescription">Description</label>
<textarea id="editProductDescription" rows="4"></textarea>
</div>
<div class="form-row">
<div class="form-group">
<label for="editProductPrice">Base Price (฿) *</label>
<input type="number" id="editProductPrice" min="0" step="0.01" required>
</div>
<div class="form-group">
<label for="editProductSalePrice">Sale Price (฿)</label>
<input type="number" id="editProductSalePrice" min="0" step="0.01">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="editProductStock">Stock Quantity *</label>
<input type="number" id="editProductStock" min="0" required>
</div>
<div class="form-group">
<label for="editProductMinStock">Min Stock Level</label>
<input type="number" id="editProductMinStock" min="0" value="5">
</div>
</div>
<div class="form-group">
<label for="editProductImage">Primary Image URL</label>
<input type="url" id="editProductImage" placeholder="https://example.com/image.jpg">
</div>
<div class="form-group">
<label for="editProductWeight">Weight (kg)</label>
<input type="number" id="editProductWeight" min="0" step="0.01">
</div>
<div class="form-group">
<label for="editProductTags">Tags (comma separated)</label>
<input type="text" id="editProductTags" placeholder="tag1, tag2, tag3">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" onclick="closeEditProductModal()">Cancel</button>
<button type="button" class="btn btn-primary" onclick="updateProduct()">
<i class="fas fa-save"></i> Update Product
</button>
</div>
</div>
</div>
<script src="assets/js/dashboard.js"></script>
</body>
</html>