<div>
    <div class="card mb-3">
        <div class="card-header text-white" style="background-color: black;">Alumnos</div>
        <div class="card-body">
    <div class="row m-4">
        <div class="col d-flex justify-content-end">
            <button (click)="alta(content)" mdbBtn class="btn btn-dark">
                <i class="fa fa-plus" ></i>
                Agregar Alumno
            </button>
        </div>
    </div>
</div>
<div class="container-fluid">
    <table datatable [dtOptions]="dtOptions"
        class="mt-3 animated fadeIn faster">
        <thead >
        <tr>
          <th scope="col">#</th>
          <th scope="col">Nombre</th>
          <th scope="col">Matricula</th>
          <th scope="col">Carrera</th>
          <th scope="col">Periodo</th>
          <th scope="col">Acciones</th>
        </tr>
      </thead>
      <tbody *ngIf="alumnos?.length != 0">
        <tr  *ngFor="let a of alumnos; let i=index ">
            <td>{{ i+1 }}</td>
            <td>{{ a.nombres }}</td>
            <td>{{ a.matricula }}</td>
            <td>{{ a.carrera }}</td>
            <td>{{ a.periodo}}</td>
            <td>
                <button (click)="actualizar(a, content)"
                        type="button"
                        color="elegant" mdbWavesEffect
                        size="sm"
                         mdbBtn>
                         <mdb-icon fas icon="edit"></mdb-icon>
                  </button>
                  <button
                       (click)="borrar(a, i)"
                       size="sm"
                        color="danger"
                        mdbBtn>
                    <i class="fa fa-trash"></i>
                  </button>
            </td>
        </tr>

      </tbody>
      <tbody *ngIf="alumnos?.length == 0">
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td colspan="3" class="no-data-available">No hay datos</td>
            <td></td>
        </tr>
      <tbody>
    </table>
</div>

</div>
</div>

