@extends('layout.basic.main')
@push('css')
<link rel="stylesheet" href="/css/friendlist/style.css?v={{config("sns-line.version")}}">
@endpush
@section('content')
    <div class="container-fluid">
        <div class="col-xs-12 col-sm-12 col-md-12  main">
            <div class="row">
                <div class="col-sm-12">
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <div class="row">
                            <div class="col-sm-4">
                                <h2>サイト行動履歴
                                </h2>
                                <br>
                            </div>
                            <div class="col-sm-4">
                                <div class="profile-box" style="margin-bottom: 0.5em;">
                                    <div class="face">
                                        <img src="{{ !empty($profile->avatar_url) ? $profile->avatar_url : '/images/blank_avatar.png'}}" onerror="this.onerror=null;this.src='/images/blank_avatar.png'"
                                             width="150px;" id="member_face">
                                    </div>
                                    <div class="names">
                                        <b class="primary-name">
                                            <span id="member_display_name"
                                                  class="has_emoji">{{$profile->view_name}}</span>
                                        </b>
                                        <small>
                                            <br>
                                            LINE登録名
                                            <b id="member_name" class="has_emoji">{{$profile->name}}</b>
                                        </small>
                                        <small>
                                            本名
                                        </small>
                                        <p class="">
                                            <small>
                                                {{$profile->real_name}}
                                            </small>
                                        </p>
                                    </div>
                                </div>
                                <p class="has_emoji text-center" style="background-color: #f0f0f0;">
                                    <small>
                                        {{$profile->status_message}}
                                    </small>
                                </p>

                            </div>
                            <div class="col-sm-4">

                            </div>
                        </div>
                        <br>
                        <ul class="nav nav-pills">
                            <li class="active"><a data-toggle="pill" href="#menu1"
                                                  style="width: 250px !important;">訪問履歴</a></li>
                            <!--li><a data-toggle="pill" href="#menu2" style="width: 250px !important;">検知したオプション条件</a>
                            </li-->
                        </ul>

                        <div class="tab-content" id="history">
                            <div id="menu1" class="tab-pane fade in active">
                                <table class="table table-striped" >
                                    <thead>
                                    <tr>
                                        <th>日時</th>
                                        <th>滞在時間</th>
                                        <th>訪問先</th>
                                        <th>IP</th>
                                        <th>UA</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                   <tr v-if="history.length>0" v-for="(item,key) in history">
                                       <td>@{{ item.created_at|parseTime }}</td>
                                       <td>@{{ item.time_stay }}</td>
                                       <td>@{{ item.url }}</td>
                                       <td>@{{ item.ip_address }}</td>
                                       <td style="width:20%">@{{ item.user_agent }}</td>
                                   </tr>
                                       <tr v-if="history.length==0">
                                           <td colspan="5">履歴はありません。</td>
                                       </tr>

                                    </tbody>
                                </table>
                                <div class="panel-body">
                                    <div class="pull-right">
                                            <input type="number" v-model="page" min="1" value="1" class="form-control"
                                                   style="width: 8em;display: inline-block;" name="page">
                                            ページ目を
                                            <input :disabled="page>paginate.last_page" class="btn btn-default" type="submit" v-on:click="getData(page)" value="表示">
                                    </div>
                                    <div class="simple-pager">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <br>
                        <br>
                        <a href="{{route('friendlistMypage',['line_id'=>Request::route('line_user_id')])}}">戻る</a>

                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection
@push('js')
<script src="/plugins/vuejs/vue-resource@1.3.4.js"></script>
<script src="/js/my_page/site_script_history.js?v={{config("sns-line.version")}}"></script>
@endpush