<?php 

    require_once(__DIR__."/../../config.php"); 
    
    $cs = new cs;
    
    if(!$cs->checkLog_unf()) { exit("<script>location='../../login';</script>"); }

    $id_unf = $_SESSION['info_unf']['id'];

?>


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" type="image/png" sizes="16x16" href="<?= SITE_PAINEL; ?>/plugins/images/favicon.png">
    <title>Space Code 2.0 - Usuarios ativos</title>
    <!-- Bootstrap Core CSS -->
    <link href="../../public/assets/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="../../plugins/bower_components/bootstrap-extension/css/bootstrap-extension.css" rel="stylesheet">
    <!-- Menu CSS -->
    <link href="../../plugins/bower_components/sidebar-nav/dist/sidebar-nav.min.css" rel="stylesheet">
    <!-- toast CSS -->
    <link href="../../plugins/bower_components/toast-master/css/jquery.toast.css" rel="stylesheet">
    <!-- morris CSS -->
    <link href="../../plugins/bower_components/morrisjs/morris.css" rel="stylesheet">
    <!-- animation CSS -->
    <link href="../../public/assets/css/animate.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="../../public/assets/css/style.css" rel="stylesheet">
    <!-- color CSS -->
    <link href="../../public/assets/css/colors/default-dark.css" id="theme" rel="stylesheet">
    <!-- dataTable CSS -->
    <!--  <link rel="stylesheet" href="<//?= BASE_URL; ?>/painel/plugins/bower_components/datatables/jquery.dataTables.min.css"> -->

    <!-- Editable CSS -->
    <link rel="stylesheet" href="../../plugins/bower_components/jquery-datatables-editable/datatables.css">
    
    <!-- SELECT 2 --> 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
    <!-- DATAPICKER --> 
    <link href="../../plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css" rel="stylesheet">
    <!-- SWEETALERT --> 
    <link href="../../plugins/bower_components/sweetalert/sweetalert.css">
    

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
    <!-- <script>
    (function(i, s, o, g, r, a, m) {
        i['GoogleAnalyticsObject'] = r;
        i[r] = i[r] || function() {
            (i[r].q = i[r].q || []).push(arguments)
        }, i[r].l = 1 * new Date();
        a = s.createElement(o), m = s.getElementsByTagName(o)[0];
        a.async = 1;
        a.src = g;
        m.parentNode.insertBefore(a, m)
    })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
    ga('create', 'UA-19175540-9', 'auto');
    ga('send', 'pageview');
    </script> -->
    
</head>
   
<?php     
    include_once(__DIR__."/../../layout/header.php");
    include_once(__DIR__."/../../layout/left-sidebar.php"); 
    include_once(__DIR__."/../../layout/breadcrumbs.php");
