<ion-header class="ion-no-border">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/app/tabs/settings"></ion-back-button>
    </ion-buttons>
    <ion-title class="ion-text-center">{{ 'USER_ORDERS_TITLE' | translate }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-segment (ionChange)="changedTypeOrder($event)" [value]="orders">
  <ion-segment-button value="pendientes">
    <ion-label>{{ 'USER_ORDERS_SLOPES' | translate }}</ion-label>
    <ion-badge color="secondary" class="badge-pendings"
      *ngIf="orderProvider._pendingOrders && orderProvider._pendingOrders.length">{{
      orderProvider._pendingOrders.length }}</ion-badge>
  </ion-segment-button>
  <ion-segment-button value="finalizados">
    <ion-label>{{ 'USER_ORDERS_FINISHED' | translate }}</ion-label>
  </ion-segment-button>
</ion-segment>

<ion-content>
  <div [ngSwitch]="orders">
    <div *ngSwitchCase="'pendientes'">
      <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
        <ion-refresher-content></ion-refresher-content>
      </ion-refresher>
      <ion-list *ngIf="orderProvider._pendingOrders">
        <ion-card *ngFor="let order of orderProvider._pendingOrders">
          <ion-card-header class="ion-text-center">
            <ion-card-subtitle>{{ 'USER_ORDERS_CODE' | translate }} {{order.code}}</ion-card-subtitle>
          </ion-card-header>
          <ion-card-content>
            <ion-label class="ion-text-center">
              <p *ngIf="order?.address">{{order.address.direction}}</p>
              <p *ngIf="order?.point_sale">{{order.point_sale.name}}</p>
              <p>{{ ( order.creation_date | dateFormat ) | date:'short'}}</p>
              <p>{{order.total_price | formatCurrency : currency}}</p>
            </ion-label>
            <ion-item lines="none">
              <ion-button class="btnOptions" *ngIf="order.payment_type_id == 5 && (order.gw_state != 'CONFIRMED')"
                shape="round" fill="solid" slot="start" color="secondary" (click)="validationOrderForPayment(order)">
                <p class="not-margin">{{ 'USER_ORDERS_MAKE_PAYMENT' | translate }}</p>
              </ion-button>
              <ion-button class="btnOptions" shape="round" fill="solid" slot="end" color="secondary"
                (click)="detailOrder(order.id)">{{
                'USER_ORDERS_BUTTON_DETAIL' | translate }}</ion-button>
            </ion-item>
          </ion-card-content>
        </ion-card>
      </ion-list>

      <ion-card *ngIf="orderProvider._pendingOrders && !orderProvider._pendingOrders.length">
        <ion-card-content class="ion-text-center"> No tienes ningún pedido pendiente. </ion-card-content>
      </ion-card>
    </div>

    <div *ngSwitchCase="'finalizados'">
      <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
        <ion-refresher-content></ion-refresher-content>
      </ion-refresher>
      <ion-list *ngIf="listOrdersFinished.length">
        <ion-list-header no-margin>
          {{ 'TITLE_FINISHED_ORDER_NUMBER_1' | translate }} {{take+offset}} {{ 'TITLE_FINISHED_ORDER_NUMBER_2' |
          translate }}
        </ion-list-header>
        <ion-item *ngFor="let order of listOrdersFinished">
          <ion-card [ngClass]="{'orderCanceled': order.order_state_id == 7}" style="width: 100%">
            <ion-card-header class="ion-text-center"> {{ 'USER_ORDERS_CODE' | translate }} {{order.code}}
            </ion-card-header>
            <ion-card-content class="ion-text-center">
              <p *ngIf="order?.address">{{order.address.direction}}</p>
              <p *ngIf="order?.point_sale">{{order.point_sale.name}}</p>
              <p>{{( order.creation_date | dateFormat ) | date:'short'}}</p>
              <p>{{order.total_price | formatCurrency : currency}}</p>
            </ion-card-content>

            <ion-row *ngIf="order.order_state_id == 6">
              <ion-col>
                <ion-button size="small" fill="clear" (click)="copyOrder(order.products)">
                  <ion-icon slot="start" name="repeat-outline"></ion-icon>
                  {{ 'USER_ORDERS_BUTTON_COPY' | translate }}
                </ion-button>
              </ion-col>
              <ion-col style="text-align: right">
                <ion-button size="small" fill="clear" (click)="detailOrder(order.id)">
                  <ion-icon slot="start" name="list-outline"></ion-icon>
                  {{ 'USER_ORDERS_BUTTON_DETAIL' | translate }}
                </ion-button>
              </ion-col>
            </ion-row>
            <ion-item *ngIf="order.order_state_id == 7" class="ion-text-center" lines="none">
              <p class="colorOrderCanceled">{{ 'TITLE_ORDERS_CANCELED' | translate }}</p>
            </ion-item>
          </ion-card>
        </ion-item>

        <ion-infinite-scroll (ionInfinite)="moreOrders($event)">
          <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="{{ 'LOADING_MORE_ORDERS' | translate}}">
          </ion-infinite-scroll-content>
        </ion-infinite-scroll>
      </ion-list>
    </div>
  </div>
</ion-content>