<?php 


include('uppernav.php');
ob_start();
session_start();

if(!isset($_SESSION['user'])) {
 header("Location: ../index.php");
 exit;
}


?>
<!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>Team Head | PTO request</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">

    <script>
        function filters(){

            window.history.pushState('object', document.title, location.href.split("?")[0]);
        }
    </script>


</head>

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

    <div id="pageloader">
        <img src="../images/loaderS.gif" alt="processing..." height="150px" width="200px" />
    </div>

  


    <?php  ?>



    <!-- Sidebar -->

    <?php 
      $tools="active";
      $leave = "active";
      include('sidebar.php');

      
       ?>
    <div id="content-wrapper">

        <div class="container-fluid">



            <!-- Breadcrumbs-->
            <ol class="breadcrumb">

                <li class="breadcrumb-item active">PTO Request</li>
            </ol>
   
            <h4>PTO Request</h4>
            <?php echo $alert.$_GET['alert']?>
            <div class="col-sm-12 col-md-12  col-lg-12 p-3 form-inline">
             
                
                    <button class="btn btn-primary" type="button" name="filter" id="filter"><i class="fa fa-filter"></i> Filter </button>  &nbsp 
                    <select name="status" id="status" class="form-control">
                    <?php 
                    switch($leavestat ){

                        case 'All': 
                        $all = "selected";
                        break;
                        case '0': 
                        $pending = "selected";
                        break;
                        case '1': 
                        $approved = "selected";
                        break;
                        case '4.1':
                        $declined = "selected";
                        break;



                    }
                    ?>
                     <option value="All" > All </option>
                    <option value="2" > Pending </option>
                    <option value="3"> Approved </option>
                    <option value="4.1" > Declined </option>
                    
                    </select> &nbsp
                    <select name="employee" id="employee" class="form-control">
                    <option value="All" > All </option>
                    <option value="Team Leader">Team Leader</option>
                    <option value="HR" >HR </option>
                    <option value="Senior Manager">Senior Manager </option>
            
                    <?php 
                    $statsql ="SELECT * FROM empinfo JOIN empdetails ON empinfo.empid = empdetails.detailid ";
                    $statres = mysqli_query($conn, $statsql);

               

                    while($statrow = mysqli_fetch_assoc($statres)){

                        if($statrow['empid'] == $employee){

                            echo'<option value="'.$statrow['empid'].'" selected>'.$statrow['empid'].'   '.$statrow['firstname'].' '.$statrow['surname'].'</option>';

                        }else{
                            echo'<option value="'.$statrow['empid'].'">'.$statrow['empid'].'   '.$statrow['firstname'].' '.$statrow['surname'].'</option>';

                        }

                       
            

                       


                    }
                    ?>
                    
                    </select>
                    
                   
 
            </div>
            <div class="col-sm-12 col-md-12  col-lg-12">
                
                <table class="table" id="tbl">
                    <thead class="thead-dark">
                        <tr class="thead-dark">
                            <th>Employee ID</th>
                            <th>Employee Name</th>
                            <th>Status</th>
                            <th>Type</th>
                            <th>Date</th>
                            <th>Duration</th>
                            <th>Team Head</th>
                            <th>HR</th>
                            <th>Manager</th>
                            <th>Action</th>
                        
                        </tr>

                    </thead>
                  
                </table>
           

          
















            <!-- Icon Cards-->

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

            <!-- Sticky Footer -->


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

    </div>
    <!-- /#wrapper -->
    <div id="view" class="modal fade" role="dialog">
        <div class="modal-dialog modal-md modal-dialog-centered">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title"> View Leave</h4>
                    <button type="button" class="close" data-dismiss="modal">×</button>

                </div>

                <div class="modal-body">
                    
                    <input type="hidden" name="id">
                    <div class="row">
                        <div class="col-6">
                            <label> Employee ID </label>
                            <input type="text" name="empid"  id="empid" class="form-control" readonly="">
                        </div>
                        <div class="col-6">
                            <label> Name </label>
                            <input type="text" name="name"  id="name" class="form-control"  readonly="">
                        </div>
                        <div class="col-6">
                            <label> Date Filed </label>
                            <input type="text" name="datefiled"  id="datefiled" class="form-control"  readonly="">
                        </div>


                        <div class="col-6">
                            <label> Leave Type </label>
                            <input type="text" name="leavetype"  id="leavetype"  class="form-control" readonly="">
                        </div>

                        <div class="col-6">
                            <label>Date </label>
                            <input type="text" name="date" id="date"  class="form-control" readonly="">
                        </div>
                        <div class="col-6">
                            <label> Duration </label>
                            <input type="text" name="duration"  id="duration" class="form-control" readonly="">
                        </div>

                        <div class="col-12">
                            <label> Notes </label>
                            <textarea name="reason"  id="reason"  cols="20" rows="8" placeholder="Reason" class="form-control" required="" readonly=""></textarea>

                        </div>

                    </div>
                </div>

                <div class="modal-footer">

                    <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fas fa-close"> </i> Close</button>
                </div>
            </div>
        </div>
    </div>
    
    <div id="approve" class="modal fade" role="dialog">
        <div class="modal-dialog modal-md modal-dialog-centered">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Approve Leave</h4>
                    <button type="button" class="close" data-dismiss="modal">×</button>

                </div>
                <div class="modal-body">
                    <input type="hidden" name="id">
                    
                    Are you sure you want to approve  leave
                    request?


                </div>

                <div class="modal-footer">
                    <button type="button" id="" class="btn btn-success modalApprove" name="approve"><i class="fas fa-check"> </i> Yes</button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fas fa-close"> </i> Cancel</button>
                </div>
            </div>
        </div>
    </div>

    <div id="disapprove" class="modal fade modaldis" role="dialog">
        <div class="modal-dialog modal-md modal-dialog-centered">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title"> View Leave</h4>
                    <button type="button" class="close" data-dismiss="modal">×</button>

                </div>

                <div class="modal-body">
                    
                    <input type="hidden" name="id">
                    <div class="row">
                        <div class="col-6">
                            <label> Employee ID </label>
                            <input type="text" name="dempid"  id="dempid" class="form-control" readonly="">
                        </div>
                        <div class="col-6">
                            <label> Name </label>
                            <input type="text" name="dname"  id="dname" class="form-control"  readonly="">
                        </div>
                        <div class="col-6">
                            <label> Date Filed </label>
                            <input type="text" name="ddatefiled"  id="ddatefiled" class="form-control"  readonly="">
                        </div>


                        <div class="col-6">
                            <label> Leave Type </label>
                            <input type="text" name="dleavetype"  id="dleavetype"  class="form-control" readonly="">
                        </div>

                        <div class="col-6">
                            <label>Date </label>
                            <input type="text" name="ddate" id="ddate"  class="form-control" readonly="">
                        </div>
                        <div class="col-6">
                            <label> Duration </label>
                            <input type="text" name="dduration"  id="dduration" class="form-control" readonly="">
                        </div>

                        <div class="col-12">
                            <label> Reason </label>
                            <textarea name="dreason"  id="dreason"  cols="20" rows="8" placeholder="Reason" class="form-control" required></textarea>

                        </div>

                    </div>
                </div>

                <div class="modal-footer">

                    <button type="button" id="" class="btn btn-success modalDisapprove" name="disapprove"><i class="fas fa-check"> </i> Yes</button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fas fa-close"> </i> Cancel</button>
                </div>
            </div>
        </div>
    </div>


    <!-- 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>

    <div id="leaveform" class="leaveform" hidden>
        <div class="container contain">
            <div class="row">
                <div class="col-lg-12">
                    <div class="align-middle">
                        <img src="../images/logo.jpg" class="float-left p-3" alt="" height="150px"
                            width="200px">
                        <br>

                        <h1 style="font-size: 60px">  ATV International ROHQ</h1>
                        <br>
                        <hr style="border: 2px solid black">

                    </div>

                    <h3 class="text-center">LEAVE FORM</h3>
                

                </div>
                
                <div class="col-4 p-3">
                    <b>NAME: <span id="fname"> </span> </b>
                </div>
                <div class="col-3 p-3">
                    <b>EMPLOYEE ID: <span id="fempid"> </span>  </b>
                </div>
                <div class="col-5 p-3">
                    <b>TEAM / DEPARTMENT:<span id="fteam"> </span>  </b>
                </div>

                <div class="col-6">
                    <div class="row p-1" id="leavelist">
                    


                    </div>
                    <div class="row p-1" id="leavelist2">


                        


                    </div>

                   
                </div>
                
                <div class="col-6">
                    <div class="row p-1" id="leavelist3">


                        

                 
                    </div>
                </div>





                <div class="col-12 border border-secondary">
                    <div class="row">
                        <div class="col-6">
                            LEAVE DATE: <span id="fleavedate"> </span> 

                        </div>
                        <div class="col-6">

                            # of Approved Leave <span id="fnoofapprovedleave"> </span> 

                        </div>
                    </div>



                </div>

                <div class="col-12 border-right border-left border-bottom border-secondary">
                    <div class="row">
                        <div class="col-6 p-2">
                        <br>
                            EMPLOYEE'S SIGNATURE OVER PRINTED NAME <br>
                            DATE FILED

                        </div>
                        <div class="col-6 p-2">
                                
                            :  <br>
                            :  <span id="fempname"> </span> <br>
                            :  <span class="fdatefiled"> </span> 

                        </div>
                    </div>



                </div>
                <div class="col-12 border-right border-left border-bottom border-secondary">
                    <div class="row">
                        <div class="col-6 p-2">
                        
                            NOTED BY <br>
                            Approver 1<br>
                            DATE FILED


                        </div>
                        <div class="col-6 p-2">

                            :  <br>
                            : <span id="fapprover1"> </span> <br>
                            :  <span class="fdatefiled"> </span> 

                        </div>
                    </div>



                </div>
                <div class="col-12 border-right border-left border-bottom border-secondary">
                    <div class="row">
                        <div class="col-6 p-2">
                            NOTED BY <br>
                            Approver 2 <br>
                            DATE FILED

                        </div>
                        <div class="col-6 p-2">
                            
                            :<br>
                            : <span id="fapprover2"> </span> <br>
                            :  <span class="fdatefiled"> </span> 
                        </div>
                    </div>



                </div>

                <div class="col-12 border-right border-left border-bottom border-secondary">
                    <div class="row">
                        <div class="col-6 p-2">

                            NOTED BY <br>
                            Approver 3<br>
                            DATE FILED

                        </div>
                        <div class="col-6 p-2">
                            

                            :  <br>
                            : <span id="fapprover3"> </span> <br>
                            :  <span class="fdatefiled"> </span> 

                        </div>
                    </div>



                </div>


                <div class="col-12 p-4">

                  
                    <p class="text-center">( FOR HUMAN RESOURCES ONLY )</p>
                
                    (<span id="fapproved"></span>) Approved (<span id="fdisapproved"></span> ) Disapproved (If Approval is NOT
                    RECOMMENDED, attach
                    explanation) <br> <br>

                    <div class="border border-round border-dark p-2" style="height: 100px">

                
                    <span id="freason"></span>
                    </div>
                    
                </div>
            


                <div class="col-6">
            
                    _____________________________________<br>

                    Human Resources Department/Date
                    
                    <br>
                    <br>

                    Leave File Number <u><span id="fleaveid"></span></u>


                </div>
                <div class="col-6 text-right">
                
                    <u>&nbsp &nbsp &nbsp
                    &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
                    <span id='fremainingpto'></span>&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp'</u><br>
                    REMAINING PTO CREDITS

                    <br>
                    <br>
                    Date Hire    <u><span id="fdatehire"></u>
                </div>

                <div class="col-12 p-1 text-center">
                    <hr style="border: 2px solid black">
                    <b>ATV International ROHQ </b> <br>
                    <small>3rd floor Yupangco Bldg. 1606 Investment Dr cor Trade Ave., <br>
                        Madrigal Business Park Ayala Alabang Muntinlupa City <br>
                        Tel No. 632.551.55.88
                    </small>

                </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>
    <script language="javascript" type="text/javascript">
    $(document).ready(function() {
        $("form").on("submit", function() {
            $("#pageloader").fadeIn();
        }); //submit

        $('#preloader').fadeOut();

         load_tbl();

         
        function load_tbl(status = 'All',emp ='All'){

            var tbl = $('#tbl').DataTable({
                serverSide: true,
                searching : false,
                ordering : false,
                paging : true,
            
                ajax : {
                    url: 'ptoapprovalajax.php',
                    type: "POST",
                    data : {
                        tbl : 1,
                        "status" : status,
                        "emp" : emp
                    }

                }
            });

        }
            

        $(document).on('click', '.viewButton', function(){
            var id = $(this).attr("id");

            $.ajax({
                type: "POST",
                url: "ptoapprovalajax.php",
                data: {
                    "view" : 1,
                    "id" : id
                },
                
                success: function (response) {
                    var jsonres = $.parseJSON(response);
                    $('#empid').val(jsonres.empid);
                    $('#name').val(jsonres.name);
                    $('#datefiled').val(jsonres.datefiled);
                    $('#leavetype').val(jsonres.leavetype);
                    $('#date').val(jsonres.date);
                    $('#duration').val(jsonres.duration);
                    $('#reason').val(jsonres.notes);
                    
                }
            });

        });

        $(document).on('click', '.approve', function(){
            var id = $(this).attr("id");

            $(".modalApprove").attr("id",id);


        });

        $(document).on('click', '.modalApprove', function(){
            var id = $(this).attr("id");
          
            $.ajax({
                type: "POST",
                url: "ptoapprovalajax.php",
                data: {
                    "approve" : 1,
                    "id" : id
                },
             
                success: function (response) {
                    $('#approve').modal('hide');

                    
                }
            });
        });

        $(document).on('click', '.disapprove', function(){
         
            var id = $(this).attr("id");

            $.ajax({
                type: "POST",
                url: "ptoapprovalajax.php",
                data: {
                    "view" : 1,
                    "id" : id
                },
                
                success: function (response) {
                    var jsonres = $.parseJSON(response);
                    $('#dempid').val(jsonres.empid);
                    $('#dname').val(jsonres.name);
                    $('#ddatefiled').val(jsonres.datefiled);
                    $('#dleavetype').val(jsonres.leavetype);
                    $('#ddate').val(jsonres.date);
                    $('#dduration').val(jsonres.duration);
       
                    $(".modalDisapprove").attr("id",id);
                    
                }
            });

            


        });

        $(document).on('click', '.modalDisapprove', function(){
            var id = $(this).attr("id");
            var reason = $('#dreason').val();


            
           
            $.ajax({
                type: "POST",
                url: "ptoapprovalajax.php",
                data: {
                    "disappprove" : 1,
                    "id" : id,
                    "reason" : reason
                },
             
                success: function (response) {

      

                   // alert('success');
                   
                    $('.modaldis').modal('hide');

                    
                }
            });
        });

        $(document).on('click', '.print', function(){

            var id = $(this).attr("id");

            $.ajax({
                type: "POST",
                url: "ptoapprovalajax.php",
                data: {
                    "print" : 1,
                    "id" : id
                },
      
                success: function (response) {

                    var jsonres = $.parseJSON(response);
                    $('#fname').text(jsonres.fname);
                    $('#fempid').text(jsonres.fempid);
                    $('#fteam').text(jsonres.fteam);
                    $('#fleavedate').text(jsonres.fleavedate);
                    $('#fnoofapprovedleave').text(jsonres.fnoofapprovedleave);
                    $('.fdatefiled').text(jsonres.fdatefiled);
                    $('#leavelist').html(jsonres.leavelist1);
    
                    $('#leavelist3').html(jsonres.leavelist3);

                    $('#fapproved').text(jsonres.fapproved);
                    $('#fdisapproved').text(jsonres.fdisapproved);
                    $('#freason').text(jsonres.freason);
                    $('#fdatehire').text(jsonres.fdatehire);
                    $('#fremainingpto').text(jsonres.fremainingpto);
                    $('#fleaveid').text(jsonres.fleaveid);

                    printContent('leaveform');
                    
                    
                }
            });

        });
        $("#filter").click(function(){

      
            var status = $('#status').val();
            var employee = $('#employee').val();

            if(status != '' && employee != '')
            {
                $('#tbl').DataTable().destroy();
                load_tbl(status, employee);
            }
 
        });


        setInterval( function () {
            $('#tbl').DataTable().ajax.reload( null, false ); // user paging is not reset on reload
        }, 3000 );

        function printContent(el) {

            /* var myWindow=window.open('','','width=200,height=100');
      
            var css = '@page { size: auto }  @media print {.contain { zoom: 100% } }',
                head = document.head || document.getElementsByTagName('head')[0],
                style = document.createElement('style');

            style.type = 'text/css';
            style.media = 'print';

            if (style.styleSheet) {
                style.styleSheet.cssText = css;
            } else {
                style.appendChild(document.createTextNode(css));
            }

            myWindow.document.head.appendChild(style);



            var restorepage = document.body.innerHTML;
            var printcontent = document.getElementById(el).innerHTML;
            myWindow.document.body.innerHTML = printcontent;
            myWindow.print();
            myWindow.document.body.innerHTML = restorepage; */
       
            var mywindow = window.open('', '_blank',);
            mywindow.document.write('<html><head><title></title>');
            mywindow.document.write('<link rel=\"stylesheet\" href=\"../vendor/bootstrap/css/bootstrap.min.css\" type=\"text/css\" media=\"all\"/>"');
            mywindow.document.write('<link rel=\"stylesheet\" href=\"../vendor/fontawesome-free/css/all.min.css\" type=\"text/css\" media=\"all\"/>"');
            mywindow.document.write('<link rel=\"stylesheet\" href=\"../css/sb-admin.css\" type=\"text/css\" media=\"all\"/>"');
            mywindow.document.write('<link rel=\"stylesheet\" href=\"../css/style.css\" type=\"text/css\" media=\"all\"/>"');
            mywindow.document.write('<style> @page { size: auto }  @media print {.contain { zoom: 100% } } </style>');
            mywindow.document.write('</head><body >');
            mywindow.document.write(el);

            var printcontent = document.getElementById(el).innerHTML;
            mywindow.document.body.innerHTML = printcontent;

            mywindow.document.write('</body></html>');

            mywindow.print();
            mywindow.close();

            return true;
        }


    }); //document ready



    </script>

</body>

</html>