<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>
<style>
  #firmar{
    color: #fff;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    text-align: center;
    border-radius: 3px;
        border: 1px solid transparent;
  }
</style>
<center><h1>Tratamiento Corporal</h1></center>
<Center>
 <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>
</Center>

<div class="col-md-8 div-centrado">

<form action="<?php echo base_url();?>expediente/cosmetologo/ExpedienteC/guardarCorporal/<?=$id?>" method="POST" onSubmit="return false" id="frm_agregarCorporal">

 <input type="text" class="form-control" id="tipoVenta" name="tipoVenta" placeholder="" value="<?=$tipoVenta?>" style="display: none;">
    <input type="text" class="form-control" id="IdServicio" name="IdServicio" placeholder="" value="<?=$IdServicio?>" style="display: none;">

     <div class="form-group">
    <div class="col-md-6">
      <label for="name1">Sesión <i class="fas fa-exclamation-circle"></i></label>
      <?php
      if($tipoVenta != ""){
      ?>
          <input type="text" class="form-control" id="txt_sesion" name="txt_sesion" placeholder="" value="<?=$numSesion?>"  readonly="readonly">
      <?php
      }else{
      ?>
          <input type="text" class="form-control" id="txt_sesion" name="txt_sesion" placeholder="N°. Sesión" onkeypress="return valida(event)" value="" maxlength="2" required="">
      <?php
      }
      ?>
      
    </div>
    <div class="col-md-6">
     <label for="name1">Tratamiento <i class="fas fa-exclamation-circle"></i></label>
     <input type="text" class="form-control" id="txt_tratamientoVenta" name="txt_tratamientoVenta" placeholder="Tratamiento" value="<?=$nameServicio?>" style="display: none;">
     <input type="text" class="form-control" id="txt_tratamientoSeleccionado" name="txt_tratamientoSeleccionado" placeholder="Tratamiento" value="<?=$nameServicio?>" required="">
    </div>

     <div class="col-md-6">
        <label for="name1">Aparato <i class="fas fa-exclamation-circle"></i></label>
        <input type="text" class="form-control" id="Aparato" name="Aparato" placeholder="Aparato" required="">
      </div>
      <div class="col-md-6">
        <label for="name1">Potencia <i class="fas fa-exclamation-circle"></i></label>
        <input type="text" class="form-control" id="Potencia" name="Potencia" placeholder="Potencia" required="" onkeypress="return valida(event)">
      </div>

      <div class="col-md-6">
        <label for="name1">Zona <i class="fas fa-exclamation-circle"></i></label>
        <input type="text" class="form-control" id="Zona" name="Zona" placeholder="Zona" required="" onkeypress="return validaM(event)">
      </div>
      <div class="col-md-6">
        <label for="name1">Tiempo <i class="fas fa-exclamation-circle"></i></label>
        <input type="text" class="form-control" id="Tiempo" name="Tiempo" placeholder="Tiempo" required="">
      </div>

      <div class="col-md-6">
        <label for="name1">Disparos <i class="fas fa-exclamation-circle"></i></label>
        <input type="text" class="form-control" id="Disparos" name="Disparos" placeholder="Disparos" required="" onkeypress="return valida(event)">
      </div>

    <div class="col-md-6">
      <label for="name1">Espalda/Cm</label>
      <input type="text" class="form-control" id="txt_espalda" name="txt_espalda" placeholder="Espalda" onkeypress="return validaPunto(event)">
    </div>
    <div class="col-md-6">
      <label for="name1">Busto/Cm</label>
      <input type="text" class="form-control" id="txt_busto" name="txt_busto" placeholder="Busto" onkeypress="return validaPunto(event)">
    </div>
    <div class="col-md-6">
      <label for="name1">Abdomen/Cm</label>
      <input type="text" class="form-control" id="txt_abdomen" name="txt_abdomen" placeholder="Abdomen" onkeypress="return validaPunto(event)">
    </div>
    <div class="col-md-6">
      <label for="name1">Cintura/Cm</label>
      <input type="text" class="form-control" id="txt_cintura" name="txt_cintura" placeholder="Cintura" onkeypress="return validaPunto(event)">
    </div>
    <div class="col-md-6">
      <label for="name1">Cintura Alta/Cm</label>
      <input type="text" class="form-control" id="txt_calta" name="txt_calta" placeholder="Cintura Alta" onkeypress="return validaPunto(event)">
    </div>
    <div class="col-md-6">
      <label for="name1">Cintura Baja/Cm</label>
      <input type="text" class="form-control" id="txt_cbaja" name="txt_cbaja" placeholder="Cintura Baja" onkeypress="return validaPunto(event)">
    </div>
    <div class="col-md-6">
      <label for="name1">Pierna Derecha/Cm</label>
      <input type="text" class="form-control" id="txt_pderecha" name="txt_pderecha" placeholder="Pierna Derecha" onkeypress="return validaPunto(event)">
    </div>
    <div class="col-md-6">
      <label for="name1">Pierna Izquiera/Cm</label>
      <input type="text" class="form-control" id="txt_pizquierda" name="txt_pizquierda" placeholder="Pierna Izquierda" onkeypress="return validaPunto(event)">
    </div>
    <div class="col-md-6">
      <label for="name1">Brazo Derecho/Cm</label>
      <input type="text" class="form-control" id="txt_bderecho" name="txt_bderecho" placeholder="Brazo Derecho" onkeypress="return validaPunto(event)">
    </div>
    <div class="col-md-6">
      <label for="name1">Brazo Izquierdo/Cm</label>
      <input type="text" class="form-control" id="txt_bizquierdo" name="txt_bizquierdo" placeholder="Brazo Izquierdo" onkeypress="return validaPunto(event)">
    </div>
    <div class="col-md-6">
      <label for="name1">Observaciones <i class="fas fa-exclamation-circle"></i></label>
      <textarea class="form-control" rows="2" id="txt_observaciones" name="txt_observaciones" placeholder="Descripción" required=""></textarea>
    </div>
    <div class="col-md-6">
      <label for="name1">Diagnóstico <i class="fas fa-exclamation-circle"></i></label>
      <textarea class="form-control" rows="2" id="txt_diagnostico" name="txt_diagnostico" placeholder="Diagnóstico" required=""></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 $ReUsuarioC => $Usuario)    
      echo '<option value="',$ReUsuarioC,'">',$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="/SM/expediente/cosmetologo/ExpedienteC/Corporal/<?= $this->uri->segment(5);?>" ><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>
  <!-- <button type="submit" class="btn btn-primary">Guardar</button> -->
   <!-- <a href="javascript:window.history.back()"><button type="button" class="btn btn-danger">Cancelar</button></a> -->
  <input type="text" class="form-control" id="name1" name="txt_idEx" placeholder="Productos" value="<?=$this->uri->segment(5)?>" readonly style="visibility:hidden;">

