<div class="main-content">
  <div class="container-fluid">
      <div class="row">
          <div class="col-md-12">
              <div class="card">
                  <div class="card-header card-header-green">
                      <h4 class="card-title ">Pedidos</h4>
                      <p class="card-category"> Listado actual de pedidos</p>
                  </div>
                  <div class="card-body">
                      <div class="row">
                        <div class="col-md-2">
                            <mat-form-field class="example-full-width">
                                <input matInput [(ngModel)]="filter.name" placeholder="Filtrar por cliente">
                            </mat-form-field>
                        </div>
                        <div class="col-md-2">
                            <mat-form-field>
                            <input matInput [(ngModel)]="filter.from" [matDatepicker]="picker" placeholder="Compra desde">
                            <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                            <mat-datepicker #picker></mat-datepicker>
                            </mat-form-field>
                        </div>
                        <div class="col-md-2">
                            <mat-form-field>
                            <input matInput [(ngModel)]="filter.to" [matDatepicker]="picker2" placeholder="Compra hasta">
                            <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
                            <mat-datepicker #picker2></mat-datepicker>
                            </mat-form-field>
												</div>
                        <div class="col-md-2">
                            <mat-form-field>
                            <input matInput [(ngModel)]="filter.delivery_from" [matDatepicker]="picker3" placeholder="Despacho desde">
                            <mat-datepicker-toggle matSuffix [for]="picker3"></mat-datepicker-toggle>
                            <mat-datepicker #picker3></mat-datepicker>
                            </mat-form-field>
                        </div>
                        <div class="col-md-2">
                            <mat-form-field>
                            <input matInput [(ngModel)]="filter.delivery_to" [matDatepicker]="picker4" placeholder="Despacho hasta">
                            <mat-datepicker-toggle matSuffix [for]="picker4"></mat-datepicker-toggle>
                            <mat-datepicker #picker4></mat-datepicker>
                            </mat-form-field>
                        </div>
                        <div class="col-md-2">
                            <button mat-raised-button (click)="filterdata()" color="primary">Filtrar</button>
                            <!--<button mat-raised-button color="secondary">Excel</button>-->
                        </div>
                      </div>
                      <div class="table-responsive">
                            <table class="table table-hover table-bordered">
                              <thead>
                                  <th>Nro.</th>
                                  <th>Cliente</th>
                                  <th>Destino</th>
                                  <th>Estado</th>
                                  <th>Monto</th>
                                  <th>Repartidor</th>
                                  <th>Opciones</th>
                              </thead>
                              <tbody>
                                  <tr *ngIf="orders.length == 0">
                                    <td colspan="7">No existen registros disponibles</td>
                                  </tr>
                                  <tr *ngFor="let order of orders; let i = index;">
                                      <td>{{order.id}}</td>
                                      <td>{{order.user_fullname}}</td>
                                      <td>{{order.address_street}} {{order.additional}}, {{order.address_city}}</td>
                                      <td>{{getStatus(order.status)}}</td>
                                      <td>$ {{order.total | number}}</td>
                                      <td>{{order.assign_name}}</td>
                                      <td>
                                        <button mat-stroked-button color="primary" *ngIf="order.status != '0' && order.status != '3'" (click)="packing(i)">Packing</button>
                                        <button mat-stroked-button color="primary" *ngIf="order.status == '0' || order.status == '3'" (click)="procesar(i)">Procesar</button>
                                        <button mat-stroked-button color="primary" (click)="editOrder(i)">Editar</button>
                                        <button mat-stroked-button color="warn" (click)="nullOrder(i)">Anular</button>
                                      </td>
                                  </tr>
                              </tbody>
                          </table>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
</div>
