<h1 mat-dialog-title class="prevent-select" style="text-align: center; margin-top: 15px;">
  Carga de documentos relacionados
</h1>

<div class="uploader">
  <h2 mat-dialog-title class="prevent-select" style="font-size: 15px; display: flex; justify-content: center;">
    Agregue sus documentos en las secciones requeridas
  </h2>
  
  <!-- Para la carga de solo archivos excel
  <div>
    <h2 mat-dialog-title class="prevent-select" style="font-size: 15px; padding-left: 50px;"><mat-icon style="width: 30px; color: rgb(150, 150, 150); margin-top: 25px; ">folder_copy</mat-icon>sube aquí tu plantilla de documentación</h2>


    <input
    type="file"
    name="file"
    id="file"
    #file
    class="hidden"
    accept=".xlsx,.xls,.zip"
    (change)="checkFile($event)">
  <div 
    class="drag-drop-area"
    style="width: 40%; height: 0px;"
    [class.drag-over]="isDragOver"
    [class.has-file]="hasExcelFile"
    (dragover)="onDragOver($event)"
    (dragleave)="onDragLeave($event)"
    (drop)="onDrop($event)"
    (click)="openFileUploader()"
    *ngIf="!isUploading">

      <div class="drag-drop-content">
      <mat-icon class="upload-icon" style="margin-top: 5px; margin-right: 360px; position: absolute;">
        {{ hasExcelFile ? 'refresh' : 'table_chart ' }}
      </mat-icon>
      
      <p class="drag-drop-text" *ngIf="!hasExcelFile" style="margin-left: 27px;">
        <strong>Presione aquí o arrastre el archivo requerido</strong><br>
        <span>Solo archivos .xlsx, .xls (máximo 75MB)</span>
      </p>
      
      <p class="drag-drop-text" *ngIf="hasExcelFile">
        <strong>Haga clic aquí o arrastre un nuevo archivo Excel</strong><br>
        <span>Para reemplazar el archivo actual</span>
      </p>
    </div>
  </div>


Para la carga de archivos tipo zip

  <div>
 <h2 mat-dialog-title class="prevent-select" style="font-size: 15px; padding-left: 50px;"><mat-icon style="width: 30px; color: rgb(150, 150, 150); margin-top: 25px; "> folder_copy</mat-icon>sube aquí tu archivo zip</h2>


    <input
    type="file"
    name="file"
    id="file"
    #file
    class="hidden"
    accept=".zip,.docx"
    (change)="checkFile($event)">
  <div 
    class="drag-drop-area"
    style="width: 40%; height: 0px;"
    [class.drag-over]="isDragOver"
    [class.has-file]="hasZipFile"
    (dragover)="onDragOver($event)"
    (dragleave)="onDragLeave($event)"
    (drop)="onDrop($event)"
    (click)="openFileUploader()"
    *ngIf="!isUploading">

      <div class="drag-drop-content">
      <mat-icon class="upload-icon" style="margin-top: 5px; margin-right: 360px; position: absolute;">
        {{ hasZipFile ? 'refresh' : 'folder_zip' }}
      </mat-icon>
      
      <p class="drag-drop-text" *ngIf="!hasZipFile" style="margin-left: 27px;">
        <strong>Presione aquí o arrastre el archivo requerido</strong><br>
        <span>Solo archivos ZIP (máximo 250MB)</span>
      </p>
      
      <p class="drag-drop-text" *ngIf=" hasZipFile">
        <strong>Haga clic aquí o arrastre un nuevo archivo Excel</strong><br>
        <span>Para reemplazar el archivo actual</span>
      </p>
    </div>
  </div>
  </div>    
  </div> -->
   

  <input 
     type="file"
     name="file"
     id="file"
     #file
     class="hidden"
     accept=".xlsx,.xls,.zip"
     (change)="checkFile($event)">
  
  <div 
    class="drag-drop-area"
    [class.drag-over]="isDragOver"
    [class.has-file]="hasExcelFile || hasZipFile"
    (dragover)="onDragOver($event)"
    (dragleave)="onDragLeave($event)"
    (drop)="onDrop($event)"
    (click)="openFileUploader()"
    *ngIf="!isUploading">
    
    <div class="drag-drop-content">
      <mat-icon class="upload-icon">
        {{ hasZipFile && hasExcelFile ? 'refresh' : 'folder_copy' }}
      </mat-icon>
      
      <p class="drag-drop-text" *ngIf="!hasExcelFile || !hasZipFile">
        <strong>Haga clic aquí o arrastre aquí los archivos requeridos</strong><br>
        <span>Solo archivos .xlsx, .xls (máximo 10MB) y ZIP (máximo 50MB)</span>
      </p>
      
      <p class="drag-drop-text" *ngIf="hasExcelFile && hasZipFile">
        <strong>Haga clic aquí o arrastre un nuevo archivo Excel</strong><br>
        <span>Para reemplazar el archivo actual</span>
      </p>
    </div>
  </div>
  

  <div *ngIf="isUploading" class="upload-progress drag-drop-area uploading">
    <mat-spinner diameter="30"></mat-spinner>
    <p style="margin-top: 10px;">Subiendo archivo</p>
  </div>
</div>

