<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
  layout:decorator="/templates/layout">
  <head>
  	<title>Buy</title>
  </head>
<body>
<div layout:fragment="content">
	<div class="container-narrow">
		<div th:if="${!errors.isEmpty()}" class="alert alert-error">
			<div th:each="error : ${errors}" th:text="${error}"></div>
		</div>
		<div th:unless="${!errors.isEmpty()}">
			<form th:action="@{/buy-confirm(C_ID=${customer.CId})}" method="get">
				<div class="billing-info">
					<h2>Billing information:</h2>
					<table>
						<tr>
							<td>Firstname:</td>
							<td th:text="${customer.CFname}"></td>
						</tr>
						<tr>
							<td>Lastname:</td>
							<td th:text="${customer.CLname}"></td>
						</tr>
					</table>
					<div class="pull-left myLabel">Address street1:</div>
					<div class="pull-left content"
						th:text="${customer.address.addrStreet1}"></div>
					<div class="clearfix"></div>
					<div class="pull-left myLabel">Address street2:</div>
					<div class="pull-left content"
						th:text="${customer.address.addrStreet2}"></div>
					<div class="clearfix"></div>
					<div class="pull-left myLabel">City:</div>
					<div class="pull-left content"
						th:text="${customer.address.addrCity}"></div>
					<div class="clearfix"></div>
					<div class="pull-left myLabel">State:</div>
					<div class="pull-left content"
						th:text="${customer.address.addrState}"></div>
					<div class="clearfix"></div>
					<div class="pull-left myLabel">Zip:</div>
					<div class="pull-left content"
						th:text="${customer.address.addrZip}"></div>
					<div class="clearfix"></div>
					<div class="pull-left myLabel">Country:</div>
					<div class="pull-left content"
						th:text="${customer.address.country.coName}"></div>
					<div class="clearfix"></div>
					<div class="pull-left myLabel">Email</div>
					<div class="pull-left content" th:text="${customer.CEmail}">
					</div>
					<div class="clearfix"></div>
					<div class="pull-left myLabel">Phone:</div>
					<div class="pull-left content" th:text="${customer.CPhone}">
					</div>
					<div class="clearfix"></div>
					<div class="pull-left myLabel">Address street1:</div>
					<div class="pull-left content"
						th:text="${customer.address.addrStreet1}"></div>
					<div class="clearfix"></div>
				</div>
				<hr />
				<div class="shipping-info">
					<h2>Shipping information:</h2>
					<div class="pull-left myLabel">Address street1:</div>
					<div class="pull-left content">
						<input type="text" name="street1" />
					</div>
					<div class="clearfix"></div>
					<div class="pull-left myLabel">Address street 2:</div>
					<div class="pull-left content">
						<input type="text" name="street2" />
					</div>
					<div class="clearfix"></div>
					<div class="pull-left myLabel">City:</div>
					<div class="pull-left content">
						<input type="text" name="city" />
					</div>
					<div class="clearfix"></div>
					<div class="pull-left myLabel">State:</div>
					<div class="pull-left content">
						<input type="text" name="state" />
					</div>
					<div class="clearfix"></div>
					<div class="pull-left myLabel">Zip:</div>
					<div class="pull-left content">
						<input type="text" name="zip" />
					</div>
					<div class="clearfix"></div>
					<div class="pull-left myLabel">Country:</div>
					<div class="pull-left content">
						<input type="text" name="country" />
					</div>
					<div class="clearfix"></div>
				</div>
				<div class="clearfix"></div>
				<hr />
				<h2>Order information:</h2>
				<div>
					<table class="table">
						<thead>
							<tr>
								<th>OTY</th>
								<th>Product</th>
							</tr>
						</thead>
						<tbody>
							<tr th:each="line, i : ${cart.shoppingCartLines}">
								<td th:text="${line.sclQty}"></td>
								<td>Title: <i th:text="${line.item.ITitle}"></i> - Backing:
									<span th:text="${line.item.IBacking}"></span><br /> SRP. $<span
									th:text="${line.item.ISrp}"></span> <span style="color: red;"><strong>Your
											Price: <span th:text="${line.item.ICost}"></span>
									</strong></span>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
				<div>
					Subtotal width discount (0.0%): $<span th:text="${subTotal}"></span><br />
					Tax:<br /> Shipping and Handling: <br /> Total: $<span
						th:text="${subTotal}"></span><br />
				</div>
				<hr />
				<div class="payment">
					<div class="pull-left myLabel">CreditCartType</div>
					<div class="pull-left content">
						<label class="radio pull-left"> <input type="radio"
							name="CC_TYPE" value="Visa" checked="checked" />Visa&nbsp;
						</label> <label class="radio pull-left"> <input type="radio"
							name="CC_TYPE" value="MasterCard" />MasterCard&nbsp;
						</label> <label class="radio pull-left"> <input type="radio"
							name="CC_TYPE" value="Discover" />Discover&nbsp;
						</label> <label class="radio pull-left"> <input type="radio"
							name="CC_TYPE" value="Amex" />American Express&nbsp;
						</label> <label class="radio pull-left"> <input type="radio"
							name="CC_TYPE" value="Diners" />Diners&nbsp;
						</label>
					</div>
					<div class="clearfix"></div>
					<div class="pull-left myLabel">Name on Credit Card</div>
					<div class="pull-left content">
						<input name="CC_NAME" />
					</div>
					<div class="clearfix"></div>
					<div class="pull-left myLabel">Credit Card Number</div>
					<div class="pull-left content">
						<input name="CC_NUMBER" />
					</div>
					<div class="clearfix"></div>
					<div class="pull-left myLabel">Credit Card Expiration Date
						(mm/dd/yyyy)</div>
					<div class="pull-left content">
						<input name="CC_EXPIRY" />
					</div>
					<div class="clearfix"></div>
					<div class="pull-left myLabel">Shipping method</div>
					<div class="pull-left content">
						<label class="radio pull-left"> <input type="radio"
							name="SHIPPING" value="AIR" checked="checked" />AIR&nbsp;
						</label> <label class="radio pull-left"> <input type="radio"
							name="SHIPPING" value="UPS" />UPS&nbsp;
						</label> <label class="radio pull-left"> <input type="radio"
							name="SHIPPING" value="FEDEX" />FEDEX&nbsp;
						</label> <label class="radio pull-left"> <input type="radio"
							name="SHIPPING" value="SHIP" />SHIP&nbsp;
						</label> <label class="radio pull-left"> <input type="radio"
							name="SHIPPING" value="COURIER" />COURIER&nbsp;
						</label> <label class="radio pull-left"> <input type="radio"
							name="SHIPPING" value="MAIL" />MAIL&nbsp;
						</label>
					</div>
					<div class="clearfix"></div>
				</div>
				<input th:if="${cart}" th:value="${cart.scId}" type="hidden"
					name="SHOPPING_ID" /> <input th:if="${customer}"
					th:value="${customer.CId}" type="hidden" name="C_ID" /> <input
					class="btn btn-primary" type="submit" value="Submit" />
			</form>
		</div>
	</div>
</div>
</body>
</html>