<div class="routes-filter-container">
    <!-- <div class="search-button-container" style="width: 100% !important;">
            <div class="input-group">
                <div class="input-group-prepend">
                    <button class="btn btn-secondary btn-controller-search-icon" type="button"><i class="fa fa-search"></i></button>
                </div>
                <input type="text" class="form-control" placeholder="Search" id="driverNameFilter" [(ngModel)] = "filterText" (keyup.enter)="getOrder($event)">
                <div class="input-group-append">
                    <button class="btn btn-secondary" type="button" (click)="getOrder($event)"><i class="fa fa-filter"></i> Filter</button>
                </div>

            </div>
    </div> -->
    <!-- <div class="search-button-filter">
        <button type="reset" class="btn btn-secondary btnToggleMore btnControllerMenu"><i class="fa fa-ellipsis-v"></i></button>
    </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" id="driverNameFilter" autoFocus class="form-control m-input" (keyup.enter)="getOrder($event)" [placeholder]="l('SearchWithThreeDot')" type="text">
                    <span class="input-group-btn">
                        <button (click)="getOrder($event)" class="btn btn-primary" type="submit"><i class="flaticon-search-1"></i></button>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>
<div [@routerTransition]>
    <div class="primeng-datatable-container" >
        <p-table #dataTable
                (onLazyLoad)="getOrder($event)"
                [value]="primengTableHelper.records"
                rows="{{primengTableHelper.defaultRecordsCountPerPage}}"
                [paginator]="false"
                [lazy]="true"
                [responsive]="primengTableHelper.isResponsive" class="tabTable table-hover">
            <ng-template pTemplate="header" >
                <tr>
                    <th pSortableColumn="Id" class="minWidth">
                        {{'ID' | localize}}
                        <p-sortIcon field="id"></p-sortIcon>
                    </th>
                    <th pSortableColumn="Route" class="middleWidth">
                        {{'Route ID' | localize}}
                        <p-sortIcon field="route"></p-sortIcon>
                    </th>
                    <th class="middleWidth" *ngIf=" edition =='LABORATORY' ">
                        {{'Account No.' | localize}}
                        <!-- <p-sortIcon field="customerName"></p-sortIcon> -->
                    </th>
                    <th class="text-center">
                        {{'Customer' | localize}}
                        <!-- <p-sortIcon field="customerName"></p-sortIcon> -->
                    </th>
                    <th class="">
                        {{'Pick Up' | localize}}
                        <!-- <p-sortIcon field="pickUp"></p-sortIcon> -->
                    </th>
                    <th class="">
                        {{'Delivery' | localize}}
                        <!-- <p-sortIcon field="delivery"></p-sortIcon> -->
                    </th>
                     <th class="text-center">
                        {{'Pick Up By' | localize}}
                        <!-- <p-sortIcon field="pickUpBy"></p-sortIcon> -->
                    </th>
                    <th class="text-center">
                        {{'Delivery By' | localize}}
                        <!-- <p-sortIcon field="activeRoute"></p-sortIcon> -->
                    </th>
                    <th class="maxWidth">
                        {{'Last Log' | localize}}
                        <!-- <p-sortIcon field="activeRoute"></p-sortIcon> -->
                    </th>
                </tr>   
            </ng-template>
            <ng-template pTemplate="body" let-record="$implicit">
                <tr class="tr-controller-routes">
                    <td class="text-center">
                        <span class="ui-column-title">{{'ID' | localize}}</span>
                        <a target="_blank" href="app/sprintship/controller-order-details/{{record.orderList.id}}">{{record.orderList.id}}</a>
                    </td>
                    <td class="text-center">
                         <span class="ui-column-title">{{'Route ID' | localize}}</span>
                         <span *ngIf=" edition =='LABORATORY' "><a target="_blank" href="app/sprintship/controller-routes-details/{{record.orderList.route.id}}">{{record.orderList.route.routeTemplate.name}}</a></span>
                         <span *ngIf=" edition !='LABORATORY' "><a target="_blank" href="app/sprintship/controller-routes-details/{{record.orderList.route.id}}">{{record.orderList.route.id}}</a></span>
                         
                    </td>
                    <td class="text-center"  *ngIf=" edition =='LABORATORY' ">
                        <span class="ui-column-title">{{'AccountNumber' | localize}}</span>
                        {{record.orderList.pickupDetail.contact.company.accountNo}}
                    </td>
                    <td>
                        <span class="ui-column-title">{{'Customer' | localize}}</span>
                        {{record.orderList.pickupDetail.contact.firstName}}
                    </td>
                    <td>
                        <span class="ui-column-title">{{'Pick Up' | localize}}</span>
                        {{record.orderList.pickupDetail.contact.address.addressLine1}}, {{record.orderList.pickupDetail.contact.address.postalCode.city}}, {{record.orderList.pickupDetail.contact.address.postalCode.state}}, {{record.orderList.pickupDetail.contact.address.postalCode.value}} 
                    </td>
                    <td>
                        <span class="ui-column-title">{{'Delivery' | localize}}</span>
                        {{record.orderList.deliveryDetail.contact.address.addressLine1}}
                        {{record.orderList.deliveryDetail.contact.address.postalCode.city}}, {{record.orderList.deliveryDetail.contact.address.postalCode.state}}, {{record.orderList.deliveryDetail.contact.address.postalCode.value}}
                    </td>
                    <td class="text-center">
                        <span class="ui-column-title">{{'Pick Up By' | localize}}</span>
                        {{record.orderList.pickupDetail.etaStart | date:'shortTime' }}
                    </td>
                     <td class="text-center">
                        <span class="ui-column-title">{{'Delivery By' | localize}}</span>
                        {{record.orderList.deliveryDetail.etaEnd | date:'shortTime' }}
                    </td>
                     <td>
                        <span class="ui-column-title">{{'LastLog' | localize}}</span>
                        {{record.status}} {{record.lastLog | date:'shortTime' }}
                    </td>
                </tr>
            </ng-template>
        </p-table>
        <div class="primeng-no-data" *ngIf="primengTableHelper.totalRecordsCount == 0">
            {{'NoData' | localize}}
        </div>
        <div class="primeng-paging-container">
            <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage"
                        (onPageChange)="getOrder($event)"
                        #paginator
                        [totalRecords]="primengTableHelper.totalRecordsCount"
                        [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
            </p-paginator>
            <span class="total-records-count">
                {{'TotalRecordsCount' | localize:primengTableHelper.totalRecordsCount}}
            </span>
        </div> 
    </div>
<div [@routerTransition]>