@extends('layout.basic.main')
@section('title','QRコードアクション（詳細データ）')
@push('css')
    <link rel="stylesheet" href="/chat_files/jquery-ui.min.css">
    <link rel="stylesheet" href="{{asset('css/form_answer/common-v3.css')}}?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="{{asset('css/qr_code/pagination.css')}}?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="{{asset('css/qr_code/show_friend_click.css')}}?v={{config("sns-line.version")}}">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
@endpush
@section('content')
    <div class="row show-friend" style="margin-left: 8px; margin-right: 8px" id="app_qrcode_detail" v-cloak>
        <div class="t-header" style="clear:both; margin-left: 15px; margin-right: 15px; padding-right: 15px">
            <div class="manage-name">{{ $name }}</div>
            <div class="qr-detail-breadcrumb"><a href="{{route('landingIndex')}}" style="font-weight: 300; margin-right: 3px">TOP</a><span>>データ詳細</span></div>
        </div>
        <div class="col-md-12 col-sm-12" style="margin-top: 20px; min-width: 980px;">
            <ul class="menu" role="tablist" id="tabs-detail-click-qrcode">
                <li role="presentation" :class="{ 'active': tab == 'tab1' }" style="margin-right: 20px">
                    <a @click="changeTab('tab1')" id="tab_1" href="#home" aria-controls="home" role="tab" data-toggle="tab">数値情報</a>
                </li>
                <li role="presentation" :class="{ 'active': tab == 'tab2' }" style="margin-right: 20px">
                    <a @click="changeTab('tab2')" id="tab_2" href="#profile" aria-controls="profile" role="tab" data-toggle="tab">友だち一覧</a>
                </li>
                <li role="presentation" :class="{ 'active': tab == 'tab3' }" style="margin-right: 20px">
                    <a @click="changeTab('tab3')" id="tab_3" href="#lp" aria-controls="lp" role="tab" data-toggle="tab">LP連携</a>
                </li>
                <li role="presentation" :class="{ 'active': tab == 'tab4' }">
                    <a @click="changeTab('tab4')" id="tab_4" href="#collect" aria-controls="collect" role="tab" data-toggle="tab">分岐詳細</a>
                </li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content" >
                <div role="tabpanel" class="tab-pane" :class="{ 'active': tab == 'tab1' }" id="home">
                    <div class="d-flex justify-content-between align-items-center header">
                        <div class="d-flex">
                            <div class="d-flex flex-column">
                                <span class="font-s12 font-w-bold color-text mb-1">表示期間</span>
                                <div class="d-flex justify-content-start align-items-center">
                                    <div class="time-range-container" style="padding: 0px; margin-right: 10px">
                                        <input type="text" id="filter-range"
                                               class="form-control dateranger tab1" readonly>
                                        <i class="far fa-calendar" style="color: #E0E0E0"></i>
                                    </div>
                                    <div class="btn-get-all font-s12" @click="getAll()">全期間</div>
                                </div>
                            </div>
                            <div class="d-flex flex-column ml-4">
                                <span class="font-s12 font-w-bold color-text mb-1">表示単位</span>
                                <div class="custom-dropdown" style="width: 80px;">
                                    <div class="selected">
                                        <span class="name">@{{ type_count == 1 ? '人数' : '回数' }}</span>
                                        <i class="fas fa-caret-down icon"></i>
                                    </div>
                                    <ul class="options scrollable" id="filter-item" style="width: 260px; border-radius: 5px; border: 1px solid var(--line-color)">
                                        <li @click="setTypeCount(1)">人数 (1人につき1回のみカウント)</li>
                                        <li @click="setTypeCount(2)">回数 (1人につき何回でもカウント)</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="d-flex justify-content-end align-items-end">
                            <div class="box-count">
                                <div class="d-flex flex-column align-items-center" style="margin-right: 10px">
                                    <span class="font-s12 color-text font-w-middle">URL読み込み</span>
                                    <span class="count">@{{ total_friend_click }}</span>
                                </div>
                            </div>
                            <div class="box-count">
                                <div class="d-flex flex-column align-items-center" style="margin-right: 10px">
                                    <span class="font-s12 color-text font-w-middle">友だち追加</span>
                                    <span class="count">@{{ total_friend }}</span>
                                </div>
                            </div>
                            <div class="box-count">
                                <div class="d-flex flex-column align-items-center" style="margin-right: 10px">
                                    <span class="font-s12 color-text font-w-middle">アクション稼働</span>
                                    <span class="count">@{{ total_action }}</span>
                                </div>

                            </div>
                            <div class="box-tooltip spreadsheet"
                                @click="redirectGoogleSheet('{{ $googleSheetId}}')"
                                 v-if="landing.google_sheet_id"
                            >
                                <span class="tooltipp">スプレッドシート表示</span>
                                <img src="/images/google-sheet.png" alt="" width="20px" class="!inline-block !mr-[4px] !mt-[-3px]">
                            </div>
                            <div class="box-tooltip download-csv" @click="downloadCsv()">
                                <span class="tooltipp" style="width: 136px;">CSVダウンロード</span>
                                <svg id="download-outlined" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                                    <rect id="矩形" width="16" height="16" fill="#1f1f1f" opacity="0"/>
                                    <path id="形状" d="M11.188,11H.5a.5.5,0,0,1-.5-.5V7.406a.125.125,0,0,1,.125-.125h.938a.125.125,0,0,1,.124.125V9.813H10.5V7.406a.125.125,0,0,1,.125-.125h.937a.125.125,0,0,1,.125.125V10.5A.5.5,0,0,1,11.188,11ZM5.844,7.876a.123.123,0,0,1-.1-.048L4,5.612a.123.123,0,0,1-.014-.131.125.125,0,0,1,.113-.071H5.249V.125A.125.125,0,0,1,5.373,0h.938a.125.125,0,0,1,.125.125V5.413H7.593a.125.125,0,0,1,.113.071.123.123,0,0,1-.014.131L5.942,7.828A.123.123,0,0,1,5.844,7.876Z" transform="translate(2.156 2.5)" fill="#1f1f1f"/>
                                </svg>
                            </div>
                        </div>
                    </div>
                    <div class="list-data">
                        <div class="scrollable" style="max-height: 550px; overflow: auto">
                            <table class="table table-striped">
                                <thead>
                                <tr>
                                    <th style="width: 20%;text-align: left">
                                        <div class="d-flex">
                                            <span>日時</span>
                                            <div class="sort" @click="sort('date')">
                                                <i class="fal fa-angle-up" style="font-size: 12px; color: #222222; position: relative; top: 3px; font-weight: bold; cursor: pointer"></i>
                                                <i class="fal fa-angle-down" style="font-size: 12px; color: #222222; font-weight: bold; cursor: pointer"></i>
                                            </div>
                                        </div>
                                    </th>
                                    <th style="width: 20%; text-align: end !important;">URL読み込み</th>
                                    <th style="width: 220px;text-align: end !important;">友だち追加・ブロック解除</th>
                                    <th style="width: 20%; text-align: end !important;">アクション稼働</th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="detail in data_tab1">
                                    <td class="text-left ">@{{formatDate(detail.date)}}</td>
                                    <td>
                                        <div style="display: flex; justify-content: end">
                                            <div style="" class=" text-right">
                                                <span>@{{ type_count == 1 ? detail.count_click_distinct : detail.count_click }}</span>
                                            </div>
                                            <div style="" class=" text-left">
                                                人
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div  style="display: flex; justify-content: end">
                                            <div style="" class=" text-right">
                                                <span>@{{ type_count == 1 ? detail.count_add_friend_distinct : detail.count_add_friend }}</span>
                                            </div>
                                            <div style="" class=" text-left">
                                                人
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div  style="display: flex; justify-content: end">
                                            <div style="" class=" text-right">
                                                <span>@{{ type_count == 1 ? detail.count_action_distinct : detail.count_action }}</span>
                                            </div>
                                            <div style="" class=" text-left">
                                                人
                                            </div>
                                        </div>
                                    </td>
                                    <td style="">
                                        <div style="display: flex; justify-content: end">
                                            <div class="btn-detail hover" @click="showDetailDay(detail)">詳細表示</div>
                                        </div>
                                    </td>
                                </tr>
                                </tbody>
                            </table>

                            <div class="text-center" style="margin: 29px auto" v-if="data_tab1.length <= 0">
                                <div style="margin-bottom: 19px">
                                    <img src="/images/group_4483.svg" alt="...">
                                </div>
                                <div style="color: #8C8C8C; font-weight: 400; font-size: 16px">まだデータがありません</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane" :class="{ 'active': tab == 'tab2' }" id="profile">
                    <div class="d-flex justify-content-between align-items-center header">
                        <div class="d-flex">
                            <div class="d-flex flex-column">
                                <span class="font-s12 font-w-bold color-text mb-1">表示期間</span>
                                <div class="d-flex justify-content-start align-items-center">
                                    <div class="time-range-container" style="padding: 0px; margin-right: 10px">
                                        <input type="text" id="filter-range"
                                               class="form-control dateranger tab2" readonly>
                                        <i class="far fa-calendar" style="color: #E0E0E0"></i>
                                    </div>
                                    <div class="btn-get-all" @click="getAll()">全期間</div>
                                </div>
                            </div>
                            <div class="d-flex flex-column ml-4">
                                <span class="font-s12 font-w-bold color-text mb-1">表示単位</span>
                                <div class="custom-dropdown" style="width: 80px;">
                                    <div class="selected">
                                        <span class="name">@{{ type_count == 1 ? '人数' : '回数' }}</span>
                                        <i class="fas fa-caret-down icon"></i>
                                    </div>
                                    <ul class="options scrollable" id="filter-item" style="width: 260px; border-radius: 5px; border: 1px solid var(--line-color)">
                                        <li @click="setTypeCount(1)">人数 (1人につき1回のみカウント)</li>
                                        <li @click="setTypeCount(2)">回数 (1人につき何回でもカウント)</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="d-flex align-items-end" style="margin-right: 55px;">
                            <div class="d-flex justify-content-end align-items-end" style="">
                                <div class="box-count">
                                    <div class="d-flex flex-column align-items-center" style="margin-right: 10px">
                                        <span class="font-s12 color-text font-w-middle">新規友だち</span>
                                        <span class="count">@{{ total_new_friend_tab2 }}</span>
                                    </div>
                                </div>
                                <div class="box-count">
                                    <div class="d-flex flex-column align-items-center" style="margin-right: 10px">
                                        <span class="font-s12 color-text font-w-middle">既存友だち</span>
                                        <span class="count">@{{ total_old_friend }}</span>
                                    </div>
                                </div>

                                <div class="box-count">
                                    <div class="d-flex flex-column align-items-center" style="margin-right: 10px">
                                        <span class="font-s12 color-text font-w-middle">ブロック解除</span>
                                        <span class="count">@{{ total_unblock }}</span>
                                    </div>
                                </div>
                                <div class="box-count">
                                    <div class="d-flex flex-column align-items-center" style="margin-right: 10px">
                                        <span class="font-s12 color-text font-w-middle">ブロック</span>
                                        <span class="count">@{{ total_block }}</span>
                                    </div>
                                </div>

                                <div class="custom-dropdown filter" style="margin-right: 10px">
                                    <div class="selected">
                                        <span class="name">全件表示</span>
                                        <i class="fas fa-caret-down icon"></i>
                                    </div>
                                    <div class="options" id="filter-item" style="max-height: unset; overflow: hidden">
                                        <ul class="scrollable" style="overflow: scroll; max-height: 200px; width: 248px;">
                                            <li>表示する稼働対象</li>
                                            <li>
                                                <label class="custom-checkbox">
                                                    <input type="checkbox" v-model="selectAll">
                                                    <span class="checkbox-box"></span>
                                                    <span class="checkbox-label">全て選択</span>
                                                </label>
                                            </li>
                                            <li v-for="url in landingUrls">
                                                <label class="custom-checkbox">
                                                    <input type="checkbox" name="check_item[]" :value="url.id" v-model="selected">
                                                    <span class="checkbox-box"></span>
                                                    <span class="checkbox-label">@{{ url?.connect_qr_code?.poster_name + '/' + url?.landing_page?.landing_name }}</span>
                                                </label>
                                            </li>
                                        </ul>
                                        <div class="d-flex justify-content-center" style="width: 100%; padding: 10px 0">
                                            <div class="btn btn-filter-url" @click="searchLandingUrl()">表示する</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="box-tooltip download-csv" @click="downloadCsv()">
                                <span class="tooltipp" style="width: 136px;">CSVダウンロード</span>
                                <svg id="download-outlined" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                                    <rect id="矩形" width="16" height="16" fill="#1f1f1f" opacity="0"/>
                                    <path id="形状" d="M11.188,11H.5a.5.5,0,0,1-.5-.5V7.406a.125.125,0,0,1,.125-.125h.938a.125.125,0,0,1,.124.125V9.813H10.5V7.406a.125.125,0,0,1,.125-.125h.937a.125.125,0,0,1,.125.125V10.5A.5.5,0,0,1,11.188,11ZM5.844,7.876a.123.123,0,0,1-.1-.048L4,5.612a.123.123,0,0,1-.014-.131.125.125,0,0,1,.113-.071H5.249V.125A.125.125,0,0,1,5.373,0h.938a.125.125,0,0,1,.125.125V5.413H7.593a.125.125,0,0,1,.113.071.123.123,0,0,1-.014.131L5.942,7.828A.123.123,0,0,1,5.844,7.876Z" transform="translate(2.156 2.5)" fill="#1f1f1f"/>
                                </svg>
                            </div>
                        </div>
                        <div class="box-tooltip btn-right-top gr-search" style="position: absolute;align-items: center; background: #ffffff; min-width: 35px; height: 35px; border: 1px solid #DDDDDD; border-radius: 5px; display: flex; justify-content: center; cursor: pointer; right: 30px; top: 51px;  transform: translateY(-50%)">
                            <span v-if="!is_show_search" class="tooltipp" style="width: 50px;">検索</span>
                            <i class="far fa-search"
                               @click="is_show_search = !is_show_search"
                               style="color: #888888 !important; font-size: 20px; width: 33px; height: 33px; display: flex;align-items: center; justify-content: center"></i>
                            <input type="text" @keyup.enter="changePage()" class="form-control search_for_temp" v-model="keyword"
                                   placeholder="友だち名・システム表示名"
                                   style="padding: 0 35px 2px 0px;
                                                  height: 33px;
                                                  border: none;
                                                  box-shadow: none;
                                                  width: 190px;
                                                  font-size: 13px;
                                                  transition: 0.4s;
                                                  color: #222222;"
                                   :class="{ 'hide-search': is_show_search == 0 }"
                            >

                            <img @click="clearSearch" v-if="keyword && is_show_search"
                                 style="width: 15px;
                                            transform: translateY(-50%);
                                            top: 50%;
                                            right: 10px;
                                            position: absolute;
                                            cursor: pointer;
                                            width: 20px;"
                                 src="/images/icon-clear-search.png">
                        </div>
                    </div>
{{--                    <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>--}}
                    <div class="list-data">
                        <div class="scrollable" style="max-height: 550px; overflow: auto">
                            <table class="table table-striped" style="margin-top: 30px">
                                <thead>
                                <tr style="padding-left: 20px;">
                                    <th style="width: 200px" class="text-left">
                                        <div class="d-flex">
                                            <span>友だち追加日時</span>
                                            <div class="sort" @click="sort('time_click')">
                                                <i class="fal fa-angle-up" style="font-size: 12px; color: #222222; position: relative; top: 3px; font-weight: bold; cursor: pointer"></i>
                                                <i class="fal fa-angle-down" style="font-size: 12px; color: #222222; font-weight: bold; cursor: pointer"></i>
                                            </div>
                                        </div>
                                    </th>
                                    <th style="text-align: left; padding-left: 20px; width: 250px;">LINE名</th>
                                    <th style="width: 200px; text-align: left">システム表示名</th>
                                    <th style="width: 250px; text-align: left">
                                        <div class="d-flex">
                                            <span>友だちの種類</span>
                                            <div class="sort" @click="sort('is_old_friend,action')">
                                                <i class="fal fa-angle-up" style="font-size: 12px; color: #222222; position: relative; top: 3px; font-weight: bold; cursor: pointer"></i>
                                                <i class="fal fa-angle-down" style="font-size: 12px; color: #222222; font-weight: bold; cursor: pointer"></i>
                                            </div>
                                        </div>
                                    </th>
                                    <th style="text-align: left; width: 180px;">広告名</th>
                                    <th style="text-align: left; width: 180px;">LP名</th>
                                    <th style="text-align: left; width: 200px;">ブロックされた日時</th>
                                </tr>
                                </thead>
                                <tbody>
                                    <tr v-if="detailClick.is_old_friend == 0 && detailClick.action == 1" v-for="detailClick in data_tab2">
                                        <td class="text-left ">@{{ moment(detailClick.time_click, "YYYY-MM-DD HH:mm").format("YYYY.MM.DD(ddd) HH:mm") }}</td>
                                        <td colspan="6" style="text-align: left">
                                            友だち追加なし (URL読込みのみ)
                                        </td>
                                    </tr>
                                    <tr v-else>
                                        <td class="text-left ">@{{ moment(detailClick.time_click, "YYYY-MM-DD HH:mm").format("YYYY.MM.DD(ddd) HH:mm") }}</td>
                                        <td class="" style="padding-left: 0px; width: 0;">
                                            <div class="line-user d-flex align-items-center" style="width: max-content;">
                                                <img @error="setAltImg" :src="detailClick.line_user?.avatar_url ? detailClick.line_user.avatar_url : '/images/avatar_bot_v2.png'" width="20px" height="20px" style="border-radius: 50%; object-fit: contain; margin-right: 15px;"/>
                                                <a v-if="detailClick.line_user" class="" :href="'/basic/friendlist/my_page/'+detailClick.line_user.id" style="text-decoration: underline; margin-right: 15px; color: #5799DB; font-weight: 300; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">@{{detailClick.line_user.name}}</a>
                                                <span class="font-s14 font-w-normal color-text" v-else>-</span>
                                            </div>
                                        </td>
                                        <td style="text-align: left">
                                            <span style="display: block; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">@{{detailClick.line_user?.view_name}}</span>
                                        </td>
                                        <td style="text-align: left">
                                            <div class="type-friend-scan" v-if="detailClick.is_old_friend == 0">
                                                <span style="background: #08BF5A;"></span>
                                                <span style="color: #08BF5A;">新規友だち</span>
                                            </div>
                                            <div class="type-friend-scan" v-else-if="detailClick.is_old_friend == 1 && detailClick.action == 2">
                                                <span style="background: #222222;"></span>
                                                <span style="color: #222222;">ブロックを解除した友だち</span>
                                            </div>
                                            <div class="type-friend-scan" v-else-if="detailClick.is_old_friend == 1 && detailClick.action == 1">
                                                <span style="background: #FEA600;"></span>
                                                <span style="color: #FEA600;">エルメ上の友だち</span>
                                            </div>
                                            <div class="type-friend-scan" v-else-if="detailClick.is_old_friend == 3 && detailClick.action == 2">
                                                <span style="background: #5799DB;"></span>
                                                <span style="color: #5799DB;">既存友だち</span>
                                            </div>
                                        </td>
                                        <td style="text-align: left">
                                            <p style="width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">@{{ detailClick.poster?.connect_qr_code?.poster_name }}</p>
                                        </td>
                                        <td style="text-align: left">
                                            <p style="width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">@{{ detailClick.poster?.landing_page?.landing_name }}</p>
                                        </td>
                                        <td class="text-left">
                                            <i class="fas fa-ban"
                                               v-if="detailClick.is_blocked"
                                               style="font-size: 20px; color: var(--red)"
                                            ></i>
                                            <span v-if="detailClick.is_blocked">@{{ moment(detailClick.line_user.conversation.blocked_at, "YYYY-MM-DD HH:mm").format("YYYY.MM.DD(ddd) HH:mm") }}</span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>

                            <div class="text-center" style="margin: 29px auto" v-if="data_tab2.length <= 0">
                                <div style="margin-bottom: 19px">
                                    <img src="/images/group_4483.svg" alt="...">
                                </div>
                                <div style="color: #8C8C8C; font-weight: 400; font-size: 16px">まだデータがありません</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane" :class="{ 'active': tab == 'tab3' }" id="lp">
                    <div class="d-flex justify-content-between align-items-center header">
                        <div class="d-flex">
                            <div class="d-flex flex-column">
                                <span class="font-s12 font-w-bold color-text mb-1">表示期間</span>
                                <div class="d-flex justify-content-start align-items-center">
                                    <div class="time-range-container" style="padding: 0px; margin-right: 10px">
                                        <input type="text" id="filter-range"
                                               class="form-control dateranger tab3" readonly>
                                        <i class="far fa-calendar" style="color: #E0E0E0"></i>
                                    </div>
                                    <div class="btn-get-all" @click="getAll()">全期間</div>
                                </div>
                            </div>
                            <div class="d-flex flex-column ml-4">
                                <span class="font-s12 font-w-bold color-text mb-1">表示単位</span>
                                <div class="custom-dropdown" style="width: 80px;">
                                    <div class="selected">
                                        <span class="name">@{{ type_count == 1 ? '人数' : '回数' }}</span>
                                        <i class="fas fa-caret-down icon"></i>
                                    </div>
                                    <ul class="options scrollable" id="filter-item" style="width: 260px; border-radius: 5px; border: 1px solid var(--line-color)">
                                        <li @click="setTypeCount(1)">人数 (1人につき1回のみカウント)</li>
                                        <li @click="setTypeCount(2)">回数 (1人につき何回でもカウント)</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="d-flex justify-content-end align-items-end" style="margin-right: 55px">
                            <div class="box-count">
                                <div class="d-flex flex-column align-items-center" style="margin-right: 10px">
                                    <span class="font-s12 color-text font-w-middle">URL読み込み</span>
                                    <span class="count">@{{ total_friend_click }}</span>
                                </div>
{{--                                <span class="font-s12 color-text font-w-bold">人</span>--}}
                            </div>
                            <div class="box-count">
                                <div class="d-flex flex-column align-items-center" style="margin-right: 10px">
                                    <span class="font-s12 color-text font-w-middle">友だち追加</span>
                                    <span class="count">@{{ total_friend }}</span>
                                </div>
                            </div>
                            <div class="box-count">
                                <div class="d-flex flex-column align-items-center" style="margin-right: 10px">
                                    <span class="font-s12 color-text font-w-middle">アクション稼働</span>
                                    <span class="count">@{{ total_action }}</span>
                                </div>
                            </div>
                            <div class="custom-dropdown filter" style="margin-right: 15px;">
                                <div class="selected">
                                    <span class="name">全件表示</span>
                                    <i class="fas fa-caret-down icon"></i>
                                </div>
                                <div class="options" id="filter-item" style="max-height: unset; overflow: hidden">
                                    <ul class="scrollable" style="overflow: scroll; max-height: 200px; width: 248px;">
                                        <li>表示する稼働対象</li>
                                        <li>
                                            <label class="custom-checkbox">
                                                <input type="checkbox" v-model="selectAll">
                                                <span class="checkbox-box"></span>
                                                <span class="checkbox-label">全て選択</span>
                                            </label>
                                        </li>
                                        <li v-for="url in landingUrls">
                                            <label class="custom-checkbox">
                                                <input type="checkbox" name="check_item[]" :value="url.id" v-model="selected">
                                                <span class="checkbox-box"></span>
                                                <span class="checkbox-label">@{{ url?.connect_qr_code?.poster_name + '/' + url?.landing_page?.landing_name }}</span>
                                            </label>
                                        </li>

                                    </ul>
                                    <div class="d-flex justify-content-center" style="width: 100%; padding: 10px 0">
                                        <div class="btn btn-filter-url" @click="searchLandingUrl()">表示する</div>
                                    </div>
                                </div>
                            </div>
                            <div class="box-tooltip download-csv" @click="downloadCsv()">
                                <span class="tooltipp" style="width: 136px;">CSVダウンロード</span>
                                <svg id="download-outlined" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                                    <rect id="矩形" width="16" height="16" fill="#1f1f1f" opacity="0"/>
                                    <path id="形状" d="M11.188,11H.5a.5.5,0,0,1-.5-.5V7.406a.125.125,0,0,1,.125-.125h.938a.125.125,0,0,1,.124.125V9.813H10.5V7.406a.125.125,0,0,1,.125-.125h.937a.125.125,0,0,1,.125.125V10.5A.5.5,0,0,1,11.188,11ZM5.844,7.876a.123.123,0,0,1-.1-.048L4,5.612a.123.123,0,0,1-.014-.131.125.125,0,0,1,.113-.071H5.249V.125A.125.125,0,0,1,5.373,0h.938a.125.125,0,0,1,.125.125V5.413H7.593a.125.125,0,0,1,.113.071.123.123,0,0,1-.014.131L5.942,7.828A.123.123,0,0,1,5.844,7.876Z" transform="translate(2.156 2.5)" fill="#1f1f1f"/>
                                </svg>
                            </div>
                            <div class="box-tooltip btn-right-top gr-search" style="position: absolute;align-items: center; background: #ffffff; min-width: 35px; height: 35px; border: 1px solid #DDDDDD; border-radius: 5px; display: flex; justify-content: center; cursor: pointer; right: 30px; top: 51px;  transform: translateY(-50%)">
                                <span v-if="!is_show_search" class="tooltipp" style="width: 50px;">検索</span>
                                <i class="far fa-search"
                                   @click="is_show_search = !is_show_search"
                                   style="color: #888888 !important; font-size: 20px; width: 33px; height: 33px; display: flex;align-items: center; justify-content: center"></i>
                                <input type="text" @keyup.enter="changePage()" class="form-control search_for_temp" v-model="keyword"
                                       placeholder="広告名・LP名"
                                       style="padding: 0 35px 2px 0px;
                                                  height: 33px;
                                                  border: none;
                                                  box-shadow: none;
                                                  width: 190px;
                                                  font-size: 13px;
                                                  transition: 0.4s;
                                                  color: #222222;"
                                       :class="{ 'hide-search': is_show_search == 0 }"
                                >

                                <img @click="clearSearch" v-if="keyword && is_show_search"
                                     style="width: 15px;
                                            transform: translateY(-50%);
                                            top: 50%;
                                            right: 10px;
                                            position: absolute;
                                            cursor: pointer;
                                            width: 20px;"
                                     src="/images/icon-clear-search.png">
                            </div>
                        </div>
                    </div>
                    <div class="list-data">
                        <div class="scrollable" style="max-height: 550px; overflow: auto">
                            <table class="table table-striped" style="margin-top: 30px; table-layout: fixed">
                                <thead>
                                    <tr style="padding-left: 20px;">
                                        <th style="width: 180px" class="text-left">
                                            <div class="d-flex">
                                                <span>日時</span>
                                                <div class="sort" @click="sort('collect_open_landings.date_scan')">
                                                    <i class="fal fa-angle-up" style="font-size: 12px; color: #222222; position: relative; top: 3px; font-weight: bold; cursor: pointer"></i>
                                                    <i class="fal fa-angle-down" style="font-size: 12px; color: #222222; font-weight: bold; cursor: pointer"></i>
                                                </div>
                                            </div>
                                        </th>
                                        <th style="text-align: left; padding-left: 20px; width: 250px">広告名</th>
                                        <th style="text-align: left; width: 250px;">LP名</th>
                                        <th style="text-align: right; width: 175px;">URL読み込み</th>
                                        <th style="text-align: right; width: 200px">友だち追加・ブロック解除</th>
                                        <th style="text-align: right; width: 200px; padding-right: 30px">アクション稼働</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="item in data_tab3">
                                        <td class="text-left ">@{{ moment(item.date_scan, "YYYY-MM-DD HH:mm").format("YYYY.MM.DD(ddd)") }}</td>
                                        <td style="text-align: left; padding-left: 20px">
                                            <p style="width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">@{{ item.poster_name }}</p>
                                        </td>
                                        <td style="text-align: left">
                                            <p style="width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">@{{ item.landing_name }}</p>
                                        </td>
                                        <td class="text-right">
                                            <p>@{{ type_count == 1 ? item.count_scan_distinct : item.count_scan }}人</p>
                                        </td>
                                        <td class="text-right">
                                            <p>@{{ type_count == 1 ? item.count_friend_distinct : item.count_friend }}人</p>
                                        </td>
                                        <td class="text-right" style="padding-right: 30px">
                                            <p>@{{ type_count == 1 ? item.count_action_distinct : item.count_action }}人</p>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <div class="text-center" style="margin: 29px auto" v-if="data_tab3.length <= 0">
                                <div style="margin-bottom: 19px">
                                    <img src="/images/group_4483.svg" alt="...">
                                </div>
                                <div style="color: #8C8C8C; font-weight: 400; font-size: 16px">まだデータがありません</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane" :class="{ 'active': tab == 'tab4'}" id="collect" style="padding: 20px; padding-right: 40px">
                    @include('basic.qr_code.v2.components.collect_data')
                </div>
                <div class="footer">
                    <button class="font-s14 font-w-normal color-text btn-back" @click="window.location.href = '{{route('landingIndex')}}'">戻る</button>
                    <div class="tb-footer d-flex justify-content-between align-items-center" v-if="tab != 'tab4'" :class="{ 'show-box-pagination': pagination.last_page > 1 }">
                        <pagination :pagination="pagination" @change_page="changePage" @change_limit="changeLimit"></pagination>
                    </div>
                </div>
            </div>
        </div>
        <div id="modal-detail" style="background: #FFFFFF; padding-top: 78px; position: fixed; top: 0; right: -650px; width: 600px; height: 100vh; box-shadow: 0 0 10px #0000001A; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 1000ms; z-index: 1000;" class="transition-all duration-1000" :class="toggleModalDetail ? 'right-0' : ''">
            <div id="" style="width: 600px !important; padding: 15px; display: flex; flex-direction: column; height: 100%">
                <div class="d-flex justify-content-between align-items-start" style="background: #FFFFFF !important; flex: 0 0 auto">
                    <div class="flex items-center" v-if="tab != 'tab4'">
                        <div class="d-flex flex-column">
                            <p class="mb-2 font-s16 font-w-bold">@{{  formatDate(detailClickDays.day) }}</p>
                            <div class="d-flex justify-content-end align-items-center">
                                <div class="box-count">
                                    <div class="d-flex flex-column align-items-center" style="margin-right: 10px">
                                        <span class="font-s12 color-text font-w-normal">URL読み込み</span>
                                        <span class="count">@{{ total_friend_click_day }}</span>
                                    </div>
                                    <span class="font-s12 color-text font-w-bold">人</span>
                                </div>
                                <div class="box-count">
                                    <div class="d-flex flex-column align-items-center" style="margin-right: 10px">
                                        <span class="font-s12 color-text font-w-normal">友だち追加</span>
                                        <span class="count">@{{ total_friend_day }}</span>
                                    </div>
                                    <span class="font-s12 color-text font-w-bold">人</span>
                                </div>
                                <div class="box-count">
                                    <div class="d-flex flex-column align-items-center" style="margin-right: 10px">
                                        <span class="font-s12 color-text font-w-normal">アクション稼働</span>
                                        <span class="count">@{{ total_action_day }}</span>
                                    </div>
                                    <span class="font-s12 color-text font-w-bold">人</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex align-items-center" v-else>
                        <div class="d-flex align-items-center">
                            <svg xmlns="http://www.w3.org/2000/svg" width="27.173" height="28.761" viewBox="0 0 27.173 28.761" style="flex: 0 0 auto">
                                <path id="形状" d="M26.884,28.761H24.715a.287.287,0,0,1-.289-.281,10.843,10.843,0,0,0-21.678,0,.287.287,0,0,1-.289.281H.289a.288.288,0,0,1-.208-.088A.285.285,0,0,1,0,28.465a13.4,13.4,0,0,1,1.066-4.989,13.58,13.58,0,0,1,2.914-4.319A13.408,13.408,0,0,1,8.3,16.246a.2.2,0,0,1,.029-.013l.015-.006a8.963,8.963,0,1,1,10.494,0,.133.133,0,0,0,.022.009.133.133,0,0,1,.022.009,13.59,13.59,0,0,1,8.3,12.223.291.291,0,0,1-.084.21A.286.286,0,0,1,26.884,28.761ZM13.586,2.745A6.218,6.218,0,1,0,17.98,4.566,6.173,6.173,0,0,0,13.586,2.745Z" fill="#222"/>
                            </svg>
                            <div class="ml-2">
                                アクション稼働
                            </div>
                        </div>
                        <div class="d-flex align-items-center ml-2">
                            <span style="width: 80px; height: 40px; background: var(--gray3) 0% 0% no-repeat padding-box; border-radius: 5px; display: flex; justify-content: center; align-items: center">@{{ count_action }}</span>
                            <span style="margin-left: 10px">人</span>
                        </div>
                    </div>
                    <div style="font-weight: 600; font-size: 23px" v-on:click="toggleModalDetail = false">
                        <i class="fal fa-times"></i>
                    </div>
                </div>
                <div class="flex-column justify-content-center tooltip-status-qr">
                    <span style="font-weight: 500; font-size: 14px; color: #222222">稼働OFF時の友だち追加</span>
                    <span style="font-weight: 300; font-size: 14px; color: #8C8C8C">この友だちはQRコードアクションが</span>
                    <span style="font-weight: 300; font-size: 14px; color: #8C8C8C">稼働OFFの時に追加されました。</span>
                </div>
                <div style="width: 100%; background: #FFFFFF; display: flex; justify-content: space-around; padding-top: 15px; flex: 1 1 auto">
                    <div class="scrollable" style="max-height: calc(-300px + 100vh);; overflow: auto">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th style="width: 170px;text-align: left">
                                    <div class="d-flex">
                                        <span>@{{ tab == 'tab1' ? '日時' : '友だち追加日時' }}</span>
                                        <div class="sort" @click="sortDetailClickDay('time_click')">
                                            <i class="fal fa-angle-up" style="font-size: 12px; color: #222222; position: relative; top: 3px; font-weight: bold; cursor: pointer"></i>
                                            <i class="fal fa-angle-down" style="font-size: 12px; color: #222222; font-weight: bold; cursor: pointer"></i>
                                        </div>
                                    </div>
                                </th>
                                <th style="width: 150px; text-align: left !important;">LINE名</th>
                                <th style="width: 150px;text-align: left !important;">システム表示名</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-if="(tab == 'tab1' && detail.flag_is_click == 0) || (detail.is_old_friend == 0 && detail.action == 1)" v-for="detail in detailClickDays.details">
                                <td class="text-left ">
                                    <div class="d-flex align-items-center">
                                        <span style="width: 155px">@{{formatDate(detail.time_click, 1)}}</span>
                                        <svg v-if="detail.is_landing_off" style="margin-left: 10px; cursor: pointer" @mousemove="showElement($event, '.tooltip-status-qr')" @mouseleave="hideElement('.tooltip-status-qr')" id="warning-circle-filled" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                                            <rect id="warning-circle-filled_Frame_Background_" data-name="warning-circle-filled [Frame Background]" width="16" height="16" fill="none"/>
                                            <path id="形状" d="M7,14a7.008,7.008,0,1,1,4.947-2.053A7,7,0,0,1,7,14ZM7,9a.751.751,0,1,0,.53.22A.75.75,0,0,0,7,9ZM6.625,3.5a.125.125,0,0,0-.125.125v4.25A.125.125,0,0,0,6.625,8h.75A.125.125,0,0,0,7.5,7.875V3.625A.125.125,0,0,0,7.375,3.5Z" transform="translate(1 1)" fill="#888"/>
                                        </svg>
                                    </div>
                                </td>
                                <td colspan="2" style="text-align: left">
                                    友だち追加なし (URL読込みのみ)
                                </td>
                            </tr>
                            <tr v-else>
                                <td class="text-left ">
                                    <div class="d-flex align-items-center">
                                        <span style="width: 155px">@{{formatDate(detail.time_click, 1)}}</span>
                                        <svg v-if="detail.is_landing_off" style="margin-left: 10px; cursor: pointer" @mousemove="showElement($event, '.tooltip-status-qr')" @mouseleave="hideElement('.tooltip-status-qr')" id="warning-circle-filled" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                                            <rect id="warning-circle-filled_Frame_Background_" data-name="warning-circle-filled [Frame Background]" width="16" height="16" fill="none"/>
                                            <path id="形状" d="M7,14a7.008,7.008,0,1,1,4.947-2.053A7,7,0,0,1,7,14ZM7,9a.751.751,0,1,0,.53.22A.75.75,0,0,0,7,9ZM6.625,3.5a.125.125,0,0,0-.125.125v4.25A.125.125,0,0,0,6.625,8h.75A.125.125,0,0,0,7.5,7.875V3.625A.125.125,0,0,0,7.375,3.5Z" transform="translate(1 1)" fill="#888"/>
                                        </svg>
                                    </div>
                                </td>
                                <td style="text-align: left">
                                    <div class="line-user d-flex align-items-center" style="width: max-content;">
                                        <img @error="setAltImg" :src="detail.line_user?.avatar_url ? detail.line_user.avatar_url : '/images/avatar_bot_v2.png'" width="20px" height="20px" style="border-radius: 50%; object-fit: contain; margin-right: 15px;"/>
                                        <a v-if="detail.line_user" class="" :href="'/basic/friendlist/my_page/'+detail.line_user.id" style="text-decoration: underline; color: #5799DB; font-weight: 300; max-width: 115px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">@{{detail.line_user.name}}</a>
                                        <span class="font-s14 font-w-normal color-text" v-else>-</span>
                                        <i class="fas fa-ban"
                                           v-if="detail.is_blocked"
                                           style="font-size: 16px; color: var(--red); margin-left: 5px"
                                        ></i>
                                    </div>
                                </td>
                                <td style="text-align: left">
                                    <span style="max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; margin-left: 10px">@{{ detail.line_user?.view_name }}</span>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="tb-footer d-flex justify-content-between align-items-center mt-2 mb-2" :class="{ 'show-box-pagination': pagination.last_page > 1 }" style="flex: 0 0 auto">
                    <pagination :pagination="detailClickDays.pagination" @change_page="changePageDetailClickDay" @change_limit="changeLimitDetailClickDay"></pagination>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="/js/form_answer/jquery.ui.datepicker-ja.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <script src="/js/form_answer/vue.min.js"></script>
    <script>
        moment.locale('ja');
        var landing = @json($landing);
        var start_date = `{{ $startDate }}`;
        var end_date = `{{ $endDate }}`;
        var landingCreatedAt = `{{ $landingCreatedAt }}`;

    </script>
    <script src="/js/qr_code/v2/pagination.js?v={{config("sns-line.version")}}"></script>
    <script src="{{asset('js/qr_code/v2/detail.js')}}?v={{config("sns-line.version")}}"></script>
@endpush