<kt-portlet>
	<kt-portlet-header [title]="titulo" [class]="'kt-portlet__head--lg'">
		<div ktPortletTools>
			<button [routerLink]="['../solicitudes-servicio/add']"  mat-raised-button class="btn btn-primary" matTooltip="Crear nueva solicitud de servicio" *ngxPermissionsOnly="'administrador.usuarios.store'">
				<i class="la la-plus"></i>
				<span class="kt-hidden-mobile ml-2">Nueva solicitud de servicio</span>
			</button>
		</div>
	</kt-portlet-header>

	<kt-portlet-body>

		<form [formGroup]="serviciosForm" 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-2 kt-margin-bottom-20-mobile">
						<mat-form-field class="mat-form-field-fluid">
							<input matInput (keyup)="onKeyUp($event)" (keydown)="onKeyDown()" placeholder="Buscar..." class="mat-form-field mat-form-field-fluid" [disabled]="isLoading">
							<mat-hint align="start">>
								<strong>Buscar en todos los campos</strong>
							</mat-hint>
						</mat-form-field>
					</div>

					<div class="col-lg-2 kt-margin-bottom-20-mobile">
						<mat-form-field class="mat-form-field-fluid">
							<mat-label>Selecciona el día</mat-label>
							<input #inputElement matInput [matDatepicker]="picker" (click)="picker.open()" (dateChange)="getData(false)" placeholder="DOB(DD/MM/YYYY)"
								   formControlName="date"
								   readonly [attr.disabled]="isLoading">
							<mat-datepicker-toggle matSuffix [for]="picker" [attr.disabled]="isLoading"></mat-datepicker-toggle>
							<mat-datepicker #picker></mat-datepicker>
						</mat-form-field>
					</div>

					<div class="col-lg-2 kt-margin-bottom-20-mobile">
						<mat-form-field class="mat-form-field-fluid">
							<mat-select placeholder="Seleccione estado de servicio">
								<mat-option [value]="0" (click)="getInfoByEstatus(0)">Todos</mat-option>
								<mat-option *ngFor="let filtro of estatusServicios" [value]="filtro.id" (click)="getInfoByEstatus(filtro.id)">{{filtro.nombre}}</mat-option>
							</mat-select>
							<mat-hint align="start">
								<strong>Estado de servicio</strong>
							</mat-hint>
						</mat-form-field>
					</div>

					<div class="col-lg-2 kt-margin-bottom-20-mobile">
						<button mat-raised-button (click)="getData(true)" type="button">Todos los servicios</button>
					</div>

					<mat-spinner [diameter]="25" *ngIf="isLoading" class="ml-2"></mat-spinner>

				</div>
			</div>
		</form>

		<div class="mat-table__wrapper table-responsive">
			<mat-table class="lmat-elevation-z8" style="font-weight: bold" [dataSource]="dataSource" (matSortChange)="sort($event)" matSort matSortActive="id" matSortDirection="asc" matSortDisableClear>

				<ng-container matColumnDef="solicitud_servicio_id">
					<mat-header-cell class="maxwidth100" *matHeaderCellDef mat-sort-header>Solicitud</mat-header-cell>
					<mat-cell class="maxwidth100" *matCellDef="let data">{{data.solicitud_servicio_id}}</mat-cell>
				</ng-container>

				<ng-container matColumnDef="estatus_servicio_nombre">
					<mat-header-cell class="maxwidth100" *matHeaderCellDef mat-sort-header>Estado de servicio</mat-header-cell>
					<mat-cell class="maxwidth100" *matCellDef="let data">{{(data.estatus_servicio_nombre != null)? data.estatus_servicio_nombre : '-'}}</mat-cell>
				</ng-container>

				<ng-container matColumnDef="fecha_agenda">
					<mat-header-cell class="maxwidth100" *matHeaderCellDef mat-sort-header>Fecha y hora de registro</mat-header-cell>
					<mat-cell class="maxwidth100" *matCellDef="let data">{{(data.fecha_agenda != null | date:'dd/MM/yyyy hh:mm a')? (data.fecha_agenda | date:'dd/MM/yyyy hh:mm a') : '-'}}</mat-cell>
				</ng-container>

				<ng-container matColumnDef="fecha_solicitud">
					<mat-header-cell class="maxwidth100" *matHeaderCellDef mat-sort-header>Fecha y hora programada</mat-header-cell>
					<mat-cell class="maxwidth100" *matCellDef="let data">{{(data.fecha_solicitud != null | date:'dd/MM/yyyy hh:mm a')? (data.fecha_solicitud | date:'dd/MM/yyyy hh:mm a') : '-'}}</mat-cell>
				</ng-container>

				<ng-container matColumnDef="tiempo_atencion">
					<mat-header-cell class="maxwidth100" *matHeaderCellDef>Tiempo de respuesta</mat-header-cell>
					<mat-cell class="maxwidth100" *matCellDef="let data">{{(data.tiempo_atencion != null)? data.tiempo_atencion : '-'}}</mat-cell>
				</ng-container>

				<ng-container matColumnDef="denominacion">
					<mat-header-cell class="maxwidth200" *matHeaderCellDef mat-sort-header>Cliente / Denominación</mat-header-cell>
					<mat-cell class="maxwidth200" *matCellDef="let data">{{(data.denominacion != null)? data.denominacion : '-'}}</mat-cell>
				</ng-container>

				<ng-container matColumnDef="clientes_colonia">
					<mat-header-cell class="maxwidth150" *matHeaderCellDef mat-sort-header>Colonia</mat-header-cell>
					<mat-cell class="maxwidth150" *matCellDef="let data">{{(data.clientes_colonia != null)? data.clientes_colonia : '-'}}</mat-cell>
				</ng-container>

				<ng-container matColumnDef="forma_pago_nombre">
					<mat-header-cell class="maxwidth150" *matHeaderCellDef mat-sort-header>Forma de pago</mat-header-cell>
					<mat-cell class="maxwidth150" *matCellDef="let data">{{(data.forma_pago_nombre != null)? data.forma_pago_nombre : '-'}}</mat-cell>
				</ng-container>

				<ng-container matColumnDef="servicio_nombre">
					<mat-header-cell class="maxwidth150" *matHeaderCellDef mat-sort-header>Servicio</mat-header-cell>
					<mat-cell class="maxwidth150" *matCellDef="let data">
						<div class="d-flex flex-column align-items-center">
							<span *ngIf="(data.litraje && data.litraje != '0') || (data.estatus_servicio_nombre == 'Realizado' && data.progreso_solicitud_id != null)" matTooltipPosition="below" matTooltipClass="multiline-tooltip" [matTooltip]="(data.litraje && data.litraje != '0')? data.litraje + ' lts &#13; Click para editar' : 'Agregar litraje'">
								<mat-icon class="mat-icon-info" (click)="editLitraje(data)">{{(data.litraje && data.litraje != '0')? 'info' : 'add_circle' }}</mat-icon>
							</span>
							<span>{{(data.servicio_nombre != null)? data.servicio_nombre : '-'}}</span>
						</div>

					</mat-cell>
				</ng-container>

				<ng-container matColumnDef="tipo_servicio_nombre">
					<mat-header-cell class="maxwidth150" *matHeaderCellDef mat-sort-header>Tipo de servicio</mat-header-cell>
					<mat-cell class="maxwidth150" *matCellDef="let data">{{(data.tipo_servicio_nombre != null)? data.tipo_servicio_nombre : '-'}}</mat-cell>
				</ng-container>

				<ng-container matColumnDef="facturado">
					<mat-header-cell class="maxwidth80" *matHeaderCellDef mat-sort-header>Facturado</mat-header-cell>
					<mat-cell class="maxwidth80 align-self-center justify-content-center" *matCellDef="let data"><i [ngClass]="(data.facturado == 1 || data.facturado == '1') ? 'fas fa-check' : 'fas fa-times'"></i></mat-cell>
				</ng-container>

				<ng-container matColumnDef="vehiculo_num_economico">
					<mat-header-cell class="maxwidth80" *matHeaderCellDef mat-sort-header>Vehículo</mat-header-cell>
					<mat-cell class="maxwidth80 align-self-center justify-content-center" *matCellDef="let data">{{(data.vehiculo_num_economico != null)? data.vehiculo_num_economico : '-'}}</mat-cell>
				</ng-container>

				<ng-container matColumnDef="operador_apellido_paterno">
					<mat-header-cell *matHeaderCellDef mat-sort-header>Asesor / Auxiliar de operaciones</mat-header-cell>
					<mat-cell *matCellDef="let data">
						<div class="d-flex flex-column">
							<div>{{(data.operador_apellido_paterno != null)? data.operador_apellido_paterno + ' ' + data.operador_apellido_materno + ' ' + data.operador_nombre : '-'}}</div>
							<hr style="width: 100%;">
							<div>{{(data.auxiliar_1 != null)? data.auxiliar_1 : '-'}}</div>
						</div>
					</mat-cell>
				</ng-container>

				<ng-container matColumnDef="actions">
					<mat-header-cell *matHeaderCellDef style="max-width: 80px!important;"></mat-header-cell>
					<mat-cell *matCellDef="let data" class="justify-content-center d-flex flex-column align-self-center justify-content-center" style="max-width: 80px!important;">
						<button [disabled]="!(data.estatus_servicio_id == 1 && data.encuesta_contestada == 1)" mat-icon-button type="button" (click)="openQuiz(data.id)" class="btn-primary btn-disable-list mb-2" matTooltip="Abrir encuesta">
							<i class="fas fa-file-text"></i>
						</button>
						<button [disabled]="!(data.estatus_servicio_id == 1 || data.estatus_servicio_id == 5)" mat-icon-button type="button" (click)="openPDF(data.solicitud_servicio_id, data.id)" class="btn-primary btn-disable-list mb-2" matTooltip="Abrir PDF">
							<i class="fas fa-file-pdf" style="color: #2fac02"></i>
						</button>
						<button mat-icon-button type="button" (click)="editSurvey(data.solicitud_servicio_id)" class="btn-primary btn-disable-list mb-2" matTooltip="Editar solicitud de servicio" *ngxPermissionsOnly="'administrador.usuarios.show'">
							<mat-icon>edit</mat-icon>
						</button>
					</mat-cell>
				</ng-container>

				<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
				<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
			</mat-table>
			<div class="mat-table__message" *ngIf="dataSource.data.length == 0">No se encontraron registros.</div>
			<div class="mat-table__message" *ngIf="showMessageWait">Espera un momento....</div>
		</div>

		<div class="mat-table__bottom">
			<mat-spinner [diameter]="25" *ngIf="isLoading"></mat-spinner>
			<mat-paginator [pageSize]="perPage" [pageSizeOptions]="pages" [length]="total" (page)="paginator($event)"></mat-paginator>
		</div>
	</kt-portlet-body>

</kt-portlet>
