<div id="page-content-wrapper">
<!-- Keep all page content within the page-content inset div! -->
<div class="page-content inset">
<div class="row">
<div class="col-md-12 div-centrado">

<head>
  <!-- Manda a traer el javascript para validar el formulario -->
  <link rel="stylesheet" href="<?php echo base_url().'assets/dist/js/jquery/jquery-ui.css'?>">
  <script type="text/javascript" src="<?php echo base_url()?>assets/dist/js/site.js"></script>
  <link rel="stylesheet" href="<?php echo base_url().'assets/dist/css/validacion.css'?>">
  <link rel='stylesheet' href="<?php echo base_url().'assets/dist/css/styles.css'?>">
	<link rel="stylesheet" type="text/css" href='<?php echo base_url()?>assets/dist/css/styleTable.css' /> 
   <link rel="stylesheet" type="text/css" href='<?php echo base_url()?>assets/dist/css/table.css' />
  <script type="text/javascript">
    var base_url='<?php echo base_url()?>'; 
  </script>

    <!-- ///////////////////////////js y css necesarias para la firma digital -->
  <link rel="stylesheet" href="<?php echo base_url().'assets/plugins/signature_pad-master/docs/css/signature-pad.css'?>">
<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="<?php echo base_url().'assets/plugins/signature_pad-master/docs/css/ie9.css'?>">
  <![endif]-->
<script type="text/javascript" async="" src="<?php echo base_url()?>assets/plugins/signature_pad-master/docs/js/google-analytics-ga.js"></script>
<!-- /////////////////////////// fin de los js y css necesarias para la firma digital -->
<link rel="stylesheet" href="<?php echo base_url().'assets/plugins/select/bootstrap-select.min.css'?>">
		<!-- Latest compiled and minified JavaScript -->
		<script src="<?php echo base_url().'assets/plugins/select/bootstrap-select.min.js'?>"></script>

</head>

<center><h1>Registro Nutricional</h1></center>
<Center>
<?php
    if($Expediente == 'Existe'){
  ?>
 <ul class="breadcrumb menu">
    <!-- Menu que direcciona a los  Productos internos, adicionales y al Público-->
<li><a href="<?php echo base_url();?>expediente/cosmetologo/ExpedienteC/editarE/<?= $this->uri->segment(5);?>"> Histórico General</a><span class="divider"></span></li>
<li><a href="<?php echo base_url();?>expediente/cosmetologo/ExpedienteC/Corporal/<?= $this->uri->segment(5);?>">Histórico Corporal</a> <span class="divider"></span></li>
<li><a href="<?php echo base_url();?>expediente/cosmetologo/ExpedienteC/EELigth/<?= $this->uri->segment(5);?>">Histórico E-Ligth</a> <span class="divider"></span></li>
<li><a href="<?php echo base_url();?>expediente/cosmetologo/ExpedienteC/EFacial/<?= $this->uri->segment(5);?>"> Histórico Facial</a><span class="divider"></span></li>
<li><a href="<?php echo base_url();?>expediente/cosmetologo/ExpedienteC/EPestanas/<?= $this->uri->segment(5);?>"> Histórico E.Pestañas</a><span class="divider"></span></li>
<li><a href="<?php echo base_url();?>expediente/cosmetologo/ExpedienteC/Relajante/<?= $this->uri->segment(5);?>"> Histórico Relajante</a><span class="divider"></span></li>
<li><a href="<?php echo base_url();?>expediente/cosmetologo/ExpedienteC/Nutricional/<?= $this->uri->segment(5)?>"> Histórico Nutricional</a><span class="divider"></span></li>
</ul>
<?php
}else{
?>
 <ul class="breadcrumb menu">
    <!-- Menu que direcciona a los  Expedientes-->
<li><a href="<?php echo base_url();?>expediente/cosmetologo/ExpedienteF/editarE/<?= $this->uri->segment(5)?>"> Histórico General</a><span class="divider"></span></li>
<li><a href="<?php echo base_url();?>expediente/cosmetologo/ExpedienteF/EPestanas/<?= $this->uri->segment(5)?>"> Histórico E.Pestañas</a><span class="divider"></span></li>
<li><a href="<?php echo base_url();?>expediente/cosmetologo/ExpedienteF/Nutricional/<?= $this->uri->segment(5)?>"> Histórico Nutricional</a><span class="divider"></span></li>
</ul>
<?php
}
?>
</Center>

