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

<!-- ==================================================== -->
<!-- Start right Content here -->
<!-- ==================================================== -->
<div>

  <div class="page-content">

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

      <div class="row">
        <div class="col-md-6 col-xl-3">
          <div class="card">
            <div class="card-body">
              <div class="d-flex align-items-center justify-content-between">
                <div>
                  <h4 class="card-title mb-2">Total Orders</h4>
                  <p class="text-muted fw-medium fs-22 mb-0"><%- totalOrderCount %></p>
                </div>
                <div>
                  <div class="avatar-md bg-primary bg-opacity-10 rounded">
                    <iconify-icon icon="solar:chat-round-money-broken" class="fs-32 text-primary avatar-title"></iconify-icon>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-6 col-xl-3">
          <div class="card">
            <div class="card-body">
              <div class="d-flex align-items-center justify-content-between">
                <div>
                  <h4 class="card-title mb-2">Order Refunded</h4>
                  <p class="text-muted fw-medium fs-22 mb-0"><%- totalRefunded %></p>
                </div>
                <div>
                  <div class="avatar-md bg-primary bg-opacity-10 rounded">
                    <iconify-icon icon="solar:cart-cross-broken" class="fs-32 text-primary avatar-title"></iconify-icon>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-md-6 col-xl-3">
          <div class="card">
            <div class="card-body">
              <div class="d-flex align-items-center justify-content-between">
                <div>
                  <h4 class="card-title mb-2">Order Completed</h4>
                  <p class="text-muted fw-medium fs-22 mb-0"><%- totalCompleted %></p>
                </div>
                <div>
                  <div class="avatar-md bg-primary bg-opacity-10 rounded">
                    <iconify-icon icon="solar:box-broken" class="fs-32 text-primary avatar-title"></iconify-icon>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-md-6 col-xl-3">
          <div class="card">
            <div class="card-body">
              <div class="d-flex align-items-center justify-content-between">
                <div>
                  <h4 class="card-title mb-2">Order Pending</h4>
                  <p class="text-muted fw-medium fs-22 mb-0"><%- totalPending %></p>
                </div>
                <div>
                  <div class="avatar-md bg-primary bg-opacity-10 rounded">
                    <iconify-icon icon="solar:tram-broken" class="fs-32 text-primary avatar-title"></iconify-icon>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-xl-12">
          <div class="card">
            <div class="d-flex card-header justify-content-between align-items-center">
              <div>
                <h4 class="card-title">All Order List</h4>
              </div>
            </div>
            <div class="card-body p-0">
              <div class="table-responsive">
                <table class="table align-middle mb-0 table-hover table-centered">
                  <thead class="bg-light-subtle">
                    <tr>
                      <th>Order ID</th>
                      <th>Created at</th>
                      <th>Customer</th>
                      <th>Paid Amount</th>
                      <!-- <th>Payment Status</th> -->
                      <th>Items</th>
                      <!-- <th>Delivery Number</th> -->
                      <th>Order Status</th>
                      <th>Action</th>
                    </tr>
                  </thead>
                  <tbody>
                    <% orders.forEach(order => { %>
                    <tr>
                      <td><%- order.orderId %></td>
                      <td><%- new Date(order.createdAt).toDateString() %></td>
                      <td>
                        <span class="link-primary fw-medium"><%- order.firstName %> <%- order.lastName %></span>
                      </td>
                      <td> $<%- order.amountPaid.toFixed(2) %></td>
                      <!-- <td> <span class="badge bg-light text-dark  px-2 py-1 fs-13">Unpaid</span></td> -->
                      <td><%- order.products.length + order.creation.length %></td>
                      <!-- <td> -</td> -->
                      <td> <span style="text-transform: capitalize;" class="badge border border-secondary text-secondary  px-2 py-1 fs-13"><%- order.status %></span></td>
                      <td>
                        <div class="d-flex gap-2">
                          <a href="/admin/order/<%- order.orderId %>" class="btn btn-light btn-sm">
                            <iconify-icon icon="solar:eye-broken" class="align-middle fs-18"></iconify-icon>
                          </a>
                        </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 -->
  <!-- ==================================================== -->
</div>
<%- include('./partials/footer') %>