</form>
</div><!--<div class="modal-dialog modal-lg div-centrado">-->

</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>
<style>
 .ui-autocomplete {
     max-height: 400px;
     overflow-y: auto;
     /* prevent horizontal scrollbar */
     overflow-x: hidden;
 } 
 * html .ui-autocomplete {
     height: 400px;
 }

.fixed-height {
      padding: 1px;
      /*max-height: 300px;*/
      overflow: auto;
    }
</style>
<script>
window.addEventListener( 'load', function( event )
 {  
  $("#txt_tratamientoSeleccionado").autocomplete({
            source: base_url+"expediente/franquiciatario/ExpedienteF/serviciosCorporal/?",
   
            select: function (event, ui) {                    
                       $('[name="txt_tratamientoSeleccionado"]').val(ui.item.label);
                     }
               });
var id="<?=$this->uri->segment(5)?>";


$('#frm_agregarCorporal').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/Corporal/"+id
                  });
              }
              if(result == '0'){
                swal("Los datos no pudieron ser guardados correctamente", "", "warning")
                .then((value) => {
                  location.href="/SM/expediente/cosmetologo/ExpedienteC/Corporal/"+id
                  });
              }
              if(result == 'ya existe'){
              swal("La sesion ya está registrada", "registre otra sesion", "warning")
              .then((value) => {
                location.href="/SM/expediente/cosmetologo/ExpedienteC/Corporal/"+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/Corporal/"+id
            });
        }
        if(result == '0'){
          swal("Los datos no pudieron ser guardados correctamente", "", "warning")
          .then((value) => {
            location.href="/SM/expediente/cosmetologo/ExpedienteC/Corporal/"+id
            });
        }
        if(result == 'ya existe'){
              swal("La sesion ya está registrada", "registre otra sesion", "warning")
              .then((value) => {
                location.href="/SM/expediente/cosmetologo/ExpedienteC/Corporal/"+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////////////////////////// -->
