<div class="wrapper-sidebar">
    <div class="sidebar" style="background-color: #2F4050;">
        <h2>Sidebar</h2>
        <ul style="padding: 0;">
            <li (click)="redirectTo('dashboard/supervisor')"><a><i class="fas fa-home"></i>Agentes</a></li>
            <li (click)="redirectTo('dashboard/supervisor/aereopuertos')"><a><i class="fas fa-home"></i>Aereopuertos</a>
            </li>
            <li (click)="redirectTo('dashboard/supervisor/vuelos')"><a><i class="fas fa-home"></i>Vuelos</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 vuelos</h2>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a>Dashboard</a>
                    </li>
                    <li class="breadcrumb-item">
                        <a>Concepto de Vuelos</a>
                    </li>
                    <li class="breadcrumb-item">
                        <a>{{title}} vuelos</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-12">
                    <mat-stepper [linear]="true" #stepper>
                        <mat-step [completed]="isEditable">
                            <ng-template matStepLabel>Vuelo</ng-template>
                            <div class="ibox float-e-margins mt-3">
                                <div class="ibox-title">
                                    <h5>{{title}} Nuevo vuelo
                                    </h5>
                                    <div ibox-tools></div>
                                </div>
                                <div class="ibox-content">
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <form role="form" [formGroup]="flightForm">
                                                <div class="form-group w-75">
                                                    <mat-form-field class="d-flex w-100">
                                                        <mat-label>Aereolinea</mat-label>
                                                        <mat-select formControlName="airline_id">
                                                            <mat-option *ngFor="let aereolinea of airlines"
                                                                [value]="aereolinea.airline_id">
                                                                {{aereolinea.airlineName}}
                                                            </mat-option>
                                                        </mat-select>
                                                    </mat-form-field>
                                                </div>
                                                <div class="form-group mt-3 w-75">
                                                    <mat-form-field class="d-flex w-100">
                                                        <mat-label>Avion</mat-label>
                                                        <mat-select formControlName="aircraft_id">
                                                            <mat-option *ngFor="let avion of aircrafts"
                                                                [value]="avion.aircraft_id">
                                                                {{avion.model}}
                                                            </mat-option>
                                                        </mat-select>
                                                    </mat-form-field>
                                                </div>
                                                <div class="form-group mt-3 w-75">
                                                    <mat-form-field class="d-flex w-100">
                                                        <mat-label>Aereopuerto Origen</mat-label>
                                                        <mat-select formControlName="origin_airport_id">
                                                            <mat-option *ngFor="let aereopuerto of airports"
                                                                [value]="aereopuerto.airportId">
                                                                {{aereopuerto.airportName}}
                                                            </mat-option>
                                                        </mat-select>
                                                    </mat-form-field>
                                                </div>
                                                <div class="form-group mt-3 w-75">
                                                    <mat-form-field class="d-flex w-100">
                                                        <mat-label>Aereopuerto Llegada</mat-label>
                                                        <mat-select formControlName="destination_airport_id">
                                                            <mat-option *ngFor="let aereopuerto of airports"
                                                                [value]="aereopuerto.airportId">
                                                                {{aereopuerto.airportName}}
                                                            </mat-option>
                                                        </mat-select>
                                                    </mat-form-field>
                                                </div>
                                                <div class="form-group mt-3">
                                                    <label>Fecha inicial</label>
                                                    <mat-form-field appearance="fill" class="d-flex w-75">
                                                        <mat-label>Ingresar fecha inicial</mat-label>
                                                        <input matInput [matDatepicker]="picker1"
                                                            [formControl]="departure_date">
                                                        <mat-datepicker-toggle matIconSuffix
                                                            [for]="picker1"></mat-datepicker-toggle>
                                                        <mat-datepicker #picker1></mat-datepicker>
                                                    </mat-form-field>
                                                </div>
                                                <div class="form-group w-75"><label>Hora inicial</label>
                                                    <input type="time" class="form-control" value="00:00 AM"
                                                        formControlName="departure_time" />
                                                </div>
                                                <div class="form-group mt-3">
                                                    <label>Fecha inicial</label>
                                                    <mat-form-field appearance="fill" class="d-flex w-75">
                                                        <mat-label>Ingresar fecha final</mat-label>
                                                        <input matInput [matDatepicker]="picker2"
                                                            [formControl]="arrival_date">
                                                        <mat-datepicker-toggle matIconSuffix
                                                            [for]="picker2"></mat-datepicker-toggle>
                                                        <mat-datepicker #picker2></mat-datepicker>
                                                    </mat-form-field>
                                                </div>
                                                <div class="form-group w-75"><label>Hora Final</label>
                                                    <input type="time" class="form-control" value="00:00 AM"
                                                        formControlName="arrival_time" />
                                                </div>
                                            </form>
                                        </div>
                                        <div class=" mt-3">
                                            <button class="btn btn-sm btn-primary pull-right m-t-n-xs"
                                                style="float: right;"
                                                (click)="updateFlight(stepper)"><strong>Siguiente</strong></button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </mat-step>
                        <mat-step>
                            <ng-template matStepLabel>Escalas</ng-template>
                            <div class="ibox float-e-margins mt-3">
                                <div class="ibox-title">
                                    <h5>{{title}} nuevas escalas
                                    </h5>
                                    <div ibox-tools></div>
                                </div>
                                <div class="ibox-content">
                                    <div class="row">
                                        <div class="col-sm-5">
                                            <form role="form" [formGroup]="legForm">
                                                <div class="form-group mt-3 w-75">
                                                    <mat-form-field class="d-flex w-100">
                                                        <mat-label>Aereopuerto Origen</mat-label>
                                                        <mat-select formControlName="origin_airport_id">
                                                            <mat-option *ngFor="let aereopuerto of airports"
                                                                [value]="aereopuerto.airportId">
                                                                {{aereopuerto.airportName}}
                                                            </mat-option>
                                                        </mat-select>
                                                    </mat-form-field>
                                                </div>
                                                <div class="form-group mt-3 w-75">
                                                    <mat-form-field class="d-flex w-100">
                                                        <mat-label>Aereopuerto Llegada</mat-label>
                                                        <mat-select formControlName="destination_airport_id">
                                                            <mat-option *ngFor="let aereopuerto of airports"
                                                                [value]="aereopuerto.airportId">
                                                                {{aereopuerto.airportName}}
                                                            </mat-option>
                                                        </mat-select>
                                                    </mat-form-field>
                                                </div>
                                                <div class="form-group mt-3">
                                                    <label>Fecha inicial</label>
                                                    <br>
                                                    <mat-form-field appearance="fill" class="d-flex w-75">
                                                        <mat-label>Ingresar fecha inicial</mat-label>
                                                        <input matInput [matDatepicker]="pickerIn2"
                                                            [formControl]="actual_departure_date">
                                                        <mat-datepicker-toggle matIconSuffix
                                                            [for]="pickerIn2"></mat-datepicker-toggle>
                                                        <mat-datepicker #pickerIn2></mat-datepicker>
                                                    </mat-form-field>
                                                </div>
                                                <div class="form-group w-75"><label>Hora inicial</label>
                                                    <input type="time" class="form-control" value="00:00 AM"
                                                        formControlName="actual_departure_time" />
                                                </div>
                                                <div class="form-group mt-3">
                                                    <label>Fecha final</label>
                                                    <br>
                                                    <mat-form-field appearance="fill" class="d-flex w-75">
                                                        <mat-label>Ingresar fecha final</mat-label>
                                                        <input matInput [matDatepicker]="pickerOut2"
                                                            [formControl]="actual_arrival_date">
                                                        <mat-datepicker-toggle matIconSuffix
                                                            [for]="pickerOut2"></mat-datepicker-toggle>
                                                        <mat-datepicker #pickerOut2></mat-datepicker>
                                                    </mat-form-field>
                                                </div>
                                                <div class="form-group w-75"><label>Hora Final</label>
                                                    <input type="time" class="form-control" value="00:00 AM"
                                                        formControlName="actual_arrival_time" />
                                                </div>
                                            </form>
                                            <div class="mt-3">
                                                <button class="btn btn-sm btn-primary pull-right m-t-n-xs"
                                                    style="margin-left: 28%;"
                                                    (click)="updateLeg()"><strong>Guardar</strong></button>
                                            </div>
                                        </div>
                                        <div class="col-sm-6 mt-4">
                                            <table
                                                class="footable table table-stripped toggle-arrow-tiny footable-loaded tablet breakpoint">
                                                <thead>
                                                    <tr>
                                                        <th data-toggle="true"
                                                            class="footable-visible footable-sortable footable-v-column">
                                                            Id<span class="footable-sort-indicator"></span></th>
                                                        <th data-toggle="true"
                                                            class="footable-visible footable-sortable footable-v-column">
                                                            Aereopuerto Origen<span
                                                                class="footable-sort-indicator"></span></th>
                                                        <th class="footable-visible footable-sortable">Aereopuerto
                                                            Destino<span class="footable-sort-indicator"></span></th>
                                                        <th data-type="numeric"
                                                            class="footable-visible footable-sortable">Fecha
                                                            inicial<span class="footable-sort-indicator"></span></th>
                                                        <th data-type="numeric"
                                                            class="footable-visible footable-sortable">Fecha
                                                            final<span class="footable-sort-indicator"></span></th>
                                                        <th
                                                            class="footable-visible footable-sortable footable-last-column">
                                                            Action<span class="footable-sort-indicator"></span></th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr class="footable-even" *ngFor="let escala of legs">
                                                        <td class="footable-visible">{{escala.legId}}</td>
                                                        <td class="footable-visible">
                                                            {{escala.origin_airport.airportName}}</td>
                                                        <td class="footable-visible">
                                                            {{escala.destination_airport.airportName}}</td>
                                                        <td class="footable-visible">{{escala.actualDepartureDate}} :
                                                            {{escala.actualDepartureTime}}</td>
                                                        <td class="footable-visible">{{escala.actualArrivalDate}} :
                                                            {{escala.actualArrivalTime}}</td>
                                                        <td class="footable-visible footable-last-column">
                                                            <button class="btn btn-sm btn-primary pull-right m-t-n-xs"
                                                                (click)="editLeg(escala.legId)"><strong>Elegir</strong></button>
                                                            <button class="btn btn-sm btn-primary pull-right m-t-n-xs"
                                                                style="margin-left:8px;"
                                                                (click)="deleteLeg(escala)"><strong>Eliminar</strong></button>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="mt-3">
                                            <button class="btn btn-sm btn-primary pull-right m-t-n-xs"
                                                style="float: right;" matStepperNext><strong>Siguiente</strong></button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </mat-step>
                        <mat-step>
                            <ng-template matStepLabel>Costos</ng-template>
                            <div class="ibox float-e-margins mt-3">
                                <div class="ibox-title">
                                    <h5>{{title}} nuevos costos
                                    </h5>
                                    <div ibox-tools></div>
                                </div>
                                <div class="ibox-content">
                                    <div class="row">
                                        <div class="col-sm-4">
                                            <form role="form" [formGroup]="costForm">
                                                <div class="form-group"><label>Fecha inicial</label>
                                                </div>
                                                <mat-form-field appearance="fill" class="d-flex w-75">
                                                    <mat-label>Ingresar fecha inicial</mat-label>
                                                    <input matInput [matDatepicker]="picker3"
                                                        [formControl]="valid_from_date">
                                                    <mat-datepicker-toggle matIconSuffix
                                                        [for]="picker3"></mat-datepicker-toggle>
                                                    <mat-datepicker #picker3></mat-datepicker>
                                                </mat-form-field>
                                                <div class="form-group mt-3"><label>Fecha final</label></div>
                                                <mat-form-field appearance="fill" class="d-flex w-75">
                                                    <mat-label>Ingresar fecha final</mat-label>
                                                    <input matInput [matDatepicker]="picker4"
                                                        [formControl]="valid_to_date">
                                                    <mat-datepicker-toggle matIconSuffix
                                                        [for]="picker4"></mat-datepicker-toggle>
                                                    <mat-datepicker #picker4></mat-datepicker>
                                                </mat-form-field>
                                                <div class="form-group w-75 mt-3"><label>Monto</label> <input
                                                        type="number" formControlName="flight_cost"
                                                        placeholder="Ingresar el monto total de los costos"
                                                        class="form-control"></div>
                                                <p style="color: red" class="error" *ngIf="
                                                        costForm.get('flight_cost')?.errors &&
                                                        (costForm.get('flight_cost')?.touched || costForm.get('flight_cost')?.dirty)
                                                      ">
                                                    Por favor, escriba algun monto
                                                </p>
                                            </form>
                                            <div class="mt-3">
                                                <button class="btn btn-sm btn-primary pull-right m-t-n-xs mt-4"
                                                    style="margin-left: 25%;"
                                                    (click)="updateCost()"><strong>Guardar</strong></button>
                                            </div>
                                        </div>
                                        <div class="col-sm-6 mt-4">
                                            <table
                                                class="footable table table-stripped toggle-arrow-tiny footable-loaded tablet breakpoint">
                                                <thead>
                                                    <tr>
                                                        <th data-toggle="true"
                                                            class="footable-visible footable-sortable footable-first-column">
                                                            Id<span class="footable-sort-indicator"></span></th>
                                                        <th data-toggle="true"
                                                            class="footable-visible footable-sortable footable-first-column">
                                                            Monto<span class="footable-sort-indicator"></span></th>
                                                        <th data-toggle="true"
                                                            class="footable-visible footable-sortable footable-first-column">
                                                            Aereolinea<span class="footable-sort-indicator"></span></th>
                                                        <th data-type="numeric"
                                                            class="footable-visible footable-sortable">Fecha
                                                            inicial<span class="footable-sort-indicator"></span></th>
                                                        <th data-hide="all" class="footable-sortable">Fecha final<span
                                                                class="footable-sort-indicator"></span></th>
                                                        <th
                                                            class="footable-visible footable-sortable footable-last-column">
                                                            Action<span class="footable-sort-indicator"></span></th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr class="footable-even" *ngFor="let costo of costs">
                                                        <td class="footable-visible">{{costo.costId}}</td>
                                                        <td class="footable-visible">{{costo.flightCost}}</td>
                                                        <td class="footable-visible">{{costo.airline.airlineName}}</td>
                                                        <td class="footable-visible">{{costo.validFromDate}}</td>
                                                        <td class="footable-visible">{{costo.validToDate}}</td>
                                                        <td class="footable-visible footable-last-column">
                                                            <button class="btn btn-sm btn-primary pull-right m-t-n-xs"
                                                                (click)="editCost(costo.costId)"><strong>Elegir</strong></button>
                                                            <button class="btn btn-sm btn-primary pull-right m-t-n-xs"
                                                                style="margin-left:8px;"
                                                                (click)="deleteCost(costo)"><strong>Eliminar</strong></button>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="mt-3">
                                            <button class="btn btn-sm btn-primary pull-right m-t-n-xs"
                                                style="float: right;" matStepperNext><strong>Siguiente</strong></button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </mat-step>
                        <mat-step>
                            <ng-template matStepLabel>Done</ng-template>
                            <div class="col-lg-4 mt-3">
                                <div class="ibox ">
                                    <div class="ibox-title">
                                        <h5>Vuelo</h5>
                                    </div>
                                    <div class="ibox-content">
                                        <div class="row">
                                            <div class="col-4">
                                                <small class="stats-label">Aereolinea</small>
                                                <h4>{{flight.airline.airlineName}}</h4>
                                            </div>
                                            <div class="col-4">
                                                <small class="stats-label">Avion</small>
                                                <h4>{{flight.airplane.model}}</h4>
                                            </div>
                                            <div class="col-4">
                                                <small class="stats-label">Fecha incial</small>
                                                <h4>{{flight.departureDate}}</h4>
                                            </div>
                                            <div class="col-4">
                                                <small class="stats-label">Fecha final</small>
                                                <h4>{{flight.arrivalDate}}</h4>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 mt-3">
                                <div class="ibox ">
                                    <div class="ibox-title">
                                        <h5>Escalas</h5>
                                    </div>
                                    <div class="ibox-content">
                                        <div class="row" *ngFor="let escala of legs">
                                            <div class="col-4">
                                                <small class="stats-label">Id</small>
                                                <h4>{{escala.legId}}</h4>
                                            </div>
                                            <div class="col-4">
                                                <small class="stats-label">Aereopuerto Origen</small>
                                                <h4>{{escala.origin_airport.airportName}}</h4>
                                            </div>
                                            <div class="col-4">
                                                <small class="stats-label">Aereopuerto Destino</small>
                                                <h4>{{escala.destination_airport.airportName}}</h4>
                                            </div>
                                            <div class="col-4">
                                                <small class="stats-label">Fecha de salida</small>
                                                <h4>{{escala.actualDepartureDate}}</h4>
                                            </div>
                                            <div class="col-4">
                                                <small class="stats-label">Fecha de llegada</small>
                                                <h4>{{escala.actualArrivalDate}}</h4>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 mt-3">
                                <div class="ibox ">
                                    <div class="ibox-title">
                                        <h5>Costos</h5>
                                    </div>
                                    <div class="ibox-content">
                                        <div class="row" *ngFor="let costo of costs">
                                            <div class="col-4">
                                                <small class="stats-label">Id</small>
                                                <h4>{{costo.costId}}</h4>
                                            </div>
                                            <div class="col-4">
                                                <small class="stats-label">Avion</small>
                                                <h4>{{costo.flight.airplane.model}}</h4>
                                            </div>
                                            <div class="col-4">
                                                <small class="stats-label">Fecha inicial</small>
                                                <h4>{{costo.validFromDate}}</h4>
                                            </div>
                                            <div class="col-4">
                                                <small class="stats-label">Fecha final</small>
                                                <h4>{{costo.validToDate}}</h4>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="mt-3">
                                <button class="btn btn-sm btn-primary pull-right m-t-n-xs" style="float: right;"
                                    type="submit"
                                    (click)="save('dashboard/supervisor/vuelos')"><strong>Guardar</strong></button>
                            </div>
                        </mat-step>
                    </mat-stepper>

                </div>
            </div>
        </div>
    </div>