<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Settings - POS System</title>
<link rel="stylesheet" href="../assets/css/fonts.css">
<link rel="stylesheet" href="../assets/css/styles.css">
</head>
<body>
<div class="app-container">
<aside class="sidebar">
<div class="sidebar-header">
<a href="index.html" class="sidebar-brand">
<i class="icon-cart"></i>
<span>POS System</span>
</a>
</div>
<ul class="sidebar-menu">
<li>
<a href="index.html">
<i class="icon-dashboard"></i>
<span>Dashboard</span>
</a>
</li>
<li>
<a href="inventory.html">
<i class="icon-product"></i>
<span>Inventory</span>
</a>
</li>
<li>
<a href="../pos/index.html">
<i class="icon-cart"></i>
<span>POS</span>
</a>
</li>
<li>
<a href="sales.html">
<i class="icon-stats"></i>
<span>Sales</span>
</a>
</li>
<li>
<a href="reports.html">
<i class="icon-report"></i>
<span>Reports</span>
</a>
</li>
<li>
<a href="users.html">
<i class="icon-users"></i>
<span>Users</span>
</a>
</li>
<li>
<a href="settings.html" class="active">
<i class="icon-settings"></i>
<span>Settings</span>
</a>
</li>
</ul>
</aside>
<main class="content-area">
<div class="topbar">
<button class="toggle-sidebar">
<i class="icon-bars"></i>
</button>
<div class="user-dropdown">
<button class="user-dropdown-toggle">
<div class="user-avatar">
<i class="icon-user"></i>
</div>
<span class="user-name">Admin</span>
<i class="icon-down"></i>
</button>
<div class="user-dropdown-menu">
<a href="#"><i class="icon-user"></i> Profile</a>
<a href="../admin/settings.html"><i class="icon-settings"></i> Settings</a>
<a href="#" id="logoutBtn"><i class="icon-signout"></i> Logout</a>
</div>
</div>
</div>
<div class="page-header">
<h1>System Settings</h1>
<p>Configure your POS system settings</p>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-header">
<h2 class="card-title">Store Information</h2>
</div>
<div class="card-body">
<form id="storeSettingsForm">
<div class="form-row">
<div class="form-col">
<label for="storeName">Store Name</label>
<input type="text" id="storeName" name="store_name" class="form-control" placeholder="Your Store Name">
</div>
<div class="form-col">
<label for="storePhone">Store Phone</label>
<input type="text" id="storePhone" name="store_phone" class="form-control" placeholder="+1 (123) 456-7890">
</div>
</div>
<div class="form-group">
<label for="storeAddress">Store Address</label>
<textarea id="storeAddress" name="store_address" class="form-control" placeholder="123 Main St, City, Country"></textarea>
</div>
<div class="form-row">
<div class="form-col">
<label for="taxRate">Default Tax Rate (%)</label>
<input type="number" id="taxRate" name="tax_rate" class="form-control" min="0" max="100" step="0.01" placeholder="7.00">
</div>
<div class="form-col">
<label for="currencySymbol">Currency Symbol</label>
<input type="text" id="currencySymbol" name="currency_symbol" class="form-control" placeholder="฿">
</div>
</div>
<div class="form-group">
<label for="receiptFooter">Receipt Footer</label>
<textarea id="receiptFooter" name="receipt_footer" class="form-control" placeholder="Thank you for shopping with us!"></textarea>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary" id="saveStoreSettings">Save Changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-header">
<h2 class="card-title">System Configuration</h2>
</div>
<div class="card-body">
<form id="systemSettingsForm">
<div class="form-row">
<div class="form-col">
<label for="lowStockThreshold">Default Low Stock Threshold</label>
<input type="number" id="lowStockThreshold" name="low_stock_threshold" class="form-control" min="0" placeholder="10">
</div>
<div class="form-col">
<label for="dateFormat">Date Format</label>
<select id="dateFormat" name="date_format" class="form-control">
<option value="Y-m-d">YYYY-MM-DD</option>
<option value="d/m/Y">DD/MM/YYYY</option>
<option value="m/d/Y">MM/DD/YYYY</option>
<option value="d-m-Y">DD-MM-YYYY</option>
<option value="m-d-Y">MM-DD-YYYY</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-col">
<label for="timeZone">Time Zone</label>
<select id="timeZone" name="time_zone" class="form-control">
<option value="Asia/Bangkok">Asia/Bangkok</option>
<option value="America/New_York">America/New_York</option>
<option value="Europe/London">Europe/London</option>
<option value="Asia/Tokyo">Asia/Tokyo</option>
<option value="Australia/Sydney">Australia/Sydney</option>
<!-- Add more time zones as needed -->
</select>
</div>
<div class="form-col">
<label for="language">Default Language</label>
<select id="language" name="language" class="form-control">
<option value="en">English</option>
<option value="th">Thai</option>
<option value="es">Spanish</option>
<option value="fr">French</option>
<option value="de">German</option>
<!-- Add more languages as needed -->
</select>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary" id="saveSystemSettings">Save Changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-header">
<h2 class="card-title">Database Backup</h2>
</div>
<div class="card-body">
<div class="backup-actions">
<button class="btn btn-primary" id="createBackup">
<i class="icon-download"></i> Create Backup
</button>
<button class="btn btn-secondary" id="restoreBackup">
<i class="icon-upload"></i> Restore Backup
</button>
</div>
<div class="backup-history">
<h3>Recent Backups</h3>
<table class="data-table" id="backupsTable">
<thead>
<tr>
<th>Filename</th>
<th>Date Created</th>
<th>Size</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<!-- Backup history will be loaded here -->
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<div id="notification-container"></div>
<!-- Hidden file input for backup restore -->
<input type="file" id="backupFileInput" style="display: none;" accept=".sql,.zip">
<!-- Restore Backup Confirmation Modal -->
<div class="modal" id="restoreConfirmModal">
<div class="modal-content modal-sm">
<div class="modal-header">
<h2>Confirm Restore</h2>
<button class="close-modal">×</button>
</div>
<div class="modal-body">
<p>Are you sure you want to restore the database from this backup?</p>
<p class="text-danger"><strong>Warning:</strong> This will replace your current data and cannot be undone.</p>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" id="cancelRestore">Cancel</button>
<button class="btn btn-danger" id="confirmRestore">Yes, Restore</button>
</div>
</div>
</div>
<script src="../assets/js/config.js"></script>
<script src="../assets/js/common.js"></script>
<script src="../assets/js/settings.js"></script>
</body>
</html>