<div [@routerTransition]>
  <div class="kt-content  kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor">
    <div class="kt-subheader kt-grid__item">
      <div [class]="containerClass">
        <div class="kt-subheader__main">
            <h3 class="kt-subheader__title">
                <span>{{l("RouteScheduleDetails")}}</span>
            </h3>
            <span class="kt-subheader__separator kt-subheader__separator--v"></span>
            <span class="kt-subheader__desc">
                {{l("RouteScheduleDetailsHeaderInfo")}}
            </span>
        </div>
        <div class="kt-subheader__toolbar">
            <div class="kt-subheader__wrapper">
				<button (click)="exportToExcel()" class="btn btn-outline-success"><i class="fa fa-file-excel"></i> {{l("ExportToExcel")}}</button>
                <button *ngIf="isGranted('Pages.RouteScheduleDetails.Create')" (click)="createRouteScheduleDetail()" 
			class="btn btn-primary blue"><i class="fa fa-plus"></i> {{l("CreateNewRouteScheduleDetail")}}</button>
            </div>
        </div>
      </div>
    </div>
    <div [class]="containerClass + ' kt-grid__item kt-grid__item--fluid'">
        <div class="kt-portlet kt-portlet--mobile">
            <div class="kt-portlet__body">
                <form class="kt-form" autocomplete="off">
                    <div>
                        <div class="row align-items-center">
                            <div class="col-xl-12">
                                <div class="form-group m-form__group align-items-center">
                                    <div class="input-group">
                                        <input [(ngModel)]="filterText" name="filterText" autoFocus class="form-control m-input" [placeholder]="l('SearchWithThreeDot')" type="text">
                                        <span class="input-group-btn">
                                            <button (click)="getRouteScheduleDetails()" class="btn btn-primary" type="submit"><i class="flaticon-search-1"></i></button>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
						 <div class="row" [hidden]="!advancedFiltersAreShown">
						 	<div class="col-md-12">
						         <div class="kt-separator kt-separator--border-dashed"></div>
						     </div>


							<div class="col-md-3">
								<div class="form-group">
									<label for="RouteCodeFilter">{{l("RouteCode")}}</label>
									<input type="text" class="form-control" id="RouteCodeFilter" name="routeCodeFilter" [(ngModel)]="routeCodeFilter">
								</div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
									<label  for="MinEstimatedTimeOfArrivalFilter">{{l("EstimatedTimeOfArrivalRange")}}</label>
									<div class="input-group">
                                        <input class="form-control m-input" id="MinEstimatedTimeOfArrivalFilter" name="MinEstimatedTimeOfArrivalFilter" type="datetime" bsDatepicker  placeholder="{{l('MinValue')}}" [(ngModel)]="minEstimatedTimeOfArrivalFilter">
			                            <span style="line-height: 40px;padding: 0 15px 0 15px;"> &mdash; </span>
                                        <input class="form-control m-input" id="MaxEstimatedTimeOfArrivalFilter" name="MaxEstimatedTimeOfArrivalFilter" type="datetime" bsDatepicker  placeholder="{{l('MaxValue')}}" [(ngModel)]="maxEstimatedTimeOfArrivalFilter">
									</div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
									<label  for="MinCutOffFilter">{{l("CutOffRange")}}</label>
									<div class="input-group">
                                        <input class="form-control m-input" id="MinCutOffFilter" name="MinCutOffFilter" type="datetime" bsDatepicker  placeholder="{{l('MinValue')}}" [(ngModel)]="minCutOffFilter">
			                            <span style="line-height: 40px;padding: 0 15px 0 15px;"> &mdash; </span>
                                        <input class="form-control m-input" id="MaxCutOffFilter" name="MaxCutOffFilter" type="datetime" bsDatepicker  placeholder="{{l('MaxValue')}}" [(ngModel)]="maxCutOffFilter">
									</div>
                                </div>
                            </div>	
							<div class="col-md-3">
								<label for="AutomaticFilterSelect">{{l("Automatic")}}</label>
								<select class="form-control" name="AutomaticFilter" id="AutomaticFilterSelect" [(ngModel)]="automaticFilter">
								<option value="-1">{{l("All")}}</option>
								<option value="0">{{l("False")}}</option>
								<option value="1">{{l("True")}}</option>
								</select>
                            </div>	
							<div class="col-md-3">
								<label for="WillCallFilterSelect">{{l("WillCall")}}</label>
								<select class="form-control" name="WillCallFilter" id="WillCallFilterSelect" [(ngModel)]="willCallFilter">
								<option value="-1">{{l("All")}}</option>
								<option value="0">{{l("False")}}</option>
								<option value="1">{{l("True")}}</option>
								</select>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
									<label for="MinOorRateFilter">{{l("MinMax")}} {{l("OorRate")}}</label>
									<div class="input-group">
                                        <input type="number" class="form-control" id="MinOorRateFilter" [(ngModel)]="minOorRateFilter" placeholder="{{l('MinValue')}}" name="minOorRateFilter" />
                                        <input type="number" class="form-control" [(ngModel)]="maxOorRateFilter" placeholder="{{l('MaxValue')}}" name="maxOorRateFilter" />
									</div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
									<label  for="MinEffectivityDateFilter">{{l("EffectivityDateRange")}}</label>
									<div class="input-group">
                                        <input class="form-control m-input" id="MinEffectivityDateFilter" name="MinEffectivityDateFilter" type="datetime" bsDatepicker  placeholder="{{l('MinValue')}}" [(ngModel)]="minEffectivityDateFilter">
			                            <span style="line-height: 40px;padding: 0 15px 0 15px;"> &mdash; </span>
                                        <input class="form-control m-input" id="MaxEffectivityDateFilter" name="MaxEffectivityDateFilter" type="datetime" bsDatepicker  placeholder="{{l('MaxValue')}}" [(ngModel)]="maxEffectivityDateFilter">
									</div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
									<label for="MinRouteScheduleIdFilter">{{l("MinMax")}} {{l("RouteScheduleId")}}</label>
									<div class="input-group">
                                        <input type="number" class="form-control" id="MinRouteScheduleIdFilter" [(ngModel)]="minRouteScheduleIdFilter" placeholder="{{l('MinValue')}}" name="minRouteScheduleIdFilter" />
                                        <input type="number" class="form-control" [(ngModel)]="maxRouteScheduleIdFilter" placeholder="{{l('MaxValue')}}" name="maxRouteScheduleIdFilter" />
									</div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
									<label for="MinRouteTypeIdFilter">{{l("MinMax")}} {{l("RouteTypeId")}}</label>
									<div class="input-group">
                                        <input type="number" class="form-control" id="MinRouteTypeIdFilter" [(ngModel)]="minRouteTypeIdFilter" placeholder="{{l('MinValue')}}" name="minRouteTypeIdFilter" />
                                        <input type="number" class="form-control" [(ngModel)]="maxRouteTypeIdFilter" placeholder="{{l('MaxValue')}}" name="maxRouteTypeIdFilter" />
									</div>
                                </div>
                            </div>

                        </div>
                        <div class="row mb-2">
                            <div class="col-sm-12">
                                <span class="clickable-item text-muted" *ngIf="!advancedFiltersAreShown" (click)="advancedFiltersAreShown=!advancedFiltersAreShown"><i class="fa fa-angle-down"></i> {{l("ShowAdvancedFilters")}}</span>
                                <span class="clickable-item text-muted" *ngIf="advancedFiltersAreShown" (click)="advancedFiltersAreShown=!advancedFiltersAreShown"><i class="fa fa-angle-up"></i> {{l("HideAdvancedFilters")}}</span>
                            </div>
                        </div>
                    </div>
                </form>

                <div class="row align-items-center">
                    <!--<Primeng-Datatable-Start>-->
                    <div class="primeng-datatable-container col-12"
                         [busyIf]="primengTableHelper.isLoading">
                        <p-table #dataTable
                                     (onLazyLoad)="getRouteScheduleDetails($event)"
                                     [value]="primengTableHelper.records"
                                     rows="{{primengTableHelper.defaultRecordsCountPerPage}}"
                                     [paginator]="false"
                                     [lazy]="true"
                                     [scrollable]="true"
                                     ScrollWidth="100%"
                                     [responsive]="primengTableHelper.isResponsive"
                                     [resizableColumns]="primengTableHelper.resizableColumns">
                            <ng-template pTemplate="header">
                                <tr>
                                    <th style="width: 130px" [hidden]="!isGrantedAny('Pages.RouteScheduleDetails.Edit', 'Pages.RouteScheduleDetails.Delete')">{{l('Actions')}}</th>
                                    <th style="width: 150px" pSortableColumn="routeCode">
                                        {{l('RouteCode')}}
                                        <p-sortIcon field="routeScheduleDetail.routeCode"></p-sortIcon>
                                    </th>
                                    <th style="width: 150px" pSortableColumn="estimatedTimeOfArrival">
                                        {{l('EstimatedTimeOfArrival')}}
                                        <p-sortIcon field="routeScheduleDetail.estimatedTimeOfArrival"></p-sortIcon>
                                    </th>
                                    <th style="width: 150px" pSortableColumn="cutOff">
                                        {{l('CutOff')}}
                                        <p-sortIcon field="routeScheduleDetail.cutOff"></p-sortIcon>
                                    </th>
                                    <th style="width: 150px" pSortableColumn="automatic">
                                        {{l('Automatic')}}
                                        <p-sortIcon field="routeScheduleDetail.automatic"></p-sortIcon>
                                    </th>
                                    <th style="width: 150px" pSortableColumn="willCall">
                                        {{l('WillCall')}}
                                        <p-sortIcon field="routeScheduleDetail.willCall"></p-sortIcon>
                                    </th>
                                    <th style="width: 150px" pSortableColumn="oorRate">
                                        {{l('OorRate')}}
                                        <p-sortIcon field="routeScheduleDetail.oorRate"></p-sortIcon>
                                    </th>
                                    <th style="width: 150px" pSortableColumn="effectivityDate">
                                        {{l('EffectivityDate')}}
                                        <p-sortIcon field="routeScheduleDetail.effectivityDate"></p-sortIcon>
                                    </th>
                                    <th style="width: 150px" pSortableColumn="routeScheduleId">
                                        {{l('RouteScheduleId')}}
                                        <p-sortIcon field="routeScheduleDetail.routeScheduleId"></p-sortIcon>
                                    </th>
                                    <th style="width: 150px" pSortableColumn="routeTypeId">
                                        {{l('RouteTypeId')}}
                                        <p-sortIcon field="routeScheduleDetail.routeTypeId"></p-sortIcon>
                                    </th>

                                </tr>
                            </ng-template>                           
							<ng-template pTemplate="body" let-record="$implicit">
                                <tr>
                                    <td style="width: 130px"
                                        [hidden]="!isGrantedAny('Pages.RouteScheduleDetails.Edit', 'Pages.RouteScheduleDetails.Delete')">
                                       <div class="btn-group dropdown" dropdown container="body">
                                            <button class="dropdown-toggle btn btn-sm btn-primary" dropdownToggle>
                                                <i class="fa fa-cog"></i><span class="caret"></span> {{l("Actions")}}
                                            </button>
												<ul class="dropdown-menu"  *dropdownMenu>
												<li>
													<a href="javascript:;"
														(click)="viewRouteScheduleDetailModal.show(record)">{{l('View')}}</a>
												</li>
												<li>
													<a href="javascript:;" *ngIf="permission.isGranted('Pages.RouteScheduleDetails.Edit')"
														(click)="createOrEditRouteScheduleDetailModal.show(record.routeScheduleDetail.id)">{{l('Edit')}}</a>
												</li>
												<li>
											        <a href="javascript:;" *ngIf="permission.isGranted('Pages.RouteScheduleDetails.Delete')"
														(click)="deleteRouteScheduleDetail(record.routeScheduleDetail)">{{l('Delete')}}</a>
												</li>
                                                <li>
                                                    <a href="javascript:;" *ngIf="entityHistoryEnabled"
                                                       (click)="showHistory(record.routeScheduleDetail)">{{l('History')}}</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </td>
                                    <td style="width:150px">
											<span class="ui-column-title"> {{l('RouteCode')}}</span>
											{{record.routeScheduleDetail.routeCode}}
										</td>
                                    <td style="width:150px">
										<span class="ui-column-title"> {{l('EstimatedTimeOfArrival')}}</span>
                                        <span *ngIf="record.routeScheduleDetail.estimatedTimeOfArrival">
											{{record.routeScheduleDetail.estimatedTimeOfArrival | momentFormat:'L'}}
                                        </span>
                                        <span *ngIf="!record.routeScheduleDetail.estimatedTimeOfArrival">-</span>
                                    </td>
                                    <td style="width:150px">
										<span class="ui-column-title"> {{l('CutOff')}}</span>
                                        <span *ngIf="record.routeScheduleDetail.cutOff">
											{{record.routeScheduleDetail.cutOff | momentFormat:'L'}}
                                        </span>
                                        <span *ngIf="!record.routeScheduleDetail.cutOff">-</span>
                                    </td>
                                    <td style="width:150px">
										<span class="ui-column-title"> {{l('Automatic')}}</span>
                                        <div *ngIf="record.routeScheduleDetail.automatic" class="text-center"><i class="fa fa-check-circle kt--font-success" title="True"></i></div>
										<div *ngIf="!record.routeScheduleDetail.automatic" class="text-center"><i class="fa fa-times-circle" title="False"></i></div>
                                    </td>
                                    <td style="width:150px">
										<span class="ui-column-title"> {{l('WillCall')}}</span>
                                        <div *ngIf="record.routeScheduleDetail.willCall" class="text-center"><i class="fa fa-check-circle kt--font-success" title="True"></i></div>
										<div *ngIf="!record.routeScheduleDetail.willCall" class="text-center"><i class="fa fa-times-circle" title="False"></i></div>
                                    </td>
                                    <td style="width:150px">
											<span class="ui-column-title"> {{l('OorRate')}}</span>
											{{record.routeScheduleDetail.oorRate}}
										</td>
                                    <td style="width:150px">
										<span class="ui-column-title"> {{l('EffectivityDate')}}</span>
                                        <span *ngIf="record.routeScheduleDetail.effectivityDate">
											{{record.routeScheduleDetail.effectivityDate | momentFormat:'L'}}
                                        </span>
                                        <span *ngIf="!record.routeScheduleDetail.effectivityDate">-</span>
                                    </td>
                                    <td style="width:150px">
											<span class="ui-column-title"> {{l('RouteScheduleId')}}</span>
											{{record.routeScheduleDetail.routeScheduleId}}
										</td>
                                    <td style="width:150px">
											<span class="ui-column-title"> {{l('RouteTypeId')}}</span>
											{{record.routeScheduleDetail.routeTypeId}}
										</td>

                                </tr>
                            </ng-template>
                        </p-table>
						<div class="primeng-no-data" *ngIf="primengTableHelper.totalRecordsCount == 0">
                            {{l('NoData')}}
                        </div>
                        <div class="primeng-paging-container">
                            <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage"
                                         #paginator
                                         (onPageChange)="getRouteScheduleDetails($event)"
                                         [totalRecords]="primengTableHelper.totalRecordsCount"
                                         [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                            </p-paginator>
                            <span class="total-records-count">
                                {{l('TotalRecordsCount', primengTableHelper.totalRecordsCount)}}
                            </span>
                        </div>
                    </div>
                    <!--<Primeng-Datatable-End>-->
                </div>
            </div>
        </div>
    </div>

    <createOrEditRouteScheduleDetailModal #createOrEditRouteScheduleDetailModal (modalSave)="getRouteScheduleDetails()"></createOrEditRouteScheduleDetailModal>
    <viewRouteScheduleDetailModal #viewRouteScheduleDetailModal></viewRouteScheduleDetailModal>
     <entityTypeHistoryModal #entityTypeHistoryModal></entityTypeHistoryModal>
  </div>
</div>
