<!DOCTYPE html>

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

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

                    <div class="container-fluid">
<div class="mb-1.25 grid grid-cols-1 gap-1.25 md:grid-cols-2 lg:grid-cols-5">
<div class="card">
<div class="card-body">
<div class="mb-5 flex w-full items-center justify-between gap-3">
<h3 class="text-xl"><span data-target="93.7">0</span>k</h3>
<div class="size-9 flex items-center justify-center bg-success rounded-full!">
<i class="iconify tabler--check size-5.5 text-white"></i>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-1">
<span class="text-xs uppercase font-bold">Completed Orders</span>
</div>
<span class="badge bg-success/15 text-success ms-auto">+3.34%</span>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="mb-5 flex w-full items-center justify-between gap-3">
<h3 class="text-xl">
<span data-target="557">0</span>
</h3>
<div class="size-9 flex items-center justify-center bg-warning rounded-full!">
<i class="iconify tabler--hourglass size-5.5 text-white"></i>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-1">
<span class="text-xs uppercase font-bold">Pending Orders</span>
</div>
<span class="badge bg-danger/15 text-danger ms-auto">-1.12%</span>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="mb-5 flex w-full items-center justify-between gap-3">
<h3 class="text-xl">
<span data-target="269">0</span>
</h3>
<div class="size-9 flex items-center justify-center bg-danger rounded-full!">
<i class="iconify tabler--x size-5.5 text-white"></i>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-1">
<span class="text-xs uppercase font-bold">Canceled Orders</span>
</div>
<span class="badge bg-danger/15 text-danger ms-auto">-0.75%</span>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="mb-5 flex w-full items-center justify-between gap-3">
<h3 class="text-xl"><span data-target="9.3">0</span>k</h3>
<div class="size-9 flex items-center justify-center bg-info rounded-full!">
<i class="iconify tabler--shopping-cart size-5.5 text-white"></i>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-1">
<span class="text-xs uppercase font-bold">New Orders</span>
</div>
<span class="badge bg-success/15 text-success ms-auto">+4.22%</span>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="mb-5 flex w-full items-center justify-between gap-3">
<h3 class="text-xl">
<span data-target="8,741">0</span>
</h3>
<div class="size-9 flex items-center justify-center bg-primary rounded-full!">
<i class="iconify tabler--refresh size-5.5 text-white"></i>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-1">
<span class="text-xs uppercase font-bold">Returned Orders</span>
</div>
<span class="badge bg-success/15 text-success ms-auto">+0.56%</span>
</div>
</div>
</div>
</div>
<div class="card" data-table="" data-table-rows-per-page="8">
<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" placeholder="Search order..." type="text"/>
</div>
<button class="btn bg-danger text-white hover:bg-danger-hover hidden" data-table-delete-selected="">Delete</button>
</div>
<!-- Filters & Controls -->
<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 text-nowrap me-2.5">Filter By:</span>
<!-- Payment Status Filter -->
<div class="input-icon-group">
<i class="iconify tabler--credit-card input-icon"></i>
<select class="form-select" data-table-filter="payment-status">
<option value="All">Payment Status</option>
<option value="Paid">Paid</option>
<option value="Pending">Pending</option>
<option value="Failed">Failed</option>
<option value="Refunded">Refunded</option>
</select>
</div>
</div>
<!-- Delivery Status Filter -->
<div class="input-icon-group">
<i class="iconify tabler--truck input-icon"></i>
<select class="form-select" data-table-filter="order-status">
<option value="All">Delivery Status</option>
<option value="Processing">Processing</option>
<option value="Shipped">Shipped</option>
<option value="Delivered">Delivered</option>
<option value="Cancelled">Cancelled</option>
</select>
</div>
<!-- Date Range Filter -->
<div class="input-icon-group">
<i class="iconify tabler--calendar input-icon"></i>
<select class="form-select" data-table-range-filter="date">
<option value="All">Date Range</option>
<option value="Today">Today</option>
<option value="Last 7 Days">Last 7 Days</option>
<option value="Last 30 Days">Last 30 Days</option>
<option value="This Year">This Year</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>
<!-- Layout Toggle Buttons -->
<div class="flex items-center gap-2">
<a class="btn bg-danger text-white hover:bg-danger-hover" href="/apps-ecommerce-order-add">
<i class="iconify tabler--plus"></i>
                                        Add Order
                                    </a>
