@extends('layout.manage')

<style type="text/css">
	.out {
	  	border-top: 40px #D6D3D6 solid; /*上边框宽度等于表格第一行行高*/
	  	width: 0px; /*让容器宽度为0*/
	  	height: 0px; /*让容器高度为0*/
	  	border-left: 80px #BDBABD solid; /*左边框宽度等于表格第一行第一格宽度*/
	  	position: relative; /*让里面的两个子容器绝对定位*/
	}
	b {
	    font-style: normal;
	    display: block;
	    position: absolute;
	    top: -40px;
	    left: -40px;
	    width: 35px;
	}
	em {
	    font-style: normal;
	    display: block;
	    position: absolute;
	    top: -25px;
	    left: -70px;
	    width: 55x;
	}

</style>
@section('css_page_level')


<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css') }}" />
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/select2/css/select2.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/select2/css/select2-bootstrap.min.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-select/1.12.2/bootstrap-select.min.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-select/bootstrap-select.min.css') }}"/>
<link href="{{ asset('assets/global/plugins/bootstrap-editable/bootstrap-editable/css/bootstrap-editable.css') }}" rel="stylesheet" type="text/css" media="screen"/>
<link href="{{ asset('assets/global/plugins/bootstrap-editable/inputs-ext/address/address.css') }}" rel="stylesheet" type="text/css" media="screen"/>
@endsection


@section('page-content-wrapper')

	<div class="page-content-wrapper" id="main">
		<div class="page-content">
			<!-- BEGIN PAGE HEADER-->
			<h3 class="page-title">
			@inject('setting','anlutro\LaravelSettings\Facade')
			{{ $setting::get('system_name','全方位建築智慧化管理系統') }} <small>{{ $setting::get('company_name','新保科技') }}</small>
			@inject('Setting','anlutro\LaravelSettings\SettingStore')
			</h3>
			<div class="page-bar" >
				<ul class="page-breadcrumb">
					<li>
						<i class="fa fa-home"></i>
						<a href="{{route('manage::index')}}">@lang('messages.homepage')</a>
						<i class="fa fa-angle-right"></i>
					</li>
					<li>
						<a href="{{ route('manage::energy::history') }}">@lang('messages.energy_history')</a>
					</li>
				</ul>
			</div>

			<div>
				<label style="padding-left: 90%;">單位:kwh</label>
				<table style="width: 95%;" class="table table-striped table-bordered table-hover">
					<th>
		             <div class="out">
					      <b>日期</b>
					      <em>類別</em>
					</div>
						
					</th>
					@for($i=-6; $i < 1; $i++)
					<th style="vertical-align: middle;text-align: center;">
						{{date('Y年m月d日',strtotime($i." day"))}}
					</th>
					@endfor
					<th style="vertical-align: middle;text-align: center;">
						合計
					</th>
					@foreach($datas as $data)
						<tr>
							<td style="vertical-align: middle;text-align: center;">
								{{$data->item}}
							</td>
						@foreach($data->data as $one)
							<td style="vertical-align: middle;text-align: right;">
								{{number_format($one)}}
							</td>
						@endforeach
							<td style="vertical-align: middle;text-align: right;">
								{{number_format($data->total)}}
							</td>
						</tr>
					@endforeach
				</table>
			</div>

			<div class="row">
				<div id="container" class="col-md-8">
					
				</div>
				<div id="container2" class="col-md-4">
					
				</div>
			</div>

	    </div>
	</div>

@endsection
@section('plugins_page_level')
<script type="text/javascript" src="{{ asset('assets/global/plugins/jquery-validation/js/jquery.validate.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/jquery-validation/js/additional-methods.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/datatables/media/js/jquery.dataTables.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootbox/bootbox.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-TW.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-fileinput/additional-methods.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/select2/js/select2.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-select/1.12.2/bootstrap-select.min.js') }}"></script>

<!-- BEGIN X-EDITABLE PLUGIN-->
<script src="{{ asset('assets/global/plugins/bootstrap-editable/bootstrap-editable/js/bootstrap-editable.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/global/plugins/bootstrap-editable/inputs-ext/address/address.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/global/plugins/bootstrap-editable/inputs-ext/wysihtml5/wysihtml5.js') }}" type="text/javascript"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.js') }}"></script>
<!-- END X-EDITABLE PLUGIN-->

<!-- 20181108 趨勢圖套件 START -->
<script src="{{ asset('assets/global/plugins/highcharts/js/highcharts.js')}}"></script>
<script src="{{ asset('assets/global/plugins/highcharts/js/highcharts-more.js')}}"></script>
<script src="{{ asset('assets/global/plugins/highcharts/js/exporting.js')}}"></script>
<script src="{{ asset('assets/global/plugins/highcharts/js/export-data.js')}}"></script>
<!-- 20181108 趨勢圖套件 END -->

@endsection
@section('js_page_level')
<script>
	$(document).ready(function(){
		var array = [];
		var row = 0;
		var col = 0;
		@foreach($datas as $data)
			array[row] = [0];
			@foreach($data->data as $one)
				array[row][col] = {{$one}};
	    		col += 1;
	    	@endforeach
	    	row += 1;
	    	col = 0;
	    @endforeach

	    var week = [];

	    @for($i=-6; $i < 1; $i++)
			week[{{6+$i}}] = "{{date('Y年m月d日',strtotime($i." day"))}}";
		@endfor

		Highcharts.chart('container', {
		    chart: {
		        type: 'column'
		    },
		    title: {
		        text: ''
		    },
		    subtitle: {
		        text: ''
		    },
		    xAxis: {

		        categories:week,
		        crosshair: true
		    },
		    yAxis: {
		        min: 0,
		        title: {
		            text: '負荷KWH'
		        }
		    },
		    tooltip: {
		    	headerFormat: '<span style="font-size:10px">{point.key}</span><br>',
		        pointFormat:  '<span style="color:{series.color};padding:0">{series.name}:{point.y:.1f}</span><br>',
		        footerFormat: '',
		        shared: true,
		        useHTML: true
		    },
		    plotOptions: {
		        column: {
		            pointPadding: 0.2,
		            borderWidth: 0
		        }
		    },
		    series: [
			    @for ($i=0; $i < count($datas)-1; $i++)  
			    {
			        name: "{{$datas[$i]->item}}",
			        data: array[{{$i}}]
			    },
			    @endfor
		    ]
		});


		Highcharts.chart('container2', {
		    chart: {
		        plotBackgroundColor: null,
		        plotBorderWidth: null,
		        plotShadow: false,
		        type: 'pie'
		    },
		    title: {
		        text: ''
		    },
		    tooltip: {
		        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
		    },
		    plotOptions: {
		        pie: {
		            allowPointSelect: true,
		            cursor: 'pointer',
		            dataLabels: {
		                enabled: true,
		                format: '<span style="color:{point.color};padding:0;font-size:14px;">{point.name}</span>: {point.percentage:.1f} %',
		                style: {
		                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
		                }
		            }
		        }
		    },
		    series: [{
		        name: '比例:',
		        colorByPoint: true,
		        data: [
		        	@for ($i=0; $i < count($datas)-1; $i++)  
				    {
				        name: "{{$datas[$i]->item}}",
				        y: {{$datas[$i]->total}}
				    },
				    @endfor
		        ]
		    }]
		});
	});

</script>
@endsection