<?php 
include_once(__DIR__."/../../config.php"); 
    
$cs = new cs; 
if(!$cs->checkLog_unf()) { exit("<script>location='../../login';</script>"); }
?>
<!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; ?>/beta/plugins/images/favicon.png">
    <title>Space Code 2.0 - Buscar Usuario</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">
    <!-- 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">
    <link rel="stylesheet" type ="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" >
    <!-- 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> -->
    <style type="text/css">
        table.dataTable {
            border-collapse: separate !important;
        }
        .dataTables_wrapper .dataTables_length {
            float: left;
        }
        .dataTables_wrapper .dataTables_filter {
            float: right;
            text-align: right;
        }
        .dataTables_filter {
            float: left;
        }

        .dataTables_info {
          float: left !important;
          clear: none !important;
        }


        #loader {
          text-align: center;
          border: 16px solid #f3f3f3;
          border-radius: 50%;
          border-top: 16px solid #3498db;
          width: 120px;
          height: 120px;
          -webkit-animation: spin 2s linear infinite;
          animation: spin 2s linear infinite;
          margin-left:250px;
          margin-top:250px;
        }   
         
         
        @-webkit-keyframes spin {
          0% { -webkit-transform: rotate(0deg); }
          100% { -webkit-transform: rotate(360deg); }
        }

        @keyframes spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
        }
              
    </style>
</head>
<?php
    //include_once("../layout/head.php");  
    include_once(__DIR__."/../../layout/header.php");
    include_once(__DIR__."/../../layout/left-sidebar.php"); 
    include_once(__DIR__."/../../layout/breadcrumbs.php");
