<!DOCTYPE html>

<html lang="en">
<head>
        <?php echo view('partials/title-meta', array('title' => 'Stocks')) ?> <?= $this->include('partials/head-css') ?>
    </head>
<body>
<div class="wrapper">
            <?php echo view('partials/topbar', array('subtitle' => 'Ecommerce', 'title' => 'Stocks')) ?> <?= $this->include('partials/sidenav') ?>

            <!-- Start Page Content here -->
<div class="page-content">
<main>
                    <?php echo view('partials/page-title', array('subtitle' => 'Ecommerce', 'title' => 'Stocks')) ?>

                    <div class="container-fluid">
<div class="card" data-table="" data-table-rows-per-page="10">
<div class="card-header">
<!-- Search -->
<div class="flex gap-2.5">
<div class="input-icon-group">
<i class="iconify tabler--search input-icon"></i>
<input class="form-input" data-table-search="" placeholder="Search product name or SKU..."/>
</div>
<button class="btn bg-danger text-white hover:bg-danger-hover hidden" data-table-delete-selected="">Delete</button>
</div>
<div class="flex flex-wrap items-center gap-2.5 lg:flex-nowrap">
<div class="flex flex-wrap items-center gap-2.5 md:flex-nowrap">
<div class="items-center gap-2.5 md:flex">
<span class="font-semibold me-2.5">Filter By:</span>
<!-- Category Filter -->
<div class="input-icon-group">
<i class="iconify tabler--tag input-icon"></i>
<select class="form-select" data-table-filter="category">
<option value="All">Category</option>
<option value="Electronics">Electronics</option>
<option value="Mobiles">Mobiles</option>
<option value="Audio">Audio</option>
<option value="Furniture">Furniture</option>
<option value="Appliances">Appliances</option>
<option value="Wearables">Wearables</option>
<option value="Cameras">Cameras</option>
<option value="Computers">Computers</option>
<option value="Accessories">Accessories</option>
</select>
</div>
</div>
<!-- Stock Status Filter -->
<div class="input-icon-group">
<i class="iconify tabler--activity input-icon"></i>
<select class="form-select" data-table-filter="status">
<option value="All">Stock Status</option>
<option value="In Stock">In Stock</option>
<option value="Low Stock">Low Stock</option>
<option value="Out of Stock">Out of Stock</option>
</select>
</div>
<!-- Price Range Filter -->
<div class="input-icon-group">
<i class="iconify tabler--currency-dollar input-icon"></i>
<select class="form-select" data-table-range-filter="price">
<option value="All">Price Range</option>
<option value="0-50">$0 - $50</option>
<option value="51-150">$51 - $150</option>
<option value="151-500">$151 - $500</option>
<option value="501-1000">$501 - $1,000</option>
<option value="1000+">$1,000+</option>
</select>
</div>
<!-- Records Per Page -->
<div>
<select class="form-select" data-table-set-rows-per-page="">
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
</select>
</div>
</div>
</div>
<a class="btn bg-danger text-white hover:bg-danger-hover" href="/apps-ecommerce-product-add">
<i class="iconify tabler--plus"></i>
                                    Add Product
                                </a>
</div>
<div class="table-wrapper">
<table class="table-custom table-select table table-hover">
<thead class="thead-sm">
<tr class="bg-light/25 text-2xs uppercase">
<th class="w-[1%]">
<input class="form-checkbox form-checkbox-light size-4.5" data-table-select-all="" id="select-all-products" type="checkbox"/>
</th>
<th data-table-sort="">Product</th>
<th>SKU</th>
<th data-column="category" data-table-sort="">Category</th>
<th data-table-sort="">Available Stock</th>
<th data-table-sort="">Low Stock</th>
<th data-column="price" data-table-sort="">Unit Price</th>
<th data-column="status" data-table-sort="">Stock Status</th>
<th data-table-sort="">Last Updated</th>
<th class="text-center w-[1%]">Actions</th>
</tr>
</thead>
<tbody>
<!-- row-1 -->
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<div class="flex items-center">
<div class="me-base size-9">
<img alt="Product" class="rounded" src="/images/products/1.png"/>
</div>
<div>
<h5 class="mb-1.25">
<a class="hover:text-primary" data-sort="product" href="/apps-ecommerce-product-details">Smart LED TV 55"</a>
</h5>
<p class="text-default-400 text-xs">Supplier: VisionTech</p>
</div>
</div>
</td>
<td>STK-1001</td>
<td>Electronics</td>
<td class="text-success px-2.25 py-3 font-semibold">320</td>
<td class="text-danger px-2.25 py-3 font-semibold">24</td>
<td>$749.00</td>
<td>
<span class="badge badge-label font-semibold text-2xs bg-success/15 text-success">In Stock</span>
</td>
<td>
                                                08 Oct, 2025
                                                <small class="text-default-400 text-2xs">10:30 AM</small>