</div>
</div>
<div class="table-wrapper">
<table class="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="">Order ID</th>
<th data-column="date" data-table-sort="">Date</th>
<th data-table-sort="customer">Customer</th>
<th data-table-sort="">Amount</th>
<th data-column="payment-status" data-table-sort="">Payment Status</th>
<th data-column="order-status" data-table-sort="">Order Status</th>
<th>Payment Method</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 align-middle" type="checkbox" value="option"/>
</td>
<td>
<h5 class="text-sm font-medium">
<a class="hover:text-primary" href="/apps-ecommerce-order-details">#WB20100</a>
</h5>
</td>
<td>
                                                9 May, 2025
                                                <small class="text-default-400">10:10 AM</small>
</td>
<td>
<div class="flex items-center gap-2.5">
<div>
<img alt="avatar-2" class="size-8 rounded-full" src="/images/users/user-2.jpg"/>
</div>
<div>
<h5>Mason Carter</h5>
<p class="text-default-400 text-xs">mason.carter@shopmail.com</p>
</div>
</div>
</td>
<td>$129.45</td>
<td>
<div class="text-success flex items-center gap-1 font-semibold">
<i class="iconify tabler--circle-filled text-success"></i>
                                                    Paid
                                                </div>
</td>
<td>
<span class="badge bg-success/15 text-success">Delivered</span>
</td>
<td>
<div class="flex items-center gap-2">
<img alt="visa" class="h-7" src="/images/cards/visa.svg"/>
                                                    xxxx 7832
                                                </div>
</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>
<h5 class="text-sm font-medium">
<a class="hover:text-primary" href="/apps-ecommerce-order-details">#WB20101</a>
</h5>
</td>
<td>
                                                7 May, 2025
                                                <small class="text-default-400">11:45 AM</small>
</td>
<td>
<div class="flex items-center gap-2.5">
<img alt="avatar-9" class="size-8 rounded-full" src="/images/users/user-9.jpg"/>
<div>
<h5>Ava Martin</h5>
<p class="text-default-400 text-xs">ava.martin@marketplace.com</p>
</div>
</div>
</td>
<td>$87.00</td>
<td>
<div class="text-warning flex items-center gap-1 font-semibold">
<i class="iconify tabler--circle-filled text-warning"></i>
                                                    Pending
                                                </div>
</td>
<td>
<span class="badge bg-warning/15 text-warning">Processing</span>
</td>
<td>
<div class="flex items-center gap-2">
<img alt="mastercard" class="h-7" src="/images/cards/mastercard.svg"/>
                                                    xxxx 5487
                                                </div>
</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>
<h5 class="text-sm font-medium">
<a class="hover:text-primary" href="/apps-ecommerce-order-details">#WB20102</a>
</h5>
</td>
<td>
                                                26 Apr, 2025
                                                <small class="text-default-400">1:20 PM</small>
</td>
<td>
<div class="flex items-center gap-2.5">
<img alt="avatar-1" class="size-8 rounded-full" src="/images/users/user-1.jpg"/>
<div>
<h5>Noah Wilson</h5>
<p class="text-default-400 text-xs">noah.wilson@ecomsite.com</p>
</div>
</div>
</td>
<td>$59.90</td>
<td>
<div class="text-danger flex items-center gap-1 font-semibold">
<i class="iconify tabler--circle-filled text-danger"></i>
                                                    Failed
                                                </div>
