<ion-content padding class="main-view">
  <!--<div class="overlay" (click)="dismiss()"></div>--> 
  <div class="modal_content">
    <ion-grid>
      <ion-row>
        <ion-col col-10><h3>Detalles del pedido</h3></ion-col>
        <ion-col col-2>
          <h3><ion-icon name="close-circle-outline" (click)="dismiss()"></ion-icon></h3>
        </ion-col>
      </ion-row>
    </ion-grid>
    <div *ngIf="load">
      
      <ion-list mode="md">
        <ion-item>
          <ion-label class="font-lb">
            Fecha de creación:
          </ion-label>
          <ion-label class="dateExpire">
            {{order.created_at | date: "dd/MM/yyyy HH:mm"}}
          </ion-label>
        </ion-item>
        <ion-item>
          <ion-label class="font-lb">
            Entrega programada:
          </ion-label>
          <ion-label class="dateExpire">
            {{order.delivered_program | date: "dd/MM/yyyy"}}
          </ion-label>
        </ion-item>
        <ion-item>
          <ion-label class="font-lb">
            Estado:
          </ion-label>
          <ion-label class="dateExpire">
              <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> 
          </ion-label>
        </ion-item>
        <ion-item>
          <label class="font-lb">
            Lista de artículos:
          </label>
        </ion-item>
        <ion-item>
          <ion-grid>
            <ion-row *ngFor="let item of order.items; let j = index;">
              <ion-col col-5 style="white-space:normal">{{item.product_name}}</ion-col>
              <ion-col col-3>{{item.qty | number}} {{(item.product_type == 'FLOR' ? 'grs' : 'unid.')}}</ion-col>
              <ion-col col-4>$ {{item.total_line | number}}</ion-col>
            </ion-row>
          </ion-grid>
        </ion-item>
        <ion-item>
          <label class="font-lb labelRed">
            Valor pedido:
          </label>
          <p class="pRed">
            $ {{order.items_price | number }}
          </p>
        </ion-item>
        <ion-item>
          <label class="font-lb labelRed">
            Despacho:
          </label>
          <p class="pRed">
            $ {{order.ship_price | number }}
          </p>
        </ion-item>
        <ion-item>
          <label class="font-lb labelRed">
            Valor abonado total:
          </label>
          <p class="pRed">
            $ {{order.total | number }}
          </p>
        </ion-item>
        <ion-item>
          <label class="font-lb">
            Observaciones:
          </label>
          <p>
            {{order.notes}}
          </p>
        </ion-item>
      </ion-list>

    </div>
   
  </div>

</ion-content>