<?php include "views/templates/header.php";?>


<style>
  /* Estilos para los campos de entrada */
  .productos-lista input[type="number"] {
    width: 100%;
    padding: 5px;
    margin: 5px 0;
    border: 1px solid #ced4da;
    border-radius: 4px;
    transition: border-color 0.3s, box-shadow 0.3s;
  }

  /* Estilos cuando se enfoca en el campo de entrada */
  .productos-lista input[type="number"]:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
  }

  /* Estilo para el contenedor de la lista de productos */
  .productos-lista {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  }

  /* Estilo para el título "Inventarios" */
  h3 {
    color: #007BFF;
    font-size: 24px;
    margin-bottom: 20px;
    background: linear-gradient(45deg, #ffffff, #ced4da); /* Fondo degradado */
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  }

  /* Estilo para el select */
  .form-control {
    width: 50%;
    padding: 5px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: #ffffff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    color: #000;
  }

  /* Estilo para los botones */
  .btn-primary {
    background: linear-gradient(45deg, #007BFF, #c0392b); /* Degradado para el botón */
    color: white;
    border: none;
    transition: background 0.3s;
  }

  .productos-lista {
    background: linear-gradient(45deg, #f8f9fa, #ced4da); /* Fondo degradado */
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    color: #000;
  }
  .productos-lista input[type="number"] {
    width: 100%;
    padding: 5px;
    margin: 5px 0;
    border: 1px solid #ced4da;
    border-radius: 4px;
    transition: border-color 0.3s, box-shadow 0.3s;
  }

  /* Estilos cuando se enfoca en el campo de entrada */
  .productos-lista input[type="number"]:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
   
  }

  .productos-lista-rechazados {
  max-height: 350px; /* Establece la altura máxima */
  max-width: 1200px; /* Establece el ancho máximo */
  overflow: auto; /* Muestra el scroll cuando el contenido es mayor que la altura máxima o el ancho máximo */
  background: linear-gradient(45deg, #f8f9fa, #ced4da); /* Fondo degradado */
  padding: 20px; /* Reducí el padding para centrar el contenido */
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  color: #000;
  display: flex; /* Utiliza flexbox */
  align-items: center; /* Centra verticalmente el contenido */
  justify-content: center; /* Centra horizontalmente el contenido */
}

/* Estilos para el encabezado de la tabla */
.productos-lista-rechazados table thead {
  background-color: #343a40; /* Fondo oscuro */
  color: #fff; /* Texto blanco */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Sombra ligera */
}

.productos-lista-rechazados table th {
  padding: 10px;
}

/* Estilos para las celdas de la tabla */
.productos-lista-rechazados table td {
  padding: 8px;
}

/* Bordes en las celdas de la tabla */
.productos-lista-rechazados table td, .productos-lista-rechazados table th {
  border: 1px solid #dee2e6; /* Bordes grises */
}

</style>


<body class="d-flex justify-content-center align-items-center" style="background: linear-gradient(45deg, #3498db, #e74c3c); color: #fff;">
  <form id="formularioInventario" class="mx-auto text-center">
    <div class="container mt-5">
      <h3 class="text-center">Inventarios</h3>
      <div class="row">
        <div class="col-md-6 col-sm-12">
          <div class="form-group">
            <label for="producto">Selecciona la línea</label>
            <select class="form-control mx-auto text-center" name="categoria" id="producto">
              <option value="">Selecciona una línea</option>
              <?php foreach ($data['categorias'] as $row) { ?>
                <option value="<?php echo $row['nombre']; ?>"><?php echo $row['nombre']; ?></option>
              <?php } ?>
            </select>
          </div>
          <div class="form-group">
            <label for="producto">Selecciona el tipo de venta del producto</label>
            <select class="form-control mx-auto text-center" name="tipo" id="tipo" onchange="cargarProductosPorCategoria()" disabled>
              <option value="">Selecciona el tipo</option>
              <?php foreach ($data['medidas'] as $row) { ?>
                <option value="<?php echo $row['nombre']; ?>"><?php echo $row['nombre']; ?></option>
              <?php } ?>
            </select>
            <br>
            <button class="btn btn-primary" type="button" onclick="registrarInventario(); cargarIdsCategoriaYMedida()">Registrar</button>
          </div>
        </div>
        <div class="col-md-4 col-sm-12 mx-auto text-center">
          <input type="hidden" name="categoria" id="categoriaHidden" value="">
          <div id="listaProductos" class="productos-lista"></div>
        </div>
      </div>
    </div>
  </form>
  <input type="hidden" id="id_medidas">
  <input type="hidden" id="id_categorias">

<!-- mostrar los datos rechazados -->

<div class="container mt-5" id="ocultarsinohaydatos">
    <h3 class="text-center">Se han rechazados los siguientes productos</h3>
    <div class="form-group">
        <div class="productos-lista-rechazados" id="productosRechazados">
            <!-- Aquí se mostrarán los productos rechazados -->
        </div>
    </div>
</div>
</body>


<script>
    document.getElementById('producto').addEventListener('change', function () {
        const tipoSelect = document.getElementById('tipo');
        tipoSelect.disabled = this.value === ''; // Deshabilitar si no se selecciona nada
    });

    
</script>

<?php include "views/templates/footer.php"; ?>