</td>
<td>
<span class="badge bg-danger/15 text-danger">Cancelled</span>
</td>
<td>
<div class="flex items-center gap-2">
<img alt="paypal" class="h-7" src="/images/cards/paypal.svg"/>
                                                    xxx@email.com
                                                </div>
</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>
<h5 class="text-sm font-medium">
<a class="hover:text-primary" href="/apps-ecommerce-order-details">#WB20103</a>
</h5>
</td>
<td>
                                                27 Apr, 2025
                                                <small class="text-default-400">3:30 PM</small>
</td>
<td>
<div class="flex items-center gap-2.5">
<img alt="avatar-10" class="size-8 rounded-full" src="/images/users/user-10.jpg"/>
<div>
<h5>Isabella Moore</h5>
<p class="text-default-400 text-xs">isabella.moore@onlineshop.com</p>
</div>
</div>
</td>
<td>$215.20</td>
<td>
<div class="text-success flex items-center gap-1 font-semibold">
<i class="iconify tabler--circle-filled text-success"></i>
                                                    Paid
                                                </div>
</td>
<td>
<span class="badge bg-info/15 text-info">Shipped</span>
</td>
<td>
<div class="flex items-center gap-2">
<img alt="stripe" class="h-7" src="/images/cards/stripe.svg"/>
                                                    xxxx 9901
                                                </div>
</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>
<h5 class="text-sm font-medium">
<a class="hover:text-primary" href="/apps-ecommerce-order-details">#WB20104</a>
</h5>
</td>
<td>
                                                28 Apr, 2025
                                                <small class="text-default-400">9:55 AM</small>
</td>
<td>
<div class="flex items-center gap-2.5">
<img alt="avatar-5" class="size-8 rounded-full" src="/images/users/user-5.jpg"/>
<div>
<h5>Lucas Bennett</h5>
<p class="text-default-400 text-xs">lucas.bennett@shopzone.com</p>
</div>
</div>
</td>
<td>$345.75</td>
<td>
<div class="text-success flex items-center gap-1 font-semibold">
<i class="iconify tabler--circle-filled text-success"></i>
                                                    Paid
                                                </div>
</td>
<td>
<span class="badge bg-success/15 text-success">Delivered</span>
</td>
<td>
<div class="flex items-center gap-2">
<img alt="american-express" class="h-7" src="/images/cards/american-express.svg"/>
                                                    xxxx 4678
                                                </div>
</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>
<h5 class="text-sm font-medium">
<a class="hover:text-primary" href="/apps-ecommerce-order-details">#WB30100</a>
</h5>
</td>
<td>
                                                20 Apr, 2025
                                                <small class="text-default-400">2:30 PM</small>
</td>
<td>
<div class="flex items-center gap-2.5">
<img alt="avatar-3" class="size-8 rounded-full" src="/images/users/user-3.jpg"/>
<div>
<h5>Emma Johnson</h5>
<p class="text-default-400 text-xs">emma.johnson@storemail.com</p>
</div>
</div>
</td>
<td>$199.99</td>
<td>
<div class="text-success flex items-center gap-1 font-semibold">
<i class="iconify tabler--circle-filled text-success"></i>
                                                    Paid
                                                </div>
</td>
<td>
<span class="badge bg-success/15 text-success">Delivered</span>
</td>
<td>
<div class="flex items-center gap-2">
<img alt="discover-card" class="h-7" src="/images/cards/discover-card.svg"/>
                                                    xxxx 1234
                                                </div>
</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>
<h5 class="text-sm font-medium">
<a class="hover:text-primary" href="/apps-ecommerce-order-details">#WB30101</a>
</h5>
</td>
<td>
                                                21 Apr, 2025
                                                <small class="text-default-400">9:15 AM</small>
