<?php
    // ini_set('max_execution_time','120');
    session_start();
    include 'config.php';
    include 'Nav.php';
    error_reporting (E_ALL ^ E_NOTICE);
?>
<!DOCTYPE html>
<html>
<head>
   <!-- <meta http-equiv="refresh" content="120" >  -->
   <meta http-equiv="" content="" > 
	<title></title>
	   
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
 
    <!-- jQuery CDN -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 
    <!-- JavaScript CDN For BootStrap  -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <script src="C:\xampp\htdocs\ProjBenchmark\EmpAdmin\bootstrap-4.3.1-dist"> </script>
  
</head>
<style>
    .split.bor{
            margin-left:5%;
            transition: 1s; 
             /* margin-right:;  */
            margin-top:5%; 
           
        }
    #nav-toggle:checked ~ .split.bor
    {
        margin-left:20%;
        transition: 1s;
        /* margin-right:15%; */
        
    }
    table{
            width: 100%;
            height: auto;
         font-size: medium;
         /* border: 5px solid brown; */
        }
        th{
            color: #660000;
        }
    .container-table{
       
         margin-top:20px;
          height:350px;
          overflow-y: scroll;
          width:890px
        }
   .container-table::-webkit-scrollbar {
    display: none;
    /* height:5px;
    width: 5px;
    background: radial-gradient(farthest-side at 60% 55%, blue, green, yellow, black);
    border-radius: 10px; */


   }
  .btn-1{
    border: none;
    background-color: #ebe23d;
    color:#660000;
    font-weight: 500;
    padding: 10px 30px;
    border-radius: 6px;
    /* border-width: 1px; */
  }
  h6,h5{
      color: #660000;
  }
.btn-o{
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
/* border-color: #4a0912; */

}
.btn-o:focus{
    /* color : red; */
    border-bottom:5px solid #660000;
    border-left:5px solid #660000;
}

.btn-s{
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;

}
h5{
    text-align: center;
    /* font-style: italic; */
}
input.forms
{
    border:2px solid black;
    width:10%;
    border-radius: 15px;
    font-weight:700;
    text-align: center;
}
.head-container{
    background-color:#e8e7b5;
    width: 950px;
    border-radius: 22px;
    height: 40px;
    margin-top: -40px;
 
}
</style>

<body>
 
    <h5>Home</h5>
    <div class="container split bor">
    <div class="container">
    <div class="row">
        <div class="col-sm-3">
                    <form  action="" method = "POST" enctype="multipart/form-data">
                    <h5>Select Project Here:</h5>
                        <div class="form-group">
                            <select onchange="getcategoryList(this.value)" id="project_list" name="PROJECT" class="custom-select" style="border-radius:  15px 0px 15px 0px;">
                                <!-- <option>Select Project</option> -->
                                <option value="" ></option>
                            </select>
                        </div>
                        <div class="form-group">
                            <select onchange="getstageList(this.value)" id="category_list" name="CATEGORY" class="custom-select" style="border-radius: 15px 0px 15px 0px;">
                                <!-- <option>Select Category</option> -->
                                <option value=""></option>
                            </select>
                        </div>
                        <div class="form-group">
                            <select onchange="getprocessList(this.value)" id="stage_list" name="STAGE" class="custom-select" style="border-radius: 15px 0px 15px 0px;">
                                <!-- <option>Select Stage</option> -->
                                <option value=""></option>
                            </select>
                        </div>
                        <div class="form-group">
                            <select  onchange="getsubprocessList(this.value)" id="process_list" name="PROCESS"  class="custom-select" style="border-radius: 15px 0px 15px 0px;">
                                <!-- <option>Select Process</option> -->
                                <option value=""></option>
                            </select>
                        </div>
                        <div class="form-group">
                            <select id="subprocess_list" class="custom-select" name="SUBPROCESS" style="border-radius: 15px 0px 15px 0px;" required>
                                <!-- <option>Select Subprocess</option> -->
                                <option value=""></option>
                            </select>
                        </div>
                             <button class="btn btn-outline-primary btn-md" type="submit" name="submit" value="Submit" style="border-radius:15px;">Submit</button>
                </form>
                </div>
        
