<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;
}
</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 Nutricional</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> -->

<form method="" id="form" action="" onSubmit="return false">
<input type="text" class="form-control" id="txt_IdExpediente" name="txt_IdExpediente" value="<?=$IdCliente?>"  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" />




<button type="submit" class="submit btn btn-primary" dir="<?=base_url()?>expediente/cosmetologo/ExpedienteC/agregarNutricion/<?=$IdCliente?>"><span class="glyphicon glyphicon-plus"></span></button>

      
</div>
</form> 

<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="tablaNutricion" class="table table-striped jambo_table bulk_action tablaNutricion" style="width:100%">
        </table>
  </div>


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


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

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

////////////////////////////////////////////////////////////////////////////////////////////////////////////////

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

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

                var columns = [
                    { "title":"Fecha" },
                    { "title":"Talla" },
                    { "title":"Peso" },
                    { "title":"IMC" },
                    { "title":"Cintura" },
                    { "title":"Cadera" },
                    { "title":"% Grasa Corporal" },
                    { "title":"% Masa Muscular" },
                    { "title":"% Grasa Visceral" },
                    { "title":"Recomendaciones" },
                    { "title":"Cosmetólog@" },
                     // { "title":"Acciones" }
                ];
                var hide = [
                        { targets: [0,1,2,3,4,5,6,7,8,9], visible: true},
                       /* { targets: [8], visible: false }*/
                    ];


                // $("#tablaNutricion").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>'); 


                $('#tablaNutricion').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",
                   
                        },
                    },

                });
                $('#tablaNutricion').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 = $('#tablaNutricion').DataTable();
          $('#query').on('input',function(){
              table.search(this.value).draw();
          });




        },//end success ajax response
        error:function(){
        },

        });//end ajax


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

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

              // if(res == '1'){
                $("#form").removeAttr('onSubmit');
                $("#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{
            //       $("#form").removeAttr('onSubmit');
            //       $("#form").submit();
            //     }
            // }
            });

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