<!DOCTYPE html>
<html>
<head>
	<title>Example Template</title>
	<link rel="stylesheet" type="text/css" href="{stylesheet=store_example/style}" />
	{exp:jquery:script_tag}
</head>
<body>
<div id="header">
	<h1>Example Templates</h1>
</div>
<div id="page">
	<h2>Enter your details</h2>
	{exp:store:checkout form_name="checkout_details" next="store_example/checkout_confirm" error_handling="inline" error_delimiters='<span style="color: red">|</span>'
		require="name|address1|address3|country"}

		<div class="clear"></div>

		<table class="pad">
			<tr>
				<th colspan="2">Billing Details</th>
			</tr>
            <tr>
                    <td style="width:30%;{if error:billing_name}color: red;{/if}">Name*</td>
                    <td style="width:70%;"><input type="text" name="billing_name" value="{billing_name}" />
                            <p class="form_error">{error:billing_name}</p>
                    </td>
            </tr>
            <tr>
                    <td {if error:billing_address1}style="color: red;"{/if} >Address*</td>
                    <td>
                            <input type="text" name="billing_address1" value="{billing_address1}" />
                            <p class="form_error">{error:billing_address1}</p>
                    </td>
            </tr>
	    <tr>
	            <td></td>
	            <td>
	                    <input type="text" name="billing_address2" value="{billing_address2}" />
	                    <p class="form_error">{error:billing_address2}</p>
	            </td>
	    </tr>
            <tr>
                    <td {if error:billing_address3}style="color: red;"{/if} >City*</td>
                    <td>
                            <input type="text" name="billing_address3" value="{billing_address3}" />
                            <p class="form_error">{error:billing_address3}</p>
                    </td>
            </tr>
            <tr>
                    <td {if error:billing_region}style="color: red;"{/if} >Region</td>
                    <td>
                            <select name="billing_region">
                                    {billing_region_options}
                            </select>
                            <p class="form_error">{error:billing_region}</p>
                    </td>
            </tr>
            <tr>
                    <td {if error:billing_country}style="color: red;"{/if} >Country*</td>
                    <td>
                            <select name="billing_country">
                                    {billing_country_options}
                            </select>
                            <p class="form_error">{error:billing_country}</p>
                    </td>
            </tr>
            <tr>
                    <td {if error:billing_postcode}style="color: red;"{/if} >Post Code</td>
                    <td>
                            <input type="text" name="billing_postcode" value="{billing_postcode}" />
                            <p class="form_error">{error:billing_postcode}</p>
                    </td>
            </tr>
            <tr>
                    <td {if error:billing_phone}style="color: red;"{/if} >Phone</td>
                    <td>
                            <input type="text" name="billing_phone" value="{billing_phone}" />
                            <p class="form_error">{error:billing_phone}</p>
                    </td>
            </tr>
            <tr>
                    <td {if error:order_email}style="color: red;"{/if}>Email*</td>
                    <td>
                            <input type="text" name="order_email" value="{order_email}" />
                            <p class="form_error">{error:order_email}</p>
                    </td>
            </tr>
            <tr>
                    <td>Comments</td>
                    <td>
                            <textarea name="order_custom1" rows="3">{order_custom1}</textarea>
                    </td>
            </tr>
            <tr>
                    <td>Same as billing</td>
                    <td><input type="checkbox" id="order_shipping_same_as_billing" name="shipping_same_as_billing" value="y" {if shipping_same_as_billing} checked="checked" {/if} /></td>
            </tr>
		</table>
		<br /><br />
		<div id="order_shipping_details">
			<table class="pad">
	            <tr>
	                    <th colspan="2">Shipping Details</th>
	            </tr>

	            <tr>
	                    <td style="width:30%;{if error:shipping_name} color: red;{/if}" >Name*</td>
	                    <td style="width:80%;"><input type="text" name="shipping_name" value="{shipping_name}" />
	                            <p class="form_error">{error:shipping_name}</p>
	                    </td>
	            </tr>
	            <tr>
	                    <td {if error:shipping_address1 OR error:shipping_address2}style="color: red;"{/if} >Address*</td>
	                    <td>
	                            <input type="text" name="shipping_address1" value="{shipping_address1}" />
	                            <p class="form_error">{error:shipping_address1}</p>
	                    </td>
	            </tr>
	            <tr>
	                    <td></td>
	                    <td>
	                            <input type="text" name="shipping_address2" value="{shipping_address2}" />
	                            <p class="form_error">{error:shipping_address2}</p>
	                    </td>
	            </tr>
	            <tr>
	                    <td {if error:shipping_address3}style="color: red;"{/if} >City*</td>
	                    <td>
	                            <input type="text" name="shipping_address3" value="{shipping_address3}" />
	                            <p class="form_error">{error:shipping_address3}</p>
	                    </td>
	            </tr>
	            <tr>
	                    <td {if error:shipping_region}style="color: red;"{/if} >Region</td>
	                    <td>
	                            <select name="shipping_region">
	                                    {shipping_region_options}
	                            </select>
	                            <p class="form_error">{error:shipping_region}</p>
	                    </td>
	            </tr>
	            <tr>
	                    <td {if error:shipping_country}style="color: red;"{/if} >Country*</td>
	                    <td>
	                            <select name="shipping_country">
	                                    {shipping_country_options}
	                            </select>
	                            <p class="form_error">{error:shipping_country}</p>
	                    </td>
	            </tr>
	            <tr>
	                    <td {if error:shipping_postcode}style="color: red;"{/if} >Post Code</td>
	                    <td>
	                            <input type="text" name="shipping_postcode" value="{shipping_postcode}" />
	                            <p class="form_error">{error:shipping_postcode}</p>
	                    </td>
	            </tr>
	            <tr>
	                    <td {if error:shipping_phone}style="color: red;"{/if} >Phone</td>
	                    <td>
	                            <input type="text" name="shipping_phone" value="{shipping_phone}" />
	                            <p class="form_error">{error:shipping_phone}</p>
	                    </td>
	            </tr>

	        </table>
		</div>

		<div style="text-align: right">
			<span>&laquo; <a href="{path='store_example'}">back to shop</a></span>
			<input type="submit" name="next" value="Continue" />
		</div>

	{/exp:store:checkout}

	<script type="text/javascript">
		$(document).ready(function() {
			$('#order_shipping_same_as_billing').change(function() {
				$('#order_shipping_details').slideToggle(this.checked);
			});
			if ($('#order_shipping_same_as_billing').is(':checked')) {
				$('#order_shipping_details').hide();
			}
		});
	</script>


</div>

</body>
</html>