@extends('layout.basic.main')
@push('css')
    <style>
        #tabs-detail-click-qrcode li {
            border-left: 0 !important;
            border-right: 0 !important;;
            border-top: 0 !important;;
            border-bottom: 1px solid #ccc;
            border-radius: 0;
            background-color: white;
        }

        #tabs-detail-click-qrcode li a {
            color: #51595C;
            font-weight: bold;
        }

        #tabs-detail-click-qrcode li.active {
            background-color: unset !important;
            border-bottom: unset !important;
        }

        #tabs-detail-click-qrcode li.active a {
            background-color: #7D9195;
            border-top: 0;
            color: #FFFFFF !important;
            border-bottom: unset !important;
        }


        .tab-pane.active {
            background-color: white !important;
        }

        .market-block-h8 {
            display: flex;
            align-items: center;
        }

        .market-block-h8 .mk-block-h8 {
            background-color: #7D9195;
            border-radius: 5px;
            padding: 5px 7px;
            margin-right: 10px;
            display: flex;
        }

        .market-block-h8 .mk-block-h8 span {
            color: white;
            font-size: 12px;
            font-weight: bold;
        }

        .url-line-user-chat {
            text-decoration: underline;
        }

        #app-vue * {
            font-weight: bold;
        }

        #app-vue .table > thead > tr > th {
            border-bottom: unset !important;
        }
    </style>
@endpush
@section('content')
    <div id="app-vue" v-cloak>
        <h2 class="col-sm-12 font-weight-bold" style="margin-top: 15px;font-size: 20px;">@{{ dateContextJp(date) }}</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="tab == 1 ? 'active' : ''"
                    style="border-bottom: unset;text-align: center;margin-bottom: 0;cursor: pointer;">
                    <a @click="initData(1)" aria-controls="home" role="tab" data-toggle="tab"
                       style="border: unset;padding: 9px 15px 5px 15px;width: 140px">友だち追加</a>
                </li>
                <li role="presentation" :class="tab == 2 ? 'active' : ''"
                    style="border-bottom: unset;text-align: center;margin-bottom: 0;cursor: pointer;">
                    <a @click="initData(2)" aria-controls="profile" role="tab" data-toggle="tab"
                       style="border: unset;padding: 9px 15px 5px 15px;width: 140px">ブロック</a>
                </li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content" v-if="tab == 1">
                <div role="tabpanel">
                    <table class="table table-striped" style="margin-top: 30px">
                        <thead>
                        <tr>
                            <th style="width: 50px;border-top-left-radius: 5px; border-bottom-left-radius: 5px;"></th>
                            <th class="text-left" style="width: 15%">友だち追加時間</th>
                            <th class="text-left" style="width: 15%">友だち名</th>
                            <th class="text-left" style="width: 20%;">流入経路</th>
                            <th class="text-left"
                                style="padding-left: 20px; border-top-right-radius: 5px; border-bottom-right-radius: 5px">
                                ブロック
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="item in arrListTab1">
                            <td></td>
                            <td class="text-left">@{{ moment(item.followed_at).format('HH:mm') }}</td>
                            <td class="text-left">
                                <a class="url-line-user-chat" :href="'/basic/friendlist/my_page/'+item.line_user?.id">@{{
                                    item.line_user.name }}</a>
                            </td>
                            <td class="text-left" style="padding-left: 20px !important;">
                                <span v-if="item.landing_name">@{{ item.landing_name }}</span>
                                <span v-else>-</span>
                            </td>
                            <td>
                                <div class="market-block-h8" v-if="item.is_blocked == 1">
                                    <div class="mk-block-h8">
                                        <span>ブロック済み</span>
                                    </div>
                                    <div>
                                        <span>@{{ moment(item.updated_at).format('YYYY/MM/DD HH:mm') }}</span>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="tab-content" v-if="tab == 2">
                <div role="tabpanel">
                    <table class="table table-striped" style="margin-top: 30px">
                        <thead>
                        <tr>
                            <th style="width: 50px;border-top-left-radius: 5px; border-bottom-left-radius: 5px;"></th>
                            <th class="text-left" style="width: 15%;">ブロック時間</th>
                            <th class="text-left" style="width: 15%;">友だち名</th>
                            <th class="text-left" style="width: 20%;padding-left: 30px!important;">友だち追加日時</th>
                            <th class="text-left" style="border-top-right-radius: 5px; border-bottom-right-radius: 5px">
                                流入経路
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="item in arrListTab2">
                            <td></td>
                            <td class="text-left">@{{ moment(item.blocked_at).format('HH:mm') }}</td>
                            <td class="text-left">
                                <a class="url-line-user-chat" :href="'/basic/friendlist/my_page/'+item.line_user?.id">@{{
                                    item.line_user.name }}</a>
                            </td>
                            <td class="text-left" style="padding-left: 30px!important;">@{{
                                moment(item.followed_at).format('YYYY/MM/DD HH:mm') }}
                            </td>
                            <td class="text-left">
                                <span v-if="item.landing_name">@{{ item.landing_name }}</span>
                                <span v-else>-</span>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div>
                <a href="{{ url()->previous() }}" class="btn btn-sns-line btn-sns-line-secondary" style="width: 110px;">
                    <span>戻る</span>
                </a>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script src="/js/axios.min.js"></script>
    <script src="/plugins/moment/moment-locales.min.js"></script>
    <script>
        const tab = '{{ $tab }}';
        new Vue({
            el: '#app-vue',
            data: {
                date: moment().format('YYYY年MM月DD日'),
                tab: parseInt(tab),
                arrListTab1: [],
                arrListTab2: [],
            },
            created: function () {
                this.initData(this.tab);
                this.date = this.getParamsFromURL('date')
            },
            methods: {
                initData: function (tab) {
                    let refresh = `${window.location.protocol}//${window.location.host}${window.location.pathname}?date=${this.getParamsFromURL('date')}`
                    if (tab == 2) {
                        refresh += '&tab=2';
                    }
                    $.LoadingOverlay('show');
                    let self = this;
                    let date = this.getParamsFromURL('date');
                    this.tab = tab;
                    axios.post('{{route('ajax.init_data_history_add_friend_by_date')}}', {
                        date: date,
                        tab: tab
                    }).then(res => {
                        if (tab == 1) {
                            self.arrListTab1 = res.data.result;
                            window.history.replaceState(null, null, refresh);
                        }
                        if (tab == 2) {
                            self.arrListTab2 = res.data.result;
                            window.history.pushState({path: refresh}, '', refresh);
                        }
                        // console.log(self.arrListTab1)
                        $.LoadingOverlay('hide');
                    }).catch(err => {
                        console.log(err)
                        $.LoadingOverlay('hide');
                    });
                },
                getParamsFromURL: function (param) {
                    const url_string = location.href;
                    const url = new URL(url_string);
                    return url.searchParams.get(param);
                },
                dateContextJp: function (date) {
                    moment.locale('ja');
                    return moment(date).format('YYYY年M月D日（ddd）');
                },
            }
        })
    </script>
@endpush