<div class="row" style="margin-bottom: 20px;">
  	<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>

<div class="container-fluid">
	<div class="row">
		<div class="table-responsive">
			<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':'3%'}"></p-column>
			<p-column field="created_at" header="Fecha y hora" [style]="{'width':'7%'}">
			  	<ng-template let-quotes="rowData" pTemplate="body" class="center">
			    	{{ quotes.created_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="userAgent" header="Dispositivo">
	          	<ng-template let-quotes="rowData" pTemplate="body" class="center">
	            	{{ showUserAgent(quotes) }}
	          	</ng-template>
	        </p-column>
			<p-column field="status" header="Estado">
			  	<ng-template let-quotes="rowData" pTemplate="body" class="center">
					<button *ngIf="quotes.status == 0" class="btn btn-info" [routerLink]="['/admin/seller/quotes/', quotes.id]"><span class="fa fa-file"></span> Nuevo</button>
					<button *ngIf="quotes.status == 1" class="btn btn-warning" [routerLink]="['/admin/seller/quotes/', quotes.id]"><span class="fa fa-save"></span> Guardado</button>
					<button *ngIf="quotes.status == 2" class="btn btn-primary" [routerLink]="['/admin/seller/quotes/', quotes.id]"><span class="fa fa-share-square"></span> Enviada</button>
					<button *ngIf="quotes.status == 3" class="btn btn-success" [routerLink]="['/admin/seller/quotes/', quotes.id]"><span class="fa fa-dollar-sign"></span> Pagada</button>
					<button *ngIf="quotes.status == 4" class="btn btn-warning" [routerLink]="['/admin/seller/quotes/', quotes.id]"><span class="fa fa-file-times"></span> Rechazo</button>
					<button *ngIf="quotes.status == 99" class="btn btn-danger" [routerLink]="['/admin/seller/quotes/', quotes.id]"><span class="fa fa-file-times"></span> Oculta</button>
			  	</ng-template>
			</p-column>
			</p-dataTable>
		</div>
	</div>
</div>