<!DOCTYPE html>

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

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

                    <div class="container-fluid">
<div class="card" data-table="" data-table-rows-per-page="8">
<div class="card-header">
<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 category..." type="search"/>
</div>
<button class="hidden btn bg-danger text-white hover:bg-danger-hover" data-table-delete-selected="">Delete</button>
</div>
<!-- Records Per Page -->
<div class="flex items-center gap-1.25">
<div>
<select class="form-select" data-table-set-rows-per-page="">
<option value="5">5</option>
<option selected="" value="8">8</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
</select>
</div>
<!-- Status Filter -->
<div class="input-icon-group">
<i class="iconify tabler--circle input-icon"></i>
<select class="form-select" data-table-filter="status">
<option value="">All</option>
<option value="">Active</option>
<option value="">Unactive</option>
</select>
</div>
<a aria-controls="addCategoryModal" aria-expanded="false" aria-haspopup="dialog" class="btn bg-primary text-white text-nowrap hover:bg-primary-hover ms-1.25" data-hs-overlay="#addCategoryModal" data-sort="product" href="#!">
<i class="iconify tabler--plus"></i> Add Category
                                    </a>
</div>
</div>
<div class="table-wrapper">
<table class="w-full table table-hover table-custom table-centered table-select table-hover">
<thead class="thead-sm font-semibold">
<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="" type="checkbox" value="option"/>
</th>
<th data-table-sort="product">Category Name</th>
<th data-table-sort="">Slug</th>
<th data-table-sort="">Products</th>
<th data-table-sort="">Orders</th>
<th data-table-sort="">Earnings</th>
<th data-table-sort="">Last Modify</th>
<th data-column="status" data-table-sort="">Status</th>
<th class="text-center w-[1%]">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<div class="flex gap-base items-center">
<div>
<img alt="Product" class="size-9" src="/images/products/1.png"/>
</div>
<h5>
<a class="font- hover:text-primary" data-sort="product" href="#!">Furnitures</a>
</h5>
</div>
</td>
<td>furniture</td>
<td>5248</td>
<td>95.6k</td>
<td>$40.5M</td>
<td>18 Apr, 2025 <small class="text-default-400 ms-1"> 12:24 PM</small></td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Active </span>
</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>
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<div class="flex gap-base items-center">
<div>
<img alt="Product" class="size-9" src="/images/products/2.png"/>
</div>
<h5>
<a class="font- hover:text-primary" data-sort="product" href="#!">Electronics</a>
</h5>
</div>
</td>
<td>electronics</td>
<td>9854</td>
<td>112.3k</td>
<td>$30.4M</td>
<td>20 Apr, 2025 <small class="text-default-400 ms-1"> 09:10 AM</small></td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Active </span>
</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>
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<div class="flex gap-base items-center">
<div>
<img alt="Product" class="size-9" src="/images/products/3.png"/>
</div>
<h5>
<a class="font- hover:text-primary" data-sort="product" href="#!">Smartphones</a>
</h5>
</div>
</td>
<td>electronics-smartphones</td>
<td>1324</td>
<td>50.1k</td>
<td>$22.3M</td>
<td>22 Apr, 2025 <small class="text-default-400 ms-1"> 11:45 AM</small></td>
<td>
<span class="badge text-2xs bg-danger/15 text-danger"> Inactive </span>
</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>
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<div class="flex gap-base items-center">
<div>
<img alt="Product" class="size-9" src="/images/products/4.png"/>
</div>
<h5>
<a class="font- hover:text-primary" data-sort="product" href="#!">Headphones</a>
</h5>
</div>
</td>
<td>accessories</td>
<td>5123</td>
<td>70.8k</td>
<td>$5.7M</td>
<td>25 Apr, 2025 <small class="text-default-400 ms-1"> 08:20 AM</small></td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Active </span>
</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>
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<div class="flex gap-base items-center">
<div>
<img alt="Product" class="size-9" src="/images/products/5.png"/>
</div>
<h5>
<a class="font- hover:text-primary" data-sort="product" href="#!">Table Lamps</a>
</h5>
</div>
</td>
<td>furniture-tables</td>
<td>7589</td>
<td>88.7k</td>
<td>$13.2M</td>
<td>27 Apr, 2025 <small class="text-default-400 ms-1"> 03:15 PM</small></td>
<td>
<span class="badge text-2xs bg-danger/15 text-danger"> Inactive </span>
</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>
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<div class="flex gap-base items-center">
<div>
<img alt="Product" class="size-9" src="/images/products/6.png"/>
</div>
<h5>
<a class="font- hover:text-primary" data-sort="product" href="#!">Kitchen Appliances</a>
</h5>
</div>
</td>
<td>appliances</td>
<td>3021</td>
<td>110.4k</td>
<td>$12.1M</td>
<td>30 Apr, 2025 <small class="text-default-400 ms-1">06:00 PM</small></td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Active </span>
</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>
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<div class="flex gap-base items-center">
<div>
<img alt="Product" class="size-9" src="/images/products/7.png"/>
</div>
<h5>
<a class="font- hover:text-primary" data-sort="product" href="#!">Smart Watches</a>
</h5>
</div>
</td>
<td>wearables</td>
<td>6245</td>
<td>95.3k</td>
<td>$8.9M</td>
<td>28 Apr, 2025 <small class="text-default-400 ms-1">10:45 AM</small></td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Active </span>
</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>
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<div class="flex gap-base items-center">
<div>
<img alt="Product" class="size-9" src="/images/products/8.png"/>
</div>
<h5>
<a class="font- hover:text-primary" data-sort="product" href="#!">Laptops</a>
</h5>
</div>
</td>
<td>electronics</td>
<td>4890</td>
<td>67.2k</td>
<td>$15.4M</td>
<td>29 Apr, 2025 <small class="text-default-400 ms-1"> 02:30 PM</small></td>
<td>
<span class="badge text-2xs bg-danger/15 text-danger"> Inactive </span>
</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>
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<div class="flex gap-base items-center">
<div>
<img alt="Product" class="size-9" src="/images/products/9.png"/>
</div>
<h5>
<a class="font- hover:text-primary" data-sort="product" href="#!">Gaming Consoles</a>
</h5>
</div>
</td>
<td>gaming</td>
<td>3756</td>
<td>82.1k</td>
<td>$10.7M</td>
<td>27 Apr, 2025 <small class="text-default-400 ms-1"> 09:10 AM</small></td>
<td>
<span class="badge text-2xs bg-success/15 text-success"> Active </span>
</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>
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<div class="flex gap-base items-center">
<div>
<img alt="Product" class="size-9" src="/images/products/10.png"/>
</div>
<h5>
<a class="font- hover:text-primary" data-sort="product" href="#!">Bluetooth Speakers</a>
</h5>
</div>
</td>
<td>audio</td>
<td>5432</td>
<td>78.9k</td>
<td>$6.3M</td>
<td>26 Apr, 2025 <small class="text-default-400 ms-1"> 04:20 PM</small></td>
<td>
<span class="badge text-2xs bg-success/15 text-success">Active</span>
</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="categories"></div>
<div data-table-pagination=""></div>
</div>
</div>
</div>
</main>

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

                <div aria-labelledby="addCategoryModalLabel" class="hs-overlay hs-overlay-open:opacity-100 hs-overlay-open:duration-500 hidden size-full fixed top-0 start-0 z-80 overflow-x-hidden overflow-y-auto pointer-events-none" id="addCategoryModal" role="dialog" tabindex="-1">
