 <?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'>-->
     <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
     <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.6" 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 {
         cursor: pointer;
     }

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

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

     #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-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: 5px;
         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;
     }
    .sideNavBar{
     z-index: 2;
    background: #ffffff;
    font-size: 10px;
    width: 15.4vw;
     transition: 0.2s;
     border-right: 1px solid #e2e2e2;
    height: 82.1vh;
    }
    .empInfoCards{
   height: 83%;
    overflow: auto;
    }
    .divEmployeeInfo{
    margin: 4px;
    margin-left: 2px!important;
    cursor: pointer;
    box-shadow: 1px 1px 2px 0px #d4ccccab;
    border-radius: 4px;
    }
    #empInfoCard_divId{
    background-color:#fff;
    }
    .divEmployeeInfo.active {
        background:var(--theme-light-color) ;
}
.searchEmployeeInfo{
    border-bottom: 1px solid #00000017;
    /*height: 17%;*/
}

#sideNavBarMain select{
    /*border-color: #0000000d;*/
    border-color:#ced4da;
    height: 30px;
    border-radius: 5px;
    font-size: 10px;
}
#sideNavBarMain select.yearDropDown{
    width: 41%;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    padding: 0px 5px;
}
#sideNavBarMain select.monthDropDown{
    width: 60%;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

