<div class="row">
  	<div class="col-1">
		<input type="text" placeholder="ID" class="form-control" [(ngModel)]="searchId" name="searchId" id="searchId"  required>
	</div>
	<div class="col-3">
		<input type="text" placeholder="Email" class="form-control" [(ngModel)]="searchEmail" name="searchEmail" id="searchEmail" required>
	</div>
		<div class="col-2">
		<select [(ngModel)]="status" class="form-control">
			<option value="">Todos los estados</option>
			<option value="0">Nuevo</option>
			<option value="1">Guardado</option>
			<option value="2">Enviada</option>
			<option value="3">Pagada</option>
			<option value="4">Error en pago</option>
			<option value="99">Ocultas</option>
		</select>
		</div>
		<div class="col-2">
		<input type="text" placeholder="Desde" class="form-control" [(ngModel)]="searchFrom" name="dateDesde" id="dateDesde" required>
	</div>
	<div class="col-2">
		<input type="text" placeholder="Hasta" class="form-control" [(ngModel)]="searchTo" name="dateHasta" id="dateHasta" required>
	</div>
	<div class="col-2">
		<button type="button" class="btn btn-info" pButton (click)="updateData()">Filtrar</button>
	</div>
	
</div>
<br>

<div *ngIf="showdata">
	<p-dataTable #dt [metaKeySelection]="false" class="table table-bordred table-striped"
		[value]="quotes"
		[responsive]="true"
		[metaKeySelection]="false"
		[loading]="false"
		[rows]="itemsPerPage"
		[paginator]="paginator"
		[totalRecords]="total"
		[lazy]="true"
		emptyMessage="No hay datos disponibles"
		(onLazyLoad)="loadLazy($event)"
		#dt>
		<p-column field="id" header="ID" [style]="{'width':'60px'}"></p-column>
		<p-column field="updated_at" header="Ult. Actualización" [style]="{'width':'110px'}">
				<ng-template let-quotes="rowData" pTemplate="body" class="center">
					{{ quotes.updated_at | date: 'dd/MM/yyyy HH:mm:ss'}}
				</ng-template>
			</p-column>
		<p-column field="fullName" header="Nombre"></p-column>
		<p-column field="contact" header="Contacto">
			<ng-template let-quotes="rowData" pTemplate="body" class="center">
				{{ quotes.email }} <br /> {{ quotes.phone }}
			</ng-template>
		</p-column>
		<p-column field="vehicle" header="Vehículo"></p-column>
		<p-column field="type" header="Repuesto" [style]="{'width':'80px'}"></p-column>
		<p-column field="fixSize" header="Tipo de daño" [style]="{'width':'80px'}"></p-column>
		<p-column field="resellerName" header="Vendedor">
			<ng-template let-quotes="rowData" pTemplate="body" class="center">
				{{quotes.resellerName}}<br /> {{quotes.resellerEmail}}
			</ng-template>
		</p-column>
		<p-column field="userAgent" header="Dispositivo" [style]="{'width':'90px'}">
				<ng-template let-quotes="rowData" pTemplate="body" class="center">
					{{ showUserAgent(quotes) }}
				</ng-template>
		</p-column>
		<p-column field="editar" header="Estado" [style]="{'width':'150px'}">
				<ng-template let-added="rowData" pTemplate="body" class="center">
					<button class="btn btn-info btn-xs" (click)="toDetails(added.id)" *ngIf="added.status == 0">
						<span class="fa fa-file"></span>
						Ingresado
					</button>
					<button class="btn btn-warning btn-xs" (click)="toDetails(added.id)" *ngIf="added.status == 1">
						<span class="fa fa-save"></span>
						Guardado
					</button>
					<button class="btn btn-primary btn-xs" (click)="toDetails(added.id)" *ngIf="added.status == 2">
						<span class="fa fa-share-square"></span>
						Enviada
					</button>
					<button class="btn btn-success btn-xs" (click)="toDetails(added.id)" *ngIf="added.status == 3">
						<span class="fa fa-dollar-sign"></span>
						Pagada
					</button>
					<button class="btn btn-warning btn-xs" (click)="toDetails(added.id)" *ngIf="added.status == 4">
						<span class="fa fa-times"></span>
						Rechazo
					</button>
					<button class="btn btn-danger btn-xs" (click)="toDetails(added.id)" *ngIf="added.status == 99">
						<span class="fa fa-times"></span>
						Oculta
					</button>
				  </ng-template>
			</p-column>
	</p-dataTable>
</div>