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

{% block breadcrumb %}
<li><a href="index.html">Home</a></li>
<li>App Templates</li>
<li>Blog</li>
<li class="active"><a href="sales-force.html">Sales Force</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-sales-force.js" | asset_url | script_tag }}               <!-- sales-force -->
{% endblock %}

{% block content %} 
<div class="col-sm-6">
	<div class="panel_violet">
      <div class="panel_heading_violet"><h2>2010 / 2011 Revenue</h2></div>
      <div class="panel-body" style="height:300px">
	      <div id="chart2" class='with-3d-shadow with-transitions'>
			    <svg> </svg>
			</div>
	 </div><!-- panel-body -->
    </div><!-- panel panel-default -->


    <div class="panel panel-default">
		<div class="panel-heading">
			<h2>Opportunities</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>Name</th>
							<th>Value</th>
							<th>State</th>
							<th>Last Contact</th>
						</tr>
					</thead>
					<tbody>
						<tr class="gradeX">
							<td>Golden Finch Inc</div></td>
							<td>$450K</td>
							<td>Active</td>
							<td>June 22</td>
						</tr>
						<tr class="gradeX">
							<td>Trial Enterprises</div></td>
							<td>$535K</td>
							<td>Active</td>
							<td>May 01</td>
						</tr>
						<tr class="gradeX">
							<td>Good Ideas Inc</div></td>
							<td>$245K</td>
							<td>Parked</td>
							<td>April 29</td>
						</tr>
						<tr class="gradeX">
							<td>Great Bikers</div></td>
							<td>$650K</td>
							<td>Active</td>
							<td>June 13</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div><!-- panel panel-default -->
	<div class="panel panel-default">
        <div class="panel-heading">
            <h2>Sales Per Rep</h2>
        </div>
        <div class="panel-body">
        <div id="chart3" style="height:300px">
		    <svg></svg>
		</div>
		</div><!-- panel-body -->
    </div><!-- panel panel-default -->	
</div><!-- col-sm-6 -->
<div class="col-sm-6">
	<div class="panel panel-default">
      <div class="panel-heading"><h2>Leads this Month</h2></div>
      <div class="panel-body">
      	<div id="chart" style="height: 65px"><svg></svg></div>
      </div>
    </div><!-- panel panel-default -->
    <div class="panel-body">
		<a class="info-tiles tiles-blue has-footer" href="#">
		    <div class="tiles-heading">
		        <div class="pull-left">Quote to Closing Ratio</div>
		    </div>
		    <div class="tiles-body">
		        <div class="text-center">55.75% MTD</div>
		    </div>
		    <div class="tiles-footer">
		    	<div class="pull-left">52.5% Last Month</div>
		    </div>
		</a><!-- info-tiles tiles-blue has-footer -->
    </div><!-- panel-body -->
    <div class="panel panel-default">
      <div class="panel-heading"><h2>Top 5 Products in Sales Revenue</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>Product YoY +/-</th>
							<th>2011 Sales</th>
							<th>Sales YTD</th>
							<th>Trend Past 12 Months</th>
						</tr>
					</thead>
					<tbody>
						<tr class="gradeX">
							<td>Product1</td>
							<td>$225,000</td>
							<td>$205,049</td>
							<td><span class="linecharts" values="6,3,8,1,3,2,4,5,6,3,2,6,3,8,1,3,2,4,5,6,3,2,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>Product2</td>
							<td>$187,500</td>
							<td>$104,803</td>
							<td><span class="linecharts" values="6,3,8,1,3,2,4,5,6,3,2,6,3,8,1,3,2,4,5,6,3,2,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>Product3</td>
							<td>$176,000</td>
							<td>$170,874</td>
							<td><span class="linecharts" values="6,3,8,1,3,2,4,5,6,3,2,6,3,8,1,3,2,4,5,6,3,2,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>Product4</td>
							<td>$160,000</td>
							<td>$118,473</td>
							<td><span class="linecharts" values="6,3,8,1,3,2,4,5,6,3,2,6,3,8,1,3,2,4,5,6,3,2,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>Product5</td>
							<td>$145,000</td>
							<td>$111,638</td>
							<td><span class="linecharts" values="6,3,8,1,3,2,4,5,6,3,2,6,3,8,1,3,2,4,5,6,3,2,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 class="panel panel-default">
		<div class="panel-heading">
			<h2>Regional Sales</h2>
		</div>
		<div class="panel-body panel-no-padding">
			<svg id="test1" class="mypiechart" style="height: 300px;"></svg>
		</div><!-- panel-body panel-no-padding -->
	</div><!-- panel panel-default -->
</div><!-- col-sm-6 -->
{% endblock %}