<head>
  <script type="text/javascript" src="<?php echo base_url()?>assets/dist/js/EditaClientes.js"></script>
  <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' />

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

 
</head>
<style>
strong{
  font-size: 16px !important;
}
  .borderImage {
    /*border: 1px solid #CCCCCC;*/
    width: 100%;
    height: auto;
    margin-bottom: -15px;
}
hr {
    margin-top: 15px !important;
    margin-bottom: 5px !important;
    width: 100%; 
    height: 2px; 
    background-color: black;
}
/*#actualizarExpediente {
    background-color: #A71929;
}*/
</style>
 <div class="title_right">
 <div class="x_panel"> 
 <center><h1>Modificar Cliente</h1></center>
 </div>
</div>

<div class="col-md-12">
  <?=$menu?>
</div>
<!-- Función que guarda todos los datos ingresados-->

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

<form action="<?php echo base_url();?>clientes/cosmetologo/clienteC/editarenlace/<?=$IdClientes?>" method="POST"  onSubmit="return false" id="frm_editarClienteC" name="frm_editarClienteC">

<div class="col-md-6">
<input type="text" class="form-control" id="IdClientes" name="IdClientes" value="<?=$IdClientes?>" style="display: none;">
  </div>
<div class="col-md-6" >
    <div class="col-md-6">
      <input type="text" class="form-control" value="" style="visibility: hidden;">
    </div>
    <div class="col-md-6" id="actualizarBTN">
    </div>    
    <!-- <button class="btn btn-danger col-md-5 col-xs-12 pull-right  ">Actualizar expediente</button> -->
  </div>

<!-- <div class="col-md-12"> -->
  <!-- <center>
  <ul class="breadcrumb menu">
    <li><a  href="<?php echo base_url();?>agenda/cosmetologo/ListacitasC/enviaDatos/<?=$IdClientes?>"> Agendar</a><span class="divider color-span"></span></li>
    <li><a href="<?php echo base_url();?>caja/Cosmetologo/cajaC/enviaDatos/<?=$IdClientes?>">Vender</a> <span class="divider"></span></li>
    <li><a href="<?php echo base_url();?>expediente/cosmetologo/expedienteC/editarE/<?=$IdClientes?>">Expediente</a> <span class="divider"></span></li>
    <li><a href="<?php echo base_url();?>clientes/cosmetologo/clienteC/historicoCitas/<?=$IdClientes?>">Histórico de citas</a><span class="divider"></span></li>
    <li><a href="<?php echo base_url();?>clientes/cosmetologo/clienteC/historico/<?=$IdClientes?>"> Histórico de compras</a><span class="divider"></span></li>
  </ul>
  </center> -->
