<mat-card class="card-normal-form mat-elevation-z8 animated fadeIn fast">
  <form [formGroup]="formGroup">
    <mat-grid-list cols="12" rowHeight="80px">
      <mat-grid-tile colspan="12">
        <mat-card-title> {{ accion }} - Políticas de Vacaciones</mat-card-title>
      </mat-grid-tile>

      <mat-grid-tile colspan="6">
        <mat-form-field appearance="standard">
          <mat-label>Política</mat-label>
          <input
            matInput
            placeholder="Ingrese el nombre de la política"
            formControlName="nombre_politica"
            required
          />
          <mat-icon matSuffix>assignment</mat-icon>
          <mat-error *ngIf="nombre_politica!.invalid">{{
            nombre_politica!.hasError("required")
              ? "Debe ingresar este campo"
              : ""
          }}</mat-error>
        </mat-form-field>
      </mat-grid-tile>
      <!-- <mat-grid-tile colspan="4">
        <mat-form-field appearance="standard">
          <mat-label>Caducidad</mat-label>
          <input
            matInput
            placeholder="Ingrese la caducidad de la política"
            formControlName="CADUCIDAD"
            required
          />
          <mat-icon matSuffix>event_busy</mat-icon>
          <mat-error *ngIf="CADUCIDAD!.invalid">
            {{ getErrorMessage() }}
          </mat-error>
        </mat-form-field>
      </mat-grid-tile> -->
      <mat-grid-tile colspan="6">
        <mat-form-field appearance="standard">
          <mat-label>Días de Descanso</mat-label>
          <mat-select formControlName="dias_descanso" multiple>
            <mat-option
              *ngFor="let topping of diasDeLaSemana"
              [value]="topping"
            >
              {{ topping.dia }}</mat-option
            >
          </mat-select>
          <mat-icon matSuffix>calendar_month</mat-icon>
          <mat-error *ngIf="dias_descanso!.invalid">{{
            dias_descanso!.hasError("required")
              ? "Debe ingresar este campo"
              : ""
          }}</mat-error>
        </mat-form-field>
      </mat-grid-tile>
    </mat-grid-list>

    <!-- <mat-divider></mat-divider> -->
    <mat-grid-list cols="4" rowHeight="70px">
      <mat-grid-tile colspan="4">
        <!-- <h4>Habilitar Earn As You Go</h4> -->
        &nbsp;
        <mat-checkbox color="primary" formControlName="earn_as_you_go">
          Habilitar Earn As You Go
        </mat-checkbox>
      </mat-grid-tile>

      <mat-grid-tile colspan="4">
        <h4>Datos para los Días Vacionales</h4>
      </mat-grid-tile>

      <!--  <mat-grid-tile colspan="2">
        <mat-form-field appearance="standard">
          <mat-label>Número Año Inicio</mat-label>
          <input matInput placeholder="Ingrese el año inicial" required />
          <mat-icon matSuffix>event</mat-icon>
        </mat-form-field>
      </mat-grid-tile> -->

      <!-- <mat-grid-tile colspan="2">
        <mat-form-field appearance="standard">
          <mat-label>Número Año Inicio</mat-label>
          <input matInput placeholder="Ingrese el año inicial" disabled />
          <mat-icon matSuffix>event</mat-icon>
        </mat-form-field>
      </mat-grid-tile> -->

      <!-- <mat-grid-tile colspan="2">
        <mat-form-field appearance="standard">
          <mat-label>Número Año Final</mat-label>
          <input matInput placeholder="Ingrese el año final" required />
          <mat-icon matSuffix>event</mat-icon>
        </mat-form-field>
      </mat-grid-tile> -->

      <!--  <mat-grid-tile colspan="2">
        <mat-form-field appearance="standard">
          <mat-label>Número Año Final</mat-label>
          <input matInput placeholder="Ingrese el año final" disabled />
          <mat-icon matSuffix>event</mat-icon>
        </mat-form-field>
      </mat-grid-tile> -->
      <form [formGroup]="formGroupTable">
        <mat-grid-tile colspan="2">
          <h4 style="opacity: 0.75">Año:</h4>
          &nbsp; &nbsp;
          <mat-form-field>
            <mat-select formControlName="data_anio">
              <mat-option selected disabled value="1"
                >Seleccione un año</mat-option
              >
              <mat-option *ngFor="let item of anios_vacaciones" [value]="item">
                {{ item.anio }}
              </mat-option>
            </mat-select>
            <mat-icon matSuffix>event</mat-icon>
          </mat-form-field>
        </mat-grid-tile>

        <mat-grid-tile colspan="2">
          <h4 style="opacity: 0.75">Días:</h4>
          &nbsp; &nbsp;
          <mat-form-field>
            <input
              matInput
              type="number"
              min="1"
              formControlName="data_dias"
              placeholder="Ingrese los días"
              required
            />
            <mat-icon matSuffix>event</mat-icon>
          </mat-form-field>
        </mat-grid-tile>
        <mat-grid-tile colspan="4">
          <button
            type="button"
            [disabled]="data_anio?.value == null || data_dias?.value == null"
            mat-raised-button
            class="success"
            (click)="agregar_tabla()"
          >
            Agregar a la tabla
          </button>
        </mat-grid-tile>
      </form>

      <!--  <mat-grid-tile colspan="2">
        <mat-form-field appearance="standard">
          <mat-label>Días</mat-label>
          <input matInput placeholder="Ingrese los días" disabled />
          <mat-icon matSuffix>event</mat-icon>
        </mat-form-field>
      </mat-grid-tile> -->

      <!-- <mat-grid-tile colspan="2" rowspan="4">
         
        <table
          mat-table
          [dataSource]="dataSource"
          class="centre animated fadeIn"
        >
          <ng-container matColumnDef="anio">
            <th mat-header-cell *matHeaderCellDef class="centre">Año</th>
            <td mat-cell *matCellDef="let element">
              {{ element.anio_inicio }} - {{ element.anio_fin }}
            </td>
          </ng-container>

          <ng-container matColumnDef="dia">
            <th mat-header-cell *matHeaderCellDef class="centre">Día</th>
            <td mat-cell *matCellDef="let element">{{ element.dias }}</td>
          </ng-container>

          <ng-container matColumnDef="accion">
            <th mat-header-cell *matHeaderCellDef class="centre">Eliminar</th>
            <td mat-cell *matCellDef="let element">
              <button mat-mini-fab color="warn" class="mr-1" disabled>
                <mat-icon>delete</mat-icon>
              </button>
            </td>
          </ng-container>
          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
        </table>
        <mat-paginator
          [pageSizeOptions]="[5, 10, 20]"
          showFirstLastButtons
          aria-label="Select page of periodic elements"
          style="display: none"
        >
        </mat-paginator>
      </mat-grid-tile> -->
    </mat-grid-list>

    <div class="data-empty" *ngIf="dataSource.data.length == 0">
      Tabla de días vacia
    </div>

    <div style="width: 100%" class="centre">
      <table
        mat-table
        [dataSource]="dataSource"
        class="centre animated fadeIn"
        style="width: 100%"
        *ngIf="dataSource.data.length != 0"
      >
        <ng-container matColumnDef="anio">
          <th mat-header-cell *matHeaderCellDef class="centre">Año</th>
          <td mat-cell *matCellDef="let element">
            {{ element.anio }}
          </td>
        </ng-container>

        <ng-container matColumnDef="dia">
          <th mat-header-cell *matHeaderCellDef class="centre">Días</th>
          <td mat-cell *matCellDef="let element">{{ element.dias }}</td>
        </ng-container>

        <ng-container matColumnDef="accion">
          <th mat-header-cell *matHeaderCellDef class="centre">Eliminar</th>
          <td mat-cell *matCellDef="let element">
            <button mat-mini-fab color="warn" class="mr-1" (click)="eliminarDatoTabla(element)">
              <mat-icon>delete</mat-icon>
            </button>
          </td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
      </table>
      <mat-paginator
        [pageSizeOptions]="[5, 10, 20]"
        showFirstLastButtons
        aria-label="Select page of periodic elements"
      >
      </mat-paginator>
    </div>

    <!-- <mat-grid-list cols="12" rowHeight="60px">
      <mat-grid-tile colspan="12">
        <h4>Datos para los Días Vacionales</h4>
      </mat-grid-tile>

      <mat-grid-tile colspan="3">
        <mat-form-field appearance="standard">
          <mat-label>Número Año Inicio</mat-label>
          <input matInput placeholder="Ingrese el año inicial" required />
          <mat-icon matSuffix>event</mat-icon>
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="3">
        <mat-form-field appearance="standard">
          <mat-label>Número Año Final</mat-label>
          <input matInput placeholder="Ingrese el año final" required />
          <mat-icon matSuffix>event</mat-icon>
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="3">
        <mat-form-field appearance="standard">
          <mat-label>Días</mat-label>
          <input matInput placeholder="Ingrese los días" required />
          <mat-icon matSuffix>event</mat-icon>
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="3">
        <button mat-raised-button class="mr-3 secondary">Registrar</button>
      </mat-grid-tile>
    </mat-grid-list>

    <div style="width: 400px; margin: auto">
      <table mat-table [dataSource]="dataSource" class="centre animated fadeIn">
        <ng-container matColumnDef="anio">
          <th mat-header-cell *matHeaderCellDef class="centre">Año</th>
          <td mat-cell *matCellDef="let element">
            {{ element.anio_inicio }} - {{ element.anio_fin }}
          </td>
        </ng-container>

        <ng-container matColumnDef="dia">
          <th mat-header-cell *matHeaderCellDef class="centre">Día</th>
          <td mat-cell *matCellDef="let element">{{ element.dias }}</td>
        </ng-container>

        <ng-container matColumnDef="accion">
          <th mat-header-cell *matHeaderCellDef class="centre">Eliminar</th>
          <td mat-cell *matCellDef="let element">
            <button mat-mini-fab color="warn" class="mr-1">
              <mat-icon>delete</mat-icon>
            </button>
          </td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
      </table>
      <mat-paginator
        [pageSizeOptions]="[5, 10, 20]"
        showFirstLastButtons
        aria-label="Select page of periodic elements"
        style="display: none"
      >
      </mat-paginator>
    </div>

    
    <mat-grid-list cols="12" rowHeight="60px">
      <mat-grid-tile colspan="12">
        <h4>Datos de Earn As You Go</h4>
      </mat-grid-tile>
      <mat-grid-tile colspan="2">
        <mat-checkbox
          color="primary"
          formControlName="EARNASYOUGO"
          (change)="onCheckChange()"
        >
          Earn As You Go
        </mat-checkbox>
      </mat-grid-tile>
      <mat-grid-tile colspan="3">
        <mat-form-field appearance="standard">
          <mat-label>Número Año Inicio</mat-label>
          <input
            matInput
            placeholder="Ingrese el año inicial"
            required
            formControlName="DIASEARNASYOUGO"
          />
          <mat-icon matSuffix>event</mat-icon>
        </mat-form-field>
      </mat-grid-tile>
      <mat-grid-tile colspan="3">
        <mat-form-field appearance="standard">
          <mat-label>Número Año Final</mat-label>
          <input
            matInput
            placeholder="Ingrese el año final"
            required
            formControlName="DIASEARNASYOUGO_2"
          />
          <mat-icon matSuffix>event</mat-icon>
        </mat-form-field>
      </mat-grid-tile>
      <mat-grid-tile colspan="2">
        <mat-form-field appearance="standard">
          <mat-label>Días</mat-label>
          <input
            matInput
            placeholder="Ingrese los días"
            required
            formControlName="DIASEARNASYOUGO_3"
          />
          <mat-icon matSuffix>event</mat-icon>
        </mat-form-field>
      </mat-grid-tile>
      <mat-grid-tile colspan="2">
        <button mat-raised-button class="mr-3 secondary">Registrar</button>
      </mat-grid-tile>
    </mat-grid-list>

    <div style="width: 400px; margin: auto">
      <table mat-table [dataSource]="dataSource" class="centre animated fadeIn">
        <ng-container matColumnDef="anio">
          <th mat-header-cell *matHeaderCellDef class="centre">Año</th>
          <td mat-cell *matCellDef="let element">
            {{ element.anio_inicio }} - {{ element.anio_fin }}
          </td>
        </ng-container>

        <ng-container matColumnDef="dia">
          <th mat-header-cell *matHeaderCellDef class="centre">Día</th>
          <td mat-cell *matCellDef="let element">{{ element.dias }}</td>
        </ng-container>

        <ng-container matColumnDef="accion">
          <th mat-header-cell *matHeaderCellDef class="centre">Eliminar</th>
          <td mat-cell *matCellDef="let element">
            <button mat-mini-fab color="warn" class="mr-1">
              <mat-icon>delete</mat-icon>
            </button>
          </td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
      </table>
      <mat-paginator
        [pageSizeOptions]="[5, 10, 20]"
        showFirstLastButtons
        aria-label="Select page of periodic elements"
        style="display: none"
      >
      </mat-paginator>
    </div> -->

    <mat-grid-list cols="12" rowHeight="60px">
      
      <mat-grid-tile colspan="12">
        <a
          mat-raised-button
          [routerLink]="['/admin/mcompv']"
          class="mr-3"
          color="warn"
        >
          Cerrar
        </a>
        <button
          mat-raised-button
          *ngIf="accion == 'Registro' "
          class="mr-3 secondary"
          [disabled]="formGroup.invalid || dataSource.data.length === 0 || anios_vacaciones.length !== 0 || anios_vacaciones.length !== 0"
          (click)="registrar()"
        >
          Registrar Política
        </button>
        <button
          mat-raised-button
          *ngIf="accion == 'Modificar' "
          class="mr-3 secondary"
          [disabled]="formGroup.invalid || dataSource.data.length === 0 || anios_vacaciones.length !== 0 || anios_vacaciones.length !== 0"
          (click)="modificar()"
        >
          Modificar Política
        </button>
      </mat-grid-tile>

      <mat-grid-tile colspan="12" *ngIf="!formGroup.invalid  && ! (dataSource.data.length == 0) && anios_vacaciones.length != 0">
        <h5>*Todos los años deben tener al menos 1 día de vacación para poder continuar*</h5>
      </mat-grid-tile>
    </mat-grid-list>
  </form>
</mat-card>