</div><!--<div class="col-md-12 div-centrado">-->

<div class="col-md-8 div-centrado">
	<form action="<?php echo base_url();?>expediente/cosmetologo/ExpedienteC/guardarNutricion/<?=$id?>" method="POST" onSubmit="return false" id="frm_agregarNutricion">
    <div class="form-group">

      <!-- /////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
    <div class="col-md-6">
      <label for="name1">Talla <i class="fas fa-exclamation-circle"></i></label>
      <input type="text" class="form-control" id="txt_Talla" name="txt_Talla" placeholder="Talla" required="" onkeypress="return validaPunto(event)">
    </div>
    <div class="col-md-6">
      <label for="name1">Peso <i class="fas fa-exclamation-circle"></i></label>
      <input type="text" class="form-control" id="txt_Peso" name="txt_Peso" placeholder="Peso"  required="" onkeypress="return validaPunto(event)">
    </div>
<!-- /////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
    <div class="col-md-6">
      <label for="name1">IMC <i class="fas fa-exclamation-circle"></i></label>
      <input type="text" class="form-control" id="txt_IMC" name="txt_IMC" placeholder="IMC" required="" onkeypress="return validaPunto(event)">
    </div>
    <div class="col-md-6">
      <label for="name1">Cintura <i class="fas fa-exclamation-circle"></i></label>
      <input type="text" class="form-control" id="txt_Cintura" name="txt_Cintura" placeholder="Cintura"  required="" onkeypress="return validaPunto(event)">
    </div>
<!-- /////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
    <div class="col-md-6">
      <label for="name1">Cadera <i class="fas fa-exclamation-circle"></i></label>
      <input type="text" class="form-control" id="txt_Cadera" name="txt_Cadera" placeholder="Cadera" required="" onkeypress="return validaPunto(event)">
    </div>
    <div class="col-md-6">
      <label for="name1">Grasa Corporal </label>
      <input type="text" class="form-control" id="txt_GrasaCorporal" name="txt_GrasaCorporal" placeholder="Grasa Corporal" onkeypress="return validaPunto(event)">
    </div>
<!-- /////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
    <div class="col-md-6">
      <label for="name1">Masa Muscular </label>
      <input type="text" class="form-control" id="txt_MasaMuscular" name="txt_MasaMuscular" placeholder="Masa Muscular" onkeypress="return validaPunto(event)">
          </div>
    <div class="col-md-6">
      <label for="name1">Grasa Visceral </label>
      <input type="text" class="form-control" id="txt_GrasaVisceral" name="txt_GrasaVisceral" placeholder="Grasa Visceral" onkeypress="return validaPunto(event)">
    </div>
<!-- /////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
    <div class="col-md-6">
      <label for="name1">Recomendaciones Adicionales </label>
      <textarea class="form-control" rows="2" id="txt_Recomendaciones" name="txt_Recomendaciones" placeholder="Recomendaciones" ></textarea>
    </div>
        <div class="col-md-6">
      <label for="name1" >Cosmetóloga(o) <i class="fas fa-exclamation-circle"></i></label>
       <select class="form-control" name="usuario" required="">
        <option value="">--- Selecciona la opción ---</option>
       <?php foreach ($ReUsuarioC as $i => $Usuario)    
       echo '<option value="',$i,'">',$Usuario,'</option>'; ?> </select>
       <br>
   </div>
<!-- /////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
<!-- /////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->

    <div class="col-md-6">
      <br>
      <button type="button" id="firmar" name="firmar" class="btn btn-primary">INGRESAR FIRMA ELECTRÓNICA</button>
    </div>

    <div class="col-md-6">
      <br>
        <textarea name="" id="" class="form-control" style="visibility: hidden;"></textarea>
    </div>

    <div class="col-md-12">
      <div class="col-md-4">
         <center><img id='mostrarFirma' class='col-md-12 col-sm-12 col-xs-12' name='mostrarFirma' style="width: 100%"></center>
        <input class="form-control" id="imagen" name="imagen" value="" style="display: none;">
        <textarea name="base64" id="base64" style="display: none;"></textarea>
      </div>
    </div>


    </div>

    <input type="text" class="form-control oculto">
		  <div class="form-group col-md-12"> 
		      <button type="submit" id="guardar" class="btn btn-primary col-md-4 col-xs-5 pull-right"> <span class="glyphicon glyphicon-floppy-disk"> </span> Guardar</button>
		      <a href="javascript:window.history.back()" ><button type="button" class="btn btn-danger col-md-4 col-xs-5 pull-left"> <span class="glyphicon glyphicon-circle-arrow-left"> </span> Regresar</button></a>  
		  </div>

		    <input type="text" class="form-control" id="name1" name="txt_idEx" placeholder="Productos" value="<?=$this->uri->segment(5)?>" readonly style="visibility:hidden;">
    <input type="text" class="form-control" id="ExpedienteExiste" name="ExpedienteExiste" placeholder="Productos" value="<?=$Expediente?>" readonly style="visibility:hidden;">
    
	</form>



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


