<div bsModal #createOrEditModal="bs-modal" (onShown)="onShown()" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="createOrEditModal" aria-hidden="true" [config]="{backdrop: 'static', keyboard: !saving}">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form *ngIf="active" #userForm="ngForm" novalidate (ngSubmit)="save()" autocomplete="off">
                <div class="modal-header">
                    <h4 class="modal-title">
                        <span>{{"OrderCreate" | localize}}</span>
                    </h4>
                    <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')" [disabled]="saving">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <tabset class="tab-container tabbable-line">
                        <tab heading="{{'Details' | localize}}" customClass="m-tabs__item">

                            <div class="form-group m-form__group align-items-center">
                                <label for="Location">{{"Location" | localize}} *</label>
                                <p-autoComplete [(ngModel)]="locationInput"
                                    id="Location"
                                    [suggestions]="filteredLocation"
                                    (completeMethod)="filterLocation($event)"
                                    field="name"
                                    [minLength]="1"
                                    name="Location"
                                    placeholder="Select location.."
                                    required
                                    styleClass="width-percent-100"
                                    #location="ngModel"
                                    [style]="{'width':'100%'}"
                                    [inputStyle]="{'width':'95%','height':'33px'}"
                                    [dropdown]="true">
                                </p-autoComplete>
                                <validation-messages [formCtrl]="location"></validation-messages>
                            </div>

                            <div class="form-group m-form__group align-items-center">
                                <label for="TagType">{{"TagType" | localize}} *</label>
                                <p-autoComplete [(ngModel)]="createInput.tagType"
                                    id="TagType"
                                    [suggestions]="filteredTagType"
                                    (completeMethod)="filterTagType($event)"
                                    field="name"
                                    [minLength]="1"
                                    name="TagType"
                                    placeholder="Select tag type.."
                                    required
                                    [style]="{'width':'100%'}"
                                    [inputStyle]="{'width':'95%','height':'33px'}"
                                    [dropdown]="true"
                                    #tagtype="ngModel"  >
                                </p-autoComplete>
                                <validation-messages [formCtrl]="tagtype"></validation-messages>
                            </div>
                            <div class="form-group">
                                <label for="Tag">{{"Tag" | localize}} *</label>
                                <input id="Tag" #tag="ngModel" type="email" name="Tag" class="form-control" [(ngModel)]="createInput.tag" required/>
                                <validation-messages [formCtrl]="tag"></validation-messages>
                            </div>
                        </tab>
                        <tab heading="{{'PickupDetails' | localize}}" customClass="m-tabs__item">
                            <tabset class="tab-container tabbable-line">
                                <tab heading="{{'ContactDetail' | localize}}" customClass="m-tabs__item">
                                    <div class="form-group">
                                        <label for="pickupFirstNameInput">{{"FirstName" | localize}} *</label>
                                        <input id="pickupFirstNameInput" #pickupFirstNameInput="ngModel" type="text" name="pickupFirstNameInput" class="form-control"  
                                        [(ngModel)]="pickupContactInput.firstName" required>
                                        <validation-messages [formCtrl]="pickupFirstNameInput"></validation-messages>
                                    </div>
                                    <div class="form-group">
                                        <label for="pickupLastNameInput">{{"LastName" | localize}} *</label>
                                        <input id="pickupLastNameInput" #pickupLastNameInput="ngModel" type="text" name="pickupLastNameInput" class="form-control"  
                                        [(ngModel)]="pickupContactInput.lastName" required>
                                        <validation-messages [formCtrl]="pickupLastNameInput"></validation-messages>
                                    </div>

                                    <div class="form-group">
                                        <label for="pickupEmailInput">{{"Email" | localize}} *</label>
                                        <input id="pickupEmailInput" #pickupEmailInput="ngModel" type="email" name="pickupEmailInput" class="form-control"  
                                        [(ngModel)]="pickupEmail" required>
                                        <validation-messages [formCtrl]="pickupEmailInput"></validation-messages>
                                    </div>

                                    <div class="form-group">
                                        <label for="pickupPhoneInput">{{"Phone" | localize}} *</label>
                                        <input id="pickupPhoneInput" #pickupPhoneInput="ngModel" type="text" name="pickupPhoneInput" class="form-control"  
                                        [(ngModel)]="pickupPhone" required>
                                        <validation-messages [formCtrl]="pickupPhoneInput"></validation-messages>
                                    </div>

                                    <div class="form-group">
                                            <label for="PickupEta">{{"PickupEta" | localize}} *</label>
                                            <input name="PickupEta"
                                            type="text"
                                            class="form-control"
                                            id="PickupEta"
                                            bsDatepicker
                                            [(ngModel)]="pickupEta"
                                            #PickupEta="ngModel"
                                            required/>
                                            <validation-messages [formCtrl]="PickupEta"></validation-messages>
                                    </div>
                                    <div class="form-group">
                                            <label for="PickUpFrom">{{"PickUpFrom" | localize}} *</label>
                                            <div class="col-lg-10 col-md-9 col-sm-8">
                                                <timepicker 
                                                name="pickUpFrom"
                                                [(ngModel)]="pickUpFrom" 
                                                [showSpinners]="false" 
                                                #pickUpFromCtrl="ngModel"></timepicker>
                                            </div>
                                            <validation-messages [formCtrl]="pickUpFromCtrl"></validation-messages>
                                            
                                            <label for="PickUpTo">{{"PickUpTo" | localize}} *</label>
                                            <div class="col-lg-10 col-md-9 col-sm-8">
                                                <timepicker 
                                                [(ngModel)]="pickUpTo"
                                                name="pickUpTo"
                                                [showSpinners]="false" 
                                                #pickUpToCtrl="ngModel"></timepicker>
                                            </div>
                                            <validation-messages [formCtrl]="pickUpToCtrl"></validation-messages>
                                    </div>
                                </tab>
        
                                <tab heading="{{'Address' | localize}}" customClass="m-tabs__item">
                                    <div class="form-group">
                                        <label for="pickupAddress1Input">{{"Address1" | localize}} *</label>
                                        <input id="pickupAddress1Input" #pickupAddress1Input="ngModel" type="text" name="pickupAddress1Input" class="form-control"  
                                        [(ngModel)]="pickupContactAddress.addressLine1" required>
                                        <validation-messages [formCtrl]="pickupAddress1Input"></validation-messages>
                                    </div>
                                    <div class="form-group">
                                        <label for="pickupAddress2Input">{{"Address2" | localize}} </label>
                                        <input id="pickupAddress2Input" #pickupAddress2Input="ngModel" type="text" name="pickupAddress2Input" class="form-control"  
                                        [(ngModel)]="pickupContactAddress.addressLine2" >
                                        <validation-messages [formCtrl]="pickupAddress2Input"></validation-messages>
                                    </div>
                                    <div class="form-group">
                                        <label for="pickupCountryInput">{{"Country" | localize}} *</label>
                                        <p-autoComplete [(ngModel)]="pickupcountryId"
                                                        id="pickupCountryInput"
                                                        [suggestions]="filteredCountries"
                                                        (completeMethod)="filterCountries($event)"
                                                        field="name"
                                                        value="id"
                                                        placeholder="Country"
                                                        [minLength]="1"
                                                        name="pickupCountryInput"
                                                        [style]="{'width':'100%'}"
                                                        [inputStyle]="{'width':'95%','height':'33px'}"
                                                        [dropdown]="true"
                                                        #pickupCountryInput="ngModel"
                                                        required
                                                        >
                                        </p-autoComplete>
                                        <validation-messages [formCtrl]="pickupCountryInput"></validation-messages>
                                    </div>
                                    <div class="form-group">
                                        <label for="pickupPostalInput">{{"Postal Code" | localize}} *</label>
                                        <p-autoComplete [(ngModel)]="pickuppostalId"
                                                        id="pickupPostalInput"
                                                        [suggestions]="filteredPostal"
                                                        (completeMethod)="filterPostal($event)"
                                                        field="name"
                                                        value="id"
                                                        placeholder="Postal Code"
                                                        [minLength]="1"
                                                        name="pickupPostalInput"
                                                        [style]="{'width':'100%'}"
                                                        [inputStyle]="{'width':'95%','height':'33px'}"
                                                        [dropdown]="true"
                                                        #pickupPostalInput="ngModel"
                                                        required
                                                        >
                                        </p-autoComplete>
                                        <validation-messages [formCtrl]="pickupPostalInput"></validation-messages>
                                    </div>
                                    <div class="form-group">
                                        <label for="pickupStateInput">{{"State" | localize}} *</label>
                                        <p-autoComplete [(ngModel)]="pickupstateId"
                                                        id="pickupStateInput"
                                                        [suggestions]="filteredStates"
                                                        (completeMethod)="filterStates($event)"
                                                        field="name"
                                                        value="id"
                                                        placeholder="State"
                                                        [minLength]="1"
                                                        name="pickupStateInput"
                                                        [style]="{'width':'100%'}"
                                                        [inputStyle]="{'width':'95%','height':'33px'}"
                                                        [dropdown]="true"
                                                        #pickupStateInput="ngModel"
                                                        required
                                                        >
                                        </p-autoComplete>
                                        <validation-messages [formCtrl]="pickupStateInput"></validation-messages>
                                    </div>
                                    <div class="form-group">
                                        <label for="pickupCityInput">{{"City" | localize}} *</label>
                                        <p-autoComplete [(ngModel)]="pickupcityId"
                                                        id="pickupCityInput"
                                                        [suggestions]="filteredCities"
                                                        (completeMethod)="filterCities($event)"
                                                        field="name"
                                                        value="id"
                                                        placeholder="City"
                                                        [minLength]="1"
                                                        name="pickupCityInput"
                                                        [style]="{'width':'100%'}"
                                                        [inputStyle]="{'width':'95%','height':'33px'}"
                                                        [dropdown]="true"
                                                        #pickupCityInput="ngModel"
                                                        required
                                                        >
                                        </p-autoComplete>
                                        <validation-messages [formCtrl]="pickupCityInput"></validation-messages>
                                    </div>         
                                </tab>
                            </tabset>
                        </tab>
                        <tab heading="{{'DestinationDetails' | localize}}" customClass="m-tabs__item">
                            <tabset class="tab-container tabbable-line">
                                <tab heading="{{'ContactDetail' | localize}}" customClass="m-tabs__item">
                                    <div class="form-group">
                                        <label for="destinationFirstNameInput">{{"FirstName" | localize}} *</label>
                                        <input id="destinationFirstNameInput" #destinationFirstNameInput="ngModel" type="text" name="destinationFirstNameInput" class="form-control"  
                                        [(ngModel)]="destinationContactInput.firstName" required>
                                        <validation-messages [formCtrl]="destinationFirstNameInput"></validation-messages>
                                    </div>
                                    <div class="form-group">
                                        <label for="destinationLastNameInput">{{"LastName" | localize}} *</label>
                                        <input id="destinationLastNameInput" #destinationLastNameInput="ngModel" type="text" name="destinationLastNameInput" class="form-control"  
                                        [(ngModel)]="destinationContactInput.lastName" required>
                                        <validation-messages [formCtrl]="destinationLastNameInput"></validation-messages>
                                    </div>

                                    <div class="form-group">
                                        <label for="destinationEmailInput">{{"Email" | localize}} *</label>
                                        <input id="destinationEmailInput" #destinationEmailInput="ngModel" type="email" name="destinationEmailInput" class="form-control"  
                                        [(ngModel)]="destinationEmail" required>
                                        <validation-messages [formCtrl]="destinationEmailInput"></validation-messages>
                                    </div>

                                    <div class="form-group">
                                        <label for="destinationPhoneInput">{{"Phone" | localize}} *</label>
                                        <input id="destinationPhoneInput" #destinationPhoneInput="ngModel" type="text" name="destinationPhoneInput" class="form-control"  
                                        [(ngModel)]="destinationPhone" required>
                                        <validation-messages [formCtrl]="destinationPhoneInput"></validation-messages>
                                    </div>

                                    <div class="form-group ">
                                            <label for="DeliveryEta">{{"DeliveryEta" | localize}} *</label>
                                            <input name="DeliveryEta"
                                            type="text"
                                            class="form-control"
                                            id="DeliveryEta"
                                            bsDatepicker
                                            [(ngModel)]="deliveryEta"
                                            #DeliveryEta="ngModel"
                                            required/>
                                            <validation-messages [formCtrl]="DeliveryEta"></validation-messages>
                                    </div>

                                    <div class="form-group ">
                                            <label for="DeliveryFrom">{{"DeliveryFrom" | localize}} *</label>
                                            <div class="col-lg-10 col-md-9 col-sm-8">
                                                <timepicker [(ngModel)]="deliveryFrom" 
                                                name="deliveryFrom"
                                                [showSpinners]="false" 
                                                #deliveryFromCtrl="ngModel"></timepicker>
                                            </div>
                                            <validation-messages [formCtrl]="deliveryFromCtrl"></validation-messages>
                                            
                                            <label for="DeliveryTo">{{"DeliveryTo" | localize}} *</label>
                                            <div class="col-lg-10 col-md-9 col-sm-8">
                                                <timepicker [(ngModel)]="deliveryTo"
                                                name="deliveryTo"
                                                [showSpinners]="false" 
                                                #deliveryToCtrl="ngModel"></timepicker>
                                            </div>
                                            <validation-messages [formCtrl]="deliveryToCtrl"></validation-messages>
                                    </div>
                                </tab>
        
                                <tab heading="{{'Address' | localize}}" customClass="m-tabs__item">
                                    <div class="form-group">
                                        <label for="destinationAddress1Input">{{"Address1" | localize}} *</label>
                                        <input id="destinationAddress1Input" #destinationAddress1Input="ngModel" type="text" name="destinationAddress1Input" class="form-control"  
                                        [(ngModel)]="destinationContactAddress.addressLine1" required>
                                        <validation-messages [formCtrl]="destinationAddress1Input"></validation-messages>
                                    </div>
                                    <div class="form-group">
                                        <label for="destinationAddress2Input">{{"Address2" | localize}} </label>
                                        <input id="destinationAddress2Input" #destinationAddress2Input="ngModel" type="text" name="destinationAddress2Input" class="form-control"  
                                        [(ngModel)]="destinationContactAddress.addressLine2" >
                                        <validation-messages [formCtrl]="destinationAddress2Input"></validation-messages>
                                    </div>
                                    <div class="form-group">
                                        <label for="destinationCountryInput">{{"Country" | localize}} *</label>
                                        <p-autoComplete [(ngModel)]="destinationcountryId"
                                                        id="destinationCountryInput"
                                                        [suggestions]="filteredCountries"
                                                        (completeMethod)="filterCountries($event)"
                                                        field="name"
                                                        value="id"
                                                        placeholder="Country"
                                                        [minLength]="1"
                                                        name="destinationCountryInput"
                                                        [style]="{'width':'100%'}"
                                                        [inputStyle]="{'width':'95%','height':'33px'}"
                                                        [dropdown]="true"
                                                        #destinationCountryInput="ngModel"
                                                        required
                                                        >
                                        </p-autoComplete>
                                        <validation-messages [formCtrl]="destinationCountryInput"></validation-messages>
                                    </div>
                                    <div class="form-group">
                                        <label for="destinationPostalInput">{{"Postal Code" | localize}} *</label>
                                        <p-autoComplete [(ngModel)]="destinationpostalId"
                                                        id="destinationPostalInput"
                                                        [suggestions]="filteredPostal"
                                                        (completeMethod)="filterPostal($event)"
                                                        field="name"
                                                        value="id"
                                                        placeholder="Postal Code"
                                                        [minLength]="1"
                                                        name="destinationPostalInput"
                                                        [style]="{'width':'100%'}"
                                                        [inputStyle]="{'width':'95%','height':'33px'}"
                                                        [dropdown]="true"
                                                        #destinationPostalInput="ngModel"
                                                        required
                                                        >
                                        </p-autoComplete>
                                        <validation-messages [formCtrl]="destinationPostalInput"></validation-messages>
                                    </div>
                                    <div class="form-group">
                                        <label for="destinationStateInput">{{"State" | localize}} *</label>
                                        <p-autoComplete [(ngModel)]="destinationstateId"
                                                        id="destinationStateInput"
                                                        [suggestions]="filteredStates"
                                                        (completeMethod)="filterStates($event)"
                                                        field="name"
                                                        value="id"
                                                        placeholder="State"
                                                        [minLength]="1"
                                                        name="destinationStateInput"
                                                        [style]="{'width':'100%'}"
                                                        [inputStyle]="{'width':'95%','height':'33px'}"
                                                        [dropdown]="true"
                                                        #destinationStateInput="ngModel"
                                                        required
                                                        >
                                        </p-autoComplete>
                                        <validation-messages [formCtrl]="destinationStateInput"></validation-messages>
                                    </div>
                                    <div class="form-group">
                                        <label for="destinationCityInput">{{"City" | localize}} *</label>
                                        <p-autoComplete [(ngModel)]="destinationcityId"
                                                        id="destinationCityInput"
                                                        [suggestions]="filteredCities"
                                                        (completeMethod)="filterCities($event)"
                                                        field="name"
                                                        value="id"
                                                        placeholder="City"
                                                        [minLength]="1"
                                                        name="destinationCityInput"
                                                        [style]="{'width':'100%'}"
                                                        [inputStyle]="{'width':'95%','height':'33px'}"
                                                        [dropdown]="true"
                                                        #destinationCityInput="ngModel"
                                                        required
                                                        >
                                        </p-autoComplete>
                                        <validation-messages [formCtrl]="destinationCityInput"></validation-messages>
                                    </div>         
                                </tab>
                            </tabset>
                        </tab>
                        <tab heading="{{'Packages' | localize}}" customClass="m-tabs__item">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th style="width:10%"></th>
                                        <th style="width:45%">{{"Package" | localize}}</th>
                                        <th style="width:45%">{{"Quantity" | localize}}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr *ngFor="let package of packages">
                                        <td>
                                            <button class="btn btn-outline-danger m-btn m-btn--icon m-btn--icon-only m-btn--pill" (click)="removePackage(package)">
                                                <i class="fa fa-times"></i>
                                            </button>
                                        </td>
                                        <td>{{package.packageName}}</td>
                                        <td>{{package.quantity}}</td>
                                    </tr>
                                    <tr >
                                        <td>
                                            <button type="button" class="btn btn-sm btn-success" (click)="addPackages()">
                                                {{"Add" | localize}}
                                            </button>
                                        </td>
                                        <td>
                                            <p-autoComplete [(ngModel)]="addPackage"
                                                id="Package"
                                                [suggestions]="filteredPackage"
                                                (completeMethod)="filterPackage($event)"
                                                field="name"
                                                [minLength]="1"
                                                name="addPackage"
                                                dropdown="true"
                                                placeholder="Select package.."
                                                #packageCtrl="ngModel">
                                            </p-autoComplete>
                                            <validation-messages [formCtrl]="packageCtrl"></validation-messages>
                                        </td>
                                        <td>
                                            <input type="text" name="packageQuantity" class="form-control" [(ngModel)]="packageQuantity"/>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </tab>
                        <tab heading="{{'Note' | localize}}" customClass="m-tabs__item">

                            <div class="form-group">
                                <label for="NoteInput">{{"Note" | localize}} *</label>
                                <textarea class="form-control" [(ngModel)]="noteInput" name="NoteInput" ></textarea>
                            </div>
                        </tab>
                    </tabset>

                            
                </div>
                <div class="modal-footer">
                    <button [disabled]="saving" type="button" class="btn btn-default btn-brand btn-pill" (click)="close()">{{"Cancel" | localize}}</button>
                    <button type="submit" class="btn btn-primary btn-brand btn-pill" [disabled]="!userForm.form.valid" [buttonBusy]="saving" [busyText]="l('SavingWithThreeDot')"><i class="fa fa-save"></i> <span>{{"Save" | localize}}</span></button>
                </div>
            </form>
        </div>
    </div>
</div>