</td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" data-table-delete-row="" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
<!-- row-2 -->
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<div class="flex items-center">
<div class="me-base size-9">
<img alt="Product" class="rounded" src="/images/products/2.png"/>
</div>
<div>
<h5 class="mb-1.25">
<a class="hover:text-primary" data-sort="product" href="/apps-ecommerce-product-details">Wireless Noise Cancel Headphones"</a>
</h5>
<p class="text-default-400 text-xs">Supplier: SoundMax</p>
</div>
</div>
</td>
<td>STK-1002</td>
<td>Audio</td>
<td class="text-success px-2.25 py-3 font-semibold">220</td>
<td class="text-warning px-2.25 py-3 font-semibold">15</td>
<td>$199.00</td>
<td>
<span class="badge badge-label font-semibold text-2xs bg-success/15 text-success">In Stock</span>
</td>
<td>
                                                07 Oct, 2025
                                                <small class="text-default-400 text-2xs">02:45 PM</small>
</td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" data-table-delete-row="" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
<!-- row-3 -->
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<div class="flex items-center">
<div class="me-base size-9">
<img alt="Product" class="rounded" src="/images/products/3.png"/>
</div>
<div>
<h5 class="mb-1.25">
<a class="hover:text-primary" data-sort="product" href="/apps-ecommerce-product-details">Ergonomic Office Chair</a>
</h5>
<p class="text-default-400 text-xs">Supplier: ComfortLine</p>
</div>
</div>
</td>
<td>STK-1003</td>
<td>Furniture</td>
<td class="text-danger px-2.25 py-3 font-semibold">0</td>
<td class="text-danger px-2.25 py-3 font-semibold">0</td>
<td>$249.00</td>
<td>
<span class="badge badge-label font-semibold text-2xs bg-danger/15 text-danger">Out of Stock</span>
</td>
<td>
                                                06 Oct, 2025
                                                <small class="text-default-400 text-2xs">09:10 AM</small>
</td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" data-table-delete-row="" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
<!-- row-4 -->
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<div class="flex items-center">
<div class="me-base size-9">
<img alt="Product" class="rounded" src="/images/products/4.png"/>
</div>
<div>
<h5 class="mb-1.25">
<a class="hover:text-primary" data-sort="product" href="/apps-ecommerce-product-details">Smartphone 12 Pro</a>
</h5>
<p class="text-default-400 text-xs">Supplier: TechNova</p>
</div>
</div>
</td>
<td>STK-1004</td>
<td>Mobiles</td>
<td class="text-success px-2.25 py-3 font-semibold">510</td>
<td class="text-danger px-2.25 py-3 font-semibold">30</td>
<td>$999.00</td>
<td>
<span class="badge badge-label font-semibold text-2xs bg-success/15 text-success">In Stock</span>
</td>
<td>
                                                05 Oct, 2025
                                                <small class="text-default-400 text-2xs">04:00 PM</small>
</td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" data-table-delete-row="" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
<!-- row-5 -->
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<div class="flex items-center">
<div class="me-base size-9">
<img alt="Product" class="rounded" src="/images/products/5.png"/>
</div>
<div>
<h5 class="mb-1.25">
<a class="hover:text-primary" data-sort="product" href="/apps-ecommerce-product-details">Bluetooth Speaker Mini</a>
</h5>
<p class="text-default-400 text-xs">Supplier: AudioPro</p>
</div>
</div>
</td>
<td>STK-1005</td>
<td>Audio</td>
<td class="text-success px-2.25 py-3 font-semibold">420</td>
<td class="text-warning px-2.25 py-3 font-semibold">25</td>
<td>$79.00</td>
<td>
<span class="badge badge-label font-semibold text-2xs bg-success/15 text-success">In Stock</span>
</td>
<td>
                                                04 Oct, 2025
                                                <small class="text-default-400 text-2xs">01:20 PM</small>
</td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" data-table-delete-row="" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
<!-- row-6 -->
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<div class="flex items-center">
<div class="me-base size-9">
<img alt="Product" class="rounded" src="/images/products/6.png"/>
</div>
<div>
<h5 class="mb-1.25">
<a class="hover:text-primary" data-sort="product" href="/apps-ecommerce-product-details">Portable Air Cooler</a>
</h5>
<p class="text-default-400 text-xs">Supplier: CoolWave</p>
</div>
</div>
</td>
<td>STK-1006</td>
<td>Appliances</td>
<td class="text-success px-2.25 py-3 font-semibold">85</td>
<td class="text-danger px-2.25 py-3 font-semibold">8</td>
<td>$129.00</td>
<td>
<span class="badge badge-label font-semibold text-2xs bg-warning/15 text-warning">Low Stock</span>
</td>
<td>
                                                03 Oct, 2025
                                                <small class="text-default-400 text-2xs">11:05 AM</small>
