<div id="page-content-wrapper">
<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 -->
  <script type="text/javascript" src="<?php echo base_url()?>assets/dist/js/expediente.js"></script>
  <link rel="stylesheet" href="<?php echo base_url().'assets/dist/css/validacion.css'?>">

<!-- doble scroll en la datatable -->
<link rel="stylesheet" href="<?php echo base_url().'assets/dist/css/styles.css'?>">

 <script src="<?php echo base_url()?>assets/plugins/jQuery/jquery-1-10-2.min.js"></script>
  <script type="text/javascript" src="<?php echo base_url()?>assets/dist/js/site.js"></script>
<link rel="stylesheet" type="text/css" href='<?php echo base_url()?>assets/dist/css/styleTable.css' /> 
  <link rel="stylesheet" href="<?php echo base_url().'assets/plugins/datatable/dataTables.bootstrap4.min.css'?>">
<script src="<?php echo base_url().'assets/plugins/datatable/jquery.dataTables.min.js'?>" type="text/javascript"></script>
   <script src="<?php echo base_url().'assets/plugins/datatable/dataTables.bootstrap4.min.js'?>" type="text/javascript"></script>

   <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' />
<!-- doble scroll en la datatable -->
<script type="text/javascript" src="<?php echo base_url()?>assets/plugins/doubleScroll/jquery.doubleScroll.js"></script>
<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>
.dataTables_filter {
   float: left !important;
}
table.dataTable thead>tr>th{
  border-top: 0;
}
.btn-warning{
  background: #781F78 !important;
}
</style>
<div class="col-md-12">
<div class="col-md-2 col-sm-5 col-xs-12"> 
<a href="/SM/clientes/cosmetologo/clienteC/editar/<?=$IdCliente?>" ><button type="button" class="btn btn-danger col-sm-12 col-xs-12 "> <span class="glyphicon glyphicon-circle-arrow-left"> </span> Regresar</button></a>  
</div>
<div class="col-md-10 col-sm-7 col-xs-12">
  <input type="text" class="form-control" id="" name="" value=""  style="visibility: hidden;">
</div>
</div>

<!-- <div class="col-md-12">  -->
<div class="col-md-12"> 
<center><h1>Histórico E.Pestañas</center>
<center><h3 class="titulo"><?=$ReNombre?></h3></center>
</div>
<Center>
<?php
    if($Idexpediente != null){
  ?>
<div class="col-md-12"> 
 <ul class="breadcrumb menu">
    <!-- Menu que direcciona a los  Expedientes-->
<li><a href="<?php echo base_url();?>expediente/cosmetologo/ExpedienteC/editarE/<?=$IdCliente?>"> Histórico General</a><span class="divider"></span></li>
<li><a href="<?php echo base_url();?>expediente/cosmetologo/ExpedienteC/Corporal/<?=$IdCliente?>">Histórico Corporal</a> <span class="divider"></span></li>
<li><a href="<?php echo base_url();?>expediente/cosmetologo/ExpedienteC/EELigth/<?=$IdCliente?>">Histórico E-Ligth</a> <span class="divider"></span></li>
<li><a href="<?php echo base_url();?>expediente/cosmetologo/ExpedienteC/EFacial/<?=$IdCliente?>"> Histórico Facial</a><span class="divider"></span></li>
<li><a href="<?php echo base_url();?>expediente/cosmetologo/ExpedienteC/EPestanas/<?=$IdCliente?>"> Histórico E.Pestañas</a><span class="divider"></span></li>
<li><a href="<?php echo base_url();?>expediente/cosmetologo/ExpedienteC/Relajante/<?=$IdCliente?>"> Histórico Relajante</a><span class="divider"></span></li>
<li><a href="<?php echo base_url();?>expediente/cosmetologo/ExpedienteC/Nutricional/<?=$IdCliente?>"> Histórico Nutricional</a><span class="divider"></span></li>
</ul>
</div>
<?php
}else{
?>
<div class="col-md-12"> 
 <ul class="breadcrumb menu">
    <!-- Menu que direcciona a los  Expedientes-->
<li><a href="<?php echo base_url();?>expediente/cosmetologo/ExpedienteC/editarE/<?=$IdCliente?>"> Histórico General</a><span class="divider"></span></li>
<!-- <li><a href="<?php echo base_url();?>expediente/cosmetologo/ExpedienteC/Corporal/<?=$IdCliente?>">Histórico Corporal</a> <span class="divider"></span></li> -->
<!-- <li><a href="<?php echo base_url();?>expediente/cosmetologo/ExpedienteC/EELigth/<?=$IdCliente?>">Histórico E-Ligth</a> <span class="divider"></span></li> -->
<!-- <li><a href="<?php echo base_url();?>expediente/cosmetologo/ExpedienteC/EFacial/<?=$IdCliente?>"> Histórico Facial</a><span class="divider"></span></li> -->
<li><a href="<?php echo base_url();?>expediente/cosmetologo/ExpedienteC/EPestanas/<?=$IdCliente?>"> Histórico E.Pestañas</a><span class="divider"></span></li>
<!-- <li><a href="<?php echo base_url();?>expediente/cosmetologo/ExpedienteC/Relajante/<?=$IdCliente?>"> Histórico Relajante</a><span class="divider"></span></li> -->
<li><a href="<?php echo base_url();?>expediente/cosmetologo/ExpedienteC/Nutricional/<?=$IdCliente?>"> Histórico Nutricional</a><span class="divider"></span></li>
</ul>
</div>
<?php
}
?>
</Center>
<!-- </div> -->


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

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

