  <div class="container-fluid"> 
        <div class="row">
            <div class="col-lg-12">
    <div class="card shadow-lg p-3 mb-5 bg-white ">
        <div class="card-header"> <h3>Programación de la Producción</h3> </div>
        <div class="card-body">
          <!-- COMIENZO DEL FORMULARIO -->
        <form id="prod01"  name="formplan" action="/links/edit-planificacion" method="POST" class="needs-validation" novalidate>
                  <div class="form-row">
                    <!-- LABELS E INPUTS DEL LA PRIMERA FILA  -->
                    <div class="col-md-1 mb-3">
<div class="input-group-prepend">
                      <label class="font-weight-bold" for="orden">Número</label>
                      <input name="numero_p" type="text" class="form-control" id="numero_p"   readonly   value=  {{lista.0.newParam.proxima_o}} >
</div>                      
                    </div>

                    <div class="col-md-2 mb-3">
<div class="input-group-prepend">
                      <label class="font-weight-bold" for="fecha_i"> desde</label>
                      <input name="fecha_desde" type="date" class="form-control" id="id-fechad" readonly   value={{ lista.0.newParam.fechaI }} required>
</div>                      
                    </div>


                    <div class="col-md-2 mb-3">
<div class="input-group-prepend">
                      <label class="font-weight-bold" for="fecha_h">hasta</label>
                      <input name="fecha_hasta" type="date" class="form-control" id="id-fechah"  readonly value={{ lista.0.newParam.fechaF }} required>
</div>                      
                    </div>

                     <div class="col-md-2 mb-3">
<div class="input-group-prepend">
                            <label class="font-weight-bold"      for="area">Area</label>
                            <select name="area"  id="area" class="custom-select"  readonly onchange="cambio_de_area()" required>
                              <option value={{lista.0.newParam.id_dpto}}>{{lista.0.newParam.nomb_dpto}}</option>
                            </select>
</div>                       
                     </div>


                    <div class="col-md-2 mb-3">
<div class="input-group-prepend">
                      <label class="font-weight-bold"  for="cantidad">Horas</label>
                      <div class="input-group">
                        <input type="number"  style="text-align:right;" class="form-control" value ={{lista.0.newParam.horas_disponibles}} name="horas_disponibles" >                                                                   
                        <input type="number"  style="text-align:right;" class="form-control"  name="horas_programadas" readonly >
                        <button id="btnsumhora" class="btn btn-outline-primary   mt-8" type="button"  onclick="sumar_horas_de_la_semana()" ><i class="fa fa-hourglass" ></i></button> 

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


                      <div class="input-group">
                        <input type="hidden"  class="form-control"  name="tipo_de_submit"  value=0 >
                        <input type="hidden"   class="form-control"  name="tabla_actividades"   >
                        <input type="hidden"  class="form-control"   name="tabla_lotes"   >                       
                        <input type="hidden"  class="form-control"   name="tabledeleted1"   >
                        <input type="hidden"  class="form-control"   name="tabla_lotes_deleted"   >

                        <input type="hidden"  class="form-control"   name="id_unico_actual"   >
                        <input type="hidden"  class="form-control"   name="id_producto_actual"   >
                        <input type="hidden"  class="form-control"   name="id_actividad_actual"   >
                         
                        <input type="hidden"  class="form-control"   name="id_registro" value="{{lista.0.newParam.Id_registro}}"   >
                      </div>


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

                 <!-- COMIENZO DE LABELS E INPUTS DEL LA TERCERA FILA  --> 
             <div class="form-row">
                     <div class="col-md-2 mb-3">
<div class="input-group-prepend">
                            <label class="font-weight-bold"        for="dia">Dia</label>
                            <select name="dia"  id = "dia" class="custom-select"    >
                              <option value=0>Lunes</option>
                              <option value=1>Martes</option>
                              <option value=2>Miércoles</option>
                              <option value=3>Jueves</option>
                              <option value=4>Viernes</option>
                              <option value=5>Sábado</option>
                              <option value=6>Domingo</option>
                            </select>
</div>
                     </div>


                     <div class="col-md-3 mb-3">
