<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="input-group d-flex mt-3">
					<div class="col-md-6 kt-margin-bottom-10-mobile">
						<mat-form-field class="w-100">
							<mat-label>Fecha inicial</mat-label>
							<input matInput [matDatepicker]="f_i" (dateChange)="dateChanged(f_f)" formControlName="fecha_inicio" readonly>
							<mat-datepicker-toggle matSuffix [for]="f_i"></mat-datepicker-toggle>
							<mat-datepicker #f_i disabled="false"></mat-datepicker>
							<mat-hint align="start">
								<strong>Fecha inicial</strong>
							</mat-hint>
						</mat-form-field>
					</div>

					<div class="col-md-6 kt-margin-bottom-10-mobile">
						<mat-form-field class="w-100">
							<mat-label>Fecha final</mat-label>
							<input matInput [matDatepicker]="f_f" (dateChange)="dateChanged(null)" formControlName="fecha_final" [min]="startDate" readonly>
							<mat-datepicker-toggle matSuffix [for]="f_f"></mat-datepicker-toggle>
							<mat-datepicker #f_f disabled="false"></mat-datepicker>
							<mat-hint align="start">
								<strong>Fecha final</strong>
							</mat-hint>
						</mat-form-field>
					</div>
				</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="usuario_id">
							<mat-option *ngFor="let filtro of usuarios" [value]="filtro.id">({{filtro.servicios_cantidad}} servicios) {{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>