<script type="text/javascript">
	$(document).ready(function(){
        setInterval(function(){ $('#hello').load('home.php  #hello');}, 1000);
       let tag ="projectList"; 
       let select_menu=$('#project_list')[0]; // this expression is same as document.getElementById('dynamic_menu')
       $.ajax({
            url:"ajax.php",
            dataType:"json",
            method:"post",
            data:{tag:tag},
            success:function(response){
                //alert(response.length);
                console.log($.isArray(response)); // if response is an array, this function will return true
 
                response.forEach((item,index)=>{
                    console.log(index,item);
                    var option = document.createElement("option");
                    //  option.value = item['PROJECT'];
                    option.text = item['PROJECT'];
                    select_menu.appendChild(option);
                })
            }
        })
	});
    
    //Getting Item List on the basis of company_id
    function getcategoryList(PROJECT)
    {
        // alert(PROJECT);    
        // alert.getItemList(this.value);
        let tag = "categoryList";
       
        let itemMenu =$('#category_list')[0];
        //Removing all the old options from item list and model list and adding only one option in one go
        $('#category_list').empty().append('<option>Select Category</option>');
        $('#stage_list').empty().append('<option>Select Stage</option>');
        
        $.ajax({

            url:"ajax.php",
            dataType:"json",
            method:"post",
            data:{tag:tag,PROJECT:PROJECT},
           
            success:function(response){
                response.forEach((item,index)=>{
                    console.log(index,item);
                    // alert.log(index,item);
                    var option = document.createElement("option");
                    // option.text = item['PROJECT'];
                    option.text = item['CATEGORY'];
                    itemMenu.appendChild(option);
                })
            }
            
        })
            
    }
 
    //Getting model list on the basis of item id
    function getstageList(CATEGORY)
    {
        // alert(CATEGORY); 
        let tag = "stageList";
        let modelMenu =$('#stage_list')[0];
 
        //Removing all the select options and adding only one option in one go
        $('#stage_list').empty().append('<option>Select Stage</option>'); 
 
        $.ajax({
            url:"ajax.php",
            dataType:"json",
            method:"post",
            data:{tag:tag,CATEGORY:CATEGORY},
            success:function(response){
                response.forEach((item,index)=>{
                    console.log(index,item);
                    var option = document.createElement("option");
                    option.text = item['STAGE'];
                    modelMenu.appendChild(option);
                   
                })
            }
        })
    }
 
    function getprocessList(STAGE)
    {
        // alert(STAGE); 
        let tag = "processList";
        let modelMenu =$('#process_list')[0];
 
        //Removing all the select options and adding only one option in one go
        $('#process_list').empty().append('<option>Select Process</option>'); 
 
        $.ajax({
            url:"ajax.php",
            dataType:"json",
            method:"post",
           
            data:{tag:tag,STAGE:STAGE},
          
            success:function(response){
                response.forEach((item,index)=>{
                    console.log(index,item);
                    var option = document.createElement("option");
              
                    // option.text = item['CATEGORY'];
                    option.text = item['PROCESS'];
                    modelMenu.appendChild(option);
                   
                })
            }
        })
    }

    function getsubprocessList(PROCESS)
    {
        // alert(PROCESS); 
        let tag = "subprocessList";
        let modelMenu =$('#subprocess_list')[0];
        $('#subprocess_list').empty().append('<option>Select Subprocess</option>'); 
        $.ajax({
            url:"ajax.php",
            dataType:"json",
            method:"post",
            data:{tag:tag,PROCESS:PROCESS},
                success:function(response){
                response.forEach((item,index)=>{
                    console.log(index,item);
                    var option = document.createElement("option");
              
                    // option.text = item['CATEGORY'];
                    option.text = item['SUBPROCESS'];
                    modelMenu.appendChild(option);
                   
                })
            }
        })
    }
 
</script>

<?php

  if(isset($_POST['submit'])){
    $project           = $_POST['PROJECT'];
    $category          = $_POST['CATEGORY'];
    $stage             = $_POST['STAGE'];
    $process           = $_POST['PROCESS'];
    $subprocess        = $_POST['SUBPROCESS'];
    $empname           = $_SESSION['name'];
    date_default_timezone_set('Asia/Kolkata');
    $date =  date('Y-m-d H:i:s');
    if(empty($project))
    {
     
    }elseif(empty($category))
    {

    }elseif(empty($stage))
    {

    }elseif(empty($process)){

    }elseif(empty($subprocess))
    {

    }else{
    $up = "INSERT INTO empdata_tbl (PROJECT,CATEGORY,STAGE,PROCESS,SUBPROCESS,EMP,START_TIME) VALUES ('$project','$category','$stage','$process','$subprocess','$empname','$date')" ;
    $etupdq = mysqli_query($con, "UPDATE empdata_tbl SET END_TIME = '$date' where END_TIME IS NULL AND EMP='$empname'");
    $Query = mysqli_query($con, $up);
  }}
    ?>
     <script>
