<div [class]="containerClass + ' kt-grid__item kt-grid__item--fluid'">
    <div class="kt-portlet kt-portlet--mobile margin-bottom-0">

        <div class="kt-portlet__body">
            <div class="row align-items-center">
                <div class="col-md-12">
                <form class="kt-form" autocomplete="off">
                    <!-- <div class="row align-items-center mb-4">
                        <div class="col-md-12">                                         
                            <div class="kt-searchbar">
                                <div class="input-group">
                                    <div class="input-group-prepend"><span class="input-group-text" id="search-icon"><i class="flaticon-search"></i></span></div>
                                    <input type="text" class="form-control search-filter" placeholder="Search" aria-describedby="search-icon">
                                    <div class="input-group-append">
                                        <button type="button" class="btn btn-secondary btn-hover-brand border-1">
                                            <span><i class="fa fa-filter padding-right-5"></i> Filter</span>
                                        </button>

                                        <button type="button" class="btn btn-secondary btn-hover-brand more-btn">
                                                <span><i class="flaticon flaticon-more padding-right-5"></i></span>
                                            </button>
                                    </div>
                                </div>
                                
                            </div>
                        </div>
                    </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)="getRouteDetails()" class="btn btn-primary" type="submit"><i class="flaticon-search-1"></i></button>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                </form>
                </div>
            </div>
            
        </div>
    </div>

    <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
        <p-table #dataTable
            (onLazyLoad)="getRouteDetails($event)"
            [value]="primengTableHelper.records"
            rows="{{primengTableHelper.defaultRecordsCountPerPage}}"
            [paginator]="false"
            [lazy]="true"
            [responsive]="primengTableHelper.isResponsive"
            [reorderableColumns]="true">
            <ng-template pTemplate="header">
                <tr class="th-bg">
                        <th style="width: 20px;"></th>
                        <th style="width: 20px;"></th>
                        <th style="width: 230px;" pSortableColumn="">
                            Clinic
                        </th>
                        <th style="width: 60px;" pSortableColumn="">
                            Action
                        </th>
                        <th style="width: 70px;" pSortableColumn="" *ngFor="let package of packages">
                            {{package.name}}
                        </th>
                        <th style="width: 80px;" pSortableColumn="">
                            Total Items
                        </th>
                        <th style="width: 60px;" pSortableColumn="">
                            ETA
                        </th>
                        <th style="width: 80px;" pSortableColumn="">
                            Arrival Time
                        </th>
                        <th style="width: 70px;" pSortableColumn="">
                            Stop Type
                        </th>
                        <th style="width: 140px;" pSortableColumn="">
                            Status
                        </th>
                        <th style="width: 80px;" pSortableColumn="">
                            Driver Notes
                        </th>
                        <th style="width: 80px;" pSortableColumn="">
                            Clinic Notes
                        </th>
                        
                    </tr>
            </ng-template>
                    <ng-template pTemplate="body"  let-record="$implicit" let-i="rowIndex">
                        <tr [pReorderableRow]="index" [ngClass]="record.action == 'Delivery' ? (record.completion ? 'bg-completed' : '') : (record.willCall ? 'bg-call-in' : (record.orderStatus ? (record.orderStatus.orderStatusType.code == 'PICKED_UP' || record.orderStatus.orderStatusType.code == 'DELIVERED' || record.orderStatus.orderStatusType.code == 'EMPTY_STOP' ? 'bg-completed' : 'tr-bg') : 'tr-bg'))">
                            <td style="text-align: center;padding-top: 28px;" pReorderableRowHandle>
                                    <span><i class="fa fa-grip-vertical"></i></span>
                                </td>
                                <td style="text-align: center;">
                                    <label class="kt-checkbox" style="position: relative;top: -5px;left: -5px;">
                                        <input type="checkbox">
                                        <span></span>
                                    </label>
                                </td>
                                <td style="padding-top: 28px;">
                                    <div class="row">
                                        <div class="col-sm-10 company-name" style="padding-top: 8px;">
                                                <span *ngIf="record.action == 'Pickup'; else Delivery">
                                                    <a target="_blank" href="app/sprintship/controller-order-details/{{record.id}}">{{record.company.name}}</a>
                                                </span>
                                                <ng-template #Delivery>
                                                    <span>{{record.company.name}}</span>
                                                </ng-template>
                                        </div>
                                        <div class="col-sm-2 more-info">
                                            <div class="more-btn" style="top:-1px;float: right;" (mouseover)="toggleMoreInfo($event)" (mouseout)="toggleMoreInfo($event)">
                                                <i class="flaticon flaticon-more-1"></i>
                                            </div>
                                            <div class="more-info-container lab">
                                                <div><b>{{record.company.accountNo}}</b></div>
                                                <div>{{record.company.name}}</div>
                                                <div>{{record.pickupDetail.contact.address.postalCode.city}}, {{record.pickupDetail.contact.address.postalCode.state}}, {{record.deliveryDetail.contact.address.postalCode.value}}</div>
                                            </div>
                                        </div>
                                        
                                    </div>
                                </td>
                                <td style="padding-top: 28px;" align="center">
                                    <span class="ui-column-title"> {{'Order Id' | localize}}</span>
                                    {{record.action}}
                                </td>
                                <td style="padding-top: 28px;" *ngFor="let package of packages" align="center">
                                    <span class="ui-column-title"> {{'Order Id' | localize}}</span>
                                    <ng-container *ngFor="let packageType of record.orderPackages">
                                        {{packageType.package.name !== 'Default' ? (packageType.packageId == package.id ? ConvertToInt(packageType.quantity) : '' ) : ''}}
                                    </ng-container>
                                </td>
                                <td style="padding-top: 28px;" align="center">
                                    <span class="ui-column-title"> {{'Order Id' | localize}}</span>
                                    {{record.packageCount}}
                                </td>
                                <td style="padding-top: 28px;" align="center">
                                    <span class="ui-column-title"> {{'Order Id' | localize}}</span>
                                    <div>{{ record.estimatedTimeOfArrival | date:'shortTime'}}</div>
                                </td>
                                <td style="padding-top: 28px;" align="center">
                                    <span class="ui-column-title"> {{'Order Id' | localize}}</span>
                                    {{record.orderStatus ? (record.orderStatus.orderStatusType.code == 'PICKED_UP' || record.orderStatus.orderStatusType.code == 'EMPTY_STOP' ? (record.orderStatus.time | date:'shortTime') : '' ) : '' }}
                                    <!-- {{record.arrivalTime ? (record.arrivalTime | date:'shortTime') : ''}} -->
                                </td>
                                <td style="padding-top: 28px;" align="center">
                                    <span class="ui-column-title"> {{'Order Id' | localize}}</span>
                                    <!-- {{record.automatic ? 'Auto' : 'WillCall'}} -->
                                    {{record.willCall != null && record.automatic != null ? (record.willCall ? 'WillCall' : 'Auto') : ''}}
                                </td>
                                <td style="padding-top: 28px;" align="center">
                                    <span class="ui-column-title"> {{'Order Id' | localize}}</span>
                                    <div *ngIf="record.orderStatus">{{record.orderStatus.orderStatusType.description}} &nbsp;{{ record.orderStatus.time | date:'shortTime'}}</div>
                                    <!-- <div *ngIf="record.orderStatus">{{ record.orderStatus.creationTime | date:'dd/MM/yyyy'}}</div>
                                    <div *ngIf="record.orderStatus">{{ record.orderStatus.creationTime | date:'shortTime'}}</div> -->
                                </td>
                                <td style="padding-top: 28px;" align="center" >
                                    <span class="ui-column-title"> {{'Order Id' | localize}}</span>
                                    <span *ngIf="record.orderExtras" > 
                                        <span *ngFor="let extras of record.orderExtras">
                                                {{record.action == 'Delivery' ? (extras.type == "VERIFIED_BY" ? extras.value : '') : (extras.value ? (extras.type != "LOCATION_OPEN" &&  extras.type != "VERIFIED_BY" ? (extras.type != "CONTACT" ? extras.type : extras.value) : '') : '')}}
                                        </span>
                                    </span>
                                    
                                </td>
                                <td class="edit-order-notes" style="padding-top: 28px;" align="center">
                                    <span class="ui-column-title"> {{'Order Id' | localize}}</span>
                                    <span *ngIf="record.action == 'Pickup'; else notes">
                                        <span (click)="clinicNotes.show(record.routeSchedule.clinicId,record.id)" *ngIf="record.routeSchedule"><i class="fa fa-pencil-alt"></i></span>
                                    </span>
                                    <ng-template #notes></ng-template>
                                </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"
                        #paginator
                        (onPageChange)="getRouteDetails($event)"
                        [totalRecords]="primengTableHelper.totalRecordsCount"
                        [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
            </p-paginator>
            <span class="total-records-count">
                {{'TotalRecordsCount' | localize:primengTableHelper.totalRecordsCount}}
            </span>
        </div> 
    </div>
</div>

<clinicNotes #clinicNotes></clinicNotes>