<div mat-dialog-title class="c-titulo">
	<div>
		<button mat-button class="close-icon" [mat-dialog-close]="false" style="color: white">
			<mat-icon>close</mat-icon>
		</button>
	</div>
</div>

<div>
	<form [formGroup]="form" autocomplete="off">
		<div class="c-modal">
			<span class="span-titulo">Filtros</span>
		</div>

		<div class="row align-items-center d-flex pl-4 w-100">
			<div class="input-group d-flex">
				<div class="col-md-12 kt-margin-bottom-10-mobile mt-3">
					<mat-form-field class="w-100">
						<mat-select placeholder="Seleccione sucursal" formControlName="sucursal" (selectionChange)="getUsers()">
							<mat-option *ngFor="let filtro of sucursales" [value]="filtro.id">{{filtro.nombre}}</mat-option>
						</mat-select>
						<mat-hint align="start">
							<strong>Sucursal</strong>
						</mat-hint>
					</mat-form-field>
				</div>

				<div class="col-md-12 kt-margin-bottom-10-mobile mt-3">
					<mat-form-field class="w-100">
						<mat-select placeholder="Seleccione mes" formControlName="mes" (selectionChange)="getUsers()">
							<mat-option *ngFor="let filtro of months" [value]="filtro.id">{{filtro.nombre}}</mat-option>
						</mat-select>
						<mat-hint align="start">
							<strong>Mes</strong>
						</mat-hint>
					</mat-form-field>
				</div>

				<div class="col-md-12 kt-margin-bottom-10-mobile mt-3">
					<mat-form-field class="w-100">
						<mat-select placeholder="Seleccione año" formControlName="year" (selectionChange)="getUsers()">
							<mat-option *ngFor="let filtro of years" [value]="filtro.id">{{filtro.nombre}}</mat-option>
						</mat-select>
						<mat-hint align="start">
							<strong>Año</strong>
						</mat-hint>
					</mat-form-field>
				</div>

				<div class="col-md-12 kt-margin-bottom-10-mobile mt-3">
					<mat-form-field class="w-100">
						<mat-select placeholder="Seleccione usuario" formControlName="operador_id">
							<mat-option *ngFor="let filtro of usuarios" [value]="filtro.id">({{filtro.servicios_cantidad}}) {{filtro.nombre}} {{filtro.apellido_paterno}} {{filtro.apellido_materno}} - {{filtro.tipo_empleado}}</mat-option>
						</mat-select>
						<mat-hint align="start">
							<strong>Usuarios</strong>
						</mat-hint>
					</mat-form-field>
				</div>
			</div>
		</div>

		<div class="c-modal mt-4 pb-4">
			<button mat-flat-button [ngClass]="{'kt-spinner kt-spinner--right kt-spinner--md kt-spinner--dark': loading}" type="button" class="button-filled" style="text-wrap: normal"
					(click)="setFilters()" [disabled]="loading || form.invalid">
				<span>Aceptar</span>
				<i class="fas fa-check ml-2"></i>
			</button>
		</div>
	</form>
</div>