?>
        <style type="text/css">
        	.m-center {
        		display: table-cell;
        		text-align: center;        		
        	}
        </style>
	    <!-- 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">Buscar usuario</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-4">
                                        	<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">  
                            
                            <!-- 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>Nome</th>
			                                    	<th>Login</th>
			                                    	<th>Email</th>
			                                    	<th>Celular</th>
			                                    	<th>Vencimento</th>
			                                    	<th>Status</th>
			                                    	<th>Profile</th>

			                                    	<th>Acoes</th>
			                                    </tr>
			                                </thead>
                                            

                                        </table>

                                    </div>
                                </div>
	                                
	                            <!-- </div> -->
	                            

	                            <button type="button" id="ativarDesativar" class="btn btn-default btn-sm-block m-r-5 m-b-10">Ativar ou Desativar</button>		                            
	                            <button type="button" id="btnVencimento" class="btn btn-default m-r-5 m-b-10">Alterar Vencimento</button> 

                                <?php if ($_SESSION['info_unf']['apagar_usuarios'] == 1): ?>
                                <button type="button" id="btnDelete" class="btn btn-default m-r-5 m-b-10">Excluir</button>
                                <?php endif; ?>
                                
                                
		                        
	                        </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>
    <!-- /#wrapper -->
    <!-- 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>

    <script src="../../plugins/bower_components/moment-js/moment.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> -->

    <!-- DATAPICKER --> 
    <script src="../../plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
   
    <script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    
    <script src="//cdn.datatables.net/plug-ins/1.10.19/sorting/datetime-moment.js"></script>
    

    
    <!-- <script src="//cdn.datatables.net/plug-ins/1.10.19/filtering/row-based/range_dates.js"></script> -->
   


    <script>       
    	$(document).ready( function() {
                     
            var url      = (window.location).href  
            var id       = url.substring(url.lastIndexOf('=') + 1)
            var form     = []
            var table    = $('#mainTable')  
            
            $("#min").datepicker({locale: 'pt-BR', format: 'dd/mm/yyyy'})
            $("#max").datepicker({locale: 'pt-BR', format: 'dd/mm/yyyy'})
            
            $('.tableSearch').hide()
            
            $.fn.dataTable.ext.search.push(
                function (settings, data, dataIndex) {
                    var min = $('#min').datepicker("getDate")
                    var max = $('#max').datepicker("getDate")
                    var d = data[5].split("/");
                    var startDate = new Date(d[1]+ "/" +  d[0] +"/" + d[2]);

                    // var startDate = new Date(data[5]);
                    if (min == null && max == null) { return true; }
                    if (min == null && startDate <= max) { return true;}
                    if(max == null && startDate >= min) {return true;}
                    if (startDate <= max && startDate >= min) { return true; }
                    return false;
                }
            );

            // $("#min").datepicker({ onSelect: function () { table.draw(); }, changeMonth: true, changeYear: true, });
            // $("#max").datepicker({ onSelect: function () { table.draw(); }, changeMonth: true, changeYear: true, });


			function updateDataTableSelectAllCtrl(table){
                var $table             = table.table().node();
                var $chkbox_all        = $('tbody input[type="checkbox"]', $table);
                var $chkbox_checked    = $('tbody input[type="checkbox"]:checked', $table);
                var chkbox_select_all  = $('thead input[name="select_all"]', $table).get(0);

                // If none of the checkboxes are checked
                if($chkbox_checked.length === 0){
                    chkbox_select_all.checked = false;
                    if('indeterminate' in chkbox_select_all){
                        chkbox_select_all.indeterminate = false;
                    }

               // If all of the checkboxes are checked
                } else if ($chkbox_checked.length === $chkbox_all.length){
                    chkbox_select_all.checked = true;
                    if('indeterminate' in chkbox_select_all){
                        chkbox_select_all.indeterminate = false;
                    }

                // If some of the checkboxes are checked
                } else {
                    chkbox_select_all.checked = true;
                    if('indeterminate' in chkbox_select_all){
                        chkbox_select_all.indeterminate = true;
                    }
                }
            }   
            // 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()
            // var min     = $('#min').val()
            // var max     = $('#max').val()
            // var status  = $('#status').val()
            // var profile = $('#profile').val()
        $('#btnSearch').on('click', function (e) {
                
             

            $('.tableSearch').show()  

            $('<div class="loading"><i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only"></span></div>').empty().appendTo('.tableSearch');  
            table.DataTable({

                "initComplete": function( settings, json ) {
                    $('div.loading').remove()
                },
                "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,
                //"processing": true,
                serverSide: true,
                //debug: true,
                //stateSave: true,
                //deferRender: true,
              
                ajax : {
                    url: "../ajax_search.php",
                    type: "POST",
                    
                    "data":   function( d ) {
                        d.usuario   = $('#usuario').val()
                        d.search    = $('#search').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" : "id",
                        "targets": 0,
                        "searchable": false,
                        "orderable": false, 
                        "width": '1%',
                        
                        "className": 'dt-body-center',
                        'render': function (data, type, row, meta){
                          
                            return `<input type="checkbox" name="ids[]" value="${row.id}">`;
                        }    
                    }, 
                                           
                    { "data" : "display_name" },
                    { "data" : "login"  },
                    { "data" : "email"  },
                    {   
                        "className" : "celular",
                        "data"      : "celular" 
                    },
                    {   
                        "className" : "vencimento", 
                        "data"      : "vencimento",  
                        render: function(data, type, row) {
			                if(type === "sort" || type === "type"){
			                    return row.vencimento
			                }
			               
			                return moment(new Date(row.vencimento)).format("DD/MM/YYYY"); 
			            }

                    },                          
                    { 
                    	//"className" : "status ",
                    	"data" : "status",
                    	targets: 6,
                    	// 'render': function (data, type, row, meta) {
                     //        c
                     //        return `<input type="hidden" name="statusRef[]" value="${row.status}">`;
                     //    }     
                    },
                    {   
                    	//"className" : "profile ",
                    	"data" : "profile_str",
                        targets: 7,
                        "render": function ( data, type, row, meta ) {
                            if(type === "sort" || type === "type"){
                                return row.profile;
                            }

                            return row.profile_str
                        }  
                    },
                    {   
                         
                        sortable: false,
                        "render": function ( data, type, row, meta ) {
                            
                            return `<a href='../visualizar/index.php?id=${row.id}'><button type="button" class='btn btn-sm btn-outline btn-default waves-effect waves-light'><i class="ti-eye"></i></button></a> 
                                    <a href='../editar/index.php?id=${row.id}'><button type="button" class='btn btn-sm btn-outline btn-default waves-effect waves-light'><i class="ti-pencil-alt"></i></button></a>`;
                        },                               
                    }  

                ],
                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']],
                // "rowCallback": function( row, data ) {
                //     console.log(data)

                //     //Get row ID
                //     var rowId = data['id']

                //     // If row ID is in the list of selected row IDs
                //     if ($.inArray(rowId, rows_selected) !== -1){
                //         $(row).find('input[type="checkbox"]').prop('checked', true);
                //         $(row).addClass('selected')
                //     }
                    
                // },
		        
         
            })

            

 
        })
        

          

      

            // Handle click on checkbox
		    table.on('click', 'tbody input[type="checkbox"]', function(e){
		        var $row = $(this).closest('tr')

		        // Get row data
		        var data = table.DataTable().row($row).data()

		        // Get row ID
		        var rowId = data[0]
                
		        // Determine whether row ID is in the list of selected row IDs
                var index = $.inArray(rowId, rows_selected);

		        // If checkbox is checked and row ID is not in list of selected row IDs
		        if(this.checked && index === -1){
		            rows_selected.push(rowId)

		        // Otherwise, if checkbox is not checked and row ID is in list of selected row IDs
		        } else if (!this.checked && index !== -1){
		            rows_selected.splice(index, 1)
		        }

		        if(this.checked){
		            $row.addClass('selected')
			    } else {
			        $row.removeClass('selected')
			    }

		        // Update state of "Select all" control
		        updateDataTableSelectAllCtrl(table.DataTable())

		        // Prevent click event from propagating to parent
		        e.stopPropagation()
		    });

		    // Handle click on table cells with checkboxes
		    table.on('click', 'tbody td, thead th:first-child', function(e){
		        $(this).parent().find('input[type="checkbox"]').trigger('click')
		    })

		    // Handle click on "Select all" control
		    $('thead input[name="select_all"]', table.DataTable().table().container()).on('click', function(e){
		        if(this.checked){
		            $('#mainTable tbody input[type="checkbox"]:not(:checked)').trigger('click')
		        } else {
		            $('#mainTable tbody input[type="checkbox"]:checked').trigger('click')
		        }

		        // Prevent click event from propagating to parent
		        e.stopPropagation()
		    });

		    // Handle table draw event
		    table.DataTable().on('draw', function(){
		        // Update state of "Select all" control
		        updateDataTableSelectAllCtrl(table.DataTable());
		    })		    
            
            
            // FOR DEMONSTRATION ONLY     
                 // Output form data to a console     
                // $('#example-console').text($(form).serialize());
                //   console.log("Form submission", $(form).serialize());  
            
            //Iterate over all selected checkboxes
            // $.each(rows_selected, function(index, rowId) {
            //     // Create a hidden element
                
            //     $(form).append(
            //         $('<input>')
            //             .attr('type', 'hidden')
            //             .attr('name', 'ids[]')
            //             .val(rowId)
            //     )

            //     console.log(rowId)
            // })
		
            // Remove added elements
            $('input[name="ids\[\]"]', form).remove()       

            $('#btnClear').click( function(){

                $('#search').val('')
                $('#min').val('')
                $('#max').val('')
                $('#status').val('')
                $('#profile').val('')
                
                table.DataTable().clear().draw()
                window.location.reload()

            })

			// Handle form submission event
            $('#ativarDesativar').click( function(e){
                // Prevent actual form submission
                e.preventDefault()
                form = $('form')
                
                $.post('../ajax_update.php', form.serialize()).done( (data) => {
                        
                    table.DataTable().ajax.reload(null, false)
                        
                })              
            })

            // Handle form submission event
            $('#btnDelete').click( function(e) {
                // Prevent actual form submission
                e.preventDefault()
                form = $('form')
                
                swal({
                    title: "Você tem certeza?",
                    text: "Os usuarios ou usuario será excluído",
                    icon: "warning",
                    buttons: true,
                    dangerMode: true,
                })
                .then((Delete) => {
                    if (Delete) {                     
                        swal("Clique em ok para confirmar", {
                          icon: "success",
                        }).then( function() {
                            $.post('../ajax_delete.php', form.serialize()).done( (data) => {
                                console.log(data)    
                                table.DataTable().ajax.reload()
                            }) 
                        })
                    
                    } else {
                        swal("O usuario foi salvo")
                    }
                });
                             
            })

            $('#btnVencimento').on('click', function(e) {
                form = $('form').serializeArray()
                var teste = swal({
                    content: {
                        element: "input",
                        attributes: {
                            placeholder: "Alterar vencimento",
                            type: "date",
                            name: "vencimento",
                        }, 
                    },
                    buttons: {
                            cancel: true,
                            confirm: true,
                        },
                    // icon: "success",
                }).then(function(value){
                    
                    form.push({ name: "vencimento", value: value })
                    if (value.length == 0) return
                    $.ajax({
                          type:'POST',
                          url:'../ajax_update.php',
                          data: form,
                          success: function(res){
                            table.DataTable().ajax.reload(null,false)
                        }
                    })
                })   

              
            })

    })
     
    // ATIVAR O DEBUG DO DATATABLE     
    
	// var n = document.createElement('script');
    // n.setAttribute('language', 'JavaScript');
    // n.setAttribute('src', 'https://debug.datatables.net/debug.js');
    // document.body.appendChild(n);	

    </script>


    
</body>

</html>