<%- include("../templates/index")%>
<nav
  class="navbar navbar-dark bg-primary fixed-top navbar-expand-lg"
  id="menu2"
>
  <div class="container-fluid">
    <button
      class="navbar-toggler"
      type="button"
      data-bs-toggle="offcanvas"
      data-bs-target="#offcanvasDarkNavbar"
      aria-controls="offcanvasDarkNavbar"
      aria-label="Toggle navigation"
    >
      <span class="navbar-toggler-icon"></span>
    </button>
    <div
      class="offcanvas offcanvas-end text-bg-dark"
      tabindex="-1"
      id="offcanvasDarkNavbar"
      aria-labelledby="offcanvasDarkNavbarLabel"
    >
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">Menú</h5>
        <button
          type="button"
          class="btn-close btn-close-white"
          data-bs-dismiss="offcanvas"
          aria-label="Close"
        ></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav flex-grow-1">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="/">
              <i class="bi bi-house-fill"></i> Inicio
            </a>
          </li>

          <li class="nav-item" id="editarPerfil">
            <a
              class="nav-link"
              href="/usuarios/usuarios/editarEmpresa/<%= userId %>"
            >
              <i class="bi bi-pencil-fill"></i> Editar Datos de la Empresa
            </a>
          </li>

          <li class="nav-item" id="eliminarPerfil">
            <a class="nav-link" href="/usuarios/usuarios/eliminarEmpresa/<%= userId %>">
              <i class="bi bi-trash-fill"></i> Eliminar Empresa
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="/logout">
              <i class="bi bi-person-down"></i> Cerrar Sesión
            </a>
          </li>
          <p><%= %></p>
        </ul>
      </div>
    </div>
  </div>
</nav>

