<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 Pasajeros</h2>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a>Dashboard</a>
                    </li>
                    <li class="breadcrumb-item">
                        <a>Concepto de Pasajero</a>
                    </li>
                    <li class="breadcrumb-item">
                        <a>{{title}} pasajero</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}} nuevo pasajero
                            </h5>
                            <div ibox-tools></div>
                        </div>
                        <div class="ibox-content">
                            <div class="row">
                                <div class="col-sm-6">
                                    <form role="form" [formGroup]="passengerForm">
                                        <div class="form-group"><label>Primer nombre del pasajero</label>
                                            <input type="text" placeholder="Ingresar primer nombre"
                                                formControlName="first_name" class="form-control">
                                        </div>
                                        <p style="color: red" class="error" *ngIf="passengerForm.get('first_name')?.errors &&
                                        (passengerForm.get('first_name')?.touched || passengerForm.get('first_name')?.dirty)
                                            ">
                                            Por favor, escriba su primer nombre
                                        </p>
                                        <div class="form-group mt-3"><label>Segundo nombre del pasajero</label>
                                            <input type="text" placeholder="Ingresar segundo nombre"
                                                formControlName="second_name" class="form-control">
                                        </div>
                                        <p style="color: red" class="error" *ngIf="passengerForm.get('second_name')?.errors &&
                                        (passengerForm.get('second_name')?.touched || passengerForm.get('second_name')?.dirty)
                                            ">
                                            Por favor, escriba su segundo nombre
                                        </p>
                                        <div class="form-group mt-3"><label>Apellidos del pasajero</label>
                                            <input type="text" placeholder="Ingresar los apellidos"
                                                formControlName="last_name" class="form-control">
                                        </div>
                                        <p style="color: red" class="error" *ngIf="passengerForm.get('last_name')?.errors &&
                                        (passengerForm.get('last_name')?.touched || passengerForm.get('last_name')?.dirty)
                                            ">
                                            Por favor, escriba sus apellidos
                                        </p>
                                        <div class="form-group mt-3"><label>Número de teléfono</label>
                                            <input type="text" placeholder="Ingresar número de teléfono"
                                                formControlName="phone_number" class="form-control">
                                        </div>
                                        <p style="color: red" class="error" *ngIf="passengerForm.get('phone_number')?.errors &&
                                        (passengerForm.get('phone_number')?.touched || passengerForm.get('phone_number')?.dirty)
                                            ">
                                            Por favor, escriba su número de telefono valido (9 digitos)
                                        </p>
                                        <div class="form-group mt-3"><label>Correo eléctronico</label>
                                            <input type="email" placeholder="Ingresar email"
                                                formControlName="email_address" class="form-control">
                                        </div>
                                        <p style="color: red" class="error" *ngIf="passengerForm.get('email_address')?.errors &&
                                        (passengerForm.get('email_address')?.touched || passengerForm.get('email_address')?.dirty)
                                            ">
                                            Por favor, escriba su correo electrónico
                                        </p>
                                        <div class="form-group mt-3"><label>Ciudad</label>
                                            <input type="text" placeholder="Ingresar ciudad" formControlName="city"
                                                class="form-control">
                                        </div>
                                        <p style="color: red" class="error" *ngIf="passengerForm.get('city')?.errors &&
                                        (passengerForm.get('city')?.touched || passengerForm.get('city')?.dirty)
                                            ">
                                            Por favor, escriba su ciudad
                                        </p>
                                        <div class="form-group mt-3"><label>País</label>
                                            <input type="text" placeholder="Ingresar el país" formControlName="country"
                                                class="form-control">
                                        </div>
                                        <p style="color: red" class="error" *ngIf="passengerForm.get('country')?.errors &&
                                        (passengerForm.get('country')?.touched || passengerForm.get('country')?.dirty)
                                            ">
                                            Por favor, escriba su pais
                                        </p>
                                        <div class="form-group mt-3"><label>Detalles</label>
                                            <input type="text" placeholder="Ingresar una descripción"
                                                formControlName="other_details" class="form-control">
                                            <p style="color: red" class="error" *ngIf="passengerForm.get('other_details')?.errors &&
                                        (passengerForm.get('other_details')?.touched || passengerForm.get('other_details')?.dirty)
                                            ">
                                                Por favor, escriba algun detalle del pasajero
                                            </p>
                                        </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)="createPassenger()"><strong>Guardar</strong></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>