@extends('layouts.app')

@section('content')



<section >
   <div class="container">
      <div class="row">
         <div class="board">
            <!-- <h2>Welcome to IGHALO!<sup>™</sup></h2>-->
            <div class="board-inner">
               <ul class="nav nav-tabs" id="myTab">
                  <div class="liner"></div>
                  <li >
                     <a href="#top100s" data-toggle="tab" title="welcome">
                     <span class="round-tabs one">
                     <i class="glyphicon glyphicon-search"></i> 百大口碑搜尋統計
                     </span> 
                     </a>
                  </li>
                  <li><a href="#dvs" data-toggle="tab" title="profile">
                     <span class="round-tabs two">
                     <i class="glyphicon glyphicon-zoom-in"></i> 每日調查、網路爆紅搜尋統計
                     </span> 
                     </a>
                  </li>
                  <li class="active"><a href="#page" data-toggle="tab" title="bootsnipp goodies">
                     <span class="round-tabs three">
                     <i class="glyphicon glyphicon-eye-open"></i> 瀏覽次數、Alexa、FacebookLikes
                     </span> </a>
                  </li>
               </ul>
            </div>
            <div class="tab-content">
               <div class="tab-pane fade " id="top100s">
                  <div class="row" style="padding-top: 20px;">
                            <div class="col-md-10 col-md-offset-1 " style="padding: 0px;">
                            <div class="col-md-4 ">
                                <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-8 ">
                                <div class="panel panel-default">
                                    <div class="panel-heading">搜尋總數</div>
                                    <div class="panel-body">
                                        <h4 class="text-center" style="font-size: 50px;">{{$totalTracking}}</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="panel panel-default">
                                        <div class="panel-heading">口碑搜尋排行榜</div>
                                        <div class="panel-body">
                                            <div class="table-responsive">
                                                <table id="example" class="table  table-bordered dt-responsive pre-wrap" cellspacing="0"  >
                                                    <thead>
                                                        <tr>
                                                            <th>關鍵字</th>
                                                            <th>被搜尋次數</th>
                                                        </tr>
                                                    </thead>
                                                    <tfoot>
                                                        <tr>
                                                            <th>關鍵字</th>
                                                            <th>被搜尋次數</th>
                                                        </tr>
                                                    </tfoot>
                                                    <tbody>
                                                        @for ($x = 0; $x < count($ranktop100searches); $x++)
                                                            <tr style="width:100%">
                                                                <td>{{ $ranktop100searches[$x]->Keyword }}</td>
                                                                <td>{{ $ranktop100searches[$x]->total }}</td>
                                                            </tr>
                                                        @endfor
           
            
                                                    </tbody>
                                                </table>
                                            </div>                             
                                        </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="panel panel-default">
                                    <div class="panel-heading">口碑搜尋字詞紀錄</div>
                                       <div class="panel-body">
                                            <div class="table-responsive"> 
                                                <table id="example3" class="table  table-bordered dt-responsive pre-wrap" cellspacing="0"  >
                                                    <thead>
                                                        <tr>
                                                            <th>IP</th>
                                                            <th>關鍵字</th>
                                                            <th>來自頁面</th>
                                                            <th>時間</th>
                                                        </tr>
                                                    </thead>
                                                    <tfoot>
                                                        <tr>
                                                            <th>IP</th>
                                                            <th>關鍵字</th>
                                                            <th>來自頁面</th>
                                                            <th>時間</th>
                                                        </tr>
                                                    </tfoot>
                                                  <tbody>
                                                    @for ($x = 0; $x < count($top100searches); $x++)
                                                        <tr style="width:100%">
                                                            <td>{{ $top100searches[$x]->IP }}</td>
                                                            <td>{{ $top100searches[$x]->Keyword }}</td>
                                                            <td>{{ $top100searches[$x]->FromPage }}</td>
                                                            <td>{{ $top100searches[$x]->created_at }}</td>
                                                        </tr>
                                                    @endfor
           
            
                                                      </tbody>
                                                </table>
                                              </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                              </div>
               </div>
               <div class="tab-pane fade" id="dvs">
                                    <div class="row" style="padding-top: 20px;">
                            <div class="col-md-10 col-md-offset-1 " style="padding: 0px;">
                            <div class="col-md-4 ">
                                <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-8 ">
                                <div class="panel panel-default">
                                    <div class="panel-heading">搜尋總數</div>
                                    <div class="panel-body">
                                        <h4 class="text-center" style="font-size: 50px;">{{$totalDVTracking}}</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="panel panel-default">
                                        <div class="panel-heading">每日調查、網路爆紅搜尋排行榜</div>
                                        <div class="panel-body">
                                            <div class="table-responsive">
                                                <table id="example_1" class="table  table-bordered dt-responsive pre-wrap" cellspacing="0"  >
                                                    <thead>
                                                        <tr>
                                                            <th>關鍵字</th>
                                                            <th>被搜尋次數</th>
                                                        </tr>
                                                    </thead>
                                                    <tfoot>
                                                        <tr>
                                                            <th>關鍵字</th>
                                                            <th>被搜尋次數</th>
                                                        </tr>
                                                    </tfoot>
                                                    <tbody>
                                                        @for ($x = 0; $x < count($rankDVsearches); $x++)
                                                            <tr style="width:100%">
                                                                <td>{{ $rankDVsearches[$x]->Keyword }}</td>
                                                                <td>{{ $rankDVsearches[$x]->total }}</td>
                                                            </tr>
                                                        @endfor
           
            
                                                    </tbody>
                                                </table>
                                            </div>                             
                                        </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="panel panel-default">
                                    <div class="panel-heading">每日調查、網路爆紅搜尋字詞紀錄</div>
                                       <div class="panel-body">
                                            <div class="table-responsive"> 
                                                <table id="example3_1" class="table  table-bordered dt-responsive pre-wrap" cellspacing="0"  >
                                                    <thead>
                                                        <tr>
                                                            <th>IP</th>
                                                            <th>關鍵字</th>
                                                            <th>來自頁面</th>
                                                            <th>時間</th>
                                                        </tr>
                                                    </thead>
                                                    <tfoot>
                                                        <tr>
                                                            <th>IP</th>
                                                            <th>關鍵字</th>
                                                            <th>來自頁面</th>
                                                            <th>時間</th>
                                                        </tr>
                                                    </tfoot>
                                                  <tbody>
                                                    @for ($x = 0; $x < count($dvsearches); $x++)
                                                        <tr style="width:100%">
                                                            <td>{{ $dvsearches[$x]->IP }}</td>
                                                            <td>{{ $dvsearches[$x]->Keyword }}</td>
                                                            <td>{{ $dvsearches[$x]->refer }}</td>
                                                            <td>{{ $dvsearches[$x]->created_at }}</td>
                                                        </tr>
                                                    @endfor
           
            
                                                      </tbody>
                                                </table>
                                              </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                              </div>
               </div>
               <div class="tab-pane fade in active" id="page" style="padding-top: 20px;">
                  <div class="col-md-12">

        <div class="col-md-12 " style="padding: 0px;">

            <div class="col-md-6 ">
                <div class="panel panel-default">
                    <div class="panel-heading">Alexa排名(最後更新時間 {{$alexarank_all[count($alexarank_all)-1]->date." Am 8:00" }} )</div>
               
                    <div class="panel-body">

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



                    </div>



                    </div>

            </div>


            <div class="col-md-6 ">
                <div class="panel panel-default">
                    <div class="panel-heading">粉專讚數(最後更新時間 {{$alexarank_all[count($alexarank_all)-1]->date." Am 8:00" }} )</div>
               
                    <div class="panel-body">

                    <h4 class="text-center" style="font-size: 50px;">{{$fblikes_all[count($fblikes_all)-1]->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" style="width: 100%;"></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>
                @if(isset($alexarank_all[$x]->date))
                    {{ $alexarank_all[$x]->date }}
                @endif
                </td>
                <td>
                @if(isset($alexarank_all[$x]->rank))
                    {{ $alexarank_all[$x]->rank }}
                @endif
                </td>
                <td>
                @if(!empty($fblikes_all[$x]->likes))
                    {{ $fblikes_all[$x]->likes }}
                @endif
                </td>
                <td>
                @if(isset($thismonth['rows'][$x]["ga:pageviews"]))
                    {{ $thismonth['rows'][$x]["ga:pageviews"] }}
                @endif
                </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>
               </div>

               <div class="clearfix"></div>
            </div>
         </div>
   </div>
</section>
                   





@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: "升降指數"
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: "#808080"
            }]
        },

        legend: {
            layout: "vertical",
            align: "right",
            verticalAlign: "middle",
            borderWidth: 0
        },
        plotOptions: {
            series: {
                cursor: 'pointer',
                point: {
                }
            }
        },
        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