<kt-portlet>
	<kt-portlet-header [title]="'Solicitudes de servicio '" [class]="'kt-portlet__head--lg'">
		<div ktPortletTools class="d-flex">
			<button [routerLink]="(isNew)? ['../']: ['../../']"
					class="btn btn-primary kt-margin-r-10"
					[disabled]="isLoading"
					mat-raised-button matTooltip="Regresar">
				<i class="la la-arrow-left"></i>
				<span class="kt-hidden-mobile">Regresar</span>
			</button>
			<!--<button *ngxPermissionsOnly="(isNewUsuario)? 'web.usuarios.store' : 'web.usuarios.update'"-->
			<button class="btn btn-primary kt-margin-r-10" (click)="onSubmit()"
					[ngClass]="{'kt-spinner kt-spinner--right kt-spinner--md kt-spinner--light': isLoading}"
					[disabled]="isLoading"
					mat-raised-button matTooltip="{{(isNew) ? 'Guardar' : 'Actualizar'}} y salir">
				<i class="la la-save"></i>
				<span class="kt-hidden-mobile">{{(isNew) ? 'Guardar' : 'Actualizar'}}</span>
			</button>
		</div>

	</kt-portlet-header>

	<div class="div-principal-agendo">
		<div class="div-agendo" style="" *ngIf="!isNew">Agendó: <b>{{usuarioAgendo}}</b></div>
	</div>

	<kt-portlet-body>
		<mat-tab-group [(selectedIndex)]="selectedTab">
			<mat-tab>
				<ng-template mat-tab-label>
					Información básica
				</ng-template>
				<ng-template matTabContent>
					<div>
						<form [formGroup]="generalForm" class="kt-form kt-form--group-seperator-dashed">
							<div class="kt-form__section kt-form__section--first">
								<div class="form-group kt-form__group row">

									<div class="col-lg-6 kt-margin-bottom-20-mobile">
										<mat-form-field class="mat-form-field-fluid">
											<mat-select formControlName="cliente_id" placeholder="Cliente" (selectionChange)="getDomiciliosCliente()" required>
												<mat-option>
													<ngx-mat-select-search (keyup)="onKeyUp($event, 'client')" (keydown)="onKeyDown('client')" (ngModelChange)="clearSelect($event)" [clearSearchInput]="false" [searching]="isLoadingInputSearch" [noEntriesFoundLabel]="changeNoFoundLabel()" placeholderLabel="Buscar..." i18n-placeholderLabel></ngx-mat-select-search>
												</mat-option>
												<mat-option *ngFor="let filtro of filteredClients|async" [value]="filtro.id">
													{{filtro.denominacion}} {{(filtro.requiere_factura) ? '(Requiere factura)' : '(No requiere factura)'}}
												</mat-option>
											</mat-select>
											<mat-error *ngIf="isControlHasError('cliente_id', 'required')">
												El campo es <strong>requerido</strong>
											</mat-error>
										</mat-form-field>
									</div>

									<div class="col-lg-6 kt-margin-bottom-20-mobile">
										<mat-form-field class="mat-form-field-fluid">
											<mat-select formControlName="cliente_domicilio_id" placeholder="Domicilio de cliente" required>
												<mat-option [value]="domicilio_cliente" *ngFor="let domicilio_cliente of domiciliosCliente">
													{{domicilio_cliente.calle}}{{" #"}}{{domicilio_cliente.num_ext}}{{" "}}{{domicilio_cliente.colonia}} {{" C.P. "}}{{domicilio_cliente.cp}} {{"(" + domicilio_cliente.telefono + ")"}}
												</mat-option>
											</mat-select>
											<mat-error *ngIf="isControlHasError('cliente_domicilio_id', 'required')">
												El campo es <strong>requerido</strong>
											</mat-error>
										</mat-form-field>
									</div>

									<div class="col-lg-6 kt-margin-bottom-20-mobile mt-2">
										<mat-form-field class="mat-form-field-fluid">
											<mat-select formControlName="forma_pago_id" placeholder="Forma de pago" required>
												<mat-option>
													<ngx-mat-select-search (keyup)="onKeyUp($event, 'paymentMethod')" (keydown)="onKeyDown('forma_pago')" [clearSearchInput]="true" [searching]="isLoadingInputSearch" [noEntriesFoundLabel]="changeNoFoundLabel()" placeholderLabel="Buscar..." i18n-placeholderLabel></ngx-mat-select-search>
												</mat-option>
												<mat-option *ngFor="let filtro of filteredFormasPagos|async" [value]="filtro.id">
													{{filtro.nombre}}
												</mat-option>
											</mat-select>
											<mat-error *ngIf="isControlHasError('forma_pago_id', 'required')">
												El campo es <strong>requerido</strong>
											</mat-error>
										</mat-form-field>
									</div>

									<div class="col-lg-6 kt-margin-bottom-20-mobile mt-2">
										<mat-form-field class="mat-form-field-fluid">
											<mat-select formControlName="origen_id" placeholder="Orígenes" required>
												<mat-option>
													<ngx-mat-select-search (keyup)="onKeyUp($event, 'origins')" (keydown)="onKeyDown('origins')" [clearSearchInput]="false" [searching]="isLoadingInputSearch" [noEntriesFoundLabel]="changeNoFoundLabel()" placeholderLabel="Buscar..." i18n-placeholderLabel></ngx-mat-select-search>
												</mat-option>
												<mat-option *ngFor="let filtro of filteredOrigenes|async" [value]="filtro.id">
													{{filtro.nombre}}
												</mat-option>
											</mat-select>
											<mat-error *ngIf="isControlHasError('origen_id', 'required')">
												El campo es <strong>requerido</strong>
											</mat-error>
										</mat-form-field>
									</div>
								</div>

								<kt-portlet-header [title]="'Servicios'" [class]="'kt-portlet__head--lg'">
									<div ktPortletTools>
										<button type="button" class="btn btn-secondary" (click)="addServicio()" mat-raised-button matTooltip="Agregar servicio" *ngIf="isNew" [disabled]="camposServicios.length == 3">
											<i class="la la-plus"></i>
											<span class="kt-hidden-mobile">Agregar servicio</span>
										</button>
									</div>
								</kt-portlet-header>

								<div formArrayName="servicios">
									<div style="border: 2px dashed #ebedf2;" class="mt-4" *ngFor="let campo of camposServicios; let i = index;" [formGroupName]="i">
										<div class="form-group row p-4">

											<div style="text-align: right;" class="col-lg-12" *ngIf="camposServicios.length > 1 && isNew">
												<button type="button" (click)="deleteService(i)" class="btn-delete-service" mat-raised-button matTooltip="Eliminar servicio">
													<i class="la la-trash ic-trash" style="font-size: 1.8em; color: #E63C2D"></i>
												</button>
											</div>

											<div class="col-lg-6 kt-margin-bottom-20-mobile">
												<mat-form-field class="mat-form-field-fluid">
													<mat-select formControlName="servicio_id" placeholder="Servicios" required>
														<mat-option>
															<ngx-mat-select-search (keyup)="onKeyUpManual($event, 'service', i)" (keydown)="onKeyDown('service', i)" (ngModelChange)="clearSelect($event)" [clearSearchInput]="false" [searching]="isLoadingInputSearch" [noEntriesFoundLabel]="changeNoFoundLabel()" placeholderLabel="Buscar..." i18n-placeholderLabel></ngx-mat-select-search>
														</mat-option>
														<mat-option *ngFor="let filtro of filteredServices|async" [value]="filtro.id">
															{{filtro.nombre}}
														</mat-option>
													</mat-select>
													<mat-error *ngIf="isControlHasError('servicio_id', 'required')">
														El campo es <strong>requerido</strong>
													</mat-error>
												</mat-form-field>
											</div>

											<div class="col-lg-6 kt-margin-bottom-20-mobile">
												<mat-form-field class="mat-form-field-fluid">
													<mat-select formControlName="tipo_servicio_id" placeholder="Tipo de servicio" required>
														<mat-option [value]="tipo_servicio.id" *ngFor="let tipo_servicio of tipoServicios">
															{{tipo_servicio.nombre}}
														</mat-option>
													</mat-select>
													<mat-error *ngIf="isControlHasErrorArray('tipo_servicio_id', 'required', i)">
														El campo es <strong>requerido</strong>
													</mat-error>
												</mat-form-field>
											</div>

											<div class="col-lg-6 kt-margin-bottom-20-mobile mt-2">
												<mat-form-field class="mat-form-field-fluid">
													<mat-select formControlName="estatus_servicio_id" placeholder="Estados de servicio" required>
														<mat-option [value]="estatus_servicio.id" *ngFor="let estatus_servicio of estatusServicios" [disabled]="(!permiso_especial) ? estatus_servicio.id == 1 || estatus_servicio.id == 2 || estatus_servicio.id == 5 || estatus_servicio.id == 6 || estatus_servicio.id == 7 : null">
															{{estatus_servicio.nombre}}
														</mat-option>
													</mat-select>
													<mat-error *ngIf="isControlHasErrorArray('estatus_servicio_id', 'required', i)">
														El campo es <strong>requerido</strong>
													</mat-error>
												</mat-form-field>
											</div>

											<div class="col-lg-6 kt-margin-bottom-20-mobile mt-2">
												<mat-form-field class="mat-form-field-fluid">
													<span matPrefix>$ &nbsp;</span>
													<input matInput type="text" placeholder="Costo de servicio" formControlName="costo_servicio" maxlength="10" (keypress)="limitCurrency(i)" (keyup)="formatCurrency($event, i)" (blur)="formatCurrency($event, i,'blur')" required>
													<mat-error *ngIf="isControlHasErrorArray('costo_servicio','required', i)">
														El campo es <strong>requerido</strong>
													</mat-error>
													<mat-error *ngIf="isControlHasErrorArray('costo_servicio', 'pattern', i)">
														Sólo se aceptan <strong>números</strong>
													</mat-error>
												</mat-form-field>
											</div>

											<div class="col-lg-3 kt-margin-bottom-20-mobile mt-2">
												<mat-form-field class="mat-form-field-fluid">
													<mat-label>Fecha de solicitud</mat-label>
													<input matInput [matDatepicker]="picker" (click)="picker.open()"
														   formControlName="fecha_solicitud"
														   readonly (dateChange)="validarDisponibilidad(i)" required>
													<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
													<mat-datepicker #picker></mat-datepicker>
													<mat-error *ngIf="isControlHasErrorArray('fecha_solicitud', 'required', i)">
														El campo es <strong>requerido</strong>
													</mat-error>
												</mat-form-field>
											</div>

											<div class="col-lg-3 kt-margin-bottom-20-mobile mt-2">
												<mat-form-field class="mat-form-field-fluid">
													<mat-select formControlName="hora_solicitud" placeholder="Hora de solicitud" (selectionChange)="validarDisponibilidad(i)" required>
														<mat-option [value]="hora" *ngFor="let hora of horas">
															{{hora}}
														</mat-option>
													</mat-select>
													<mat-error *ngIf="isControlHasErrorArray('hora_solicitud', 'required', i)">
														El campo es <strong>requerido</strong>
													</mat-error>
												</mat-form-field>
											</div>

											<div class="col-lg-2 kt-margin-bottom-20-mobile mt-2">
												<mat-form-field class="mat-form-field-fluid">
													<input matInput type="text" placeholder="Duración en horas" formControlName="horas_duracion" maxlength="1" (ngModelChange)="validateDuracion(i)" (keypress)="numberOnly($event)">
													<span matSuffix>h &nbsp;</span>
													<mat-error *ngIf="isControlHasErrorArray('horas_duracion','required', i)">
														El campo es <strong>requerido</strong>
													</mat-error>
													<mat-error *ngIf="isControlHasErrorArray('horas_duracion', 'pattern', i)">
														Sólo se aceptan <strong>números</strong>
													</mat-error>
												</mat-form-field>
											</div>

											<div class="col-lg-2 kt-margin-bottom-20-mobile mt-2">
												<mat-form-field class="mat-form-field-fluid">
													<input matInput type="text" placeholder="Duración en minutos" formControlName="minutos_duracion" maxlength="2" (ngModelChange)="validateDuracion(i)" (keypress)="numberOnly($event)">
													<span matSuffix>m &nbsp;</span>
													<mat-error *ngIf="isControlHasErrorArray('minutos_duracion','required', i)">
														El campo es <strong>requerido</strong>
													</mat-error>
													<mat-error *ngIf="isControlHasErrorArray('minutos_duracion', 'pattern', i)">
														Sólo se aceptan <strong>números</strong>
													</mat-error>
												</mat-form-field>
											</div>

											<div class="col-lg-2 kt-margin-bottom-20-mobile mt-2">
												<div style="display: flex; flex-direction: row; align-items: center;">
													<button type="button" (click)="validarDisponibilidad(i)" class="btn-search" mat-raised-button matTooltip="Verificar disponibilidad" [disabled]="enableSearchBtn(i) || isLoadingDisponibilidad[i] || disableAll || disableCheckBtn">
														<i class="la la-search ic-search" style="font-size: 1.5em; color: #646c9a"></i>
													</button>
													<mat-spinner class="ml-4" [diameter]="25" *ngIf="isLoadingDisponibilidad[i]"></mat-spinner>
												</div>

											</div>

											<div class="col-lg-6 kt-margin-bottom-20-mobile mt-2">
												<mat-form-field class="mat-form-field-fluid">
													<mat-select formControlName="vehiculo_id" placeholder="Vehículo" required>
														<mat-option>
															<ngx-mat-select-search (keyup)="onKeyUpManual($event, 'vehicle', i)" (keydown)="onKeyDown('vehicle', i)" (ngModelChange)="clearSelect($event)" [clearSearchInput]="false" [hideClearSearchButton]="true" [searching]="isLoadingInputSearch" [noEntriesFoundLabel]="changeNoFoundLabel()" placeholderLabel="Buscar..." i18n-placeholderLabel></ngx-mat-select-search>
														</mat-option>
														<mat-option *ngFor="let filtro of filteredVehiculos[i]|async" [value]="filtro.id" [disabled]="filtro.isDisable" [ngStyle]="{'background-color': filtro.isDisable ? '#E63C2D' : 'white', 'color': filtro.isDisable ? 'white' : 'black'}">
															{{filtro.num_economico}}
														</mat-option>
													</mat-select>
													<mat-error *ngIf="isControlHasErrorArray('vehiculo_id', 'required', i)">
														El campo es <strong>requerido</strong>
													</mat-error>
												</mat-form-field>
											</div>

											<div class="col-lg-6 kt-margin-bottom-20-mobile mt-2">
												<mat-form-field class="mat-form-field-fluid">
													<mat-select formControlName="operador_id" placeholder="Asesor de operaciones" required>
														<mat-option>
															<ngx-mat-select-search (keyup)="onKeyUpManual($event, 'consultant', i)" (keydown)="onKeyDown('consultant', i)" (ngModelChange)="clearSelect($event)" [clearSearchInput]="false" [hideClearSearchButton]="true" [searching]="isLoadingInputSearch" [noEntriesFoundLabel]="changeNoFoundLabel()" placeholderLabel="Buscar..." i18n-placeholderLabel></ngx-mat-select-search>
														</mat-option>
														<mat-option *ngFor="let filtro of filteredAsesores[i]|async" [value]="filtro.id" [disabled]="filtro.isDisable" [ngStyle]="{'background-color': filtro.isDisable ? '#E63C2D' : 'white', 'color': filtro.isDisable ? 'white' : 'black'}">
															{{filtro.nombre}} {{filtro.apellido_paterno}} {{filtro.apellido_materno}}
														</mat-option>
													</mat-select>
													<mat-error *ngIf="isControlHasErrorArray('operador_id', 'required', i)">
														El campo es <strong>requerido</strong>
													</mat-error>
												</mat-form-field>
											</div>

											<div class="col-lg-6 kt-margin-bottom-20-mobile mt-2">
												<span style="color: #505050; font-size: 1.1em">Auxiliar de operaciones</span>

												<button type="button" (click)="addAuxiliar(i)" class="btn-search ml-3" mat-raised-button matTooltip="Agregar Auxiliar de operaciones" [disabled]="isDisableAuxiliarButton(i) || isLoadingDisponibilidad[i]">
													<i class="la la-plus ic-search" style="font-size: 1.3em; color: #646c9a"></i>
												</button>
												<div *ngFor="let aux of auxiliaresIds; let a = index;">
													<div style="display: flex; flex-direction: row; align-items: center" *ngIf="isDisableAuxiliar(aux, i)">
														<mat-form-field class="mat-form-field-fluid mt-2 w-100">
															<mat-select formControlName="{{aux}}" placeholder="Auxiliar de operaciones">
																<mat-option>
																	<ngx-mat-select-search (keyup)="onKeyUpManual($event, 'auxiliar', i, aux)" (keydown)="onKeyDown('auxiliar', i)" (ngModelChange)="clearSelect($event)" [clearSearchInput]="false" [hideClearSearchButton]="true" [searching]="isLoadingInputSearch" [noEntriesFoundLabel]="changeNoFoundLabel()" placeholderLabel="Buscar..." i18n-placeholderLabel></ngx-mat-select-search>
																</mat-option>
																<mat-option *ngFor="let filtro of getAuxiliares(aux, i)|async" [value]="filtro.id" [disabled]="filtro.isDisable" [ngStyle]="{'background-color': filtro.isDisable ? '#E63C2D' : '#ffffff', 'color': filtro.isDisable ? 'white' : 'black'}">
																	{{filtro.nombre}} {{filtro.apellido_paterno}} {{filtro.apellido_materno}}
																</mat-option>
															</mat-select>
															<mat-error *ngIf="isControlHasErrorArray('auxiliar_1', 'required', i)">
																El campo es <strong>requerido</strong>
															</mat-error>
														</mat-form-field>

														<button type="button" (click)="deleteAuxiliar(aux, i)" class="btn-delete-auxiliar ml-4" mat-raised-button matTooltip="Eliminar auxiliar de operaciones">
															<i class="la la-trash ic-trash" style="font-size: 1.8em; color: #E63C2D"></i>
														</button>
													</div>
												</div>
											</div>

											<div class="col-lg-12 kt-margin-bottom-20-mobile mt-2">
												<mat-form-field class="mat-form-field-fluid">
													<textarea matInput rows="7" type="text" placeholder="Observaciones" formControlName="observacion_atencion_cliente" maxlength="700"></textarea>
												</mat-form-field>
											</div>

											<div class="col-lg-4 kt-margin-bottom-20-mobile mt-2">
												<mat-form-field class="mat-form-field-fluid">
													<mat-select formControlName="definido_cliente" placeholder="¿Definió cliente?" required>
														<mat-option [value]="respuesta.value" *ngFor="let respuesta of respuestasSiNo">
															{{respuesta.name}}
														</mat-option>
													</mat-select>
													<mat-error *ngIf="isControlHasErrorArray('definido_cliente', 'required', i)">
														El campo es <strong>requerido</strong>
													</mat-error>
												</mat-form-field>
											</div>

											<div class="col-lg-4 kt-margin-bottom-20-mobile mt-2">
												<mat-form-field class="mat-form-field-fluid">
													<mat-select formControlName="requiere_encuesta" placeholder="¿Requiere encuesta de satisfacción?" required>
														<mat-option [value]="respuesta.value" *ngFor="let respuesta of respuestasSiNo">
															{{respuesta.name}}
														</mat-option>
													</mat-select>
													<mat-error *ngIf="isControlHasErrorArray('requiere_encuesta', 'required', i)">
														El campo es <strong>requerido</strong>
													</mat-error>
												</mat-form-field>
											</div>

											<div class="col-lg-4 kt-margin-bottom-20-mobile mt-2">
												<mat-form-field class="mat-form-field-fluid">
													<mat-select formControlName="facturado" placeholder="¿Facturado?" required>
														<mat-option [value]="respuesta.value" *ngFor="let respuesta of respuestasSiNo">
															{{respuesta.name}}
														</mat-option>
													</mat-select>
													<mat-error *ngIf="isControlHasErrorArray('facturado', 'required', i)">
														El campo es <strong>requerido</strong>
													</mat-error>
												</mat-form-field>
											</div>
										</div>
									</div>
								</div>
							</div>
						</form>
					</div>
				</ng-template>
			</mat-tab>

			<mat-tab *ngIf="!isNew">
				<ng-template mat-tab-label>
					<mat-icon class="mr-2">history</mat-icon>
					Historial de Cambios
				</ng-template>
				<ng-template matTabContent>
					<kt-historial-cambios [servicioDetId]="servicioDetId"></kt-historial-cambios>
				</ng-template>
			</mat-tab>
		</mat-tab-group>
	</kt-portlet-body>
</kt-portlet>
