<kt-portlet>
	<kt-portlet-header [title]="(isNewCliente)? 'Crear nuevo cliente' : 'Editar cliente'"
					   [class]="'kt-portlet__head--lg'">
		<div ktPortletTools class="d-flex">
			<button [routerLink]="(isNewCliente)? ['../']: ['../../']"
					class="btn btn-primary kt-margin-r-10"
					[disabled]="loading"
					mat-raised-button matTooltip="Regresar">
				<i class="la la-arrow-left"></i>
				<span class="kt-hidden-mobile">Regresar</span>
			</button>
			<!--<button *ngxPermissionsOnly="(isNewCliente)? 'administrador.clientes.store' : 'administrador.clientes.update'"-->
			<button class="btn btn-primary kt-margin-r-10" (click)="onSubmit()"
					[ngClass]="{'kt-spinner kt-spinner--right kt-spinner--md kt-spinner--light': loading}"
					[disabled]="loading"
					mat-raised-button matTooltip="{{(isNewCliente) ? 'Guardar' : 'Actualizar'}} y salir">
				<i class="la la-save"></i>
				<span class="kt-hidden-mobile">{{(isNewCliente) ? 'Guardar' : 'Actualizar'}}</span>
			</button>
		</div>
	</kt-portlet-header>

	<kt-portlet-body>
		<mat-tab-group [(selectedIndex)]="selectedTab">
			<mat-tab>
				<ng-template mat-tab-label>
					<!--i class="mat-tab-label-icon fa fa-building"></i--> Información básica
				</ng-template>
				<ng-template matTabContent>
					<!--begin::Form-->
					<!--<div *ngxPermissionsOnly="'administrador.clientes.show'">-->
					<div>
						<div class="mat-table__bottom justify-content-center" *ngIf="isLoading">
							<mat-spinner [diameter]="25"></mat-spinner>
							<div class="mat-table__message ml-3">
								Espera un momento....
							</div>
						</div>
						<form [formGroup]="clientesForm" class="kt-form kt-form--group-seperator-dashed" [hidden]="isLoading">
							<div class="kt-form__section kt-form__section--first">
								<div class="form-group kt-form__group row">
									<div class="col-lg-3 kt-margin-bottom-20-mobile">
										<mat-form-field class="mat-form-field-fluid">
											<mat-select formControlName="asesor_id" placeholder="Asesor">
												<mat-option>
													<ngx-mat-select-search (keyup)="onKeyUpManual($event, 'asesor')"  (keydown)="onKeyDown('asesor')" [noEntriesFoundLabel]="changeNoFoundLabel()" placeholderLabel="Buscar..." i18n-placeholderLabel formControlName="searchAsesor" [noEntriesFoundLabel]="changeNoFoundLabel()"></ngx-mat-select-search>
												</mat-option>
												<mat-option *ngFor="let asesor of filteredAsesores|async" [value]="asesor.id">
													{{asesor.nombre + ' ' + asesor.apellido_paterno + ' ' + asesor.apellido_materno}}
												</mat-option>
											</mat-select>
											<mat-error *ngIf="isControlHasError('asesor', 'required')">
												El campo es <strong>requerido</strong>
											</mat-error>
										</mat-form-field>
									</div>
									<div class="col-lg-3 kt-margin-bottom-20-mobile">
										  <mat-form-field class="mat-form-field-fluid">
											<mat-select formControlName="sucursal_id" placeholder="Sucursal">
												<mat-option>
													<ngx-mat-select-search (keyup)="onKeyUpManual($event, 'sucursal')"  (keydown)="onKeyDown('sucursal')" [noEntriesFoundLabel]="changeNoFoundLabel()" placeholderLabel="Buscar..." i18n-placeholderLabel formControlName="searchSucursal" [noEntriesFoundLabel]="changeNoFoundLabel()"></ngx-mat-select-search>
												</mat-option>
												<mat-option *ngFor="let sucursal of filteredSucursales|async" [value]="sucursal.id">
													{{sucursal.nombre}}
												</mat-option>
											</mat-select>
											<mat-error *ngIf="isControlHasError('sucursal', 'required')">
												El campo es <strong>requerido</strong>
											</mat-error>
										</mat-form-field>
									</div>
								</div>

								<div class="form-group kt-form__group row">
									<div class="col-lg-4 kt-margin-bottom-20-mobile">
										<mat-form-field class="mat-form-field-fluid">
											<input matInput type="text" placeholder="Nombre/Denominación" formControlName="denominacion" required>
											<mat-hint *ngIf="isControlValid('denominacion')">Por favor introduce el
												<strong>nombre</strong>
											</mat-hint>
											<mat-hint *ngIf="!isControlValid('denominacion')">
												<strong>Datos correctos</strong>
											</mat-hint>
											<mat-error *ngIf="isControlHasError('denominacion','required')">
												El campo es <strong>requerido</strong>
											</mat-error>
											<mat-error *ngIf="isControlHasError('denominacion','maxlength')">
												Debe contener máximo <strong>128</strong> caracteres
											</mat-error>
										</mat-form-field>
									</div>

									<div class="col-lg-4 kt-margin-bottom-20-mobile">
										<mat-form-field class="mat-form-field-fluid">
											<input matInput type="text" placeholder="Correo electrónico" formControlName="email">
											<mat-hint *ngIf="isControlValid('email')">Por favor introduce el
												<strong>el correo electrónico</strong>
											</mat-hint>
											<mat-hint *ngIf="!isControlValid('email')">
												<strong>Datos correctos</strong>
											</mat-hint>
											<mat-error *ngIf="isControlHasError('email')">
												El campo es <strong>requerido</strong>
											</mat-error>
											<mat-error *ngIf="isControlHasError('email','maxlength')">
												Debe contener máximo <strong>128</strong> caracteres
											</mat-error>
											<mat-error *ngIf="isControlHasError('email','email')">
												<strong>Correo inválido, ej. correo@mail.com</strong>
											</mat-error>
										</mat-form-field>
									</div>
								</div>

							</div>


							<div class="kt-form__section kt-form__section--second">
								<div class="form-group kt-form__group row">
									<div class="col-lg-4 kt-margin-bottom-20-mobile">
										<label>¿Requiere factura? </label>
										<br>
										<mat-radio-group aria-label="Selecciona una opción" (change)="selectionChange($event)" formControlName="requiere_factura">
											<mat-radio-button [value]="0">No</mat-radio-button>
											<mat-radio-button [value]="1">Si</mat-radio-button>
										</mat-radio-group>
									</div>
								</div>
							</div>

							<div class="kt-form__section kt-form__section--third" *ngIf="req_factura == true" [formGroup]="datosFiscalesForm" ([ngModel])="datos_fiscales">
								<div class="form-group kt-form__group row">
									<div class="col-lg-4 kt-margin-bottom-20-mobile">
										<mat-form-field class="mat-form-field-fluid">
											<input matInput type="text" placeholder="Razón Social" formControlName="razon_social" required>
											<mat-hint *ngIf="isControlValid('razon_social')">Por favor introduce el
												<strong>razón social</strong>
											</mat-hint>
											<mat-hint *ngIf="!isControlValid('razon_social')">
												<strong>Datos correctos</strong>
											</mat-hint>
											<mat-error *ngIf="isControlHasError('razon_social','required')">
												El campo es <strong>requerido</strong>
											</mat-error>
											<mat-error *ngIf="isControlHasError('razon_social','maxlength')">
												Debe contener máximo <strong>128</strong> caracteres
											</mat-error>
										</mat-form-field>
									</div>

									<div class="col-lg-4 kt-margin-bottom-20-mobile">
										<mat-form-field class="mat-form-field-fluid">
											<input matInput type="text" placeholder="RFC" formControlName="rfc" required>
											<mat-hint *ngIf="isControlValid('rfc')">Por favor introduce el
												<strong>rfc</strong>
											</mat-hint>
											<mat-hint *ngIf="!isControlValid('rfc')">
												<strong>Datos correctos</strong>
											</mat-hint>
											<mat-error *ngIf="isControlHasError('rfc','required')">
												El campo es <strong>requerido</strong>
											</mat-error>
											<mat-error *ngIf="isControlHasError('rfc','maxlength')">
												Debe contener máximo <strong>128</strong> caracteres
											</mat-error>
										</mat-form-field>
									</div>
								</div>

								<div class="form-group kt-form__group row">
									<div class="col-lg-4 kt-margin-bottom-20-mobile">
										<mat-form-field class="mat-form-field-fluid">
											<input matInput type="text" placeholder="Correo electrónico" formControlName="email">
											<mat-hint *ngIf="isControlValid('email')">Por favor introduce el
												<strong>el correo electrónico</strong>
											</mat-hint>
											<mat-hint *ngIf="!isControlValid('email')">
												<strong>Datos correctos</strong>
											</mat-hint>
											<mat-error *ngIf="isControlHasError('email')">
												El campo es <strong>requerido</strong>
											</mat-error>
											<mat-error *ngIf="isControlHasError('email','maxlength')">
												Debe contener máximo <strong>128</strong> caracteres
											</mat-error>
											<mat-error *ngIf="isControlHasError('email','email')">
												<strong>Correo inválido, ej. correo@mail.com</strong>
											</mat-error>
										</mat-form-field>
									</div>
								</div>

								<div class="form-group kt-form__group row">
									<div class="col-lg-4 kt-margin-bottom-20-mobile">
										<mat-form-field class="mat-form-field-fluid">
											<input matInput type="text" placeholder="Calle" formControlName="calle" required>
											<mat-hint *ngIf="isControlValid('calle')">Por favor introduce el
												<strong>calle</strong>
											</mat-hint>
											<mat-hint *ngIf="!isControlValid('calle')">
												<strong>Datos correctos</strong>
											</mat-hint>
											<mat-error *ngIf="isControlHasError('calle','required')">
												El campo es <strong>requerido</strong>
											</mat-error>
											<mat-error *ngIf="isControlHasError('calle','maxlength')">
												Debe contener máximo <strong>128</strong> caracteres
											</mat-error>
										</mat-form-field>
									</div>

									<div class="col-lg-4 kt-margin-bottom-20-mobile">
										<mat-form-field class="mat-form-field-fluid">
											<input matInput type="text" placeholder="Número Exterior" formControlName="num_ext" required>
											<mat-hint *ngIf="isControlValid('num_ext')">Por favor introduce el
												<strong>número exterior</strong>
											</mat-hint>
											<mat-hint *ngIf="!isControlValid('num_ext')">
												<strong>Datos correctos</strong>
											</mat-hint>
											<mat-error *ngIf="isControlHasError('num_ext','required')">
												El campo es <strong>requerido</strong>
											</mat-error>
											<mat-error *ngIf="isControlHasError('num_ext','maxlength')">
												Debe contener máximo <strong>128</strong> caracteres
											</mat-error>
										</mat-form-field>
									</div>

									<div class="col-lg-4 kt-margin-bottom-20-mobile">
										<mat-form-field class="mat-form-field-fluid">
											<input matInput type="text" placeholder="Número Interior" formControlName="num_int" required>
											<mat-hint *ngIf="isControlValid('num_int')">Por favor introduce el
												<strong>número interior</strong>
											</mat-hint>
											<mat-hint *ngIf="!isControlValid('num_int')">
												<strong>Datos correctos</strong>
											</mat-hint>
											<mat-error *ngIf="isControlHasError('num_int','required')">
												El campo es <strong>requerido</strong>
											</mat-error>
											<mat-error *ngIf="isControlHasError('num_int','maxlength')">
												Debe contener máximo <strong>128</strong> caracteres
											</mat-error>
										</mat-form-field>
									</div>
								</div>

								<div class="form-group kt-form__group row">
									<div class="col-lg-4 kt-margin-bottom-20-mobile">
										<mat-form-field class="mat-form-field-fluid">
											<input matInput type="text" placeholder="Colonia" formControlName="colonia" required>
											<mat-hint *ngIf="isControlValid('colonia')">Por favor introduce el
												<strong>colonia</strong>
											</mat-hint>
											<mat-hint *ngIf="!isControlValid('colonia')">
												<strong>Datos correctos</strong>
											</mat-hint>
											<mat-error *ngIf="isControlHasError('colonia','required')">
												El campo es <strong>requerido</strong>
											</mat-error>
											<mat-error *ngIf="isControlHasError('colonia','maxlength')">
												Debe contener máximo <strong>128</strong> caracteres
											</mat-error>
										</mat-form-field>
									</div>

									<div class="col-lg-4 kt-margin-bottom-20-mobile">
										<mat-form-field class="mat-form-field-fluid">
											<input matInput type="text" placeholder="Código postal" formControlName="cp" required>
											<mat-hint *ngIf="isControlValid('cp')">Por favor introduce el
												<strong>código postal</strong>
											</mat-hint>
											<mat-hint *ngIf="!isControlValid('cp')">
												<strong>Datos correctos</strong>
											</mat-hint>
											<mat-error *ngIf="isControlHasError('cp','required')">
												El campo es <strong>requerido</strong>
											</mat-error>
											<mat-error *ngIf="isControlHasError('cp','maxlength')">
												Debe contener máximo <strong>128</strong> caracteres
											</mat-error>
										</mat-form-field>
									</div>

									<div class="col-lg-4 kt-margin-bottom-20-mobile">
										<mat-form-field class="mat-form-field-fluid">
											<input matInput type="text" placeholder="Localidad" formControlName="localidad" required>
											<mat-hint *ngIf="isControlValid('localidad')">Por favor introduce el
												<strong>localidad</strong>
											</mat-hint>
											<mat-hint *ngIf="!isControlValid('localidad')">
												<strong>Datos correctos</strong>
											</mat-hint>
											<mat-error *ngIf="isControlHasError('localidad','required')">
												El campo es <strong>requerido</strong>
											</mat-error>
											<mat-error *ngIf="isControlHasError('localidad','maxlength')">
												Debe contener máximo <strong>128</strong> caracteres
											</mat-error>
										</mat-form-field>
									</div>
								</div>

								<div class="form-group kt-form__group row">
									<div class="col-lg-4 kt-margin-bottom-20-mobile">
										<mat-form-field class="mat-form-field-fluid">
											<input matInput type="text" placeholder="Municipio" formControlName="municipio" required>
											<mat-hint *ngIf="isControlValid('municipio')">Por favor introduce el
												<strong>municipio</strong>
											</mat-hint>
											<mat-hint *ngIf="!isControlValid('municipio')">
												<strong>Datos correctos</strong>
											</mat-hint>
											<mat-error *ngIf="isControlHasError('municipio','required')">
												El campo es <strong>requerido</strong>
											</mat-error>
											<mat-error *ngIf="isControlHasError('municipio','maxlength')">
												Debe contener máximo <strong>128</strong> caracteres
											</mat-error>
										</mat-form-field>
									</div>

									<div class="col-lg-4 kt-margin-bottom-20-mobile">
										<mat-form-field class="mat-form-field-fluid">
											<input matInput type="text" placeholder="Estado" formControlName="estado" required>
											<mat-hint *ngIf="isControlValid('estado')">Por favor introduce el
												<strong>estado</strong>
											</mat-hint>
											<mat-hint *ngIf="!isControlValid('estado')">
												<strong>Datos correctos</strong>
											</mat-hint>
											<mat-error *ngIf="isControlHasError('estado','required')">
												El campo es <strong>requerido</strong>
											</mat-error>
											<mat-error *ngIf="isControlHasError('estado','maxlength')">
												Debe contener máximo <strong>128</strong> caracteres
											</mat-error>
										</mat-form-field>
									</div>

									<div class="col-lg-4 kt-margin-bottom-20-mobile">
										<mat-form-field class="mat-form-field-fluid">
											<input matInput type="text" placeholder="País" formControlName="pais" required>
											<mat-hint *ngIf="isControlValid('pais')">Por favor introduce el
												<strong>pais</strong>
											</mat-hint>
											<mat-hint *ngIf="!isControlValid('pais')">
												<strong>Datos correctos</strong>
											</mat-hint>
											<mat-error *ngIf="isControlHasError('pais','required')">
												El campo es <strong>requerido</strong>
											</mat-error>
											<mat-error *ngIf="isControlHasError('pais','maxlength')">
												Debe contener máximo <strong>128</strong> caracteres
											</mat-error>
										</mat-form-field>
									</div>
								</div>

									<div class="form-group kt-form__group row">
										<div class="col-lg-4 kt-margin-bottom-20-mobile">
											<mat-label>¿Retención de IVA?</mat-label>
											<br>
											<mat-radio-group aria-label="Selecciona una opción" formControlName="retencion_iva">
												<mat-radio-button [value]="0">No</mat-radio-button>
												<mat-radio-button [value]="1">Si</mat-radio-button>
											</mat-radio-group>
										</div>
									</div>

									<div class="form-group kt-form__group row">
										<div class="col-lg-4 kt-margin-bottom-20-mobile">
											<mat-form-field>
												<mat-label>Condición de pago</mat-label>
												<textarea matInput placeholder="Condiciones de pago" formControlName="condicion_pago"></textarea>
											</mat-form-field>
										</div>
									</div>

									<div class="form-group kt-form__group row">
										<div class="col-lg-4 kt-margin-bottom-20-mobile">
											<mat-form-field>
												<mat-label>Observaciones</mat-label>
												<textarea matInput placeholder="Agregar Observaciones" formControlName="observacion"></textarea>
											</mat-form-field>
										</div>
									</div>

								<div class="form-group kt-form__group row">
									<div class="col-lg-3 kt-margin-bottom-20-mobile">
										<mat-form-field class="mat-form-field-fluid">
											<mat-select formControlName="factura_formas_pago_id" placeholder="Forma de Pago">
												<mat-option>
													<ngx-mat-select-search (keyup)="onKeyUpManual($event, 'forma_pago')" (keydown)="onKeyDown('forma_pago')" [noEntriesFoundLabel]="changeNoFoundLabel()" placeholderLabel="Buscar..." formControlName="searchFormaPago" i18n-placeholderLabel></ngx-mat-select-search>
												</mat-option>
												<mat-option *ngFor="let forma_pago of filteredFormaPago|async" [value]="forma_pago.id">
													{{forma_pago.descripcion}}
												</mat-option>
											</mat-select>
											<mat-error *ngIf="isControlHasError('formas_pago', 'required')">
												El campo es <strong>requerido</strong>
											</mat-error>
										</mat-form-field>
									</div>
									<div class="col-lg-3 kt-margin-bottom-20-mobile">
										  <mat-form-field class="mat-form-field-fluid">
											<mat-select formControlName="factura_metodos_pago_id" placeholder="Método de Pago">
												<mat-option>
													<ngx-mat-select-search (keyup)="onKeyUpManual($event, 'metodo_pago')" (keydown)="onKeyDown('metodo_pago')" [noEntriesFoundLabel]="changeNoFoundLabel()" placeholderLabel="Buscar..." formControlName="searchMetodoPago" i18n-placeholderLabel></ngx-mat-select-search>
												</mat-option>
												<mat-option *ngFor="let metodo_pago of filteredMetodoPago|async" [value]="metodo_pago.id">
													{{metodo_pago.descripcion}}
												</mat-option>
											</mat-select>
											<mat-error *ngIf="isControlHasError('metodo_pago', 'required')">
												El campo es <strong>requerido</strong>
											</mat-error>
										</mat-form-field>
									</div>

									<div class="col-lg-3 kt-margin-bottom-20-mobile">
											<mat-form-field class="mat-form-field-fluid">
											<mat-select formControlName="factura_tipo_comprobante_id" placeholder="Tipo comprobante">
												<mat-option>
													<ngx-mat-select-search (keyup)="onKeyUpManual($event, 'tipo_comprobante')" (keydown)="onKeyDown('tipo_comprobante')" [noEntriesFoundLabel]="changeNoFoundLabel()" placeholderLabel="Buscar..." formControlName="searchTipoComprobante" i18n-placeholderLabel></ngx-mat-select-search>
												</mat-option>
												<mat-option *ngFor="let tipo_comprobante of filteredTipoComprobante|async" [value]="tipo_comprobante.id">
													{{tipo_comprobante.descripcion}}
												</mat-option>
											</mat-select>
											<mat-error *ngIf="isControlHasError('tipo_comprobante', 'required')">
												El campo es <strong>requerido</strong>
											</mat-error>
										</mat-form-field>
								  	</div>

								  	<div class="col-lg-3 kt-margin-bottom-20-mobile">
										<mat-form-field class="mat-form-field-fluid">
										<mat-select formControlName="factura_uso_cfdi_id" placeholder="Uso CFDI">
											<mat-option>
												<ngx-mat-select-search (keyup)="onKeyUpManual($event, 'uso_cfdi')" (keydown)="onKeyDown('uso_cfdi')" [noEntriesFoundLabel]="changeNoFoundLabel()" placeholderLabel="Buscar..." formControlName="searchUsoCFDI" i18n-placeholderLabel></ngx-mat-select-search>
											</mat-option>
											<mat-option *ngFor="let uso_cfdi of filteredUsoCFDI|async" [value]="uso_cfdi.id">
												{{uso_cfdi.descripcion}}
											</mat-option>
										</mat-select>
										<mat-error *ngIf="isControlHasError('uso_cfdi', 'required')">
											El campo es <strong>requerido</strong>
										</mat-error>
										</mat-form-field>
							  		</div>
								</div>
							</div>
						</form>
					</div>
					<!--end::Form-->
				</ng-template>
			</mat-tab>
		</mat-tab-group>
	</kt-portlet-body>
</kt-portlet>