<div class="input-group-prepend">
                            <label class="font-weight-bold"        for="actividad">Actividad</label>
                            <select name="actividad" id="actividad"  onchange="muestra_oculta()" class="custom-select"    >
                            </select>
</div>
                        
                     </div>

                     <div  id="es_productiva1"  style="display:none"  class="col-md-3 mb-3">
                        <div class="input-group-prepend">
                                <label class="font-weight-bold"        for="actividad">Producto</label>
                                <select name="producto" id="producto" class="custom-select"    >
                                  <option value=""></option>
                                  {{#each lista}}
                                  {{#each lista_productos}}
                                    <option value={{id_productos}}>{{descripcion}}</option>
                                  {{/each}}
                                  {{/each}}
                                </select>
                         </div>                        
                     </div>

                    <div class="col-md-1 mb-3">
                          <button id="btnAdd" class="btn btn-outline-success   mt-8" type="button"  onclick="Add_new_Items()" ><i class='fas fa-plus-circle'  ></i> </button>                      
                    </div>
                     
             </div>

                 <div class="form-row">
                    <div  > 
                      <div   style="height: 200px;overflow: scroll;" class="col-md-12 mb-3">
                            <table id="tabla123" class="table table-hover"     >
                                  <thead>
                                    <tr>
                                        <th  style="display:none"  >fecha</th>
                                        <th  style="display:none"  >id_unico</th>
                                        <th  style="display:none"  >id_producto</th>
                                        <th  style="display:none"   >id_actividad</th>
                                        <th  width="5%" >Dia</th>
                                        <th  width="20%" >Actividad</th>
                                        <th  width="40%"  >Producto</th>
                                        <th class='text-center' width="10%" >H Inicio</th>
                                        <th class='text-center' width="10%"  >H Final</th>
                                        <th  class='text-center'  width="5%">Acciones</th>
                                    </tr>
                                  </thead>                                                               
                                  <tbody>
                                      {{#each lista}}
                                      {{#each lista_detalle}}
                                       <tr>
                                          <td style="display:none">{{fecha_dia}} </td>
                                          <td style="display:none">{{id_unico}} </td>
                                          <td style="display:none">{{id_producto}} </td>
                                          <td style="display:none">{{id_actividad}} </td>
                                          <td width="5%">{{dia}} </td>
                                          <td width="20%">{{nombre_actividad}} </td>
                                          <td width="40%">{{nombre_producto}} </td>
                                          <td class="text-center">  <input class="form-control" type="time"  name="hinicio" value="{{hora_inicio}}" ></td>
                                          <td class="text-center">  <input class="form-control" type="time"  name="hfin"  value ="{{hora_final}}"></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 class="col-md-3 mb-3">
                        <div style="height: 200px;overflow: scroll;" >
                            <table id="tabla456"  class="table table-hover"   class="table table-responsive" class="table table-fit">
                                  <thead>
                                    <tr>
                                        <th  style="display:none"   >filtro</th>
                                        <th  style="display:none"   >id_producto</th>
                                        <th  style="display:none"   >id_actividad</th>
                                        <th  >#Lote</th>
                                        <th  >Cantidad</th>
                                        <th  style="display:none"   >id_unico</th>
                                        <th  style="display:none"    >nro registro</th>
                                        <th  class='text-center'  width="10%">Acciones</th>
                                    </tr>
                                  </thead>                                                               
                                  <tbody>
                                      {{#each lista}}
                                      {{#each lista_detalle_02}}
                                        <tr>
                                          <td style="display:none" >{{filtro}} </td>
                                          <td style="display:none">{{id_producto}} </td>
                                          <td style="display:none">{{id_actividad}} </td>
                                          <td > <input class="form-control" type="text"  name="num_lote" value ="{{lote}}"></td>
                                          <td >  <input class="form-control" type="number"  name="cantidad_producir" value ="{{cantidad}}"></td>
                                          <td style="display:none" >{{id_unico}} </td>
                                          <td style="display:none">{{nro_registro}} </td>
                                          <td class="text-center"> <a class="delete2" title="Delete" data-toggle="tooltip"><i class="fas fa-trash"></i></a> </td>
                                        </tr>  
                                      {{/each}}
                                      {{/each}}

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

                    <div class="col-md-1 mb-3">
                          <button id="btnAddLotes" class="btn btn-outline-info   mt-8" type="button"  onclick="Nuevo_lote_al_producto()" ><i class='fas fa-plus-circle'  ></i> </button>                      
                    </div>


               </div>

                  <div class="form-row">
                        <div style="display:none" > 
                        <table id="tabledeleted">
                              <thead>
                                 <tr>
                                    <th>id_unico</th>
                                 </tr>
                              </thead>   
                              <tbody>

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

                  <div class="form-row">
                        <div style="display:none" > 
                        <table id="tabla_elim_lotes">
                              <thead>
                                 <tr>
                                    <th>id_unico</th>
                                    <th>nro_registro</th>
                                 </tr>
                              </thead>   
                              <tbody>

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




             <div class="form-row">
                     <!-- COMIENZO DE la CUARTA linea ROW-->

                    <div  class="col-md-3 mb-3">
                         <div class="input-group-prepend">
                                <label class="font-weight-bold"  for="cantidad"> Producto</label>
                                <div class="input-group">
                                  <input type="text"   class="form-control" name="des_producto_9" readonly>         
                                </div>
                         </div>                      
                   </div>

                    <div  class="col-md-5 mb-3">
                         <div class="input-group-prepend">
                                <label class="font-weight-bold"  for="notas"> Notas</label>
                                <div class="input-group">
                                  <textarea class="form-control" id="idnotas" rows="2" name="notas">{{lista.0.newParam.notas}}</textarea>         
                                </div>
                         </div>                      
                   </div>

                            <div class="col-md-1 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>

<!-- COMIENZO DE LABELS E INPUTS DEL LA CUARTA  FILA (TABS) --> 

         </div>

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

  <script src= "/jquery/dist/jquery.js"  ></script> 

  <script>
    $(document).ready(function() { 
      cambio_de_area();
      filtro_default();
      sumar_horas_de_la_semana();
//****************
                    var rows = document.getElementById('tabla123').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
                    for (i = 0; i < rows.length; i++) {
                        rows[i].onclick = function() {
                          //filtrar la tabla detalle
                          var id_unico = this.cells[1].innerHTML.trim() + '-' + this.cells[2].innerHTML.trim() +  '-' + this.cells[4].innerHTML.trim();
                          var des_producto =  this.cells[6].innerHTML

                          document.getElementsByName('id_unico_actual')[0].value = id_unico;
                          document.getElementsByName('id_producto_actual')[0].value = this.cells[2].innerHTML;
                          document.getElementsByName('id_actividad_actual')[0].value = this.cells[3].innerHTML;

                          filtrar_detalle(id_unico, des_producto)
                        }
                    }
//********

   });
  </script>
  
<script>

//**************************************
function filtro_default() {
  var campo1 = '';
  var campo2 ='';
  var campo3 = '';
  var campo4 = '';
  var campo5 = '';
  var id_unico ='';
  var des_producto = '';

         $("#tabla123 tbody tr").each(function (index) {
               $(this).children("td").each(function (index2) {
                  switch (index2) {
                     case 1:
                        campo1 = $(this).text().trim();
                        break;
                     case 2: 
                        campo2 = $(this).text().trim();
                        break;

                     case 3: 
                        campo5 = $(this).text().trim();
                        break;

                     case 4:    
                        campo3 = $(this).text().trim();
                        break;
                     
                     case 6: 
                        campo4 = $(this).text().trim();
                  }
                  
               });
               if (index == 0) {
                           id_unico = campo1 + '-' + campo2 +  '-' + campo3;
                           des_producto =  campo4;                 
                           document.getElementsByName('id_unico_actual')[0].value = id_unico;
                           document.getElementsByName('id_producto_actual')[0].value = campo2;
                           document.getElementsByName('id_actividad_actual')[0].value = campo5;
               }
         });
         filtrar_detalle(id_unico, des_producto)    
}
//*********************************************
function pad(num) {
  return ("0"+num).slice(-2);
}
//***********************************
function diffTime(start,end) {
  var s = start.split(":"), sMin = +s[1] + s[0]*60,
      e =   end.split(":"), eMin = +e[1] + e[0]*60,
   diff = eMin-sMin;
  if (diff<0) { sMin-=12*60;  diff = eMin-sMin }
  var h = Math.floor(diff / 60),
      m = diff % 60;
  //return "" + pad(h) + ":" + pad(m);
  return (diff) 
}  
//*******************************************
function sumar_horas_de_la_semana() {
var hinicio, hfinal
var suma = 0;
var table2 = document.getElementById('tabla123');

         for(var r = 0; r < table2.rows.length; r++) {
          if (r < (table2.rows.length) - 1) {
              hinicio =  document.getElementsByName('hinicio')[r].value ;
              hfinal = document.getElementsByName('hfin')[r].value ;
              suma = suma + parseFloat('0' + diffTime(hinicio,hfinal))             
          }          
        }
        document.getElementsByName('horas_programadas')[0].value = suma/60;
}
//***********************************************
   function cambiarstatus(valor) {
      document.getElementsByName('tipo_de_submit')[0].value = valor;
      anexartabla();
   }
//****************************************************

function muestra_oculta(){
      var tipo = parseInt('0' + $('#actividad option:selected').attr('myTag'));
      var el_div1 = document.getElementById("es_productiva1");
     // var el_div2 = document.getElementById("es_productiva2");
      if (tipo == 0) { //0 se oculta , 1 se muestra
           el_div1.style.display = 'none'; //damos un atributo display:none que oculta el div
       //    el_div2.style.display = 'none'; //damos un atributo display:none que oculta el div
      } else {
        el_div1.style.display = 'block'
     //   el_div2.style.display = 'block'
      }
}
//*****************************************************/
function UltimoIdUnico() {
    var ultimo_id = 0;
    var campo1 = 0;
         $("#tabla123 tbody tr").each(function (index) {
               $(this).children("td").each(function (index2) {
                  switch (index2) {
                     case 1:
                        campo1 = $(this).text().trim();
                        break;
                  }
                  ultimo_id = campo1; 
               });
         });
    return ultimo_id
}
//*******************************
function  sumaFecha (d, fecha)
{
 var Fecha = new Date();
 var sFecha = fecha || (Fecha.getDate() + "/" + (Fecha.getMonth() +1) + "/" + Fecha.getFullYear());
 var sep = sFecha.indexOf('/') != -1 ? '/' : '-';
 var aFecha = sFecha.split(sep);
 var fecha = aFecha[2] + '/'+aFecha[1]+'/'+ aFecha[0];
 fecha= new Date(fecha);
 fecha.setDate(fecha.getDate()+parseInt(d));
 var anno=fecha.getFullYear();
 var mes= fecha.getMonth()+1;
 var dia= fecha.getDate();
 mes = (mes < 10) ? ("0" + mes) : mes;
 dia = (dia < 10) ? ("0" + dia) : dia;
 var fechaFinal = dia+sep+mes+sep+anno;
 return fechaFinal;

 }
 //***********************************
function descomponer_fecha (fecha)  {
   var cad = fecha.split("-");
//*** formato  año/ mes / dia   
   var fecha_f = cad[0] + '/' + cad[1] + '/' + cad[2] ;
   return fecha_f 
}

//****************************************
function descomponer_fecha2 (fecha)  {
   var cad = fecha.split("/");
//*** formato  dia/ mes / año   
   var fecha_f = cad[2] + '/' + cad[1] + '/' + cad[0] ;
   return fecha_f 
}

//*****************************************
function descomponer_fecha3 (fecha)  {
   var cad = fecha.split("/");
//*** formato  año/ mes / dia   
   var fecha_f = cad[2] + '/' + cad[1] + '/' + cad[0] ;
   return fecha_f 
}
//*********************************************

function descomponer_fecha4 (fecha)  {
   var cad = fecha.split("/");
//*** formato  año- mes - dia   
   var fecha_f = cad[0] + '-' + cad[1] + '-' + cad[2] ;
   return fecha_f 
}

 //**************************************
 function buscar_fecha_de_seamana (dia) {
    var fecha_i = document.getElementsByName('fecha_desde')[0].value; 

    var fech_def =  descomponer_fecha (fecha_i)

   
    var aa= "0";

    let days = ['Lunes','Martes','Miércoles', 'Jueves', 'Viernes', 'Sábado', 'Domingo'];

    for (i=0; i<5; i++) {

        let d = new Date(fech_def); 

        dia_temp = days[d.getUTCDay()-1];


        if (dia_temp == dia) {
              // alert('bingo ---' + fech_def)
               aa = descomponer_fecha4 (fech_def);
        }        
        var fech_1 = sumaFecha(1,descomponer_fecha2 (fech_def));
        var fecha_2 = descomponer_fecha3 (fech_1);
        fech_def = fecha_2
        //alert('fecha sumada :  ' +  fech_def )
    }

    return aa;
 }
//*************************************
function Add_new_Items() {
        var trHTML = '';
        var id_producto;
        var id_producto1 = 0;
        var el_producto ='';
        var id_unico = parseInt('0' + UltimoIdUnico()) + 1 ;

        var id_dia = document.getElementById("dia");
        var id_actividad = document.getElementById("actividad");

        var id_actividad1 = id_actividad.options[id_actividad.selectedIndex].value;
        var el_dia = id_dia.options[id_dia.selectedIndex].text;      
        var la_actividad = id_actividad.options[id_actividad.selectedIndex].text;
        
        var tipo_actividad = $('#actividad option:selected').attr('myTag');  

        if (parseInt('0'+ tipo_actividad ) == 1 ) { 
             id_producto = document.getElementById("producto");
             id_producto1 = document.getElementsByName('producto')[0].value ;
             el_producto = id_producto.options[id_producto.selectedIndex].text;
        }
        

        var filtro = id_unico + '-' + id_producto1 + '-' + el_dia;

        var fecha_seleccionada = buscar_fecha_de_seamana(el_dia) ;

        if (fecha_seleccionada =="0" ) {
          toastr.error('El dia Seleccionado No esta dentro del Rango de Fecha Establecido...Verifique', 'Producción COFASA', {timeOut: 5000})
        } else {
            if (la_actividad.trim().length > 0 ) {

                if (parseInt('0'+ tipo_actividad ) == 1 ) {

                    if (el_producto.trim().length>0) {
                          trHTML += '<tr> > <td style="display:none" >' + fecha_seleccionada + '</td> <td style="display:none" >' + id_unico + '</td> <td style="display:none">' + id_producto1 + '</td> <td style="display:none" >' + id_actividad1 +  '</td> <td>' + el_dia + '</td><td width="20%" >' + la_actividad + '</td><td width="70%" >' + el_producto + '</td> <td class="text-center">  <input class="form-control" type="time"  name="hinicio" ></td><td class="text-center">  <input class="form-control" type="time"  name="hfin" ></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('id_unico_actual')[0].value = filtro ;
                          document.getElementsByName('id_producto_actual')[0].value = id_producto1 ;
                          document.getElementsByName('id_actividad_actual')[0].value = id_actividad1;    
                        //***************************************************
                          Add_new_lotes(filtro,id_producto1,id_actividad1)
                          filtrar_detalle(filtro, el_producto)

                    }else {
                         toastr.error('Debe selecionar un Producto de la lista...Verifique', 'Producción COFASA', {timeOut: 5000})
                    }                               

                } else {
                    trHTML += '<tr> > <td style="display:none" >' + fecha_seleccionada + '</td> <td style="display:none" >' + id_unico + '</td> <td style="display:none">' + id_producto1 + '</td> <td style="display:none" >' + id_actividad1 +  '</td> <td>' + el_dia + '</td><td width="20%" >' + la_actividad + '</td><td width="70%" >' + el_producto + '</td> <td class="text-center">  <input class="form-control" type="time"  name="hinicio" ></td><td class="text-center">  <input class="form-control" type="time"  name="hfin" ></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);     
                    filtrar_detalle(filtro, el_producto)
                }

                //******
                    var rows = document.getElementById('tabla123').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
                    for (i = 0; i < rows.length; i++) {
                        rows[i].onclick = function() {
                          //filtrar la tabla detalle
                          var id_unico = this.cells[1].innerHTML.trim() + '-' + this.cells[2].innerHTML.trim() +  '-' + this.cells[4].innerHTML.trim();
                          var des_producto =  this.cells[6].innerHTML.trim();

                          document.getElementsByName('id_unico_actual')[0].value = id_unico;
                          document.getElementsByName('id_producto_actual')[0].value = this.cells[2].innerHTML.trim();
                          document.getElementsByName('id_actividad_actual')[0].value = this.cells[3].innerHTML.trim();
                          
                          filtrar_detalle(id_unico, des_producto)
                        }
                    }
                //********


            }

        }

}
//**************************************************
   function filtrar_detalle(id_unico, producto) {
     var filtro = id_unico;
     document.getElementsByName('des_producto_9')[0].value = producto;
     $("#tabla456 tbody>tr ").filter(function () {
        $(this).toggle($(this).text().indexOf(filtro) > -1)
      });

   }

//**************************************************
function Nuevo_lote_al_producto() {
    var id_unico, id_producto, id_actividad        

        id_unico =  document.getElementsByName('id_unico_actual')[0].value ;
        id_producto = document.getElementsByName('id_producto_actual')[0].value ;
        id_actividad =  document.getElementsByName('id_actividad_actual')[0].value;    
        Add_new_lotes(id_unico,id_producto,id_actividad)
}
//****************************************************
function UltimoNro_registro_lotes(el_filtro) {
    var ultimo_nro = 0;
    var campo1  ='';
    var campo2 = '';
    var filtros = new Array();
    var ultimos_registros = new Array();
    
         $("#tabla456 tbody tr").each(function (index) {
               $(this).children("td").each(function (index2) {
                  switch (index2) {
                     case 0:
                        campo1 = $(this).text().trim();
                        filtros.push(campo1);
                        break;

                     case 6: 
                       campo2 = $(this).text().trim();
                       ultimos_registros.push(campo2)    
                  }                  
               });
         });

         //***************************
            var table2 = document.getElementById('tabla456');
            for(var r = 0; r < table2.rows.length; r++) {
              if (r < (table2.rows.length) - 1) {
                   //alert('arregglo_: ' + filtros[r].trim()  + '  vs  el_filtro que me pasan : ' + el_filtro.trim() )
                   if (filtros[r].trim() == el_filtro.trim() ) {
                      ultimo_nro = ultimos_registros[r];
                   }
              }          
            }
         //****************************


    return ultimo_nro
}

//****************************************************
function Add_new_lotes( id_unico, id_producto, id_actividad) {
        var  trHTML1 = '';
        var filtro = id_unico; 
        var cad = filtro.split("-");
        var id_unico_2 = cad[0];      
        //alert('el filtro que estoy pasando: ' + filtro )
        var nro_registro = parseInt('0' + UltimoNro_registro_lotes(filtro)) + 1 ;
        //alert(filtro)
        trHTML1 += '<tr> > <td  style="display:none" >' + filtro  + '</td> <td  style="display:none"  >' + id_producto + '</td> <td style="display:none" >' + id_actividad + '</td><td > <input class="form-control" type="text"  name="num_lote" ></td><td >  <input class="form-control" type="number"  name="cantidad_producir" ></td> <td style="display:none"  >' + id_unico_2  + '</td>  <td  style="display:none" >' + nro_registro  + '</td> <td class="text-center"> <a class="delete2" title="Delete" data-toggle="tooltip"><i class="fas fa-trash"></i></a> </td></tr>';

       $('#tabla456').append(trHTML1);   
}
//***************************************************
function cambio_de_area()   {
     var id_area = parseInt('0' + document.getElementsByName('area')[0].value);
     var url1 = "/links/actividadesxarea-plan/" + id_area;
         $.ajax({
            url: url1,
            type: "GET",
            dataType: "json",
            success: function (data) {
               var selectInnerHTML= '<select id="actividad"  name="actividad" class="custom-select" >  <option value="" selected="selected"></option>' ;
               $.each(data, function (i, item) {
                    selectInnerHTML += '<option value="' + item.id_actividad + '"  myTag=' + item.es_productiva + ' >' + item.descripcion + '</option>';    
               });
                selectInnerHTML +=  '</select>';
                document.getElementsByName('actividad')[0].innerHTML = selectInnerHTML ;
            },
            error: function (error) {
               console.log(`Error ${error}`);
            }          
         });

}// fin de la funcion

//******************************************************
function RemoveFromTable(tblID, VALUE){
     $("#"+tblID).find("td:contains('"+VALUE+"')").closest('tr').remove();
}

//***************************************************
function addeliminados( id) {
   var id_unico, trHTML;
   id_unico = id; 
   trHTML = '<tr><td>' + id_unico + '</td><td>';
   $('#tabledeleted').append(trHTML);
}

//***************************************************/
function add_lotes_eliminados( id, nro) {
   var id_unico, nro_registro,  trHTML;
   id_unico = id; 
   nro_registro = nro;
   trHTML = '<tr><td>' + id_unico + '</td><td>' + nro_registro + '</td></tr>';
   $('#tabla_elim_lotes').append(trHTML);
}

//*****************************************************
$(document).on("click", ".delete", function(){
      var fila = $(this).closest("tr");
      var id_unico = fila.find('td:eq(1)').text().trim(); 
      var filtro = fila.find('td:eq(1)').text().trim() + '-' + fila.find('td:eq(2)').text().trim() +  '-' + fila.find('td:eq(4)').text().trim();
    
   //*****tabledeleted
   //****Elimina todos los registro asociados en la tabla hijo
        RemoveFromTable('tabla456', filtro)
        addeliminados(id_unico);
   ///****
   
    $(this).parents("tr").remove();
		$(".add-new").removeAttr("disabled");

//*****

});

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

$(document).on("click", ".delete2", function(){
      var fila = $(this).closest("tr");
      var id_unico = fila.find('td:eq(5)').text().trim(); 
      var nro_registro = fila.find('td:eq(6)').text().trim();  

      add_lotes_eliminados( id_unico, nro_registro)

      $(this).parents("tr").remove();
		$(".add-new").removeAttr("disabled");

//*****

});

</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();
             }else {
               //alert('hfkhfkhsdfhaksd')
               anexartabla();

             }
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();


 </script>
 

<script>
//*************************************
function anexartabla_lotes() {
      var TableData;
          TableData = storeTblValues_lotes()
          TableData = JSON.stringify(TableData);
      var json =  TableData;
      document.getElementsByName('tabla_lotes')[0].value = json;

};
//************************************
function anexartabla_eliminados() {
      var TableData;
          TableData = storeTblValues_eliminados()
          TableData = JSON.stringify(TableData);
      var json =  TableData;
      document.getElementsByName('tabledeleted1')[0].value = json;
}
//************************************
function anexartabla_lotes_eliminados() {
      var TableData;
          TableData = storeTblValues_lotes_eliminados()
          TableData = JSON.stringify(TableData);
      var json =  TableData;
      document.getElementsByName('tabla_lotes_deleted')[0].value = json;
   //
}
//**************************************
function anexartabla() {
      var TableData;
          TableData = storeTblValues()
          TableData = JSON.stringify(TableData);
      var json =  TableData;
      document.getElementsByName('tabla_actividades')[0].value = json;
      anexartabla_lotes();
      anexartabla_eliminados();
      anexartabla_lotes_eliminados();
};
//************************
function storeTblValues()
{
    var TableData = new Array();

    var dias = new Array();
    var id_actividades = new Array();
    var fechas = new Array();
    var ids_unicos = new Array();
    var ids_productos = new Array();
    var nombres_productos = new Array();
    var nombres_actividades = new Array();
          
         var table2 = document.getElementById('tabla123');

         $("#tabla123 tbody tr").each(function (index) {
            var campo1 = "";
            var campo2 = "";
            var campo3 = "";
            var campo4 = "";
            var campo5 = "";
            var campo6 = "";
            var campo7 = "";

               $(this).children("td").each(function (index2) {
                  switch (index2) {
                     case 0:
                        campo1 = $(this).text().trim();
                        fechas.push(campo1)
                        break;
                     case 1:
                        campo2 = $(this).text().trim();
                        ids_unicos.push(campo2)
                        break;

                     case 2:
                        campo3 = $(this).text().trim();
                        ids_productos.push(campo3)
                        break;  

                     case 3:
                       campo4 = $(this).text().trim();
                       id_actividades.push(campo4)
                       break;

                    case 4:
                      campo5 = $(this).text().trim();
                      dias.push(campo5)
                      break;

                    case 5: 
                      campo6 = $(this).text().trim();
                      nombres_actividades.push(campo6)
                      break;

                   case 6: 
                     campo7 = $(this).text().trim();
                     nombres_productos.push(campo7)
                     break;
                  }

               });

         });

         for(var r = 0; r < table2.rows.length; r++) {
          if (r < (table2.rows.length) - 1) {
             var hinicio =  document.getElementsByName('hinicio')[r].value ;
             var hfinal = document.getElementsByName('hfin')[r].value ;
             TableData.push({
              "fecha" : fechas[r]
            , "id_unico" : ids_unicos[r]
            , "id_producto" : ids_productos[r]
            , "id_actividad" : id_actividades[r]
            , "dia" : dias[r]
            , "nombre_actividad" : nombres_actividades[r]
            , "nombre_producto" : nombres_productos[r]
            , "hora_inicio" : hinicio
            , "hora_final" : hfinal
                })  ;              
          }          
        }

    return TableData;
}

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

function storeTblValues_lotes()
{
    var TableData = new Array();

    var filtros = new Array();
    var id_actividades = new Array();
    var ids_unicos = new Array();
    var ids_productos = new Array();
    var nros_registros = new Array();
          
         var table2 = document.getElementById('tabla456');

         $("#tabla456 tbody tr").each(function (index) {
            var campo1 = "";
            var campo2 = "";
            var campo3 = "";
            var campo4 = "";
            var campo5 = "";

               $(this).children("td").each(function (index2) {
                  switch (index2) {
                     case 0:
                        campo1 = $(this).text().trim();
                        filtros.push(campo1)
                        break;
                     case 1:
                        campo2 = $(this).text().trim();
                        ids_productos.push(campo2)
                        break;

                     case 2:
                        campo3 = $(this).text().trim();
                        id_actividades.push(campo3)
                        break;  

                     case 5:
                       campo4 = $(this).text().trim();
                       ids_unicos.push(campo4)
                       break;

                    case 6: 
                       campo5 = $(this).text().trim();
                       nros_registros.push(campo5)   
                       break; 
                  }

               });

         });

         for(var r = 0; r < table2.rows.length; r++) {
          if (r < (table2.rows.length) - 1) {
             var lote =  document.getElementsByName('num_lote')[r].value ;
             var cantidad = document.getElementsByName('cantidad_producir')[r].value ;
             TableData.push({
              "filtro" : filtros[r]
            , "id_producto" : ids_productos[r]            
            , "id_actividad" : id_actividades[r]
            , "lote" : lote
            , "cantidad" : cantidad
            , "id_unico" : ids_unicos[r]
            , "nro_registro" : nros_registros[r]
                })                
          }          
        }

    return TableData;
}
//********************************
function storeTblValues_eliminados() {

    var TableData = new Array();
    var ids_unicos = new Array();
         
         var table2 = document.getElementById('tabledeleted');

         $("#tabledeleted tbody tr").each(function (index) {
            var campo1 = "";
               $(this).children("td").each(function (index2) {
                  switch (index2) {
                     case 0:
                        campo1 = $(this).text().trim();
                        ids_unicos.push(campo1)
                        break;
                  }

               });

         });

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

    return TableData;

}
//*************************
function storeTblValues_lotes_eliminados() {

    var TableData = new Array();
    var ids_unicos = new Array();
    var nros_registros = new Array();
         
         var table2 = document.getElementById('tabla_elim_lotes');

         $("#tabla_elim_lotes tbody tr").each(function (index) {
            var campo1 = "";
            var campo2 = "";
               $(this).children("td").each(function (index2) {
                  switch (index2) {
                     case 0:
                        campo1 = $(this).text().trim();
                        ids_unicos.push(campo1)
                        break;
                     case 1 :
                        campo2 = $(this).text().trim();
                        nros_registros.push(campo2)
                        break;
                            
                  }

               });

         });

         for(var r = 0; r < table2.rows.length; r++) {
               if (r < (table2.rows.length) - 1) {
                  TableData.push({
                     "id_unicoD" : ids_unicos[r]
                     ,"nro_registroD" : nros_registros[r]
                     })         
                      
               }          
        }

    return TableData;
}
//***************************
</script>