#sideNavBarMain input{
    border-color: #0000000d;
    height: 30px;
    border-radius: 5px;
    padding: 0 16px;
    width:70%;
    border:1px solid #ced4da;
}
#sideNavBarMain.inactive {
  width: 0;
  overflow-x: hidden;
  display:none;
 
}
#opensidenavMain{
    z-index: 21;
    top: 8%;
    background: #fff;
    border: 0;

}
#opensidenavMain:focus{
   outline:0; 
}
#opensidenavMain i{
    font-size:13px;
}
#empInfoCard_NoDataFound{
    display:none;
}
#SearchInputFortNight_form{
        display: flex;
    width: 91%;
    margin: auto;
    margin-bottom: 5px;
}
#SearchInputFortNight_form button{
    padding: 6px 11px;
    background: var(--theme-color);
    color: #fff;
    border: 0;
    border-radius:5px;
}
#SearchInputFortNight_form button i{
    margin:auto;
}
.reportSelectAll_Th{
    display:none;
}
#Allsubmissionloading_page, #allSubmitOkbtn{
    display:none;
}
#duplicatePaidDateBtn{
    background: var(--theme-color);
    padding: 3px 7px;
    margin-left: 5px;
    color: #ffff;
    box-shadow: 1px 0px 1px 1px grey;
    cursor:pointer;
}
.countIconTag{
    border-radius: 15px;
    padding: 1.9px 0px;
    font-size: 9px;
    display: inline-block;
    text-align: center;
    width: 17px;
}
.countIcons_div{
    margin-left: 10px;
}
.bg-violate{
    background-color: #008080;
}
.bg-paid-color{
    background-color: #00ff1f !important;
}
span.noOfNewClaims{
background-color: #ffc107!important;
    color: #fff;
    position: relative;
    top: -12px;
}
div.head_div{
    height: 12.5vh;
    display:flex;
}
div.head_div .col-md-12.columnDiv{
    display:grid;
    height: inherit;
}
.h-inherit{
    height: inherit;
}
div.bodyContent_div{
    height: 82.1vh;
}
div.footer_div{
    height: 5.4vh;
}
#fullviewIcon{
    position:absolute;
    top:0;
    right:0;
}
#fullviewIcon:hover{
   cursor:pointer; 
}
#claimDetailsFromFortNightTab_loder{
    background: transparent;
    border: 0;
    outline: none;
    font-size: 24px;
}
 </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">
                <button id="close_loadingPage_btn" class="border-0 bg-white position-absolute p-2" style="right: 0;height: 23px;border-radius: 11px; outline: 0;">
                    <i class="fa fa-times  text-dark d-block" style="font-size: 14px;"></i>
                </button>
                <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 id="Allsubmissionloading_page" class="loading-page position-absolute vw-100 vh-100 ">
            <section>
                <div class="align-content-center m-auto w-100 h-100 p-3">
                    <div class="allSubmitResultValues " style="box-shadow: none;">
                        <table class="border-none mb-2">
                            <tr>
                                <th><span class="text-success">Success</span></th>
                                <td>
                                    <p class="allSubmitSuccessResult mb-0" style="display: inline-block;">
                                        <span class="px-1">:</span><span class="noOfSuccess">0</span>/<span class="totalNoOfSubmits">0</span>
                                    </p>
                                </td>
                            </tr>
                            <tr>
                                <th><span class="failureTxt">No.of failure</span></th>
                                <td><span class="px-1">:</span><p class="submitFailureCount mb-0" style=" display: inline-block;">0</p></td>
                            </tr>
                        </table>
                        <!--<div style="display: inline-block;  box-shadow: none;">-->
                        <!--    <span class="text-success">Success: </span>-->
                        <!--    <p class="allSubmitSuccessResult ml-2 mb-0" style="display: inline-block;">-->
                        <!--        <span class="noOfSuccess">0</span>/<span class="totalNoOfSubmits">0</span>-->
                        <!--    </p>-->
                        <!--</div>-->
                        <!--<div style="display: inline-block;  box-shadow: none;">-->
                        <!--    <span class="failureTxt">No.of failure: </span>-->
                        <!--    <p class="submitFailureCount ml-2 mb-0" style=" display: inline-block;">0</p>-->
                        <!--</div>-->
                        <p class="mb-0 text-center" style="font-size: 10px;">Duration:<span class="submitDuration font-weight-bold"><span class="mins">00</span> : <span class="sec">00</span></span></p>
                    </div>
                    <div class="m-auto" style="box-shadow:none">
                        <button class="btn btn-theme-type1" id="allSubmitOkbtn" style="padding: 5px 30px;">OK</button>
                    </div> <!--<i class="fas fa-circle-notch fa-spin"></i>-->
                
                </div>

            </section>
        </div>
        <!---->
        
    
     <div class="container-fluid TL-Finance">
         <div class="row">
             <div class="col-12 p-0">
                 <div class="headers head_div w-100 pt-0 border-bottom">
                     <div class="row bg-white w-100 m-0 h-100" style="top: 0;z-index: 20;">
                         <div class="col-md-12 columnDiv bg-white">
                             <nav class="navbar navbar-expand-lg navbar-light h-inherit bg-white">
                                 <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 justify-content-center" 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">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>
                                                 <li class="nav-item">
                                                     <a class="nav-link nav-claim-link" href="#" id="TL_newClaims" data-claimStatus="1" data-pageNo="0">New Claims <span class="countIconTag noOfNewClaims">0</span><i class="fa fa-spinner fa-spin "></i></a>
                                                 </li>';

}?>


                                     </ul>
                                       <span id="fullviewIcon" data-toggle="tooltip" data-placement="bottom" title="Full Screen-view" data-value="min-view"><i class="fas fa-expand"></i></span>
                                     <!-------------------------------------- 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="DD-MM-YYYY">
                                                 To: <input type="text" id="toDateText" class="form-control text-dark font-weight-light text-center" name="Todate" required placeholder="DD-MM-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 btn-color 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>
                </div>
                     <!-------------------------------------- All claim details in Table Formate--------------------------------->
                <div class="bodyContent_div">
                     <div class=" row table-row h-100 m-0">
                         
                         <!-- side nav bar code-->
                        <div id="sideNavBarMain" class="sideNavBar position-absolute">
                                 <div class="searchEmployeeInfo px-2 pt-2 pb-1 text-center">
                                     <form id="SearchInputFortNight_form">
                                         <!--<input class="inputDate mb-1" type="month" name="monthYear" required style=" width: 75%;"/>-->
                                         <select class="form-control monthDropDown" name="month" required>
                                            <option value="All">All</option>
                                            <option value="01">January</option>
                                            <option value="02">February</option>
                                            <option value="03">March</option>
                                            <option value="04">April</option>
                                            <option value="05">May</option>
                                            <option value="06">June</option>
                                            <option value="07">July</option>
                                            <option value="08">August</option>
                                            <option value="09">September</option>
                                            <option value="10">October</option>
                                            <option value="11">November</option>
                                            <option value="12">December</option>
                                         </select>
                                         <select class="form-control yearDropDown" name="year" required></select>
                                         <button type="submit" class="d-flex justify-content-center ml-1" style=" width: 15%;"><i class="fa fa-search"></i></button>
                                     </form>
                                     <div class="localSearchNameEmpCircle m-auto d-flex" style=" width: 91%;">
                                         <input type="text" id="sideNavSearch_Input" placeholder="Name/EmpId" />
                                         <select class="form-control circleDropDown"></select>
                                     </div>
                                     <div class="countIcons_div text-left pt-1">
                                         <span class="countIconTag bg-secondary mr-2 text-white" id="notAtClaimIcon_count" data-claimStatusValue="0">0</span>
                                         <span class="countIconTag bg-warning mr-2" id="pendingIcon_count" data-claimStatusValue="1">0</span>
                                         <span class="countIconTag bg-primary text-white mr-2" id="tlApproveIcon_count" data-claimStatusValue="2">0</span>
                                         <span class="countIconTag bg-danger mr-2" id="rejectIcon_count" data-claimStatusValue="3">0</span>
                                         <span class="countIconTag bg-voilate mr-2 text-white" id="finApprovedIcon_count" data-claimStatusValue="4">0</span>
                                         <span class="countIconTag bg-paid-color" id="paidIcon_count" data-claimStatusValue="6">0</span>
                                        </div>
                                </div>
                                <div  class="empInfoCards">
                                    <div id="empInfoCard_divId">
                                        <!-----------------placeholder -------------------------->
                                    
                                        <!--end placeholder-------------------------------------->
                                        
                                    </div>
                                    <!--<div class="fortNightEmpInfo_loader text-center py-4 my-4"><i class="fa fa-spinner fa-pulse" style="font-size: 35px;"></i></div>-->
                                    <h5 id="empInfoCard_NoDataFound" class="text-center p-4  font-weight-bold">No FortNight Details Found.</h5>
                                </div>
                        </div>
                        <button id="opensidenavMain" class="opensidenav position-absolute px-3 py-1" data-butnStatus="open"><i class="fa fa-arrow-left"></i></button>
                        <!------------------------->
                         <div class="col-12 table-scroll">

                             <table id="main_tableTag" class="table table-hover mb-0">
                                 <thead id="inserted_tableHeading_data"></thead>
                                 <tbody id="inserted_tableBody_data">
                                 </tbody>
                             </table>
                             <div id="nodata" class="h-75">
                                 <img src="../defaultImages/noDataFoundImage.svg" class="w-25 h-75 m-auto d-flex opacity-25"/>
                                 <p class="text-danger text-center"> NO CLAIMS FOUND! </p>
                             </div>
                             <!-- <a href="#" class="btn  bottomdata downloadExcel btn-color ml-2 d-inline-block" data-toggle="modal" data-target="#DownloadExcelModal">Download Excel</a>-->


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


                         </div>
                     </div>
                     <!------------------------ended here-------------------->
                 </div>
                 <div class="footer_div">
                        <div class="d-flex w-100 position-fixed bg-white align-items-center h-inherit" style="bottom:0">
                                 <nav class="d-inline-block pagination-nav align-self-center h-inherit" 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"><i class="fa fa-arrow-down"></i></button></div>';
								}
								 ?>
								<div class="ml-auto mr-3 ">
								    <!--<p class="mb-0  mr-3 d-inline-block"><span style="font-weight: 700;">Grand Total-Amount: </span><span id="GrandTotalAmount">0</span></p>-->
								    <button id="GrandTotalAmount_btn" class="btn btn-theme-type1"  data-toggle="getGrandTotalAmount_Popover">View Details</button>
								    <button   class="btn btn-theme-type1 rounded-circle"  data-toggle="claim_status_guideDate__Popover" style="padding: 5.8px 9px;"><i class="fas fa-hand-pointer" style="font-size: 14px;"></i></button>
								</div>
                             
                             </div>
                     
                     
                 </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-------------------->

     
      <!-----------------------------------------------------------------POPUP's------------------------------------------------>
     <!------------------------------------------------ modal popup content ---------------------------------------------------->
     
    <!----------------------------------------------------------------transer individual claims popup model------------------------------->
        <div class="modal fade claimTransferModalpopup" id="transferClaimModal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <form id="form_transferClaimModal">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="mb-0">Transer Claim to Another TL</h5>
                    </div>
                    <div class="modal-body">
                        <table><tbody>
                            <tr><th>Emp Name</th><td>: <input type="text" class="empName" name="empName" readonly="readonly"  /></td></tr>
                            <tr><th>Emp Id</th><td>: <input type="text"  class="empId" name="empId"  readonly="readonly"  required/></td></tr>
                            <tr><th>Site Visited Date</th><td>:  <input type="text" class="siteVisitDate" name="siteVisitDate" readonly="readonly"   required/></td></tr>
                            <tr>
                                <th>Transfer to TL</th>
                                <td class="d-flex">
                                    <select  class="allTLDropDownList form-control d-inline w-100" name="allTLDropDownList"  required></select>
                                    <span class="retryTLDropDownRequest ml-2 btn " data-toggle="tooltip" data-original-title="Retry"><i class="fas fa-redo"></i></span>
                                </td>
                            </tr>
                            <tr class="d-none"><td><input type="number"  class="claimSerialNo" name="claimSerialNo" readonly="readonly"  required/></td></th></tr>
                            </tbody></table>
                    </div>
                    <div class="modal-footer">
                        <p class="messagePara text-success float-left font-weight-bold mr-auto" style="font-size: 13px;"></p>
                        <btton  type="button" class="btn btn-theme-type3" data-dismiss="modal">Close</btton>
                        <button type="submit" id="transferClaimSubmitbtn" class="btn btn-theme-type1 mt-0" >Transfer Claim</button>
                    </div>
                </div>
                </form>
            </div>
            
            
        </div>
    <!--end-->
    
    <!----------------------------------------------------------------transer fortNight claims popup model------------------------------->
        <div class="modal fade claimTransferModalpopup" id="transferFortNightClaimModal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <form id="form_transferFortNightClaimModal">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="mb-0">Transer FortNight Claim to Another TL</h5>
                    </div>
                    <div class="modal-body">
                        <table><tbody>
                            <tr><th>Emp Name</th><td class="w-50"><span>:</span> <input type="text" class="empName" name="empName" readonly="readonly"  /></td></tr>
                            <tr><th>Emp Id</th><td class="w-50"><span>:</span> <input type="text"  class="empId" name="empId"  readonly="readonly"  required/></td></tr>
                            <tr><th data-toggle="tooltip" title="Site visit dates between">Site-visit Dates</th><td class="d-flex w-100"><span>:</span>  <input type="text" class="fromDate" name="fromDate" readonly="readonly"  style="width:40%" required/><span style="width:20%"><b>TO</b></span><input type="text" class="toDate" name="toDate" readonly="readonly"  style="width:40%" required/></td></tr>
                            <tr><th>Fort Night</th><td><span>:</span>  <input type="text" class="fortNight" name="fortNight" readonly="readonly"   required/></td></tr>
                            <tr>
                                <th style="width:20%">Transfer to TL</th>
                                <td class="d-flex w-100">
                                    <select  class="allTLDropDownList form-control d-inline w-100" name="allTLDropDownList"  required></select>
                                    <span class="retryTLDropDownRequest ml-2 btn " data-toggle="tooltip" data-original-title="Retry"><i class="fas fa-redo"></i></span>
                                </td>
                            </tr>
                            <tr class="d-none"><td><input type="number"  class="claimSerialNo" name="claimSerialNo" readonly="readonly"  required/></td></th></tr>
                            </tbody></table>
                    </div>
                    <div class="modal-footer">
                        <p class="messagePara text-success float-left font-weight-bold mr-auto" style="font-size: 13px;"></p>
                        <btton  type="button" class="btn btn-theme-type3" data-dismiss="modal">Close</btton>
                        <button type="submit" id="transferFortNightClaimSubmitbtn" class="btn btn-theme-type1 mt-0" >Transfer Claim</button>
                    </div>
                </div>
                </form>
            </div>
            
            
        </div>
    <!--end--> 

     
     <div class="modal fade" id="AllsubmitWarningModal" tabindex="-1" role="dialog" aria-hidden="true">
         <div class="modal-dialog" role="document">
             <div class="modal-content">
                    <div class="modal-body">
                        <p>Do you want to submit selected claims ?</p>
                    </div>
                    <div class="modal-footer">
                         <button type="button" class="btn btn-theme-type3" data-dismiss="modal">Close</button>
                         <button type="button" id="submitSelectedClaims" class="btn btn-theme-type1  mt-0" data-dismiss="modal">Submit All</button>
                     </div>
             </div>
         </div>
    </div>
     <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>
    var USER_DEPARTMENT=<?php echo  json_encode($_SESSION["teamLeads"])?>;// using global  variable
    var USER_EMPID=<?php echo  json_encode($_SESSION["userId"])?>;// using global  variable
    var USER_NAME=<?php echo  json_encode($_SESSION["userName"])?>;// using global  variable
    
