<div class="row">
    <div class="col-12">
        <app-header></app-header>
        <div class="content">
            <div class="filtros" style="margin-bottom: 10px">
                <div>
                    <div class="input-group m-b">
                        <div class="input-group-prepend">
                            <span class="input-group-addon" id="filtroSpan"
                                >Filtros</span
                            >
                        </div>
                        <input class="form-control" type="text"[(ngModel)]="filtroInput" #input>

                        <button class="btn-primary" id="botonFiltro" (click)="aplicarFiltro($event)">
                            <i class="fa fa-search"></i>
                        </button>
                        <button id="botonEliminarFiltros" (click)="eliminarFiltros()">
                            <i class="fa fa-times-circle"></i>
                        </button>
                        <button
                            routerLink="/reservas/agregar"
                            id="botonAgregar"
                        >
                            <div class="circulo-div">
                                <i
                                    class="fa fa-file-o"
                                    style="margin: auto"
                                ></i>
                            </div>
                        </button>
                    </div>
                </div>
            </div>
            <div style="padding-top: 15px">
              <div class="mat-elevation-z8">
                <table class="table table-striped table-hover" mat-table [dataSource]="dataSource" matSort>
              
                  <!-- Progress Column -->
                  <ng-container matColumnDef="id">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
                    <td mat-cell *matCellDef="let row"> {{row.id}} </td>
                  </ng-container>
              
                  <!-- Name Column -->
                  <ng-container matColumnDef="agente">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Agente </th>
                    <td mat-cell *matCellDef="let row"> {{row.agenteNombre}} </td>
                  </ng-container>
                  <ng-container matColumnDef="pasajero">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Pasajero </th>
                    <td mat-cell *matCellDef="let row"> {{row.pasajeroNombre}} </td>
                  </ng-container>
                  <ng-container matColumnDef="monto">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Monto a pagar </th>
                    <td mat-cell *matCellDef="let row"> {{row.escalas[0].costo}} </td>
                  </ng-container>
                  <ng-container matColumnDef="estado">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Estado </th>
                    <td mat-cell *matCellDef="let row"> 
                      <button
                      class="btn"
                      [ngClass]="getClaseBoton(row.estado)"
                      >
                      <i class="fa fa-check"></i>
                      {{ row.estado }}
                  </button>
                    </td>
                  </ng-container>
              
                  <ng-container matColumnDef="opciones">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header></th>
                    <td mat-cell *matCellDef="let row"> 

                      <ng-container
                      *ngIf="row.estado == 'pendiente'"
                  >
                      <button
                          (click)="cambiarEstadoReserva($event, row.id)"
                          class="btn btn-light btn-sm"
                      >
                          <i class="fa fa-trash"></i>

                          Cancelar
                      </button>
                  </ng-container>
                    </td>
                  </ng-container>
              
                  <tr  mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                  <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="detalles(row.id)"></tr>

                  <!-- <mat-row  *matRowDef="let row; columns: displayedColumns;" (click)="getRecord(row)"></mat-row> -->

              
                  <!-- Row shown when there is no matching data. -->
                  <!-- <tr class="mat-row" *matNoDataRow>
                    <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
                  </tr> -->
                </table>
              
                <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page of users"></mat-paginator>
              </div>
            </div>
        </div>
    </div>
</div>