function openCity(cityName) {
  var i;
  var x = document.getElementsByClassName("city");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  document.getElementById(cityName).style.display = "block";  
}
</script>
<div class="col-sm-6">
<!-- <center>-->
<div class="container-fluid head-container" id="hello" >

<?php
                ini_set('max_execution_time','120');
                include "config.php";
                $_SESSION['login_time'];
                $log= $_SESSION['login_time'];
                $log1 =  substr($log ,strrpos($log,' ')+1);
                date_default_timezone_set('Asia/Kolkata');
                $curtime =  date (' H:i:s');
                $nm=$_SESSION['name'];
                $qry=mysqli_query($con,"SELECT COUNT(*) cnt FROM empdata_tbl WHERE EMP='$nm' and subprocess != 'LUNCHBREAK' AND left(START_TIME,10)=CURDATE()");
                $RES=mysqli_fetch_array($qry);
                $cnt = $RES['cnt'];
                 
                $qrytotal=mysqli_query($con," SELECT LEFT(SEC_TO_TIME(SUM(total_time)),8) as totaltime  from login_time  where name= '$nm' and LEFT(DATE,10) = CURDATE()");
                $tt=mysqli_fetch_array($qrytotal);
                $total_time = $tt['totaltime'];
                 

                $strttime   = strtotime($_SESSION['login_time']);
                $endtime    = strtotime($curtime);
                $diff= $endtime-$strttime;
                $_SESSION['DIF'] = $diff;
                
                
            
            ?>
          <label for="" class="font-weight-bold " style="margin-left:10px;font-family:Arial, Helvetica, sans-serif;padding-top:8px ;color:#c46518">Login At:</label></center>
          <input class="forms" type="text" value="<?php echo $log1; ?>" >
          <label for="" class="font-weight-bold " style="margin-left:30px;color:#4a0912;font-family:Arial, Helvetica, sans-serif">Last Login:</label>
          <input class="forms" type="text" value="<?php   echo gmdate("H:i:s",$diff);?>">
          <label for="" class="font-weight-bold " style="margin-left:40px;color:#2d2c7a;font-family:Arial, Helvetica, sans-serif">Lunch Time:</label>
          <?php
         $query1 =mysqli_query($con ,"SELECT project as Proj,subprocess as Sp,RIGHT(START_TIME,8) AS START_TIME,RIGHT(END_TIME,8) AS END_TIME,LEFT(SEC_TO_TIME(TIMESTAMPDIFF(SECOND,START_TIME,END_TIME)),8)AS TD from empdata_tbl where Emp='$nm' and subprocess = 'LUNCHBREAK' and  LEFT(START_TIME,10) =CURDATE()");
         $q=mysqli_fetch_array($query1);
         $lunch_brk = $q['TD'];
         $S= gmdate('H:i:s' ,1200);
       
          if($lunch_brk > $S)
          { ?>
          <input  class="forms text-danger" type="text" value="<?php echo $lunch_brk; ?>">
          <?php } else{?>
                <input  class="forms text-success" type="text" value="<?php echo $lunch_brk; ?>">
                <?php  } ?>
          <label for="" class="font-weight-bold text-primary" style="margin-left:25px;font-family:Arial, Helvetica, sans-serif"> Total Login Time:</label>
          <input  class="forms" type="text" id="count" value="<?php echo  ($total_time);?>">
</div>

