<main class="main-container animated fadeIn">
  <app-btn-navigate
    navigate="/sam/GEPR"
    class="pink_primary_background"
    [nameButton]="interService.get('S002V01M03GEPR')"
    [changeLanguage]="true"
  />

  <mat-card class="override-card override-elevation-z8">
    @if (isLoadingForm) {
    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
    }
    <section class="override-section">
      <nav class="override-nav">
        <div class="w-100 align-center pv-15">
          <span
            class="title-card"
            style="font-family: 'Movilidad' !important"
            >{{ interService.get("S002V01S01GFTR").toUpperCase() }}</span
          >
        </div>
        <div class="override-actions">
          <app-search-card
            [dataSource]="dataSource"
            [disabled]="isLoading || isLoadingForm"
            [label]="interService.get('buscador')"
            [placeholder]="interService.get('ingrese_palabra_buscar')"
            [btnRemoveFilter]="interService.get('eliminar_filtro')"
            (dataValue)="dataSource = $event"
          />

          <div class="override-buttons">
            <app-btn-resize
              class="mr-8"
              (click)="openRegisterWorkflow()"
              [disabled]="isLoading || isLoadingForm"
              [textColor]="'white_font'"
              backgroundColor="raised-button-background"
              [nameButton]="interService.get('nuevo')"
              [icon]="'add'"
            />
            <button
              mat-mini-fab
              [matTooltip]="interService.get('actualizar_datos')"
              (click)="getWorkflows()"
              class="orange_primary_background white_font override_no_shadow ml-8"
            >
              <mat-icon>refresh</mat-icon>
            </button>
          </div>
        </div>
      </nav>

      <app-loading-card
        [isLoading]="isLoading"
        [txtLoading]="interService.get('cargando_informacion_flujos')"
      />

      <div class="override-table scroll-x">
        <table
          mat-table
          matSort
          [dataSource]="dataSource"
          class="animated fadeIn"
          [style.display]="isLoading ? 'none' : 'revert'"
        >
          <ng-container matColumnDef="ID_WORKFLOW" style="display: none">
            <th mat-header-cell *matHeaderCellDef style="display: none">ID</th>
            <td mat-cell *matCellDef="let element" style="display: none">
              {{ element.ID_WORKFLOW }}
            </td>
          </ng-container>
          <ng-container matColumnDef="SEGUIMIENTO">
            <th mat-header-cell *matHeaderCellDef>No</th>
            <td mat-cell *matCellDef="let element; let i = index">
              #{{ i + 1 }}
            </td>
          </ng-container>
          <ng-container matColumnDef="NOMBRE_WORKFLOW">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>
              {{ interService.get("nombre_flujo_trabajo") }}
            </th>
            <td mat-cell *matCellDef="let element">
              {{ element.NOMBRE_WORKFLOW }}
            </td>
          </ng-container>
          <ng-container matColumnDef="DESCRIPCION">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>
              {{ interService.get("descripcion") }}
            </th>
            <td mat-cell *matCellDef="let element">
              {{ resourcesService.resizeText(element.DESCRIPCION, 147) }}
            </td>
          </ng-container>
          <ng-container matColumnDef="MODULOS">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ interService.get('modulos') }}</th>
            <td mat-cell *matCellDef="let element">{{ element.MODULOS }}</td>
          </ng-container>
          <ng-container matColumnDef="PREDETERMINADO">
            <th
              mat-header-cell
              *matHeaderCellDef
              mat-sort-header
              style="text-align: center"
            >
              {{ interService.get('predeterminado') }}
            </th>
            <td mat-cell *matCellDef="let element" style="text-align: center">
              <mat-icon
                [style.color]="element.PREDETERMINADO ? '#4CAF50' : '#757575'"
              >
                {{ element.PREDETERMINADO ? "check_circle" : "cancel" }}
              </mat-icon>
            </td>
          </ng-container>
          <ng-container matColumnDef="VERSION">
            <th
              mat-header-cell
              *matHeaderCellDef
              mat-sort-header
              style="text-align: center"
            >
              {{ interService.get('version') }}
            </th>
            <td mat-cell *matCellDef="let element" style="text-align: center">
              {{ element.VERSION || "N/A" }}
            </td>
          </ng-container>
          <ng-container matColumnDef="ESTADO">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>
              {{ interService.get("estado") }}
            </th>
            <td mat-cell *matCellDef="let element">
              <button
                mat-flat-button
                [class]="resourcesService.setChipList(element.ESTADO)"
                class="white_font"
              >
                {{ element.ESTADO }}
              </button>
            </td>
          </ng-container>
          <ng-container matColumnDef="HISTORIAL">
            <th mat-header-cell *matHeaderCellDef>{{ interService.get('historial') }}</th>
            <td mat-cell *matCellDef="let element">
              <button
                mat-icon-button
                (click)="viewWorkflowHistory(element.ID_WORKFLOW)"
                [matTooltip]="interService.get('ver_historial_cambios')"
              >
                <mat-icon>history</mat-icon>
              </button>
            </td>
          </ng-container>
          <ng-container matColumnDef="ACCIONES">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>
              {{ interService.get("acciones") }}
            </th>
            <td mat-cell *matCellDef="let element">
              <button
                mat-mini-fab
                color="primary"
                class="override_no_shadow gray_dark_font transparent_background"
                [matTooltip]="interService.get('clic_desplegar')"
                [matMenuTriggerFor]="menu"
                [disabled]="isLoadingForm"
                #menuTrigger
              >
                <mat-icon>more_vert</mat-icon>
              </button>
              <mat-menu #menu="matMenu">
                <!-- Acciones para estado Borrador -->
                @if (element.ESTADO === 'Borrador') {
                  <button mat-menu-item (click)="goForm(element)">
                    <mat-icon>edit</mat-icon> {{ interService.get("editar") }}
                  </button>
                  <button mat-menu-item (click)="viewWorkflowDetails(element.ID_WORKFLOW)">
                    <mat-icon>visibility</mat-icon> {{ interService.get('ver_detalles') }}
                  </button>
                  <button mat-menu-item (click)="getTaskByWorkflow(element.ID_WORKFLOW)">
                    <mat-icon>add</mat-icon> {{ interService.get('registrar_tareas') }}
                  </button>
                  <button mat-menu-item (click)="activateWorkflowFromDraft(element)">
                    <mat-icon>toggle_on</mat-icon> {{ interService.get('activar') }}
                  </button>
                }
                
                <!-- Acciones para estado Activo -->
                @if (element.ESTADO === 'Activo') {
                  <button mat-menu-item (click)="viewWorkflowDetails(element.ID_WORKFLOW)">
                    <mat-icon>visibility</mat-icon> {{ interService.get('ver_detalles') }}
                  </button>
                  <button mat-menu-item (click)="getTaskByWorkflow(element.ID_WORKFLOW)">
                    <mat-icon>task</mat-icon> {{ interService.get("ver_tareas") }}
                  </button>
                  <button mat-menu-item (click)="openGraphicWorkflow(element.ID_WORKFLOW)">
                    <mat-icon>account_tree</mat-icon> {{ interService.get("ver_flujo") }}
                  </button>
                  <button mat-menu-item (click)="changeWorkflowStatus(element)">
                    <mat-icon>toggle_off</mat-icon> {{ interService.get('desactivar') }}
                  </button>
                }
                
                <!-- Acciones para estado Desactivado -->
                @if (element.ESTADO === 'Desactivado') {
                  <button mat-menu-item (click)="changeWorkflowStatus(element)">
                    <mat-icon>toggle_on</mat-icon> {{ interService.get('activar') }}
                  </button>
                }
              </mat-menu>
            </td>
          </ng-container>

          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>

          <tr class="mat-row" *matNoDataRow>
            <td class="mat-cell p-20 align-center" colspan="9">
              <object data="assets/img/empty_data.svg" width="150"></object>
              <h2>{{ interService.get('sin_datos') }}</h2>
            </td>
          </tr>
        </table>
      </div>
    </section>
    <mat-paginator
      [pageSizeOptions]="[10, 20, 50]"
      class="override-paginator"
      showFirstLastButtons
    ></mat-paginator>
  </mat-card>
</main>
