 <?php
    session_start();
if(isset($_SESSION['userId'])){
}else{
    //   echo "<script src='../js/constants.js?version= 1.4'></script>
    //       <script>window.location = BASE_URL+'login.php';</script>";
    header('location: ../login.php');
        }

?>
 <!DOCTYPE html>
 <html>

 <head>

     <meta http-equiv='cache-control' content='no-cache'>
     <meta http-equiv='expires' content='0'>
     <meta http-equiv='pragma' content='no-cache'>
     <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">-->
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">

     <link href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css' rel='stylesheet'>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
        
         <script type="text/javascript" src="//unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
         
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
     <link href="css/style.css?version= 0.3" rel="stylesheet">

 </head>
 <style>

     .TL-Finance .table-scroll .sticky-column.col2 {
         left: 42px;
     }

     .TL-Finance .table-scroll .sticky-column.col3 {
         left: 110.9px;
     }

     .TL-Finance .table-scroll .sticky-column.col4 {
         left: 179.6px;
     }

     .TL-Finance .table-scroll .sticky-column.col5 {
         left: 231.6px;
     }

     .TL-Finance .table-scroll .sticky-column.col6 {
         left: 288px;
     }

     .fa,.fas {
         cursor: pointer;
     }

     .dropdown-menu.show {
         background: #fff;
     }

     .dropdown-item:focus,
     .dropdown-item:hover {
         background-color: var(--theme-light-color);
     }

     #DownloadExcelModal .modal-dialog {
         max-width: 663px;
     }

     /*#userLatLng {*/
     /*    padding: 0 90px;*/
     /*}*/

     .dropdown-menu a.dwnbtn {
         padding: .25rem 1.5rem;
     }

     .ui-widget-header {
         border: 1px solid var(--theme-color);
         background: var(--theme-color);
         color: #ffffff;
         font-weight: bold;
     }

     #displayDateText input {
         border-image-slice: 1;
         border-image-source: linear-gradient(to left, var(--theme-color), var(--theme-color));
         border-width: 1px;
         width: 30%;
         font-size: 10px;
     }

/*     #search.btn,*/
     .btn-color:hover,
/*     #search.btn,*/
     .btn-color:active,
/*     #search.btn,*/
     .btn-color:focus {
         color: #000;
         background: transparent;
         box-shadow: none!important;
     }

