<div>
	<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>
		<div class="c-modal">
			<span class="span-titulo">Encuesta de Satisfacción del Cliente</span>
		</div>

		<hr>

		<div mat-dialog-content *ngIf="!isLoading">
			<div class="c-modal mt-4" >
				<div class="container-datos-generales">
					<div class="container-datos-generales-1">
						<div class="titulo">Datos Generales</div>
						<div class="mt-3">
							<span class="subtitulo">{{isCompany? 'Empresa: ' : 'Nombre del Cliente: '}} </span>
							<span class="respuesta">{{isCompany? data.empresa : data.nombre_cliente}}</span>
						</div>
						<div *ngIf="isCompany">
							<span class="subtitulo">Contacto: </span>
							<span class="respuesta">{{data.contacto}}</span>
						</div>
						<div>
							<span class="subtitulo">Servicio Evaluado: </span>
							<span class="respuesta">{{data.servicio_evaluado}}</span>
						</div>
						<div>
							<span class="subtitulo color-azul">Porcentaje de satisfacción del cliente: </span>
							<span class="respuesta color-azul">{{data.puntuacion}}%</span>
						</div>
					</div>
					<div class="container-datos-generales-2">
						<div>
							<span class="subtitulo">Fecha: </span>
							<span class="respuesta">{{data.fecha | date: 'dd/MM/yyyy'}}</span>
						</div>
					</div>
				</div>
			</div>

			<hr>

			<div>
				<div class="container-respuestas-general">
					<div class="titulo">Respuestas del Cliente</div>

					<div *ngFor="let pregunta of data.preguntas; let indexOfelement=index;">
						<div class="mt-3">
							<div class="subtitulo">{{indexOfelement + 1}}.- {{pregunta.nombre}}</div>
							<div class="container-respuestas">
								<div class="div-respuestas" *ngFor="let respuesta of pregunta.respuestas;">
									<div>
										<i *ngIf="respuesta.tipo_campo == 'Checkbox'" [ngClass]="respuesta.seleccionado ? 'fas fa-check-square' : 'far fa-square'"></i>
										<span *ngIf="respuesta.nombre != ''"> {{respuesta.nombre}}</span>
										<span *ngIf="respuesta.tipo_campo == 'Texto' || respuesta.tipo_campo == 'Email'">{{respuesta.respuesta? respuesta.respuesta : 'Sin dato'}}</span>
										<span *ngIf="respuesta.tipo_campo == 'Fecha'">{{(respuesta.respuesta != null)? (respuesta.respuesta | date: 'dd/MM/yyyy') : 'Sin dato'}}</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="container-loading" *ngIf="isLoading">
			<mat-spinner [diameter]="50"></mat-spinner>
			<span class="spinner-text">Espere un momento...</span>
		</div>

	</div>
</div>
