<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("Clinics")}}</span>
            </h3>
            <span class="kt-subheader__separator kt-subheader__separator--v"></span>
            <span class="kt-subheader__desc">
                {{l("ClinicsHeaderInfo")}}
            </span>
        </div>
        <div class="kt-subheader__toolbar">
            <div class="kt-subheader__wrapper">
				<button (click)="exportToExcel()" class="btn btn-outline-success btn-elevate btn-pill"><i class="fa fa-file-excel"></i> {{l("ExportToExcel")}}</button>
                <button *ngIf="isGranted('Pages.Clinics')" (click)="createOrEditClinic('/app/main/clinic')" 
			class="btn btn-primary blue btn-elevate btn-pill"><i class="fa fa-plus"></i> {{l("CreateNewClinic")}}</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)="getClinics()" 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="ClinicNameFilter">{{l("ClinicName")}}</label>
                                    <input type="text" class="form-control" id="ClinicNameFilter" name="clinicNameFilter" [(ngModel)]="clinicNameFilter">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="ClinicNotesFilter">{{l("ClinicAccountNumber")}}</label>
                                    <input type="text" class="form-control" id="ClinicAccountFilter" name="clinicAccountFilter" [(ngModel)]="clinicAccountFilter">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="ClinicAddressFilter">{{l("Address")}}</label>
                                    <input type="text" class="form-control" id="ClinicAddressFilter" name="clinicAddressFilter" [(ngModel)]="clinicAddressFilter">
                                </div>
                            </div>


							<!-- <div class="col-md-3">
								<div class="form-group">
									<label for="ClinicNotesFilter">{{l("ClinicNotes")}}</label>
									<input type="text" class="form-control" id="ClinicNotesFilter" name="clinicNotesFilter" [(ngModel)]="clinicNotesFilter">
								</div>
                            </div>
							<div class="col-md-3">
								<div class="form-group">
									<label for="BillingNotesFilter">{{l("BillingNotes")}}</label>
									<input type="text" class="form-control" id="BillingNotesFilter" name="billingNotesFilter" [(ngModel)]="billingNotesFilter">
								</div>
                            </div> -->
                           <!--  <div class="col-md-3">
                                <div class="form-group">
									<label for="MinContactIdFilter">{{l("MinMax")}} {{l("ContactId")}}</label>
									<div class="input-group">
                                        <input type="number" class="form-control" id="MinContactIdFilter" [(ngModel)]="minContactIdFilter" placeholder="{{l('MinValue')}}" name="minContactIdFilter" />
                                        <input type="number" class="form-control" [(ngModel)]="maxContactIdFilter" placeholder="{{l('MaxValue')}}" name="maxContactIdFilter" />
									</div>
                                </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
                                     (onLazyLoad)="getClinics($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.Clinics.Edit', 'Pages.Clinics.Delete')">{{l('Actions')}}</th>
                                    <th style="width: 150px" pSortableColumn="contact.company.name">
                                        {{l('ClinicName')}}
                                        <p-sortIcon field="clinic.clinicName"></p-sortIcon>
                                    </th>
                                    <th style="width: 150px" pSortableColumn="contact.company.accountNo">
                                        {{l('ClinicAccountNumber')}}
                                        <p-sortIcon field="clinic.clinicAccountNumber"></p-sortIcon>
                                    </th>
                                    <th style="width: 150px" pSortableColumn="contact.address.addressLine1">
                                        {{l('Address')}}
                                        <p-sortIcon field="clinic.clinicAddress"></p-sortIcon>
                                    </th>
                                    <!-- <th style="width: 150px" pSortableColumn="clinicNotes">
                                        {{l('ClinicNotes')}}
                                        <p-sortIcon field="clinic.clinicNotes"></p-sortIcon>
                                    </th>
                                    <th style="width: 150px" pSortableColumn="billingNotes">
                                        {{l('BillingNotes')}}
                                        <p-sortIcon field="clinic.billingNotes"></p-sortIcon>
                                    </th>
                                     <th style="width: 150px" pSortableColumn="billingNotes">
                                        {{l('Visible To Driver')}}
                                        <p-sortIcon></p-sortIcon>
                                    </th> -->
                                    <!-- <th style="width: 150px" pSortableColumn="contactId">
                                        {{l('ContactId')}}
                                        <p-sortIcon field="clinic.contactId"></p-sortIcon>
                                    </th> -->

                                </tr>
                            </ng-template>                           
							<ng-template pTemplate="body" let-record="$implicit">
                                <tr>
                                    <td style="width: 130px"
                                        [hidden]="!isGrantedAny('Pages.Clinics.Edit', 'Pages.Clinics.Delete')">
                                       <div class="btn-group dropdown" dropdown container="body">
                                            <button class="dropdown-toggle btn btn-sm btn-primary btn-elevate 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)="createOrEditClinic('/app/main/clinic-schedule',record.clinic.id)">{{l('Schedule')}}</a>
												</li>
												<li>
													<a href="javascript:;" *ngIf="permission.isGranted('Pages.Clinics')"
														(click)="createOrEditClinic('/app/main/clinic',record.clinic.id)">{{l('Edit')}}</a>
												</li>
												<li>
											        <a href="javascript:;" *ngIf="permission.isGranted('Pages.Clinics.Delete')"
														(click)="deleteClinic(record.clinic)">{{l('Delete')}}</a>
												</li>
                                                <li>
                                                    <a href="javascript:;" *ngIf="entityHistoryEnabled"
                                                       (click)="showHistory(record.clinic)">{{l('History')}}</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </td>
                                    <td style="width:150px">
                                            <span class="ui-column-title"> {{l('ClinicName')}}</span>
                                            {{record.clinic.clinicName}}
                                        </td>
                                    
                                    <td style="width:150px">
                                            <span class="ui-column-title"> {{l('ClinicAccountNumber')}}</span>
                                            {{record.clinic.clinicAccountNumber}}
                                        </td>
                                     <td style="width:150px">
                                            <span class="ui-column-title"> {{l('Address')}}</span>
                                            {{record.clinic.clinicAddress}}, {{record.clinic.city}}, {{record.clinic.country}}, {{record.clinic.postalCode}}
                                        </td>
                                    <!-- <td style="width:150px">
											<span class="ui-column-title"> {{l('ClinicNotes')}}</span>
											{{record.clinic.clinicNotes}}
										</td>
                                    <td style="width:150px">
											<span class="ui-column-title"> {{l('BillingNotes')}}</span>
											{{record.clinic.billingNotes}}
										</td>
                                    <td style="width:150px">
                                        <span class="ui-column-title"> {{l('Visible To Driver')}}</span>
                                        <div *ngIf="record.clinic.clinicVisibleToDriver" class="text-center"><i class="fa fa-check-circle kt--font-success" title="True"></i></div>
                                        <div *ngIf="!record.clinic.clinicVisibleToDriver" class="text-center"><i class="fa fa-times-circle" title="False"></i></div>
                                    </td> -->
                                   <!--  <td style="width:150px">
											<span class="ui-column-title"> {{l('ContactId')}}</span>
											{{record.clinic.contactId}}
										</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)="getClinics($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>

    <createOrEditClinicModal #createOrEditClinicModal (modalSave)="getClinics()"></createOrEditClinicModal>
    <viewClinicModal #viewClinicModal></viewClinicModal>
     <entityTypeHistoryModal #entityTypeHistoryModal></entityTypeHistoryModal>
  </div>
</div>