</td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" data-table-delete-row="" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
<!-- row-7 -->
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<div class="flex items-center">
<div class="me-base size-9">
<img alt="Product" class="rounded" src="/images/products/7.png"/>
</div>
<div>
<h5 class="mb-1.25">
<a class="hover:text-primary" data-sort="product" href="/apps-ecommerce-product-details">Gaming Laptop GTX 4070</a>
</h5>
<p class="text-default-400 text-xs">Supplier: ByteForce</p>
</div>
</div>
</td>
<td>STK-1007</td>
<td>Computers</td>
<td class="text-success px-2.25 py-3 font-semibold">90</td>
<td class="text-danger px-2.25 py-3 font-semibold">6</td>
<td>$1,899.00</td>
<td>
<span class="badge badge-label font-semibold text-2xs bg-success/15 text-success">In Stock</span>
</td>
<td>
                                                02 Oct, 2025
                                                <small class="text-default-400 text-2xs">05:15 PM</small>
</td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" data-table-delete-row="" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
<!-- row-8 -->
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<div class="flex items-center">
<div class="me-base size-9">
<img alt="Product" class="rounded" src="/images/products/8.png"/>
</div>
<div>
<h5 class="mb-1.25">
<a class="hover:text-primary" data-sort="product" href="/apps-ecommerce-product-details">Wireless Mouse Pro</a>
</h5>
<p class="text-default-400 text-xs">Supplier: ClickTech</p>
</div>
</div>
</td>
<td>STK-1008</td>
<td>Accessories</td>
<td class="text-success px-2.25 py-3 font-semibold">410</td>
<td class="text-warning px-2.25 py-3 font-semibold">20</td>
<td>$49.00</td>
<td>
<span class="badge badge-label font-semibold text-2xs bg-success/15 text-success">In Stock</span>
</td>
<td>
                                                01 Oct, 2025
                                                <small class="text-default-400 text-2xs">03:40 PM</small>
</td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" data-table-delete-row="" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
<!-- row-9 -->
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<div class="flex items-center">
<div class="me-base size-9">
<img alt="Product" class="rounded" src="/images/products/9.png"/>
</div>
<div>
<h5 class="mb-1.25">
<a class="hover:text-primary" data-sort="product" href="/apps-ecommerce-product-details">4K Action Camera</a>
</h5>
<p class="text-default-400 text-xs">Supplier: VisionGo</p>
</div>
</div>
</td>
<td>STK-1009</td>
<td>Cameras</td>
<td class="text-success px-2.25 py-3 font-semibold">155</td>
<td class="text-warning px-2.25 py-3 font-semibold">12</td>
<td>$349.00</td>
<td>
<span class="badge badge-label font-semibold text-2xs bg-success/15 text-success">In Stock</span>
</td>
<td>
                                                30 Sep, 2025
                                                <small class="text-default-400 text-2xs">01:20 PM</small>
</td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" data-table-delete-row="" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
<!-- row-10 -->
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<div class="flex items-center">
<div class="me-base size-9">
<img alt="Product" class="rounded" src="/images/products/10.png"/>
</div>
<div>
<h5 class="mb-1.25">
<a class="hover:text-primary" data-sort="product" href="/apps-ecommerce-product-details">Smart Fitness Watch</a>
</h5>
<p class="text-default-400 text-xs">Supplier: FitLife</p>
</div>
</div>
</td>
<td>STK-1010</td>
<td>Wearables</td>
<td class="text-success px-2.25 py-3 font-semibold">240</td>
<td class="text-danger px-2.25 py-3 font-semibold">18</td>
<td>$149.00</td>
<td>
<span class="badge badge-label font-semibold text-2xs bg-success/15 text-success">In Stock</span>
</td>
<td>
                                                29 Sep, 2025
                                                <small class="text-default-400 text-2xs">10:45 AM</small>
</td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" data-table-delete-row="" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
<!-- row-11 -->
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<div class="flex items-center">
<div class="me-base size-9">
<img alt="Product" class="rounded" src="/images/products/3.png"/>
</div>
<div>
<h5 class="mb-1.25">
<a class="hover:text-primary" data-sort="product" href="/apps-ecommerce-product-details">Cordless Vacuum Cleaner</a>
</h5>
<p class="text-default-400 text-xs">Supplier: CleanHome</p>
</div>
</div>
</td>
<td>STK-1011</td>
<td>Home Appliances</td>
<td class="text-warning px-2.25 py-3 font-semibold">25</td>
<td class="text-danger px-2.25 py-3 font-semibold">5</td>
<td>$249.00</td>
<td>
<span class="badge badge-label font-semibold text-2xs bg-warning/15 text-warning">Low Stock</span>
</td>
<td>
                                                28 Sep, 2025
                                                <small class="text-default-400 text-2xs">09:30 AM</small>
</td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" data-table-delete-row="" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="card-footer">
<div data-table-pagination-info="products"></div>
<div data-table-pagination=""></div>
</div>
</div>
</div>
</main>

                <?= $this->include('partials/footer') ?>
            </div>
</div>
<!-- End Page content -->

        <?= $this->include('partials/customizer') ?> <?= $this->include('partials/footer-scripts') ?>

        <!-- Custom table -->
<script src="/js/pages/custom-table.js"></script>
</body>
</html>