@extends('layout.manage')

@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-daterangepicker/daterangepicker.min.css') }}" />
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-select/bootstrap-select.min.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/jquery-multi-select/css/multi-select.css') }}"/>
@endsection

@section('page-content-wrapper')
	<style type="text/css">
		.th_display_none { display: none;}
		.red {
			color: red;
		}
	</style>
	<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>
			</h3>
			<div class="page-bar">
				<ul class="page-breadcrumb">
					<li>
						<i class="fa fa-home"></i>
						<a href="index.html">首頁</a>
						<i class="fa fa-angle-right"></i>
					</li>
					<li>
						<a href="#">BA管理</a>
						<i class="fa fa-angle-right"></i>
					</li>
					<li>
						<a href="#">BA監控log</a>
					</li>
				</ul>
				<div class="page-toolbar">

				</div>
			</div>
			<!-- END PAGE HEADER-->
			<!-- BEGIN DASHBOARD STATS -->
			<div class="row">
				<div class="col-md-12">
					<!-- BEGIN EXAMPLE TABLE PORTLET-->
					<div class="portlet light bordered">
						<div class="portlet-body">
							<div class="table-toolbar" >
								<div class="row">
									<div class="col-md-6">
										
									</div>
									<div class="col-md-6">
										<div class="btn-group pull-right">
                                            <a class="btn purple dropdown-toggle pull-right" data-toggle="dropdown" href="javascript:;"> 快速篩選
                                                <i class="fa fa-angle-down"></i>
                                            </a>
											<ul class="dropdown-menu">
	                                            <li>
	                                                <a href="{{ route('manage::ba::sensor_records')}}">全部</a>
	                                            </li>
	                                            <li>
	                                                <a href="{{ route('manage::ba::sensor_records')}}?status=0">正常</a>
	                                            </li>
	                                            <li>
	                                                <a href="{{ route('manage::ba::sensor_records')}}?status=1">未處理</a>
	                                            </li>
	                                            <li>
	                                                <a href="{{ route('manage::ba::sensor_records')}}?status=2">處理中</a>
	                                            </li>
	                                            <li>
	                                            	<a href="{{ route('manage::ba::sensor_records')}}?status=3">已處理</a>
	                                            </li>
	                                            <li>
	                                            	<a href="{{ route('manage::ba::sensor_records')}}?unique=true">隱藏無變化值</a>
	                                            </li>
	                                            <li class="divider"></li>
	                                            <li>
	                                                <a href="javascript:;" id="btn_query"> 條件查詢 </a>
	                                            </li>
	                                        </ul>
	                                    </div>
									</div>
								</div>
									
							</div>
							<table class="table table-striped table-bordered table-hover" id="table_record_list">
							
							</table>
						</div>
					</div>
					<!-- END EXAMPLE TABLE PORTLET-->
				</div>
			</div>

            @if ($showChart2)
                <div class="row">
                    <div class="col-md-12">
                        <!-- BEGIN EXAMPLE TABLE PORTLET-->
                        <div class="portlet light bordered">
							@if ($issave)
                            <div class="portlet-title tabbable-line">
                                <div class="caption caption-md">
                                    <span class="caption-subject theme-font-color bold uppercase">{{$sensorName}}累計運轉時數：{{$sensorSavedHour}}小時(即{{$sensorSavedSecond}}秒，查詢時間：{{$dateNow}})</span>
                                </div>
                            </div>
							@endif
                            <div class="portlet-title tabbable-line">
                                <div class="caption caption-md">
                                    <span class="caption-subject theme-font-color bold uppercase">{{$sensorName}}累計次數統計圖</span>
                                </div>
                            </div>
                            <div class="portlet-body">
                                <div class="row">
                                    <div class="col-md-12" id="sensor_history_chart"></div>
                                </div>
                            </div>
                        </div>
                        <!-- END EXAMPLE TABLE PORTLET-->
                    </div>
                </div>
            @endif
            
			<div class="row">
				<div class="col-md-12">
					<!-- BEGIN EXAMPLE TABLE PORTLET-->
					<div class="portlet light bordered">
                        <div class="portlet-title tabbable-line">
                            <div class="caption caption-md">
                                <span class="caption-subject theme-font-color bold uppercase">{{$sensorName}}事件記錄表</span>
                            </div>
                        </div>
						<div class="portlet-body">
                            <div class="row">
                                <div class="col-md-6" id="sensor_month_event_bar"></div>
                                <div class="col-md-6" id="sensor_month_event_pie"></div>
                            </div>
						</div>
					</div>
					<!-- END EXAMPLE TABLE PORTLET-->
				</div>
			</div>
		</div>
