<kt-portlet>
	<kt-portlet-header [title]="titulo" [class]="'kt-portlet__head--lg'">
		<div ktPortletTools class="mr-3">
			<button (click)="filters()" mat-raised-button class="btn btn-primary" matTooltip="Ajustar filtros" *ngxPermissionsOnly="'administrador.usuarios.store'">
				<i class="fas fa-filter"></i>
				<span class="kt-hidden-mobile ml-2">Filtros</span>
			</button>
		</div>

		<div ktPortletTools class="mr-3">
			<button (click)="getInformation(true)" mat-raised-button class="btn btn-primary" matTooltip="Exportar a archivo excel" *ngxPermissionsOnly="'administrador.usuarios.store'" [disabled]="dataSource.data.length == 0">
				<i class="fas fa-file-pdf"></i>
				<span class="kt-hidden-mobile ml-2">Exportar</span>
			</button>
		</div>

		<div ktPortletTools class="mr-1">
			<button (click)="getInformation()" mat-raised-button class="btn btn-primary" matTooltip="Consultar información" *ngxPermissionsOnly="'administrador.usuarios.store'" [disabled]="showMessageSetFilters">
				<i class="fa fa-search"></i>
				<span class="kt-hidden-mobile ml-2">Consultar</span>
			</button>
		</div>
	</kt-portlet-header>

	<kt-portlet-body>

		<div class="kt-form container-detail">
			<div class="row-detail">
				<div>Totales ({{totalServicios}})</div>
				<div>{{totalDuracion}}</div>
			</div>
		</div>

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

				<ng-container matColumnDef="numero_solicitud" sticky>
					<mat-header-cell *matHeaderCellDef>Núm. de solicitud</mat-header-cell>
					<mat-cell *matCellDef="let data">{{data.numero_solicitud}}</mat-cell>
				</ng-container>

				<ng-container matColumnDef="fecha_servicio">
					<mat-header-cell *matHeaderCellDef>Fecha del servicio</mat-header-cell>
					<mat-cell *matCellDef="let data">{{(data.fecha_servicio != null)? data.fecha_servicio : '-'}}</mat-cell>
				</ng-container>

				<ng-container matColumnDef="hora_servicio">
					<mat-header-cell *matHeaderCellDef>Hora del servicio</mat-header-cell>
					<mat-cell *matCellDef="let data">{{(data.hora_servicio != null)? data.hora_servicio : '-'}}</mat-cell>
				</ng-container>

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

				<ng-container matColumnDef="costo">
					<mat-header-cell *matHeaderCellDef>Costo de servicio</mat-header-cell>
					<mat-cell *matCellDef="let data">${{ data.costo | number:'1.2-2'}}</mat-cell>
				</ng-container>

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

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

				<ng-container matColumnDef="nombre_cliente">
					<mat-header-cell *matHeaderCellDef>Nombre del cliente</mat-header-cell>
					<mat-cell *matCellDef="let data">{{(data.nombre_cliente != null)? data.nombre_cliente : '-'}}</mat-cell>
				</ng-container>

				<ng-container matColumnDef="colonia_cliente">
					<mat-header-cell *matHeaderCellDef>Domicilio del servicio</mat-header-cell>
					<mat-cell *matCellDef="let data">{{(data.colonia_cliente != null)? data.calle_cliente + ' #' + data.num_ext_cliente + ', ' + data.colonia_cliente + ' C.P. ' + data.cp_cliente : '-'}}</mat-cell>
				</ng-container>

				<ng-container matColumnDef="vehiculo">
					<mat-header-cell *matHeaderCellDef>Vehículo asignado</mat-header-cell>
					<mat-cell *matCellDef="let data">{{(data.vehiculo != null)? data.vehiculo : '-'}}</mat-cell>
				</ng-container>

				<ng-container matColumnDef="duracion_servicio">
					<mat-header-cell *matHeaderCellDef>Duración del servicio</mat-header-cell>
					<mat-cell *matCellDef="let data">{{(data.duracion_servicio != null)? data.duracion_servicio : '-'}}</mat-cell>
				</ng-container>

				<ng-container matColumnDef="litraje">
					<mat-header-cell *matHeaderCellDef>Litraje</mat-header-cell>
					<mat-cell *matCellDef="let data">{{(data.litraje != null)? data.litraje : '-'}}</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="showMessageSetFilters">No es posible mostrar información sin seleccionar filtros.</div>
			<div class="mat-table__message" *ngIf="dataSource.data.length == 0 && !showMessageSetFilters">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)" [disabled]="total == 0"></mat-paginator>
		</div>

	</kt-portlet-body>

</kt-portlet>
