@extends('layout.manage')

<style type="text/css">
	tspan{
		font-family: Arial,"微軟正黑體",sans-serif !important;
		font-weight: bold !important;
	}

	label{
		font-family: Arial,"微軟正黑體",sans-serif !important;
		font-weight: bold !important;
		font-size: 14px !important;
	}
	.btn-xlarge {
	    border-radius: 40px !important;
	    font-size: 12px; 
	    line-height: normal;
	}
</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::prediction') }}">@lang('messages.energy_prediction')</a>
					</li>
				</ul>
			</div>

			<!-- <div>
				@foreach($object as $one)
					@if(mb_strlen($one->name) >5 || mb_strlen($one->data) >5)
						<button type="button" class="btn btn-success btn-xlarge" style="background-color: {{$one->btn_color}}">
							<div class="row" style="margin-right: -40px;">
								<div class="col-md-3">
									<i class="icon-{{$one->btn_icon}} fa-4x" style="padding-top: 15px"></i>
								</div>
								<div class="col-md-3" >
									<label>{{$one->name}}</label>
									<br>
									<label>{{$one->data}}</label>
								</div>
							</div>
						</button>
					@else
						<button type="button" class="btn btn-success btn-xlarge" style="background-color: {{$one->btn_color}}">
							<div class="row" style="margin-right: -40px;">
								<div class="col-md-3">
									<i class="icon-{{$one->btn_icon}} fa-4x" style="padding-top: 15px"></i>
								</div>
								<div class="col-md-3" style="padding-left: 30px;">
									<label>{{$one->name}}</label>
									<br>
									<label>{{$one->data}}</label>
								</div>
							</div>
						</button>
					@endif
				@endforeach -->

			<div class="page-bar" style="margin-left: 50px;margin-top: 30px; margin-right: 50px;">
				<ul class="page-breadcrumb">
					<li style="font-size: 14px;color: #888;">
						<i class="fa fa-caret-right"></i>使用量與預測值
					</li>
				</ul>
			</div>

			<div style="margin-left: 50px;margin-right: 50px;">
				<div class="row">
					<div id="container" class="col-md-6">
						
					</div>
					<div id="container2" class="col-md-6">
						
					</div>
				</div>
			</div>

			<div class="page-bar" style="margin-left: 50px;margin-top: 10px; margin-right: 50%;">
				<ul class="page-breadcrumb">
					<li style="font-size: 14px;color: #888;">
						<i class="fa fa-caret-right"></i>健康度
					</li>
				</ul>
			</div>

			<div style="margin-left: 50px;margin-right: 50px;">
				<div class="row">
					<div id="container3" class="col-md-3">
							
					</div>
					<div id="container4" class="col-md-3">
					@foreach($object4 as $one)
						<label style="color: #455B6C;">健康狀況</label>
						<br>
						<label style="color: #888;">健康狀態</label>
						<div class="progress" style="height: 20px;background-color: #E3E8EE;">
						  	<div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: {{$one->machine_status}}%">{{$one->machine_status}}%</div>
						</div>
						<label style="color: #455B6C;">故障率</label>
						<br>
						<label style="color: #888;">負荷</label>
						<div class="progress" style="height: 20px;background-color: #E3E8EE;">
						  	<div class="progress-bar  progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: {{$one->broken_rate}}%;background-color: #FF9C00;">{{$one->broken_rate}}%</div>
						</div>
					@endforeach
					</div>
				</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 lastYear = null;
		var thisYear = null;
		// console.log(aaa.toString());

		Highcharts.chart('container', {
		    chart: {
		        type: 'column'
		    },
		    title: {
		        text: ''
		    },
		    subtitle: {
		        text: ''
		    },
		    xAxis: {
		        categories: [
		            'Jan',
		            'Feb',
		            'Mar',
		            'Apr',
		            'May',
		            'Jun',
		            'Jul',
		            'Aug',
		            'Sep',
		            'Oct',
		            'Nov',
		            'Dec'
		        ],
		        crosshair: true
		    },
		    yAxis: {
		        min: 0,
		        title: {
		            text: '負荷kWH'
		        }
		    },
		    tooltip: {
		        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
		        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
		            '<td style="padding:0"><b>{point.y:.1f} kWH</b></td></tr>',
		        footerFormat: '</table>',
		        shared: true,
		        useHTML: true
		    },
		    plotOptions: {
		        column: {
		            pointPadding: 0.2,
		            borderWidth: 0
		        }
		    },
		    series: [{
		        name: '預測值',
		        data:lastYear
		    }, {
		        name: '實際值',
		        data:thisYear
		    }]
		});

		Highcharts.chart('container2', {
		    chart: {
		        type: 'spline'
		    },
		    title: {
		        text: ' '
		    },
		    subtitle: {
		        text: ' '
		    },
		    xAxis: {
		        categories: ['1','2','3','4','5','6','7','8','9','10',
		        			 '11','12','13','14','15','16','17','18','19','20',
		        			 '21','22','23','24','25','26','27','28','29','30','31']
		    },
		    yAxis: {
		        title: {
		            text: '負荷kWH'
		        },
		        labels: {
		            formatter: function () {
		                return this.value ;
		            }
		        }
		    },
		    tooltip: {
		        crosshairs: true,
		        shared: true
		    },
		    plotOptions: {
		        spline: {
		            marker: {
		                radius: 4,
		                lineColor: '#666666',
		                lineWidth: 1
		            }
		        }
		    },
		    series: [{
		        name: '預測值',
		        marker: {
		            symbol: 'square'
		        },
		        data: lastYear

		    }, {
		        name: '實際值',
		        marker: {
		            symbol: 'diamond'
		        },
		        data: thisYear
		    }]
		});

		Highcharts.chart('container3', {

		    chart: {
		        type: 'gauge',
		        plotBackgroundColor: null,
		        plotBackgroundImage: null,
		        plotBorderWidth: 0,
		        plotShadow: false
		    },

		    title: {
		        text: ''
		    },

		    pane: {
		        startAngle: -150,
		        endAngle: 150,
		        background: [{
		            backgroundColor: {
		                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
		                stops: [
		                    [0, '#FFF'],
		                    [1, '#333']
		                ]
		            },
		            borderWidth: 0,
		            outerRadius: '109%'
		        }, {
		            backgroundColor: {
		                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
		                stops: [
		                    [0, '#333'],
		                    [1, '#FFF']
		                ]
		            },
		            borderWidth: 1,
		            outerRadius: '107%'
		        }, {
		            // default background
		        }, {
		            backgroundColor: '#DDD',
		            borderWidth: 0,
		            outerRadius: '105%',
		            innerRadius: '103%'
		        }]
		    },

		    // the value axis
		    yAxis: {
		        min: 0,
		        max: 100,

		        minorTickInterval: 'auto',
		        minorTickWidth: 1,
		        minorTickLength: 10,
		        minorTickPosition: 'inside',
		        minorTickColor: '#666',

		        tickPixelInterval: 30,
		        tickWidth: 2,
		        tickPosition: 'inside',
		        tickLength: 10,
		        tickColor: '#666',
		        labels: {
		            step: 2,
		            rotation: 'auto'
		        },
		        title: {
		            text: '健康狀態'
		        },
		        plotBands: [{
		            from: 100,
		            to: 80,
		            color: '#55BF3B' // green
		        }, {
		            from: 60,
		            to: 80,
		            color: '#DDDF0D' // yellow
		        }, {
		            from: 0,
		            to: 60,
		            color: '#DF5353' // red
		        }]
		    },

		    series: [{
		        name: '健康狀態',
		        data: [{{$one->machine_status}}],
		        tooltip: {
		            valueSuffix: ' %'
		        }
		    }]

		},
		// Add some life
		function (chart) {
		    if (!chart.renderer.forExport) {
		        setInterval(function () {
		            var point = chart.series[0].points[0],
		                newVal,
		                inc = Math.round((Math.random() - 0.5));

		            newVal = point.y + inc;
		            if (newVal < 0 || newVal > 200) {
		                newVal = point.y - inc;
		            }

		            point.update(newVal);

		        }, 3000);
		    }
		});
	});

</script>
@endsection