<div mat-dialog-content class="prevent-select">

  <div class="is-loading animated fadeIn fast" *ngIf="isLoading" style="text-align: center; padding: 20px;">
    <mat-spinner></mat-spinner>
    <h3 style="margin-top: 10px;">Procesando archivo Excel...</h3>
  </div>


  <div class="has-error animated fadeIn fast" *ngIf="hasError" style="text-align: center; padding: 20px;">
    <mat-icon class="red_primary_font" style="font-size: 48px; margin-bottom: 10px;">error</mat-icon>
    <h3 style="font-weight: bold; font-style: italic;">{{ errorMessage }}</h3>
  </div>


     <div *ngIf="hasZipFile || hasExcelFile && !isLoading" class="files-container">
    <h3 style="margin: 20px 0; display: flex; align-items: center;">
      <mat-icon style="margin-right: 8px; color: #2e7d32;">
        {{ hasExcelFile ? 'table_chart' : 'folder_zip' }}
      </mat-icon>
      {{ hasExcelFile ? 'Archivo Excel cargado:' : 'Archivo ZIP cargado:' }}
    </h3>
        
    <table mat-table matSort class="animated fadeIn" [dataSource]="dataSource">

      <ng-container matColumnDef="nombre_del_archivo">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>
          <mat-icon>description</mat-icon>
          Nombre del archivo
        </th>
        <td mat-cell *matCellDef="let element">
          <div class="file-name-cell">
            <mat-icon color="primary">
              {{ element.tipo_archivo === 'excel' ? 'table_chart' : 'folder_zip' }}
            </mat-icon>
            <span>{{ element.nombre_del_archivo }}</span>
          </div>
        </td>
      </ng-container>


      <ng-container matColumnDef="tamano_del_archivo">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>
          <mat-icon>storage</mat-icon>
          Tamaño
        </th>
        <td mat-cell *matCellDef="let element">
          {{ element.tamano_del_archivo }}
          <span *ngIf="element.tipo_archivo === 'zip' && zipInfo" style="color: #666; font-size: 12px;">
            <br>({{ zipInfo }})
          </span>
        </td>
      </ng-container>

      <ng-container matColumnDef="tipo_archivo">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>
          <mat-icon>storage</mat-icon>
          Tipo de archivo
        </th>
        <td mat-cell *matCellDef="let element">
          <span class="file-type-badge" [ngClass]="{
            'excel-badge': element.tipo_archivo === 'excel',
            'zip-badge': element.tipo_archivo === 'zip'
          }">
            {{ element.tipo_archivo === 'excel' ? 'Excel' : 'ZIP' }}
          </span>
        </td>
      </ng-container>


      <ng-container matColumnDef="acciones">
        <th mat-header-cell *matHeaderCellDef>Acciones</th>
        <td mat-cell *matCellDef="let element">
          <div class="action-buttons">

            <button 
               mat-icon-button 
               color="primary"
               style="border-radius: 10px; margin-right: 5px;"
               class="pink_primary_background white_font"
               [matTooltip]="element.tipo_archivo === 'excel' ? 'Previsualizar Excel' : 'Previsualizar ZIP'"
               (click)="element.tipo_archivo === 'excel' ? previewExcelFile() : previewZipFile()"
               [disabled]="isLoading || isUploading">
              <mat-icon>visibility</mat-icon>
            </button>
            

            <button 
               mat-icon-button 
               color="warn"
               style="border-radius: 10px;"
               class="red_primary_background white_font"
               [matTooltip]="element.tipo_archivo === 'excel' ? 'Eliminar archivo Excel' : 'Eliminar archivo ZIP'"
               (click)="element.tipo_archivo === 'excel' ? removeExcelFile() : removeZipFile()"
               [disabled]="isLoading || isUploading">
              <mat-icon>delete</mat-icon>
            </button>
          </div>
        </td>
      </ng-container>

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

  <!--Para la previsualización de los documentos procesados-->



  <div *ngIf="!hasExcelFile && !isLoading && !isUploading && !hasZipFile" class="no-files-message" style="height: 120px; text-align: center; padding: 20px;">
    <mat-icon style=" color: #9e9e9e; margin-bottom: 10px;">upload_file</mat-icon>
    <p style="color: #666; font-size: 14px; margin-bottom: 5px;">
      <strong>No hay archivos cargados</strong>
    </p>
    <p style="color: #999; font-size: 12px;">
      Use el área de arriba para cargar su archivo Excel (.xlsx o .xls) o ZIP
    </p>
  </div>
</div>

<mat-dialog-actions align="end" style="padding: 16px;">
  <button 
     mat-button
    (click)="cancelar()"
    style="margin-right: 8px;"
    [disabled]="isLoading || isUploading">
    <mat-icon>close</mat-icon>
    Cancelar
  </button>
  

  <button 
     mat-raised-button
     color="primary"
     class="blue_send_background white_font"
     *ngIf="hasAnyFile"
     (click)="saveFinalFile()"
     [disabled]="isLoading || isUploading">
    <mat-icon>{{ hasExcelFile ? 'table_chart' : 'folder_zip' }}</mat-icon>
    {{ hasExcelFile ? 'Procesar Excel' : 'Procesar ZIP' }}
  </button>
</mat-dialog-actions>