<ng-template #content let-c="close" let-d="dismiss">
    <form (ngSubmit)="guardar(formulario, content)" #formulario="ngForm">
        <div class="modal-header p-3 rounded z-depth-3 elegant-color-dark white-text text-center white-text">
            <h4 class="modal-title text-center">Alumno</h4>
            <button
                type="button"
                class="close text-white"
                aria-label="Close"
                (click)="d('Cross click')"
            >
                <span aria-hidden="true">&times;</span>
            </button>
        </div>

        <div class="modal-body">
            <aw-wizard navBarLayout="large-filled">
                <aw-wizard-step
                    [navigationSymbol]="{ symbol: '1' }"
                    stepTitle="Informacion personal"
                >
            <div class="form-row">
                <div class="md-form col-md-12">
                    <mdb-icon fas icon="id-card" class="prefix grey-text"></mdb-icon>
                   <input
                        type="text"
                        class="form-control"
                        required
                        [(ngModel)]="alumno.nombres"
                        name="nombres"
                        mdbInput
                    />
                    <label>Nombre(s)</label>
                </div>

            </div>
            <div class="form-row">
                <div class="md-form col-md-6">
                    <mdb-icon fas icon="id-card" class="prefix grey-text"></mdb-icon>
                    <input
                        type="text"
                        class="form-control"
                        required
                        [(ngModel)]="alumno.apellidoPaterno"
                        name="apellidoPaterno"
                        mdbInput
                    />
                    <label>Apellido paterno</label>
                </div>
                <div class="md-form col-md-6">
                    <mdb-icon fas icon="id-card" class="prefix grey-text"></mdb-icon>
                    <input
                        type="text"
                        class="form-control"
                        required
                        [(ngModel)]="alumno.apellidoMaterno"
                        name="apellidoMaterno"
                        mdbInput
                    />
                    <label>Apellido materno</label>
                </div>
            </div>
            <div class="form-row">
                <div class="md-form col-md-6">
                    <mdb-icon fas icon="passport" class="prefix grey-text"></mdb-icon>
                    <input
                        type="text"
                        class="form-control"
                        required
                        [(ngModel)]="alumno.matricula"
                        name="matricula"
                        mdbInput
                    />
                    <label>Codigo</label>
                </div>
                <div class="form-group col-md-6 ">
                    <label for="carrera">Periodo</label>
                    <select class="form-control"
                             name="periodo"
                             id="periodo"
                             [(ngModel)]="alumno.periodo"
                       >
                        <option default selected>Seleccione una opción...</option>
                        <option value="Enero-Abril">Enero - Abril</option>
                        <option value="Mayo-Agosto">Mayo - Agosto</option>
                        <option value="Septiembre-Diciembre">Septiembre - Diciembre</option>
                    </select>
                </div>
            </div>
            <div class="form-row">
                <div class="md-form col-md-6">
                    <mdb-icon fas icon="mobile-alt" class="prefix grey-text"></mdb-icon>
                    <input
                        type="number"
                        class="form-control"
                        required
                        [(ngModel)]="alumno.telefono"
                        name="telefono"
                        mdbInput
                    />
                    <label>Teléfono</label>
                </div>
                <div class="md-form col-md-6">
                    <mdb-icon fas icon="envelope" class="prefix grey-text"></mdb-icon>
                    <input
                        type="email"
                        class="form-control"
                        required
                        [(ngModel)]="alumno.correo"
                        name="correo"
                        mdbInput
                    />
                    <label>Correo</label>
                </div>
            </div>
            <button type="button" class="btn btn-dark pull-right" mdbBtn awNextStep> Siguiente <mdb-icon fas icon="arrow-circle-right" class="prefix grey-text"></mdb-icon></button>
        </aw-wizard-step>
        <aw-wizard-step
                    [navigationSymbol]="{ symbol: '2' }"
                    stepTitle="Datos complementarios"
                >
            <div class="form-row">
                <div class="form-group col-md-6 ">
                    <label for="nivel">Carrera</label>
                    <select class="form-control"
                            name="carrera"
                             id="carrera"
                            [(ngModel)]="alumno.carrera"
                       >

                        <option default selected>Seleccione una opción...</option>
                        <option value="TSU-TIC">Técnico Superior Universitario-TIC</option>
                        <option value="ING-TIC">Ingeniería - TIC</option>
                    </select>
                </div>
                <div class="form-group col-md-6 ">
                    <label for="nivel">Turno</label>
                    <select class="form-control"
                            name="turno"
                             id="turno"
                            [(ngModel)]="alumno.turno"
                       >

                        <option default selected>Seleccione una opción...</option>
                        <option value="M">Matutino</option>
                        <option value="v">Vespertino</option>
                    </select>
                </div>
            </div>

            <div class="form-row">
                <div class="form-group col-md-4 ">
                    <label for="nivel">Género</label>
                    <select class="form-control"
                            name="genero"
                             id="genero"
                            [(ngModel)]="alumno.genero"
                       >

                        <option default selected>Seleccione una opción...</option>
                        <option value="M">Masculino</option>
                        <option value="F">Femenino</option>
                    </select>
                </div>
                <div class="md-form col-md-4">
                    <label>Edad</label>
                    <input
                        type="number"
                        class="form-control"
                        required
                        [(ngModel)]="alumno.edad"
                        name="edad"
                        mdbInput
                    />
                </div>
                <div class="form-group col-md-4 ">
                    <label for="nivel">Reingreso</label>
                    <select class="form-control"
                            name="reingreso"
                             id="reingreso"
                            [(ngModel)]="alumno.reingreso"
                       >

                        <option default selected>Seleccione una opción...</option>
                        <option value="Si">Si</option>
                        <option value="No">No</option>
                    </select>
                </div>
            </div>
            <div class="form-row">
                <div class="col-md-6">
                    <label for="">Proyecto</label>
                    <div class="ng-autocomplete">
                        <ng-autocomplete
                        [data]="proyectos"
                        [searchKeyword]="keyword"
                        (selected)='selectEventAcademico($event)'
                        placeHolder="Escriba el nombre del proyecto"
                        [itemTemplate]="itemTemplateP"
                        [notFoundTemplate]="notFoundTemplateP">


                        </ng-autocomplete>
                        <ng-template #itemTemplateP let-item>
                            <a [innerHTML]="item.nombre"></a>
                            </ng-template>

                            <ng-template #notFoundTemplateP let-notFound>
                            <div [innerHTML]="notFound"></div>
                            </ng-template>
                    </div>

                </div>
                <div class="col-md-6">
                    <label for="">Asesor Academico</label>
                    <div class="ng-autocomplete">
                        <ng-autocomplete
                        [data]="asesoresA"
                        [searchKeyword]="keyword"
                        (selected)='selectEventAcademico($event)'
                        placeHolder="Escriba el nombre del asesor academico"
                        [itemTemplate]="itemTemplate"
                        historyIdentifier="asesoresA"
                        [notFoundTemplate]="notFoundTemplate">>


                        </ng-autocomplete>
                        <ng-template #itemTemplate let-item>
                            <a [innerHTML]="item.nombre"></a>
                            </ng-template>

                            <ng-template #notFoundTemplate let-notFound>
                            <div [innerHTML]="notFound"></div>
                            </ng-template>
                    </div>

                </div>
            </div>
            <div class="form-row mt-3">
                <div class="col-md-12">
                    <label for="">Asesor Industrial</label>
                    <div class="ng-autocomplete">
                        <ng-autocomplete
                        [data]="asesoresI"
                        [searchKeyword]="keyword"
                        (selected)='selectEventIndustrial($event)'
                        placeHolder="Escriba el nombre del asesor Industrial"
                        [itemTemplate]="itemTemplateI"
                        [notFoundTemplate]="notFoundTemplateI">


                        </ng-autocomplete>
                        <ng-template #itemTemplateI let-item>
                            <a [innerHTML]="item.nombre"></a>
                            </ng-template>

                            <ng-template #notFoundTemplateI let-notFound>
                            <div [innerHTML]="notFound"></div>
                            </ng-template>
                    </div>
                </div>
            </div>
            <button type="button" class=" mt-5 btn btn-dark pull-left" mdbBtn awPreviousStep><mdb-icon fas icon="arrow-circle-left" class="prefix grey-text"></mdb-icon> Regresar</button>
        </aw-wizard-step>
    </aw-wizard>

        </div>
        <div class="modal-footer align-content-center">
            <button
                type="button"
                class="btn btn-secondary"
                (click)="c('Close click')"
            >
                Cerrar
            </button>

            <button
                [disabled]="!formulario.valid"
                class="btn btn-primary"
                type="submit"
            >
                <i class="fa fa-save"></i>
                Guardar
            </button>
        </div>
    </form>
</ng-template>

{'avg_line_length': 39.135211267605634, 'max_line_length': 186, 'alphanum_fraction': 0.39545094651983015, 'licenses': ['Apache-2.0'], 'repository_name': 'oscarcferrr/estadias_tic', 'path': 'src/app/layout/alumnos/alumnos.component.html', 'size': 13902, 'lang': 'HTML'}