<div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
    <p-table #dataTable
        (onLazyLoad)="getOrderPackages($event)"
        [value]="primengTableHelper.records"
        rows="{{primengTableHelper.defaultRecordsCountPerPage}}"
        [paginator]="false"
        [lazy]="true"
        [responsive]="primengTableHelper.isResponsive"
        [reorderableColumns]="true"
        sortField="id"
        [sortOrder]="-1"
        >
        
        <ng-template pTemplate="header">
            <tr class="th-bg">
                    <th class="col-sm-2" pSortableColumn="id">
                       {{'Id' | localize}}
                        <p-sortIcon field="id"></p-sortIcon>
                    </th>
                    <th class="col-sm-2" pSortableColumn="orderId">
                        {{'OrderId' | localize}}
                        <p-sortIcon field="orderId"></p-sortIcon>
                    </th>

                    <th class="col-sm-2" pSortableColumn="">
                        {{'Customer' | localize}}
                        <p-sortIcon field=""></p-sortIcon>
                    </th>
                    <th class="col-sm-2" pSortableColumn="">
                        {{'Pickup' | localize}}
                        <p-sortIcon field=""></p-sortIcon>
                    </th>
                    <th class="col-sm-2" pSortableColumn="">
                        {{'Delivery' | localize}}
                        <p-sortIcon field=""></p-sortIcon>
                    </th>
                    <th class="col-sm-2" pSortableColumn="">
                        {{'LastLogType' | localize}}
                        <p-sortIcon field=""></p-sortIcon>
                    </th>

                    <!-- <th style="width: 80px;" pSortableColumn="">
                        Last Log Type
                        <p-sortIcon field=""></p-sortIcon>
                    </th> -->
                </tr>
        </ng-template>
                <ng-template pTemplate="body"  let-record="$implicit" let-i="rowIndex">
                    <tr class="tr-bg" [pReorderableRow]="index">
                            <td class="col-sm-2">
                                <span class="ui-column-title"> {{'Id' | localize}}</span>
                                <a target="_blank" href="app/sprintship/controller-order-package-detail/{{record.id}}">
                                    {{record.id}}
                                </a>
                            </td>
                            <td class="col-sm-2">
                                <span class="ui-column-title"> {{'OrderId' | localize}}</span>
                                <a target="_blank" href="app/sprintship/controller-order-details/{{record.orderId}}">
                                    {{record.orderId}}
                                </a>
                            </td>
                            <td class="col-sm-2">
                                <span class="ui-column-title"> {{'Customer' | localize}}</span>
                                {{record.order.user.name}} {{record.order.user.surname}}
                            </td>
                            <td class="col-sm-2">
                                <span class="ui-column-title"> {{'Pickup' | localize}}</span>
                                {{record.order.pickupDetail.contact.firstName}} {{record.order.pickupDetail.contact.lastName}}
                                {{record.order.pickupDetail.contact.address.addressLine1}}
                               {{record.order.pickupDetail.contact.address.addressLine2}}
                                {{record.order.pickupDetail.contact.address.postalCode.value}},{{record.order.pickupDetail.contact.address.postalCode.city}},
                              {{record.order.pickupDetail.contact.address.postalCode.state}},{{record.order.pickupDetail.contact.address.postalCode.country}}
                            </td>
                            <td class="col-sm-2">
                                <span class="ui-column-title"> {{'Delivery' | localize}}</span>
                                {{record.order.deliveryDetail.contact.firstName}} {{record.order.pickupDetail.contact.lastName}}
                                {{record.order.deliveryDetail.contact.address.addressLine1}}
                               {{record.order.deliveryDetail.contact.address.addressLine2}}
                                {{record.order.deliveryDetail.contact.address.postalCode.value}},{{record.order.deliveryDetail.contact.address.postalCode.city}},
                              {{record.order.deliveryDetail.contact.address.postalCode.state}},{{record.order.deliveryDetail.contact.address.postalCode.country}}
                            </td>
                            <td class="col-sm-2">
                                <!-- <span *ngIf="record.order.orderStatus.orderStatusType"> -->
                                        {{record.order.orderStatus.orderStatusType.description}}
                                        {{record.order.orderStatus.time}}
                                <!-- </span>  --> 
                            </td>
                            <!-- <td style="padding-top: 150px;">
                                <span class="ui-column-title"> {{'Order Id' | localize}}</span>
                               0
                            </td> -->
                            <!-- <td style="padding-top: 28px;">
                                <span class="ui-column-title"> {{'Order Id' | localize}}</span> -->
                                <!-- <div>{{ record.pickupDetail.etaEnd | date:'shortTime'}}</div> -->
                            <!-- </td> -->
                            <!-- <td style="padding-top: 28px;">
                                <span class="ui-column-title"> {{'Order Id' | localize}}</span>
                                <div>{{ record.pickupDetail.etaEnd | date:'shortTime'}}</div>
                            </td>
                            <td style="padding-top: 28px;">
                                <span class="ui-column-title"> {{'Order Id' | localize}}</span>
                                Auto
                            </td>
                            <td style="padding-top: 28px;">
                                <span class="ui-column-title"> {{'Order Id' | localize}}</span>
                                <div *ngIf="record.orderStatus">{{record.orderStatus.orderStatusType.description}}</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;">
                                <span class="ui-column-title"> {{'Order Id' | localize}}</span>
                                None
                            </td>
                            <td style="padding-top: 28px;">
                                <span class="ui-column-title"> {{'Order Id' | localize}}</span>
                                
                            </td> -->
                                
                            <!-- <td style="text-align: center;padding-top: 28px;" pReorderableRowHandle>
                                <span><i class="fa fa-grip-vertical"></i></span>
                            </td>
                            <td style="padding-top: 28px;">
                                <span class="ui-column-title"> {{'Id' | localize}}</span>
                                        {{i + 1}}
                            </td>
                            <td style="text-align: center;">
                                <label class="kt-checkbox" style="position: relative;top: -5px;">
                                    <input type="checkbox">
                                    <span></span>
                                </label>
                            </td>
                            <td style="padding-top: 28px;">
                                <span class="ui-column-title"> {{'Order Id' | localize}}</span>
                                {{record.id}}
                            </td>
                            <td style="padding-top: 28px;">Delivery</td>
                            <td style="padding-top: 28px;">8</td>
                            <td style="padding-top: 15px;">
                                <span class="ui-column-title"> {{'Delivery Name' | localize}}</span>
                                <div><b>{{record.deliveryDetail.contact.firstName}} {{record.deliveryDetail.contact.lastName}}</b></div>
                                <div class="row">
                                    <div class="col-sm-8">{{record.deliveryDetail.contact.address.addressLine1}} </div>
                                    <div class="col-sm-4 more-info" >
                                        <div class="more-btn" (click)="toggleMoreInfo($event)">
                                            <i class="flaticon flaticon-more-1"></i>
                                        </div>
                                        <div class="more-info-container" >
                                            <div>{{record.deliveryDetail.contact.address.postalCode.city}}, {{record.deliveryDetail.contact.address.postalCode.state}}, {{record.deliveryDetail.contact.address.postalCode.value}}</div>
                                            <div>eight@otsomail.com</div>
                                            <div>88888888888888888888888888888</div>
                                            <div>88888888OOFFDD888</div>
                                            <div>{{record.deliveryDetail.etaEnd | date:'dd/MM/yyyy'}}</div>
                                            <div>88888888OOFFDD888</div>
                                        </div>
                                    </div>
                                    
                                </div>
                            </td>
                            <td>
                                <div>{{record.orderStatus.orderStatusType.description}}</div>
                                <div>{{ record.orderStatus.creationTime | date:'dd/MM/yyyy'}}</div>
                                <div>{{ record.orderStatus.creationTime | date:'shortTime'}}</div>
                            </td>
                            <td style="padding-top: 28px;">8:18am</td>
                            <td style="padding-top: 28px;">8.88</td>
                            <td style="padding-top: 28px;">888888</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)="getOrderPackages($event)"
                    [totalRecords]="primengTableHelper.totalRecordsCount"
                    [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
        </p-paginator>
        <span class="total-records-count">
            {{'TotalRecordsCount' | localize:primengTableHelper.totalRecordsCount}}
        </span>
    </div> 
</div>