<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>{{"Order Details" | localize}}</span>
                    </h3>
                    <span class="kt-subheader__separator kt-subheader__separator--v"></span>
                   <!--  <span class="badge badge-info margin-left-5">
                        
                    </span> -->
                </div>
                <div class="kt-subheader__toolbar">
                    <div class="kt-subheader__wrapper">
                        
                    </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 kt-form--label-right">
                                    <div class="kt-portlet__body">

                                        <div class="kt-section kt-section--first">
                                                <div class="row" style="padding-bottom: 40px;">
                                                    <div class="col-lg-6">
                                                        <div class="form-group row">

                                                           <div class="kt-widget__content">
                                                                {{'PackageId' | localize}} {{orderPackageId}}
                                                                            <!-- <div *ngFor="let order of orderDetails;let i=index;">    
                                                                                <div class="kt-widget__info">
                                                                                    <h5 class="kt-portlet__head-title">Order Id: {{ id }}</h5>
                                                                                </div>
                                                                                <div class="kt-widget__info">
                                                                                    <span>Customer: </span> 
                                                                                    <span class="kt-widget__data" style="font-weight: bold;">{{ order.pickupDetail.contact.firstName }}</span> 
                                                                                      
                                                                                </div>
                                                                                <div class="kt-widget__info">
                                                                                    <span>Pick Up Date: </span> 
                                                                                    <span class="kt-widget__data" style="font-weight: bold;">{{ order.pickupDetail.etaEnd | date: 'medium' }}</span> 
                                                                                      
                                                                                </div>

                                                                                <div class="kt-widget__info">
                                                                                    
                                                                                    <span>Delivery Date: </span>
                                                                                    <span class="kt-widget__data" style="font-weight: bold;">{{ order.deliveryDetail.etaEnd | date: 'medium' }}</span>  
                                                                                </div>
                                                                            </div> -->
                                                                                
                                                                                     
                                                                                

                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                                            

                                                                            <div class="portlet-body">
                                                                                <!-- <div class="kt-portlet__body body-map">
                                                                                <agm-map 
                                                                                [latitude]="lat" [longitude]="lng" 
                                                                                (mapReady)="mapReady($event)" 
                                                                                [zoom]="zoom" 
                                                                                [fullscreenControl]="true"
                                                                                >
                                                                                
                                                                                <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>

                                                                                </agm-map>
                                                                                </div> -->
                                                                            </div>
                                                    </div>
                                                    
                                                </div>

                                                <div class="row">
                                                    
                                                    <div class="col-lg-6">
                                                        <div class="kt-widget__info">
                                                            <h5 class="kt-portlet__head-title">Pick Up Details</h5>
                                                        </div>
                                                        <div >
                                                                <!-- *ngFor="let order of orderDetails;let i=index;" -->
                                                            <!-- <div class="kt-widget__info">
                                                                
                                                                <span class="kt-widget__data" style="font-weight: bold;">{{ order.pickupDetail.contact.firstName }} {{ order.deliveryDetail.contact.lastName }}</span>  
                                                            </div>

                                                            <div class="kt-widget__info">
                                                                
                                                                <span class="kt-widget__data" style="font-weight: bold;">{{ order.pickupDetail.contact.companyName }}</span>  
                                                            </div>

                                                            <div class="kt-widget__info">
                                                                
                                                                <span class="kt-widget__data" style="font-weight: bold;">{{ order.pickupDetail.contact.address.addressLine1 }}</span>  
                                                            </div>

                                                            <div class="kt-widget__info">
                                                                
                                                                <span class="kt-widget__data" style="font-weight: bold;">{{ order.pickupDetail.contact.address.addressLine2 }}</span>  
                                                            </div>
                                                            <div class="kt-widget__info">
                                                                
                                                                <span class="kt-widget__data" style="font-weight: bold;">{{ order.pickupDetail.contact.address.postalCode.city }}</span>  
                                                            </div>
                                                            <div class="kt-widget__info">
                                                                
                                                                <span class="kt-widget__data" style="font-weight: bold;">{{ order.pickupDetail.contact.address.postalCode.state }}</span>  
                                                            </div>
                                                            <div class="kt-widget__info">
                                                                
                                                                <span class="kt-widget__data" style="font-weight: bold;">{{ order.pickupDetail.contact.address.postalCode.value }}</span>  
                                                            </div>
                                                            <div class="kt-widget__info">
                                                                
                                                                <span class="kt-widget__data" style="font-weight: bold;">{{ order.pickupDetail.contact.address.geocode.latitude }}</span>  
                                                            </div>
                                                            <div class="kt-widget__info">
                                                                
                                                                <span class="kt-widget__data" style="font-weight: bold;">{{ order.pickupDetail.contact.address.geocode.longitude }}</span>  
                                                            </div> -->

                                                        </div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="kt-widget__info">
                                                            <h5 class="kt-portlet__head-title">Delivery Details</h5>
                                                        </div>
                                                        <div>
                                                                <!-- *ngFor="let order of orderDetails;let i=index;" -->
                                                            <!-- <div class="kt-widget__info">
                                                                
                                                                <span class="kt-widget__data" style="font-weight: bold;">{{ order.deliveryDetail.contact.firstName }} {{ order.deliveryDetail.contact.lastName }}</span>  
                                                            </div>

                                                            <div class="kt-widget__info">
                                                                
                                                                <span class="kt-widget__data" style="font-weight: bold;">{{ order.deliveryDetail.contact.companyName }}</span>  
                                                            </div>

                                                            <div class="kt-widget__info">
                                                                
                                                                <span class="kt-widget__data" style="font-weight: bold;">{{ order.deliveryDetail.contact.address.addressLine1 }}</span>  
                                                            </div>

                                                            <div class="kt-widget__info">
                                                                
                                                                <span class="kt-widget__data" style="font-weight: bold;">{{ order.deliveryDetail.contact.address.addressLine2 }}</span>  
                                                            </div>
                                                            <div class="kt-widget__info">
                                                                
                                                                <span class="kt-widget__data" style="font-weight: bold;">{{ order.deliveryDetail.contact.address.postalCode.city }}</span>  
                                                            </div>
                                                            <div class="kt-widget__info">
                                                                
                                                                <span class="kt-widget__data" style="font-weight: bold;">{{ order.deliveryDetail.contact.address.postalCode.state }}</span>  
                                                            </div>
                                                            <div class="kt-widget__info">
                                                                
                                                                <span class="kt-widget__data" style="font-weight: bold;">{{ order.deliveryDetail.contact.address.postalCode.value }}</span>  
                                                            </div>
                                                            <div class="kt-widget__info">
                                                                
                                                                <span class="kt-widget__data" style="font-weight: bold;">{{ order.deliveryDetail.contact.address.geocode.latitude }}</span>  
                                                            </div>
                                                            <div class="kt-widget__info">
                                                                
                                                                <span class="kt-widget__data" style="font-weight: bold;">{{ order.deliveryDetail.contact.address.geocode.longitude }}</span>  
                                                            </div> -->

                                                        </div>
                                                    </div>
                                                    
                                                </div>   
                                         

                                            <div class="kt-section__body">
                                                <!-- <div class="form-group row">
                                                    <label class="col-lg-3 col-form-label">Holder:</label>
                                                    <div class="col-lg-6">
                                                        <input type="email" class="form-control" placeholder="Enter full name">
                                                        <span class="form-text text-muted">Please enter your account holder</span>
                                                    </div>
                                                </div>
                                                <div class="form-group row">
                                                    <label class="col-lg-3 col-form-label">Contact</label>
                                                    <div class="col-lg-6">
                                                        <div class="input-group">
                                                            <div class="input-group-prepend"><span class="input-group-text"><i class="la la-chain"></i></span></div>
                                                            <input type="text" class="form-control" placeholder="Phone number">
                                                        </div>  
                                                    </div>
                                                </div>                          
                                                <div class="form-group row">
                                                    <label class="col-lg-3 col-form-label">Communication:</label>
                                                    <div class="col-lg-6">
                                                        <div class="kt-checkbox-inline">
                                                            <label class="kt-checkbox">
                                                                <input type="checkbox"> Email 
                                                                <span></span>
                                                            </label>
                                                            <label class="kt-checkbox">
                                                                <input type="checkbox"> SMS 
                                                                <span></span>
                                                            </label>
                                                            <label class="kt-checkbox">
                                                                <input type="checkbox"> Phone 
                                                                <span></span>
                                                            </label>
                                                        </div>
                                                   </div>
                                                </div> -->
                                                
                                                



                                                                             
                                                                                      
                                                                                

                                            </div>
                                        </div>
                                    </div>
                                    <div class="kt-portlet__foot">
                                        <div class="kt-form__actions">
                                            <!-- <div align="right">
                                                   <button class="btn btn-secondary btn-elevate btn-pill" (click)="createOrEditClinic('/app/main/laboratory/clinics')">Cancel</button>
                                                 
                                                    <button type="submit" class="btn btn-success btn-elevate btn-pill" (click)="save()" >
                                                    <i class="fa fa-save"></i> <span>{{l("Save")}}</span>
                                                    </button>
                                                    
                                                    
                                            </div>    -->
                                        </div>
                                    </div>
                                </form>
                </div>
            </div>
        </div>

   
    </div>
</div>


