<mat-card class="card-normal-form mat-elevation-z8 animated fadeIn fast">
  <mat-grid-list cols="12" rowHeight="80px">
    <mat-grid-tile colspan="12">
      <mat-card-title>Datos Personales</mat-card-title>
    </mat-grid-tile>

    <form [formGroup]="formGroup" (ngSubmit)="openDialog()">
      <mat-grid-tile colspan="4">
        <mat-form-field appearance="standard">
          <mat-label>Nombre(s)</mat-label>
          <input
            matInput
            placeholder="Ingrese el nombre"
            formControlName="nombre"
            required
          />
          <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
          <mat-error *ngIf="nombre!.invalid"
            >{{
              nombre!.hasError("required") ? "Debe ingresar este campo" : ""
            }}
          </mat-error>
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="4">
        <mat-form-field appearance="standard">
          <mat-label>Apellido Paterno</mat-label>
          <input
            matInput
            placeholder="Ingrese el apellido paterno"
            formControlName="ape_p"
            required
          />
          <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
          <mat-error *ngIf="ape_p!.invalid"
            >{{ ape_p!.hasError("required") ? "Debe ingresar este campo" : "" }}
          </mat-error>
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="4">
        <mat-form-field appearance="standard">
          <mat-label>Apellido Materno</mat-label>
          <input
            matInput
            placeholder="Ingrese el apellido materno"
            formControlName="ape_m"
          />
          <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="4">
        <mat-form-field appearance="standard">
          <mat-label>Correo Electrónico</mat-label>
          <input
            matInput
            placeholder="Ingrese el correo electrónico"
            formControlName="email"
            required
          />
          <mat-icon matSuffix>email</mat-icon>
          <mat-error *ngIf="email!.invalid"
            >{{
              email!.hasError("email") || email!.hasError("required")
                ? "El correo electrónico no es válido"
                : ""
            }}
          </mat-error>
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile
        colspan="4"
        *ngIf="titulo != 'Modificar'"
      >
        <mat-form-field hintLabel="Mínimo 8 caracteres" appearance="standard">
          <mat-label>Contraseña</mat-label>
          <input
            matInput
            [type]="hide1 ? 'password' : 'text'"
            placeholder="Ingrese la contraseña"
            pattern="^(?=(?:.*\d){1})(?=(?:.*[a-z]){1})(?=(?:.*[A-Z]){1})(?=(?:.*[ñÑ\-_^¿.#¡!@$&+=*]){1})\S{8,20}$"
            formControlName="password"
            autocomplete="on"
            required
          />

          <a
            class="mat-form-field"
            mat-icon-button
            matSuffix
            (click)="hide1 = !hide1"
            [attr.aria-label]="'Hide password'"
            [attr.aria-pressed]="hide1"
          >
            <mat-icon>{{ hide1 ? "visibility_off" : "visibility" }}</mat-icon>
          </a>
          <mat-hint align="end"
            ><a class="generarContrasena" (click)="generatePassword()"
              ><b>Generar Contraseña</b></a
            ></mat-hint
          >
          <mat-error *ngIf="password!.invalid">
            {{
              password!.hasError("minlength")
                ? "Mínimo 8 caracteres"
                : "Debe tener al menos una minúscula,
            mayúscula, un dígito y un caracter especial"
            }}
          </mat-error>
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile
        colspan="4"
        *ngIf="titulo != 'Modificar'"
      >
        <mat-form-field hintLabel="Mínimo 8 caracteres" appearance="standard">
          <mat-label>Repita Contraseña</mat-label>
          <input
            matInput
            [type]="hide2 ? 'password' : 'text'"
            placeholder="Repita la contraseña"
            autocomplete="on"
            pattern="^(?=(?:.*\d){1})(?=(?:.*[a-z]){1})(?=(?:.*[A-Z]){1})(?=(?:.*[ñÑ\-_^¿.#¡!@$&+=*]){1})\S{8,20}$"
            formControlName="password_confirmation"
            required
          />
          <a
            class="mat-form-field"
            mat-icon-button
            matSuffix
            (click)="hide2 = !hide2"
            [attr.aria-label]="'Hide password'"
            [attr.aria-pressed]="hide1"
          >
            <mat-icon>{{ hide2 ? "visibility_off" : "visibility" }}</mat-icon>
          </a>

          <mat-error *ngIf="password_confirmation!.invalid">
            {{
              password_confirmation!.hasError("minlength")
                ? "Mínimo 8 caracteres"
                : "Debe tener al menos una minúscula,
            mayúscula, un dígito y un caracter especial"
            }}
          </mat-error>
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="4">
        <mat-form-field appearance="standard">
          <mat-label>R.F.C</mat-label>
          <input
            matInput
            placeholder="Ingrese el RFC personal"
            formControlName="rfc_usuario"
            maxlength="13"
            required
          />
          <mat-icon matSuffix>badge</mat-icon>
          <mat-error *ngIf="rfc_usuario!.invalid"
            >{{
              rfc_usuario!.hasError("required")
                ? "Debe ingresar este campo"
                : "Ingrese un R.F.C valido"
            }}
          </mat-error>
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="12">
        <mat-card-title>Datos de la Empresa</mat-card-title>
      </mat-grid-tile>

      <mat-grid-tile colspan="4" *ngIf="titulo != 'Modificar'">
        <mat-form-field appearance="standard">
          <mat-label>Número de Empleado</mat-label>
          <input
            matInput
            placeholder="Ingrese el número de empleado"
            formControlName="numero_empleado"
            required
          />
          <mat-icon matSuffix>tag</mat-icon>
          <mat-error *ngIf="numero_empleado!.invalid"
            >{{
              numero_empleado!.hasError("required")
                ? "Debe ingresar este campo"
                : ""
            }}
          </mat-error>
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="4">
        <mat-form-field appearance="standard">
          <mat-label>ID del Empleado</mat-label>
          <input
            matInput
            placeholder="Ingrese el número de empleado"
            formControlName="id_usuario"
            required
          />
          <mat-icon matSuffix>tag</mat-icon>
          <mat-error *ngIf="id_usuario!.invalid"
            >{{
              id_usuario!.hasError("required") ? "Debe ingresar este campo" : ""
            }}
          </mat-error>
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="4">
        <mat-form-field appearance="standard">
          <mat-label>Unidades de Negocio</mat-label>
          <mat-select formControlName="rfc_unidad_negocio">
            <mat-option *ngFor="let item of unidades_negocio" [value]="item">
              {{ item.NOMBREUNIDAD }} ( {{ item.RFCUNIDAD }} )
            </mat-option>
          </mat-select>
          <mat-icon matSuffix>business</mat-icon>
          <mat-error *ngIf="rfc_unidad_negocio!.invalid"
            >{{
              rfc_unidad_negocio!.hasError("required")
                ? "Debe ingresar este campo"
                : ""
            }}
          </mat-error>
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="4">
        <mat-form-field appearance="standard">
          <mat-label>Perfil</mat-label>
          <mat-select formControlName="tipo_usuario">
            <mat-option *ngFor="let item of perfiles" [value]="item">
              {{ item.perfil }}
            </mat-option>
          </mat-select>
          <mat-icon matSuffix>account_circle</mat-icon>
          <mat-error *ngIf="tipo_usuario!.invalid"
            >{{
              tipo_usuario!.hasError("required")
                ? "Debe ingresar este campo"
                : ""
            }}
          </mat-error>
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="4">
        <mat-form-field appearance="standard">
          <mat-label>Política</mat-label>
          <mat-select formControlName="politica">
            <mat-option *ngFor="let item of politicas" [value]="item"
              >{{ item.NOMBREPOLITICA }}
            </mat-option>
          </mat-select>
          <mat-icon matSuffix>receipt_long</mat-icon>
          <mat-error *ngIf="politica!.invalid"
            >{{
              politica!.hasError("required") ? "Debe ingresar este campo" : ""
            }}
          </mat-error>
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="4">
        <mat-form-field appearance="standard">
          <mat-label>Turno</mat-label>
          <mat-select formControlName="turno">
            <mat-option *ngFor="let item of turnos" [value]="item">{{
              item.turno
            }}</mat-option>
          </mat-select>
          <mat-icon matSuffix>perm_contact_calendar</mat-icon>
          <mat-error *ngIf="turno!.invalid">{{
            turno!.hasError("required") ? "Debe ingresar este campo" : ""
          }}</mat-error>
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="4">
        <mat-form-field appearance="standard">
          <mat-label>Fecha de Ingreso</mat-label>
          <input
            matInput
            placeholder="Ingrese la fecha de ingreso →"
            formControlName="fecha_ingreso_laboral"
            [matDatepicker]="picker"
            [value]="fecha_ingreso_laboral"
          />
          <mat-datepicker-toggle
            matSuffix
            [for]="picker"
          ></mat-datepicker-toggle>
          <mat-datepicker #picker></mat-datepicker>
          <mat-error *ngIf="fecha_ingreso_laboral!.invalid"
            >{{
              fecha_ingreso_laboral!.hasError("required")
                ? "Debe ingresar este campo"
                : ""
            }}
          </mat-error>
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="12" *ngIf="titulo != 'Modificar'">
        <mat-card-title>Organigrama</mat-card-title>
      </mat-grid-tile>

      <mat-grid-tile colspan="6" *ngIf="titulo != 'Modificar'">
        <mat-form-field hintLabel="Seleccione un usuario" appearance="standard">
          <mat-label>Jefe Directo</mat-label>
          <mat-select formControlName="id_jefe_directo">
            <mat-option *ngFor="let item of usuarios_menos" [value]="item">
              {{ item.NOMBRE }} ({{ item.IDUSUARIO }})
            </mat-option>
          </mat-select>
          <mat-icon matSuffix>perm_contact_calendar</mat-icon>
          <mat-error *ngIf="id_jefe_directo!.invalid"
            >{{
              id_jefe_directo!.hasError("required")
                ? "Debe seleccionar este campo"
                : ""
            }}
          </mat-error>
        </mat-form-field>
      </mat-grid-tile>
      <mat-grid-tile colspan="6" *ngIf="titulo != 'Modificar'">
        <mat-form-field hintLabel="Seleccione un usuario" appearance="standard">
          <mat-label>Jefe Sustituto</mat-label>
          <mat-select formControlName="id_jefe_sustituto">
            <mat-option *ngFor="let item of usuarios_menos" [value]="item">
              {{ item.NOMBRE }} ({{ item.IDUSUARIO }})
            </mat-option>
          </mat-select>
          <mat-icon matSuffix>perm_contact_calendar</mat-icon>
          <mat-error *ngIf="id_jefe_sustituto!.invalid"
            >{{
              id_jefe_sustituto!.hasError("required")
                ? "Debe seleccionar este campo"
                : ""
            }}
          </mat-error>
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="12">
        <a
          mat-raised-button
          [routerLink]="['/admin/mcomau']"
          class="mr-3"
          color="warn"
        >
          Cerrar
        </a>
        <button
          mat-raised-button
          class="mr-3 secondary"
          [disabled]="
            formGroup.invalid || password?.value != password_confirmation?.value
          "
        >
          Confirmar
        </button>
      </mat-grid-tile>
    </form>
  </mat-grid-list>
</mat-card>
