<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button icon="arrow-round-back"></ion-back-button>
    </ion-buttons>
    <ion-title> {{'My Cart'| translate }} </ion-title>
    <ion-buttons slot="end">
      <ion-button fill="clear">
        <ion-icon name="basket"></ion-icon>
        <ion-badge>{{shared.cartTotalItems()}}</ion-badge>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-grid class="ion-no-padding grid-empty" *ngIf="products.length==0 && loadingServerData">
    <ion-row class="ion-no-padding">
      <ion-col size="12" class="ion-no-padding">
        <ion-icon name="basket"></ion-icon>
      </ion-col>
    </ion-row>
    <ion-row class="ion-no-padding">
      <ion-col size="12" class="ion-no-padding">
        <h4>{{'Your cart is empty'|translate}}</h4>
      </ion-col>
    </ion-row>
    <ion-row class="ion-no-padding">
      <ion-col size="12" class="ion-no-padding">
        <h5>{{'continue shopping'|translate}}</h5>
      </ion-col>
    </ion-row>
    <ion-row class="ion-no-padding">
      <ion-col size="12" class="ion-no-padding">
        <ion-button color="secondary" (click)="openProductsPage()">{{'Explore'|translate}}</ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>

  <ion-card class="ion-padding" *ngFor="let product of products">
    <ion-card-header class="ion-no-padding">
      <ion-card-subtitle>
        <h3> {{product.name}} </h3>
      </ion-card-subtitle>
    </ion-card-header>
    <ion-card-content>
      <ion-grid class="ion-no-padding">
        <ion-row>
          <ion-col size="3">
            <ion-img src="{{product.image}}"></ion-img>
          </ion-col>
          <ion-col class="col-price" size="5">
            <p>{{'Price' |translate}}</p>
            <p>{{'Quantity' |translate}}</p>
            <p><b>{{'Sub Total' |translate}}</b></p>
          </ion-col>
          <ion-col class="col-price-ori" size="4">
            <p class="para-del" [innerHTML]="product.price_html"></p>
            <div class="div-btn">
              <ion-button size="small" fill="outline" (click)="qunatityMinus(product);"
                *ngIf="!product.sold_individually">
                <p>-</p>
              </ion-button>
              <span>{{product.quantity}}</span>
              <ion-button class="add-btn" size="small" fill="outline" (click)="qunatityPlus(product);"
                *ngIf="!product.sold_individually">
                <p>+</p>
              </ion-button>
            </div>
            <br /><br />
            <p class="para-price-ori">{{product.subtotal | curency}}</p>
          </ion-col>
        </ion-row>
        <ion-row *ngFor="let att of product.meta_data">
          <ion-col size="6">{{att.key}}&nbsp;:</ion-col>
          <ion-col size="6">{{att.value}}</ion-col>
        </ion-row>
        <ion-row>
          <ion-col size="2.5">
            <ion-button color="secondary" (click)="getSingleProductDetail(product.product_id)">{{'View' | translate}}</ion-button>
          </ion-col>
          <ion-col size="8.5">
            <ion-button fill="clear" color="danger" (click)="removeCart(product.cart_id);">{{'Remove' | translate}}
            </ion-button>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-card-content>
  </ion-card>
  <div *ngIf="products.length!=0">
    <ion-card class="card-product" *ngFor="let coupon of shared.couponArray">
      <ion-card-content>
        <ion-row>
          <ion-col size="6">
            {{'Coupon Code'|translate}}
          </ion-col>
          <ion-col size="6" class="ion-text-right">
            {{coupon.code}}
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col size="6">
            {{'Coupon Amount'|translate}}
          </ion-col>
          <ion-col size="6" class="ion-text-right">
            {{coupon.amount| curency}}
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col size="12" *ngIf="coupon.discount_type == 'percent'">
            {{'A percentage discount for the entire cart'|translate}}
          </ion-col>
          <ion-col size="12" *ngIf="coupon.discount_type == 'fixed_cart'">
            {{'A fixed total discount for the entire cart'|translate}}
          </ion-col>
          <ion-col size="12" *ngIf="coupon.discount_type == 'fixed_product'">
            {{'A fixed total discount for selected products only'|translate}}
          </ion-col>
          <ion-col size="12" *ngIf="coupon.discount_type == 'percent_product'">
            {{'A percentage discount for selected products only'|translate}}
          </ion-col>
          <ion-col size="12">
            <ion-button small color="secondary" (click)="deleteCoupon(coupon.code)">{{'Remove'|translate}}
            </ion-button>
          </ion-col>
        </ion-row>
      </ion-card-content>
    </ion-card>

    <ion-card class="ion-padding">
      <ion-card-header class="ion-no-padding">
        <ion-card-subtitle>
          <h3 id="copounlist" *ngIf="!config.appInProduction" (click)="couponslist()">{{'List of coupon codes'|translate}}
          </h3>
        </ion-card-subtitle>
      </ion-card-header>
      <ion-card-content>
        <ion-item>
          <ion-input placeholder="{{'coupon code'|translate}}" [(ngModel)]="c"></ion-input>
          <ion-button color="secondary" slot="end" [disabled]="c==''" (click)="getCoupon(c)">{{'Apply'|translate}}
          </ion-button>
        </ion-item>
      </ion-card-content>
    </ion-card>

  </div>

  <ion-card *ngIf="products.length!=0">
    <ion-card-content>
      <ion-row>
        <ion-col size="6">
          {{'SubTotal'|translate}}
        </ion-col>
        <ion-col size="6" class="ion-text-right">
          {{subtotal| curency}}
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col size="6">
          {{'Discount'|translate}}
        </ion-col>
        <ion-col size="6" class="ion-text-right">
          - {{(subtotal-total)| curency}}
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col size="6">
          {{'Total'|translate}}
        </ion-col>
        <ion-col size="6" class="ion-text-right">
          {{total| curency}}
        </ion-col>
      </ion-row>
    </ion-card-content>
  </ion-card>
</ion-content>

<ion-footer *ngIf="products.length!=0">
  <ion-button expand="full" solid block color="secondary" (click)="proceedToCheckOut()">
    {{'Proceed'|translate}}
  </ion-button>
</ion-footer>