<div class="modal fade draggable-modal" id="modal_query" tabindex="-1" role="basic" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title">條件查詢</h4>
            </div>
            <form id="form_query" action="" class="form-horizontal">
            	<div class="modal-body">
                    <div class="form-body">
                    	<div class="form-group">
							<label class="col-md-4 control-label">類別</label>
							<div class="col-md-8">
								<select multiple="multiple" class="multi-select" id="category" name="category[]" style="height:100px;">
                                    @foreach($categories as $category)
                                        <option value="{{$category->id}}">{{$category->name}}</option>
                                    @endforeach
                                </select>
                                <div class="help-block"> 請選擇要篩選的類別，如不選擇則預設全部顯示。 </div>
							</div>
						</div>
                        <div class="form-group">
                            <label class="col-md-4 control-label">標籤名稱</label>
                            <div class="col-md-8">
                                <input type="text" name="tag" class="form-control" value="" />
                            </div>
                        </div>
						<div class="form-group">
							<label class="col-md-4 control-label">棟別</label>
							<div class="col-md-8">
								<select multiple="multiple" class="multi-select" id="build" name="build[]" style="height:100px;">
                                    @foreach($buildList as $build)
                                        <option value="{{$build}}">{{$build}}</option>
                                    @endforeach
                                </select>
                                <div class="help-block"> 請選擇要篩選的棟別，如不選擇則預設全部顯示。 </div>
							</div>
						</div>
                        <div class="form-group">
                            <label class="col-md-4 control-label">樓別</label>
                            <div class="col-md-8">
								<select multiple="multiple" class="multi-select" id="floor" name="floor[]" style="height:100px;">
                                    @foreach($floorList as $floor)
                                        <option value="{{$floor}}">{{$floor}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-4 control-label">處理狀態</label>
                            <div class="col-md-8">
                                <div class="checkbox-list">
                                    <label><input type="checkbox" name="status[]" value="0"> 正常 </label>
                                    <label><input type="checkbox" name="status[]" value="1"> 待處理 </label>
                                    <label><input type="checkbox" name="status[]" value="2"> 處理中 </label>
                                    <label><input type="checkbox" name="status[]" value="3"> 已處理 </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
							<label class="col-md-4 control-label" for="unique">隱藏無變化值</label>
							<div class="col-md-8" style="margin-top: 1px; padding-top: 7px;">
								<input type="checkbox" name="unique" id="unique" class="form-control" value="true" />
							</div>
						</div>
                    </div>
            	</div>
	            <div class="modal-footer">
	                <button type="button" class="btn dark btn-outline" data-dismiss="modal">關閉</button>
	                <button type="button" class="btn green btn_query_submit" value="query">查詢</button>
	                <button type="button" class="btn blue btn_print_submit" value="print">列印</button>
	            </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
	<input type="hidden" id="_token" name="_token" value="{{ csrf_token() }}">
@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 src="{{ asset('assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js') }}" type="text/javascript"></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/moment.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-daterangepicker/daterangepicker.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/bootbox/bootbox.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/jquery-multi-select/js/jquery.multi-select.js') }}"></script>
<script src="{{ asset('assets/global/plugins/amcharts/amcharts/amcharts.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/global/plugins/amcharts/amcharts/serial.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/global/plugins/amcharts/amcharts/pie.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/global/plugins/amcharts/amcharts/themes/light.js') }}" type="text/javascript"></script>
@endsection

@section('js_page_level')
<script>
$(document).ready(function(){
	callDataTable();
    eventInit();
	$('.show-tooltip').tooltip();
	$('.multi-select').multiSelect();
});

$(document).on('click','.btn_query_submit',function(){
	var form = $('#form_query');
	if($(this).val() == 'query'){
		form.attr("action", '{{route('manage::ba::sensor_records')}}');
	}
	form.submit();
});

$(document).on('click','.btn_print_submit',function(){
	var form = $('#form_query');
	if($(this).val() == 'print'){
		form.attr("action", '{{route('manage::ba::sensor_records_print')}}');
	}
	form.submit();
});
    
var eventInit = function() {
    $('#sensor_history_chart').html('<div style="text-align:center;">Loading...</div>');
    $('#sensor_month_event_bar').html('<div style="text-align:center;">Loading...</div>');
    $('#sensor_month_event_pie').html('<div style="text-align:center;">Loading...</div>');
	$.ajax({
		type : 'GET',
		url : '{{route('console::sensor_month_event')}}',
		dataType: 'html',
		data : {
			type : 'bar',
			tag  : '{{$tag}}'
		},
		success : function(sendback){
            $('#sensor_month_event_bar').html(sendback);
		},
		error : function(sendback){
            $('#sensor_month_event_bar').html('<div style="text-align: center">讀取錯誤</div>');
		}
	}); 
    
	$.ajax({
		type : 'GET',
		url : '{{route('console::sensor_month_event')}}',
		dataType: 'html',
		data : {
			type : 'pie',
			tag  : '{{$tag}}'
		},
		success : function(sendback){
            $('#sensor_month_event_pie').html(sendback);
		},
		error : function(sendback){
            $('#sensor_month_event_pie').html('<div style="text-align: center">讀取錯誤</div>');
		}
	}); 
    
    @if ($showChart2)
        $.ajax({
            type : 'GET',
            url : '{{route('console::getChart2')}}',
            dataTyep:'html',
            data: {id: '{{$tag}}'},
            success : function(sendback){
                $('#sensor_history_chart').html(sendback);
                $('.dropdown-toggle').dropdown();
            },
            error : function(sendback){
                $('#sensor_history_chart').html('<div style="text-align: center">讀取錯誤</div>');
            }
        });   
    @endif
}

var callDataTable = function () {
    var table = $('#table_record_list');

	var nCloneTh = document.createElement('th');
    nCloneTh.className = "table-checkbox";

    var nCloneTd = document.createElement('td');
    nCloneTd.innerHTML = '<span class="row-details row-details-close"></span>';


    table.find('thead tr').each(function () {
        this.insertBefore(nCloneTh, this.childNodes[0]);
    });

    table.find('tbody tr').each(function () {
        this.insertBefore(nCloneTd.cloneNode(true), this.childNodes[0]);
    });

    var oTable = table.dataTable({
        // Internationalisation. For more info refer to http://datatables.net/manual/i18n
        "language": {
		    "aria": {
		        "sortAscending": ": activate to sort column ascending",
		        "sortDescending": ": activate to sort column descending"
		    },
		    "emptyTable": "此列表目前沒有資料",
		    "info": "顯示第 _START_ 到第 _END_ 則 共有 _TOTAL_ 則 <span class='red'>監控資料僅保留90天</span>",
		    "infoEmpty": "沒有找到符合的資料",
		    "infoFiltered": "(從 _MAX_ 筆資料中過濾)",
		    "lengthMenu": "顯示 _MENU_ 則",
		    "search": "快速篩選:",
		    "zeroRecords": "目前沒有任何資料",
		    "paginate": {
		        "previous":"上一頁",
		        "next": "下一頁",
		        "last": "最後",
		        "first": "最前"
		    }
		},
		"lengthMenu": [
		    [10, 20, 50, -1],
		    [10, 20, 50, "All"] // change per page values here
		],
        // set the initial value
        "aaSorting": [[0,'desc']],
        "pageLength": 10,
        "aoColumns":[				 
             {"sTitle":"發生時間"},
             {"sTitle":"類型"},
             {"sTitle":"偵測裝置名稱"},
             {"sTitle":"記錄數值"},
             {"sTitle":"棟別"},
             {"sTitle":"樓層"},
             {"sTitle":"狀況"},
             {"sTitle":"處理狀態"},
             {"sTitle":"動作"},
                                     
                                     
        ],
        "aaData":[{!!$dataArray!!}],
        "aaSorting": [[0,'desc']]
    });
    
    
    table.find('.view-log').click(function() {
		var n=0;
		console.log(n++);
        location.href = "{{route('manage::ba::sensor_records')}}?tag=" + $(this).attr('tag');
    });
}

$(document).on('click','.btn_status',function(){
	$.ajax({
		type : 'POST',
		url : '{{route('manage::ba::update_record_status')}}',
		dataType: 'json',
		data : {
			id : $(this).attr('uid'),
			status : $(this).attr('status'),
			_token : '{{csrf_token()}}'
		},
		success : function(sendback){
			toastr['success']('修改處理狀態成功');
			window.location.reload();
		},
		error : function(sendback){
			toastr['error']('修改處理狀態失敗');
		}
	});
});

$(document).on('click','#btn_query',function(){
	$('#modal_query').modal('show');
});

</script>
@endsection