<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>{{l("Addresses")}}</span>
            </h3>
            <span class="kt-subheader__separator kt-subheader__separator--v"></span>
            <span class="kt-subheader__desc">
                {{l("AddressesHeaderInfo")}}
            </span>
        </div>
        <div class="kt-subheader__toolbar">
            <div class="kt-subheader__wrapper">
				<button (click)="exportToExcel()" class="btn btn-outline-success btn-pill"><i class="fa fa-file-excel"></i> {{l("ExportToExcel")}}</button>
                <button *ngIf="isGranted('Pages.Shipping.Contacts.Address.Create')" (click)="createAddress()" 
			class="btn btn-primary btn-pill blue"><i class="fa fa-plus"></i> {{l("CreateNewAddress")}}</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">
                <form class="kt-form" autocomplete="off">
                    <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)="getAddresses()" class="btn btn-primary" type="submit"><i class="flaticon-search-1"></i></button>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
						 <div class="row" [hidden]="!advancedFiltersAreShown">
						 	<div class="col-md-12">
						         <div class="kt-separator kt-separator--border-dashed"></div>
						     </div>


							<div class="col-md-3">
								<div class="form-group">
									<label for="AddressLine1Filter">{{l("AddressLine1")}}</label>
									<input type="text" class="form-control" id="AddressLine1Filter" name="addressLine1Filter" [(ngModel)]="addressLine1Filter">
								</div>
                            </div>
							<div class="col-md-3">
								<div class="form-group">
									<label for="AddressLine2Filter">{{l("AddressLine2")}}</label>
									<input type="text" class="form-control" id="AddressLine2Filter" name="addressLine2Filter" [(ngModel)]="addressLine2Filter">
								</div>
                            </div>
							<div class="col-md-3">
								<div class="form-group">
									<label for="PostalCodeValueFilter">({{l("PostalCode")}}) {{l("Value")}}</label>
									<input type="text" class="form-control" id="PostalCodeValueFilter" name="postalCodeValueFilter" [(ngModel)]="postalCodeValueFilter">
                                </div>
                            </div>
                            <div class="col-md-3">
								<div class="form-group">
									<label for="CountryFilter">({{l("Country")}})</label>
									<input type="text" class="form-control" id="CountryFilter" name="CountryFilter" [(ngModel)]="countryFilter">
                                </div>
                            </div>
                            <div class="col-md-3">
								<div class="form-group">
									<label for="StateFilter">({{l("State")}})</label>
									<input type="text" class="form-control" id="StateFilter" name="StateFilter" [(ngModel)]="stateFilter">
                                </div>
                            </div>
                            <div class="col-md-3">
								<div class="form-group">
									<label for="CityFilter">({{l("City")}})</label>
									<input type="text" class="form-control" id="CityFilter" name="CityFilter" [(ngModel)]="cityFilter">
                                </div>
                            </div>
							<!-- <div class="col-md-3">
								<div class="form-group">
									<label for="GeocodeLatitudeFilter">({{l("Geocode")}}) {{l("Latitude")}}</label>
									<input type="text" class="form-control" id="GeocodeLatitudeFilter" name="geocodeLatitudeFilter" [(ngModel)]="geocodeLatitudeFilter">
                                </div>
                            </div> -->
							<!-- <div class="col-md-3">
								<div class="form-group">
									<label for="AddressTypeNameFilter">({{l("AddressType")}}) {{l("Name")}}</label>
									<input type="text" class="form-control" id="AddressTypeNameFilter" name="addressTypeNameFilter" [(ngModel)]="addressTypeNameFilter">
                                </div>
                            </div> -->

                        </div>
                        <div class="row mb-2">
                            <div class="col-sm-12">
                                <span class="clickable-item text-muted" *ngIf="!advancedFiltersAreShown" (click)="advancedFiltersAreShown=!advancedFiltersAreShown"><i class="fa fa-angle-down"></i> {{l("ShowAdvancedFilters")}}</span>
                                <span class="clickable-item text-muted" *ngIf="advancedFiltersAreShown" (click)="advancedFiltersAreShown=!advancedFiltersAreShown"><i class="fa fa-angle-up"></i> {{l("HideAdvancedFilters")}}</span>
                            </div>
                        </div>
                    </div>
                </form>

                <div class="row align-items-center">
                    <!--<Primeng-Datatable-Start>-->
                    <div class="primeng-datatable-container col-12"
                         [busyIf]="primengTableHelper.isLoading">
                        <p-table #dataTable class="p-datatable"
                                     (onLazyLoad)="getAddresses($event)"
                                     [value]="primengTableHelper.records"
                                     rows="{{primengTableHelper.defaultRecordsCountPerPage}}"
                                     [paginator]="false"
                                     [lazy]="true"
                                     [scrollable]="true"
                                     ScrollWidth="100%"
                                     [responsive]="primengTableHelper.isResponsive"
                                     [resizableColumns]="primengTableHelper.resizableColumns">
                            <ng-template pTemplate="header">
                                <tr>
                                    <th style="width: 130px" [hidden]="!isGrantedAny('Pages.Shipping.Contacts.Address.Update', 'Pages.Shipping.Contacts.Address.Delete')">{{l('Actions')}}</th>
                                    <th style="width: 150px" pSortableColumn="postalCode.value">
                                        {{l('PostalCode')}}
                                        <p-sortIcon field="postalCodeValue"></p-sortIcon>
                                    </th>
                                    <!-- <th style="width: 150px" pSortableColumn="geocodeFk.latitude">
                                        {{l('Latitude')}}
                                        <p-sortIcon field="geocodeLatitude"></p-sortIcon>
                                    </th>
                                    <th style="width: 150px" pSortableColumn="addressTypeFk.name">
                                        {{l('AddressType')}}
                                        <p-sortIcon field="addressTypeName"></p-sortIcon>
                                    </th> -->
                                    <th style="width: 150px" pSortableColumn="postalCode.Country">
                                        {{l('Country')}}
                                        <p-sortIcon field="postalCodeCountry"></p-sortIcon>
                                    </th>
                                    <th style="width: 150px" pSortableColumn="postalCode.State">
                                        {{l('State')}}
                                        <p-sortIcon field="postalCodeState"></p-sortIcon>
                                    </th>
                                    <th style="width: 150px" pSortableColumn="postalCode.City">
                                        {{l('City')}}
                                        <p-sortIcon field="postalCodeCity"></p-sortIcon>
                                    </th>
                                    <th style="width: 150px" pSortableColumn="addressLine1">
                                        {{l('AddressLine1')}}
                                        <p-sortIcon field="address.addressLine1"></p-sortIcon>
                                    </th>
                                    <th style="width: 150px" pSortableColumn="addressLine2">
                                        {{l('AddressLine2')}}
                                        <p-sortIcon field="address.addressLine2"></p-sortIcon>
                                    </th>

                                </tr>
                            </ng-template>                           
							<ng-template pTemplate="body" let-record="$implicit">
                                <tr>
                                    <td style="width: 130px"
                                        [hidden]="!isGrantedAny('Pages.Shipping.Contacts.Address.Update', 'Pages.Shipping.Contacts.Address.Delete')">
                                       <div class="btn-group btn-pill dropdown" dropdown container="body">
                                            <button class="dropdown-toggle btn btn-sm btn-primary btn-pill" dropdownToggle>
                                                <i class="fa fa-cog"></i><span class="caret"></span> {{l("Actions")}}
                                            </button>
												<ul class="dropdown-menu"  *dropdownMenu>
												<li>
													<a href="javascript:;"
														(click)="viewAddressModal.show(record)">{{l('View')}}</a>
												</li>
												<li>
													<a href="javascript:;" *ngIf="permission.isGranted('Pages.Shipping.Contacts.Address.Update')"
														(click)="createOrEditAddressModal.show(record.address.id)">{{l('Edit')}}</a>
												</li>
												<li>
											        <a href="javascript:;" *ngIf="permission.isGranted('Pages.Shipping.Contacts.Address.Delete')"
														(click)="deleteAddress(record.address)">{{l('Delete')}}</a>
												</li>
                                            </ul>
                                        </div>
                                    </td>
                                    <td style="width:150px">
												<span class="ui-column-title"> {{l('Value')}}</span>
												{{record.postalCodeValue}}
											</td>
                                    <!-- <td style="width:150px">
												<span class="ui-column-title"> {{l('Latitude')}}</span>
												{{record.geocodeLatitude}}
											</td>
                                    <td style="width:150px">
												<span class="ui-column-title"> {{l('Name')}}</span>
												{{record.addressTypeName}}
                                            </td> -->
                                            <td style="width:150px">
												<span class="ui-column-title"> {{l('Country')}}</span>
												{{record.postalCodeCountry}}
                                            </td>
                                            <td style="width:150px">
												<span class="ui-column-title"> {{l('State')}}</span>
												{{record.postalCodeState}}
                                            </td>
                                            <td style="width:150px">
												<span class="ui-column-title"> {{l('City')}}</span>
												{{record.postalCodeCity}}
											</td>
                                    <td style="width:150px">
											<span class="ui-column-title"> {{l('AddressLine1')}}</span>
											{{record.address.addressLine1}}
										</td>
                                    <td style="width:150px">
											<span class="ui-column-title"> {{l('AddressLine2')}}</span>
											{{record.address.addressLine2}}
										</td>

                                </tr>
                            </ng-template>
                        </p-table>
						<div class="primeng-no-data" *ngIf="primengTableHelper.totalRecordsCount == 0">
                            {{l('NoData')}}
                        </div>
                        <div class="primeng-paging-container">
                            <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage"
                                         #paginator
                                         (onPageChange)="getAddresses($event)"
                                         [totalRecords]="primengTableHelper.totalRecordsCount"
                                         [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                            </p-paginator>
                            <span class="total-records-count">
                                {{l('TotalRecordsCount', primengTableHelper.totalRecordsCount)}}
                            </span>
                        </div>
                    </div>
                    <!--<Primeng-Datatable-End>-->
                </div>
            </div>
        </div>
    </div>

    <createOrEditAddressModal #createOrEditAddressModal (modalSave)="getAddresses()"></createOrEditAddressModal>
    <viewAddressModal #viewAddressModal></viewAddressModal>
    
  </div>
</div>
