<div id="page-content-wrapper">
<div class="page-content inset">
<div class="row">
<div class="col-md-12 div-centrado">
<head>
  <link rel="stylesheet" href="<?php echo base_url().'assets/dist/js/jquery/jquery-ui.css'?>">

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


	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.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/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>
    <script src="<?php echo base_url().'assets/plugins/notify/notify.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' />
<script type="text/javascript">
    var base_url="<?php echo base_url()?>";
  </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;
}
.estiloSelect{
	height: 34px;
	/*width: 50%;*/
	font-size: 14px;
	border: 1px solid #ccc;
	background-color: #fff;
	color: #555;
}
.botonAsignarModal{
	height: 34px;
	/*width: 20%;*/
	font-size: 14px;
	border: 1px solid #138EFF;
	background-color: #138EFF;
	color: #FFFFFF;
	border-radius: 3px;
}
.botonNuevoCliente{
	height: 34px;
	/*width: 30%;*/
	font-size: 14px;
	color: #FFFFFF;
	border: 1px solid #9A4BA6;
	background-color: #9A4BA6;
	border-radius: 3px;
}
.error-ocurrido {
    color: #e01e1e;
}
</style>

<div class="col-md-12">
<div class="col-md-2 col-sm-5 col-xs-12"> 
  <a href="javascript:window.history.back()" ><button type="button" class="btn btn-danger col-md-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"> 
<center><h1>CERTIFICADOS DE REGALO</center>
<center><h3 class="titulo"><?=$ReNombre?></h3></center>
</div>

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

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


<div class="col-md-12 table-responsive">
        <table id="tablaCertificados" class="table table-striped jambo_table bulk_action tablaCertificados" style="width:100%">
        </table>
  </div>

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


<div id="divModalCertificados">
  
</div>

<!-- modal nuevo cliente -->
<div class="modal" tabindex="-1" role="dialog" id="modal_nuevoCliente" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <center> <h4> Nuevo cliente</h4></center>
      </div>
      <div class="modal-body">
          <div>
            <div class="form-group" id="contenedorNc">
              <label for="nombreCompleto">Nombre completo</label>
              <input type="text" class="form-control" id="nombreCompleto" name="nombreCompleto" aria-describedby="emailHelp" placeholder="Ingresar nombre completo" maxlength="69">
              <input id="nombrePrincipio" name="nombrePrincipio" style="display: none">
              <input id="idServicioPrincipio" name="idServicioPrincipio" style="display: none">
              <input id="tipoVentaPrincipio" name="tipoVentaPrincipio" style="display: none">
              <input id="tipoUsuario" name="tipoUsuario" style="display: none;">
              <input id="nombreServicio" name="nombreServicio" style="display: none;">
              <small id="ayudaNombre" class="form-text text-muted error-ocurrido"></small>
            </div>
            <div class="form-group" id="contenedorNTel">
              <label for="celular">Celular</label>
              <input type="text" class="form-control" id="celular" name="celular" placeholder="Ingresar número celular" maxlength="10" onkeypress="return validaPunto(event)" required="">
              <small id="ayudaCelular" class="form-text text-muted error-ocurrido"></small>
            </div>
          </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger pull-left" id="cancelarNuevoCliente" data-dismiss="modal">Cancelar</button>
        <button type="button" class="btn btn-primary" id="guardarNuevoCliente">Guardar</button>
       
      </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;
    }
ul.ui-autocomplete {
    z-index: 1100;
}
</style>

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

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

	$.ajax({
		url: "/SM/clientes/cosmetologo/ClienteC/listaCertificados/"+IdClientes,
		type: "POST",
		dataType: "json",
		data: {
			IdCliente: IdClientes,
		},
		success:function(respuesta){
			console.log(respuesta);
			var columns = [
					          { "title":"Fecha adquirido" },
                    { "title":"Folio de certificado" },
                    { "title":"Nombre certificado inicial" },
                    { "title":"Beneficiario final" },
                    { "title":"Servicio" },
                    { "title":"Estado" },
                    { "title":"Acciones" },
                ];
            var hide = [
                        { targets: [0,1,2,3,4,5,6], visible: true},
                    ];
            // $("#tablaCertificados").append('<tfoot class="dataFooter"><tr><th></th><th></th><th></th><th></th><th></th><th></th></tr></tfoot>'); 

            $('#tablaCertificados').DataTable({
                  dom: 'lrtip',
                    responsive: true,
                    columnDefs: hide,
                    data: respuesta,
                    columns: columns,
                    ServerSide: true,
                    destroy: true,
                    footer: true,
                    processing: true,

                         filter:true,
                         "lengthChange": false,
                         "order": [[ 0, "desc" ]],
                         "pageLength": 20,

                    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",
                   
                        },
                    },

                });
        var table = $('#tablaCertificados').DataTable();
          $('#query').on('input',function(){
              table.search(this.value).draw();
          });

    $('.asignar').click(function(){
    	var valorBoton = $(this).val();
    	console.log(valorBoton);
    	var arreglo = valorBoton.split('///');
    	var cadenaArreglo = arreglo[0] + "///" + "sinBuscar" + "///" + "cosmetologo" + "///" + arreglo[4];
    	var resultBusqueda = buscarSimilitudesCliente(cadenaArreglo,arreglo[1],arreglo[2],arreglo[3]);
// 
    	// modalAsignarCertificado(resultBusqueda)

    });
    $('.ir_Expediente').click(function(){
    	var valorBoton = $(this).val();
    	console.log(valorBoton);
    	location.href="/SM/expediente/cosmetologo/ExpedienteC/EditarE/"+valorBoton
    });


		},
		error:function(){
			console.log('error::');
		}
	});

}
(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>