{% layout 'layout' %}
{% block title %}Sales Performance{% endblock %}

{% block breadcrumb %}
<li><a href="index.html">Home</a></li>
<li>App Templates</li>
<li>Blog</li>
<li class="active"><a href="sales-performance.html">Sales Performance</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 -->

{{ "plugins/jQuery-Mapael/js/raphael/raphael-min.js" | asset_url | script_tag }}        <!-- Load Raphael as Dependency -->

{{ "plugins/jQuery-Mapael/js/jquery.mapael.js" | asset_url | script_tag }}              <!-- jQuery Mapael -->

{{ "plugins/jquery-mousewheel/jquery.mousewheel.min.js" | asset_url | script_tag }}      <!-- MouseWheel Support -->
{{ "plugins/jQuery-Mapael/js/maps/usa_states.js" | asset_url | script_tag }}            <!-- Vector Data of USA States -->

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

{% block content %} 
<div class="row">
	<div class="col-sm-4">
		<div class="panel panel-default">
			<div class="panel-heading">
				<h2>Opportunity Breakdown - QTD</h2>
			</div>
			<div class="panel-body panel-no-padding">
				<svg id="test1" class="mypiechart" style="height: 500px;"></svg>
			</div><!-- panel-body panel-no-padding -->
		</div><!-- panel panel-default -->
		<div class="panel panel-default">
			<div class="panel-heading">
				<h2>Top Products in Revenue</h2>
			</div>
			<div class="panel-body panel-no-padding">
				<svg id="test2" class="mypiechart" style="height: 500px;"></svg>
			</div><!-- panel-body panel-no-padding -->
		</div><!-- panel panel-default -->
	</div><!-- col-sm-4 -->
	<div class="col-sm-8">
		<div class="panel">
	        <div class="panel-heading">
	            <h2>Booking QTD</h2>
	        </div>
	        <div class="panel-body">
		        <div id="chart1" style="height: 300px;">
				    <svg> </svg>
				</div>
			</div>
	    </div>
	    <div class="panel panel-default">
	        <div class="panel-heading">
	            <h2>Regional Sales Status</h2>
	        </div>
	        <div class="panel-body">
	            <div class="map-usa">
	                <div class="map">
	                    <span>Alternative content for the map</span>
	                </div>
	            </div>
	        </div>
	    </div>
	</div><!-- col-sm-8 -->
</div> <!-- row -->
{% endblock %}