</script>

 <script src="js/checkSessionState.js?version= 1.8"></script>
 <script src="../js/constants.js?version= 2.3"></script>
 <script src="../js/dynamicDropdown_of_project_&_stageOfAudit.js?version= 2.0"></script>
 <script src="../js/HttpRequest.js?version= 1.9"></script>
 <script src="../js/checkForDuplicateBrowserTab.js?version=0.3"></script>
 <!-- <script src="js/downloadExcelRelatedUI.js?version =1.0"></script>-->
 <script src="../js/uniqueEmployeeId.js?version= 1.9"></script>
 <script src="js/timer.js?version=1.5"></script>
 <script src="js/sortRawJsonData.js?version=0.7"></script>
 <script src="js/pagnination.js?version=0.7"></script>
 <script src="js/generateUIExcel.js?version=0.7"></script>
 <script src="js/placeholder_loader.js?version=0.2"></script>
 <script src="js/main.js?version= 3.0"></script>
 <script src="js/SelectedTabRelatedImageDetails.js?version= 1.8"></script>
 <script src="js/imagesRelatedMain.js?version= 2.0"></script>
 <script src="js/downloadExcelLoader.js?version= 1.9"></script>
 <script src="js/imageZoomCalculations.js?version= 1.9"></script>
 <script src="js/reportSubmission.js?version= 1.9"></script>
 <script src="js/customJquery.js?version= 1.7"></script>
 <script src="js/SelectedTabRelatedHeadingFields.js?version= 2.1"></script>
 <script src="js/SelectedTabRelatedTableDataValueFields.js?version= 2.4"></script>

 </html>
