@extends('layout.basic.main')
@section('title','ポップアップ（詳細データ）')

@push('css')
    <link rel="stylesheet" href="/css/popup/detail-data-click.css?v={{config("sns-line.version")}}">
@endpush
@section('content')
    <div class="row show-friend" id="popup_detail_list_add_friend" v-cloak>
        <h2 class="col-sm-12 font-weight-bold" style="margin-top: 15px;font-size: 20px;">詳細データ</h2>
        <div class="col-md-12 col-sm-12" style="margin-top: 30px">
            <ul class="nav nav-tabs" role="tablist" id="tabs-detail-click-qrcode" style="border-bottom: 2px solid #7D9195;">
                <li role="presentation" class="active" style="border-bottom: unset;text-align: center;margin-bottom: 0">
                    <a @click="initDetailLanding('tab1')" id="tab_1" href="#home" aria-controls="home" role="tab" data-toggle="tab" style="border: unset;padding: 9px 15px 5px 15px;width: 140px">数値情報</a>
                </li>
                <li role="presentation" class="" style="border-bottom: unset;text-align: center;margin-bottom: 0">
                    <a @click="initDetailLanding('tab2')" id="tab_2" href="#profile" aria-controls="profile" role="tab" data-toggle="tab" style="border: unset;padding: 9px 15px 5px 15px;width: 140px">友だち一覧</a>
                </li>
                <li style="float: right; border-bottom: 0">
                    <form style="display: flex; align-items: center">
                        <div style="margin-right: 5px; font-weight: bold">表示期間</div>
                        <div style="position:relative;">
                            <i class="fa fa-calendar" aria-hidden="true" style="position: absolute;top: 9px;left: 6px;"></i>
                            <input type="text" class="datetimepicker" name="start_date" style="padding: 0 0 0 23px; font-weight: bold" v-model="start_date">
                        </div>
                        <div style="margin: 0 5px; font-weight: bold">から</div>
                        <div style="position:relative;">
                            <i class="fa fa-calendar" aria-hidden="true" style="position: absolute;top: 9px;left: 6px;"></i>
                            <input type="text" class="datetimepicker" name="end_date" style="padding: 0 0 0 23px; font-weight: bold" v-model="end_date">
                        </div>
                        <input type="hidden" name="only_new_friend">
                        <input type="hidden" name="only_old_friend">
                    </form>
                </li>

            </ul>
            <!-- Tab panes -->
            <div class="tab-content" >
                <div role="tabpanel" class="tab-pane active" id="home">
                    <table class="table table-striped" style="margin-top: 30px">
                        <thead>
                        <tr>
                            <th style="width: 20px;"></th>
                            <th style="width: 200px;" class="text-left">年月日</th>
                            <th style="width: 150px;text-align: center !important;">表示回数</th>
                            <th style="width: 230px;text-align: center !important;">クリック数 / クリック率</th>
                            <th style="width: 250px;text-align: center !important;">友だち追加数 / 友だち追加率</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="detail in data_tab1">
                            <td class="text-left font-weight-bold"></td>
                            <td class="text-left font-weight-bold">@{{formatDate(detail.day)}}</td>
                            <td class="text-center">
                                <span v-if="detail.data">@{{detail.data.count_display_popup}}回</span>
                                <span v-else>0回</span>
                            </td>
                            <td class="text-center">
                                <span v-if="detail.data">@{{detail.data.count_click_popup}}回 / @{{ detail.data.click_rate }}%</span>
                                <span v-else>0</span>
                            </td>
                            <td class="text-center">
                                <span v-if="detail.data">@{{detail.data.count_add_friend}}人 / @{{ detail.data.add_friend_rate }}%</span>
                                <span v-else>0</span>
                            </td>
                            <td></td>
                        </tr>
{{--                        <tr >--}}
{{--                            <td class="text-right font-weight-bold" style="background-color: #F4FBF2 !important;">合計</td>--}}
{{--                            <td style="background-color: #F4FBF2 !important;">--}}
{{--                                <div style="display: flex">--}}
{{--                                    <div style="width: 53%" class="font-weight-bold text-right">--}}
{{--                                        @{{total_friend_click}}--}}
{{--                                    </div>--}}
{{--                                    <div style="width: 47%" class="font-weight-bold text-left">--}}
{{--                                        回--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                            </td>--}}
{{--                            <td style="background-color: #F4FBF2 !important;">--}}
{{--                                <div style="display: flex">--}}
{{--                                    <div style="width: 53%" class="font-weight-bold text-right">--}}
{{--                                        @{{total_friend_new_click}}--}}
{{--                                    </div>--}}
{{--                                    <div style="width: 47%" class="font-weight-bold text-left">--}}
{{--                                        人--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                            </td>--}}
{{--                            <td style="background-color: #F4FBF2 !important;">--}}
{{--                                <div style="display: flex">--}}
{{--                                    <div style="width: 53%" class="font-weight-bold text-right">--}}
{{--                                        @{{total_friend_old_click}}--}}
{{--                                    </div>--}}
{{--                                    <div style="width: 47%" class="font-weight-bold text-left">--}}
{{--                                        人--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                            </td>--}}
{{--                            <td style="background-color: #F4FBF2 !important;"></td>--}}
{{--                        </tr>--}}
                        </tbody>
                    </table>
                </div>
                <div role="tabpanel" class="tab-pane" id="profile">
{{--                    <div style="display: flex; align-items: center; padding-top: 20px">--}}
{{--                        <label for="only_new_friend" style="display: inline-block; margin-right: 20px; font-weight: bold">--}}
{{--                            <input type="checkbox"  @click="filterNewAndOldFriend()" id="only_new_friend" v-model="only_new_friend" value="1">新規友だちのみ--}}
{{--                        </label>--}}
{{--                        <label for="only_old_friend" style="display: inline-block; font-weight: bold">--}}
{{--                            <input type="checkbox"  @click="filterNewAndOldFriend()" id="only_old_friend" v-model="only_old_friend" value="2">既存友だちのみ--}}
{{--                        </label>--}}
{{--                    </div>--}}
                    <table class="table table-striped" style="margin-top: 30px">
                        <thead>
                        <tr>
                            <th  style="width: 30%;min-width: 220px" class="text-left">日時</th>
                            <th  style="width: 70%" >友だち名</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="detailClick in data_tab2">
                            <td class="text-left font-weight-bold">@{{moment(detailClick.time_click).format('YYYY年MM月DD日　HH:mm:ss')}}</td>
                            <td class="text-left">
                                <a class="font-weight-bold" :href="'/basic/friendlist/my_page/'+detailClick.user_id" style="text-decoration: underline">@{{detailClick.name}}</a>
                            </td>
{{--                            <td class="text-left">--}}
{{--                                <a v-if="detailClick.is_old_friend == 1" class="btn font-weight-bold"--}}
{{--                                   style="background-color: #96ADB2; color: white; padding: 6px 20px; cursor: text"--}}
{{--                                   type="button">既存--}}
{{--                                </a>--}}
{{--                                <a v-else class="btn font-weight-bold"--}}
{{--                                   style="background-color: #08BF5A; color: white; padding: 6px 20px; cursor: text"--}}
{{--                                   type="button">新規--}}
{{--                                </a>--}}
{{--                            </td>--}}
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script type="text/javascript">
        moment.locale('ja');
        const bot_id = '{{ $bot_id }}';
        const start_date = `{{ $startDate }}`;
        const end_date = `{{ $endDate }}`;
        const popup_id = `{{ $popup_id }}`;
        //route
        const ajax = {
            init: '{{ route('popup.init_data_detail_click') }}'
        }

        $(function () {
            $.datepicker.setDefaults($.datepicker.regional["ja"]);
            $('.datetimepicker').datepicker({
                dateFormat: "yy-mm-dd",
                theme: 'dark',
            }).on('change', function (e) {
                var name = e.target.name;
                var date = e.target.value;
                if(name == 'start_date'){
                    detail_popup.start_date = date;
                }else{
                    detail_popup.end_date = date;
                }
                detail_popup.initDetailLanding(detail_popup.tab);
            });
        });
    </script>
    <script src="/js/popup/detail-data-click.js"></script>
@endpush