<br>        
            <div class="col-sm-8">
                <div class="container-fluid" style="width:950px">
                    <center>
                    <div class="nav" style="padding-left:195px;">                
                    <button class="btn-1 btn-o" onclick="openCity('other')" autofocus>Other</button>
                    <button class="btn-1" onclick="openCity('pl')">PL</button>
                    <button class="btn-1" onclick="openCity('opl')">OPL</button>
                    <button class="btn-1" onclick="openCity('cc')">CC</button>
                    <button class="btn-1" onclick="openCity('pld')">PLD</button>
                    <button class="btn-1 btn-s" onclick="openCity('savings')">Savings</button>
                    </div>
                    </center>    
            <script>
            $(document).ready(function(){
            load_data();
            function load_data(query)
            {
                $.ajax({
                url:"searchresult.php",
                method:"POST",
                data:{query:query},
                success:function(data)
                {
                    $('#result').html(data);
                }
                });
            }
            $('#search').keyup(function(){
            var search = $(this).val();
            if(search != '')
            {
                load_data(search);
            }
            else
            {
                load_data();
            }
            });
        });
        </script>
                        <div class="container city" id  ="other" >
                             <h6>Table for Other Activities :</h6>
                                 <input type="text" name="search" id="search" placeholder="Search Subprocess..." class="form-control" style="width:200px;border-radius:70px;font-style: italic;"/>
                                    <div class="container-fluid  container-table">
                                        <table class="table table-bordered table-sm" id="result">
                                        </table>
                                    </div>
                        </div>

                <script>
            $(document).ready(function(){
            load_data();
            function load_data(query)
            {
                $.ajax({
                url:"searchresultpl.php",
                method:"POST",
                data:{query:query},
                success:function(data)
                {
                    $('#resultpl').html(data);
                }
                });
            }
            $('#searchpl').keyup(function(){
            var search = $(this).val();
            if(search != '')
            {
                load_data(search);
            }
            else
            {
                load_data();
            }
            });
        });
        </script>
                         <div class=" container city" id ="pl" style="display:none">
                                <h6>Table for PL Activities :</h6>
                                     <input type="text" name="searchpl" id="searchpl" placeholder="Search process..." class="form-control" style="width:200px;border-radius:70px;font-style: italic;"/>
                                        <div class="container-fluid  container-table">
                                            <table class="table table-bordered table-sm" id="resultpl">
                                            </table>
                                        </div>
                            </div>
                     <script>
            $(document).ready(function(){
            load_data();
            function load_data(query)
            {
                $.ajax({
                url:"searchresultopl.php",
                method:"POST",
                data:{query:query},
                success:function(data)
                {
                    $('#resultopl').html(data);
                }
                });
            }
            $('#searchopl').keyup(function(){
            var search = $(this).val();
            if(search != '')
            {
                load_data(search);
            }
            else
            {
                load_data();
            }
            });
        });
        </script>
                        <div class="container city" id="opl" style="display:none">
                            <h6>Table for OPL Activities :</h6>
                                <input type="text" name="searchopl" id="searchopl" placeholder="Search process..." class="form-control" style="width:200px;border-radius:70px;font-style: italic;"/>
                                    <div class="container-fluid  container-table">
                                        <table class="table table-bordered table-sm" id="resultopl">
                                        </table>
                                    </div>
                        </div>

                <script>
            $(document).ready(function(){
            load_data();
            function load_data(query)
            {
                $.ajax({
                url:"searchresultcc.php",
                method:"POST",
                data:{query:query},
                success:function(data)
                {
                    $('#resultcc').html(data);
                }
                });
            }
            $('#searchcc').keyup(function(){
            var search = $(this).val();
            if(search != '')
            {
                load_data(search);
            }
            else
            {
                load_data();
            }
            });
        });
        </script>
            
                            <div class="container city" id  ="cc" style="display:none">
                                <h6>Table for CC Activities :</h6>
                                    <input type="text" name="searchcc" id="searchcc" placeholder="Search Process..." class="form-control" style="width:200px;border-radius:70px;font-style: italic;"/>
                                        <div class="container-fluid  container-table">
                                            <table class="table table-bordered table-sm" id="resultcc">
                                            </table>
                                        </div>
                            </div>
                 <script>
            $(document).ready(function(){
            load_data();
            function load_data(query)
            {
                $.ajax({
                url:"searchresultsav.php",
                method:"POST",
                data:{query:query},
                success:function(data)
                {
                    $('#resultsav').html(data);
                }
                });
            }
            $('#searchsav').keyup(function(){
            var search = $(this).val();
            if(search != '')
            {
                load_data(search);
            }
            else
            {
                load_data();
            }
            });
        });
        </script>

                    <div class="container city" id  ="savings" style="display:none">
                         <h6>Table for Savings :</h6>
                           <input type="text" name="searchsav" id="searchsav" placeholder="Search process..." class="form-control" style="width:200px;border-radius:70px;font-style: italic;"/>
                              <div class="container-fluid  container-table">
                                <table class="table table-bordered table-sm" id="resultsav">
                                </table>
                             </div>
                    </div>



                    <script>
            $(document).ready(function(){
            load_data();
            function load_data(query)
            {
                $.ajax({
                url:"searchresultpld.php",
                method:"POST",
                data:{query:query},
                success:function(data)
                {
                    $('#resultpld').html(data);
                }
                });
            }
            $('#searchpld').keyup(function(){
            var search = $(this).val();
            if(search != '')
            {
                load_data(search);
            }
            else
            {
                load_data();
            }
            });
        });
        </script>

                    <div class="container city" id  ="pld" style="display:none">
                         <h6>Table for PLD:</h6>
                           <input type="text" name="searchpld" id="searchpld" placeholder="Search process..." class="form-control" style="width:200px;border-radius:70px;font-style: italic;"/>
                              <div class="container-fluid  container-table">
                                <table class="table table-bordered table-sm" id="resultpld">
                                </table>
                             </div>
                    </div>

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

</html>