<div class="wrapper-sidebar">
    <div class="sidebar" style="background-color: #2F4050;">
        <h2>Sidebar</h2>
        <ul style="padding: 0;">
            <li (click)="redirectTo('dashboard/agente')"><a><i class="fas fa-home"></i>Reservas</a></li>
            <li (click)="redirectTo('dashboard/agente/pasajero')"><a><i class="fas fa-home"></i>Pasajeros</a></li>
        </ul>
    </div>
    <div class="main_content">
        <app-topnavbar></app-topnavbar>
        <div class="row wrapper border-bottom white-bg page-heading">
            <div class="col-lg-12">
                <h2 class="mt-4">Concepto de Reserva</h2>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a>Dashboard</a>
                    </li>
                    <li class="breadcrumb-item">
                        <a>Concepto de Reserva</a>
                    </li>
                    <li class="breadcrumb-item">
                        <a>{{title}} reserva</a>
                    </li>
                </ol>
            </div>
            <div class="col-lg-2">

            </div>
        </div>
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-lg-7">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>{{title}} nueva reserva
                            </h5>
                            <div ibox-tools></div>
                        </div>
                        <div class="ibox-content">
                            <div class="row">
                                <div class="col-sm-6">
                                    <form role="form" [formGroup]="bookingForm">
                                        <div class="form-group">
                                            <mat-form-field class="d-flex w-100">
                                                <mat-label>Nombre del pasajero</mat-label>
                                                <mat-select formControlName="passenger_id">
                                                    <mat-option *ngFor="let pasajero of passengers"
                                                        [value]="pasajero.passengerId">
                                                        {{pasajero.firstName | titlecase}} {{pasajero.lastName | titlecase}}
                                                    </mat-option>
                                                </mat-select>
                                            </mat-form-field>
                                        </div>
                                        <div class="form-group mt-3">
                                            <mat-form-field class="d-flex w-100">
                                                <mat-label>Tipo de asiento</mat-label>
                                                <mat-select formControlName="travel_type_class">
                                                    <mat-option *ngFor="let type of types" [value]="type.role">
                                                        {{type.role | titlecase}}
                                                    </mat-option>
                                                </mat-select>
                                            </mat-form-field>
                                        </div>
                                        <div class="form-group mt-3">
                                            <mat-form-field class="d-flex w-100">
                                                <mat-label>Vuelo - Escalas</mat-label>
                                                <mat-select formControlName="leg_id">
                                                    <mat-option *ngFor="let leg of legs" [value]="leg.legId">
                                                        <div style="border-bottom: 1px solid #aaa;">
                                                            <p>{{leg.origin_airport.airportName}}-{{leg.actualDepartureDate}}:{{leg.actualDepartureTime}}
                                                            </p>
                                                            <p>{{leg.destination_airport.airportName}}-{{leg.actualArrivalDate}}:{{leg.actualArrivalTime}}
                                                            </p>
                                                        </div>
                                                    </mat-option>
                                                </mat-select>
                                            </mat-form-field>
                                        </div>
                                        <div class="form-group mt-3">
                                            <label>Número de asientos</label>
                                            <input type="number" placeholder="Ingresar cantidad de asientos"
                                                class="form-control" formControlName="number_in_party">
                                        </div>
                                    </form>
                                </div>
                                <div class="mt-3">
                                    <button class="btn btn-sm btn-primary pull-right m-t-n-xs" style="float: right;"
                                        type="submit" (click)="createReservation()"><strong>Guardar</strong></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>