<div class="close ">
  <button class="cerrar-b cursor-pointer" mat-dialog-close><mat-icon>close</mat-icon></button>
</div>
<span class="center">Editar Circular</span>
<!-- --------------------------------------------------------------------------------- -->
<!-- form -->

<mat-dialog-content class="mat-typography space mt-40" [autofocus]="['none']">

  <form (ngSubmit)="editCircular()" [formGroup]="form">

    <div class="form-container">

      <mat-form-field class="item">
        <mat-label>Titulo</mat-label>
        <input matInput name="titulo" formControlName="titulo" placeholder="Titulo">
        <mat-icon [class.is-invalid-icon]="campoVacio('titulo')" matSuffix>badge</mat-icon>
        <!-- <mat-hint *ngIf="campoVacio('titulo')" class="is-invalid">El campo es obligatorio</mat-hint> -->
      </mat-form-field>

      <mat-form-field class="item">
        <mat-label>Audiencia</mat-label>
        <mat-select name="audiencia" formControlName="audiencia">
          <mat-option *ngFor="let option of audiencia" [value]="option.value">{{option.audiencia}}</mat-option>
        </mat-select>
      </mat-form-field>

      <mat-form-field class="item">
        <mat-label>Destinos</mat-label>
        <mat-select name="destinos" formControlName="destinos">
          <mat-optgroup *ngFor="let opcion of opciones" [label]="opcion.name">
            <mat-option *ngFor="let grupo of opcion.grupo" [value]="grupo.value">{{grupo.viewValue}}</mat-option>
          </mat-optgroup>
        </mat-select>
      </mat-form-field>

      <mat-form-field class="item">
        <mat-label>Importancia</mat-label>
        <mat-select name="importancia" formControlName="importancia">
          <mat-option *ngFor="let option of importancia" [value]="option.value">{{option.importancia}}</mat-option>
        </mat-select>
      </mat-form-field>

      <!-- _________________________________________________________________________ -->

      <div class="item">
        <div class="responsive">
          <div class="flex-col">
            <label for="fechaInicio">Fecha Inicio</label>
            <div style="display: flex;">
              <mat-form-field class="w-responsive">
                <mat-label>Desde</mat-label>
                <input matInput [matDatepicker]="pickerStart" [min]="todayDate" name="fechaInicio" id="fechaInicio"
                  formControlName="fechaInicio" readonly>
                <!-- <mat-hint>MM/DD/YYYY</mat-hint> -->
                <mat-datepicker-toggle matIconSuffix [for]="pickerStart"></mat-datepicker-toggle>
                <mat-datepicker #pickerStart></mat-datepicker>
                <mat-hint *ngIf="isValidField('fechaInicio', 'required')"
                  style="color: red; width: 200px; position: absolute;">El campo es obligatorio</mat-hint>
                <mat-hint
                  *ngIf="isValidField('fechaInicio', 'fechaInvalida') && !isValidField('fechaInicio', 'required')"
                  style="color: red; width: 380px; position: absolute;">La fecha de inicio debe ser mayor o igual a la
                  fecha actual</mat-hint>
              </mat-form-field>

              <mat-form-field class="ml-10 w-responsive">
                <mat-label>Hora</mat-label>
                <mat-select matNativeControl name="horaInicio" formControlName="horaInicio">
                  <mat-option *ngFor="let hora of horasDelDia" [value]="hora.hora24">{{hora.hora12}}
                  </mat-option>
                </mat-select>
                <mat-hint *ngIf="isValidField('horaInicio', 'required')"
                  style="color: red; width: 200px; position: absolute;">El campo es obligatorio</mat-hint>
              </mat-form-field>
            </div>
          </div>

        </div>

      </div>

      <!-- Campo Fecha fin -->
      <div class="item">
        <div class="responsive">
          <div class="flex-col ml-20">
            <label for="fechaInicio">Fecha Final</label>
            <div style="display: flex;">
              <mat-form-field class="w-responsive">
                <mat-label>Desde</mat-label>
                <input matInput [matDatepicker]="pickerStart1" [min]="todayDate" name="fechaCaducidad"
                  id="fechaCaducidad" formControlName="fechaCaducidad" readonly>
                <!-- <mat-hint>MM/DD/YYYY</mat-hint> -->
                <mat-datepicker-toggle matIconSuffix [for]="pickerStart1"></mat-datepicker-toggle>
                <mat-datepicker #pickerStart1></mat-datepicker>
                <mat-hint *ngIf="isValidField('fechaCaducidad', 'required')"
                  style="color: red; width: 200px; position: absolute;">El campo es obligatorio</mat-hint>
                <mat-hint
                  *ngIf="isValidField('fechaCaducidad', 'fechaInvalida') && !isValidField('fechaCaducidad', 'required')"
                  style="color: red; width: 380px; position: absolute;">La fecha de caducidad debe ser mayor o igual a
                  la fecha de inicio</mat-hint>
              </mat-form-field>

              <mat-form-field class="ml-10 w-responsive">
                <mat-label>Hora</mat-label>
                <mat-select matNativeControl name="horaCaducidad" formControlName="horaCaducidad">
                  <mat-option *ngFor="let hora of horasDelDia" [value]="hora.hora24">{{hora.hora12}}
                  </mat-option>
                </mat-select>
                <mat-hint *ngIf="isValidField('horaCaducidad', 'required')"
                  style="color: red; width: 200px; position: absolute;">El campo es obligatorio</mat-hint>
              </mat-form-field>
            </div>

          </div>
        </div>
      </div>



      <div class="item two-columns flex-col">

        <input type="file" class="file-input" (change)="onFilesSelected($event)" #fileUpload multiple>


        <div class="file-upload">

          {{adjuntos && adjuntos.length > 0? 'Archivos: ':"Ningún archivo seleccionado"}}

          <button mat-mini-fab color="primary" class="upload-btn" type="button" (click)="fileUpload.click()">
            <mat-icon>attach_file</mat-icon>
          </button>
        </div>
        <div *ngIf="adjuntos && adjuntos.length > 0"
          style="border: 1px solid #ccc; padding: 20px 12px; margin-top: 10px; max-height: 150px; border-radius: 10px; overflow-y: auto;">
          <ul style="margin: 0; padding: 0; list-style: none; ">
            <span style="margin-bottom: 10px;">Listado de archivos:</span>
            <li *ngFor="let archivo of adjuntos; let i = index"
              style="border: 1px solid #ccc; padding: 10px 15px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; border-radius: 8px;">
              {{ archivo.nombre }} ({{ archivo.tamanio }} kb)
              <button type="button" (click)="deleteIndex(i, archivo)" class="btnDelete">
                <mat-icon>close</mat-icon>
              </button>
            </li>
          </ul>
        </div>

        <div class="progress">

          <!-- <mat-progress-bar class="progress-bar" mode="determinate"
                            [value]="uploadProgress" *ngIf="uploadProgress">

          </mat-progress-bar> -->

          <!-- <mat-icon class="cancel-upload" (click)="cancelUpload()"
                    *ngIf="uploadProgress">delete_forever</mat-icon> -->

        </div>
      </div>

      <!-- Sección de urls -->

      <div class="item two-columns"
        style="display: flex; flex-direction: column; justify-content: space-between; align-items: center;">
        <!-- Input y botón en la misma fila -->
        <div style="display: flex; align-items: center; width: 100%; gap: 10px; padding: 0 20px;">
          <mat-form-field style="flex: 1;">
            <mat-label>Link</mat-label>
            <input matInput name="link" formControlName="link" placeholder="URL">
            <mat-icon matSuffix>link</mat-icon>
          </mat-form-field>

          <button (click)="addUrl()" type="button"
            style="background-color: #3f51b5; border-radius: 50%; border: none; color: white; font-size: 24px; height: 40px; width: 40px; cursor: pointer; display: flex; align-items: center; justify-content: center;">
            +
          </button>
        </div>

        <!-- Listado de urls -->
        <div *ngIf="urls.length > 0"
          style="margin-top: 10px; padding-top: 10px; width: 100%; padding-left: 20px; max-height: 150px; overflow-y: auto; border: 1px solid #ccc; border-radius: 8px; padding-right: 10px;">
          <span style="margin-bottom: 10px;">Listado de archivos:</span>
          <ul style="margin: 0; padding: 0;">
            <li *ngFor="let url of urls; let i = index"
              style="margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;">
              <a [href]="url" target="_blank" style="word-break: break-word; flex: 1;">{{ url }}</a>
              <button class="btnDelete" type="button" (click)="deleteUrl(i)">
                <mat-icon>close</mat-icon>
              </button>
            </li>
          </ul>
        </div>


      </div>



    </div>
    <div class="NgxEditor__Wrapper" style="min-height: 200px; height: auto;">
      <ngx-editor-menu [editor]="editor" [toolbar]="toolbar" [colorPresets]="colorPresets"> </ngx-editor-menu>
      <ngx-editor placeholder="Escriba aquí..." [editor]="editor" formControlName="contenido"> </ngx-editor>
    </div>
  </form>




</mat-dialog-content>
<div class="align flex-row mt-20 pb-10">
  <div class="align-items">
    <button type="button" (click)="editCircular()" class="yellow">Ingresar<mat-icon class="icon"
        matSuffix>description</mat-icon></button>
  </div>
  <div class="align-items">
    <button class="orange" (click)="limpiar()">Limpiar <mat-icon class="icon" matSuffix>delete</mat-icon></button>
  </div>
  <div class="align-items">
    <button class="red" mat-dialog-close>Cerrar <mat-icon class="icon" matSuffix>cancel</mat-icon></button>
  </div>


</div>

<!-- -------------------------------------- -->