<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">
<head>
<title>Customer registration</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href=""
	th:href="@{/resources/css/bootstrap.min.css}" />
<link rel="stylesheet" href=""
	th:href="@{/resources/css/bootstrap-responsive.min.css}" />
<style type="text/css">
body {
	padding-top: 20px;
	padding-bottom: 40px;
}

/* Custom container */
.container-narrow {
	margin: 0 auto;
	max-width: 700px;
}

.container-narrow>hr {
	margin: 30px 0;
}

/* Main marketing message and sign up button */
.jumbotron {
	margin: 60px 0;
	text-align: center;
}

.jumbotron h1 {
	font-size: 72px;
	line-height: 1;
}

.jumbotron .btn {
	font-size: 21px;
	padding: 14px 24px;
}

/* Supporting marketing content */
.marketing {
	margin: 60px 0;
}

.marketing p+h4 {
	margin-top: 28px;
}

.promotional {
	margin: auto;
	width: 550px;
}

.promotional .pull-left {
	padding-right: 10px;
}

.left-column table td,.right-column table td {
	width: 150px;
	text-align: center;
}

.myLabel {
	width: 150px;
	font-weight: bold;
	text-align: right;
}

.content {
	margin-left: 10px;
}

.payment .myLabel {
	width: 250px;
}
</style>
</head>
<body>
	<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="masthead">
					<ul class="nav nav-pills pull-right">
						<li><a href="#" th:href="@{${searchUrl}}">Search</a></li>
						<li><a href="#" th:href="@{${shoppingCartUrl}}">Shopping
								cart</a></li>
						<li><a href="#" th:href="@{${orderInquiryUrl}}">Order
								list</a></li>
					</ul>
					<h3 class="muted">
						<a href="/" th:href="@{${homeUrl}}"><img
							th:src="@{/resources/img/logo-CloudScale.png}" /></a>
					</h3>
				</div>

				<hr />

				<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>
</body>
</html>