@extends('layouts.login')

@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">DV本月數據</div>
               
                    <div class="panel-body">
                         <div id="thismonth"></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</th>
                <th>Alexa</th>
                <th>Facebook</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>date</th>
                <th>Alexa</th>
                <th>Facebook</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>
            </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 () {
    $("#thismonth").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)
            {{ $key["ga:pageviews"]."," }}
            @endforeach


]
        }]
    });






});



</script>




@endsection