<div class="col-md-12" id="botones">
  
</div>


<!-- <a href="<?=base_url()?>expediente/cosmetologo/ExpedienteC/agregarPestanas/<?=$IdCliente?>"> -->
<!-- <button type="button" class="btn btn-primary"><span class='glyphicon glyphicon-plus'></span></button></a></br></br> -->
<!--<a href="<?=base_url()?>leyendas/administrador/leyendaA/agregar"><button type="button" class="btn btn-primary"><span class='glyphicon glyphicon-plus'></span></button></a>-->


<div class="col-md-7 navbar-form navbar">
<label class="label-buscar">Buscar:</label>
<input type="text" class="form-control search"  id="query" name="query" />

<a href="<?=base_url()?>expediente/cosmetologo/ExpedienteC/agregarPestanas/<?=$IdCliente?>">
<button type="button" class="btn btn-primary"><span class='glyphicon glyphicon-plus'></span></button></a>
      
</div>

<div class="col-md-12" id="cargando" style=" text-align: center;">
              <div class="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
              <center class="cargando2"> Cargando...</center>
        </div>
        
<div class="col-md-12">
        <table id="tablaPestañas" class="table table-striped jambo_table bulk_action tablaPestañas" style="width:100%">
        </table>
  </div>
<!-- <a href="/SM/expediente/franquiciatario/ExpedienteF/generarConsentimientoPdf?pdf=1">Generar documento PDF</a> -->
<!-- <button type="application/pdf" class="btn btn-danger boton" data-placement="bottom" id="DescargarPDF">Descargar</button> -->
</div>
</div>
</div>
</div>


