
<!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, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Super Admin | Utilization</title>

    <!-- Bootstrap core CSS-->
    <link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom fonts for this template-->
    <link href="../vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">

    <!-- Page level plugin CSS-->
    <link href="../vendor/datatables/dataTables.bootstrap4.css" rel="stylesheet">

    <!-- Custom styles for this template-->
        <link href="../css/sb-admin.css" rel="stylesheet">
    <link href="../css/style.css" rel="stylesheet">
    <link rel="icon" href="../images/logo.jpg" type="image/gif" sizes="16x16">

  </head>

  <body id="page-top">
	<div id="preloader">
   		<img src="../images/loaderS.gif" alt="processing..." height="150px" width="200px"/>
	</div>

    <?php include('uppernav.php')?>



      <!-- Sidebar -->
      
      <?php 
       $admintools = "active";
       $util = "active";
      include('sidebar.php');
      ?>
      <div id="content-wrapper">

        <div class="container-fluid">

          <!-- Breadcrumbs-->
          <ol class="breadcrumb">
   
            <li class="breadcrumb-item active">Utilization</li>
          </ol>

        <nav>


            <div class="col-lg-12 p-2 form-inline" >
                <form method="POST">
                    <button type="button" class="btn btn-primary" id="filterb" name="utilfilter"><i class="fa fa-filter"></i> Filter</button> &nbsp
                    <select name="team" id="team" class="form-control" >
                
                    <option value="All" selected>All</option>
                        <?php 
                            $teamsql = "SELECT team FROM empdetails JOIN tbl_utilization ON tbl_utilization.empid =  empdetails.detailid  GROUP BY team";
                            $teamre = mysqli_query($conn, $teamsql);
                            while($teamrow = mysqli_fetch_assoc($teamre)){
                                if($teamrow['team'] == $team){

                                    echo '<option selected>'.$teamrow['team'].'</option>';

                                }else{

                                    echo '<option>'.$teamrow['team'].'</option>';

                                }
                                
                            }
                        ?>
                    </select> &nbsp

                    <input type="date" class="form-control" name="date" id="date" value="<?php echo $dateval?>">
                </form>


            



            </div>
            <div class="nav nav-tabs" id="nav-tab" role="tablist">
                <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Attendance</a>
                <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Utilization</a>

            </div>
        </nav>
        <div class="tab-content" id="nav-tabContent">
            <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                <div class="row p-3">
                <div class="col-lg-12"><h5>Employee Attendance</h5></div>
                  <div class="col-lg-5 my-custom-scrollbar my-custom-scrollbar-primary tableFixHead " id="attendance"></div>

                  <div class="col-lg-7 my-custom-scrollbar my-custom-scrollbar-primary tableFixHead util"></div>
                  
                    
                </div>

            </div>
            <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
              <div class="row p-3">
                <div class="col-lg-12"><h5>Employee Utilization</h5></div>

                <div class="col-lg-5 my-custom-scrollbar my-custom-scrollbar-primary tableFixHead " id="utiltbl"></div>

                <div class="col-lg-7 my-custom-scrollbar my-custom-scrollbar-primary tableFixHead util" ></div>
                  
                    
              </div>

            </div>

        </div>




    


  
          

          <!-- Icon Cards-->
      
        <!-- /.container-fluid -->

        <!-- Sticky Footer -->

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

    </div>
    <!-- /#wrapper -->

    <!-- Scroll to Top Button-->
    <a class="scroll-to-top rounded" href="#page-top">
      <i class="fas fa-angle-up"></i>
    </a>

    <!-- Logout Modal-->
    <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
            <button class="close" type="button" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
          <div class="modal-footer">
            <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
            <a class="btn btn-primary" href="login.html">Logout</a>
          </div>
        </div>
      </div>
    </div>

    <!-- Bootstrap core JavaScript-->
    <script src="../vendor/jquery/jquery.min.js"></script>
    <script src="../vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!-- Core plugin JavaScript-->
    <script src="../vendor/jquery-easing/jquery.easing.min.js"></script>

    <!-- Page level plugin JavaScript-->
    <script src="../vendor/chart.js/Chart.min.js"></script>
    <script src="../vendor/datatables/jquery.dataTables.js"></script>
    <script src="../vendor/datatables/dataTables.bootstrap4.js"></script>

    <!-- Custom scripts for all pages-->
    <script src="../js/sb-admin.min.js"></script>

    <!-- Demo scripts for this page-->
    <script src="../js/demo/datatables-demo.js"></script>
    <script src="../js/demo/chart-area-demo.js"></script>

</body>
<script type="text/javascript">

$(document).ready(function(){



    function loadatt(){
      var team = $("#team").val();
        var date = $("#date").val();

       
        $.ajax({

            url: "loadatttendance.php",
            data: {"team" : team, "date" : date},
            type: 'POST',
           
            success: function(response){

                $('#attendance').html(response);
             
            }

        });

    }

    function loadutil(){

      var team = $("#team").val();
        var date = $("#date").val();


               
        $.ajax({

        url: "loadutil.php",
        data: {"team" : team, "date" : date},
        type: 'POST',

        success: function(response){

            $('.util').html(response);
       
        
        }

        });


    }

    function utiltbl(){


      
      var team = $("#team").val();
        var date = $("#date").val();


               
        $.ajax({

        url: "loadutiltbl.php",
        data: {"team" : team, "date" : date},
        type: 'POST',

        success: function(response){

            $('#utiltbl').html(response);
       
        
        }

        });


    }
    

    
    loadatt();
    loadutil();
    utiltbl();
/*     $.("#filterb").on("click", function(){
      alert('you click the button');

    }); */






    $("#filterb").on("click", function(){

      loadatt();
      loadutil();
      utiltbl();


    });

    setInterval(function(){ 
        loadutil();
        utiltbl();
       
    }, 5000); 


});


</script>


</html>
