<ion-header>
  <ion-toolbar class="new-background-color">
    <div class="hcs">
      <img src="assets/images/wellnessbar.png"  style='height:40px'/>    
    </div>
    <ion-buttons slot="end">
        <ion-button (click)="openQRCode()" color='light'>
            <!--<ion-icon slot="icon-only" name="search"></ion-icon> -->
            <fa-icon icon="qrcode" size='2x'></fa-icon>
        </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content [fullscreen]="false">
  <ion-slides pager="true" [options]="slideOptsOne">
      
      <ion-slide *ngFor="let p of storeSlide | slice:0:5 " [hidden]="p['fields']['feature_image'] == ''" [routerLink]="['/tabs/place/', p['pk']]">
   <div *ngIf="p['fields']['feature_image'] != ''" class='slide'>
              <ion-img [src]= "p['fields']['feature_image'] | imageServer " ></ion-img>
          </div>
      </ion-slide>
  </ion-slides>
  <ion-grid>
    <!-- <ion-row>
      <ion-col>
        <ion-toolbar class="search">
          <ion-searchbar placeholder="ค้นหา" [(ngModel)]="searchText" (ionChange)="searchChange($event)" debounce="500"></ion-searchbar>
        </ion-toolbar>
      </ion-col>
    </ion-row> -->
    <ion-row>
      <ion-col>
        <ion-item>
          <ion-label>เลือกอำเภอ</ion-label>
          <ion-select placeholder="all" interface="action-sheet" [(ngModel)]="prov" name='prov'>
            <ion-select-option value="all">ทั้งหมด</ion-select-option>
            <ion-select-option value="ฉะเชิงเทรา">ฉะเชิงเทรา</ion-select-option>
            <ion-select-option value="ชลบุรี">ชลบุรี</ion-select-option>
            <ion-select-option value="ระยอง">ระยอง</ion-select-option>            
          </ion-select>
        </ion-item>
      </ion-col>
    </ion-row>
    <ion-row class="ion-justify-content-start">
      <!-- <ion-col size="6">
        <div class="center catshow">
          <fa-icon [icon]="['fas', 'utensils']" size="3x" class="red"></fa-icon>
        </div>
      </ion-col>
      <ion-col size="6">
        <div class=" catshow center">
          <fa-icon [icon]="['fas', 'spa']" size="3x"></fa-icon>        
        </div>
      </ion-col>
      <ion-col size="6">
        <div class=" catshow center">
          <fa-icon [icon]="['fas', 'praying-hands']" size="3x"></fa-icon>          
        </div>
      </ion-col>
      <ion-col size="6">
        <div class="catshow center">
          <fa-icon [icon]="['fas', 'running']" size="3x"></fa-icon>
        </div>
      </ion-col> -->
      <ion-col size="3">
        <div class="center catshow ion-padding" (click)="filterCat('สวน')">
            <img src="assets/images/fruits/harvest.png" />
            <!--
            <fa-icon [icon]="['fas', 'utensils']" size="2x" class="red" (click)="filterCat('ร้านอาหาร')"></fa-icon> -->
        </div>
      </ion-col>
      <ion-col size="3">
        <div class=" catshow center ion-padding" (click)="filterCat('วัด')">
            <img src="assets/images/fruits/temple.png" />
            <!--
            <fa-icon [icon]="['fas', 'spa']" size="2x" class="red" (click)="filterCat('นวดไทย/สปา')"></fa-icon> -->
        </div>
      </ion-col>
      <ion-col size="3">
        <div class=" catshow center ion-padding" (click)="filterCat('ประวัติศาสตร์')">
            <img src="assets/images/fruits/scroll.png" />
            <!--
            <fa-icon [icon]="['fas', 'praying-hands']" class="red" size="2x" (click)="filterCat('สถานที่พัฒนาจิตใจ')"></fa-icon > -->
        </div>
      </ion-col>
      <ion-col size="3">
        <div class="catshow center ion-padding" (click)="filterCat('ธรรมชาติ')">
            <img src="assets/images/fruits/forest.png" />
            <!--
            <fa-icon [icon]="['fas', 'running']" class="red" (click)="filterCat('สถานที่ออกกำลังกาย')" size="2x"></fa-icon> -->
        </div>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col class="ion-padding">
        <h2>
          <span *ngIf='catName != "all"'>{{ catName }}</span>
          <span *ngIf='prov != "all"'> จังหวัด {{ prov }}</span></h2>        
      </ion-col>       
    </ion-row>
    <ion-row>
        <ion-col *ngIf="stores && stores.length == 0" class='ion-text-center'><h2>ไม่มีผลการค้นหานี้</h2></ion-col>
        <ion-col>
        <ion-card *ngFor="let pldata of stores" class='ion-no-margin'>
            <div *ngIf="catName == 'all' || catName == pldata['fields']['store_cat']">
                <div *ngIf="prov == 'all' || pldata['fields']['province'] == prov">
                <div *ngIf="pldata['fields']['feature_image']">
                  <a [routerLink]="['/tabs/place/', pldata['pk']]">
                    <img src= "{{  pldata['fields']['feature_image'] | imageServer }}" width='100%'/>
                    </a>
                </div>
                <ion-card-header>
                    <a [routerLink]="['/tabs/place/', pldata['pk']]">
                        <!--
                            <ion-card-title [innerHTML]="pldata.title.rendered"></ion-card-title> -->
                            <ion-card-title>{{ pldata['fields']['name'] }}</ion-card-title>
                    </a>
                    <a (click)="changeProvince(pldata['fields']['province'])">
                        <!--
                            <span [innerHTML]="pldata._embedded['wp:term'][1][0].name"></span> -->
                            <span>{{ pldata['fields']['province'] }}</span>

                    </a> |                   
                    <a (click)="filterCat(pldata['fields']['store_cat'])">
                        <span>{{ pldata['fields']['store_cat'] }}</span>
                    </a>
                </ion-card-header>
                </div>
            </div>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>
