 <div class="container">
   <div class="row">
      <div class="col-lg-12 mx-auto">
         <div class="card shadow-lg p-3 mb-5 bg-white ">
            <div class="card-header">
               <h3> Ficha Técnica  del equipo </h3>
            </div>
            <div class="card-body">
               <!-- COMIENZO DEL FORMULARIO -->
               <form id="createequipoform" action="/links/edit-maquinas" method="POST" class="needs-validation" enctype="multipart/form-data"  novalidate>
               <div class="form-row">
                   <div class="col-md-2 mb-3">
                       <label class="font-weight-bold" >Datos del Equipo</label>
                   </div>    
               </div>
                  <div class="form-row">
                     <!-- LABELS E INPUTS DEL LA PRIMERA FILA  -->
                        <div class="col-md-2 mb-3">
                            <div class="input-group-prepend">
                                 <label class="input-group-text font-weight-bold" for="inputGroupSelect01">Código</label>
                                 <input type="text"  required name="codigo" class="form-control" value= "{{lista.0.newParam.codigo}}" > 
                            </div>
                        </div>

                        <div class="col-md-6 mb-3">
                            <div class="input-group-prepend">
                                 <label class="input-group-text font-weight-bold" for="inputGroupSelect01">Descripción</label>
                                 <input type="text"  required name="descripcion" class="form-control" value= "{{lista.0.newParam.descripcion}}"> 
                            </div>
                        </div>

                        <div class="col-md-4 mb-3">
                            <div class="input-group-prepend">
                                 <label class="input-group-text font-weight-bold" for="inputGroupSelect01">Serial</label>
                                 <input type="text"   name="serial" class="form-control" value= "{{lista.0.newParam.serial}}" > 
                            </div>
                        </div>


                      <div class="input-group">
                        <input type="hidden"   name="tipo_de_submit"  value=0 >  
                        <input type="hidden"   name="id_reg"  value= "{{lista.0.newParam.idreg}}" >  
                        <input type="hidden"   name="imagen1"  id="imagen1"  value = "{{lista.0.newParam.imagen}}" > 
                        <input type="hidden"   name="imagen2"  id="imagen2"  value = "{{lista.0.newParam.original_img}}" > 

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

                  <div class="form-row">

                        <div class="col-md-4 mb-3">
                            <div class="input-group-prepend">
                                 <label class="input-group-text font-weight-bold" for="inputGroupSelect01">Fecha de compra</label>
                                 <input name="fechacompra" type="date" class="form-control" id="id-fecha"  value= "{{lista.0.newParam.fecha_compra}}">
                            </div>
                        </div>

                        <div class="col-md-4 mb-3">
                            <div class="input-group-prepend">
                                 <label class="input-group-text font-weight-bold" for="inputGroupSelect01">Fabricante</label>
                                 <input type="text"   name="fabricante" class="form-control" value= "{{lista.0.newParam.fabricante}}" > 
                            </div>
                        </div>

                        <div class="col-md-4 mb-3">
                            <div class="input-group-prepend">
                                 <label class="input-group-text font-weight-bold" for="inputGroupSelect01">Proveedor</label>
                                 <input type="text"   name="proveedor" class="form-control" value= "{{lista.0.newParam.proveedor}}"> 
                            </div>
                        </div>


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

                  <div class="form-row">
                        <div class="col-md-6 mb-3">
                            <div class="input-group-prepend">
                                 <label class="input-group-text font-weight-bold" for="inputGroupSelect01">Pagina web</label>
                                 <input type="url"   placeholder="http://example.com" name="paginaweb" pattern="http://.*" size="100" class="form-control"  value= "{{lista.0.newParam.paginaweb}}"validate > 
                            </div>
                        </div>

                        <div class="col-md-6 mb-3">
                            <div class="input-group-prepend">
                                 <label class="input-group-text font-weight-bold" for="inputGroupSelect01">Código del Activo</label>
                                 <input type="text"   name="codigoactivo" class="form-control" value= "{{lista.0.newParam.codigo_del_activo}}"> 
                            </div>
                        </div>
                       
                  </div>

                <div class="form-row">
                    <div class="col-md-12 mb-3">
                      <label class="font-weight-bold" for="funciones">Funciones y usos del equipo</label>
                      <div class="input-group">
                        <textarea class="form-control" id="idobservaciones" rows="3" name="funciones"   >{{lista.0.newParam.funcionyusos}} </textarea>
                      </div>
                     </div>                   
                </div>


                 <div class="form-row">

                           
                </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>

                  <!-- 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>
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]);
}
//*************************

//**************
function cargarimagen1(){
    let  preview = document.getElementById('preview'),
    		image = document.createElement('img');
    image.src = document.getElementsByName('imagen1')[0].value ;
    preview.innerHTML = '';
    preview.append(image);

}
//*****
 $(document).ready(function() {   
      cargarimagen1();
  });    
//*****************
</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>

