<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inventory Management - 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" class="active">
<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">
<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>Inventory Management</h1>
<div>
<button class="btn btn-primary" id="addProductBtn">
<i class="icon-additem"></i> Add Product
</button>
<button class="btn btn-secondary" id="manageCategories">
<i class="icon-tagss"></i> Categories
</button>
</div>
</div>
<div class="card">
<div class="card-header">
<h2 class="card-title">Inventory List</h2>
<div class="card-tools">
<input type="text" id="productSearch" class="form-control" placeholder="Search products...">
</div>
</div>
<div class="card-body">
<div class="filters">
<select id="categoryFilter" class="form-control">
<option value="">All Categories</option>
<!-- Categories will be loaded here -->
</select>
<select id="stockFilter" class="form-control">
<option value="all">All Stock</option>
<option value="low">Low Stock</option>
<option value="out">Out of Stock</option>
</select>
<button id="exportInventory" class="btn btn-sm btn-secondary">
<i class="icon-download"></i> Export
</button>
</div>
<div class="table-container">
<table class="data-table" id="inventoryTable">
<thead>
<tr>
<th>SKU</th>
<th>Name</th>
<th>Category</th>
<th>Price</th>
<th>Cost</th>
<th>Stock</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<!-- Products will be loaded here -->
</tbody>
</table>
</div>
</div>
</div>
</main>
</div>
<!-- Product Modal -->
<div class="modal" id="productModal">
<div class="modal-content">
<div class="modal-header">
<h2 id="productModalTitle">Add Product</h2>
<button class="close-modal">×</button>
</div>
<div class="modal-body">
<form id="productForm">
<input type="hidden" id="productId">
<div class="form-row">
<div class="form-col">
<label for="sku">SKU*</label>
<input type="text" id="sku" class="form-control" required>
</div>
<div class="form-col">
<label for="barcode">Barcode</label>
<input type="text" id="barcode" class="form-control">
</div>
</div>
<div class="form-group">
<label for="name">Product Name*</label>
<input type="text" id="name" class="form-control" required>
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea id="description" class="form-control"></textarea>
</div>
<div class="form-row">
<div class="form-col">
<label for="categoryId">Category</label>
<select id="categoryId" class="form-control">
<option value="">Select Category</option>
<!-- Categories will be loaded here -->
</select>
</div>
<div class="form-col">
<label for="status">Status</label>
<select id="status" class="form-control">
<option value="active">Active</option>
<option value="inactive">Inactive</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-col">
<label for="price">Selling Price*</label>
<input type="number" id="price" class="form-control" min="0" step="0.01" required>
</div>
<div class="form-col">
<label for="cost">Cost Price*</label>
<input type="number" id="cost" class="form-control" min="0" step="0.01" required>
</div>
</div>
<div class="form-row">
<div class="form-col">
<label for="quantity">Stock Quantity*</label>
<input type="number" id="quantity" class="form-control" min="0" required>
</div>
<div class="form-col">
<label for="lowStockThreshold">Low Stock Threshold</label>
<input type="number" id="lowStockThreshold" class="form-control" min="0" value="10">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" id="cancelProduct">Cancel</button>
<button class="btn btn-primary" id="saveProduct">Save Product</button>
</div>
</div>
</div>
<!-- Category Modal -->
<div class="modal" id="categoryModal">
<div class="modal-content modal-sm">
<div class="modal-header">
<h2 id="categoryModalTitle">Manage Categories</h2>
<button class="close-modal">×</button>
</div>
<div class="modal-body">
<div class="category-list" id="categoryList">
<!-- Categories will be loaded here -->
</div>
<form id="categoryForm" class="mt-4">
<input type="hidden" id="categoryId">
<div class="form-group">
<label for="categoryName">Category Name</label>
<input type="text" id="categoryName" class="form-control" required>
</div>
<div class="form-group">
<label for="categoryDescription">Description</label>
<textarea id="categoryDescription" class="form-control"></textarea>
</div>
<div class="form-actions">
<button type="button" class="btn btn-secondary" id="cancelCategory">Cancel</button>
<button type="button" class="btn btn-primary" id="saveCategory">Save Category</button>
</div>
</form>
</div>
</div>
</div>
<!-- Stock Adjustment Modal -->
<div class="modal" id="stockModal">
<div class="modal-content modal-sm">
<div class="modal-header">
<h2>Adjust Stock</h2>
<button class="close-modal">×</button>
</div>
<div class="modal-body">
<form id="stockForm">
<input type="hidden" id="stockProductId">
<div class="product-info">
<h3 id="stockProductName"></h3>
<p>Current Stock: <span id="currentStock">0</span></p>
</div>
<div class="form-group">
<label for="adjustmentType">Adjustment Type</label>
<select id="adjustmentType" class="form-control">
<option value="add">Add Stock</option>
<option value="subtract">Subtract Stock</option>
<option value="set">Set Stock</option>
</select>
</div>
<div class="form-group">
<label for="adjustmentQuantity">Quantity</label>
<input type="number" id="adjustmentQuantity" class="form-control" min="0" required>
</div>
<div class="form-group">
<label for="adjustmentNotes">Notes</label>
<textarea id="adjustmentNotes" class="form-control"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" id="cancelAdjustment">Cancel</button>
<button class="btn btn-primary" id="saveAdjustment">Save Adjustment</button>
</div>
</div>
</div>
<div id="notification-container"></div>
<script src="../assets/js/config.js"></script>
<script src="../assets/js/common.js"></script>
<script src="../assets/js/inventory.js"></script>
</body>
</html>