<div class="close ">
  <button class="cerrar-b cursor-pointer" mat-dialog-close><mat-icon>close</mat-icon></button>
</div>

<span class="center">Registrar Circular</span>
<!-- --------------------------------------------------------------------------------- -->
<!-- form -->

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

  <form (ngSubmit)="crearCircular()" [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>
              <mat-form-field class="w-responsive">
                <mat-label>Desde</mat-label>
                <input matInput [matDatepicker]="pickerStart" [min]="todayDate" name="fechaInicio" id="fechaInicio"
                  formControlName="fechaInicio">
                <!-- <mat-hint>MM/DD/YYYY</mat-hint> -->
                <mat-datepicker-toggle matIconSuffix [for]="pickerStart"></mat-datepicker-toggle>
                <mat-datepicker #pickerStart></mat-datepicker>
              </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-form-field>
            </div>
          </div>
          <div class="flex-col ml-20">
            <label for="fechaInicio">Fecha Final</label>
            <div>
              <mat-form-field class="w-responsive">
                <mat-label>Desde</mat-label>
                <input matInput [matDatepicker]="pickerStart1" [min]="todayDate" name="fechaCaducidad"
                  id="fechaCaducidad" formControlName="fechaCaducidad">
                <!-- <mat-hint>MM/DD/YYYY</mat-hint> -->
                <mat-datepicker-toggle matIconSuffix [for]="pickerStart1"></mat-datepicker-toggle>
                <mat-datepicker #pickerStart1></mat-datepicker>
              </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-form-field>
            </div>

          </div>
        </div>

      </div>



      <div class="item flex-col">

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


        <div class="file-upload">

          {{archivosData.length>0? 'Max. 3 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="archivosData.length > 0">
          <ul>
            <li *ngFor="let archivo of archivosData; let i = index">
              {{ archivo.nombre }} ({{ archivo.tamanio }} kb)
              <button type="button" (click)="deleteIndex(i)"
                style="cursor: pointer;border: none; background-color: red; color:white; border-radius: 5px;">Borrar</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>


    </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)="crearCircular()" 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>


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