<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta charset="utf-8" />
<title>Atimetrik-BCP</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<META HTTP-EQUIV="Pragma" CONTENT="no-cache" />
<META HTTP-EQUIV="Expires" CONTENT="-1" />
<link rel="icon" href="img/altimetrik_favicon.ico" type="image/x-icon" >
<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/bootstrap-datepicker.min.js" type="text/javascript"></script>
<script src="js/Chart.js"></script>
<script src="js/header.js"></script>
<script src="js/common.js"></script>
<script src="js/attendance.js"></script>
<script src="js/html2canvas.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/common.css" rel="stylesheet" />
<!-- <link href="css/bootstrap-glypicons.css" rel="stylesheet" /> -->
<link href="css/bootstrap-datepicker.min.css" rel="stylesheet" />
<script src="js/moment.js"></script>
</head>
<body>
	<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
	<div class="container extra_container">
		<a class="navbar-brand" href="#"> <img
			src="img/Altimetrik-Logo.svg" alt="">
		</a>
		<button class="navbar-toggler" type="button" data-toggle="collapse"
			data-target="#navbarResponsive" aria-controls="navbarResponsive"
			aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
		</button>
		<div class="collapse navbar-collapse" id="navbarResponsive">
			<ul class="navbar-nav ml-auto" style="margin-bottom:-20px;">
				<li class="nav-item dropdown">
				<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dashboard
				<span class="sr-only">(current)</span>
				</a>
				<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
			          <a class="dropdown-item" href="delivery.html">Delivery summary</a>
			          <a class="dropdown-item active" href="#">Attendance</a>
			        </div>
				
				</li>
				<li class="nav-item"><a class="nav-link" href="contact.html">Add
						Project 
				</a></li>
				<li class="nav-item dropdown"><a
						class="nav-link dropdown-toggle" href="#" id="navbarDropdown3"
						role="button" data-toggle="dropdown" aria-haspopup="true"
						aria-expanded="false">Admin actions <span class="sr-only">(current)</span>
					</a>
						<div class="dropdown-menu"
							aria-labelledby="navbarDropdownMenuLink">
							<a class="dropdown-item add_summary_access" href="today_summary.html">Add Summary</a>
							 <a class="dropdown-item add_file_upload_access" href="file_upload.html">File upload</a>
						</div></li>
				 <li class="nav-item dropdown" style="margin-top:-5px;">
			        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			          <img src="img/profile_icon.png" width="50" height="50" class="rounded-circle">
			        </a>
			        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
			          <a class="dropdown-item" href="#">View Profile</a>
			          <a class="dropdown-item"  method="GET" id="logout" href="/logout">Log Out</a>
			        </div>
			      </li> 
			</ul>
		</div>
	</div>
	</nav>

	<!-- Page Content -->
	
	<div class="container extra_container">
	<div id="uname"align="right" style="margin-right: 20px;"></div>
	</br>
	</br>
	<div class="row sticky">
			<div class='col-sm-3'>
				<select class="form-control" name="attendanceWiseType" id="attendanceWiseType">
					<option value="empty" disabled hidden>
						Select Attendance</option>
					<option value="ACCOUNT" selected>Accountwise</option>
					<option value="LOCATION" >Locationwise</option>
				</select> 
				<div id="attendanceWiseTypeMsg"></div>
			</div>
			
				<div class='col-sm-3' id="attendanceTypeValueDiv" style="display:block;">
				<select class="form-control" name="attendanceTypeValues" id="attendanceTypeValue">
				</select> 
				<div id="attendanceTypeValuesMsg"></div>
				</div>
				
				<!-- <div class='col-sm-2'>
				<select class="form-control" name="attendanceType" id="attendanceType">
					<option value="empty" disabled >
						SELECT ATTENDANCE TYPE</option>
					<option value="Marked">MARKED</option>
					<option value="Not Marked">NOT MARKED</option>
					<option value="Leave">LEAVE</option>
				</select> 
				<div id="attendanceTypeMsg"></div>
				</div>
				
				<div class='col-sm-2'>
				<select class="form-control" name="billingType" id="billingType">
					<option value="empty"  disabled>
						SELECT BILLING CATEGORY</option>
					<option value="all" selected>ALL</option>
					<option value="BILLED">BILLED</option>
					<option value="Tech UnBilled">TECH UNBILLED</option>
					<option value="NonTech Unbilled">NON-TECH UNBILLED </option>
				</select> 
				<div id="billingTypeMsg"></div>
				</div> -->
				
				<div class='col-sm-3'>
					<div class="form-group date" data-date-format="yyyy/mm/dd" data-date-end-date="0d" data-provide="datepicker">
						<div class="input-group-prepend">
	
							<input autocomplete="off" class="form-control" type="text" id="attandanceDate"
								placeholder="Select Date "> <span class="input-group-text">
								<span class="glyphicon glyphicon-calendar"></span>
						</div>
					</div>
					
					<div id="attendanceDateMsg"></div>
				</div>
				
				<div class='col-sm-3'>
				<button id="attendanceSubmit" class="btn btn-md btn-primary text-uppercase" type="submit">Submit</button>
				</div>
		</div>
		
		</br></br>
				
				<div class="row">
				<div class='col-sm-12'>
				<div id="loadingDiv" align ="center" style="display:none;">
					<img src="img/loading.gif" alt="Wait" style="width: 100px;height: 100px;"/>
				</div>
				  
				<table class="table table-bordered table-hover" id="attendancePercentTable" style=" position: relative;z-index: -1;">
				  
				  
				  
				  </table>
				  <!-- <button id="export" class="btn btn-md btn-primary text-uppercase" >Table Export</button> -->
				  </div>
				  </div>
				<br><br>
				<div class="conatiner" style="width:100%;height:600px;" align="center">
					<!-- <div class="col-md-12"> -->
	
						<div class="chart-container">
    						<canvas id="bar-chartcanvas"></canvas>
    						</br></br>
  						</div>
					<!-- </div> -->
				</div>
				
				</br></br>
				
				<div class="row">
				<div class='col-lg-12'>
					<table class="table table-bordered table-hover scroll" id="attendanceTable" style="float:left; margin-right:10px;max-height:500px;width:100%;font-size: 0.9rem !important;;word-wrap: break-word;table-layout: fixed;white-space: normal !important;z-index: -1;">
					  
					  </table>
				  </div>
				  </div>
	</div>
<div id="emailModal" class="modal fade" role="dialog">
		<div class="modal-dialog">

			<!-- Modal content-->
			<div class="modal-content">

				<div class="modal-body">
					<p id="emailmodalBody">
						
					</p>
				</div>
				<div class="modal-footer">
					<button id="emailNotificationYes" type="button" class="btn btn-success" data-dismiss="modal">YES</button>
					<button type="button" class="btn btn-warning" data-dismiss="modal">NO</button>
				</div>
			</div>

		</div>
	</div>
	
	
	<div id="NoRecordModal" class="modal fade" role="dialog">
		<div class="modal-dialog">

			<!-- Modal content-->
			<div class="modal-content">

				<div class="modal-body">
					<p style="padding: 15px 5px 3px 10px;"><b><font color="red">No records found!!</font></b></p>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
				</div>
			</div>

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