<main class="main-container animated fadeIn">

  <app-btn-navigate navigate="/sam/GPRS/GEPE/GEPE" nameButton="Gestión de empleados" widthPosition="2.5%"/>

  <mat-card class="override-card-form override-elevation-z8 override-card-personality">
      @if (isLoadingForm) {
          <mat-progress-bar mode="indeterminate"></mat-progress-bar>
      }

      <nav class="override-nav">
          <mat-card-title class="mat-card-title centre">Cronograma de actividades - Empleado #{{ idEmployee }}</mat-card-title>

          <div class="override-actions">
              <div style="display:flex; align-items: center;">
                  <button mat-mini-fab color="primary" class="mr-8 mb-20 override_no_shadow" matTooltip="Semana Anterior" (click)="reloadCalendar('-')">
                      <mat-icon>chevron_left</mat-icon>
                  </button>

                  <mat-form-field appearance="outline">
                      <mat-label>Mes y Año</mat-label>
                      <input matInput [matDatepicker]="dp" [formControl]="dateSelected">
                      <mat-datepicker-toggle matIconSuffix [for]="dp"></mat-datepicker-toggle>
                      <mat-datepicker #dp
                                      startView="multi-year"
                                      (monthSelected)="setMonthAndYear($event, dp)"
                                      panelClass="example-month-picker">
                      </mat-datepicker>
                  </mat-form-field>
                  
                  <button mat-mini-fab color="primary" class="ml-8 mb-20 override_no_shadow" matTooltip="Siguiente Semana" (click)="reloadCalendar('+')">
                      <mat-icon>navigate_next</mat-icon>
                  </button>
              </div>
              <div class="override-buttons">
                  <app-btn-resize
                      class="ml-8"
                      (click)="openForm('REG')"
                      [disabled]="isLoading || isLoadingForm"
                      [backgroundColor]="'primary raised-button-background'"
                      [textColor]="'white_font'"
                      [nameButton]="'Nuevo'"
                      [icon]="'add'"/>
      
                  <button
                      mat-mini-fab
                      matTooltip="Actualizar datos"
                      class="orange_primary_background white_font override_no_shadow ml-8"
                      (click)="getScheduleActivitiesByEmployee()">
                      <mat-icon>refresh</mat-icon>
                  </button>
              </div>
          </div>
      </nav>

      <app-loading-card [isLoading]="isLoading" [txtLoading]="'Cargando las tasas horarias'"/>

      <div class="override-table" tabindex="0">
          <table mat-table [dataSource]="dataSource" [style.display]="isLoading ? 'none': 'revert'">

              @for (column of displayedColumns; track column; let indexColumn = $index ) {
                  <ng-container [matColumnDef]="column">
                      <th mat-header-cell *matHeaderCellDef [id]="'row_'+indexColumn"> {{ column }} </th>
                      <td mat-cell *matCellDef="let element, let indexRow = index" [id]="'cell_'+indexColumn+'_'+indexRow"> 
                          @if (indexColumn !== (startColumnWeek - 2)) {
                              <span> {{ setValueCell(element, indexColumn, indexRow) }} </span>
                          }
                          @if (indexColumn === startColumnWeek-2) {
                            <button mat-flat-button class="white_font" [class]="resourcesService.setChipList(setValueCell(element, indexColumn, indexRow))">
                              {{ setValueCell(element, indexColumn, indexRow) }} 
                            </button>
                          }

                          @if (indexColumn === startColumnWeek-1) {
                              <button 
                                  mat-mini-fab 
                                  color="primary" 
                                  class="override_no_shadow transparent_background gray_dark_font" 
                                  [matMenuTriggerFor]="menu" 
                                  matTooltip="Clic para desplegar las opciones">
                                  <mat-icon>more_vert</mat-icon>
                              </button>
                          }
                          <mat-menu #menu="matMenu">
                          <button mat-menu-item (click)="openForm('UPD', element)">
                              <mat-icon>edit</mat-icon>
                              <span>Editar Actividad</span>
                          </button>
                          <button mat-menu-item (click)="alert('ELI', element)">
                              <mat-icon>delete</mat-icon>
                              <span>Eliminar Actividad</span>
                          </button>
                          </mat-menu>
                      </td>
                  </ng-container>
              }

              <!-- Header row first group -->
              <ng-container matColumnDef="header-row-first-group">
                  <th mat-header-cell *matHeaderCellDef [attr.colspan]="startColumnWeek" style="text-align: center;">Información General de la Actividad</th>
              </ng-container>
              
              <!-- Header row second group -->
              <ng-container matColumnDef="header-row-second-group">
                  <th mat-header-cell *matHeaderCellDef [attr.colspan]="headerGroup2.columns" class="border-month" > {{ headerGroup2.month }} </th>
              </ng-container>

              <!-- Header row third group -->
              <ng-container matColumnDef="header-row-third-group">
                  <th mat-header-cell *matHeaderCellDef [attr.colspan]="headerGroup3.columns" class="border-month"> {{ headerGroup3.month }} </th>
              </ng-container>

              <tr mat-header-row *matHeaderRowDef="columnsToDisplayHeader; sticky: true"></tr>
              <tr mat-header-row *matHeaderRowDef="columnsToDisplay; sticky: true"></tr>
              <tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>

              <tr class="mat-row" *matNoDataRow>
                  <td class="mat-cell p-20 align-center" colspan="12">
                      <object data="assets/img/empty_data.svg" width="150"></object>
                      <h2>Sin datos</h2>
                  </td>
              </tr>
          </table>
      </div>
  </mat-card>
</main>