<kt-portlet>
	<kt-portlet-header [class]="'kt-portlet__head--lg'">
		<ng-container ktPortletTitle>
			<h3 class="kt-portlet__head-title">
				<span>{{Title}}</span>
			</h3>
		</ng-container>
    <ng-container ktPortletTools  class="d-flex justify-content-center align-items-center">
      <mwl-demo-utils-week-month-custom-calendar class="me-3" *ngIf="LoggedInMedium == 'webbrowser'"
                [view]="view"
                [viewDate]="viewDate"
                [PeriodStartDate]="StartDate"
                [PeriodEndDate]="EndDate"
                [Selectedview]= "Selectedview"
                (Start)="GetStartDate($event)"
                (End)="GetEndDate($event)">
            </mwl-demo-utils-week-month-custom-calendar>
            <div class="form-floating p-2" *ngIf="isAttendance!='0' && LoggedInMedium == 'webbrowser'">
              <select class="form-select form-select-solid" [(ngModel)]="selectedOrder" name="selectedOrder" placeholder="Sort by" (ngModelChange)="RefreshSort($event)">
                  <option value="" disabled selected>Sort by</option>
                  <option *ngFor="let item of OrderBy; let i = index;" [value]="item.name">{{ item.name }}</option>
              </select>
              <label for="selectedOrder">Sort by</label>
          </div>

          <div class="form-floating p-2" *ngIf="isAttendance!='0' && LoggedInMedium == 'webbrowser'">
              <select class="form-select form-select form-select-solid" [(ngModel)]="selectedPunchType" name="selectedPunchType" placeholder="Punch Type" (ngModelChange)="RefreshPunchType()">
                  <option value="" disabled selected>Punch Type</option>
                  <option *ngFor="let item of punchTypes; let i = index;" [value]="item.name">{{ item.name }}</option>
              </select>
              <label for="selectedPunchType">Punch Type</label>
          </div>
      <ng-container *ngIf="isAttendance =='0'">
        <div class="form-floating p-2">
          <label for="startHour">Time from</label>
          <select class="form-select form-select-solid" id="startHour" [(ngModel)]="StartHour" name="StartHour" (ngModelChange)="RefreshStartHour()">
            <option *ngFor="let item of DataArray" [value]="item.time">{{item.time}}</option>
          </select>
        </div>

        <div class="form-floating p-2">
          <label for="endHour">Time to</label>
          <select class="form-select form-select-solid

          " id="endHour" [(ngModel)]="EndHour" name="EndHour" (ngModelChange)="RefreshEndHour()">
            <option *ngFor="let item of DataArray" [value]="item.time">{{item.time}}</option>
          </select>
        </div>
      </ng-container>
      <div class="col p-3 ">
        <i class="fas fa-file-excel fs-2 me-3" ngbTooltip="Export" placement="bottom" (click)="GetRecentPunches_Print()"></i>
        <i class="fas fa-arrow-left fs-2" ngbTooltip="Back" placement="bottom" (click)="BackToDashboard()"></i>
      </div>
    </ng-container>
		<!-- <ng-container ktPortletTools>
			<mwl-demo-utils-week-month-custom-calendar *ngIf="LoggedInMedium == 'webbrowser'"
                [view]="view"
                [viewDate]="viewDate"
                [PeriodStartDate]="StartDate"
                [PeriodEndDate]="EndDate"
                [Selectedview]= "Selectedview"
                (Start)="GetStartDate($event)"
                (End)="GetEndDate($event)">
            </mwl-demo-utils-week-month-custom-calendar> 	<span class="space"></span> <span class="space"></span>
			<mat-form-field   [style.width.px]=80 style="margin-top: 2%" *ngIf="isAttendance!='0' && LoggedInMedium == 'webbrowser'">
					<mat-select [(ngModel)]="selectedOrder" name="selectedOrder" placeholder="Sort by"
					(ngModelChange)="RefreshSort($event)">
						<mat-option *ngFor="let item of OrderBy; let i = index;"
							[value]="item.name">
							{{ item.name }}
						</mat-option>
					</mat-select>
				</mat-form-field>
				<span class="space"></span>
			<mat-form-field style="margin-top: 2%" *ngIf="isAttendance!='0' && LoggedInMedium == 'webbrowser'">
				<mat-select [(ngModel)]="selectedPunchType" name="selectedPunchType" placeholder="Punch Type"
				(ngModelChange)="RefreshPunchType()">
					<mat-option *ngFor="let item of punchTypes; let i = index;"
						[value]="item.name">
						{{ item.name }}
					</mat-option>
				</mat-select>
			</mat-form-field>  	<span class="space"></span>  <span class="space"></span>
			<ng-container *ngIf="isAttendance =='0'">
				<mat-form-field  style="margin-top: 1.5%; width:80px " >
					<mat-select [(ngModel)]="StartHour"  name="StartHour"  (ngModelChange)="RefreshStartHour()" placeholder="Time from"  >
						<mat-option *ngFor="let item of DataArray;" [value]="item.time" >
							{{item.time}}
						</mat-option>
					</mat-select>
				</mat-form-field>
				<span class="space"></span> <span class="space"></span>
				<span class="space"></span> <span class="space"></span>
				<mat-form-field  style="margin-top: 1.5%;width:80px" >
					<mat-select [(ngModel)]="EndHour"  name="EndHour"  (ngModelChange)="RefreshEndHour()" placeholder="Time to"  >
						<mat-option *ngFor="let item1 of DataArray;" [value]="item1.time" >
							{{item1.time}}
						</mat-option>
					</mat-select>
				</mat-form-field>
				<span class="space"></span> <span class="space"></span>
				<span class="space"></span> <span class="space"></span>
			</ng-container>

			<button type="button" *ngIf="ShowExcelExport" class="btn btn-clean btn-sm btn-icon btn-icon-md btn-color-primary btn-active-light-primary"
			ngbTooltip="Back" placement="left" (click)="GetRecentPunches_Print()">
			  <i class="fa fa-file-excel-o" style="color:yellowgreen "></i>
		    </button>
			<span class="space"></span>
			<button type="button" class="btn btn-clean btn-sm btn-icon btn-icon-md btn-color-primary btn-active-light-primary"
			ngbTooltip="Back" placement="left" (click)="BackToDashboard()">
			  <i class="flaticon2-left-arrow-1" ></i>
		    </button>
		</ng-container> -->
	</kt-portlet-header>
	<kt-portlet-body >
        <div class="row" *ngIf="LoggedInMedium != 'webbrowser'">
			<div class="col-md-4 " align="center">
				<mwl-demo-utils-week-month-custom-calendar
                [view]="view"
                [viewDate]="viewDate"
                [PeriodStartDate]="StartDate"
                [PeriodEndDate]="EndDate"
                [Selectedview]= "Selectedview"
                (Start)="GetStartDate($event)"
                (End)="GetEndDate($event)">
            </mwl-demo-utils-week-month-custom-calendar>
			  </div>
			<div class="col-md-5 col-sm-5" align="center" *ngIf="isAttendance != '0'">
        <div class="form-floating p-2" >
          <select class="form-select form-select form-select-solid" [(ngModel)]="selectedPunchType" name="selectedPunchType" placeholder="Punch Type" (ngModelChange)="RefreshPunchType()">
              <option value="" disabled selected>Punch Type</option>
              <option *ngFor="let item of punchTypes; let i = index;" [value]="item.name">{{ item.name }}</option>
          </select>
          <label for="selectedPunchType">Punch Type</label>
      </div>
        <div class="form-floating p-2">
          <select class="form-select form-select-solid" [(ngModel)]="selectedOrder" name="selectedOrder" placeholder="Sort by" (ngModelChange)="RefreshSort($event)">
              <option value="" disabled selected>Sort by</option>
              <option *ngFor="let item of OrderBy; let i = index;" [value]="item.name">{{ item.name }}</option>
          </select>
          <label for="selectedOrder">Sort by</label>
      </div>


				<!-- <mat-form-field   [style.width.px]=150 style="margin-top: 2%">
					<mat-select [(ngModel)]="selectedPunchType" name="selectedPunchType" placeholder="Punch Type"
					(ngModelChange)="RefreshPunchType()">
						<mat-option *ngFor="let item of punchTypes; let i = index;"
							[value]="item.name">
							{{ item.name }}
						</mat-option>
					</mat-select>
				</mat-form-field>
				<span class="space"></span>
				<mat-form-field   [style.width.px]=80 style="margin-top: 2%" *ngIf="isAttendance!='0'">
						<mat-select [(ngModel)]="selectedOrder" name="selectedOrder" placeholder="Sort by"
						(ngModelChange)="RefreshSort($event)">
							<mat-option *ngFor="let item of OrderBy; let i = index;"
								[value]="item.name">
								{{ item.name }}
							</mat-option>
						</mat-select>
					</mat-form-field> -->
	    	</div>
		</div>
		<div *ngIf="ListLength <= 0">
			<div class="mat-table__message" style="text-align: center">No records found</div>
	    </div>
		<div *ngIf="ListLength > 0">
			<div *ngIf="viewLoading == true">
				<br>
				<mat-spinner [diameter]="30" style="margin-left: 50%; margin-right: 50%;"></mat-spinner>
			</div>
			<div class="row" *ngIf="viewLoading == false">
			    <div class="col-xl-12">
			<div class="table-responsive">
				<table class="table mat-table" *ngIf="Module != 'ESS'">
				<tr style="font-family: 'Roboto';  z-index: 2; font-size: 12px; color:  rgba(83, 83, 83, 0.54)">
					<th  >Employee</th>
					<th style="width: 8%">Punch Time</th>
					<th style="width: 7%">In/Out</th>
					<th  *ngIf="selectedPunchType == 'All Punches' || selectedPunchType == 'Device Punches'" style="width: 12%">Device</th>
					<th  *ngIf="selectedPunchType == 'All Punches' || selectedPunchType == 'Device Punches'" style="width: 10%">Zone</th>
					<th  *ngIf="selectedPunchType != 'Device Punches' && isAttendance!='0' " style="width: 10%">GPS Location</th>
					<th  *ngIf="selectedPunchType != 'Device Punches'  && isAttendance!='0' "style="width: 11%">Punched Location</th>
					<th style="width: 15%">Department</th>
				</tr>
		        <ng-container *ngFor="let employee of RecentPunchlist">
					<tr style="cursor:pointer; padding:0px; font-size: 13px" (click)="setClickedRow(employee.EmpId)">
						<td>
							<span class="space"></span>
							<img *ngIf="employee.Gender == 1" src="assets/images/application_toolbar/man.png" style="float:center;cursor: pointer;border-radius: 50%;" width="20" height="20">
							<img *ngIf="employee.Gender == 2" src="assets/images/application_toolbar/woman.png" style="float:center;cursor: pointer;border-radius: 50%;" width="20" height="20">
							<img *ngIf="!employee.Gender" src="assets/images/application_toolbar/profile.png" style="float:center;cursor: pointer;border-radius: 50%;" width="20" height="20">
							<span class="space"></span>
							<span class="badge badge-light-warning fs-8 fw-bolder" style="width: 50px">
									{{employee.EmpEno}}
							</span><span class="space"></span>
							<span style="color: yellowgreen">{{employee.FullName}}</span>
						</td>
						<td >{{employee.PunchTime}}</td>
						<td>
							<span style="background-color:  #c9f7f5;" *ngIf="employee.PunchType == 'IN'"  class="style_badge">{{employee.PunchType}}</span>
							<span style="background-color: #ffe2e5;"  *ngIf="employee.PunchType == 'OUT'" class="style_badge">{{employee.PunchType}}</span>
						</td>
						<td  *ngIf="selectedPunchType == 'All Punches' || selectedPunchType == 'Device Punches'">{{employee.Device}}</td>
						<td  *ngIf="selectedPunchType == 'All Punches' || selectedPunchType == 'Device Punches'">{{employee.Zone}}</td>
						<td  *ngIf="selectedPunchType != 'Device Punches'  && isAttendance!='0' ">
						<span *ngIf="employee.GPSLocation != ''">{{employee.GPSLocation}}</span>
						<span *ngIf="employee.GPSLocation == ''">No Location Found</span>
						</td>
						<td  *ngIf="selectedPunchType != 'Device Punches'  && isAttendance!='0' ">{{employee.PunchLocation}}</td>
						<td ><span style="background-color: gold;" class="style_badge">{{employee.Departmentcode}}</span><span class="space"></span> <span style="background-color: deepskyblue;" class="style_badge">{{employee.LocationCode}}</span></td>
					</tr>
				</ng-container>
			</table>

			<table class="table mat-table" *ngIf="Module == 'ESS'">
				<tr style="font-family: 'Roboto';  z-index: 2; font-size: 12px; color:  rgba(83, 83, 83, 0.54)">
					<th style="width: 7%">In/Out</th>
					<th style="width: 12%">Punch Date</th>
					<th style="width: 8%">Punch Time</th>
					<th  *ngIf="selectedPunchType == 'All Punches' || selectedPunchType == 'Device Punches'" style="width: 12%">Device</th>
					<th  *ngIf="selectedPunchType == 'All Punches' || selectedPunchType == 'Device Punches'" style="width: 10%">Zone</th>
					<th  *ngIf="selectedPunchType != 'Device Punches' && isAttendance!='0' " style="width: 10%">GPS Location</th>
					<th  *ngIf="selectedPunchType != 'Device Punches'  && isAttendance!='0' "style="width: 11%">Punched Location</th>
				</tr>
		        <ng-container *ngFor="let employee of RecentPunchlist">
					<tr style="cursor:pointer; padding:0px; font-size: 13px" (click)="setClickedRow(employee.EmpId)">
						<td>
							<span style="background-color:  #c9f7f5;" *ngIf="employee.PunchType == 'IN'"  class="style_badge">{{employee.PunchType}}</span>
							<span style="background-color: #ffe2e5;"  *ngIf="employee.PunchType == 'OUT'" class="style_badge">{{employee.PunchType}}</span>
						</td>
						<td>
							<span class="badge badge-light-warning fs-8 fw-bolder" style="width: 100px">
								{{employee.PunchDate | date: 'mediumDate'}}
							</span>
						</td>
						<td >{{employee.PunchTime}}</td>

						<td  *ngIf="selectedPunchType == 'All Punches' || selectedPunchType == 'Device Punches'">{{employee.Device}}</td>
						<td  *ngIf="selectedPunchType == 'All Punches' || selectedPunchType == 'Device Punches'">{{employee.Zone}}</td>
						<td  *ngIf="selectedPunchType != 'Device Punches'  && isAttendance!='0' ">
						<span *ngIf="employee.GPSLocation != '' && employee.GPSLocation != 'null'">{{employee.GPSLocation}}</span>
						<span *ngIf="employee.GPSLocation == '' || employee.GPSLocation == 'null'">No Location Found</span>
						</td>
						<td  *ngIf="selectedPunchType != 'Device Punches'  && isAttendance!='0' "
						><span *ngIf="employee.PunchLocation != '' && employee.PunchLocation != 'null'">{{employee.PunchLocation}}</span>
						<span *ngIf="employee.PunchLocation == '' || employee.PunchLocation == 'null'"></span>

					</td>
					</tr>
				</ng-container>
			</table>
		</div>

		<div class="row" >
			<div class="col-md-12" align="right">
			<div class="btn-group">
				<!-- <div class="row" >
				<div  class="btn btn1" *ngIf="LoggedInMedium == 'webbrowser'">
          <div class="form-floating">
            <select class="form-select" [(ngModel)]="PageSize" name="PageSize" (change)="RefreshPage()">
              <option *ngFor="let item of pageSizeOptions; let i = index;" [value]="item">{{ item }}</option>
            </select>
            <label for="PageSize">Items per page:</label>
          </div>
				</div>
				<div  class="btn btn1" *ngIf="pager.pages && pager.pages.length">
					<span style="font-family: 'Roboto';  z-index: 2; font-size: 12px; color:  rgba(83, 83, 83, 0.54)">
							{{this.StartIndex}} to {{this.EndIndex}} of {{pager.totalItems}}
					</span>
				</div>
				</div> -->
          <div class="row mt-3 align-items-start">
              <div class="form-floating" *ngIf="LoggedInMedium == 'webbrowser'">
                <select class="form-select" [(ngModel)]="PageSize" name="PageSize" (change)="RefreshPage()">
                  <option *ngFor="let item of pageSizeOptions; let i = index;" [value]="item">{{ item }}</option>
                </select>
                <label for="PageSize">Items per page:</label>
            </div>
          </div>
          <div class="row align-items-center">
          <div class="col mt-3">
            <div class="btn btn1" *ngIf="pager.pages && pager.pages.length">
              <span style="font-family: 'Roboto'; font-size: 12px; color: rgba(83, 83, 83, 0.54)">
                {{this.StartIndex}} to {{this.EndIndex}} of {{pager.totalItems}}
              </span>
            </div>
          </div>
        </div>

				<div class="row" >
				<ul *ngIf="pager.pages && pager.pages.length" class="pagination" >
				<li ngbTooltip="First Page" style="cursor: pointer;">
					<button [disabled]="pager.currentPage === 1" type="button" class="btn btn1 mt-3"  (click)="PageSetup(1)">
					<b>|<span class="space"></span> </b><i class="fa fa-chevron-left"  style="cursor: pointer; font-size:14px;"></i>
					</button>
				</li>
				<li ngbTooltip="Previous" style="cursor: pointer;">
					<button type="button" class="btn btn1  mt-3" [disabled]="pager.currentPage === 1" (click)="PageSetup(pager.currentPage - 1)">
					<i class="fa fa-chevron-left" style="cursor: pointer;font-size:14px;" [style.color]="TextColor"></i>
					</button>
				</li>

				<li ngbTooltip="Next" style="cursor: pointer;" >
					<button type="button" class="btn btn1  mt-3" [disabled]="pager.currentPage === pager.totalPages" (click)="PageSetup(pager.currentPage + 1)">
					<i class="fa fa-chevron-right" style="cursor: pointer;font-size:14px;" [style.color]="TextColor"></i>
					</button>
				</li>

				<li ngbTooltip="Last Page" style="cursor: pointer;">
					<button type="button" class="btn btn1  mt-3" [disabled]="pager.currentPage === pager.totalPages" (click)="PageSetup(pager.totalPages)">
					<i class="fa fa-chevron-right" style="cursor: pointer;font-size:14px;padding:0"></i><b><span class="space"></span> |</b>
					</button>
				</li>
				</ul>
				</div>
			</div>
			</div>
		</div>

