<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("OrderPackages")}}</span>
                    </h3>
                    <!-- <span class="kt-subheader__separator kt-subheader__separator--v"></span>
                    <span class="kt-subheader__desc">
                        {{l("OrderPackagesHeaderInfo")}}
                    </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.OrderPackages.Create')" (click)="createOrderPackage()"
                            class="btn btn-primary blue btn-pill"><i class="fa fa-plus"></i>
                            {{l("CreateNewOrderPackage")}}</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)="getOrderPackages()" 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("MinMax")}} {{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="selectOrder"
                                                data-placeholder="Select City" name="selectPreview">
                                                <option value="0">Select Order Id</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="MinPackageIdFilter">{{l("PackageName")}}</label>
                                        <div class="input-group">
                                            <!-- <input type="number" class="form-control" id="MinPackageIdFilter" [(ngModel)]="minPackageIdFilter" placeholder="{{l('MinValue')}}" name="minPackageIdFilter" /> -->
                                            <!-- <input type="number" class="form-control" [(ngModel)]="maxPackageIdFilter" placeholder="{{l('MaxValue')}}" name="maxPackageIdFilter" /> -->
                                            <select class="form-control kt-select2" id="selectPackage"
                                                data-placeholder="Select City" name="selectPreview">
                                                <option value="0">Select Package Name</option>
                                                <option *ngFor="let packages of filteredPackages"
                                                    [(value)]="packages.package.id">
                                                    {{packages.package.name}}
                                                </option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="MinQuantityFilter">{{l("MinMax")}} {{l("Quantity")}}</label>
                                        <div class="input-group">
                                            <input type="number" class="form-control" id="MinQuantityFilter"
                                                [(ngModel)]="minQuantityFilter" placeholder="{{l('MinValue')}}"
                                                name="minQuantityFilter" />
                                            <input type="number" class="form-control" [(ngModel)]="maxQuantityFilter"
                                                placeholder="{{l('MaxValue')}}" name="maxQuantityFilter" />
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <br>
                                        <button (click)="getOrderPackages()" class="btn btn-primary blue btn-pill"
                                            type="submit">{{'Filter'}}</button>
                                    </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)="getOrderPackages($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.OrderPackages.Edit', 'Pages.OrderPackages.Delete')">
                                            {{l('Actions')}}</th>
                                        <th style="width: 150px" pSortableColumn="orderId">
                                            {{l('OrderId')}}
                                            <p-sortIcon field="orderPackage.orderId"></p-sortIcon>
                                        </th>
                                        <th style="width: 150px" pSortableColumn="packageId">
                                            {{l('PackageName')}}
                                            <p-sortIcon field="orderPackage.packageId"></p-sortIcon>
                                        </th>
                                        <th style="width: 150px" pSortableColumn="quantity">
                                            {{l('Quantity')}}
                                            <p-sortIcon field="orderPackage.quantity"></p-sortIcon>
                                        </th>

                                    </tr>
                                </ng-template>
                                <ng-template pTemplate="body" let-record="$implicit">
                                    <tr>
                                        <td style="width: 130px"
                                            [hidden]="!isGrantedAny('Pages.OrderPackages.Edit', 'Pages.OrderPackages.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)="viewOrderPackageModal.show(record)">{{l('View')}}</a>
                                                    </li> -->
                                                    <li>
                                                        <a href="javascript:;"
                                                            *ngIf="permission.isGranted('Pages.OrderPackages.Edit')"
                                                            (click)="createOrEditOrderPackageModal.show(record.orderPackage.id)">{{l('Edit')}}</a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:;"
                                                            *ngIf="permission.isGranted('Pages.OrderPackages.Delete')"
                                                            (click)="deleteOrderPackage(record.orderPackage)">{{l('Delete')}}</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </td>
                                        <td style="width:150px">
                                            <span class="ui-column-title"> {{l('OrderId')}}</span>
                                            {{record.orderPackage.orderId}}
                                        </td>
                                        <td style="width:150px">
                                            <span class="ui-column-title"> {{l('PackageId')}}</span>
                                            {{record.orderPackage.package.name}}
                                        </td>
                                        <td style="width:150px">
                                            <span class="ui-column-title"> {{l('Quantity')}}</span>
                                            {{record.orderPackage.quantity}}
                                        </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)="getOrderPackages($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>

        <createOrEditOrderPackageModal #createOrEditOrderPackageModal (modalSave)="getOrderPackages()">
        </createOrEditOrderPackageModal>
        <viewOrderPackageModal #viewOrderPackageModal></viewOrderPackageModal>

    </div>
</div>