?>
   
	    <!-- Page Content -->
	    <div id="page-wrapper">
	        <div class="container-fluid">
	            <div class="row bg-title">
	                <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
	                    <h4 class="page-title">Usuarios Ativos</h4></div>
	                <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12">
	                    <?php echo breadcrumbs(); ?>
	                </div>
	                <!-- /.col-lg-12 -->
	            </div>

				<div class="row">
				    <div class="col-md-12">
	                    <div class="white-box">
                            <form method="POST" enctype="multipart/form-data">
	                        <div class="row">
	                            <div class="col-sm-12 col-xs-12 m-b-10">
	                            	<div class="row">
	                                    <div class="col-md-12 m-b-5">
                                        	<div class="search">
			                                	<input class="form-control" id="search" type="text" name="search" placeholder="Pesquisar">
			                                </div>
                                        </div>
	                                    <!-- <div class="col-md-4 m-b-5">		                                    	                                     
                                            <div id="datetimepicker1" class="input-daterange input-group date">
	                                            
	                                            <input class="datepicker form-control" type="text" id="min" name="min" placeholder="Data Inicio">
                                                
                                                <span class="input-group-addon bg-info b-0 text-white">ate</span>
                                                
                                                <input class="datepicker form-control" type="text" id="max" name="max" placeholder="Data Fim"> 
                                            </div>
                                            <div id="setInput"></div>
		                                    
	                                    </div>
                                        
                                        <div class="col-md-4 m-b-5">                                                               
                                            <div class="input-daterange input-group">
                                                
                                                <select class="form-control statusSelect" placeholder="Status" name="status" id="status">
                                                    <option value="" selected>Status</option>
                                                    <option value="teste">Teste</option>
                                                    <option value="normal">Normal</option>
                                                    <option value="desativado">Desativado</option>
                                                </select>
                                                
                                                <span class="input-group-addon bg-info b-0 text-white">&&</span>
                                                
                                                <select class="form-control profileSelect" placeholder="Profile" name="profile" id="profile">
                                                    <option value="" selected >Profile</option>
                                                    <option value="SD">DIGITAL (BRONZE)</option>
                                                    <option value="SD_HD">HD (PRATA)</option>
                                                    <option value="SD_FHD_VOD">FULLHD + VOD (OURO)</option>
                                                    <option value="SD_FHD_VOD_ADULTO">FULLHD + VOD + ADULTO (OURO)</option>
                                                    <option value="VIP">VIP (DIAMANTE)</option>
                                                    <option value="VIP_18">VIP COM ADULTOS (DIAMANTE)</option>
                                                    <option value="LITE_FULLHD">FULLHD SEM FILMES (OURO)</option>
                                                </select>
                                            </div>
                                        </div> -->
	                                </div>
	                                
                                    <button type="button" id="btnSearch" class="btn btn-default btn-sm-block m-r-5 m-b-10">Pesquisar</button> 
                                    <button id="btnClear" type="button" class="btn btn-default m-r-5 m-b-10">Limpar</button>  
	                               
	                            </div>
	                        </div>
	                        
                            <input type="hidden" id="usuario" name="usuario">  
                            <input type="hidden" id="usuarios_ativos" name="usuarios_ativos">  
                            
                            <!-- Tabela DataTable -->
	                        <div class="tableSearch"> 
                            	<div class="row">
                            		<div class="col-sm-12">
                                       <!--  table editable-table table-bordered table-striped -->
                            			<table id="mainTable" class="display nowrap table " width="100%" >
			                                <thead>
			                                    <tr>
			                                    	<!-- <th class="m-center all"><input class="text-center" type="checkbox" name="select_all" value="1"></th> -->
			                                    	<th>Id</th>
			                                    	<th>Login</th>
			                                    	<th>Canal</th>
			                                    	<th>Icon</th>
			                                    	<th>Ip</th>			                                    	
			                                    </tr>
			                                </thead>
                                            

                                        </table>

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

                            <pre id="example-console"></pre>
	                        <!-- End Tabela DataTable -->
                            </form>  
	                        <!-- <div class="form-group">
                                <label class="control-label">Profile</label>
                                <select class="form-control profile" data-placeholder="Choose a Category" tabindex="1" id="profile" name="profile">
                                   <option></option>
                                </select>
                            </div> -->
                            
                        </div>    
	                </div>
				</div>
	        <?php include_once(__DIR__.'/../../layout/right-sidebar.php');?>
	        </div>
	        <!-- /.container-fluid -->
	        <?php include_once(__DIR__.'/../../layout/footer.php');?>
	    </div>
	    <!-- /#page-wrapper -->
    </div>
    <!-- jQuery -->
    <script src="../../plugins/bower_components/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap Core JavaScript -->
    <script src="../../public/assets/bootstrap/dist/js/tether.min.js"></script>
    <script src="../../public/assets/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../../plugins/bower_components/bootstrap-extension/js/bootstrap-extension.min.js"></script>
    <!-- Menu Plugin JavaScript -->
    <script src="../../plugins/bower_components/sidebar-nav/dist/sidebar-nav.min.js"></script>
    <!--slimscroll JavaScript -->
    <script src="../../public/assets/js/jquery.slimscroll.js"></script>
    <!--Wave Effects -->
    <script src="../../public/assets/js/waves.js"></script>
     <!-- Sweet-Alert  -->
    <!-- <script src="../../plugins/bower_components/sweetalert/sweetalert.min.js"></script> -->
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <!-- Custom Theme JavaScript -->
    <script src="../../public/assets/js/custom.min.js"></script>    
    <!-- jQuery Mask -->
    <script src="../../plugins/bower_components/jquery-mask/dist/jquery.mask.min.js"></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> -->
    <script src="../../plugins/bower_components/datatables/jquery.dataTables.min.js"></script> 
    <script src="https://cdn.datatables.net/select/1.3.0/js/dataTables.select.min.js"></script>
    
    <script src="../../plugins/bower_components/jquery-datatables-editable/jquery.dataTables.js"></script> 
    <script src="../../plugins/bower_components/datatables/dataTables.bootstrap.js"></script> 
    
    <script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
    <!-- <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script> -->
     
    <script>       
    	$(document).ready( function() {
                     
            // var url      = (window.location).href  
            // var id       = url.substring(url.lastIndexOf('=') + 1)
            var form     = []
            var table    = $('#mainTable')  
            //console.log(table)
            
            // $("#min").datepicker({locale: 'pt-BR', format: 'dd/mm/yyyy'})
            // $("#max").datepicker({locale: 'pt-BR', format: 'dd/mm/yyyy'})
            
            $('.tableSearch').hide()
            
           
            // Array holding selected row IDs
            var rows_selected = []    
        
        // $('#search').keypress(function(e){
        //     if(e.which == 13) { //Enter key pressed
        //         $('#btnSearch').click() //Trigger search button click event
        //     }
        // })

       
            //var search  = $('#search').val()
           
	        $('#btnSearch').on('click', function (e) {

	            $('.tableSearch').show()  

	            
	            table.DataTable({
	                "language": {
	                    //processing: '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only"></span> ',    
	                   // "search": "_INPUT_",
	                   // "searchPlaceholder": "Pesquisar...",
	                    "sEmptyTable": "Nenhum registro encontrado",
	                    "sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
	                    "sInfoEmpty": "Mostrando 0 até 0 de 0 registros",
	                    "sInfoFiltered": "(Filtrados de _MAX_ registros)",
	                    "sInfoPostFix": "",
	                    "sInfoThousands": ".",
	                    "sLengthMenu": "_MENU_ resultados por página",
	                    "sLoadingRecords": "Carregando...",
	                    "sProcessing": "Processando...",
	                    "sZeroRecords": "Nenhum registro encontrado",
	                    "sSearch": "",
	                    "oPaginate": {
	                        "sNext": "Próximo",
	                        "sPrevious": "Anterior",
	                        "sFirst": "Primeiro",
	                        "sLast": "Último"
	                    },
	                    "oAria": {
	                        "sSortAscending": ": Ordenar colunas de forma ascendente",
	                        "sSortDescending": ": Ordenar colunas de forma descendente"
	                    }
	                },
	                "bDestroy": true,
	                serverSide: true,
	                ajax : {
	                    url: "../ajax_search.php",
	                    type: "POST",
	                    
	                    "data":   function( d ) {
	                        //d.usuario         = $('#usuario').val()
	                        d.search          = $('#search').val()
	                        d.usuarios_ativos = $('#usuarios_ativos').val()
	                        // d.min       = $("#min").data('datepicker').getFormattedDate('yyyy-mm-dd')
	                        // d.max       = $("#max").data('datepicker').getFormattedDate('yyyy-mm-dd')
	                        // d.status    = $('#status').val()  
	                        // d.profile   = $('#profile').val()                       
	                    }

	                    //dataSrc:""        
	                },                      
	                "columns": 
	                [
	                    { "data" : "user_id"             }, 
	                    { "data" : "username"            },                    
	                    { "data" : "stream_display_name" },
	                    { "data" : "stream_icon",
	                        targets: 3,
	                        'render': function (data, type, row, meta) {
	                            var img = row.stream_icon 
	                            console.log(img)  
	                            return `<img onerror="this.src='../../public/images/imagem_not_found.jpg'" src="${row.stream_icon}" width="60">`;
	                        }          
	                    },
	                    { "data" : "user_ip"             }  
	                    
	                ],
	                searching: false,                
	                responsive: true,
	                // columnDefs: [
	                //     { responsivePriority: 1, targets: 0 },
	                //     { responsivePriority: 2, targets: 2 },
	                //     { responsivePriority: 3, targets: 3 },
	                //     { responsivePriority: 1, targets: 8 },
	                //     { responsivePriority: 1000, targets: 1 }
	                // ],
	                "lengthMenu": [[10, 25, 50, 100, 1000], [10, 25, 50, 100, 1000]],
			        'order': [[1, 'asc']]
	            }) 
	        })

     //    // Handle table draw event
	    // table.DataTable().on('draw', function(){
	    //     // Update state of "Select all" control
	    //     updateDataTableSelectAllCtrl(table.DataTable());
	    // })        
	})
</script>

    
</body>

</html>