<ion-header>
  <ion-toolbar class='new-background-color'>
      <ion-buttons slot="start">
          <ion-back-button color='light'></ion-back-button>
      </ion-buttons>
    <ion-title>Product Detail</ion-title>
  </ion-toolbar>

</ion-header>

<ion-content *ngIf="product">
    <div class='feature-con'>
        <ion-img [src]="product['feature_image'] | imageServer"></ion-img>
    <ion-img [src]="product['store_logo'] | imageServer" class='store-logo'></ion-img>
    </div>   
 <ion-text color="primary" class='ion-padding product-title'>
     {{ product['name'] }}
</ion-text>
    <ion-row>
          <ion-col size="4" class="ion-text-center">
            <div (click)="callNow(product['store_tel'])">
              <fa-icon [icon]="['fas', 'phone-square-alt']" class="button-blue" size="2x"></fa-icon>
            </div>
          </ion-col>  
          <ion-col size="4" class="ion-text-center" (click)="openMapLink()" *ngIf="ios">
            <!-- <div [innerHTML]="placelist?.acf.phone"></div>                         -->
            <fa-icon [icon]="['fas', 'map-marked-alt']" class="button-blue" size="2x"></fa-icon>
            <!-- <div style="font-size: 12px;" class="ion-align-items-center">iOS</div> -->
          </ion-col> 
          <ion-col size="4" class="ion-text-center" (click)="openMapLink()" *ngIf="android">
            <!-- <div [innerHTML]="placelist?.acf.phone"></div>                         -->
            <fa-icon [icon]="['fas', 'map-marked-alt']" class="button-blue" size="2x"></fa-icon>
            <!-- <div style="font-size: 12px;" class="ion-align-items-center">Andriod</div> -->
          </ion-col>                          
          <ion-col size="4" class="ion-text-center">
            <!-- <div [innerHTML]="placelist?.acf.email"></div>             -->
            <div (click)="mailTo(product['store_line'])">
              <fa-icon [icon]="['fas', 'envelope']" class="button-blue" size="2x"></fa-icon>
            </div>
          </ion-col>
        </ion-row>
    <p class='ion-padding'>
    {{ product['store_name'] }}<br>
            {{ product['description'] }}
    </p>
    {{ sku_select }}
     <ion-select [(ngModel)]="productOrder.sku_select" placeholder="เลือกรายละเอียด">
         <ion-select-option *ngFor="let sku of product['skus']" [value]="sku">{{ sku['description'] }} ราคา: {{ sku['price'] }} บาท / {{ sku['unit_name'] }}</ion-select-option>
    </ion-select>
    <hr>
    <ion-row>
        <ion-col>
            <ion-item>
                <ion-label position="floating">ใส่จำนวน ( {{ product['unit_name'] }} )</ion-label>
                <ion-input [(ngModel)]="productOrder.n_unit" clear-on-edit=true type="number" min=0 max=100 step=1></ion-input>
            </ion-item>
        </ion-col>
        <ion-col>
            <ion-item>
                <ion-label position="floating">ราคา (บาท)</ion-label>
                <ion-input [value]="productOrder.cal_total()" readonly></ion-input>
            </ion-item>
        </ion-col>
    </ion-row>
        
   <ion-button expand='full' (click)="addToCart()">
      <fa-icon icon="shopping-basket" size='lg' slot='start' ></fa-icon>
      &nbsp;&nbsp;
       Add To Cart
   </ion-button>
</ion-content>