<!-- </div> -->
    <div class="col-md-6">
      <label for="name1">Nombre Cliente</label> <i class="fas fa-exclamation-circle"></i></label>
      <input type="text" class="form-control" id="NombreCliente" name="NombreCliente" value="<?=$NombreCliente?>" placeholder ="NOMBRE DEL CLIENTE"  onkeypress="return validaLetra(event)" required="">
    </div>
    <div class="col-md-6">
      <label for="name1">Celular  </label>  <i class="fas fa-exclamation-circle"></i></label>
      <input type="text" class="form-control" id="CelularCliente" maxlength='13' name="CelularCliente" value="<?=$CelularCliente?>" placeholder ="CELULAR" onkeypress="return valida(event)" required="">
    </div>
    <div class="col-md-6">
      <label for="name1">Fecha Nacimiento </label>
      <input type="text" class="form-control date-picker" id="FechaNacimientoCliente" name="FechaNacimientoCliente" placeholder ="FECHA DE NACIMIENTO"  value="<?=date("d-m-Y", strtotime($FechaNacimientoCliente))?>" >
    </div>
    <div class="col-md-6">
      <label for="name1">Edad </label>
      <input type="text" class="form-control" id="EdadCliente" name="EdadCliente" value="<?=$EdadCliente?>"  maxlength='2' placeholder ="EDAD"  onkeypress="return valida(event)" >
    </div>
    <div class="col-md-6">
      <label for="name1">Telefóno</label>
      <input type="text" class="form-control" id="TelefonoCliente" maxlength='13'  name="TelefonoCliente" value="<?=$TelefonoCliente?>" placeholder ="TELEFÓNO"  onkeypress="return valida(event)">
    </div>
    <div class="col-md-6">
      <label for="name1">Correo Electrónico</label>
      <input type="email" class="form-control" id="CorreoCliente" name="CorreoCliente" value="<?=$CorreoCliente?>" placeholder ="CORREO ELECTRÓNICO" onkeyUp="this.value=this.value.toLowerCase();"> 
    </div>
    <div class="col-md-6">
      <label for="name1">Dirección</label>
      <input type="text" class="form-control" id="DireccionCliente" name="DireccionCliente" placeholder ="DIRECCIÓN" value="<?=$DireccionCliente?>">
    </div>
    <div class="col-md-6">
      <label for="name1">Sexo   </label>
      <select id= "SexoCliente" name="SexoCliente" class="form-control"> 
      <option value="MASCULINO" <?php if($SexoCliente=="MASCULINO") echo "selected";?>>MASCULINO</option>
      <option value="FEMENINO" <?php if($SexoCliente=="FEMENINO") echo "selected";?>>FEMENINO</option>
      <option value="OTRO" <?php if($SexoCliente=="OTRO") echo "selected";?>>OTRO</option>
      </select> 
    </div>
    <div class="col-md-6">
      <label for="name1">Estado Civil</label>
      <select id= "EstadoCivil" name="EstadoCivil" class="form-control">
      <option value="SOLTERO" <?php if($EstadoCivil=="SOLTERO") echo "selected";?>>SOLTERO</option>
      <option value="CASADO" <?php if($EstadoCivil=="CASADO") echo "selected";?>>CASADO</option>
      <option value="DIVORCIADO" <?php if($EstadoCivil=="DIVORCIADO") echo "selected";?>>DIVORCIADO</option>
      </select> 
    </div>
    <div class="col-md-6">
      <label for="name1">Ocupación</label>
      <input type="text" class="form-control" id="Ocupacion" name="Ocupacion" placeholder ="OCUPACIÓN"value="<?=$Ocupacion?>">
    </div>
    <div class="col-md-6">
      <label for="name1">Medio Información</label>
      <select id= "MedioInformacion" name="MedioInformacion" class="form-control">
      <option value="FACEBOOK" <?php if($MedioInformacion=="FACEBOOK") echo "selected";?>>FACEBOOK</option>
      <option value="RADIO" <?php if($MedioInformacion=="RADIO") echo "selected";?>>RADIO</option>
      <option value="PÁGINA WEB" <?php if($MedioInformacion=="PÁGINA WEB") echo "selected";?>>PÁGINA WEB</option>
      <option value="VOLANTE" <?php if($MedioInformacion=="VOLANTE") echo "selected";?>>VOLANTE</option>
      <option value="PORPLAZA" <?php if($MedioInformacion=="PORPLAZA") echo "selected";?>>CAPTADO POR PLAZA</option>
      <option value="OTRO" <?php if($MedioInformacion=="OTRO") echo "selected";?>>OTRO</option>
      </select> 
    </div>
     <div class="col-md-6">
        <label for="name1">Recomendado Por:</label>
        <input type="text" class="form-control" id="RecomendadoPor" name="RecomendadoPor" placeholder ="RECOMENDADO POR" value="<?=$RecomendadoPor?>">
      
     </div>
     <div class="col-md-6 centrar">
      <label >Autoriza usar datos</label> <i class="fas fa-exclamation-circle"></i></label></br>
      <label for="name1" >Si &nbsp;&nbsp;&nbsp;</label><input type="radio" name="Autoriza" class="form-check-input" value="Si" <?php if ($Autoriza=="Si"){echo "checked=checked";}?> required="required"/>
      <label for="name1" >No &nbsp;&nbsp;&nbsp;</label><input type="radio" name="Autoriza" class="form-check-input" value="No" <?php if ($Autoriza=='No'){echo "checked=checked";}?> required="required"/>
    </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" id="usuario" required="">
       <option value="">--- Selecciona la opción ---</option>
      <?php foreach ($ReUsuarioC as $ReUsuarioC => $Usuario)    
      echo '<option value="',$ReUsuarioC,'">',$Usuario,'</option>'; ?> </select>
      <br>
    </div>



