<div class="container">
   <div class="row">
      <div class="col-lg-12">
         <div class="card shadow-lg p-3 mb-5 bg-white ">
            <div class="card-header">
               <h3> Cierre de Turno </h3>
            </div>
            <div class="card-body">
               <!-- COMIENZO DEL FORMULARIO -->
               <form id="turnoopen01" action="/links/close-turno" 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="fecha">Fecha</label>
                        <input name="fecha" type="date" class="form-control" id="id-fecha" placeholder=""
                           value={{ eldia }} required>
                        <div class="valid-feedback"></div>
                        <div class="invalid-feedback">Complete el campo.</div>
                     </div>

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

                     </div>

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

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

                      
                      <div class="input-group">                       
                        <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}} > 
                        <input type="hidden"  style="text-align:right;" class="form-control" placeholder=""   name="tablamaquinas"  value = "" > 
                      </div>

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

                 <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 style="display:none">ID</th>
                                    <th style="display:none">ID unico</th>
                                    <th   width="10%">Descripcion</th>
                                    <th   width="5%" >#Orden</th>
                                    <th   width="30%" >Producto</th>
                                    <th   style="display:none" >Operador</th>
                                    <th   style="display:none"  >Ayudante 1</th>
                                    <th   style="display:none"  >Ayudante 2</th>
                                    <th   width="10%" >Kg entrante</th>
                                    <th   width="10%" >Cantidad</th>
                                    <th   width="10%" >Peso</th>
                                    <th   width="10%" >Merma</th>
                                    <th   width="10%" >Horas Trab</th>

                                 </tr>
                              </thead>                                 
                              <tbody>
                                    {{#each lista}}
                                    {{#each lista_detalle}}
                                    <tr>
                                       <td style="display:none"></td> 
                                       <td style="display:none">{{id_maquina}} </td>
                                       <td style="display:none">{{id_unico}} </td>
                                       <td>{{maquina}} </td>
                                       <td>{{orden}} </td>
                                       <td>{{descripcion_articulo}} </td>
                                       <td style="display:none" ></td>
                                       <td style="display:none"> </td>
                                       <td style="display:none"></td>
                                       <td> <input type="number"  style="text-align:right;" class="form-control" placeholder="Kg" value = "{{kilosentrantes}}" name="kgentrantes"      ></td>
                                       <td> <input type="number"  style="text-align:right;" class="form-control" placeholder="cantidad" value = "{{cantidad}}" name="cantidad"      ></td>
                                       <td> <input type="number"  style="text-align:right;" class="form-control" placeholder="peso"     value= "{{peso}}" name="peso"        ></td>
                                       <td> <input type="number"  style="text-align:right;" class="form-control" placeholder="merma"     value= "{{merma}}" name="merma"        ></td>
                                       <td> <input type="number"  style="text-align:right;" class="form-control" placeholder="horas"     value= "{{horastrabajadas}}" name="horas"        ></td>
                                    </tr>
                                    {{/each}}
                                    {{/each}}
                              </tbody>
                        </table>
                      </div>
                    </div>
                 </div>

                  <div class="form-row"> <!-- COMIENZO DE LA QUINTA FILA linea ROW-->
                    <div class="col-md-12 mb-3">
                      <label class="font-weight-bold" for="observaciones">Observaciones Generales</label>
                      <div class="input-group">
                        <textarea class="form-control" id="idobservaciones" rows="4" name="observaciones">{{lista.1.newParam.observaciones}}</textarea>
                      </div>
                     </div>
                  </div>  <!-- FIN DE la CUARTA linea ROW-->

                  <!-- FIN DE la TERCERA linea ROW-->

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

                              </div>
                            </div>
                            <div class="col-md-2 mb-3">
                              <div class="input-group">                               
                               <input type="button" id="btn-ok" value="Cerrar" name="register" class="btn btn-success accept"/>
                              </div>
                            </div>

                            <div class="col-md-2 mb-3">
                              <div class="input-group">                               
                               <input type="button" id="btn-save" value="Save" name="register"   class="btn btn-primary"/>
                              </div>
                            </div>


                            <div class="col-md-2 mb-3">
                              <div class="input-group">                               
                                <button id="btnCerrar" class="btn btn-danger" onclick= "cambiarstatus(1)"  >Cancelar</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
         return false;
         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>

   // Handle form submission event
function anexartabla(val) {
      var TableData;
          TableData = storeTblValues()
          TableData = JSON.stringify(TableData);
      var json =  TableData;
      document.getElementsByName('tablamaquinas')[0].value = json;
      $("#turnoopen01").submit();
};

   $('#turnoopen01').on('submit', function(e){
      var TableData;
          TableData = storeTblValues()
          TableData = JSON.stringify(TableData);
      var json =  TableData;
      document.getElementsByName('tablamaquinas')[0].value = json;
   });


function storeTblValues()
{
    var TableData = new Array();
    var IdsMaq = new Array();
    var Idsunicos = new Array();
         var table2 = document.getElementById('tabla123');
         

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

                  }

               });

         });


         for(var r = 0; r < table2.rows.length; r++) {
          if (r < (table2.rows.length) - 1) {
            TableData.push({
              "Id_maquina" : IdsMaq[r]
            , "Id_unico" : Idsunicos[r]  
            , "cantidad" : document.getElementsByName('cantidad')[r].value
            , "peso" : document.getElementsByName('peso')[r].value
            , "merma": document.getElementsByName('merma')[r].value
            , "kgentrantes" : document.getElementsByName('kgentrantes')[r].value
            , "horastrabajdas" : document.getElementsByName('horas')[r].value
                })                
          }          
        }


    return TableData;
}

</script>

<script>

$(document).ready(function() { 

 $('form #btn-ok').click(function(e) {
        cambiarstatus(0);
      //  let $form = $(this).closest('turnoopen01');

        const swalWithBootstrapButtons = Swal.mixin({
            customClass: {
                confirmButton: 'btn btn-success',
                cancelButton: 'btn btn-danger'
            },
            buttonsStyling: false,
        })

  swalWithBootstrapButtons.fire({
            title: 'Estas seguro de Cerrar el Turno?',
            text: "Verifique que este cargado el consumo y las actividades",
          //  type: 'warning',
            showCancelButton: true,
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel',
            reverseButtons: true
        }).then((result) => {
            if (result.value) {
                swalWithBootstrapButtons.fire(
                        'Finished',
                        'Success',
                        'success',
                    );   
                 anexartabla(0);
                // $('#turnoopen01').submit();
            } else if (
                result.dismiss === Swal.DismissReason.cancel
            ) {
                swalWithBootstrapButtons.fire(
                    'Canceled',
                    'realiza las correcciones necesarias',
                   'error'
                );
            }
        });

 });
 //**********************
     $('form #btn-save').click(function(e) {
        cambiarstatus(-1);
        anexartabla(0);
      });

 //******************
});

</script>


