<kt-portlet>
	<kt-portlet-header [title]="(isNewDomicilio)? 'Crear nuevo domicilio' : 'Editar domicilio'"
					   [class]="'kt-portlet__head--lg'">
		<div ktPortletTools class="d-flex">
			<button [routerLink]="(isNewDomicilio) ? ['../../../../clientes-domicilios/', clienteID] : ['../../../../clientes-domicilios/', clienteID]"
					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="(isNewDomicilio)? 'administrador.clientes.domicilios.store' : 'administrador.clientes.domicilios.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="{{(isNewDomicilio) ? 'Guardar' : 'Actualizar'}} y salir">
				<i class="la la-save"></i>
				<span class="kt-hidden-mobile">{{(isNewDomicilio) ? '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.domicilio.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]="domiciliosForm" 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-4 kt-margin-bottom-20-mobile">
										<mat-form-field class="mat-form-field-fluid">
											<input matInput type="text" placeholder="Nombre Sucursal" formControlName="nombre_sucursal" required>
											<mat-hint *ngIf="isControlValid('nombre_sucursal')">Por favor introduce el
												<strong>nombre de la sucursal</strong>
											</mat-hint>
											<mat-hint *ngIf="!isControlValid('nombre_sucursal')">
												<strong>Datos correctos</strong>
											</mat-hint>
											<mat-error *ngIf="isControlHasError('nombre_sucursal','required')">
												El campo es <strong>requerido</strong>
											</mat-error>
											<mat-error *ngIf="isControlHasError('nombre_sucursal','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 sucursal" formControlName="numero_sucursal" required>
											<mat-hint *ngIf="isControlValid('numero_sucursal')">Por favor introduce el
												<strong>número de sucursal</strong>
											</mat-hint>
											<mat-hint *ngIf="!isControlValid('numero_sucursal')">
												<strong>Datos correctos</strong>
											</mat-hint>
											<mat-error *ngIf="isControlHasError('numero_sucursal','required')">
												El campo es <strong>requerido</strong>
											</mat-error>
											<mat-error *ngIf="isControlHasError('numero_sucursal','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>correo eléctronico</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 class="col-lg-4 kt-margin-bottom-20-mobile">
										<mat-form-field class="mat-form-field-fluid">
											<input matInput type="text" placeholder="Responsable" formControlName="nombre_responsable_sucursal" required>
											<mat-hint *ngIf="isControlValid('nombre_responsable_sucursal')">Por favor introduce el
												<strong>nombre del responsable de sucursal</strong>
											</mat-hint>
											<mat-hint *ngIf="!isControlValid('nombre_responsable_sucursal')">
												<strong>Datos correctos</strong>
											</mat-hint>
											<mat-error *ngIf="isControlHasError('nombre_responsable_sucursal','required')">
												El campo es <strong>requerido</strong>
											</mat-error>
											<mat-error *ngIf="isControlHasError('nombre_responsable_sucursal','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="tel" placeholder="Celular del responsable" formControlName="celular_responsable" required>
											<mat-hint *ngIf="isControlValid('celular_responsable')">Por favor introduce el
												<strong>el teléfono del responsable</strong>
											</mat-hint>
											<mat-hint *ngIf="!isControlValid('celular_responsable')">
												<strong>Datos correctos</strong>
											</mat-hint>
											<mat-error *ngIf="isControlHasError('celular_responsable','required')">
												El campo es <strong>requerido</strong>
											</mat-error>
											<mat-error *ngIf="isControlHasError('celular_responsable','minlength')">
												Debe contener mínimo <strong>10</strong> caracteres
											</mat-error>
											<mat-error *ngIf="isControlHasError('celular_responsable','maxlength')">
												Debe contener máximo <strong>10</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="tel" placeholder="Teléfono" formControlName="telefono" required>
											<mat-hint *ngIf="isControlValid('telefono')">Por favor introduce el
												<strong>teléfono</strong>
											</mat-hint>
											<mat-hint *ngIf="!isControlValid('telefono')">
												<strong>Datos correctos</strong>
											</mat-hint>
											<mat-error *ngIf="isControlHasError('telefono','required')">
												El campo es <strong>requerido</strong>
											</mat-error>
											<mat-error *ngIf="isControlHasError('telefono','minlength')">
												Debe contener mínimo <strong>10</strong> caracteres
											</mat-error>
											<mat-error *ngIf="isControlHasError('telefono','maxlength')">
												Debe contener máximo <strong>10</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="Calle" formControlName="calle" required>
											<mat-hint *ngIf="isControlValid('calle')">Por favor introduce la
												<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="Entre calles" formControlName="entre_calles">
											<mat-hint *ngIf="isControlValid('entre_calles')">Por favor introduce las
												<strong>entre calles</strong>
											</mat-hint>
											<mat-hint *ngIf="!isControlValid('entre_calles')">
												<strong>Datos correctos</strong>
											</mat-hint>
											<mat-error *ngIf="isControlHasError('entre_calles','required')">
												El campo es <strong>requerido</strong>
											</mat-error>
											<mat-error *ngIf="isControlHasError('entre_calles','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úm. Exterior" formControlName="num_ext">
											<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úm. Interior" formControlName="num_int">
											<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 la
												<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">
											<mat-hint *ngIf="isControlValid('cp')">Por favor introduce las
												<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="Ciudad" formControlName="ciudad">
											<mat-hint *ngIf="isControlValid('ciudad')">Por favor introduce la
												<strong>ciudad</strong>
											</mat-hint>
											<mat-hint *ngIf="!isControlValid('ciudad')">
												<strong>Datos correctos</strong>
											</mat-hint>
											<mat-error *ngIf="isControlHasError('ciudad','required')">
												El campo es <strong>requerido</strong>
											</mat-error>
											<mat-error *ngIf="isControlHasError('ciudad','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">
										<input #fileUpload type="file" class="file-input" accept=".pdf" (change)="handleUpload($event)" />
										<span (click)="openPDF(domicilioID)">{{fileName || "No se ha subido ningún PDF"}}</span>
										<button mat-mini-fab color="accent" (click)="fileUpload.click()" style="margin-left: .5rem">
											<mat-icon>attach_file</mat-icon>
										</button>
										<button mat-mini-fab color="primary" (click)="reset()" style="margin-left: .5rem">
											<mat-icon>delete</mat-icon>
										</button>
									</div>
								</div>
							</div>
						</form>
					</div>
					<!--end::Form-->
				</ng-template>
			</mat-tab>
		</mat-tab-group>
	</kt-portlet-body>
</kt-portlet>
