@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-timepicker/css/bootstrap-timepicker.min.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-daterangepicker/daterangepicker-bs3.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css') }}"/>
@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>
			</h3>
			<div class="page-bar">
				<ul class="page-breadcrumb">
					<li>
						<i class="fa fa-home"></i>
						<a href="{{route('manage::index')}}">首頁</a>
						<i class="fa fa-angle-right"></i>
					</li>
					<li>
						<a href="javascript:;">社區互動</a>
						<i class="fa fa-angle-right"></i>
					</li>
					<li>
						<a href="{{route('manage::interactive::vote::index')}}">投票內容</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="row">
                                @foreach ($votes as $vote)
                                <div class="col-md-6">
                                    <div class="panel panel-default">
                                        <div class="panel-heading">
                                            <h3 class="panel-title">{{$vote->title}}</h3>
                                        </div>

                                        <div class="panel-body">
                                            @foreach ($vote->options as $voteoptions)

                                                @if (empty($VotesListCount[$voteoptions->id]))
                                                    0票(0%)
                                                @else
                                                    {{$VotesListCount[$voteoptions->id]}}票({{number_format($VotesListCount[$voteoptions->id]/$VoteListCount,2)*100}}%)
                                                @endif
                                                {{$voteoptions->name}}
                                                <br>
                                            @endforeach
                                        </div>

                                        <div class="panel-footer">
                                        </div>
                                       </div>
                                       <div id="container"  style=" height: 400px"></div>

                                </div>
                                @endforeach
                                <div class="col-md-6">
                                                                </div>

                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                    <form action="{{Route('website::StoreVoteCommentCreate')}}" method="POST" id="form_add_vote_comment" class="form-horizontal form-bordered"  enctype="multipart/form-data">
                                        <input type="hidden" name="vote_id" value="{{ $vote_id }}" />
                                        <input type="hidden" name="_token" value="{{ csrf_token() }}" />
                                        <div class="panel panel-default">
                                            <div class="panel-heading">
                                                <h3 class="panel-title">留言板</h3>
                                            </div>

                                            <div class="panel-body">
                                                <div class="form-group">
                                                    <label class="col-md-2 control-label">留言內容</label>
                                                    <div class="col-md-10">
                                                        <textarea name="content" id="vote_content" class="form-control" placeholder="請輸入留言"></textarea>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="panel-footer" style="text-align: right;"><input type="submit" value="發佈留言" class="btn btn-primary" /></div>
                                       </div>
                                    </form>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                                                        @foreach ($VoteComments as $comment)
                                        <div class="panel panel-default vote-comment" vote-no="{{$no++}}">
                                            <div class="panel-heading clearfix">
                                                <h4 class="panel-title">
                                                    <div style="float: left;">
                                                        發表時間: {{$comment->created_at}}
                                                    </div>  
                                                    <div style="float: right;">
                                                        發表人: {{$comment->name}}
                                                    </div> 
                                                </h4>
                                            </div>

                                            <div class="panel-body">{{$comment->content}}</div>

                                            <div class="panel-footer"></div>
                                       </div>
                                    @endforeach
                                    <div class="col-md-12" style="text-align: center;">
                                        <input id="readMore" type="button" value="更多..." class="btn btn-success" />
                                    </div>
                                </div>
                            </div>
						</div>
					</div>
					<!-- END EXAMPLE TABLE PORTLET-->
				</div>
			</div>
		</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/bootbox/bootbox.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 src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/jquery-form/jquery.form.min.js') }}"></script>
@endsection

@section('js_page_level')
<script>
    var showedCommentNumber = 0;
    
    $(function () {
        $('#container').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: '{{$votes[0]->title}}'
            },
            subtitle: {
                text: '{{$votes[0]->time_start}} 至 {{$votes[0]->time_end}}'
            },
            xAxis: {
                categories: [
                    '投票結果',
                ],
                crosshair: true
            },
            yAxis: {
                title: {
                    text: '得票數'
                },
                min: 0,
                tickPixelInterval:200
            },
            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} </b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [




                @foreach ($votes as $vote)

                    @foreach ($vote->options as $voteoptions)
                    {
                        name: ' {{$voteoptions->name}} ',
                        @if (empty($VotesListCount[$voteoptions->id]))
                            data: [{{0}}]
                        @else
                            data: [{{$VotesListCount[$voteoptions->id]}}]
                        @endif
                    },
                    @endforeach

                @endforeach




            ]
        });

        $('#form_add_vote_comment').ajaxForm({
            type: "POST",
            dataType: "json",
            beforeSubmit: function () {
                var pass = $('#vote_content').val().length > 0;
                if (!pass) {
                    toastr['error']('留言內容不可為空');    
                }

                return pass;
            },
            success: function (returnData) {
                window.location.reload();
            },
            error: function(){
                toastr['error']('留言失敗');    
            }
        });

        $('#readMore').click(function() {
            showComment();
        });

        showComment();
    });
    
    function showComment() {
        showedCommentNumber += 10;
        $(".vote-comment").filter(function() {
            return  $(this).attr("vote-no") <= showedCommentNumber;
        }).show();  
        $(".vote-comment").filter(function() {
            return  $(this).attr("vote-no") > showedCommentNumber;
        }).hide();
        
        if ($(".vote-comment").length <= showedCommentNumber) {
            $('#readMore').hide();
        }
    }
</script>
@endsection