 <?php
    session_start();
if(isset($_SESSION['userId'])){

}else{
echo "<script>window.location = 'http://www.principleacs.net/FTA_WEB_PORTAL/login.php';</script>";
        }

?>
 <!DOCTYPE html>
 <html>

 <head>
         <meta name="viewport" content="width=device-width, initial-scale=1">
     <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
     <link href="css/style.css" rel="stylesheet">
     <!--    <script src="imagehover.js"></script>-->
 </head>
<style>
     .table tr.secRow th {
    background: white;
    position: sticky;
    top: 39px;
}
     </style>
 <body>

     <div class="container-fluid">
         <div class="row">
             <div class="col-12">
                 <div class="headers mt-3">
                     <div class="row  position-fixed bg-white" style="top: 0;padding: 13px 0px;z-index: 20;box-shadow: 1px 1px 3px 1px #00000012;">
                         <div class="col-md-2 image ">
                             <img class="logoimg w-100" src="../defaultImages/Principle+ACS-Logo-PNG-Small.png" />
                         </div>
                         <div class="col-md-10 align-items-end d-flex">
                             <form id="idForm" class="w-100" action="/fetchTableData.php">
                                 <div class="form-row d-flex justify-content-end">
                                     <div class="form-group col-md-3">

                                         <input type="text" class="form-control d-none" value="<?php echo $_SESSION['userId']?>" required="true" name="empId">

                                     </div>
                                     <div class="form-group col-md-3">
                                         <label for="inputCity">From date</label>
                                         <input type="date" id="fromdate" name="fromDate" max="3000-12-31" min="1000-01-01" class="form-control" required="true">
                                     </div>
                                     <div class="form-group col-md-3">
                                         <label for="inputCity">To date</label>
                                         <input type="date" id="todate" name="toDate" max="3000-12-31" min="1000-01-01" class="form-control" required="true">
                                     </div>
                                     <div class="col-md-2 align-items-center d-flex">
                                         <button type="submit" id="search" class="btn"> <i class="fa fa-search font-weight-light"></i>
                                         </button>
                                         <div class="m-auto">
                                             <img src="../defaultImages/user.png" class="loggedUser rounded-circle" data-toggle="popover" title="<?php  echo '<b>EmpId </b>'.$_SESSION['userId']?>" data-content="<?php  echo '<b>Name: </b>'.$_SESSION['userName'].'<br><b>Email: </b>'.$_SESSION["userMail"].'<br><b>Department:</b>'.$_SESSION["teamLeads"]?> <br><a id='popoverInfobtn'class='btn btn-color mt-2 d-block ' href='../php/logout.php' >Log Out</a>" />
                                         </div>
                                     </div>
                                 </div>
                             </form>
                         </div>
                     </div>
                     <div class=" row table-row">
                         <div class="col-12 mt-2">
                             <label style="font-size: 11px;"><b>EMP NAME: </b><span id="empname"><?php echo $_SESSION['userName'] ?></span></label>
                         </div>
                         <div class="col-12 table-scroll">
                             <table class="table table-hover">
                                 <thead>
                                     <tr scop="row">
                                         <th rowspan="2" class="sticky-column col1" style="width:61px;">S.NO</th>
                                         <th rowspan="2" class="sticky-column col2" style="width:80px;">VISIT PROOF</th>
                                         <th rowspan="2" class="sticky-column col3" style="width:80px;">CLAIM STATUS</th>
                                         <th rowspan="2" class="sticky-column col4 px-4"style="width:80px;">DATE</th>
                                         <th rowspan="2" class="px-5" style="width:235px;">USER LOCATION ADDRESS</th>
                                         <th colspan="2">USER</th>
                                         <th rowspan="2" style="width:80px;">NO.OF SITES IN A DAY</th>
                                         <th rowspan="2" style="width:80px;">REPORT SUBMISSION STATUS (Y/N/WIP/O)</th>
                                         <th rowspan="2" style="width:80px;">MODE OF TRANSPORT</th>
                                         <th rowspan="2" style="width:80px;">SUPPORTING BILLS AVAILABLE (Y/N)</th>
                                         <th colspan="2">SITE VISIT (AM &amp; PM)</th>
                                         <th rowspan="2">DISTANCE (KM)</th>
                                         <th rowspan="2">FTA</th>
                                         <th rowspan="2">REMARKS</th>
                                         <th colspan="2">SITE</th>
                                         <th rowspan="2">SITE ID</th>
                                         <th rowspan="2">SITE NAME</th>
                                         <th rowspan="2" class="px-4">PROJECT</th>
                                         <th rowspan="2">CUSTOMER</th>
                                         <th rowspan="2" style="width:80px;">TOTAL DISTANCE (KM) </th>
                                         <th rowspan="2" style="width:80px;">DEPUTATION-ALLOWANCE</th>
                                         <th rowspan="2" style="width:80px;">DA- AMOUNT</th>
                                         <th rowspan="2">BILLS</th>
                                         <th rowspan="2">TOTAL</th>
                                         <th rowspan="2" id="imageTh">IMAGES</th>
                                         <th rowspan="2" id="imageTh" style="width:120px; padding: 0 75px;text-align:initial">REPORT STATUS</th>
                                     </tr>
                                     <tr class="secRow" scop="row">
                                         <th>LATITUDE</th>
                                         <th>LONGITUDE</th>
                                         <th>FROM</th>
                                         <th>TO</th>
                                         <th>LATITUDE</th>
                                         <th>LONGITUDE</th>
                                     </tr>
                                 </thead>
                                 <tbody id="inserted_item_data">
                                 </tbody>
                             </table>
                             <p class="text-danger text-center" id="nodata"> NO CLAIMS FOUND! </p>
                             <p class="bottomdata ml-2" style="display:none"><b>Grand Total: </b><span id="grandtotal"></span> </p>
                             <a href="#" class="btn  bottomdata downloadExcel btn-color ml-2" style="display:none">Download Excel</a>
                             <h6 class="ml-3 mt-3">Claim status:-</h6>
                             <p class="claim_status_symbols"><span> <i class="fa fa-check-square text-dark ml-3"></i>
                                 </span><span>Ready to claim</span>
                             <span> <i class="fa fa-check-square text-warning ml-3"></i>
                                 </span><span>claim pending</span>
                                 <span> <i class="fa fa-check-square text-primary ml-3"></i>
                                 </span><span>Approved</span>
                             <span>
                                  <i class="fa fa-times  text-danger ml-3"></i>
                                 </span><span>Rejected</span>
                             <span><i class="fa fa-check-square text-success ml-3"></i>
                                 </span><span>Reimbursed</span> </p>

                         </div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
     <!--for image zooming result-->
     <div id="myresult" class="img-zoom-result"></div>


 </body>
<script src="js/main.js"></script>
<script src="js/images-tl.js"></script>
 </html>