<!-- Modal para ingresar la firma digital -->
<div class="modal fade" id="modal-firma" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog ">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span></button>
      </div>

       <div id="signature-pad" class="modal-body signature-pad" style="height: 80vh; width: 100%;">
          <div class="signature-pad--body">
          <canvas></canvas>
          </div>
          <div class="signature-pad--footer">
            <div class="description">Ingrese su firma</div>
            <div class="signature-pad--actions">
            <div>
            <button type="button" class="button clear btn btn-danger" data-action="clear">LIMPIAR</button>
            <!-- <button type="button" class="button" data-action="change-color">Change color</button> -->
            <!-- <button type="button" class="button" data-action="undo">Undo</button> -->
            </div>
            <div>
            <button type="button" class="button save btn btn-primary" data-action="save-png">GUARDAR</button>
            <!-- <button type="button" class="button save" data-action="save-jpg">Save as JPG</button> -->
            <!-- <button type="button" class="button save" data-action="save-svg">Save as SVG</button> -->
            </div>
            </div>
          </div>
        </div> 

        

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

<script>
window.addEventListener( 'load', function( event )
 {  

var id="<?=$id?>";
var Expediente=$('#ExpedienteExiste').val();
// console.log('Expediente = ' + Expediente);

  $('#frm_agregarNutricion').submit(function(event){
  event.preventDefault(); 

var valorImagen = $('#imagen').val();

if(valorImagen == ""){
    swal({
      title: "¡No ha ingresado la firma electrónica!",
      text:"¿Desea continuar?",
      icon: "warning",
      buttons: ["Cancelar", "Aceptar"],
      confirm: true,
    })
    .then((confirm) => {
      if(confirm){
        $.ajax({                        
              type: "POST",    
              url: $(this).attr('action'),
              data: $(this).serialize(),
              success: function(result){
              // console.log("result= " + result);
              if(result == '1'){
                swal("Datos guardados correctamente", "", "success")
                .then((value) => {
                  location.href="/SM/expediente/cosmetologo/ExpedienteC/Nutricional/"+id
                  });
              }
              if(result == '0'){
                swal("Los datos no pudieron ser guardados correctamente", "", "warning")
                .then((value) => {
                  location.href="/SM/expediente/cosmetologo/ExpedienteC/Nutricional/"+id
                  });
              }                                  
              },error:function(jqXHR, textStatus, errorThrown){
                console.log('error::' + errorThrown);
              }
          });
      }
    });
}else{
     
  $.ajax({                        
        type: "POST",    
        url: $(this).attr('action'),
        data: $(this).serialize(),
        success: function(result){
        // console.log("result= " + result);
        if(result == '1'){
          swal("Datos guardados correctamente", "", "success")
          .then((value) => {
            location.href="/SM/expediente/cosmetologo/ExpedienteC/Nutricional/"+id
            });
        }
        if(result == '0'){
          swal("Los datos no pudieron ser guardados correctamente", "", "warning")
          .then((value) => {
            location.href="/SM/expediente/cosmetologo/ExpedienteC/Nutricional/"+id
            });
        }                                  
        },error:function(jqXHR, textStatus, errorThrown){
          console.log('error::' + errorThrown);
        }
    });
              
}
  });

    $('#firmar').click(function(){
  $("#modal-firma").on("shown.bs.modal", function () { 
  resizeCanvas();
      }).modal('show');
});


 });
</script>
<!-- ////////////////////////// js necesarios para la firma digital////////////////////////// -->
  <script src="<?php echo base_url()?>assets/plugins/signature_pad-master/docs/js/signature_pad.umd.js"></script>
  <script src="<?php echo base_url()?>assets/plugins/signature_pad-master/docs/js/app.js"></script>
  <!-- ////////////////////////// fin de los js necesarios para la firma digital////////////////////////// -->