<script>
  window.addEventListener( 'load', function( event )
{
// console.log("Js de facial");

var id=$("#txt_IdExpediente").val();
// console.log("id = " + id);
////////////////////////////////////////////////////////////////////////////////////////////////////////////////

      $.ajax({
            url:"/SM/expediente/cosmetologo/ExpedienteC/InfoPestanas/",
            type:'POST',
            dataType: 'json',
            data:{idE : id},

            success:function(response){
                // console.log("tablaFacial");
                // console.log(response);

                var columns = [
                    { "title":"Fecha" },
                    { "title":"Sesión" },
                    // { "title":"Servicio" },
                    { "title":"Tratamiento" },
                    { "title":"Grosor" },
                    { "title":"Longitud" },
                    { "title":"Curva" },
                    { "title":"Cantidad" },
                    { "title":"Resultado Alergia" },
                    { "title":"Observaciones" },
                    { "title":"Diagnóstico" },
                    { "title":"Cosmetólog@" },
                    // { "title":"Acciones" }
                ];
                var hide = [
                        { targets: [0,1,2,3,4,5,6,7,8,9], visible: true},
                       /* { targets: [8], visible: false }*/
                    ];


                // $("#tablaPestañas").append('<tfoot class="dataFooter"><tr><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th></tr></tfoot>'); 


                $('#tablaPestañas').DataTable({
                  dom: 'lrtip',
                    responsive: true,
                    columnDefs: hide,
                    data: response,
                    columns: columns,
                    ServerSide: true,
                    destroy: true,
                    footer: true,
                    processing: true,
                    // bFilter:false,
                    // searching: true,
                         filter:true,
                         "lengthChange": false,
                         "order": [[ 0, "desc" ]],
                         "pageLength": 10,

                    language: {
                        "lengthMenu": "Mostrar _MENU_ registros por pagina",
                        "zeroRecords": "No se encontraron resultados en su busqueda",
                        "searchPlaceholder": "Buscar registros",
                        "info": " _END_ registros de  _TOTAL_ \n",
                        "infoEmpty": "No existen registros",
                        "infoFiltered": "(filtrado de un total de _MAX_ registros)",
                        "search": "Buscar:",
                        "paginate": {
                            "first": "Primero",
                            "last": "Último",
                            "next": "Siguiente",
                            "previous": "Anterior",
                   
                        },
                    },

                });
                $('#tablaPestañas').wrap("<div id='scrollbar-tabla' class='scrollbar-tabla'></div>");
                    $('#scrollbar-tabla').doubleScroll({
                          resetOnWindowResize: true
                        });

                  document.getElementById('cargando').classList.add('invisible');
// $("input[type=search]").attr('style','display: none');
var table = $('#tablaPestañas').DataTable();
          $('#query').on('input',function(){
              table.search(this.value).draw();
          });




        },//end success ajax response
        error:function(){
          console.log("error");
        },

        });//end ajax



listadoConsentimiento()
});


  function listadoConsentimiento(){
    var id=$("#txt_IdExpediente").val();

    var fila = '';
      $.ajax({
            url:"/SM/expediente/cosmetologo/ExpedienteC/tratamientosConsentimientoPestanas/",
            type:'POST',
            dataType: 'json',
            data:{idE : id},

            success:function(response){
                // console.log("prueba tratamientos");
                // console.log(response);

if(response != null){
  var cont= 1;
         for(var i=0; i<response.length; i++)
            {
          if(response[i] != ''){
              fila += '<div>';
              fila += '<form method="POST" action="" onSubmit="return false">';
              fila += '<input type="text" class="form-control" id="tipoVenta'+cont+'" name="tipoVenta" value="'+response[i].servicio+'"  style="display: none;">';
              fila += '<input type="text" class="form-control consentimiento" id="consentimiento_'+cont+'" name="consentimiento" value="'+response[i].IdConsentimiento+'"  style="display: none;">';

              fila += '<input type="text" class="form-control VerificacionCertificado" id="VerificacionCertificado'+cont+'" name="VerificacionCertificado" value="'+response[i].VerificacionCertificado+'"  style="display: none;">';

              if(response[i].VerificacionCertificado == id){
                fila += '<button type="button" id="IdNomServicio'+cont+'" class="btn btn-primary" disabled><span class="glyphicon glyphicon-gift" style="color:orange; font-size: 18px;"></span>&nbsp;&nbsp;'+response[i].NombreServicio+'</button> '; 
              }else{
                fila += '<button type="button" id="IdNomServicio'+cont+'" class="btn btn-primary" disabled>'+response[i].NombreServicio+'</button> ';
              }

              fila += '<input type="text" class="form-control" id="nameServicio'+cont+'" name="nameServicio" value="'+response[i].NombreServicio+'"  style="display: none;">';

              fila += '<a id="EtiquetaBoton'+cont+'"></a>';

              fila += '<input type="text" class="form-control NomServicio" id="NomServicio'+cont+'" name="NomServicio" value="'+response[i].NombreServicio+'"  style="display: none;">';

              fila += '<input type="text" class="form-control IdServicio" id="IdServicio_'+cont+'" name="IdServicio" value="'+response[i].IdVentasServicios+'"  style="display: none;">';

              fila += '<input type="text" class="form-control IdVentas" id="IdVentas'+cont+'" name="IdVentas" value="'+response[i].IdVentas+'"  style="display: none;">';

              fila += '<input type="text" class="form-control promociones_IdPromociones" id="promociones_IdPromociones'+cont+'" name="promociones_IdPromociones" value="'+response[i].promociones_IdPromociones+'"  style="display: none;">';

              fila += '<input type="text" class="form-control totalSesiones" id="totalSesiones'+cont+'" name="totalSesiones" value="'+response[i].totalSesiones+'"  style="display: none;">';

              fila += '<button type="submit" class="submit btn btn-danger" dir="<?=base_url()?>expediente/cosmetologo/ExpedienteC/agregarPestanas/<?=$IdCliente?>" id="boton_'+cont+'" name="boton"><span class="glyphicon glyphicon-plus"></span></button>';
              fila += '</form></div>';

              cont++;
            }
            }//for
            
            $("#botones").html(fila);

            var vari;
            

            for(var x=1; x<cont; x++){

              var TipoServicio = $('#tipoVenta'+x).val();
              var IdPromosServicios = $('#promociones_IdPromociones'+x).val();
              var IdServicio_X = $('#IdServicio_'+x).val();

              var NomServicio = $('#NomServicio'+x).val();
              var IdVentas = $('#IdVentas'+x).val();
              var consentimiento = $('#consentimiento'+x).val();


              var nameServicio=$('#nameServicio'+x).val();
                            
            if($('#consentimiento_'+x).val() > 0){ 

               // console.log($('#consentimiento_'+x).val());
               
              $('#EtiquetaBoton'+x).html('<button type="button" id="verConsentimiento'+x+'" style="background : #4E8284; border : #4E8284;" class="btn btn-danger" value="'+NomServicio+"///"+IdServicio_X+"///"+IdVentas+"///"+TipoServicio+"///"+consentimiento+"///"+nameServicio+'"><i class="glyphicon glyphicon-eye-open gi-3x"></i></button> ');

              // $('#botonConsentimiento_'+x).html('VISUALIZAR CONSENTIMIENTO'); 
              var nombreCliente= $('#nombreCliente').val();
               
              $('#verConsentimiento'+x).click(function(){
                var idCliente = $("#txt_IdExpediente").val();

                   var valorBoton = $(this).val();
                    // console.log(valorBoton);

                    var arreglo = valorBoton.split("///");
                    // var nombreServicio = arreglo[0];
                    var idServicio = arreglo[1];
                    var IdVentas = arreglo[2];
                    var tipoVenta = arreglo[3];
                    var IdConsentimiento = arreglo[4];
                    var nombreServicio = arreglo[5];

                window.location="/SM/expediente/cosmetologo/ExpedienteC/registroConsentimientoPestanasRegistrado/"+idCliente+"?nombreCliente="+ nombreCliente+"&idCliente="+idCliente+"&IdServicio="+idServicio+"&IdVentas="+IdVentas+"&tipoVenta="+tipoVenta+"&IdConsentimiento="+IdConsentimiento+"&nombreServicio="+nombreServicio;

              });
            

              // var pestañas = "pestañas";
              //     var numSesiones = buscarNumSesiones(IdPromosServicios,TipoServicio)    
              //     // console.log('numSesiones = ' + numSesiones);

              //     var numRows = validacionSesiones(TipoServicio, IdServicio_X, pestañas)
              //     // console.log('numRows = ' + numRows);
              //     if(numRows==numSesiones){
              //       $('#boton_'+x).remove();  
              //     //   // swal("Número de sesiones completadas", "", "success");
              //     }else if(numRows<numSesiones){
              //     //   // $('#boton_'+x).attr('disabled',false);
              //     }

              }//if
              else{
                $("#boton_"+x).attr("disabled",true);
                // $('#botonConsentimiento_'+x).html('FIRMAR CONSENTIMIENTO'); 
                $('#EtiquetaBoton'+x).html('<button type="button" id="LlenarConsentimiento'+x+'" style="background : #2281C8; border : #2281C8;" class="btn btn-warning" value="'+NomServicio+"///"+IdServicio_X+"///"+IdVentas+"///"+TipoServicio+"///"+consentimiento+"///"+nameServicio+'">FIRMAR CONSENTIMIENTO</button> ');

                 
                var nombreCliente= $('#nombreCliente').val();

                $('#LlenarConsentimiento'+x).click(function(){

                  var idCliente = $("#txt_IdExpediente").val();

                   var valorBoton = $(this).val();
                    // console.log(valorBoton);

                    var arreglo = valorBoton.split("///");
                    // var nombreServicio = arreglo[0];
                    var idServicio = arreglo[1];
                    var IdVentas = arreglo[2];
                    var tipoVenta = arreglo[3];
                    var IdConsentimiento = arreglo[4];
                    var nombreServicio = arreglo[5];
                    // console.log(nombreServicio);
                    // console.log(idServicio);
                    // console.log(IdVentas);
                    // console.log(tipoVenta);

                    swal({
                          title: 'ES NECESARIO FIRMAR EL CONSENTIMIENTO DE ' + nombreServicio,
                            text: "",
                            icon: "warning",
                            buttons: {
                              cancel: "CANCELAR",
                              catch: {
                                text: "ACEPTAR",
                                value: "ACEPTAR",
                              },
                              defeat: false,
                            },
                            closeOnClickOutside: false,

                        })
                    .then((value) => {
                      switch (value) {  
                            case "ACEPTAR":
                                // console.log('idServicio = '+ idServicio);
                                // window.location="/SM/expediente/franquiciatario/ExpedienteF/registroConsentimientoPestanas/"+idCliente+"?nombreCliente="+ nombreCliente+"&idCliente="+idCliente+"&IdServicio="+idServicio+"&IdVentas="+IdVentas+"&tipoVenta="+tipoVenta+"&IdConsentimiento="+IdConsentimiento;
                                window.location="/SM/expediente/cosmetologo/ExpedienteC/registroConsentimientoPestanasRegistrado/"+idCliente+"?nombreCliente="+ nombreCliente+"&idCliente="+idCliente+"&IdServicio="+idServicio+"&IdVentas="+IdVentas+"&tipoVenta="+tipoVenta+"&IdConsentimiento="+IdConsentimiento+"&nombreServicio="+nombreServicio;
                            break;

                            default:
                            swal("Tiene que estar firmado para poder agregar sesiones", "", "warning"); 
                        }
                      });

                  });///fin del click
              }



            }//for

            $(".submit").click(function() {
              var accion = $(this).attr('dir');
              $(this.form).attr('action', accion);
              var pestanas = "pestanas";
              var cosmetologo = "cosmetologo";

              // var res = consultarFirmaPrincipal(id, pestanas, cosmetologo);
              // console.log('resxx = ' + res);

              // if(res == '1'){
                $(this.form).removeAttr('onSubmit');
                $(this.form).submit();
            //   }else{
            //     if(res == 'actualizarExp'){           
            //       swal('Necesita actualizar el expediente general del cliente','','warning')
            //       .then((value) =>{
            //         location.href="/SM/expediente/cosmetologo/ExpedienteC/editarE/"+id;
            //       });
            //     }else{
            //       $(this.form).removeAttr('onSubmit');
            //       $(this.form).submit();
            //     }
            // }
            });



          }//if(response != null)
        },//end success ajax response
        error:function(){
          console.log("error");
        },

        });//end ajax
(function(){
            function removeAccents ( data ) {
                if ( data.normalize ) {
                    /* Use la API I18n si está disponible para dividir caracteres y acentos, luego elimine
                       los acentos al por mayor. Tenga en cuenta que utilizamos los datos originales, así como
                       lo nuevo para permitir la búsqueda de cualquiera de los formularios.*/
                    return data +' '+ data
                        .normalize('NFD')
                        .replace(/[\u0300-\u036f]/g, '');
                }
             
                return data;
            }
             
            var searchType = jQuery.fn.DataTable.ext.type.search; 
            searchType.string = function ( data ) {
                return ! data ?
                    '' :
                    typeof data === 'string' ?
                        removeAccents( data ) :
                        data;
            };
             
            searchType.html = function ( data ) {
                return ! data ?
                    '' :
                    typeof data === 'string' ?
                        removeAccents( data.replace( /<.*?>/g, '' ) ) :
                        data;
            };
        }());
}

</script>