<style>
  body {
    padding-top: 5%; /* Adjust based on your header height */
  }

  #menu2 {
    background-color: #3498db; /* Use your desired background color */
  }

  #offcanvasDarkNavbar {
    background-color: #2c3e50; /* Use your desired background color */
  }

  .navbar-toggler-icon {
    background-color: #fff; /* Use your desired color */
    border-radius: 50%;
  }

  .nav-link:hover {
    color: black;
    background-color: #3c3c3c65; /* Use your desired background color */
    border-radius: 15px;
    animation: navPup 0.5s ease-in-out;
  }
  @keyframes navPup {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
    
  }

  .offcanvas-body {
    color: #fff; /* Use your desired text color */
  }

  .offcanvas-body a {
    color: #fff; /* Use your desired link color */
  }

  .offcanvas-body a:hover {
    color: #ecf0f1; /* Use your desired link hover color */
  }

  .btn-close {
    color: #fff; /* Use your desired close icon color */
  }

  .btn-close:hover {
    color: #ecf0f1; /* Use your desired close icon hover color */
  }

  .navbar-toggler {
    border-color: #fff; /* Use your desired border color */
  }

  .navbar-toggler:hover {
    background-color: #fff; /* Use your desired background color */
    border-radius: 50%;
  }

  .navbar-toggler:focus {
    background-color: #fff; /* Use your desired background color */
    border-radius: 50%;
  }

  .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }

  .navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }

  .btn-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: 0.25em 0.25em;
    color: #fff;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.15s ease-in-out;
  }

  .btn-close:hover {
    opacity: 0.5;
  }

  .btn-close:focus {
    outline: 0;
    box-shadow: none;
  }

  .offcanvas {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    visibility: hidden;
    background-color: #fff;
    transition: transform 0.3s ease-in-out;
  }

  .offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem;
    border-bottom: 1px solid #e9ecef;
  }

  .offcanvas-header .btn-close {
    padding: 0.5rem 0.5rem;
    margin-top: -0.5rem;
    margin-right: -0.5rem;
    margin-bottom: -0.5rem;
  }

  .offcanvas-title {
    margin-bottom: 0;
    line-height: 1.5;
  }

  .offcanvas-body {
    flex-grow: 1;
    padding: 1rem 1rem;
    overflow-y: auto;
  }

  .offcanvas-start {
    top: 0;
    left: 0;
    width: 400px;
    border-right: 1px solid #e9ecef;
    transform: translateX(-100%);
  }

  .offcanvas-end {
    top: 0;
    right: 0;
    width: 400px;
    border-left: 1px solid #e9ecef;
    transform: translateX(100%);
  }

  @media (max-width: 575.98px) {
    .offcanvas-sm-start {
      top: 0;
      left: 0;
      width: 300px;
      border-right: 1px solid #e9ecef;
      transform: translateX(-100%);
    }

    .offcanvas-sm-end {
      top: 0;
      right: 0;
      width: 300px;
      border-left: 1px solid #e9ecef;
      transform: translateX(100%);
    }
  }

  @media (min-width: 576px) {
    .offcanvas-sm-start {
      top: 0;
      left: 0;
      width: 300px;
      border-right: 1px solid #e9ecef;
      transform: translateX(-100%);
    }

    .offcanvas-sm-end {
      top: 0;
      right: 0;
      width: 300px;
      border-left: 1px solid #e9ecef;
      transform: translateX(100%);
    }
  }

  @media (max-width: 767.98px) {
    .offcanvas-md-start {
      top: 0;
      left: 0;
      width: 400px;
      border-right: 1px solid #e9ecef;
      transform: translateX(-100%);
    }

    .offcanvas-md-end {
      top: 0;
      right: 0;
      width: 400px;
      border-left: 1px solid #e9ecef;
      transform: translateX(100%);
    }
  }

  @media (min-width: 768px) {
    .offcanvas-md-start {
      top: 0;
      left: 0;
      width: 400px;
      border-right: 1px solid #e9ecef;
      transform: translateX(-100%);
    }

    .offcanvas-md-end {
      top: 0;
      right: 0;
      width: 400px;
      border-left: 1px solid #e9ecef;
      transform: translateX(100%);
    }
  }

  @media (max-width: 991.98px) {
    .offcanvas-lg-start {
      top: 0;
      left: 0;
      width: 400px;
      border-right: 1px solid #e9ecef;
      transform: translateX(-100%);
    }

    .offcanvas-lg-end {
      top: 0;
      right: 0;
      width: 400px;
      border-left: 1px solid #e9ecef;
      transform: translateX(100%);
    }
  }

  @media (min-width: 992px) {
    .offcanvas-lg-start {
      top: 0;
      left: 0;
      width: 400px;
      border-right: 1px solid #e9ecef;
      transform: translateX(-100%);
    }

    .offcanvas-lg-end {
      top: 0;
      right: 0;
      width: 400px;
      border-left: 1px solid #e9ecef;
      transform: translateX(100%);
    }
  }

  @media (max-width: 1199.98px) {
    .offcanvas-xl-start {
      top: 0;
      left: 0;
      width: 400px;
      border-right: 1px solid #e9ecef;
      transform: translateX(-100%);
    }

    .offcanvas-xl-end {
      top: 0;
      right: 0;
      width: 400px;
      border-left: 1px solid #e9ecef;
      transform: translateX(100%);
    }
  }

  @media (min-width: 1200px) {
    .offcanvas-xl-start {
      top: 0;
      left: 0;
      width: 400px;
      border-right: 1px solid #e9ecef;
      transform: translateX(-100%);
    }

    .offcanvas-xl-end {
      top: 0;
      right: 0;
      width: 400px;
      border-left: 1px solid #e9ecef;
      transform: translateX(100%);
    }
  }

  .offcanvas-header {
    padding: 1rem 1rem;
    margin-bottom: 0;
    align-items: center;
  }

  .offcanvas-header .btn-close {
    padding: 0.5rem 0.5rem;
    margin-top: -0.5rem;
    margin-right: -0.5rem;
    margin-bottom: -0.5rem;
  }

  .offcanvas-title {
    margin-bottom: 0;
    line-height: 1.5;
  }

  .offcanvas-body {
    padding: 1rem 1rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  offcanvas-backdrop{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--bs-backdrop-z-index);
    background-color: #000;
  }

</style>

