<%- include('./partials/header') %>
<!-- ==================================================== -->
<!-- Start right Content here -->
<!-- ==================================================== -->
<div class="page-content">

  <!-- Start Container Fluid -->
  <div class="container-fluid">

    <div class="row">
      <div class="col-xl-12">
        <div class="card">
          <div class="card-header d-flex justify-content-between align-items-center gap-1">
            <h4 class="card-title flex-grow-1">All Product List</h4>

            <a href="/admin/new-product" class="btn btn-sm btn-primary">
              Add Product
            </a>

            <div class="dropdown">
              <a href="#" class="dropdown-toggle btn btn-sm btn-outline-light" data-bs-toggle="dropdown" aria-expanded="false">
                <%- selectedCategory ? selectedCategory.title : 'Select Category' %>
              </a>
              <div class="dropdown-menu dropdown-menu-end">
                <% categories.forEach(category => { %>
                <a href="?category=<%= category.url %>" class="dropdown-item"><%= category.title %></a>
                <% }) %>
              </div>
            </div>
          </div>
          <div>
            <div class="table-responsive">
              <table class="table align-middle mb-0 table-hover table-centered">
                <thead class="bg-light-subtle">
                  <tr>
                    <th>Product Name</th>
                    <th>Price</th>
                    <th>Stock</th>
                    <th>Category</th>
                    <th>Action</th>
                  </tr>
                </thead>
                <tbody>
                  <% products.forEach(product => { %>
                  <tr>
                    <td>
                      <div class="d-flex align-items-center gap-2">
                        <div class="rounded bg-light avatar-md d-flex align-items-center justify-content-center">
                          <img src="<%- product.image %>" alt="" class="avatar-md">
                        </div>
                        <div>
                          <span class="text-dark fw-medium fs-15"><%- product.title %></a>
                        </div>
                      </div>

                    </td>
                    <td>$<%- product.price.toFixed(2) %></td>
                    <td>
                      <p class="mb-1 text-muted"><span class="text-dark fw-medium"><%- product.stock !== null ? product.stock : 'No Track of ' %> Items</span></p>
                      <!-- <p class="mb-0 text-muted"><%- product.sold %> Sold</p> -->
                    </td>
                    <td><%- product.categories .map(category => category.title).join(', ') %></td>
                    <td>
                      <div class="d-flex gap-2">
                        <!-- <a href="#!" class="btn btn-light btn-sm">
                          <iconify-icon icon="solar:eye-broken" class="align-middle fs-18"></iconify-icon>
                        </a> -->
                        <a href="/admin/edit-product/<%- product._id %>" class="btn btn-soft-primary btn-sm">
                          <iconify-icon icon="solar:pen-2-broken" class="align-middle fs-18"></iconify-icon>
                        </a>
                        <form action="/api/product/delete" method="post">
                          <input type="hidden" name="id" value="<%- product._id %>" />
                          <button type="submit" class="btn btn-soft-danger btn-sm">
                            <iconify-icon icon="solar:trash-bin-minimalistic-2-broken" class="align-middle fs-18"></iconify-icon>
                          </button>
                        </form>
                      </div>
                    </td>
                  </tr>
                  <% }) %>
                </tbody>
              </table>
            </div>
            <!-- end table-responsive -->
          </div>
          <div class="card-footer border-top">
            <nav aria-label="Page navigation example">
              <ul class="pagination justify-content-end mb-0">
                <li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>
                <li class="page-item active"><a class="page-link" href="javascript:void(0);">1</a></li>
                <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
                <li class="page-item"><a class="page-link" href="javascript:void(0);">3</a></li>
                <li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a></li>
              </ul>
            </nav>
          </div>
        </div>
      </div>

    </div>

  </div>
  <!-- End Container Fluid -->

</div>
<!-- ==================================================== -->
<!-- End Page Content -->
<!-- ==================================================== -->

<%- include('./partials/footer') %>