<ion-header class="ion-no-border">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/app/tabs/settings/user-orders"></ion-back-button>
    </ion-buttons>
    <ion-title class="ion-text-center">{{ 'ORDER_TITLE' | translate }}</ion-title>
    <ion-buttons slot="end" *ngIf="orderDetail && orderDetail.order_state.id == 1">
      <ion-icon slot="icon-only" name="ellipsis-vertical-outline" (click)="openActionSheet(orderDetail.id)"></ion-icon>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event,orderDetail.order_state.id)">
    <ion-refresher-content pullingIcon="chevron-down-outline" refreshingSpinner="ios"> </ion-refresher-content>
  </ion-refresher>
  <div>
    <ion-segment [value]="orderSegment" (ionChange)="changedSubcategory($event)">
      <ion-segment-button value="statusOrder"> {{ 'ORDER_STATUS_TITLE' | translate }} </ion-segment-button>
      <ion-segment-button value="informationDelivery"> {{ 'ORDER_INFORMATION_DELIVERY_TITLE' | translate }}
      </ion-segment-button>
      <ion-segment-button value="listProduct"> {{ 'ORDER_LIST_PRODUCT_TITLE' | translate }} </ion-segment-button>
    </ion-segment>
  </div>

  <div [ngSwitch]="orderSegment">
    <ion-list *ngSwitchCase="'statusOrder'">
      <ion-card *ngIf="orderDetail" margin-top>
        <ion-card-content>
          <ion-grid class="ion-text-center">
            <ion-row margin-left>
              <ion-col size="2" *ngIf="orderDetail.order_state.id <= 6">
                <img src="../../assets/img/status/search-active.png" />
              </ion-col>
              <ion-col size="1">
                <img src="../../assets/img/status/right-double-arrow.png" alt="" class="separador" />
              </ion-col>
              <ion-col size="2">
                <img src="../../assets/img/status/found-inactive.png" *ngIf="orderDetail.order_state.id < 2" />
                <img src="../../assets/img/status/found-active.png" *ngIf="orderDetail.order_state.id >= 2" />
              </ion-col>
              <ion-col size="1">
                <img src="../../assets/img/status/right-double-arrow.png" alt="" class="separador" />
              </ion-col>
              <ion-col size="2">
                <img src="../../assets/img/status/pick-inactive.png" *ngIf="orderDetail.order_state.id < 3" />
                <img src="../../assets/img/status/pick-active.png" *ngIf="orderDetail.order_state.id >= 3" />
              </ion-col>
              <ion-col size="1">
                <img src="../../assets/img/status/right-double-arrow.png" alt="" class="separador" />
              </ion-col>
              <ion-col size="2">
                <img src="../../assets/img/status/delivery-inactive.png" *ngIf="orderDetail.order_state.id < 4" />
                <img src="../../assets/img/status/delivery-active.png" *ngIf="orderDetail.order_state.id >= 4" />
              </ion-col>
            </ion-row>
          </ion-grid>
          <p class="ion-text-center textStatusOrder" *ngIf="orderDetail.order_state.id == 1">{{ 'STATE_ORDER_1' |
            translate }}</p>
          <p class="ion-text-center textStatusOrder" *ngIf="orderDetail.order_state.id == 2">{{ 'STATE_ORDER_2' |
            translate }}</p>
          <p class="ion-text-center textStatusOrder" *ngIf="orderDetail.order_state.id == 3">{{ 'STATE_ORDER_3' |
            translate }}</p>
          <p class="ion-text-center textStatusOrder" *ngIf="orderDetail.order_state.id == 4">{{ 'STATE_ORDER_4' |
            translate }}</p>
          <p class="ion-text-center textStatusOrder" *ngIf="orderDetail.order_state.id == 5">{{ 'STATE_ORDER_5' |
            translate }}</p>
          <p class="ion-text-center textStatusOrder" *ngIf="orderDetail.order_state.id == 6">{{ 'STATE_ORDER_6' |
            translate }}</p>
        </ion-card-content>

        <ion-row *ngIf="orderDetail.order_state.id == 5">
          <ion-col class="ion-text-center">
            <ion-button size="small" fill="clear" (click)="orderQualify(orderDetail.id)"><ion-icon name="star"
                slot="start"></ion-icon>{{ 'ORDER_QUALIFY' | translate }}</ion-button>
          </ion-col>
        </ion-row>
      </ion-card>
    </ion-list>

    <ion-list *ngSwitchCase="'informationDelivery'">
      <ion-card *ngIf="orderDetail.delivery_man">
        <ion-item lines="none">
          <ion-avatar slot="start">
            <img src="{{cityProvider._urlGallery}}deliveryman/{{orderDetail.delivery_man.user_info.photo}}"
              valid-url-image />
          </ion-avatar>
          <ion-label>
            <h2>{{orderDetail.delivery_man.first_name}} {{orderDetail.delivery_man.last_name}}</h2>
            <p>Placa: {{orderDetail.delivery_man.user_info.plate}}</p>
          </ion-label>
        </ion-item>

        <ion-item lines="none" *ngIf="orderDetail.order_state.id <= 5">
          <ion-button fill="clear" slot="start" color="secondary">
            <ion-icon name="call-outline" slot="start"></ion-icon>
            <a href="tel:'{{orderDetail.delivery_man.phone}}'" class="decorationNone"><ion-label color="secondary">{{
                'ORDERS_CALL' | translate }}</ion-label></a>
          </ion-button>
          <ion-button fill="clear" slot="end" color="secondary"
            (click)="openWhatsapp(orderDetail.delivery_man.phone,orderDetail.code)">
            <ion-icon name="logo-whatsapp" slot="start"></ion-icon>
            {{ 'ORDERS_CHAT' | translate }}
          </ion-button>
        </ion-item>
      </ion-card>
    </ion-list>

    <ion-list *ngSwitchCase="'listProduct'">
      <div *ngIf="orderDetail">
        <app-product-list [listProducts]="listProducts" [origin]="'orderDetail'"></app-product-list>
      </div>
    </ion-list>
  </div>
</ion-content>

<ion-footer>
  <ion-toolbar class="p-h-8">
    <app-total-summary *ngIf="orderDetail" [origin]="'orderDetail'" [subtotal]="orderDetail.subtotal"
      [serviceChargeEnabled]="orderDetail.service_charge > 0" [serviceCharge]="orderDetail.service_charge"
      [priceDomicile]="orderDetail.cost_delivery" [discount]="orderDetail.discount_price"
      [discountDelivery]="orderDetail.discount_delivery" [total]="orderDetail.total_price"
      (infoDiscount)="infoDiscount($event)"></app-total-summary>
  </ion-toolbar>
</ion-footer>