{% extends "AppBundle::layout.html.twig" %}

{% block stylesheets %}
	{{parent()}}
	{% stylesheets filter='cssrewrite'
"bundles/app/js/c3-0.4.10/c3.css"
"bundles/app/js/jsdatepick-calendar/jsDatePick_ltr.min.css"
	%}
	<link rel="stylesheet" href="{{ asset_url }}" />
	{% endstylesheets %}
{% endblock %}
{% block javascripts %}


	{{parent()}}
	{% javascripts 
	"@AppBundle/Resources/public/js/d3.v3.min.js" 
	"@AppBundle/Resources/public/js/c3-0.4.10/c3.min.js" 
	"@AppBundle/Resources/public/js/jsdatepick-calendar/jsDatePick.jquery.full.1.3.js" 
	%}
	<script src="{{ asset_url }}" ></script>
	{% endjavascripts %}

	<script type="text/javascript">
		window.onload = function () {
			new JsDatePick({
				useMode: 2,
				target: "startDate",
				dateFormat: "%Y-%m-%d"
						/*selectedDate:{				This is an example of what the full configuration offers.
						 day:5,						For full documentation about these settings please see the full version of the code.
						 month:9,
						 year:2006
						 },
						 yearsRange:[1978,2020],
						 limitToToday:false,
						 cellColorScheme:"beige",
						 dateFormat:"%m-%d-%Y",
						 imgPath:"img/",
						 weekStartDay:1*/
			});
			new JsDatePick({
				useMode: 2,
				target: "endDate",
				dateFormat: "%Y-%m-%d"
			});
		};
	</script>

	<script>
		var chart = c3.generate({
			data: {
				x: 'x',
				columns: [
					['x', {{labelJs|raw}}],
					['产品利润$', {{dataProfit|raw}}],
					['产品销量', {{dataUnit|raw}}],
					['订单数', {{dataOrder|raw}}],
				]
			},
			axis: {
				x: {
					type: 'timeseries',
					tick: {
						format: '%Y-%m-%d'
					},
					y2: {
						show: true
					}
				}
			}
		});

		var chart2 = c3.generate({
			bindto: '#chart2',
			data: {
				x: 'x',
				columns: [
					['x', {{labelJs|raw}}],
					['产品销量', {{dataUnit|raw}}],
					['订单数', {{dataOrder|raw}}],
					['推广赠送个数', {{dataPromotion|raw}}]
				]
			},
			axis: {
				x: {
					type: 'timeseries',
					tick: {
						format: '%Y-%m-%d'
					}
				}
			}
		});

		var chart3 = c3.generate({
			bindto: '#chart3',
			data: {
				x: 'x',
				columns: [
					['x', {{labelSession|raw}}],
					['PV', {{sessionPv|raw}}],
					['Session', {{sessionSession|raw}}],
					['Units', {{sessionUnit|raw}}],
					['Orders', {{sessionOrder|raw}}],
					['推广赠送个数', {{dataPromotion|raw}}]
				]
			},
			axis: {
				x: {
					type: 'timeseries',
					tick: {
						format: '%Y-%m-%d'
					}
				}
			}
		});

		var chart4 = c3.generate({
			bindto: '#chart4',
			data: {
				x: 'x',
				columns: [
					['x', {{labelSession|raw}}],
					['产品转化率(Unit/Session*100)', {{sessionPercentage|raw}}]
				]
			},
			axis: {
				x: {
					type: 'timeseries',
					tick: {
						format: '%Y-%m-%d'
					}
				}
			}
		});

		var chart5 = c3.generate({
			bindto: '#chart5',
			data: {
				x: 'x',
				columns: [
					['x', {{labelPromotion|raw}}],
					['推广赠送个数', {{dataPromotion|raw}}]
				]
			},
			axis: {
				x: {
					type: 'timeseries',
					tick: {
						format: '%Y-%m-%d'
					}
				}
			}
		});
	</script>

	<style>
		ul.profit{margin:0;padding:0;}
		.profit li{ margin: 2px 0; list-style:none; }
	</style>

{% endblock %}

{% block content_title %}
	产品利润变化曲线
{% endblock %}
{% block sub_body %}
	<div class="row">
		<div class="col-lg-12">
			<ul>
				{% for product in products %}
					<li>
						<img src="{{ image(imageDir ~ product.id ~ '.' ~ product.path).resize(120, 120) }}" />
						<a href="http://www.amazon.com/dp/{{product.asin}}/" target="_blank">{{product.title}}</a></li>
					{% endfor %}
			</ul>
		</div>
		<!-- /.col-lg-12 -->
		<div class="panel-body">
			<div id="container">
				<div class="panel-heading">
					<div class="well">
						<label>总计：</label>${{totalProfit}}
					</div>
				</div>
				<ul class="nav nav-tabs">
					<li role="presentation" {% if type == 'day' %}class="active"{% endif %}><a href="{{path('report_profit_chart', {productId: productIdString, day: 'day'})}}">按天</a></li>
					<li role="presentation" {% if type == 'week' %}class="active"{% endif %}><a href="{{path('report_profit_chart', {productId: productIdString, type: 'week'})}}">按周</a></li>
					<li role="presentation" {% if type == 'month' %}class="active"{% endif %}><a href="{{path('report_profit_chart', {productId: productIdString, type: 'month'})}}">按月</a></li>
				</ul>
				{% if type == 'day' %}
					<div class="row">
						<form class="form-inline pull-right">
							<div class="form-group">
								<label for="exampleInputName2">开始日期</label>
								<input type="text" name="startDate" class="form-control" id="startDate" placeholder="{{start}}">
							</div>
							<div class="form-group">
								<label for="exampleInputEmail2">结束日期</label>
								<input type="text" name="endDate" class="form-control" id="endDate" placeholder="{{end}}">
							</div>
							<button type="submit" class="btn btn-default">确定</button>
						</form>
					</div>
				{% endif %}
			</div>  
			<h2>利润-销量-订单</h2>
			<div id="chart"></div>
			<hr/>
			<h2>销量-订单</h2>
			<div id="chart2"></div>

			<hr/>
			<h2>Sessions</h2>
			<div id="chart3"></div>

			<hr/>
			<h2>产品转化率</h2>
			<div id="chart4"></div>

			<hr/>
			<h2>推广赠送产品</h2>
			<div id="chart5"></div>

			<div class="row">
				<div class="col-lg-12">
					<h1 class="page-header"></h1>
					<ul>
						{% for product in products %}
							<li><a href="http://www.amazon.com/dp/{{product.asin}}/" target="_blank">{{product.title}}</a></li>
							{% endfor %}
					</ul>
				</div>
				<!-- /.col-lg-12 -->
			</div>
		</div>
	</div>
{% endblock sub_body %}