{% layout 'layout' %}
{% block title %}Shipping status{% endblock %}

{% block breadcrumb %}
<li><a href="index.html">Home</a></li>
<li>App Templates</li>
<li>Blog</li>
<li class="active"><a href="shipping-status.html">Shipping status</a></li>
{% endblock %}

{% block styles %}
{{ "plugins/nvd3/nv.d3.min.css" | asset_url | stylesheet_tag }} 		<!-- nvd3 -->
{% endblock %}

{% block scripts %}
{{ "plugins/d3/d3.min.js" | asset_url | script_tag }}             		<!-- nvd3 dependency -->
{{ "plugins/nvd3/nv.d3.min.js" | asset_url | script_tag }} 				<!-- nvd3 -->

{{ "demo/demo-shipping-status.js" | asset_url | script_tag }}          <!-- shipping-status -->
{% endblock %}

{% block content %}
<div class="col-sm-5">
	<div class="panel panel-default">
		<div class="panel-heading">
			<h2>Orders</h2>
		</div>
		<div class="panel-body panel-no-padding">
			<div id="demo">
				<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-fixed-header m0" id="example">
					<thead>
						<tr>
							<th></th>
							<th>Customer</th>
							<th>Order Status</th>
							<th>Order Date</th>
						</tr>
					</thead>
					<tbody>
						<tr class="gradeX">
							<td><div style="width: 10px; height: 10px; background-color: #f00; margin-top: 5px;"></div></td>
							<td>Testa Inc.</td>
							<td>Backordered</td>
							<td>Oct 30, 2011</td>
						</tr>
						<tr class="gradeX">
							<td><div style="width: 10px; height: 10px; background-color: #f00; margin-top: 5px;"></div></td>
							<td>Weldon</td>
							<td>Backordered</td>
							<td>Oct 30, 2011</td>
						</tr>
						<tr class="gradeX">
							<td><div style="width: 10px; height: 10px; background-color: #f00; margin-top: 5px;"></div></td>
							<td>Johny's</td>
							<td>Backordered</td>
							<td>Oct 30, 2011</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div><!-- panel panel-default -->
	<div class="panel panel-default">
		<div class="panel-heading">
			<h2>Global Financial Performance</h2>
		</div>
		<div class="panel-body">
			<div id="chart1">
			    <svg></svg>
			</div>
			</div><!-- panel-body-->
	</div><!-- panel panel-default -->
</div><!-- col-sm-5 -->
<div class="col-sm-7">
	<div class="panel-body">
			<div class="col-md-4">
	    		<a class="info-tiles tiles-inverse has-footer" href="#">
				    <div class="tiles-heading">
				        <div class="pull-left">Orders to Ship</div>
				    </div>
				    <div class="tiles-body">
				        <div class="text-center">106</div>
				    </div>
				    <div class="tiles-footer">
				    	<div class="pull-left">manage to Ship</div>
				    </div>
				</a>
		    </div><!-- col-sm-4 -->
	    	<div class="col-md-4">
	    		<a class="info-tiles tiles-green has-footer" href="#">
				    <div class="tiles-heading">
				        <div class="pull-left">Overdue Shipments</div>
				    </div>
				    <div class="tiles-body">
				        <div class="text-center">20</div>
				    </div>
				    <div class="tiles-footer">
				    	<div class="pull-left">go to Shipments</div>
				    </div>
				</a>
	    	</div><!-- col-sm-4 -->
	    	<div class="col-md-4">
	    		<a class="info-tiles tiles-blue has-footer" href="#">
				    <div class="tiles-heading">
				        <div class="pull-left">Open POs</div>
				    </div>
				    <div class="tiles-body">
				        <div class="text-center">120</div>
				    </div>
				    <div class="tiles-footer">
				    	<div class="pull-left">see Open POs</div>
				    </div>
				</a>
	    	</div><!-- col-sm-4 -->
    </div><!-- panel-body -->
	<div class="panel panel-default">
		<div class="panel-heading">
			<h2>Inventory</h2>
		</div>
		<div class="panel-body panel-no-padding">
			<div id="demo">
				<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-fixed-header m0" id="example">
					<thead>
						<tr>
							<th>Category</th>
							<th>Product	</th>
							<th>SKU</th>
							<th>In Stock</th>
						</tr>
					</thead>
					<tbody>
						<tr class="gradeX">
							<td>Electronics</td>
							<td>Sony Bravia KDL-42v4100</td>
							<td>78945</td>
							<td>10</td>
						</tr>
						<tr class="gradeX">
							<td>Electronics</td>
							<td>LG42PQ60</td>
							<td>874842</td>
							<td>6</td>
						</tr>
						<tr class="gradeX">
							<td>Electronics</td>
							<td>Sharp LC46D65U</td>
							<td>874101</td>
							<td>12</td>
						</tr>
					</tbody>
				</table>
			</div><!-- demo -->
			<svg id="test1" class="mypiechart" style="height: 300px;"></svg>
		</div><!-- panel-body panel-no-padding -->
	</div><!-- panel panel-default -->
	<div class="panel panel-default">
		<div class="panel-heading">
			<h2>Inventory</h2>
		</div>
		<div class="panel-body panel-no-padding">
			<div id="demo">
				<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-fixed-header m0" id="example">
					<thead>
						<tr>
							<th></th>
							<th>Metric</th>
							<th>This Month</th>
							<th>Past Month</th>
							<th>Charige</th>
							<th>Past 30 Days</th>
						</tr>
					</thead>
					<tbody>
						<tr class="gradeX">
							<td><div style="width: 10px; height: 10px; background-color: #f00; margin-top: 5px;"></div></td>
							<td>Inventory</td>
							<td>$826,905</td>
							<td>$754,638</td>
							<td>10%</td>
							<td><span class="linecharts" values="6,3,8,1,3,2,4,5,6,3,2"><canvas width="33" height="18" style="display: inline-block; width: 33px; height: 18px; vertical-align: top;"></canvas></span></td>
						</tr>
						<tr class="gradeX">
							<td><div style="width: 10px; height: 10px; background-color: #f00; margin-top: 5px;"></div></td>
							<td>Shipping</td>
							<td>$23,092</td>
							<td>$25,748</td>
							<td>-10%</td>
							<td><span class="linecharts" values="6,3,8,1,3,2,4,5,6,3,2"><canvas width="33" height="18" style="display: inline-block; width: 33px; height: 18px; vertical-align: top;"></canvas></span></td>
						</tr>
						<tr class="gradeX">
							<td><div style="width: 10px; height: 10px; background-color: #f00; margin-top: 5px;"></div></td>
							<td>Perfect Order Rate</td>
							<td>94.5%</td>
							<td>94.1%</td>
							<td>0</td>
							<td><span class="linecharts" values="6,3,8,1,3,2,4,5,6,3,2"><canvas width="33" height="18" style="display: inline-block; width: 33px; height: 18px; vertical-align: top;"></canvas></span></td>
						</tr>
					</tbody>
				</table>
			</div><!-- demo -->			
		</div><!-- panel-body panel-no-padding -->
	</div><!-- panel panel-default -->
</div><!-- col-sm-7 -->
{% endblock %}