<div class="row">
    <div class="col-12">
        <app-header></app-header>

        <div class="content">
            <div>

              <form autocomplete="off"
              [formGroup]="vueloForm">
              <div class="row">
                <div class="col-6">

                  <mat-form-field>
                    <mat-label mat-label>Dia Salida</mat-label>
                    <input matInput type="datetime-local" formControlName="diaSalida" #diaSalidaVuelo required>
                  </mat-form-field> 
                </div>
                <div class="col-6">
                  <mat-form-field>
                    <mat-label mat-label>Dia Lllegada</mat-label>
                    <input matInput type="datetime-local" formControlName="diaLlegada" #diaLlegadaVuelo required>
                  </mat-form-field>
                </div>
            </div>
            <div class="row">
                <div class="col-6">
                  <mat-form-field appearance="fill">
                    <mat-label>Aeropuerto Origen</mat-label>
                    <mat-select formControlName="origen">
                      <mat-option *ngFor="let aeropuerto of aeropuertos" [value]="aeropuerto.id"
                      >
                        {{aeropuerto.codigo}}
                      </mat-option>
                    </mat-select>
                  </mat-form-field>

                  
                </div>
                <div class="col-6">
                  <mat-form-field appearance="fill">
                    <mat-label>Aeropuerto Destino</mat-label>
                    <mat-select formControlName="destino">
                      <mat-option *ngFor="let aeropuerto of aeropuertos" [value]="aeropuerto.id"
                      >
                        {{aeropuerto.codigo}}
                      </mat-option>
                    </mat-select>
                  </mat-form-field>
                </div>
            </div>
            <div class="row">
                <div class="col-6">
                  <mat-form-field appearance="fill">
                    <mat-label mat-label>Codigo Aerolinea</mat-label>
                    <input matInput formControlName="codigoAerolinea" required>
                  </mat-form-field>
                </div>
                <div class="col-6">
                  <mat-form-field appearance="fill">
                    <mat-label mat-label>Codigo Tipo Aeronave Habitual</mat-label>
                    <input matInput formControlName="codigoTipoAeronave" required>
                  </mat-form-field>
                </div>
            </div>
            <div class="row">
                <div class="col-6">
                  <mat-form-field appearance="fill">
                    <mat-label mat-label>Costo</mat-label>
                    <input matInput formControlName="costo" required>
                    <span matTextPrefix>$&nbsp;</span>
                    <span matTextSuffix>.00</span>
                  </mat-form-field>
                </div>
            </div>
              </form>
                

                <div class="row" style="margin-top: 50px; margin-bottom: 15px">
                    <div class="col-10">
                        <label for="exampleFormControlInput1" class="form-label"
                            >Agregar Escalas</label
                        >
                    </div>

                    <div class="col-2" style="justify-content: flex-end;">
                      <div mat-dialog-actions align="end">
                        <button data-toggle="modal" data-target="#myModal6" style="background-color:white"  mat-mini-fab>
                          <mat-icon [ngStyle]="{'color':'black'}">file_copy</mat-icon>
                        </button>
                      </div>
                    </div>

                </div>
                <!--TABLA VUELO-->
                <div class="row">
                    <div class="col-12">
                        <table class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th scope="col">ID</th>
                                    <th scope="col">Hora salida</th>

                                    <th scope="col">Hora llegada</th>

                                    <th scope="col">
                                        Codigo Aeropuerto Origen
                                    </th>
                                    <th scope="col">
                                        Codigo Aeropuerto Destino
                                    </th>
                                    <th scope="col"></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr
                                    *ngFor="let escala of escalasShow;let i = index"
                                    class="tr-hover"
                                >
                                    <td> {{ i+1 }}</td>
                                    <td>{{ escala.fechaSalida | date: 'M/d/yy, h:mm a' }}</td>
                                    <td>{{ escala.fechaLlegada  | date: 'M/d/yy, h:mm a'}}</td>
                                    <td>{{ escala.aeropuertoOrigen }}</td>
                                    <td>{{ escala.aeropuertoDestino }}</td>

                                    <td style="text-align: center">
                                        <button class="btn btn-light btn-sm" (click)="borarFilaEscala(i,escala.id)">
                                            <i class="fa fa-trash"></i>
                                            Eliminar
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div
            style="
                background-color: white;
                border-top: 1px solid grey;
                padding: 10px 20px 20px 20px;
            "
        >
            <div class="d-flex justify-content-end">
                <button type="submit" class="btn btn-primary" (click)="guardar()">
                    {{ tipoBoton }}
                </button>
            </div>
        </div>
    </div>
</div>

<div
    class="modal inmodal fade"
    id="myModal6"
    tabindex="-1"
    role="dialog"
    aria-hidden="true"
>
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Agregar Escalas</h4>
            </div>
            <div class="modal-body">

              <form autocomplete="off"
              [formGroup]="escalaForm">
                <div class="row">
                  <div class="col-6">
                    <!-- <mat-form-field appearance="fill">
                      <mat-label>Dia Salida</mat-label>
                      <input matInput formControlName="diaSalida" required />
                    </mat-form-field> -->

                    <mat-form-field>
                      <mat-label>Dia Salida</mat-label>
                      <input matInput type="datetime-local" formControlName="diaSalida" #diaSalidaEscala required>
                    </mat-form-field> 
               

                  </div>
                  <div class="col-6">
                    <mat-form-field>
                      <mat-label>Dia Llegada</mat-label>
                      <input matInput type="datetime-local" formControlName="diaLlegada" #diaLlegadaEscala required>
                    </mat-form-field> 
                  </div>
                </div>
              <div class="row">
                  <div class="col-6">
                    <mat-form-field appearance="fill">
                      <mat-label>Aeropuerto Origen</mat-label>
                      <mat-select formControlName="origen">
                        <mat-option *ngFor="let aeropuerto of aeropuertos" [value]="aeropuerto">
                          {{aeropuerto.codigo}}
                        </mat-option>
                      </mat-select>
                    </mat-form-field>
                  </div>
                  <div class="col-6">
                    <mat-form-field appearance="fill">
                      <mat-label>Aeropuerto Destino</mat-label>
                      <mat-select formControlName="destino">
                        <mat-option *ngFor="let aeropuerto of aeropuertos" [value]="aeropuerto"
                        >
                          {{aeropuerto.codigo}}
                        </mat-option>
                      </mat-select>
                    </mat-form-field>
                  </div>
              </div>
              </form>
                

                <div class="modal-footer">
                    <button
                        type="button"
                        class="btn btn-white"
                        data-dismiss="modal"
                    >
                        Cerrar
                    </button>
                    <button type="button" class="btn btn-primary" (click)="prueba()" >
                        Agregar
                    </button>
                   
                </div>
            </div>  
        </div>
    </div>
</div>

