<%- include("../templates/index") %>
<%- include("../templates/menuProdV2") %>

<div class="container mt-5">
  <div class="card">
    <div class="card-header">
      <h3>Productos</h3>
    </div>
    <div class="card-body">
      <div class="table-responsive">
        <table class="table table-striped table-hover table-responsive-md">
          <thead>
            <th>ID</th>
            <th>Foto</th>
            <th>Nombre</th>
            <th>Descripción</th>
            <th>Precio</th>
            <th>Cantidad</th>
            <th>Categoría</th>
            <th>IVA</th>
            <th>Descuento</th>
            <th>En reserva</th>
            <th>Editar</th>
            <th>Borrar</th>
          </thead>
          <tbody class="table-group-divider">
            <% let totalPrecio = 0; %> 
            <% let totalCantidad = 0; %> 
            <% productos.forEach((producto) => { %>
              <tr>
                <td><%= producto.id %></td>
                <td class="user-avatar text-center align-middle align-content-lg-center">
                  <div class="avatar-container">
                    <img src="/uploadsProducts/<%= producto.foto %>" alt="Foto de <%= producto.nombre %>" class="img-fluid rounded-circle" />
                  </div>
                </td>
                <td><%= producto.nombre %></td>
                <td><%= producto.descripcion %></td>
                <td>$<%= producto.precio %></td>
                <td>#<%= producto.cantidad %></td>
                <td><%= producto.categoria %></td>
                <td><%= producto.iva %></td>
                <td><%= producto.descuento %></td>
                <td><%= producto.reserva %></td>
                <td>
                  <a href="/productos/productos/editar/<%= producto.id %>" class="btn btn-warning">
                    <i class="bi bi-pen-fill"></i>
                  </a>
                </td>
                <td>
                  <a href="/productos/productos/borrar/<%= producto.id %>" class="btn btn-danger">
                    <i class="bi bi-trash3-fill"></i>
                  </a>
                </td>
              </tr>
              <% totalPrecio += +producto.precio * +producto.cantidad; %>
              <% totalCantidad += +producto.cantidad; %>
            <% }); %>
          </tbody>
          <tfoot>
            <tr>
              <td colspan="4" class="text-uppercase font-weight-bold">Total :</td>
              <td>$<%= totalPrecio %></td>
              <td>#<%= totalCantidad %></td>
              <td colspan="2"></td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
  </div>
</div>

<style>
  .avatar-container {
    position: relative;
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 50%;
    margin: 0 auto;
  }

  .avatar-container img {
    position: absolute;
    width: 100%;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table-responsive table {
    margin-bottom: 0;
  }
</style>
<%- include("../templates/pie") %>
