<div class="container col d-flex justify-content-center">
   <div class="row">
      <div class="col-lg-12">
         <div class="card shadow-lg p-3 mb-5 bg-white ">
            <div class="card-header">
               <h3> Definición de Materia Prima </h3>
            </div>
            <div class="card-body">
               <!-- COMIENZO DEL FORMULARIO -->
               <form id="createareaform" action="/links/createmateriaprima" method="POST" class="needs-validation" novalidate>
                  <div class="form-row">
                     <!-- LABELS E INPUTS DEL LA PRIMERA FILA  -->

                     <!-- LABELS E INPUTS DE  LA FECHA -->

                    <div class="col-md- mb-3">
                                  <div class="input-group-prepend">
                                        <label class="input-group-text font-weight-bold"  for="inputGroupSelect01">Código</label>
                                        <input type="text"   name="codigo"  required class="form-control" > 
                                  </div>
                    </div>

                    <div class="col-md-5 mb-3">
                                  <div class="input-group-prepend">
                                        <label class="input-group-text font-weight-bold"  for="inputGroupSelect01">Descripcion</label>
                                        <input type="text"   name="descripcion"  required class="form-control" > 
                                  </div>
                     </div>

                     <div class="col-md-2 mb-3">
                                  <div class="input-group-prepend">
                                        <label class="input-group-text font-weight-bold"  for="inputGroupSelect01">Unidad</label>
                                        <input type="text"   name="unidad"  required class="form-control" > 
                                  </div>
                     </div >
                                <div  style="display:none" class="col-md-3 mb-3">
                                  <div class="input-group-prepend">
                                        <label class="input-group-text font-weight-bold"  for="inputGroupSelect01">Costo $</label>
                                        <input type="number"   name="costo" step="any"  value = "0" class="form-control" > 
                                  </div>
                                </div>
                                
                      <div class="input-group">
                        <input type="hidden"   name="tipo_de_submit"  value=0 >
                      </div>
                </div> <!-- FIN DE LABELS E INPUTS DEL LA PRIMERA FILA  -->

                
                  <!-- FIN DE la TERCERA linea ROW-->
                  <div class="form-row">
                     <!-- COMIENZO DE la CUARTA linea ROW-->
                            <div class="col-md-8 mb-3">
                              <div class="input-group">                               

                              </div>
                            </div>
                            <div class="col-md-2 mb-3">
                              <div class="input-group">                               
                               <button class="btn btn-success"  onclick= "cambiarstatus(0)"  type="submit">Save</button>
                              </div>
                            </div>
                            <div class="col-md-2 mb-3">
                              <div class="input-group">                               
                                <button id="btnCrear"    class="btn btn-danger" onclick= "cambiarstatus(1)"  >Close</button>
                              </div>
                            </div>
                  </div>


               </form>
            </div>
         </div>
      </div>
   </div>
</div>


<script>
   function cambiarstatus(valor) {
      document.getElementsByName('tipo_de_submit')[0].value = valor;
   }

</script>

<script>

   (function () {
      'use strict';
      window.addEventListener('load', function () {
         // Fetch all the forms we want to apply custom Bootstrap validation styles to
         var forms = document.getElementsByClassName('needs-validation');
         // Loop over them and prevent submission
         var validation = Array.prototype.filter.call(forms, function (form) {
            form.addEventListener('submit', function (event) {
               if (form.checkValidity() === false) {
                  if (parseInt(document.getElementsByName('tipo_de_submit')[0].value) <= 0) {
                      event.preventDefault();
                      event.stopPropagation();
                  }
               }
               form.classList.add('was-validated');
            }, false);
         });
      }, false);
   })();


</script>