<br /><br /><br />
<div class="container">
  <div class="botones">
    <a href="/principalTienda?boton=productos" id="botones" class="button-52"
      ><i class="bi bi-basket"></i> Productos</a
    >
    <a href="/principalTienda?boton=trabajadores" id="botones" class="button-52"
      ><i class="bi bi-people"></i> Trabajadores</a
    >
  </div>
  <br />
  <div class="card-outer">
    <div class="card">
      <div class="tablaPro">
        <table class="table table-striped table-bordered table-hover">
          <thead>
            <tr>
              <% if (boton === 'productos') { %>
              <th><i class="bi bi-hash"></i></th>
              <th><i class="bi bi-card-text"></i></th>
              <th><i class="bi bi-file-image"></i></th>
              <th><i class="bi bi-info-circle"></i></th>
              <th><i class="bi bi-cash"></i></th>
              <th><i class="bi bi-basket"></i></th>
              <th><i class="bi bi-tags"></i></th>
              <th><i class="bi bi-percent"></i></th>
              <th><i class="bi bi-tag"></i></th>
              <th><i class="bi bi-box-seam"></i></th>
              <th><i class="bi bi-pencil-square"></i></th>
              <th><i class="bi bi-trash3-fill"></i></th>
              <% } else if (boton === 'trabajadores') { %>
              <th><i class="bi bi-hash"></i></th>
              <th><i class="bi bi-file-image"></i></th>
              <th><i class="bi bi-person"></i></th>
              <th><i class="bi bi-envelope"></i></th>
              <th><i class="bi bi-card-id"></i> CURP</th>
              <th><i class="bi bi-card-text"></i> RFC</th>
              <th><i class="bi bi-phone"></i></th>

              <th><i class="bi bi-pencil-square"></i></th>
              <th><i class="bi bi-trash3-fill"></i></th>
              <!-- aqui boton de vendido -->
              <th><i class="bi bi-cash-coin"></i></th>
              <% } %>
            </tr>
          </thead>
          <div class="card-header">
            <!-- hacer comparacion entrre los botones , si el boton de trabajadores esta poner titulo trabajadores y si no el otro -->
            <% if (boton === 'productos') { %>
            <h3>Productos</h3>
            <% } else if (boton === 'trabajadores') { %>
            <h3>Trabajadores</h3>

            <% } %>
          </div>
          <tbody class="tapro">
            <% if (boton === 'productos') { %> <% productos.forEach(producto =>
            { %>
            <tr>
              <td><%= producto.id %></td>
              <td><%= producto.nombre %></td>
              <td>
                <div class="avatar-container">
                  <img
                    src="/uploadsProducts/<%= producto.foto %>"
                    alt="Foto de <%= producto.nombre %>"
                    class="img-fluid rounded-circle img-producto"
                  />
                </div>
              </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>
            <% }); %> <% } else if (boton === 'trabajadores') { %> <%
            usuarios.forEach(usuario => { %>
            <tr>
              <td
                style="
                  max-width: 50px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                "
              >
                <%= usuario.id %>
              </td>

              <td>
                <div class="avatar-container">
                  <img
                    src="/uploads/<%= usuario.foto %>"
                    alt="Foto de <%= usuario.nombre %>"
                    class="img-fluid rounded-circle img-producto"
                  />
                </div>
              </td>
              <td><%= usuario.nombre %></td>
              <td
                style="
                  max-width: 50px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                "
              >
                <%= usuario.email %>
              </td>
              <td><%= usuario.curp %></td>
              <td><%= usuario.rfc %></td>
              <td><%= usuario.telefono %></td>
              <td>
                <a
                  href="/usuarios/usuarios/editar/<%= usuario.id %>"
                  class="btn btn-warning"
                >
                  <i class="bi bi-pen-fill"></i>
                </a>
              </td>
              <td>
                <a
                  href="/usuarios/usuarios/borrar/<%= usuario.id %>"
                  class="btn btn-danger"
                  ><i class="bi bi-trash3-fill"></i
                ></a>
              </td>

              <td>
                <a
                  href="/usuarios/usuarios/vendido/<%= usuario.id %>"
                  class="btn btn-success disabled"
                  ><i class="bi bi-cash-coin"> Vendido</i></a
                >
              </td>
            </tr>
            <% }); %> <% } %>
          </tbody>
        </table>
        <div class="card-footer">
          <% if (boton === 'productos') { %>
          <a href="/productos/productos/nuevoproducto"> Agregrar productos</a>
          <a href=""> Buscar prodcutos</a>
          <% } else if (boton === 'trabajadores') { %>
          <a href="/usuarios/usuarios/nuevotrajador"> Agregrar trabajadores</a>
          <% } %>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  /* Bootstrap styles */
  @import url("https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css");

  /* Añade estilos adicionales según sea necesario para la tabla */

  body {
    background-color: rgb(196, 213, 231);
  }
  .tablaPro {
    margin-top: 20px;
  }
  .card {
    border: 1px solid #000000;
    border-radius: 50px;
    margin-top: 20px;
    text-align: center;
    table-layout: fixed;
    display: block;
    width: 100%;

    margin-top: 20px;
    background-color: #779cea;
  }
  table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: none;
    margin-top: 20px;
    border-radius: 50px;
  }

  .button-52 {
    font-size: 16px;
    font-weight: 200;
    letter-spacing: 1px;
    padding: 13px 20px 13px;
    outline: 0;
    border: 1px solid black;
    cursor: pointer;
    position: relative;
    background-color: rgba(0, 0, 0, 0);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
  }

  .button-52:after {
    content: "";
    background-color: #779cea;
    width: 100%;
    z-index: -1;
    position: absolute;
    height: 100%;
    top: 7px;
    left: 7px;
    transition: 0.2s;
  }

  .button-52:hover:after {
    top: 0px;
    left: 0px;
  }

  @media (min-width: 768px) {
    .button-52 {
      padding: 13px 50px 13px;
    }
  }

  .botones {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .botones a {
    margin: 0 10px; /* Ajusta el espacio entre botones según tus necesidades */
    text-decoration: none;
    color: #000000; /* Cambia el color del texto según tus preferencias */
    font-weight: 400;
  }

  a {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: black;
    text-decoration: wavy;
    padding-left: 20px;
  }

  a:hover {
    background-color: #779cea;
    color: black;

  }
</style>

<%- include("../templates/pie")%>