<div class="hs-overlay-animation-target hs-overlay-open:scale-100 hs-overlay-open:opacity-100 scale-95 opacity-0 ease-in-out transition-all duration-200 lg:max-w-3xl md:max-w-2xl md:w-full m-3 md:mx-auto min-h-[calc(100%-56px)] flex items-center">
<div class="w-full flex flex-col card pointer-events-auto">
<div class="card-header">
<h3 class="font-bold text-sm" id="addCategoryModalLabel">Add New Category</h3>
<button aria-label="Close" data-hs-overlay="#addCategoryModal" type="button">
<i class="iconify tabler--x text-xl"></i>
</button>
</div>
<div class="card-body overflow-y-auto">
<div class="grid grid-cols-2 gap-base">
<!-- Category Name -->
<div>
<label class="form-label" for="categoryName">Category Name</label>
<input class="form-input" id="categoryName" placeholder="e.g. Electronics" required="" type="text"/>
</div>
<!-- Slug -->
<div>
<label class="form-label" for="categorySlug">Slug</label>
<input class="form-input" id="categorySlug" placeholder="e.g. electronics" required="" type="text"/>
</div>
<!-- Image Upload -->
<div class="lg:col-span-2 col-span-1">
<label class="form-label" for="categoryImage">Category Image</label>
<input class="block w-full border border-default-300 rounded disabled:opacity-50 disabled:pointer-events-none file:bg-default-100 file:border-0 file:me-4 file:py-2 file:px-3" id="categoryImage" name="file-input" type="file"/>
</div>
<!-- Status -->
<div>
<label class="form-label" for="categoryStatus">Status</label>
<select class="form-input" id="categoryStatus" required="">
<option value="">Select Status</option>
<option value="active">Active</option>
<option value="inactive">Inactive</option>
</select>
</div>
<!-- Optional: Description -->
<div class="lg:col-span-2 col-span-1">
<label class="form-label" for="categoryDescription">Description (Optional)</label>
<textarea class="form-textarea" id="categoryDescription" placeholder="Brief description of the category..." rows="3"></textarea>
</div>
</div>
</div>
<div class="flex justify-end items-center gap-x-2 border-t border-default-300 card-body">
<button class="btn bg-light hover:text-primary" data-hs-overlay="#addCategoryModal" type="button">Cancel</button>
<button class="btn bg-primary text-white hover:bg-primary-hover" type="button">Add Category</button>
</div>
</div>
</div>
</div>
</div>
<!-- End Page content -->
</div>

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

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