<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 Productos </h3>
            </div>
            <div class="card-body">
               <!-- COMIENZO DEL FORMULARIO -->
               <form id="createproductoform" action="/links/createproductos" method="POST" class="needs-validation"  enctype="multipart/form-data"  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">Código</label> 
                      <div class="input-group">
                        <input class="form-control" type="text" placeholder="Codigo" id="codigo-id"   name="codigo"    required>                     
                      </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="Descripcion" required   id="descripcion-id" name="descripcion" >                     
                              </div>
                     </div>

                     <div class="col-md-2 mb-3">
                       <label class="font-weight-bold" for="desformula">Unidad</label> 
                       <div class="input-group">
                         <input class="form-control" type="text" placeholder="unidad" id="unidad-id"   name="unidad"    required>                     
                       </div>
                     </div>
                                <div class=class="col-md-2 mb-3">
                                    <label class="font-weight-bold" >Sub Producto</label>
                                     <div class="input-group-text">
                                        <input type="checkbox"    id= "id-subrpoducto"  name="subproducto">
                                    </div>
                                 
                               </div>
                      <div class="input-group">
                        <input type="hidden"   name="tipo_de_submit"  value=0 >
                        <input type="hidden"   name="subrproducto_chk"  value=0 >
                      </div>
                </div> <!-- FIN DE LABELS E INPUTS DEL LA PRIMERA FILA  -->

                  <div class="form-row">

                            <div class="col-md-4 mb-3">
                                <label class="font-weight-bold"        for="formula">Formula</label>
                                <select name="formula" class="custom-select"     >
                                {{#each lista}}
                                {{#each lista_formulas}}
                                    <option value={{id_formula}}>{{descripcion}}</option>
                                {{/each}}
                                {{/each}}
                                </select>
                            </div>

                            <div class="col-md-4 mb-3">
                                <label class="font-weight-bold"        for="formula">Tipo de Producto</label>
                                <select name="tipo_producto" class="custom-select"     >
                                {{#each lista}}
                                {{#each lista_tipoproducto}}
                                    <option value={{id_tipo}}>{{descripcion}}</option>
                                {{/each}}
                                {{/each}}
                                </select>
                            </div>

                            <div style="display:none" 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" name="comisiondolar" step="any" class="form-control" >  
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">Bs</span>
                                    </div>
                                    <input type="number"  step="any" name="comisionbs" class="form-control" >                                         
                              </div>  
                            </div>

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

                  <div class="form-row">
                     <div class="col-md-4 mb-3">
                               <label class="font-weight-bold" for="descliente">Presentacion del Producto</label> 
                     </div>
                  </div>
                  <div class="form-row">
                                <div class="col-md-2 mb-3">
                                        <label class="font-weight-bold"  for="pesofor">Peso/Volumen</label>
                                        <input type="number"  step="any" name="peso"  value="0" class="form-control" > 
                                </div>
                                <div class="col-md-4 mb-3">
                                        <label class="font-weight-bold"  for="unidadesempaque">Unidades x Empaque</label>
                                        <input type="number"  step="any" name="unidadesxempaque"  value="0" class="form-control" > 
                                </div>

                                <div class="col-md-4 mb-3">
                                        <label class="font-weight-bold"  for="empaqueestuche">Empaque x Estuche</label>
                                        <input type="number"  step="any" name="empaquexestuche"  value="0" class="form-control" > 
                                </div>
                     </div>
                <div class="form-row">
                      <div class="col-md-5 mb-3">
                            <label class="font-weight-bold" for="descliente">imagen</label> 
                            <div class="input-group">
                                <input   name  ="image" id="file" type="file" accept=".jpg, .png, .jpeg, .gif, .bmp, .tif, .tiff|image/*" />
                                    <hr>      
                                    <div id="preview"></div>
                            </div>
                       </div>

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


                
                     
                  </div>

                  </div>
                 


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

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

<script>
document.getElementById("file").onchange = function(e) {
	let reader = new FileReader();
      reader.onload = function(){
    let  preview = document.getElementById('preview'),
    		image = document.createElement('img');
    image.src = reader.result;
    preview.innerHTML = '';
    preview.append(image);
};
 
  reader.readAsDataURL(e.target.files[0]);
}

</script>

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

   function checksubproducto() {
        var checkbox = document.getElementById('id-subrpoducto');
        if (checkbox.checked == true)
        {
            document.getElementsByName('subrproducto_chk')[0].value = 1;
        } else {
            document.getElementsByName('subrproducto_chk')[0].value = 0;
        }      
        
    }
</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) {
               checksubproducto();
               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>