/*     #search.btn,*/
     .btn-color {
         color: var(--theme-color);
         background: transparent;
         border: 0;
     }

     #searchEmpId {
         border-radius: 25px;
         border-color: var(--theme-color);
         font-size: 14px;
         width: 80%;
         margin-right: -40px !important;

     }

     .formDiv button.searchsubmit {
         position: relative;
         right: 3%;
         font-size: 14px;
     }

     #searchClaimForm {
         width: 33%;
     }
     input.distanceInputField,input.FTAInputField{
         display: inline-block;
         width: 90%
     }
     i.distanceEditBtn,i.ftaEditBtn{
          display: inline-block;
         width: 10%;
     }
     select.DA.form-control, td select.form-control{
         font-size: 10px;
    width: 90%;
    margin: auto;
     }
     td input.DaAmountInputField{
        font-size: 10px;
        width: 57px;
        padding: 6px 0px;
        display: inline-block;
        width: 90%;
     }
     td i.DA_EditBtn{
        width: 10%;
        display: inline-block;
     }

 </style>

 <body>
   <div id="loading_page" class="loading-page position-absolute vw-100 vh-100 d-none">
        <section>
            <div class="align-content-center m-auto w-100 h-100">
                <p class="m-auto"><button class="btn btn-theme-type1" id="connectionRetryBtn">Retry</button></p> <!--<i class="fas fa-circle-notch fa-spin"></i>-->
                <p class="loading-content m-auto text-danger">connection Time out</p>
            </div>

        </section>
    </div>
     <div class="container-fluid TL-Finance">
         <div class="row">
             <div class="col-12">
                 <div class="headers mt-3">
                     <div class="row  position-fixed bg-white  w-100" style="top: 0;z-index: 20;">
                         <div class="col-md-12" style="box-shadow: 1px 1px 3px 1px #00000012;">
                             <nav class="navbar navbar-expand-lg navbar-light">
                                 <a class="navbar-brand image w-25" href="#"><img class="logoimg" src="../defaultImages/Principle+ACS-Logo-PNG-Small.png" /></a>
                                 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                                     <span class="navbar-toggler-icon"></span>
                                 </button>

                                 <div class="collapse navbar-collapse" id="navbarSupportedContent">
                                     <ul class="navbar-nav mr-auto" style="width:67%">
                                         <!-----------------------------If financer loggedIn Navigations are-------------------------------->
                                         <?php
                                          include_once dirname(__FILE__) .'/../php/constants.php';
                                         if($_SESSION["teamLeads"]==FINANCE_DEPARTMENT){
                                                echo '<li class="nav-item nav-addNewSite">
                                                     <a class="nav-link" href="../">Home <i class="fa fa-spinner fa-spin mr-2"></i><span class="sr-only">(current)</span></a>
                                                 </li>
                                                 <li class="nav-item nav-newClaims">
                                                    <a class="nav-link nav-claim-link" href="#" id="New-claims" data-claimStatus="2" data-pageNo="0">All Claims<i class="fa fa-spinner fa-spin "></i></a>
                                                        </li>
                                                         <li class="nav-item">
                                                             <a class="nav-link nav-claim-link" href="#" id="financeApproved-claims" data-claimStatus="4" data-pageNo="0">Approved<i class="fa fa-spinner fa-spin "></i></a>
                                                         </li>
                                                         <li class="nav-item">
                                                             <a class="nav-link nav-claim-link" href="#" id="rejected-claims" data-claimStatus="5" data-pageNo="0">Rejected<i class="fa fa-spinner fa-spin "></i></a>
                                                         </li>
                                                         <li class="nav-item">
                                                             <a class="nav-link nav-claim-link" href="#" id="reimbursed-claims" data-claimStatus="6" data-pageNo="0">Paid Claims <i class="fa fa-spinner fa-spin "></i></a>
                                                         </li>';
//<!-----------------------------If TL loggedIn Navigations are-------------------------------->
                                                    }elseif($_SESSION["teamLeads"]==TL_DEPARTMENT){
                                            echo ' <li class="nav-item nav-addNewSite">
                                                     <a class="nav-link" href="../">Home <i class="fa fa-spinner fa-spin "></i><span class="sr-only">(current)</span></a>
                                                 </li>
                                                 <li class="nav-item nav-newClaims">
                                                     <a class="nav-link nav-claim-link" href="#" id="New-claims" data-claimStatus="1" data-pageNo="0">New Claims<i class="fa fa-spinner fa-spin "></i></a>
                                                 </li>
                                                 <li class="nav-item nav-approve">
                                                     <a class="nav-link nav-claim-link" href="#" id="Approved-claims" data-claimStatus="2" data-pageNo="0">Approved<i class="fa fa-spinner fa-spin "></i></a>
                                                 </li>
                                                 <li class="nav-item">
                                                     <a class="nav-link nav-claim-link" href="#" id="rejected-claims" data-claimStatus="3" data-pageNo="0">Rejected<i class="fa fa-spinner fa-spin "></i></a>
                                                 </li>
                                                 <li class="nav-item">
                                                     <a class="nav-link nav-claim-link" href="#" id="financeApproved-claims" data-claimStatus="4" data-pageNo="0">Finance Approved<i class="fa fa-spinner fa-spin "></i></a>
                                                 </li>';

}?>


                                     </ul>
                                     <!-------------------------------------- search Empid--------------------------------->
                                     <form id="searchClaimForm" class="form-inline my-2 my-lg-0  justify-content-center" data-pageno="0">
                                         <div id="displayDateText" class="text-right" style="font-size: 12px;color:var(--theme-color);top:67%;right: 4%; ">
                                             <b>From: <input type="text" id="fromDateText" class="form-control text-dark font-weight-light mr-2 text-center" name="Fromdate" required placeholder="MM/DD/YYYY">
                                                 To: <input type="text" id="toDateText" class="form-control text-dark font-weight-light text-center" name="Todate" required placeholder="MM/DD/YYYY">
                                             </b>
                                         </div>
                                         <div class="mt-2 formDiv" style="margin: auto;width: 100%;text-align: end;">
                                             <!--<i id="searchPopericon" class="fa fa-calendar" aria-hidden="true" style="position: absolute;padding: 11px;color:var(--theme-color);" data-toggle="searchPopover" data-original-title="" title=""></i>-->
                                             <input list="searchEmpidDropDown" class="form-control mr-sm-2 text-left pl-4" placeholder="Search Employee-Id" id="searchEmpId" name="searchEmpId" data-claimstatus="1" required="">
                                             <datalist id="searchEmpidDropDown">
                                                 <div id="search_unique_emp_ids">
                                                 </div>
                                             </datalist>
                                             <!--<button class="btn mt-0 btn-color searchsubmit" type="submit">
                                                 <i class="fa fa-search "></i><i id="searchSiteIdSpinner" class="fa fa-spinner fa-spin d-none"></i>
                                             </button>-->
                                             <button id="searchSubmitButton" class="btn mt-0 btn-color searchsubmit" type="submit">
                                                 <i class="fa fa-search "></i>
                                             </button>
                                         </div>
                                     </form>
                                     <!------------------------ended here-------------------->
                                     <div class="btn-group dropleft info_btn">
                                         <button type="button" class="btn bg-white" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                             <span class="info d-none">Info</span><i class="fa fa-ellipsis-v" aria-hidden="true"></i>
                                         </button>
                                         <div class="dropdown-menu p-0">
                                             <button class="dropdown-item border-bottom d-flex align-items-baseline py-2" type="button" data-toggle="popover" data-trigger="hover" title="<?php  echo '<b>EmpId </b><span>'.$_SESSION['userId'].'</span>'?>" data-content=''>About <i class="fa fa-user ml-auto"></i></button>
                                             <button class="dropdown-item d-flex align-items-baseline downLoadExcelbtn py-2" type="button" data-toggle="modal" data-target="#DownloadExcelModal">Download Excel <i class="fa fa-download ml-2" aria-hidden="true"></i></button>
                                             <!--                                             <button class="dropdown-item" type="button">Log out<i class="fa fa-power-off ml-2"></i></button>-->
                                             <a class='dropdown-item btn rounded-0  d-flex align-items-baseline dwnbtn' href=<?php include_once dirname(__FILE__) .'/../php/constants.php'; echo "../".LOGOUT_URL ?>>Log Out <i class="fa fa-power-off ml-auto"></i></a>
                                         </div>
                                     </div>
                                     <!-------------------------------------- only for backend fuctionalities--------------------------------->
                                     <div style="display:none">
                                         <p id=LoggeduserId><?php  echo $_SESSION['userId']?></p>
                                         <p id=LoggeduserName><?php  echo $_SESSION['userName']?></p>
                                         <p id=LoggeduserMail><?php  echo $_SESSION['userMail']?></p>
                                         <p id=LoggeduserDepartment><?php  echo $_SESSION['teamLeads']?></p>
                                     </div>
                                     <!------------------------ended here-------------------->
                                 </div>
                             </nav>
                         </div>

                     </div>
                     <!-------------------------------------- All claim details in Table Formate--------------------------------->
                     <div class=" row table-row">
                         <div class="col-12 table-scroll">
                             <table id="main_tableTag" class="table table-hover">
                                 <thead id="inserted_tableHeading_data"></thead>
                                 <tbody id="inserted_tableBody_data">
                                 </tbody>
                             </table>
                             <p class="text-danger text-center" id="nodata"> NO CLAIMS FOUND! </p>
                             <!-- <a href="#" class="btn  bottomdata downloadExcel btn-color ml-2 d-inline-block" data-toggle="modal" data-target="#DownloadExcelModal">Download Excel</a>-->


                             <!--------------------------------------   pagination -------------------------------------->

                             <div class="d-flex w-100 position-fixed bg-white align-items-center" style="bottom:0">
                                 <nav class="d-inline-block pagination-nav align-self-center" aria-label="...">
                                     <ul class="pagination mb-0">
                                         <li class="page-item">
                                             <button id="prevPage" class="page-link text-dark" href="#" data-claimStatus="1" data-pageNo="1"><span id="noOfPreviousPagesRemaining" class="px-2" style="font-size: 9px;">0</span><span class="px-2">&laquo;</span>Previous</button>
                                         </li>
                                         <li class="page-item">
                                             <button id="nextPage" class="page-link text-dark" href="#" data-claimStatus="1" data-pageNo="0">Next<span class="px-2">&raquo;</span><span id="noOfNextPagesRemaining" class="px-2" style="font-size: 9px;">0</span></button>
                                         </li>
                                     </ul>
                                 </nav>
                                 <?php
							 include_once dirname(__FILE__) .'/../php/constants.php';
								   if($_SESSION["teamLeads"]==FINANCE_DEPARTMENT){
								 echo '<div class="ml-1"><button id="download_UIexcel_btn" class="btn btn-theme-type1 py-1" data-toggle="tooltip" data-placement="top" title="Transform UI to Excel" style="font-size: 11px;"><i class="fa fa-arrow-down"></i></button></div>';
								}
								 ?>
                                 <div class="d-inline-block ml-auto mr-2">
                                     <h6 class="mb-0 d-inline-block">Claim status:-</h6>
                                     <p class="claim_status_symbols d-inline-block mb-0 ">
                                         <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>TL 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-violate ml-3"></i>
                                         </span><span>Finance Approved</span>
                                         <span><i class="fa fa-check-square  ml-3" style="color: #00ff1f !important;"></i>
                                         </span><span>Finance Paid</span>
                                     </p>
                                 </div>
                             </div>
                         </div>
                     </div>
                     <!------------------------ended here-------------------->
                 </div>
             </div>
         </div>
     </div>

     <div id="myresult" class="img-zoom-result"></div>
     <!-- -------------------------------------------bill image zoom preview -------------------------------------------->
     <div id="myImageModal" class="imageFullViewModal p-4">
         <span class="fullImageModelclose ">&times;</span>
         <div class="overflow-auto">
             <img id="fullImageId" class="imageModelContent" />
         </div>
         <div>
             <h2 class="mt-2">
                 <span class="fullImageRotateLeft mr-5">
                     <i class="fa fa-undo text-white"></i>
                 </span>
                 <span class="fullImageRotateRight">
                     <i class="fa fa-undo text-white" style="transform:scaleX(-1)"></i>
                 </span>
             </h2>
         </div>
         <div id="fullImageBillTitle" class='mb-4 text-white'></div>
         <div id="fullImageBillAmount" class="text-white"></div>
     </div>

     <!------------------------ended here-------------------->
     <!------------------------------------------------ modal popup content ---------------------------------------------------->

     <div class="modal fade" id="DownloadExcelModal" tabindex="-1" role="dialog" aria-labelledby="DownloadExcelModalLabel" aria-hidden="true">
         <div class="modal-dialog" role="document">
             <div class="modal-content">
                 <form id="downloadExcelFormId" class="w-100" action="php/FTAEXCEL.php">
                     <div class="modal-header">
                         <div class="col-md-6">
                             <label for="typeOfExcelSelect">Type of Excel</label><br>
                             <select class="form-control " id="typeOfExcelSelect" name="typeOfExcel">
                                 <option value="individual">INDIVIDUAL EMPLOYEE</option>
                                 <option value="bulk">BULK</option>
                             </select>
                         </div>
                         <div class="col-md-2">
                             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                 <span aria-hidden="true">&times;</span>
                             </button>
                         </div>
                     </div>
                     <div class="modal-body">
                         <div class="form-row d-flex ">
                             <div class="form-group col-md-4 employeeId">
                                 <label for="">EmployID</label>
                                 <input list=ExceldropDown class="form-control" placeholder="Emp Id" id="execelEmpID" required="true" name="empId">
                                 <datalist id="ExceldropDown">
                                     <div id="unique_emp_ids"></div>//<option></option> options from uniqueEmployeid.js
                                 </datalist>
                             </div>
                             <div class="form-group col-md-4">
                                 <label for="fromdate">From date</label>
                                 <input type="date" id="fromdate" name="fromDate" max="3000-12-31" min="1000-01-01" class="form-control dateInput" required="true">
                             </div>
                             <div class="form-group col-md-4">
                                 <label for="todate">To date</label>
                                 <input type="date" id="todate" name="toDate" max="3000-12-31" min="1000-01-01" class="form-control dateInput" required="true">
                             </div>
                         </div>
                     </div>
                     <div class="modal-footer">
                         <p class="m-auto text-danger" id="message"></p>
                         <button type="button" class="btn btn-theme-type3" data-dismiss="modal">Close</button>
                         <button type="submit" id="search" class="btn btn-theme-type1 mt-0">Download<i class="fa fa-spinner d-none fa-spin"></i></button>
                     </div>
                 </form>
             </div>
         </div>
     </div>
     <!------------------------ended here-------------------->
 </body>

 <script src="js/checkSessionState.js?version= 1.6"></script>
 <script src="../js/constants.js?version= 1.9"></script>
 <script src="../js/dynamicDropdown_of_project_&_stageOfAudit.js?version= 1.9"></script>
 <!-- <script src="js/downloadExcelRelatedUI.js?version =1.0"></script>-->
 <script src="js/sortRawJsonData.js?version=0.5"></script>
 <script src="js/pagnination.js?version=0.6"></script>
 <script src="js/generateUIExcel.js?version=0.5"></script>
 <script src="js/main.js?version= 1.7"></script>
 <script src="js/SelectedTabRelatedImageDetails.js?version= 1.9"></script>
 <script src="js/imagesRelatedMain.js?version= 1.7"></script>
 <script src="js/uniqueEmployeeId.js?version= 1.8"></script>
 <script src="js/downloadExcelLoader.js?version= 1.9"></script>
 <script src="js/imageZoomCalculations.js?version= 2.0"></script>
 <script src="js/reportSubmission.js?version= 2.1"></script>
 <script src="js/customJquery.js?version= 1.5"></script>
 <script src="js/SelectedTabRelatedHeadingFields.js?version= 1.9"></script>
 <script src="js/SelectedTabRelatedTableDataValueFields.js?version= 1.8"></script>

 </html>
