<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> Areas de Producción </h3>
            </div>
            <div class="card-body">
               <!-- COMIENZO DEL FORMULARIO -->
               <form id="editareaform" action="/links/edit-areas" 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-2 mb-3">
                      <label class="font-weight-bold" for="desformula">ID del Area</label> 
                      <div class="input-group">
                        <input class="form-control" type="text" placeholder="" id="id-area"   name="idarea"  value = "{{lista.1.newParam.id_dpto}}"  readonly>                     
                      </div>
                    </div>


                    <div class="col-md-5 mb-3">
                      <label class="font-weight-bold" for="desformula">Descripcion del Area</label> 
                      <div class="input-group">
                        <input class="form-control" type="text" placeholder="Descripcion del Area" id="desarea"   name="descripcion"  value = "{{lista.1.newParam.descripcion}}"  required>                     
                      </div>
                    </div>

                    <div style="display:none" class="col-md-3 mb-3">
                      <label class="font-weight-bold" for="desformula">Calculo de Costos</label> 
                        <select class="custom-select" id="inputGroupSelect01" name= "tipo_costos">
                            <option value="{{lista.1.newParam.tipo_de_costo}}">{{lista.1.newParam.tipo_de_costo}}</option>
                            <option value="general">general</option>
                            <option value="por maquina">por maquina</option>
                       </select>
                    </div>

                      <div class="input-group">
                        <input type="hidden"  style="text-align:right;" class="form-control" placeholder="" name="indextable" >                         
                      </div>

                      <div class="input-group">
                        <input type="hidden"   class="form-control" placeholder="" name="tipo_de_submit"  value=0 >
                        <input type="hidden"   class="form-control" placeholder=""   name="Id_registro"  value = "{{lista.1.newParam.idreg}}" > 
                      </div>

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

                   <div style="display:none" class="form-row">
                            <div class="col-md-6 mb-3">
                               <label class="font-weight-bold" for="cliente">Factor de Comision X Producción</label>
                              <div class="input-group">

                                    <div class="input-group-prepend">
                                        <span class="input-group-text">$</span>
                                    </div>
                                    <input type="number" step="any" name="comisiondolar" value = "{{lista.1.newParam.comision_dolar}}" class="form-control" >  
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">Bs</span>
                                    </div>
                                    <input type="number"  step="any" name="comisionbs"  value = "{{lista.1.newParam.comision_bs}}" class="form-control" >                                         
                              </div>  
                            </div>
                        
                   </div>



                  <div class="form-row">
                            <div class="col-md-2 mb-3">
                            <label class="font-weight-bold" for="cliente">Maquina</label>
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="idmaquina1" name="idmaquina"     onkeypress="return false;">
                                <div class="input-group-append">
                                <button href="#" class="btn btn-secondary"  data-toggle="modal" data-target="#myModal2"  type="button">     <i class="fa fa-search"></i> 
                                </button>
                                </div>  
                            </div>
                            </div>

                            <div class="col-md-6 mb-3">
                            <label class="font-weight-bold" for="descliente">Descripcion</label> 
                            <div class="input-group">
                                <input class="form-control" type="text" placeholder=""  readonly id="desmaquinaid" name="des-maquina" >                     

                                <input type="button" id="btn-ok" value="Agregar maquina" name="agregar"     class="btn btn-outline-primary accept"/>
                            </div>
                            </div>


                  </div>  <!-- FIN DE LABELS E INPUTS DEL LA segunda FILA  -->
               
                 <div class="form-row">

       <div class="row">
<div style="height: 200px;overflow: scroll;">
            <div class="col-lg-12 mx-auto bg-white rounded shadow">                    

                      <div class="col">
                         <table id="tabla123" class="table table-hover"      class="table-responsive"  class="table table-fit" >
                              <thead>
                                 <tr>
                                    <th width="5%" >ID</th>
                                    <th width="80%">Descripcion</th>
                                    <th width="20%">Acciones</th>
                                 </tr>
                              </thead>
                              <tbody  >
                                    {{#each lista}}
                                    {{#each lista_detalle}}
                                    <tr>
                                       <td >{{id_maquina}} </td>
                                       <td>{{descripcion}} </td>
                                       <td class="text-center"> <a class="delete" title="Delete" data-toggle="tooltip"><i class="fas fa-trash"></i></a></td>
                                    </tr>
                                    {{/each}}
                                    {{/each}}
                              </tbody>
                        </table>


                </div>
             </div>               
 </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
         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 addmaquina(value) {
   var id_maquina, descripcion, trHTML;
   id_maquina = document.getElementsByName('idmaquina')[0].value ; 
   descripcion = document.getElementsByName('des-maquina')[0].value ; 
   if (id_maquina.length > 0) {
        trHTML = '<tr> <td width="5%">' + id_maquina + '</td>' + '<td width="85%">' + descripcion +  '</td><td class="text-center"> <a class="delete" title="Delete" data-toggle="tooltip"><i class="fas fa-trash"></i></a></td></tr>  ';
        $('#tabla123').append(trHTML);
        document.getElementsByName('idmaquina')[0].value = '';
        document.getElementsByName('des-maquina')[0].value = ''; 
   }
}


</script>

<script>

$(document).ready(function() { 

 $('form #btn-ok').click(function(e) {
        addmaquina(0);     
 });

$(document).on("click", ".delete", function(){
        $(this).parents("tr").remove();
		$(".add-new").removeAttr("disabled");
   });


});


</script>

<script>

   // Handle form submission event
   $('#editareaform').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', 'tablamaquinas')
                .val(json)
         );
   });






function storeTblValues()
{
    var TableData = new Array();
    var IdsMaq = new Array();
         var table2 = document.getElementById('tabla123');
         $("#tabla123 tbody tr").each(function (index) {
            var campo1 = "";
               $(this).children("td").each(function (index2) {
                  switch (index2) {
                     case 0:
                        campo1 = $(this).text();
                        IdsMaq.push(campo1)
                        break;
                  }

               });

         });

         for(var r = 0; r < table2.rows.length; r++) {
          if (r < (table2.rows.length) - 1) {
            TableData.push({
              "Id_maquina" : IdsMaq[r]
              })                
          }          
        }


    return TableData;
}




</script>

{{>catalogomaquinas }}