{% 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/jsdatepick-calendar/jsDatePick.jquery.full.1.3.js" 
	"@AppBundle/Resources/public/components/datatables/media/js/jquery.dataTables.min.js" 
	"@AppBundle/Resources/public/components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js" 
	%}
	<script src="{{ asset_url }}" ></script>
	{% endjavascripts %}

	<script type="text/javascript">
		$(document).ready(function () {
			$('#dataTables').DataTable({
				"iDisplayLength": 1000,
				responsive: true
			});
		});
		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*/
			});
		};
	</script>

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

{% endblock %}
{% block content_title %}产品利润
	<a href="{{path('product_set_cost')}}" class="navbar-brand pull-right"><i class="fa fa-gear"></i>设置产品成本</a>
{% endblock %}
{% block sub_body %}
	<div class="row">
		<div class="col-lg-12">
			{% for flashMessage in app.session.flashbag.get('warning') %}
				<div class="alert danger alert-danger">
					{{ flashMessage }}
				</div>
			{% endfor %}
			{% for flashMessage in app.session.flashbag.get('notice') %}
				<div class="alert alert-success">
					{{ flashMessage }}
				</div>
			{% endfor %}
			<nav class="navbar navbar-default pull-right">
				<div class="container-fluid">
					<!-- Brand and toggle get grouped for better mobile display -->
					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
						<ul class="nav navbar-nav">
							<li>

								<form class="navbar-form navbar-left" role="search" method="post" enctype="multipart/form-data">
									<div class="form-group well">
										<input type="file" name="transaction[]" multiple />
										<button type="submit" class="btn btn-default"><i class="fa fa-upload"></i>上传产品交易数据</button>
									</div>
									<div class="form-group well">
										<h5>Reports -> Fullfillment -> Sales -> Amazon Fufilled Shipments -> Download</h5>
										<input type="file" name="promotion[]" multiple />
										<button type="submit" class="btn btn-default"><i class="fa fa-upload"></i>上传Fullfill数据</button>
									</div>
									<div class="form-group well">
										<h5>Business Report -> By ASIN -> Detail Page Sales and Trafic -> Download</h5>
										<label for="exampleInputName2">导入日期</label>
										<input type="text" name="startDate" class="form-control" id="startDate" placeholder="">
										<input type="file" name="percentage[]" multiple />
										<button type="submit" class="btn btn-default"><i class="fa fa-upload"></i>上传转化率数据</button>
									</div>
								</form>

							</li>
						</ul>
					</div>
				</div>
			</nav>

		</div>
		<!-- /.col-lg-12 -->
	</div>
	<div class="row">
		<div class="col-lg-12">
			<form method="GET">
				<div class="panel panel-default container-fluid">
					<div class="row well">
						<input type="submit" class="btn btn-info btn-large" value="查看选中产品" />
						<a href="{{path('conversion')}}" class="btn btn-primary btn-large">管理转换率数据</a>
					</div>
					<!-- /.panel-heading -->
					<div class="span12">
						<table  class="table table-striped table-bordered table-hover" id="dataTables">
							<thead>
								<tr>
									<th class="col-md-1">
										<input type="checkbox" class="select-all" value="" />
										全选
									</th>
									<th class="col-md-1">
										ASIN
									</th>
									<th class="col-md-1">
										图片
									</th>
									<th class="col-md-2">
										名称
									</th>
									<th class="col-md-3">
										转化率
									</th>
									<th class="col-md-2">
										利润
									</th>
									<th class="col-md-1">
										库存
									</th>
								</tr>
							</thead>
							<tbody>
								{% for product in products %}
									<tr>
										<td class="col-md-1">
											<input type="checkbox" name="selected[]" value="{{product.id}}" class="select-this" />
										</td>
										<td class="col-md-1">
											<a href="http://www.amazon.com/dp/{{product.asin}}/" target="_blank">
												{{product.asin}}
											</a>
										</td>
										<td class="col-md-1">
											{% if product.path %}
												<a href="http://www.amazon.com/dp/{{product.asin}}/" target="_blank">
													<img src="{{ image(imageDir ~ product.id ~ '.' ~ product.path).resize(120, 120) }}" />
												</a>
											{% endif %}
										</td>
										<td class="col-md-2">
											{{product.title}}
										</td>
										<td class="col-md-2">
											{% if product.session.postedDate is defined %}
												时间： {{product.session.postedDate}}
												<table class="table table-striped table-bordered table-hover">
													<thead>
														<tr>
															<th>Session</th>
															<th>Unit</th>
															<th>Order</th>
															<th>转化率</th>
														</tr>
													</thead>
													<tbody>
														<tr>
															<td>{{product.session.sessions}}</td>
															<td>{{product.session.units}}</td>
															<td>{{product.session.orders}}</td>
															<td>{{product.session.percentage}}</td>
														</tr>
													</tbody>
												</table>
											{% else %}
												没有数据记录。
											{% endif %}
										</td>
										<td class="col-md-3">
											<table class="table table-striped table-bordered table-hover">
												<tbody>
													<tr>
														<td>
															<label>利润:</label>
														</td>
														<td>
															<ul class="profit">
																<li>
																	{% if product.lastDayProfit %} ${{product.lastDayProfit.total}} ({{product.lastDayProfit.date|slice(0,8)}}){% else %} 0 {% endif %}
																</li>
																<li>
																	总计：${{product.profit}}
																</li>
															</ul>
														</td>
													</tr>
													<!--
												<tr>
													<td>
														<label>成本</label>
													</td>
													<td>
														${{product.cost + product.shipping}}(${{product.cost}}+${{product.shipping}})
													</td>
												</tr>
													-->
													<tr>
														<td>
															<label>统计数据:</label>
														</td>
														<td>
															<ul class="profit">
																<li>
																	<a href="{{path('report_profit_chart', {productId: product.id})}}" class="btn btn-success btn-sm"><i class="fa fa-line-chart"></i>变化图表</a></h1>
																</li>
															</ul>
														</td>
													</tr>
												</tbody>
											</table>
										</td>
										<td class="col-md-1">
											<label>库存：</label>{{product.InStockSupplyQuantity}}
										</td>
									{% endfor %}
								<tr>
									<td>
										<input type="checkbox" class="select-all" value="" />
										全选
									</td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td>总计： <strong>${{total}}</strong></td>
									<td></td>
								</tr>
						</table>
					</div>
					<div class="row well">
						<input type="submit" class="btn btn-info btn-large" value="查看选中产品" />
					</div>
					<!-- /.table-responsive -->
					<!-- /.panel-body -->
				</div>
			</form>
			<!-- /.panel -->
		</div>
		<!-- /.col-lg-12 -->
	</div>
{% endblock sub_body %}