<?php
session_start();

if($_SESSION['name']==''){
    header("Location:index.php");die();
}

?>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.7 -->
  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
  <!-- Morris chart -->
  <link rel="stylesheet" href="bower_components/morris.js/morris.css">
  <!-- jvectormap -->
  <link rel="stylesheet" href="bower_components/jvectormap/jquery-jvectormap.css">
  <!-- Date Picker -->
  <link rel="stylesheet" href="bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
  <!-- Daterange picker -->
  <link rel="stylesheet" href="bower_components/bootstrap-daterangepicker/daterangepicker.css">
  <!-- bootstrap wysihtml5 - text editor -->
  <link rel="stylesheet" href="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.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/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

  <!-- Google Font -->
  <link rel="stylesheet" href="bower_components/datatables/css/dataTables.bootstrap.min.css">
  <link rel="stylesheet" href="bower_components/datatables/css/dataTables.bootstrap.css">
  
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="bower_components/jquery-ui/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->

<!-- Bootstrap 3.3.7 -->
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Morris.js charts -->

<!-- Sparkline -->
 <script src="vendor/datatables/jquery.dataTables.js"></script>
    <script src="vendor/datatables/dataTables.bootstrap4.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/adminlte.min.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<!--<script src="dist/js/pages/dashboard.js"></script>-->
<!-- AdminLTE for demo purposes -->
<script src="dist/js/demo.js"></script>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

  <?php include("header.php");?>
  <!-- Left side column. contains the logo and sidebar -->
  <aside class="main-sidebar">
    <!-- sidebar: style can be found in sidebar.less -->
    <?php include("sidebar.php");?>
    <!-- /.sidebar -->
  </aside>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
  

    <!-- Main content -->
    <section class="content">
      
        <div class="row">
            <div class="col-md-12">
          <!-- Custom Tabs -->
          <div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
<!--                 <li class=""><a href="#tab_11" data-toggle="tab">Invoice</a></li>-->
<!--              <li><a href="#tab_21" data-toggle="tab">View Hotel</a></li>-->
              <li class="active rm"><a href="#tab_11" data-toggle="tab">Login History</a></li>
            
            
             
             
            </ul>
            <div class="tab-content ">
                <div class="tab-pane active" id="tab_11">
                     From:<input type='text' class='datepicker' id='from_date'>
                    to:<input type='text' class='datepicker' id='to_date'>
                      <button class='btn btn-primary' id="get_invoice">Refresh</button>
                      <br><br>
                        
                    
                    <table class='table' id='table1'>
                      <thead>
                          <tr><th>Sl No</th><th>Logged On</th>
                          <th>Ip Address</th>
                          <th style="width:500px">Device</th>
                          </tr>
                      </thead>
                      
                  </table>   
              </div>
               <div class="tab-pane" id="tab_21">
                 
              </div>
                
           
            
              <!-- /.tab-pane -->
              <div class="tab-pane" id="tab_2">
                 
              </div>
              <!-- /.tab-pane -->
              <div class="tab-pane" id="tab_3">
               
              </div>
              <!-- /.tab-pane -->
            </div>
            <!-- /.tab-content -->
          </div>
          <!-- nav-tabs-custom -->
        </div>
            
            
        </div>
        
        
        
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
 
  <!-- /.control-sidebar -->
  <!-- Add the sidebar's background. This div must be placed
       immediately after the control sidebar -->
  <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->

<!-- jQuery 3 -->

</body>
</html>
<style>
    .required:before{
   color: red;
   content: "*";
   position: absolute;
font-weight:bold !important;font-size: 18px;
}
    
    
</style>
<script src="jquery-ui.js"></script>
<link href='jquery-ui.css' rel='stylesheet'>
<script src='notify.min.js'></script>
<script src='notify.js'></script>
<link href='chosen.css' rel='stylesheet'>
<script> tab= $("#table1").DataTable();
    
//  $("#from_date").datepicker({ dateFormat: "yy-mm-dd"}).datepicker("setDate", "0");
//  $("#to_date").datepicker({ dateFormat: "yy-mm-dd"}).datepicker("setDate", "0");
//    
     $("#get_invoice").click(function(){
    from_date=$("#from_date").val();     
    to_date=$("#to_date").val();     
   status="";
get_cusomers(from_date,to_date);
  });
    
    
   function get_cusomers(from_date,to_date) {
      tab.destroy();
   
           tab= $("#table1").DataTable({
                  "processing": true,
        "serverSide": true,
        "bPaginate":true, // Pagination True
      "sPaginationType":"full_numbers", // And its type.
       "iDisplayLength": 10,
        "ajax": {
           //  "url": "get_completed_tests_for_print_backup.php",
           url:"get_login_history.php", 
   data:{from_date:from_date,to_date:to_date},
   type:"POST",
   dataType:"JSON",
   
           
            "dataSrc": function (json1) {
          var return_data=new Array(); 
          var data=json1.data;
          var k=1;
          for(var i=0;i<data.length;i++){
          
        
        return_data.push({
              
          'sl':k++,
         "name":data[i].created_on,
         "inv":data[i].ip,
         "msisdn":data[i].device_name,
      
          
        });
       }
    $("#table1_filter").find("input").css({"width":"700px","margin-left":"-80%"});
       $("#table1_filter").find("input").attr("placeholder","Search date or ip address");
      return return_data;
       }
    
        } ,
          "columnDefs": [
        { 
            "targets": [ 0,1,2,3], //first column / numbering column
            "orderable": false, //set not orderable
        },
        ],
        "columns": [
           { "data": "sl" },
            { "data": "name" },
               { "data": "inv" },
                   { "data": "msisdn" },
                     
               
        ]
   
             });
              
                                    
       
}
get_cusomers("","");



    </script>
    <style>
        #table1 thead tr {
    background: green;
    color: white;
}
        
    </style>