<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>MIS PEDIDOS</ion-title>
    <ion-buttons end>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content>
  <!--
  <ion-refresher (ionRefresh)="doRefresh($event)" pullMin="80">
    <ion-refresher-content pullingIcon="arrow-dropdown" pullingText="Desliza para actualizar" refreshingSpinner='dots' refreshingText="Actualizando...">
  </ion-refresher-content>
  </ion-refresher>
  -->
  <ion-card *ngIf="orders.length == 0">
    <ion-card-header class="no-items" *ngIf="user?.id == '0'">
      <img src="assets/img/online-shop.png" />
      <br /> Usuarios invitados no pueden hacer pedidos
    </ion-card-header>
    <ion-card-header class="no-items" *ngIf="user?.id != '0'">
      <img src="assets/img/online-shop.png" />
      <br /> No tienes pedidos
    </ion-card-header>
  </ion-card>

  <ion-card *ngFor="let order of orders; let i = index">
    <ion-grid>
      <ion-row>
        <ion-col col-4 text-center class="prescription-head">
          <img src="assets/img/trolley.png" class="subicon" />
          <h2>ID./ {{order.id}}</h2>
          <h4>Fecha:<br />{{order.created_at | date: 'dd/MM/yyyy'}}</h4>
          <br />
          <div>
            <span class="status-waiting" *ngIf="order.status == '0'">Programado</span>
            <span class="status-waiting" *ngIf="order.status == '1'">Programado</span>
            <span class="status-waiting" *ngIf="order.status == '2'">Programado</span>
            <span class="status-waiting" *ngIf="order.status == '3'">Programado</span>
            <span class="status-waiting" *ngIf="order.status == '4'">Programado</span>
            <span class="status-waiting" *ngIf="order.status == '5'">Programado</span>
            <span class="status-waiting" *ngIf="order.status == '6'">Programado</span>
            <span class="status-expire" *ngIf="order.status == '7'">En tránsito</span>

            <span class="status-expire" *ngIf="order.status == '10'">Por entregar</span>
            <span class="status-success" *ngIf="order.status == '15'">Entregada</span>
            <span class="status-declined" *ngIf="order.status == '666'">Anulada</span>
            <span class="status-declined" *ngIf="order.status == '-1'">Devuelta</span> 
          </div>
        </ion-col>
        <ion-col col-8>
          <b>Resumen</b>
          <ion-grid class="prescription-info">
            <ion-row>
              <ion-col col-4>
                <h4>$ {{order.total | number}}</h4>
                abono               
              </ion-col>
              <ion-col col-4>
                <h4>{{order.delivered_program | date:'dd/MM/yyyy'}}</h4>
                entrega
              </ion-col>
              <ion-col col-4>
                <h4>{{order.total_items | number}}</h4>
                items
              </ion-col>
            </ion-row>
          </ion-grid>
          <hr />
          <ion-grid>
            <ion-row class="order-icons">
              <ion-col col-6>
                <a (tap)="seguimiento(i)">
                  <img src="assets/img/logistic.png" />
                  <span>Seguimiento</span>
                </a>
              </ion-col>
              <ion-col col-6>
                <a (tap)="detalles(i)">
                  <img src="assets/img/clipboard.png" />
                  <span>Ver detalles</span>
                </a>
              </ion-col>
              <!--
              <ion-col col-4>
                <a (click)="cancelarCompra(i)">
                  <img src="assets/img/error.png" />
                </a>
              </ion-col>
              -->
            </ion-row>
            <ion-row>
              <ion-col col-12>
                Comentarios: {{order.notes}}
              </ion-col>
            </ion-row>
          </ion-grid>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-card>
</ion-content>