@extends('layout.basic.main')
@section('title','QRコードアクション（詳細データ）')
@push('css')
    <link rel="stylesheet" href="{{asset('css/qr_code/qr_code.css')}}?v={{config("sns-line.version")}}">
    <style>
        th{
            text-align: left !important;
            font-weight: bold;
        }
        .text-left{
            text-align: left !important;
        }
        .text-right{
            text-align: right !important;
        }
        #btn-filter{
            border: unset;
            cursor: pointer;
        }

        #btn-filter:hover{
            opacity: 0.7;
        }
        #btn-filter:focus{
            outline: unset !important;
        }
        #app_qrcode_detail .table th {
            border: unset;
        }
        #app_qrcode_detail .table td {
            border-top: unset;
            padding: 12px !important;
        }
    </style>
@endpush
@section('content')
    <div class="row show-friend" id="app_qrcode_detail" 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: 260px;text-align: center !important;" class="text-left">年月日</th>
                                <th style="width: 230px;text-align: center !important;">友だち追加ページ表示回数</th>
                                <th style="width: 170px;text-align: center !important;">新規友だち追加</th>
                                <th style="width: 180px;text-align: center !important;">既存友だち読込み</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="detail in data_tab1">
                                <td class="text-left font-weight-bold">@{{formatDate(detail.day)}}</td>
                                <td >
                                    <div style="display: flex">
                                        <div style="width: 53%" class="font-weight-bold text-right">
                                           <span v-if="detail.data">@{{detail.data.total_friend_click}}</span>
                                            <span v-else>0</span>
                                        </div>
                                        <div style="width: 47%" class="font-weight-bold text-left">
                                            回
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div  style="display: flex">
                                        <div style="width: 53%" class="font-weight-bold text-right">
                                            <span v-if="detail.data">@{{detail.data.total_friend_new_click}}</span>
                                            <span v-else>0</span>
                                        </div>
                                        <div style="width: 47%" class="font-weight-bold text-left">
                                            人
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div style="display: flex">
                                        <div style="width: 53%" class="font-weight-bold text-right">
                                            <span v-if="detail.data">@{{detail.data.total_friend_old_click}}</span>  <span v-else>0</span>
                                        </div>
                                        <div style="width: 47%" class="font-weight-bold text-left">
                                            人
                                        </div>
                                    </div>
                                </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: 220px" class="text-left">日時</th>
                            <th  style="width: 200px" >友だち名</th>
                            <th></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.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 src="/js/form_answer/jquery.ui.datepicker-ja.js"></script>
    <script src="/js/form_answer/vue.min.js"></script>
    <script>
        moment.locale('ja');
        var landing_id = `{{ $id }}`;
        var start_date = `{{ $startDate }}`;
        var end_date = `{{ $endDate }}`;
        $(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_qrcode.start_date = date;
                }else{
                    detail_qrcode.end_date = date;
                }
                detail_qrcode.initDetailLanding(detail_qrcode.tab);
            });
        });


        var detail_qrcode = new Vue({
            el: '#app_qrcode_detail',
            data: {
                landing_id: landing_id,
                start_date: start_date,
                end_date: end_date,
                only_new_friend: false,
                only_old_friend: false,
                data_tab1: [],
                data_tab2: [],
                total_friend_click: 0,
                total_friend_new_click: 0,
                total_friend_old_click: 0,
                tab: 'tab1'
            },
            created: function() {
                this.initDetailLanding();
            },
            methods: {
                initDetailLanding: function (tab_landing = 'tab1') {
                    $.LoadingOverlay('show');
                    var self = this;
                    self.tab = tab_landing;
                    var formData = new FormData();
                    formData.append('id', this.landing_id);
                    formData.append('start_date', this.start_date);
                    formData.append('end_date', this.end_date);
                    formData.append('only_new_friend', this.only_new_friend);
                    formData.append('only_old_friend', this.only_old_friend);
                    formData.append('tab', tab_landing);
                    $.ajax({
                        url: '/ajax/get-init-detail-landing',
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        cache: false,
                    }).done(function (a) {
                        $.LoadingOverlay('hide');
                        self.data_tab1 = a.data_tab1;
                        self.total_friend_new_click = a.total_friend_new;
                        self.total_friend_old_click = a.total_friend_old;
                        self.total_friend_click = 0;
                        self.data_tab1.forEach(function (item) {
                            if(item.data) {
                                self.total_friend_click += item.data.total_friend_click;
                                self.total_friend_old += item.data.total_friend_old_click;
                            }
                        });
                        self.data_tab2 = a.data_tab2;
                    }).fail(function (a, b, c) {
                        $.LoadingOverlay('hide');
                    }).always(function (a, b) {
                        $.LoadingOverlay('hide');
                    });
                },
                filterNewAndOldFriend: function(){
                    this.initDetailLanding(this.tab);
                }, formatDate: function(date){
                    var days = ['日','月','火','水','木','金','土'];
                    var day = moment(date).day();
                    return moment(date).format('YYYY年MM月DD日 ('+days[day]+')');
                }
            }
        });
    </script>
@endpush