<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>{{"OrderCreate" | localize}}</span>
                    </h3>
                    <span class="kt-subheader__separator kt-subheader__separator--v"></span>
                    <span class="kt-subheader__desc">
                        {{"OrderManagement" | localize}}
                    </span>
                </div>
                <div class="kt-subheader__toolbar">
                    <div class="kt-subheader__wrapper">
                        <!-- <button (click)="createOrder()" *ngIf="isGranted('Pages.Orders.Create')" class="btn btn-primary btn-elevate btn-pill btn-elevate-air"><i class="fa fa-plus"></i> {{"OrderCreate" | localize}}</button> -->
                        <!-- <button (click)="createOrUpdate('/app/sprintship/create-update-order/')" *ngIf="isGranted('Pages.Orders.Create')" class="btn btn-primary btn-elevate btn-pill btn-elevate-air"><i class="fa fa-plus"></i> {{"OrderCreate" | localize}}</button> -->

                        <!-- <button (click)="createTag()" *ngIf="isGranted('Pages.Orders.Create')" class="btn btn-primary btn-elevate btn-pill btn-elevate-air"><i class="fa fa-plus"></i> {{"TagCreate" | localize}}</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">
                    <div class="row align-items-lesft">
                        <div class="col-xl-6">
                            <div class="kt-heading kt-heading--sm">{{"Order" +" - " +id +" " +"Details" | localize}}
                            </div>
                            <table class="table table-striped">
                                <thead>

                                </thead>
                                <tbody>
                                    <tr>
                                        <td>{{"Location" | localize}}</td>
                                        <td>{{location}}</td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td>{{"Customer" | localize}}</td>
                                        <td>{{customerName}}</td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td>{{"TimeCreated" | localize}}</td>
                                        <td>{{creationTime}}</td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td>{{"TrackingIdentifier" | localize}}</td>
                                        <td>{{trackingIdentifier}}</td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td width="45%">{{"PickUpFrom" | localize}}</td>
                                        <td width="45%" >{{pickUpContact}}</td>
                                        <td width="10%">
                                            <button class="btn btn-success btn-md  btn-elevate btn-pill btn-elevate-air"
                                                data-ktwizard-type="action-submit" (click)="updateAddressModalComponent.show(orderInput.pickupDetail.contact.address.id)">
                                                Edit
                                            </button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>{{"PickUpDate" | localize}}</td>
                                        <td>{{pickupEta | date:'MM/dd/yyyy'}}</td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td>{{"PickUpAfterTime" | localize}}</td>
                                        <td>{{pickUpTo | date:'hh:mm aa'}}</td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td>{{"PickUpBeforeTime" | localize}}</td>
                                        <td>{{pickUpFrom | date:'hh:mm aa'}}</td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td width="45%">{{"DeliveryTo" | localize}}</td>
                                        <td width="45%">{{deliveryContact}}</td>
                                        <td width="10%">
                                            <button class="btn btn-success btn-md  btn-elevate btn-pill btn-elevate-air"
                                                data-ktwizard-type="action-submit" (click)="updateAddressModalComponent.show(orderInput.deliveryDetail.contact.address.id)">
                                                Edit
                                            </button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>{{"DeliveryDate" | localize}}</td>
                                        <td>{{deliveryEta | date:'MM/dd/yyyy'}}</td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td>{{"DeliveryAfterTime" | localize}}</td>
                                        <td>{{deliveryTo | date:'hh:mm aa'}}</td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td>{{"DeliveryBeforeTime" | localize}}</td>
                                        <td>{{deliveryFrom | date:'hh:mm aa'}}</td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td>{{"CustomerOrderNumber" | localize}}</td>
                                        <td>{{orderNumber}}</td>
                                        <td></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="col-xl-6">
                            <div class="form-group">
                                <label for="SprintNotes">{{"Note" | localize}}</label>
                                <textarea class="form-control" style="height:80px;" id="Note" name="Note"
                                    [(ngModel)]="note"></textarea>
                            </div>
                            <div class="float-right">
                                <button class="btn btn-success btn-md  btn-elevate btn-pill btn-elevate-air float-right"
                                    data-ktwizard-type="action-submit" (click)="saveNote()">
                                    Save
                                </button>
                            </div><br>
                            <div class="form-group">
                                <label for="SprintNotes">{{"Packages" | localize}}</label>
                                <table class="table table-bordered table-striped table-condensed flip-content"
                                    id="addedPackages">
                                    <thead>
                                        <tr>
                                            <th style="width:33.3%">{{"Package" | localize}}</th>
                                            <th style="width:33.3%">{{"Price" | localize}}</th>
                                            <th style="width:33.3%">{{"Quantity" | localize}}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr *ngFor="let package of packageList">
                                            <td>{{package.packageName}}
                                            </td>
                                            <td>{{package.price.toFixed(2)}}</td>
                                            <td>{{package.quantity}}</td>
                                        </tr>
                                        <tr *ngIf="packageList.length==0">
                                            <td colspan="3">
                                                No Order Package
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <updateAddressModalComponent #updateAddressModalComponent (viewOrder)="viewOrderSave($event)"></updateAddressModalComponent>

</div>