<?php include_once("../lib/control.seguridad.php"); ?>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>POWERTIME</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="../plugins/fontawesome-free/css/all.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="../dist/css/adminlte.min.css">
  <!-- DataTables -->
  <link rel="stylesheet" href="../plugins/datatables-bs4/css/dataTables.bootstrap4.css">    
 
  <link href="../plugins/toastr/build/toastr.css" rel="stylesheet" type="text/css" />  
   <style>
	  #example{
		  font-size:10px;
	  }
	  .content-header h4{ 
		  font-size: 20px
	  }
     .dataTables_wrapper { font-size: 10px; }	
	.dataTables_filter input { height: 25px; }	   
  </style>
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">

  <?php include_once("../inc/header.php"); ?>

  <?php include_once("../inc/menu.php"); ?>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row">
          <div class="col-sm-6">
            <h4>Usuarios Activos</h4>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content" id="app">
      <div class="row">
        <div class="col-12">
          <div class="card">
            <div class="card-header">
				<div class="row">
					<div class="col-md-3">
					  <div class="input-group input-group-sm">
						<div class="input-group-prepend">
						  <div class="input-group-text">Centro</div>
						</div>
						<select class="form-control" id="txtDepartamento">
						</select>
					  </div>
					</div>	
					<div class="col-md-4">
					  <div class="input-group input-group-sm">
						<div class="input-group-prepend">
						  <div class="input-group-text">Nombre / Rut </div>
						</div>
						<input type="text" class="form-control" id="txtRut_trabajador" name="txtRut_trabajador">
					  </div>
					</div>	
					<div class="col-md-3">
						<button type='button' class='btn btn-info btn-sm' id='btnBuscar' name='btnBuscar'>Buscar</button>
					</div>											
				</div>	
            </div>
            <!-- /.card-header -->
            <div class="card-body">
              <table id="example" class="table table-bordered table-striped">
                <thead>
                <tr>			
                  <th>RUT</th>				
                  <th>NOMBRE</th>	
                  <th>TURNO</th>
                  <th>CARGO</th>	
                  <th>CENTRO</th>					  
                  <th></th>					  
                </tr>
                </thead>			
              </table>
			  <div class="div-response"></div>
            </div>
            <!-- /.card-body -->
          </div>
          <!-- /.card -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
  
	<div id="modal-turno" class="modal" tabindex="-1" role="dialog">
	  <div class="modal-dialog modal-lg" role="document">
		<div class="modal-content">
		  <div class="modal-header">
			<h5 class="modal-title">INFORMACION DE TURNO</h5>
			<button type="button" class="close" data-dismiss="modal" aria-label="Close">
			  <span aria-hidden="true">&times;</span>
			</button>
		  </div>
		  <div class="modal-body">
			  <table id="example3" class="table table-bordered table-striped">
				<thead>
				<tr>		
				  <th>D&Iacute;A</th>					
				  <th>HORA INICIO</th>				
				  <th>HORA T&Eacute;RMINO</th>	
				  <th>COLACI&Oacute;N</th>					  
				</tr>
				</thead>			
			  </table>	
		  </div>
		  <div class="modal-footer">
			<button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
		  </div>
		</div>
	  </div>
	</div>    
  
  <?php include_once("../inc/footer.php"); ?>
  <input type="hidden" class="form-control " id="txtId_autoriza" value="<?php echo $_SESSION['LOGIN']['CODIGO'];?>">

 
</div>
<!-- ./wrapper -->

<!-- jQuery -->
<script src="../plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="../dist/js/adminlte.min.js"></script>
<!-- DataTables -->
<script src="../plugins/datatables/jquery.dataTables.js"></script>
<script src="../plugins/datatables-bs4/js/dataTables.bootstrap4.js"></script>

<script src="../plugins/toastr/toastr.js"></script> 
 
