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

        <div
            class="content"
            id="backgroundStyle"
        >
            <form 
              autocomplete="off"
              [formGroup]="reservaForm"
              >
                <div class="row">
                    <div class="col-6">
                      <mat-form-field appearance="fill">
                        <mat-label>Dia Reservacion</mat-label>
                        <input matInput formControlName="diaReservacion" readonly />
                      </mat-form-field>
                    </div>
                    <div class="col-6">
                      <mat-form-field appearance="fill">
                        <mat-label>Estado</mat-label>
                        <input matInput formControlName="estado" readonly />
                      </mat-form-field>
                    </div>
                </div>
                <div class="row" style="margin-top: 50px">
                    <div class="col-10">
                      <mat-form-field appearance="fill">
                        <mat-label>ID Pasajero</mat-label>
                        <input matInput formControlName="idPasajero" readonly />
                      </mat-form-field>
                    </div>

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

                <div class="row">
                    <div class="col-12">
                        <table class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th scope="col">ID</th>
                                    <th scope="col">Apellido</th>
                                    <th scope="col">Primer Nombre</th>
                                    <th scope="col">Segundo Nombre</th>
                                    <th scope="col">Telefono</th>
                                    <th scope="col"></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="tr-hover">
                                    <td>{{ pasajero?.id }}</td>
                                    <td>{{ pasajero?.apellido }}</td>
                                    <td>{{ pasajero?.primerNombre }}</td>
                                    <td>{{ pasajero?.segundoNombre }}</td>
                                    <td>{{ pasajero?.telefono }}</td>
                                    <td style="text-align: center">
                                        <button class="btn btn-light btn-sm">
                                            <i class="fa fa-trash"></i>
                                            Eliminar
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="row" style="margin-top: 50px; margin-bottom: 15px">
                    <div class="col-10">
                        <label for="exampleFormControlInput1" class="form-label"
                            >Escalas del vuelo</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">
                                        Codigo Aeropuerto Origen
                                    </th>
                                    <th scope="col">
                                        Codigo Aeropuerto Destino
                                    </th>
                                    <th scope="col">Hora salida</th>
                                    <th scope="col"></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr
                                    *ngFor="let escala of escalasVuelo"
                                    class="tr-hover"
                                >
                                    <td>{{ escala.id }}</td>
                                    <td>{{ escala.aeropuertoOrigen }}</td>
                                    <td>{{ escala.aeropuertoDestino }}</td>
                                    <td>{{ escala.fechaSalida  | date: 'M/d/yy, h:mm a'	}}</td>

                                    
                           
                                    <td style="text-align: center">
                                        <button class="btn btn-light btn-sm">
                                            <i class="fa fa-trash"></i>
                                            Eliminar
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div
                id="backgroundStyle"
        >
            <div class="d-flex justify-content-end">
                <button type="submit" class="btn btn-primary" (click)="agregarReserva()">
                    {{ "Guardar" }}
                </button>
            </div>
        </div>
            </form>
        </div>
        
    </div>
    
    <!-- <button (click)="mandarCorreo()">
      MANDAR CORREO
    </button> -->
</div>

<div
    class="modal inmodal fade"
    id="myModal5"
    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">Seleccionar Pasajero</h4>
            </div>
            <div class="modal-body">
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th scope="col"></th>
                            <th scope="col">ID</th>
                            <th scope="col">Apellido</th>
                            <th scope="col">Primer Nombre</th>
                            <th scope="col">Segundo Nombre</th>
                            <th scope="col">Telefono</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr
                            *ngFor="
                                let pasajero of pasajerosModal
                                    | paginate : page_size : page_number
                            "
                            class="tr-hover"
                            (click)="agregarPasajero(pasajero.id)"
                        >
                            <td>
                                <!-- <mat-radio-group aria-label="Select an option">
                                    <mat-radio-button
                                        *ngFor="let pasajeroR of pasajerosModal"
                                        value="{{ pasajeroR.id }}"
                                    ></mat-radio-button>
                                </mat-radio-group> -->
                            </td>
                            <td>{{ pasajero.id }}</td>
                            <td>{{ pasajero.apellido }}</td>
                            <td>{{ pasajero.primerNombre }}</td>
                            <td>{{ pasajero.segundoNombre }}</td>
                            <td>{{ pasajero.telefono }}</td>
                        </tr>
                    </tbody>
                </table>
                <mat-paginator
                    (page)="handlePage($event)"
                    [length]="pasajerosModal.length"
                    [pageSize]="page_size"
                    [pageSizeOptions]="pageSizeOptions"
                    showFirstLastButtons
                >
                </mat-paginator>
            </div>

            <div class="modal-footer">
                <button
                    type="button"
                    class="btn btn-white"
                    data-dismiss="modal"
                    #closeModal
                >
                    Close
                </button>
                <button type="button" class="btn btn-primary">Agregar</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">Seleccionar Vuelos</h4>
            </div>
            <div class="modal-body">
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th scope="col">ID</th>
                            <th scope="col">Codigo Aeropuerto Origen</th>
                            <th scope="col">Codigo Aeropuerto Destino</th>
                            <th scope="col">Numero Vuelo</th>
                            <th scope="col">Hora salida</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr
                            *ngFor="
                                let vuelo of vuelosModal
                                    | paginate : page_sizeV : page_numberV
                            "
                            class="tr-hover"
                            (click)="agregarVuelo(vuelo.id)"

                        >
                            <td>{{ vuelo.id }}</td>
                            <td>{{ vuelo.aeropuertoOrigen }}</td>
                            <td>{{ vuelo.aeropuertoDestino }}</td>
                            <td>{{ vuelo.fechaLlegada | date: 'M/d/yy, h:mm a'	}}</td>
                        </tr>
                    </tbody>
                </table>

                <mat-paginator
                    (page)="handlePage2($event)"
                    [length]="vuelosModal.length"
                    [pageSize]="page_sizeV"
                    [pageSizeOptions]="pageSizeOptionsV"
                    showFirstLastButtons
                >
                </mat-paginator>
            </div>

            <div class="modal-footer">
                <button
                    type="button"
                    class="btn btn-white"
                    data-dismiss="modal"
                    #closeModalVuelo

                >
                    Cerrar
                </button>
                <button type="button" class="btn btn-primary">Agregar</button>
            </div>
        </div>
    </div>
</div>




