<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("OrderStatuses")}}</span>
                    </h3>
                    <span class="kt-subheader__separator kt-subheader__separator--v"></span>
                    <span class="kt-subheader__desc">
                        {{l("OrderStatusesHeaderInfo")}}
                    </span>
                </div>
                <div class="kt-subheader__toolbar">
                    <div class="kt-subheader__wrapper">
                        <button (click)="exportToExcel()" class="btn btn-outline-success btn-pill"><i
                                class="fa fa-file-excel"></i> {{l("ExportToExcel")}}</button>
                        <button *ngIf="isGranted('Pages.OrderStatuses.Create')" (click)="createOrderStatus()"
                            class="btn btn-primary blue btn-pill"><i class="fa fa-plus"></i>
                            {{l("CreateNewOrderStatus")}}</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)="getOrderStatuses()" 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="MinOrderIdFilter">{{l("OrderId")}}</label>
                                        <div class="input-group">
                                            <!-- <input type="number" class="form-control" id="MinOrderIdFilter" [(ngModel)]="minOrderIdFilter" placeholder="{{l('MinValue')}}" name="minOrderIdFilter" />
                                        <input type="number" class="form-control" [(ngModel)]="maxOrderIdFilter" placeholder="{{l('MaxValue')}}" name="maxOrderIdFilter" /> -->
                                            <select class="form-control kt-select2" id="selectedOrder"
                                                data-placeholder="Select City" name="selectPreview">
                                                <option value="0">Select Order</option>
                                                <option *ngFor="let orders of filteredOrders" [(value)]="orders.id">
                                                    {{orders.id}}
                                                </option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="MinOrderStatusTypeIdFilter"> {{l("OrderStatusType")}}</label>
                                        <div class="input-group">
                                            <!-- <input type="number" class="form-control" id="MinOrderStatusTypeIdFilter"
                                                [(ngModel)]="minOrderStatusTypeIdFilter" placeholder="{{l('MinValue')}}"
                                                name="minOrderStatusTypeIdFilter" />
                                            <input type="number" class="form-control"
                                                [(ngModel)]="maxOrderStatusTypeIdFilter" placeholder="{{l('MaxValue')}}"
                                                name="maxOrderStatusTypeIdFilter" /> -->
                                            <select class="form-control kt-select2" id="selectedOrderStatusType"
                                                data-placeholder="Select Order Status Type" name="selectPreview">
                                                <option value="0">Select Order Status Type</option>
                                                <option *ngFor="let orderStatusType of filteredOrderStatusTypes"
                                                    [(value)]="orderStatusType.id">
                                                    {{orderStatusType.description}}
                                                </option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label for="MinOrderStatusTypeIdFilter">{{l("Action")}}</label>
                                        <div class="input-group">
                                            <button (click)="getOrderStatuses()" class="btn btn-primary blue btn-pill"
                                                type="submit">{{'Filter'}}</button>
                                        </div>
                                    </div>
                                </div>
                                <!-- <div class="col-md-3">
                                <div class="form-group">
									<label  for="MinTimeFilter">{{l("TimeRange")}}</label>
									<div class="input-group">
                                        <input class="form-control m-input" id="MinTimeFilter" name="MinTimeFilter" type="datetime" bsDatepicker  placeholder="{{l('MinValue')}}" [(ngModel)]="minTimeFilter">
			                            <span style="line-height: 40px;padding: 0 15px 0 15px;"> &mdash; </span>
                                        <input class="form-control m-input" id="MaxTimeFilter" name="MaxTimeFilter" type="datetime" bsDatepicker  placeholder="{{l('MaxValue')}}" [(ngModel)]="maxTimeFilter">
									</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)="getOrderStatuses($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.OrderStatuses.Edit', 'Pages.OrderStatuses.Delete')">
                                            {{l('Actions')}}</th>

                                        <th style="width: 150px" pSortableColumn="orderId">
                                            {{l('OrderId')}}
                                            <p-sortIcon field="orderStatus.orderId"></p-sortIcon>
                                        </th>
                                        <th style="width: 150px" pSortableColumn="orderStatusTypeId">
                                            {{l('OrderStatusType')}}
                                            <p-sortIcon field="orderStatus.orderStatusTypeId"></p-sortIcon>
                                        </th>
                                        <!-- <th style="width: 150px" pSortableColumn="time">
                                        {{l('Time')}}
                                        <p-sortIcon field="orderStatus.time"></p-sortIcon>
                                    </th> -->

                                    </tr>
                                </ng-template>
                                <ng-template pTemplate="body" let-record="$implicit">
                                    <tr>
                                        <td style="width: 130px"
                                            [hidden]="!isGrantedAny('Pages.OrderStatuses.Edit', 'Pages.OrderStatuses.Delete')">
                                            <div class="btn-group dropdown" dropdown container="body">
                                                <button class="dropdown-toggle btn btn-sm btn-primary btn-pill"
                                                    dropdownToggle>
                                                    <i class="fa fa-cog"></i><span class="caret"></span>
                                                    {{l("Actions")}}
                                                </button>
                                                <ul class="dropdown-menu" *dropdownMenu>
                                                    <!-- <li>
                                                        <a href="javascript:;"
                                                            (click)="viewOrderStatusModal.show(record)">{{l('View')}}</a>
                                                    </li> -->
                                                    <li>
                                                        <a href="javascript:;"
                                                            *ngIf="permission.isGranted('Pages.OrderStatuses.Edit')"
                                                            (click)="createOrEditOrderStatusModal.show(record.orderStatus.id)">{{l('Edit')}}</a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:;"
                                                            *ngIf="permission.isGranted('Pages.OrderStatuses.Delete')"
                                                            (click)="deleteOrderStatus(record.orderStatus)">{{l('Delete')}}</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </td>
                                        <td style="width:150px">
                                            <span class="ui-column-title"> {{l('OrderId')}}</span>
                                            {{record.orderStatus.order.id}}
                                        </td>
                                        <td style="width:150px">
                                            <span class="ui-column-title"> {{l('OrderStatusType')}}</span>
                                            {{record.orderStatus.orderStatusType.description}}
                                        </td>
                                        <!-- <td style="width:150px">
										<span class="ui-column-title"> {{l('Time')}}</span>
                                        <span *ngIf="record.orderStatus.time">
											{{record.orderStatus.time | momentFormat:'L'}}
                                        </span>
                                        <span *ngIf="!record.orderStatus.time">-</span>
                                    </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)="getOrderStatuses($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>

        <createOrEditOrderStatusModal #createOrEditOrderStatusModal (modalSave)="getOrderStatuses()">
        </createOrEditOrderStatusModal>
        <viewOrderStatusModal #viewOrderStatusModal></viewOrderStatusModal>

    </div>
</div>