</div>
</div>
	</div>
</kt-portlet-body>
</kt-portlet>


<div id="print-section-ngx" style="display: none; size: landscape; background-color: white">
	<kt-notice  id="excel-table">
		  <table class="table mat-table table-bordered" style="border-collapse: collapse;">
			  <ng-container  *ngFor="let employee of CompanyHeader;">
				<tr>
				  <td colspan="6" style="text-align: left; font-size: 12px">
					<b>{{ employee.EmployerName }} <br></b>
					{{ employee.EmployerAddress1 }}<br> {{ employee.EmployerAddress2 }}
				  </td>
				  <td colspan="5" style="text-align: right">
					<span *ngIf="CompanyLogo">
					  <img align="right" width="150" height="50" [src] ="CompanyLogo" style="margin-right:10px; margin-top: 5px">
					</span>
				  </td>
				</tr>
			  </ng-container>
			  <tr>
				<td colspan="11"  style="text-align: center;font-size: 14px; padding: 5px">
					<span class="kt-widget12__value" style="font-size: 17px"><b>{{printTitle}} ({{DisplayBgnDate | date: 'mediumDate'}} - {{DisplayEndDate | date: 'mediumDate'}} )</b> </span>
				</td>
			  </tr>
			  <tr style="font-size:11px;">
				<th width="7%" style="border: 1px solid rgba(156, 155, 155, 0.911);"><b>Date</b></th>
				<th width="7%" style="border: 1px solid rgba(156, 155, 155, 0.911);"><b>Employee Id</b></th>
				<th width="18%" style="border: 1px solid rgba(156, 155, 155, 0.911);">Employee Name</th>
				<th width="7%" style="border: 1px solid rgba(156, 155, 155, 0.911);">Location</th>
				<th width="7%" style="border: 1px solid rgba(156, 155, 155, 0.911);">Department</th>
				<th width="7%" style="border: 1px solid rgba(156, 155, 155, 0.911);">Zone</th>
				<th width="7%" style="border: 1px solid rgba(156, 155, 155, 0.911);">Punch Type</th>
				<th width="7%" style="border: 1px solid rgba(156, 155, 155, 0.911);">Time</th>
				<th width="5%" style="border: 1px solid rgba(156, 155, 155, 0.911);">Location</th>
			  </tr>
			  <ng-container>
				<tr  class="mt-1" *ngFor="let item of RecentPunches_ALL" style="page-break-inside:avoid; page-break-after:auto ">
				  <td style="border: 1px solid rgba(156, 155, 155, 0.911); font-size:11px;">
					{{item['PunchDate'] | date:'mediumDate'}}</td>
				  <td style="border: 1px solid rgba(156, 155, 155, 0.911); font-size:11px;">
					{{item['EmpEno']}}
				  </td>
				  <td style="border: 1px solid rgba(156, 155, 155, 0.911); font-size:11px;">
					{{item['FullName']}}
				  </td>
				  <td style="border: 1px solid rgba(156, 155, 155, 0.911); font-size:11px;">
					{{item['Location']}}
				  </td>
				  <td style="border: 1px solid rgba(156, 155, 155, 0.911); font-size:11px;">
					{{item['Department']}}
				  </td>
				  <td style="border: 1px solid rgba(156, 155, 155, 0.911); font-size:11px;">
					{{selectedPunchType}}
				  </td>
				  <td style="border: 1px solid rgba(156, 155, 155, 0.911); font-size:11px;">
					{{item['PunchType']}}
				  </td>
				  <td style="border: 1px solid rgba(156, 155, 155, 0.911); font-size:11px;">
					{{item['PunchTime']}}
				  </td>
				  <td style="border: 1px solid rgba(156, 155, 155, 0.911); font-size:11px;">
					{{item['PunchLocation']}}
				  </td>
				</tr>
			  </ng-container>
		  </table>
	  </kt-notice>
	  <br><br>
  <div class="divFooter">
	<table style="width: 100%">
		<tr style="border: none">
			<td colspan="10"  style="font-size: 8px; color:rgb(58, 56, 56);border: none; text-align: center">
				Report generated on {{now |date:'MMM dd, yyyy  hh:mm:ss a'}}
			</td>
		</tr>
	</table>
  </div>
</div>
<style>
.td{
	padding: 3px 0 3px 0;
	font-size: 13px;
}
</style>
