<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> Requisiscion de Materia Prima  </h3>
            </div>
            <div class="card-body">
               <!-- COMIENZO DEL FORMULARIO -->
               <form id="requisicionplan" action="/links/edit-materiaprimaplan" method="POST" class="needs-validation" novalidate>
                  <div class="form-row">
                     <!-- LABELS E INPUTS DEL LA PRIMERA FILA  -->
                            <div class="col-md-2 mb-3">
                                <label class="font-weight-bold" for="desformula"># Orden</label> 
                                <div class="input-group">
                                    <input class="form-control" type="text" placeholder="" id="orden"   name="orden" readonly  value = "{{lista.1.newParam.Orden}}" >                     
                                </div>
                            </div>

                            <div class="col-md-2 mb-3">
                                <label class="font-weight-bold" for="fecha">Fecha</label>
                                <input name="fecha" type="text" class="form-control" id="id-fecha" placeholder=""  readonly  value="{{lista.1.newParam.Fecha}}" >
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="font-weight-bold" for="desformula">Producto</label> 
                                <div class="input-group">
                                    <input class="form-control" type="text" placeholder="" id="idproducto"   name="producto" readonly  value = "{{lista.1.newParam.Producto}}">                     
                                </div>
                            </div>

                            <div class="input-group">
                                <input type="hidden"  name="idregistro" value= {{lista.1.newParam.idreg}} >
                                <input type="hidden"  style="text-align:right;" class="form-control" placeholder="" name="indextable" >                         
                                <input type="hidden"  style="text-align:right;" class="form-control" placeholder="" name="tipo_de_submit"  value=0 >
                            </div>

                            <div class="input-group">
                                <input type="hidden"  style="text-align:right;" class="form-control" placeholder="" name="inputtabladetalle" > 
                                <input type="hidden"  style="text-align:right;" class="form-control" placeholder=""   name="Id_registro"  value = {{lista.1.newParam.idreg}} > 
                            </div>
                  </div> <!-- FIN DE LABELS E INPUTS DEL LA PRIMERA FILA DEL FORMULARIO   -->

                  <div class="form-row"> <!-- LABELS E INPUTS DEL LA SEGUNDA FILA  -->
                            <div class="col-md-3 mb-3">
                                <label class="font-weight-bold" for="desformula">Cantidad</label> 
                                <div class="input-group">
                                    <input class="form-control" type="text" placeholder="" id="idcabtidad"   name="cantidad-plan" readonly  value = "{{lista.1.newParam.Cantidad}}">                     
                                </div>
                            </div>

                            <div class="col-md-3 mb-3">
                                <label class="font-weight-bold" for="desformula">Total Kg</label> 
                                <div class="input-group">
                                    <input class="form-control" type="text" placeholder="" id="idpeso"   name="peso" readonly  value = "{{lista.1.newParam.Peso}}">                     
                                </div>
                            </div>

                            <div class="col-md-4 mb-3">
                                <label class="font-weight-bold" for="desformula">Factor de Variación por Merma</label> 
                                <div class="input-group">
                                    <input class="form-control" type="text" placeholder="" id="idfactormerma"   name="factormerma" readonly  value = "{{lista.1.newParam.Factor_merma}}">                     
                                </div>
                            </div>

                  </div> <!-- FIN DE LABELS E INPUTS DEL LA SEGUNDA FILA DEL FORMULARIO   -->

                 <div class="form-row">
                    <div style="height: 400px;overflow: scroll;"> 
                      <div class="col">
                         <table id="tabla123" class="table table-hover"   class="table table-responsive" class="table table-fit" >
                              <thead>
                                 <tr>
                                    <th style="display:none" >Rowid</th>
                                    <th   width="20%" >ID</th>
                                    <th   width="35%">Materia Prima</th>
                                    <th   width="20%" >Cantidad</th>
                                 </tr>
                              </thead>
                              <tbody>
                                    {{#each lista}}
                                    {{#each lista_detalle}}
                                    <tr>
                                       <td style="display:none"   > {{RowId}} </td> 

                                       <td> <div class="input-group"> <input type="text" class="form-control" placeholder="" name="idmateriaprima"  value= "{{id_materiaprima}}"  > <div class="input-group-append"> <button href="#" class="btn btn-secondary"  data-toggle="modal" data-target="#modalPlanes" type="button"> <i class="fa fa-search"></i> </button> </div> </div> </td>
                                                                            
                                       <td> <input class="form-control" type="text" placeholder="" id="id-materiaprima"  name="des-materiaprima" readonly  value =  "{{descripcionMP}}"  > </td>

                                       <td> <input type="number"  style="text-align:right;" class="form-control" placeholder="" value = "{{cantidad}}" name="cantidad-mp"   ></td>

                                    </tr>
                                    {{/each}}
                                    {{/each}}

                              </tbody>
                        </table>
                      </div>
                    </div>

                 </div>
                  <!-- 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 src="/jquery/dist/jquery.js"></script>

<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
         cargarvalorestabla(0);
         
         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>


<script>

//************************
function cargarvalorestabla(value) {
   var table2 = document.getElementById('tabla123');
    for(var r = 0; r < table2.rows.length; r++) {
         var x = table2.rows[r].cells;
          x[0].innerHTML =   r - 1 ;  // asigno el RowId
          table2.rows[r].addEventListener('click', function() {
              var id_materiaprima = this.cells[0].innerHTML;
              document.getElementsByName('indextable')[0].value = id_materiaprima ;
          });
     }
}


//*****************************

</script>

<script>

   // Handle form submission event
   $('#requisicionplan').on('submit', function(e){
      var form = this;
      
      var TableData;
          TableData = storeTblValues()
          TableData = JSON.stringify(TableData);
          var json =  TableData;

      // Create a hidden element
       $(form).append(
             $('<input>')
                .attr('type', 'hidden')
                .attr('name', 'tablamateriaprima')
                .val(json)
         );
   });






function storeTblValues()
{
    var TableData = new Array();
    var IdsMaq = new Array();
    var table2 = document.getElementById('tabla123');
         
         for(var r = 0; r < table2.rows.length; r++) {
          if (r < (table2.rows.length) - 1) {
            var id_mp = document.getElementsByName('idmateriaprima')[r].value ;
            var cantida_mp = document.getElementsByName('cantidad-mp')[r].value ;
            var descrip = document.getElementsByName('des-materiaprima')[r].value ;
            TableData.push({
              "Id_materiaprima" : id_mp
            , "cantidad" : cantida_mp
            , "descripcion" : descrip
                })                
          }          
        }


    return TableData;
}




</script>

{{>catalogomateria-prima}}