{% layout "layout-page-tabs" %}
{% block title %}Order Details{% endblock %}

{% block tablist %}
<li class="active"><a data-toggle="tab" href="#details">Details</a></li>
<li><a data-toggle="tab" href="#invoices">Invoice</a></li>
<li><a data-toggle="tab" href="#creditmemos">Credit Memos</a></li>
<li><a data-toggle="tab" href="#shipments">Shipments</a></li>
<li><a data-toggle="tab" href="#history">History</a></li>
{% endblock %}

{% block styles %}
{{ "plugins/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.min.css" | asset_url | stylesheet_tag }} 	<!-- Touchspin -->
{% endblock %}

{% block scripts %}
{{ "plugins/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.js" | asset_url | script_tag }} 				<!-- Touchspin -->

<script>
$(function() {
    $("input.touchspin").TouchSpin({
      verticalbuttons: true
    });
});
</script>
{% endblock %}

{% block content %} 

<div class="tab-content">
  <div class="tab-pane active" id="details">

		<div class="row">
			<div class="col-md-6">
				<div class="panel panel-default">
					<div class="panel-heading"><h2>Order Details</h2></div>
					<div class="panel-body">
						<table class="table mb0">
							<tbody>
								<tr>
									<th>Order #</th>
									<td>650,912</td>
								</tr>
								<tr>
									<th>Order Date and Time</th>
									<td>28 July 2014, 03:34:35 PM</td>
								</tr>
								<tr>
									<th>Order Status</th>
									<td><span class="label label-info">Open</span></td>
								</tr>
								<tr>
									<th>Total</th>
									<td>$124.21</td>
								</tr>
								<tr>
									<th>Payment Option</th>
									<td>Credit Card, VISA</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
			<div class="col-md-6">
				<div class="panel panel-default">
					<div class="panel-heading"><h2>Customer Information</h2></div>
					<div class="panel-body">
						<table class="table mb0">
							<tbody>
								<tr>
									<th>Customer Name</th>
									<td>Mikasa Ackerman</td>
								</tr>
								<tr>
									<th>Email</th>
									<td>m.ackerman@surveycorps.org</td>
								</tr>
								<tr>
									<th>City</th>
									<td>New York City, New York</td>
								</tr>
								<tr>
									<th>Phone Number</th>
									<td>0118 999 881 999 119 7253</td>
								</tr>
								<tr>
									<th>Payment Option</th>
									<td>Credit Card, VISA</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-6">
				<div class="panel panel-default">
					<div class="panel-heading"><h2>Billing Address</h2></div>
					<div class="panel-body">
						<address>
							<strong>Mikasa Ackerman</strong> <br>
							2101 Upper West Side, Bronx <br>
							New York City, New York 20008 <br>
							United States <br>
							<br>
							P: 0118 999 881 999 119 7253
						</address>
					</div>
				</div>
			</div>
			<div class="col-md-6">
				<div class="panel panel-default">
					<div class="panel-heading"><h2>Shipping Address</h2></div>
					<div class="panel-body">
						<address>
							<strong>Mikasa Ackerman</strong> <br>
							2101 Upper West Side, Bronx <br>
							New York City, New York 20008 <br>
							United States <br>
							<br>
							P: 0118 999 881 999 119 7253
						</address>
					</div>
				</div>
			</div>
		</div>

		<div class="row">
			<div class="col-xs-12">
				<div class="store">
		<div class="panel">
			<div class="panel-heading">
				<h2>Shopping Cart</h2>
			</div>
			<div class="panel-body panel-no-padding">
				<table class="table-striped table table-vam">
					<thead>
						<th>ID</th>
						<th>Product</th>
						<th>Name</th>
						<th>Price</th>
						<th>Quantity</th>
						<th style="text-align: right;">Subtotal</th>
					</thead>
					<tbody>
						<tr>
							<td>#001</td>
							<td>S</td>
							<td>S</td>
							<td>$500</td>
							<td style="width: 80px;"><input type="text" class="form-control touchspin" value="1"></td>
							<td style="text-align: right;">$500</td>
						</tr>
						<tr>
							<td>#002</td>
							<td>S</td>
							<td>S</td>
							<td>$500</td>
							<td style="width: 80px;"><input type="text" class="form-control touchspin" value="1"></td>
							<td style="text-align: right;">$500</td>
						</tr>
						<tr>
							<td>#003</td>
							<td>S</td>
							<td>S</td>
							<td>$500</td>
							<td style="width: 80px;"><input type="text" class="form-control touchspin" value="1"></td>
							<td style="text-align: right;">$500</td>
						</tr>
						<tr>
							<td>#004</td>
							<td>S</td>
							<td>S</td>
							<td>$500</td>
							<td style="width: 80px;"><input type="text" class="form-control touchspin" value="1"></td>
							<td style="text-align: right;">$500</td>
						</tr>
					</tbody>
					<tfoot>
						<tr class="success">
							<td colspan="5" class="text-right"><strong>Total</strong></td>
							<td style="text-align: right;"><strong>$2500</strong></td>
						</tr>
					</tfoot>
				</table>
				<div class="panel-footer ml0 mb0 mr0">
					<div class="pull-right">
						<button class="btn btn-warning"><i class="fa fa-refresh"></i> Update Card</button>
						<button class="btn btn-success"><i class="fa fa-check"></i> Check Out</button>
					</div>
				</div>
			</div>
		</div>

	</div>
			</div>
			<div class="col-sm-6 col-sm-offset-6 col-xs-12">
				<div class="panel">
					<div class="panel-body panel-no-padding">
						<table class="table">
							<tr>
								<th>Sub Total</th>
								<td>$2,141.00</td>
							</tr>
							<tr>
								<th>Shipping</th>
								<td>$50.00</td>
							</tr>
							<tr>
								<th>Grand Total</th>
								<td><strong>$2,191.00</strong></td>
							</tr>
							<tr>
								<th>Total Paid</th>
								<td><strong>$2,191.00</strong></td>
							</tr>
							<tr>
								<th>Total Refunded</th>
								<td>$0.00</td>
							</tr>
							<tr>
								<th>Total Due</th>
								<td><strong>$0.00</strong></td>
							</tr>
						</table>
					</div>
				</div>
			</div>
		</div>

  </div>

  <div class="tab-pane" id="invoices">
  	<div class="panel">
  		<div class="panel-body panel-no-padding">
		  	<table class="table table-striped table-hover">
				<thead>
					<tr>
						<th>Invoice #</th>
						<th>Bill To</th>
						<th>Invoice Date</th>
						<th>Amount</th>
						<th>Status</th>
						<th>Actions</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>12</td>
						<td>Sidney Sheldon</td>
						<td>29/02/2014</td>
						<td>$331</td>
						<td><span class="label label-info">Paid</span></td>
						<td><button class="btn btn-default btn-xs"><i class="fa fa-print"></i> Print</button></td>
					</tr>
					<tr>
						<td>12</td>
						<td>Sidney Sheldon</td>
						<td>29/02/2014</td>
						<td>$331</td>
						<td><span class="label label-info">Paid</span></td>
						<td><button class="btn btn-default btn-xs"><i class="fa fa-print"></i> Print</button></td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
  </div>

  <div class="tab-pane" id="creditmemos">
  	<div class="panel">
  		<div class="panel-body panel-no-padding">
  			<table class="table table-striped table-hover">
				<thead>
					<tr>
						<th>Credit Memo #</th>
						<th>Bill To</th>
						<th>Date Created</th>
						<th>Status</th>
						<th>Actions</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>12</td>
						<td>Sidney Sheldon</td>
						<td>29/02/2014</td>
						<td><span class="label label-primary">Paid</span></td>
						<td><button class="btn btn-default btn-xs"><i class="fa fa-print"></i> Print</button></td>
					</tr>
					<tr>
						<td>12</td>
						<td>Sidney Sheldon</td>
						<td>29/02/2014</td>
						<td><span class="label label-info">Pending</span></td>
						<td><button class="btn btn-default btn-xs"><i class="fa fa-print"></i> Print</button></td>
					</tr>
				</tbody>
			</table>
  		</div>
  	</div>
  </div>

  <div class="tab-pane" id="shipments">
  	<div class="panel">
  		<div class="panel-body panel-no-padding">
  			<table class="table table-striped table-hover">
						<thead>
							<tr>
								<th>Shipment #</th>
								<th>Ship To</th>
								<th>Shipped Date</th>
								<th>Quantity</th>
								<th>Status</th>
								<th>Actions</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>12</td>
								<td>Sidney Sheldon</td>
								<td>29/02/2014</td>
								<td>1</td>
								<td><span class="label label-success">Successful</span></td>
								<td><button class="btn btn-default btn-xs"><i class="fa fa-print"></i> Print</button></td>
							</tr>
							<tr>
								<td>12</td>
								<td>Sidney Sheldon</td>
								<td>29/02/2014</td>
								<td>4</td>
								<td><span class="label label-info">Pending</span></td>
								<td><button class="btn btn-default btn-xs"><i class="fa fa-print"></i> Print</button></td>
							</tr>
						</tbody>
					</table>
  		</div>
  	</div>
  </div>

  <div class="tab-pane" id="history">
  	<div class="panel">
  		<div class="panel-body panel-no-padding">
  			<table class="table table-striped table-hover">
				<thead>
					<tr>
						<th>Date/Time</th>
						<th>Description</th>
						<th>Status</th>
						<th>Actions</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>29/02/2014 04:12:31 PM</td>
						<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td>
						<td><span class="label label-success">Successful</span></td>
						<td><button class="btn btn-default btn-xs"><i class="fa fa-print"></i> Print</button></td>
					</tr>
					<tr>
						<td>29/02/2014 04:12:31 PM</td>
						<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td>
						<td><span class="label label-info">Pending</span></td>
						<td><button class="btn btn-default btn-xs"><i class="fa fa-print"></i> Print</button></td>
					</tr>
				</tbody>
			</table>
  		</div>
	</div>
  </div>
</div>
{% endblock %}