<?php
if($RutaFirmaDigital != ''){
?>
<div class="col-md-6">
   <!-- <textarea name="" id="" class="form-control" style="visibility: hidden;"></textarea> -->
</div>

<div class="col-md-6">
    <!-- <textarea name="" id="" class="form-control" style="visibility: hidden;"></textarea> -->
    <label style="font-size: 11px;" class="pull-right">*Todo movimiento realizado está siendo registrado o monitoreado. </label>
</div>
<?php
if($RutaUltimaFirmaModificada != ''){
?>
<div class="col-md-12">
<div class="col-md-4"> 
    <center><img id='mostrarFirma' class='borderImage' name='mostrarFirma' src='<?php echo base_url()?><?=$RutaUltimaFirmaModificada?>' style="width: 100%"></center>
    <input class="form-control" id="imagen" name="imagen" value="1" style="display: none;">
    <input type="text" name="firmaDig" id="firmaDig" value="<?=$RutaUltimaFirmaModificada?>" style="display: none;" >
    <textarea name="base64" id="base64" style="display: none;"><?=$RutaUltimaFirmaModificada?></textarea>    
</div>  
</div> 
<?php
}else{
?>
<div class="col-md-12">
<div class="col-md-4">
    <center><img id='mostrarFirma' class='borderImage' name='mostrarFirma' src='<?php echo base_url()?><?=$RutaFirmaDigital?>' style="width: 100%"></center>
    <input class="form-control" id="imagen" name="imagen" value="1" style="display: none;">
    <input type="text" name="firmaDig1" id="firmaDig1" value="<?=$RutaFirmaDigital?>" style="display: none;" >
    <textarea name="base64" id="base64" style="display: none;"><?=$RutaFirmaDigital?></textarea>
</div>  
</div>
<?php
}
?>

<?php
}else{
?>
<div class="col-md-6">
  <button type="button" id="firmar" name="firmar" class="btn btn-primary">INGRESAR FIRMA ELECTRÓNICA</button>
</div>

<div class="col-md-6">
    <!-- <textarea name="" id="" class="form-control" style="visibility: hidden;"></textarea> -->
    <label style="font-size: 11px;" class="pull-right">*Todo movimiento realizado está siendo registrado o monitoreado. </label>
</div>
<div class="col-md-12">
  <div class="col-md-4">
    <center><img id='mostrarFirma' class='col-md-12 borderImage' name='mostrarFirma' style="width: 100%"></center>
    <textarea name="base64" id="base64" style="display: none;"></textarea>
    <input class="form-control" id="imagen" name="imagen" value="" style="display: none;">
  </div>

  <div class="col-md-6">
  </div>
</div>
<?php
}
?>
  <div class="col-md-6">
  </div>

<div class="form-group col-md-12">
<br>
<br>
<div class="col-md-5">
      <a href="javascript:window.history.back()" ><button type="button" class="btn btn-danger col-md-12 col-xs-12 pull-left"> <span class="glyphicon glyphicon-circle-arrow-left"> </span> Regresar</button></a>  
    </div>

    <div class="col-md-2">
  </div>

  <div class="col-md-5">
      <button type="submit" name="editarCosme" id="editarCosme" value="editarenlace" class="btn btn-primary col-md-12 col-xs-12 pull-right"> <span class="glyphicon glyphicon-floppy-disk"> </span> Guardar</button>
  </div>
  
  
</div>
</div>


<!-- <br>
<br>
<br> -->
  <!-- Guarda todos los datos del cliente -->
  <!-- <button type="submit" class="btn btn-primary" name="editar" id="editar" value="editarenlace">Guardar</button> -->
  <!-- Regresa a la vista principal de clietes -->
  <!-- <a href="javascript:window.history.back()"><button type="button" class="btn btn-danger">Cancelar</button></a> -->

<input type="text" class="form-control" id="nombrecompleto" name="nombrecompleto" style="visibility: hidden;">
<select type="text" class="form-control" id="nomcliente" name="nomcliente" style="display: none;"><?php foreach ($ReCliente as $i => $cliente)    
    echo '<option value="',$i,'">',$cliente,'</option>'; ?> </select>
</form>
<!-- </div>
</div> -->

</body>

</html>



<!-- 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 clear 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>
  .actualizarExp{
    background-color: #A71929;
    border-color: #A71929;
    color: #fff;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    text-align: center;
    border-radius: 3px;
        border: 1px solid transparent;
  }
</style>
<script>
window.addEventListener( 'load', function( event )
 {  

  var actualizacion = "<?=$actualizacion?>";
  var Expediente = "<?=$Expediente?>";
  console.log("actualizacion = " + actualizacion);
  console.log("Expediente = " + Expediente);

  if(actualizacion != ""){
    $('#actualizarBTN').html('<button type="button" id="actualizarExpediente" class="actualizarExp btn-block animated flash">Actualizar expediente</button>');

    $('#actualizarExpediente').click(function(){
      console.log('boton');
      location.href="/SM/expediente/cosmetologo/ExpedienteC/editarE/<?= $this->uri->segment(5);?>"
    });

  }else{
    $('#actualizarBTN').html();
  }

  $('#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////////////////////////// -->