</td>
<td>
<div class="flex items-center gap-2.5">
<img alt="avatar-4" class="size-8 rounded-full" src="/images/users/user-4.jpg"/>
<div>
<h5>Liam Thompson</h5>
<p class="text-default-400 text-xs">liam.thompson@buynow.com</p>
</div>
</div>
</td>
<td>$75.50</td>
<td>
<div class="text-warning flex items-center gap-1 font-semibold">
<i class="iconify tabler--circle-filled text-warning"></i>
                                                    Pending
                                                </div>
</td>
<td>
<span class="badge bg-warning/15 text-warning">Processing</span>
</td>
<td>
<div class="flex items-center gap-2">
<img alt="unionpay" class="h-7" src="/images/cards/unionpay.svg"/>
                                                    xxxx 9876
                                                </div>
</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>
<h5 class="text-sm font-medium">
<a class="hover:text-primary" href="/apps-ecommerce-order-details">#WB30102</a>
</h5>
</td>
<td>
                                                22 Apr, 2025
                                                <small class="text-default-400">4:45 PM</small>
</td>
<td>
<div class="flex items-center gap-2.5">
<img alt="avatar-5" class="size-8 rounded-full" src="/images/users/user-5.jpg"/>
<div>
<h5>Sophia Davis</h5>
<p class="text-default-400 text-xs">sophia.davis@shopsite.com</p>
</div>
</div>
</td>
<td>$45.25</td>
<td>
<div class="text-danger flex items-center gap-1 font-semibold">
<i class="iconify tabler--circle-filled text-danger"></i>
                                                    Failed
                                                </div>
</td>
<td>
<span class="badge bg-danger/15 text-danger">Cancelled</span>
</td>
<td>
<div class="flex items-center gap-2">
<img alt="payoneer" class="h-7" src="/images/cards/payoneer.svg"/>
                                                    xxx@email.com
                                                </div>
</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>
<h5 class="text-sm font-medium">
<a class="hover:text-primary" href="/apps-ecommerce-order-details">#WB30103</a>
</h5>
</td>
<td>
                                                10 May, 2025
                                                <small class="text-default-400">11:00 AM</small>
</td>
<td>
<div class="flex items-center gap-2.5">
<img alt="avatar-6" class="size-8 rounded-full" src="/images/users/user-6.jpg"/>
<div>
<h5>Oliver Brown</h5>
<p class="text-default-400 text-xs">oliver.brown@webstore.com</p>
</div>
</div>
</td>
<td>$299.00</td>
<td>
<div class="text-success flex items-center gap-1 font-semibold">
<i class="iconify tabler--circle-filled text-success"></i>
                                                    Paid
                                                </div>
</td>
<td>
<span class="badge bg-info/15 text-info">Shipped</span>
</td>
<td>
<div class="flex items-center gap-2">
<img alt="google-wallet" class="h-7" src="/images/cards/google-wallet.svg"/>
                                                    xxx@google
                                                </div>
</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>
<h5 class="text-sm font-medium">
<a class="hover:text-primary" href="/apps-ecommerce-order-details">#WB30104</a>
</h5>
</td>
<td>
                                                24 Apr, 2025
                                                <small class="text-default-400">8:20 AM</small>
</td>
<td>
<div class="flex items-center gap-2.5">
<img alt="avatar-7" class="size-8 rounded-full" src="/images/users/user-7.jpg"/>
<div>
<h5>Charlotte Lee</h5>
<p class="text-default-400 text-xs">charlotte.lee@marketzone.com</p>
</div>
</div>
</td>
<td>$420.80</td>
<td>
<div class="text-success flex items-center gap-1 font-semibold">
<i class="iconify tabler--circle-filled text-success"></i>
                                                    Paid
                                                </div>
</td>
<td>
<span class="badge bg-success/15 text-success">Delivered</span>
</td>
<td>
<div class="flex items-center gap-2">
<img alt="bhim" class="h-7" src="/images/cards/bhim.svg"/>
                                                    xxxx@upi
                                                </div>
</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 class="card-footer">
<div data-table-pagination-info="orders"></div>
<div data-table-pagination=""></div>
</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>