Untitled

<?php
$caracteres = "1234567890";
$desordenada = str_shuffle($caracteres);
$CH = substr($desordenada, 1, 4);
?>

<?php
include ("conexion.php");
$productos = "SELECT codigo,descripcion, precioventa,existencia, imagen FROM productos";
$resultado = mysqli_query($conexion, $productos);
$filas = '';
while ($row = mysqli_fetch_array($resultado)) {
    $filas .= '
    <tr>
        <td><input type="hidden" name="codigo[]" value="'.$row["codigo"].'">'.$row["codigo"].'</td>

        <td><input name="descripcion[]" value="'.$row["descripcion"].'" readonly="readonly"></td>

        <td><img width="100px" src="imagenes/'.$row['imagen'].'"></td>

    <td><input name="existencia[]" value="'.$row["existencia"].'" readonly="readonly"></td>

        <td><input name="precioventa[]" class="clasePrecio form-control" value="'.$row["precioventa"].'" readonly="readonly"></td>
        <td><input name="cantidad[]" class="claseCantidad form-control" type="number" min="0" max="'.$row["existencia"].'" size="1" value="0">
            <input type="button" class="btn_agregar btn btn-primary form-control" value="Agregar">
        </td>
        <td>
            <div class="input-group mb-3">
              <span class="input-group-text border-0 bg-white">$</span>
              <input name="subtotal[]" type="text" class="claseResultado border-0 form-control" placeholder="" value="0">
            </div>
        </td>
    </tr>
';
}
mysqli_free_result($resultado);
?>

<html>

  <head>
    <title>Formulario</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

      <script type="text/javascript">
    function validarRegistro(){
                //nombre
      if (document.form.nombre.value==""||
          document.form.nombre.value==" " ||
          document.form.nombre.value== null                          ) {
            alert("El campo nombre esta vacio");
            return false;
      }
      //direccion
      if (document.form.direccion.value==" "||
          document.form.direccion.value=="") {
            alert("El campo direccion esta vacio")
            return false;
      }

     //email
      if (document.form.email.value==" "||
          document.form.email.value=="") {
            alert("El campo e-mail esta vacio")
            return false;
      }
      if (document.form.email.value.search(/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/)) {
        alert("El campo e-mail no es valido")
        return false;
      }
      //telefono
      if (document.form.telefono.value==" "||
          document.form.telefono.value=="") {
            alert("El campo telefono esta vacio")
            return false;
      }
      document.form.submit();
    }
    </script>

  </head>

  <body>
    <div class="container">

      <form method="post" id="myForm" action="procesarordenbd.php">

          <div class="datosCliente d-none" >
<img style="width: 327px; height: 227px;" alt="" src="JOSTORE.jpeg">&nbsp;
<caption>Datos para la entrega</caption>
         <p>N° de Orden &nbsp; <input type="text" name= "n_orden" id="n_orden" size="1" readonly="readonly" > </p>
<br>
<p >
Nombres:  <input name="nombre" required=""></p>
  <p>
Correo:
 <input name="email" required="" type="email"></p>
<p>
    Dirección: <input name="direccion" required=""></p>
  <br>
  <p>
Telefono: <input name="telefono" required="">
  </p>
  <input name="Submit2" value="Limpiar" type="reset">
          </div>
         <table id="pedido" class="table table-bordered mt-2">
          <caption class="caption-top">Productos a la Venta</caption>
          <thead>
            <tr>
              <th>Código</th>
              <th>Descripción</th>
              <th>Imagen</th>
              <th>Existencia</th>
              <th>Precio Unitario</th>
              <th>Ingrese Cantidad</th>
              <th>Subtotal</th>
            </tr>
          </thead>
          <tbody>
            <?= $filas; ?>
          </tbody>

          <tfoot>
            <td colspan="5"></td>
            <td>Total </td>
            <td>
              <div class="input-group mb-3">
                <span class="input-group-text border-0 bg-white">$</span>
                <input type="text" class="claseTotal border-0 form-control bg-white" disabled value="0">
              </div>
            </td>
          </tfoot>

        </table>


        <button type="sumbit" class="mostrarOrden btn_agregar btn btn-primary form-control">Generar Orden de Compra</button>
      </form>

        <br>
        <br>
    </div>

     <script>
      $(document).ready(function() {
        $('.btn_agregar').on('click', function() {
          let precio = $(this).closest('tr').find('.clasePrecio').val();
          let cantidad = $(this).closest('tr').find('.claseCantidad').val();
          $(this).closest('tr').find('.claseResultado').html("$" + (parseFloat(precio) * parseFloat(cantidad)))
          $(this).closest('tr').find('.claseResultado').val((parseFloat(precio) * parseFloat(cantidad)))
          sumarsubtotales()
        });

        function sumarsubtotales() {
          let total = 0
          $('.claseResultado').each(function() {
            total += parseInt($(this).val())
          })
          $('.claseTotal').val(total)
        }
        $('.mostrarOrden').on('click', function() {

          $('#pedido tr').each(function() {
            let cantidad = $(this).find('.claseCantidad').val()
            if (cantidad == 0) {
              $(this).addClass('d-none')
            }
          })

          let CH = Math.floor(Math.random() * 9999) + 1;
          $('#captiontable').html("Detalles de la orden número: " + CH)
          $('#myForm').append('<input type="hidden" name="numeroOrden" value="' + CH + '">')
          $('.datosCliente').removeClass('d-none')

        })

      });
    </script>
 <script>
    let n_orden = "<?php echo $CH ?>";
    window.addEventListener('load', () => {
    document.getElementById('n_orden').value = n_orden;
  });
</script>

  </body>

</html>