<script>
  $(function () { 
    $('#example').DataTable({
      "paging": true,
      "lengthChange": false,
      "searching": true,
      "ordering": false,
      "info": true,
      "autoWidth": false,
	  "language": {
		"url": "//cdn.datatables.net/plug-ins/1.10.15/i18n/Spanish.json"
      } 	  
    });

		
    $('#example3').DataTable({
      "paging": true,
      "lengthChange": false,
      "searching": false,
      "ordering": false,
      "info": true,
      "autoWidth": false,
	  "language": {
		"url": "//cdn.datatables.net/plug-ins/1.10.15/i18n/Spanish.json"
      } 		  
    });
	
	listarRegistroDep();
	function listarRegistroDep(){

		$.ajax({
			type:'POST',
			contentType: 'application/json',
			dataType: "json",
            crossDomain: true,
			headers: {
				'Content-Type': 'application/json'
			},
			url: "<?php include_once('../inc/api_cred.php'); echo $apiUrl; ?>/public/departamentopersona",
			data : JSON.stringify({
				id_persona:$("#txtId_autoriza").val()					
			}),			
			success: function(dados)
			{
				 for (i=0;i<dados.length;i++){
					for (j=0;j<dados[i].length;j++){						

						$('#txtDepartamento').append($('<option>', {
							value: dados[i][j].id_departamento,
							text : dados[i][j].sucursal + " (" +dados[i][j].departamento +" )"
						}));
					}
				}
				listarRegistro();
			}
		});

	}
	
	$("#txtDepartamento").change(function () {
		listarRegistro();
    });
	
	$("#txtRut").keyup(function(e){
		if(e.keyCode == 13){
			buscarPersona();
		}
	});		
   
	function listarRegistro(){

		$('#example').dataTable().fnClearTable();

		$.ajax({
			type:'POST',
			contentType: 'application/json',
			dataType: "json",
            crossDomain: true,
			headers: {
				'Content-Type': 'application/json'
			},
			url: "<?php include_once('../inc/api_cred.php'); echo $apiUrl; ?>/public/obtenerpersonadepartamentodirector",
			data : JSON.stringify({			
				id_departamento: $('#txtDepartamento').val(),								
			}),		
			success: function(dados)
			{
				 for (i=0;i<dados.length;i++){
					for (j=0;j<dados[i].length;j++){
						
					  var boton = "<button type='button' class='btn btn-info btn-xs btn-editar'>Ver Ficha</button>";
					  var boton2 = "<button type='button' class='btn btn-info btn-xs btn-ver-turno'>Ver Turno</button>";
					  $('#example').dataTable().fnAddData( [
						dados[i][j].rut,	
						dados[i][j].nombre+" "+dados[i][j].apellido,
						dados[i][j].turno,	
						dados[i][j].cargo,
						dados[i][j].departamento+ "<input type='hidden' value ='"+dados[i][j].idturno+"' />",						
						boton +" "+ boton2 + "<input type='hidden' value ='"+dados[i][j].id+"' />"
					  ]);
					}
				}
			}
		});

	}

	$("#btnBuscar").click(function(){	
		$('#example').dataTable().fnClearTable();

		$.ajax({
			type:'POST',
			contentType: 'application/json',
			dataType: "json",
            crossDomain: true,
			headers: {
				'Content-Type': 'application/json'
			},
			url: "<?php include_once('../inc/api_cred.php'); echo $apiUrl; ?>/public/buscarpersonadepartamentodirector",
			data : JSON.stringify({			
				idpersona: $('#txtId_autoriza').val(),
				ruttrabajador: $('#txtRut_trabajador').val(),								
			}),		
			success: function(dados)
			{
				 for (i=0;i<dados.length;i++){
					for (j=0;j<dados[i].length;j++){
						
					  var boton = "<button type='button' class='btn btn-info btn-xs btn-editar'>Ver Ficha</button>";
					  var boton2 = "<button type='button' class='btn btn-info btn-xs btn-ver-turno'>Ver Turno</button>";
					  $('#example').dataTable().fnAddData( [
						dados[i][j].rut,	
						dados[i][j].nombre+" "+dados[i][j].apellido,
						dados[i][j].turno,	
						dados[i][j].cargo,
						dados[i][j].departamento+ "<input type='hidden' value ='"+dados[i][j].idturno+"' />",						
						boton +" "+ boton2 + "<input type='hidden' value ='"+dados[i][j].id+"' />"
					  ]);
					}
				}
			}
		});		
	});
	
	$("#example").on('click','.btn-editar', function() {
		var id = $(this).parents("tr").find("td:eq(5)").find("input").val();
		$('.div-response').html('<form action="index.php" name="form" method="post" style="display:none;"><input type="text" name="txtId" id="txtId" value="'+ id +'" /></form>');
		document.forms['form'].submit();
	});	
	
 	$("#example").on('click','.btn-ver-turno', function() {
		var idTurno = $(this).parents("tr").find("td:eq(4)").find("input").val();
 
		$('#example3').dataTable().fnClearTable();

		$.ajax({
			type:'POST',
			contentType: 'application/json',
			dataType: "json",
            crossDomain: true,
			headers: {
				'Content-Type': 'application/json'
			},
			url: "<?php include_once('../inc/api_cred.php'); echo $apiUrl; ?>/public/obtenerlistadohorarioturno",
			data : JSON.stringify({
				id_turno: idTurno			
			}),				
			success: function(dados)
			{
				 for (i=0;i<dados.length;i++){
					for (j=0;j<dados[i].length;j++){
 
					  $('#example3').dataTable().fnAddData( [
						dados[i][j].dia,
						formatearHora(dados[i][j].hora_inicio),	
						formatearHora(dados[i][j].hora_termino),
						formatearHora(dados[i][j].descanso)					 
					  ]);
					}
				}
			}
		});		
		
		$('#modal-turno').modal("show");	
	});	
	
	
	function formatearHora(hora){		
		if(hora != null){ hora = hora.replace('-', '');  hora =  hora.substring(0, 5); return hora; } else { return hora; }	
	    return hora;
	}
	
});
</script>
</body>
</html>
