@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">

        <div class="col-md-10 col-md-offset-1 " style="padding: 0px;">

            <div class="col-md-6 ">
                <div class="panel panel-default">
                    <div class="panel-heading">目前Alexa排名</div>
               
                    <div class="panel-body">

                    <h4 class="text-center" style="font-size: 50px;">{{$alexarank_all[0]->rank}}</h4>



                    </div>



                    </div>

            </div>


            <div class="col-md-6 ">
                <div class="panel panel-default">
                    <div class="panel-heading">目前粉專讚數</div>
               
                    <div class="panel-body">

                    <h4 class="text-center" style="font-size: 50px;">{{$fblikes_all[0]->likes}}</h4>



                    </div>



                    </div>

            </div>








            <div class="col-md-2 ">
                <div class="panel panel-default">
                    <div class="panel-heading">目前線上人數</div>
               
                    <div class="panel-body">

                    <h4 class="text-center" style="font-size: 50px;">{{$realtime}}</h4>



                    </div>



                    </div>

            </div>


            <div class="col-md-10 ">
                <div class="panel panel-default">
                    <div class="panel-heading">今日DV</div>
               
                    <div class="panel-body">


                         

                    <div class="col-md-3">
                        
                        <h5 style="border-bottom:1px solid  #01AB91 ; padding-bottom:10px;"> 今日瀏覽量 </h5>
                       
                        <h4>                        {{$usersandpageviews["rows"][0]["ga:pageviews"]}}</h4>


                    </div>


                    <div class="col-md-3">
                        
                         <h5 style="border-bottom:1px solid  #01AB91 ; padding-bottom:10px;"> 使用者 </h5>
                        <h4>                        {{$usersandpageviews["rows"][0]["ga:visits"]}}</h4>

                        
                    </div>


                    <div class="col-md-3">
                        
                         <h5 style="border-bottom:1px solid  #01AB91 ; padding-bottom:10px;"> 跳出率 </h5>

                       <h4> {{ round($usersandpageviews["rows"][0]["ga:visitBounceRate"])."%"  }}</h4>

                        
                    </div>




                    <div class="col-md-3">
                        
                         <h5 style="border-bottom:1px solid  #01AB91 ; padding-bottom:10px;"> 平均停留時間 </h5>

                        <h4>                        {{ round($usersandpageviews["rows"][0]["ga:avgTimeOnSite"])."s" }}</h4>

                        
                    </div>

                    


                    </div>

                </div>
            </div>


             <div class="col-md-12 ">
                <div class="panel panel-default">
                    <div class="panel-heading">瀏覽量、Alexa、FacebookLikes 歷史比較</div>
                    <div class="alert alert-info">
                        <strong>升降指數計算方式</strong> =  當日數據/總體平均
                    </div>
               
                    <div class="panel-body">
                         <div id="container"></div>

                    </div>

                </div>
            </div>



                    <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">Alexa、FacebookLikes 趨勢變化</div>
               
                <div class="panel-body">

<div class="table-responsive"> 
                <table id="example2" class="table  table-bordered dt-responsive pre-wrap" cellspacing="0"  >
        <thead>
            <tr>
                <th>date <i class="fa fa-angle-double-down" aria-hidden="true"></i></th>
                <th>Alexa <i class="fa fa-angle-double-down" aria-hidden="true"></i></th>
                <th>Facebook <i class="fa fa-angle-double-down" aria-hidden="true"></i></th>
                <th>pageViews <i class="fa fa-angle-double-down" aria-hidden="true"></i></th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>date</th>
                <th>Alexa</th>
                <th>Facebook</th>
                <th>pageViews</th>
            </tr>
        </tfoot>
        <tbody>
        @for ($x = 0; $x < count($alexarank_all); $x++)
             <tr style="width:100%">
                <td>{{ $alexarank_all[$x]->date }}</td>
                <td>{{ $alexarank_all[$x]->rank }}</td>
                <td>{{ $fblikes_all[$x]->likes }}</td>
                <td>{{ $thismonth['rows'][$x]["ga:pageviews"] }}</td>
            </tr>
        @endfor
           
            
        </tbody>
    </table>
</div>
                </div>
            </div>
        </div>





    </div>
        




            



            




        </div>

        



        





    </div>


    <div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog modal-lg">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">熱門文章</h4>
      </div>
      <div id="modal-load" class="modal-body" style="display:block;text-align: center">
         



      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>


</div>
@endsection


@section("footer")





<script type="text/javascript">
$(function () {
    $("#container").highcharts({
        title: {
            text: "",
            x: -20 //center
        },

        xAxis: {
            type: "category",
            categories: [

            @foreach($thismonth['rows'] as $key)
            {{ $key["ga:date"]."," }}
            @endforeach

]
        },
        yAxis: {
            title: {
                text: "Click"
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: "#808080"
            }]
        },

        legend: {
            layout: "vertical",
            align: "right",
            verticalAlign: "middle",
            borderWidth: 0
        },
        plotOptions: {
            series: {
                cursor: 'pointer',
                point: {
                    events: {
                        click: function () {
                            var date = this.category;
                            var link = "thisday/"+  this.category+" #modal-load";
                            $( "#modal-load" ).html("loading......");
                            $( "#modal-load" ).load(link);
                            $('#myModal').modal('show');

                        }
                    }
                }
            }
        },
        series: [

    {
        name: '瀏覽量升降指數',
        data: [
            @foreach($thismonth['rows'] as $key)
            {{ round($key["ga:pageviews"]/$ga_average,2)."," }}
            @endforeach


        ]
    }, {
        name: 'Alexa排名升降指數',
        data: [
            @foreach($alexarank_all as $alexa)
            {{ round($alexa->rank/$alexa_average,2)."," }}
            @endforeach
        ]
    }, {
        name: 'Facebook Likes 升降指數',
        data: [
            @foreach($fblikes_all as $fb)
            {{ round($fb->likes/$fblikes_average,2)."," }}
            @endforeach
        ]
    }


        ]
    });






});



</script>




@endsection