<div style="margin-bottom: 20px;" *ngIf="quote">
	<button class="btn btn-primary btn-xs" [routerLink]="['/admin/seller/quotes']"><span class="fa fa-arrow-circle-left "></span> Volver</button>
	<button class="btn btn-danger btn-xs pull-right" *ngIf="quote.status < 2" (click)="unlist(quote.id)"><span class="fa fa-times "></span> Dejar como oculta</button>
	<h3 class="row-inline">Cotización del {{ quote.created_at | date: 'dd/MM/yyyy hh:mm:ss'}}</h3>
</div>

<div class="row">
	<div class="col-6" *ngIf="quote">

		<div style="margin-top: 30px;" class="col-12">
			<span>Datos:</span>
			<table class="table">
				<tr>
					<td><strong>ID</strong></td>
					<td>{{ quote.id }}</td>
				</tr>
				<tr>
					<td><strong>Cliente</strong></td>
					<td>{{ quote.firstName }} {{ quote.lastName }}</td>
				</tr>
				<tr>
					<td><strong>Email</strong></td>
					<td>{{ quote.email }}</td>
				</tr>
				<tr>
					<td><strong>Teléfono</strong></td>
					<td>{{ quote.phone }}</td>
				</tr>
				<tr>
					<td><strong>Marca</strong></td>
					<td>{{ quote.carBrand }}</td>
				</tr>
				<tr>
					<td><strong>Modelo</strong></td>
					<td>{{ quote.carModel }}</td>
				</tr>
				<tr>
					<td><strong>Año</strong></td>
					<td>{{ quote.carYear }}</td>
				</tr>
				<tr>
					<td><strong>Repuesto</strong></td>
					<td>{{ quote.type }}</td>
				</tr>
				<tr>
					<td><strong>Tipo de servicio</strong></td>
					<td>{{ quote.quoteType }}</td>
				</tr>
				<tr *ngIf="quote.installOnSite == '1'">
					<td><strong>En terreno</strong></td>
					<td>{{ (quote.installOnSite) ? 'Si' : 'No' }}</td>
				</tr>
				<tr *ngIf="quote.installOnStore == '1'">
					<td><strong>En Tienda</strong></td>
					<td>{{ (quote.installOnStore) ? 'Si' : "No" }}</td>
				</tr>
				<tr>
					<td><strong>Dirección</strong></td>
					<td>{{ quote.quoteAddress }}</td>
				</tr>
				<tr *ngIf="quote.userId">
					<td><strong>Vendedor</strong></td>
					<td *ngIf="seller">{{ seller.name }} - {{ seller.email }}</td>
				</tr>
				<tr>
					<td><strong>Cotizado el</strong></td>
					<td>{{ quote.created_at | date: 'dd/MM/yyyy hh:mm:ss' }}</td>
				</tr>
			</table>
		</div>
	</div>

	<div class="col-6">
		<div>
			<h5>Detalles de cotización</h5><br/>
			<div *ngIf="sideGlass">
				<div *ngFor="let piece of sideGlass">
					<strong>{{ piece.describe }}: </strong>. Lado: {{ piece.lado }} 
				</div>
			</div>

			<div *ngIf="rearGlass">
				<div *ngFor="let piece of rearGlass.selected">
					{{ piece }} 
				</div>
			</div>
		</div>

		<div style="margin-top: 30px;" *ngIf="quote">
			<strong>Informacion extra</strong>
			<div *ngIf="quote.billNumber">
				<strong>Boleta o factura N:</strong>
				<p>{{ quote.billNumber }}</p>
			</div>

			<br/>
			<strong>Estado</strong>
			<p *ngIf="quote.status == 0">Sin cotizar</p>
			<p *ngIf="quote.status == 1">Guardado</p>
			<p *ngIf="quote.status == 2">Enviado a cliente</p>
			<p *ngIf="quote.status == 3">Pagado</p>
			<p *ngIf="quote.status == 4">Pago rechazado</p>
			<p *ngIf="quote.status == 99">Anulado</p>

			<br/>
			<strong>Desde</strong>
			<p *ngIf="userAgent.os.name=='Windows'">Computador - Windows</p>
			<p *ngIf="userAgent.os.name=='Linux'">Computador - Linux</p>
			<p *ngIf="userAgent.os.name=='Android'">Teléfono - Android</p>
			<p *ngIf="userAgent.os.name=='iPhone'">Teléfono - Iphone</p>
			<p *ngIf="userAgent.os.name=='RIM Tablet OS'">Tablet</p>

		</div>
		<div style="margin-top: 30px;" *ngIf="quote && quote.status >= 3">
			<h5>Cotización</h5>

			<div *ngIf="quote.sideGlass != ''">		    	
				<div *ngFor="let side of sideGlass; let i = index">
					<label class="control-label">Valor {{ side.describe }} - Lado {{ side.lado }}</label>
					<input type="text" disabled class="form-control" [(ngModel)]="side.price" name="{{i}}" id="{{i}}" placeholder="Valor {{ side.describe }} - Lado {{ side.lado }}" />
					</div>
			</div>

			<div *ngIf="quote.rearGlass != ''">
				<div *ngIf="quote && (rearGlass.type.unique == 'true' || (rearGlass.type.unique == 'false' && rearGlass.type.left == 'false' && rearGlass.type.right == 'false' && !quote.sideGlass && quote.type == 'luneta'))">
					<label class="control-label">Valor luneta</label>
					<input type="text" disabled class="form-control" [(ngModel)]="unique" name="unique" id="unique" placeholder="Valor luneta" />
				</div>

				<div *ngIf="quote && rearGlass.type.left == 'true'">				    	
					<label class="control-label">Valor Luneta Izquierda</label>
					<input type="text" disabled class="form-control" [(ngModel)]="left" name="left" id="left" placeholder="Valor Luneta Izquierda" />
				</div>

				<div *ngIf="quote && rearGlass.type.right == 'true'">				    	
					<label class="control-label">Valor Luneta Derecha</label>
					<input type="text" disabled class="form-control" [(ngModel)]="right" name="right" id="right" placeholder="Valor Luneta Derecha" />
				</div>
			</div>

			<div *ngIf="quote.type == 'parabrisa'">				    	
				<label class="control-label">Precio {{quote.quoteType}} {{quote.type}}</label>
				<input type="text" disabled class="form-control" [(ngModel)]="price" name="price" id="price" placeholder="Precio {{quote.quoteType}} {{quote.type}}" />
			</div>

			<form class="form-horizontal" *ngIf=responseForm [formGroup]="responseForm" (ngSubmit)="onSubmit($event)">
				<div class="form-group">

					<div *ngIf="quote.windscreenWiper == 1">
						<label class="control-label required">Valor de las plumillas</label>
						<input [ngClass]="{'is-invalid': responseForm.controls.windscreenPrice.errors && responseForm.get('windscreenPrice').touched }"
								type="text" disabled class="form-control" value="{{quote.windscreenPrice}}" formControlName="windscreenPrice" name="windscreenPrice" id="windscreenPrice" placeholder="Valor de las plumillas" required>
					</div>


					<div *ngIf="quote.securityFilm == 1">
						<label class="control-label required">Valor de la lamina</label>
						<input [ngClass]="{'is-invalid': responseForm.controls.securityPrice.errors && responseForm.get('securityPrice').touched }"
								type="text" disabled class="form-control" value="{{quote.securityPrice}}" formControlName="securityPrice" name="securityPrice" id="securityPrice" placeholder="Valor de la lamina" required>
					</div>

					<div class="">
						<label for="notes" class="control-label required">Observaciones</label>
						<input type="text" disabled class="form-control" [(ngModel)]="quote.notes" formControlName="notes" name="notes" id="notes" placeholder="Observaciones" required>
					</div>
				</div>
				
			</form>
		</div>
		<div style="margin-top: 30px;" *ngIf="quote && quote.status < 3">
			<h5>Generar cupón de cotización</h5>


			<div *ngIf="quote.sideGlass != ''">		    	
		    	<div *ngFor="let side of sideGlass; let i = index">
		        	<label class="control-label">Valor {{ side.describe }} - Lado {{ side.lado }}</label>
		        	<input type="text" class="form-control" [(ngModel)]="side.price" name="{{i}}" id="{{i}}" placeholder="Valor {{ side.describe }} - Lado {{ side.lado }}" />
		      	</div>
		    </div>

		    <div *ngIf="quote.rearGlass != ''">
			    <div *ngIf="quote && (rearGlass.type.unique == 'true' || (rearGlass.type.unique == 'false' && rearGlass.type.left == 'false' && rearGlass.type.right == 'false' && !quote.sideGlass && quote.type == 'luneta'))">			    	
			    	<label class="control-label">Valor luneta</label>
			        <input type="text" class="form-control" [(ngModel)]="unique" name="unique" id="unique" placeholder="Valor luneta" />
			    </div>

			    <div *ngIf="quote && rearGlass.type.left == 'true'">				    	
			    	<label class="control-label">Valor Luneta Izquierda</label>
			        <input type="text" class="form-control" [(ngModel)]="left" name="left" id="left" placeholder="Valor Luneta Izquierda" />
			    </div>

			    <div *ngIf="quote && rearGlass.type.right == 'true'">				    	
			    	<label class="control-label">Valor Luneta Derecha</label>
			        <input type="text" class="form-control" [(ngModel)]="right" name="right" id="right" placeholder="Valor Luneta Derecha" />
			    </div>
			</div>

			<div *ngIf="quote.type == 'parabrisa'">				    	
		    	<label class="control-label">Precio {{quote.quoteType}} {{quote.type}}</label>
		        <input type="text" class="form-control" [(ngModel)]="price" name="price" id="price" placeholder="Precio {{quote.quoteType}} {{quote.type}}" />
		    </div>

			<form class="form-horizontal" *ngIf=responseForm [formGroup]="responseForm" (ngSubmit)="onSubmit($event)">
			    <div class="form-group">

			    	<div *ngIf="quote.windscreenWiper == 1">
			        	<label class="control-label required">Valor de las plumillas</label>
			        	<input [ngClass]="{'is-invalid': responseForm.controls.windscreenPrice.errors && responseForm.get('windscreenPrice').touched }"
			          		type="text" class="form-control" value="{{quote.windscreenPrice}}" formControlName="windscreenPrice" name="windscreenPrice" id="windscreenPrice" placeholder="Valor de las plumillas" required>
			        	<div *ngIf="responseForm.controls.windscreenPrice.errors && responseForm.get('windscreenPrice').touched" class="text-danger">
			          		Valor de las plumillas obligatorio
			        	</div>
			      	</div>


			      	<div *ngIf="quote.securityFilm == 1">
			        	<label class="control-label required">Valor de la lamina</label>
			        	<input [ngClass]="{'is-invalid': responseForm.controls.securityPrice.errors && responseForm.get('securityPrice').touched }"
			          		type="text" class="form-control" value="{{quote.securityPrice}}" formControlName="securityPrice" name="securityPrice" id="securityPrice" placeholder="Valor de la lamina" required>
			        	<div *ngIf="responseForm.controls.securityPrice.errors && responseForm.get('securityPrice').touched" class="text-danger">
			          		Valor de la lamina obligatoria
			        	</div>
			      	</div>

			      	<div class="">
			        	<label for="notes" class="control-label required">Observaciones</label>
			        	<input type="text" class="form-control" [(ngModel)]="quote.notes" formControlName="notes" name="notes" id="notes" placeholder="Observaciones" required>
			        	<!-- [ngClass]="{'is-invalid': responseForm.controls.notes.errors && responseForm.get('notes').touched }" -->
			        	<div *ngIf="responseForm.controls.notes.errors && responseForm.get('notes').touched" class="text-danger">
			          		Observaciones obligatorias
			        	</div>
			      	</div>
			    </div>

			    <div class="checkbox"><label><strong><input type="checkbox" [checked]="sendToCustomer" (change)="sendToCustomer = !sendToCustomer" value="1" /> Cerrar cotización y notificar al cliente</strong></label></div>
				<button [disabled]="loading" class="btn btn-primary" type="submit">Guardar <span *ngIf="loading"><i class="fa fa-spinner fa-spin"></i></span></button>
		    	
			</form>
		</div>

	</div>

</div>