@extends('layout.basic.main')
@section('title','流入アクション（一覧）')

@push('css')
    <link rel="stylesheet" href="{{asset('css/qr_code/qr_code.css')}}?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-rqn26AG5Pj86AF4SO72RK5fyefcQ/x32DNQfChxWvbXIyXFePlEktwD18fEz+kQU" crossorigin="anonymous">
    <style>
        .tab_folder{
            padding-bottom: 18px;
            margin-top: -6px;
            font-size: 18px;
            display: flex;
            align-items: baseline;
            justify-content: space-between;
        }

        .popup {
            position: relative;
            display: inline-block;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        /* The actual popup */
        .popup .popuptext {
            visibility: hidden;
            width: 233px;
            background-color: white;
            color: black;
            border-radius: 6px;
            border: 1px solid #ddd;
            padding: 10px;
            position: absolute;
            z-index: 9999;
            font-size: 14px;
            top: 125%;
            right: -159%;
            margin-left: -80px;
            box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
        }
        .popup .show {
            visibility: visible;
        }
        .btn-cus-a{
            padding: 9px 27px;
            border: 0;
            border-radius: 4px;
            color: white;
            font-weight: bold;
            cursor: pointer;
        }
        .btn-new-group{
            background-color: #0ebeeb !important;
        }
        .btn-cus-a:hover{
            color: #FFFFFF;
        }
        .col-btn-primary{
            background-color: rgb(87, 153, 219);
        ;
        }
        .box-btn-center{
            display: flex;
            align-items: baseline;
            justify-content: space-between;
        }
        .tag_group.active{
            background-color: #f6f6f6 !important;
        }
        .list-i-fol{
            padding: unset;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        #nano-inner-group .tag_group {
            padding: 7px;
            border: 1px solid #F2F2F2;
            border-radius: 4px;
            margin-bottom: 7px;
        }
        #nano-inner-group .tag_group:hover {
            background-color: #f6f6f6;
        }
        .btn-info {
            display: block;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            padding: 5px 10px;
            font-size: 85%;
            background: #4A96B2;
            color: #fff;
            margin-top: 5px;
            border: 0
        }



        #nano-inner-group {
            background-color: #fff
        }

        #nano-inner-group .tag_group {
            /*padding: 5px;*/
            /*border-bottom: solid 1px #dedddd;*/
            margin-left: 2px;
        }
        .btn-group:hover .action-landing-index{
            opacity: 1;
            visibility: visible;
            z-index: 100;
            display: block !important;
        }
        .ic-menu{
            font-size: 25px;
            cursor: pointer
        }
        .focus-pointer {
            cursor: pointer;
            padding: 5px;
        }

        .focus-pointer:hover{
            background-color: #f6f6f6  !important; ;
        }
        .fade {
            transform: unset !important;
            animation: unset !important;
        }
        .fade.in {
            transform: unset !important;
            animation: unset !important;
        }
        .modal-content {
            -webkit-animation-name: unset !important;
            -webkit-animation-duration: 0.6s;
            animation-name: unset !important; ;
            animation-duration: unset !important;
        }
        .modal.fade .modal-dialog {
            -webkit-transition: unset !important;
            transition: unset !important;
            -webkit-transform:unset !important;
            -ms-transform: unset !important;
            -o-transform: unset !important;
            transform: unset !important;
        }
        .modal-header{
            border-bottom: unset !important;
        }
        #landing-qr-code i {
            color: rgba(137,143,144,1);
            cursor: pointer;
            font-size: 18px;
        }
        #landing-qr-code .box-ic-sort i{
            line-height: 12px;
            color: rgba(137,143,144,1);
        }
        .box-ic-sort i{
            line-height: 15px;
            color: rgba(137,143,144,1);
            font-size: 24px;
        }
        .mt-item-fol{
            margin-top: 10px;
        }
        .qr-code .btn-choise-folder {
            background: rgba(8,191,90,1);
            width: 140px;
            font-size: 18px !important;
            font-weight: bold;
            border-radius: 50px !important;
            margin-bottom: 25px;
            margin-top: 10px;
        }

        .style-delete{
            background-color: #707070;
            color: white;
            padding: 6px 25px;
        }

        .style-delete:hover{
            background-color: #707070;
            color: white;
            opacity: .7;
        }

        .fix-btn:hover{
            color: white;
            opacity: .7;
        }

        .style-delete:disabled:hover{
            background-color: #707070;
            color: white;
        }
        .button-qr{
            font-size: 15px;
        }

        .btn-detail-qrcode{
            color: white;
            background-color: #96ADB2;
            border: unset;
        }

        th{
            background-color: #08BF5A !important;
            text-align: left;
            font-weight: bold;
        }

        .btn-cus-a:hover,.add-qr-new:hover{
            opacity: 0.7;
        }
        .btn-cus-a:focus,.add-qr-new:focus{
            outline: unset !important;
            outline-offset: 0;
        }
        #landing-qr-code .table th {
            border: unset !important;
        }

        #landing-qr-code .table td {
            border-top: unset !important;
            font-weight: bold !important;
        }
        #landing-qr-code .table td span {
            font-weight: bold !important;
        }

        #landing-qr-code .btn-cus-a {
            min-width: 120px !important;
            padding: 9px 35px;
        }

        .hover-icon-action:hover {
            background-color: #96ADB2 !important;
            color: #FFFFFF !important;
        }

        .pagination>.active>a{
            background-color: #08BF5A;
            border-color: #08BF5A;
            color: white !important;
        }
    </style>
@endpush
@section('content')
    <div class="qr-code row" id="landing-qr-code" v-cloak="">
        <h2 class="title-qr" style="font-size: 20px; font-weight: bold; padding: 10px 10px 10px 0;color: #51595C !important;margin-bottom: 20px">流入アクション</h2>
        @if(!$getInfoBot->liff_app_id)<h3 class="text-danger text-center no-liff-app" style="margin: 20px 0">
            LIFF IDを登録してください (<a
                    href="https://lme.jp/media/manual/inflow/" target="_blank">登録方法</a>)</h3>@endif
        <div class="col-md-3 col-sm-4 qr-left" style="width: 20%; padding-left: 0;padding-right: 0">
            <div class="tab_folder  " >
                <span style="font-weight: bold">フォルダ</span>
                <div>
                    <div class="popup">

                        {{--                                        <svg v-on:click="showAddGroupPopup" xmlns="http://www.w3.org/2000/svg"--}}
                        {{--                                             viewBox="0 0 512 512" style="width: 20px; fill: rgba(137,143,144,1) !important;position: absolute;right: 7px;top: -18px;"><path d="M232 344V280H168C154.7 280 144 269.3 144 256C144 242.7 154.7 232 168 232H232V168C232 154.7 242.7 144 256 144C269.3 144 280 154.7 280 168V232H344C357.3 232 368 242.7 368 256C368 269.3 357.3 280 344 280H280V344C280 357.3 269.3 368 256 368C242.7 368 232 357.3 232 344zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 48C141.1 48 48 141.1 48 256C48 370.9 141.1 464 256 464C370.9 464 464 370.9 464 256C464 141.1 370.9 48 256 48z"/></svg>--}}
                        <i v-on:click="showAddGroupPopup"  class="far fa-plus-circle ic-add"></i>
                        <div class="popuptext" id="myPopup">
                            <span style="font-weight: bold; color: #51595C">フォルダ名</span>
                            <div style="padding: 7px 0; display: flex; align-items: flex-end">
                                <input type="text" id="cat_txt" v-model="name_group"
                                       style="outline: none; width: 79%;height: 32px;padding-left: 3px;border: 1px solid #bbb;border-radius: 4px">
                                <span style="font-size: 12px;margin-left: 2px;">@{{ countTex(name_group) }}/15</span>
                            </div>
                            <div class="text-center" style="display: flex;align-items: center;justify-content: space-between;">
                                <button class="btn btn-success btn-sm"
                                        style="width: 82px;background: #08BF5A;"
                                        v-on:click="addGroup()">決定</button>
                                <button class="btn btn-secondary btn-sm" style="background-color: rgb(125, 145, 149);color: white;"
                                        v-on:click="closeAddPopup">キャンセル</button>

                            </div>

                        </div>
                    </div>
                    <i class="fas fa-sort-amount-down-alt ic-sort"  data-toggle='modal'
                       data-target='#modalSortFolder' v-on:click="showModalSortFolder()"></i>
                </div>
            </div>

            <div class="nano-inner" id="nano-inner-group" style="margin-top: 0;padding-right: 15px">
                <div class="tag_group row"
                     id="group_0"
                     data-id="0"
                     style="padding: 10px 7px"
                     v-bind:class="(group_open == 0)?'active':'folder-close'">
                    <div v-on:click="showGroup(0)" class="display_category row" style="margin-left: 1px;">
                        <div class="col-md-11 list-i-fol" >
                            <div style="font-weight: 600">未分類 (@{{ count_default }})</div>
                            <div class="btn-group"  style="padding: unset;">
                                {{--                                        <i class="far fa-ellipsis-h ic-menu" ></i>--}}
                            </div>
                        </div>

                    </div>
                </div>

                <div v-for="(category, index) in sortedCategories" class="tag_group row"
                     :id="'group_'+category.id"
                     :data-id="category.id"
                     v-bind:class="(category.id == group_open)?'active':'folder-close'">
                    <div v-on:click="showGroup(category.id)" class="display_category  row" style="margin-left: 1px;">
                        <div class="col-md-11 list-i-fol" >
                            <div style="font-weight: bold">
                                @{{ category.name }} (@{{ category.count }})
                            </div>
                            <div class="btn-group" style="padding: unset;" :style="(category.id == group_open)?'display:block':'display:none'">
                                <i class="far fa-ellipsis-h ic-menu" style="font-size: 25px"></i>
                                <ul class="dropdown-menu action-landing-index"
                                    style="min-width: 113px;left: -89px;top: 0px;">
                                    <li class="focus-pointer" v-on:click="editGroup(category)">
                                        <div style="cursor: pointer">
                                            フォルダ名変更
                                        </div>
                                    </li>
                                    <li class="focus-pointer" v-on:click="deleteGroup(category.id)">
                                        <div style="cursor: pointer">
                                            フォルダ削除
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-9 col-sm-8 qr-right" style="width: 80%">

            <div class="box-btn-center" style="margin-bottom: 23px">
                <div class="">
                    <a v-if="flagNewFreePlan == 0 || (flagNewFreePlan == 1 && qrCodeNumber < 3)"  v-on:click="showCreateLanding()"
                                    class="w-btn btn-cus-a col-btn-primary"  style="background-color:rgba(87,153,219,1) ; " target="_self"> 新規作成</a>
                    <a v-else onclick="showAlertNewFreePlan()"
                        class="w-btn btn-cus-a col-btn-primary"  style="background-color:rgba(87,153,219,1) ; " target="_self"> 新規作成</a>


                </div>
                <div class="btn-right-top" style="align-items: baseline;display: flex">
                    <div >
                        <button v-if="group_open == -1"
                           style="background-color: rgba(125,145,149,1); color: white; cursor: no-drop"
                           class="w-btn btn-cus-a btn-sort">並べ替え</button>
                        <button v-else style="background-color: rgba(125,145,149,1); color: white;"
                           @click="initDataSort()"
                           data-type="tag" data-id="" data-callback="tag_sorted"
                           class="w-btn btn-cus-a btn-sort">並べ替え</button>
                    </div>

                    <div>
                        <a v-if="(group_open == 0 && selected == false) || (group_open != 0 && selected == false)"
                           class="w-btn btn-cus-a btn-sort"
                           style="background-color: rgb(176, 194, 198);color: white;
                                    cursor: no-drop;
                                     margin-top: 1px;margin-left: 15px;margin-right: 15px; padding: 9px"
                        > 一括フォルダ変更
                        </a>
                        <a v-else  class="w-btn btn-cus-a btn-sort"
                           style="background-color: #5799DB;color: white; margin-top: 1px;margin-left: 15px;margin-right: 15px; padding: 9px"
{{--                           data-toggle='modal'--}}
{{--                           data-target='#modalMoveFolder'--}}
                           @click="showModalMoveFolder()"
                                {{--                                    v-on:click="deleteItemsInfo()"--}}
                                {{--                                    v-bind:class="(group_open == 0 && selected == false) || (group_open != 0 && selected == false)?'disabled':''"--}}
                        > 一括フォルダ変更
                        </a>
                    </div>
                    <div>
                        <a v-if="(group_open == 0 && selected == false) || (group_open != 0 && selected == false)"
                           class="w-btn btn-cus-a btn-sort"
                           style="background-color: rgb(176, 194, 198);color: white;
                                    cursor: no-drop;"
                        > 一括削除
                        </a>
                        <a v-else  class="w-btn btn-cus-a btn-sort"
                           style="background-color: #F44336;color: white; "
                           v-on:click="deleteByChecked()"
                                {{--                                    v-on:click="deleteItemsInfo()"--}}
                                {{--                                    v-bind:class="(group_open == 0 && selected == false) || (group_open != 0 && selected == false)?'disabled':''"--}}
                        > 一括削除
                        </a>
                    </div>

                </div>



            </div>
            <table class="table">
                <tbody>
                <tr>
                    <th class="select-all" style="width: 3%;text-align: center">
                        <input v-if="group_open == 0" type="checkbox" name="select_item" id="check-all"
                               v-model="selectAllDefault">
                        <input v-else type="checkbox" name="select_item" v-model="selectAll">

                    </th>
                    <th style="width: 15%"></th>
                    <th style="">作成日 / 管理名</th>
                    <th style="width: 28%">流入時アクション</th>
                    <th style="width: 180px" colspan="2">ページ表示回数/反応人数</th>
                    <th style="width: 90px"></th>
                </tr>
                <tr v-if="group_open == 0 && items_default && items_default.length > 0"
                    v-for="(item, index) in items_default" :class="'landing_'+item.id">
                    <td>
                        <input type="checkbox" name="item_check[]" :value="item.id"
                               v-model="selected">
                    </td>
                    <td>
                        <button class="btn btn-sns-line btn-sns-line-success" @click="showModalCopyLink(index, 'default')" style="padding: 10px 18px 8px">URL表示</button>
                    </td>
                    <td class="text-left">
                        <div>@{{ item.format_created_at }}</div>
                        <a :href="'landing/edit/'+ item.id" class="name-qr" style="text-decoration: underline;font-size: 16px">@{{ item.name }}</a>
                    </td>
                    <td>
                        <small>
                            <p v-for="item in item.action_detail" class="text-left" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis; max-width: 220px;margin-left: -6px">
                                @include('layout.modal_setting.label_action')
                                    {{-- <span v-if="item.type == 'tag'">【タグ】
                                                                    <span v-for="(itemTag, indexTag) in item.list_tags">@{{  indexTag == 0 ? '' : ',' }}@{{ itemTag.name }}</span>を<span
                                                v-if="item.data.action == 1">つける</span><span v-else>はずす</span>
                                                                </span>
                                <span v-else-if="item.type == 'scenario'">【ステップ】
                                                                    <span v-if="item.data.action != 1">@{{ item.data.scenario_name }}</span><span v-else>購読停止・予約キャンセル</span>
                                                                </span>
                                <span v-else-if="item.type == 'template'">【テンプレート】
                                                                    <span>@{{ item.data.template_name }}</span>
                                                                </span>
                                <span v-else-if="item.type == 'text'">【テキスト】
                                                                    <span>@{{ item.data.content | shortContent }}</span>
                                                                </span>
                                <span v-else-if="item.type == 'richmenu'">【リッチメニュー】
                                                                    <span v-if="item.data.action != 1">@{{ item.data.richmenu_name }}表示</span><span v-else>表示を停止</span>
                                                                </span>
                                <span v-else-if="item.type == 'remind'">【リマインド】<span>@{{ item.data.remind_name }}</span></span>
                                <span v-else-if="item.type == 'bookmark'">
                            <span class="action-title">【ブックマーク】</span>
                            <span v-if="item.data.action == 1">ブックマークする</span>
                            <span v-else>ブックマークを外す</span>
                            </span>
                                <span v-else-if="item.type == 'block'">
                              <span class="action-title">【ブロック・非表示】</span>
                              <span v-if="item.data.action == 1">ブロックする</span>
                              <span v-if="item.data.action == 2">ブロック解除</span>
                               <span v-if="item.data.action == 3">表示</span>
                              <span v-if="item.data.action == 4">非表示</span>
                            </span>
                                <span v-else-if="item.type == 'compliant_status'">
                                  <span class="action-title">【対応ステータス】</span>
                                  <span v-if="item.data.action == 1">@{{ item.data.content }}ステータスを外す</span>
                                  <span v-else> ステータスを外す</span>
                                </span>
                                <span v-else-if="item.type == 'friend_info'">【友だち情報】
                                                                <span v-show="item.data.action == 1">登録情報を削除</span>
                                                                <span v-show="item.data.action == 3">当日日付を登録</span>
                                                                <span v-show="item.data.action == 2">
                                                                    <span v-show="item.data.type == 1"><span style="margin-right: 5px">@{{item.data.name}}</span>(選択肢): @{{ item.data.content | shortContentFriendInfo }}</span>
                                                                    <span v-show="item.data.type == 2"><span style="margin-right: 5px">@{{item.data.name}}</span>(記述): @{{ item.data.content | shortContentFriendInfo }}</span>
                                                                    <span v-show="item.data.type == 3"><span style="margin-right: 5px">@{{item.data.name}}</span>(年月日): @{{ item.data.content | shortContentFriendInfo }}</span>
                                                                    <span v-show="item.data.type == 6"><span style="margin-right: 5px">@{{item.data.name}}</span>(ポイント): @{{ item.data.content | shortContentFriendInfo }} ポイントを</span>
                                                                    <span v-show="item.data.type == 6">
                                                                        <span v-show="item.data.type == 6 && item.data.action_content == 1">（上書き）</span>
                                                                        <span v-show="item.data.type == 6 && item.data.action_content == 2">（プラス）</span>
                                                                        <span v-show="item.data.type == 6 && item.data.action_content == 3">（マイナス）</span>
                                                                    </span>
                                                                </span>
                                                            </span> --}}
                            </p>
                        </small>
                    </td>
                    <td style="width: 85px" class="text-left">
                        <span style="color: #51595C">@{{ item.total_user_click }}回/@{{ totalUserAction(item.total_user_friend, item.count_action_web, item.action_with_friend) }}人</span>
                    </td>
                    <td style="width: 80px">
                            <a :href="'landing/show/' + item.id">
                                <button class="btn fix-btn btn-detail-qrcode" style="padding: 10px 22px 8px 22px;outline: none; margin-top: 0">詳細</button>
                            </a>
                    </td>
                    <td>
                        <div class="btn-group" style="padding: unset;">
                            <i class="far fa-ellipsis-h ic-menu" style="font-size: 30px"></i>
                            <ul class="dropdown-menu action-landing-index "
                                style="min-width: 74px; left: -22px; top: 20px; text-align: center">
                                <li class="focus-pointer">
                                    @if($flagNewFreePlan == 0 || ( $flagNewFreePlan == 1 && $qrCodeNumber < 3))
                                        <a  :href="'landing/copy/'+ item.id"  style="padding: 0;font-weight: bold">
                                            <div style="cursor: pointer;font-weight: 600">
                                                コピー
                                            </div>
                                        </a>
                                    @endif
                                    @if($flagNewFreePlan == 1 && $qrCodeNumber >= 3)
                                            <div onclick="showAlertNewFreePlan()" style="cursor: pointer;font-weight: 600">
                                                コピー
                                            </div>
                                    @endif
                                </li>
                                <li class="focus-pointer" v-on:click="deleteLanding(item.id)" style="padding-bottom: 7px">
                                    <div style="cursor: pointer;color: #F44336;font-weight: 600">
                                        削除
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </td>
                </tr>
                <tr v-if="group_open == 0 && items_default && items_default.length == 0">
                    <td colspan="7">表示するサイトがありません。</td>
                </tr>
                <tr :class="'landing_'+ item.id"
                    v-for="(item, index) in landings" v-if="item.id && group_open != 0"
                    :id="'landing_'+item.id"
                    :data-id="item.id">
                    <td>
                        <input type="checkbox" name="item_check[]" v-model="selected" :value="item.id">
                    </td>
                    <td>
                        <button class="btn btn-sns-line btn-sns-line-success" @click="showModalCopyLink(index, 'folder')" style="padding: 10px 18px 8px">URL表示</button>
                    </td>
                    <td class="text-left">
                        <div>@{{ moment(item.format_created_at).format('YYYY.MM.DD') }}</div>
                        <a :href="'landing/edit/'+ item.id" class="name-qr" style="text-decoration: underline;font-size: 16px">@{{ item.name }}</a>
                    </td>
                    <td>
                        <small>
                            <p v-for="item in item.action_detail" class="text-left" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis; max-width: 220px;margin-left: -6px">
                                @include('layout.modal_setting.label_action')
                                    {{-- <span v-if="item.type == 'tag'">【タグ】
                                                                    <span v-for="(itemTag, indexTag) in item.list_tags">@{{  indexTag == 0 ? '' : ', ' }}@{{ itemTag.name }}</span>を<span
                                                v-if="item.data.action == 1">つける</span><span v-else>はずす</span>
                                                                </span>
                                <span v-else-if="item.type == 'scenario'">【ステップ】
                                                                    <span v-if="item.data.action != 1">@{{ item.data.scenario_name }}</span><span v-else>購読停止・予約キャンセル</span>
                                                                </span>
                                <span v-else-if="item.type == 'template'">【テンプレート】
                                                                    <span>@{{ item.data.template_name }}</span>
                                                                </span>
                                <span v-else-if="item.type == 'text'">【テキスト】
                                                                    <span>@{{ item.data.content | shortContent }}</span>
                                                                </span>
                                <span v-else-if="item.type == 'richmenu'">【リッチメニュー】
                                                                    <span v-if="item.data.action != 1">@{{ item.data.richmenu_name }}表示</span><span v-else>表示を停止</span>
                                                                </span>
                                <span v-else-if="item.type == 'remind'">【リマインド】<span>@{{ item.data.remind_name }}</span></span>
                                <span v-else-if="item.type == 'bookmark'">
                            <span class="action-title">【ブックマーク】</span>
                            <span v-if="item.data.action == 1">ブックマークする</span>
                            <span v-else>ブックマークを外す</span>
                            </span>
                                <span v-else-if="item.type == 'block'">
                              <span class="action-title">【ブロック・非表示】</span>
                              <span v-if="item.data.action == 1">ブロックする</span>
                              <span v-if="item.data.action == 2">ブロック解除</span>
                               <span v-if="item.data.action == 3">表示</span>
                              <span v-if="item.data.action == 4">非表示</span>
                            </span>
                                <span v-else-if="item.type == 'compliant_status'">
                                  <span class="action-title">【対応ステータス】</span>
                                  <span v-if="item.data.action == 1">@{{ item.data.content }}ステータスを外す</span>
                                  <span v-else> ステータスを外す</span>
                                </span>
                                <span v-else-if="item.type == 'friend_info'">【友だち情報】
                                                                <span v-show="item.data.action == 1">登録情報を削除</span>
                                                                <span v-show="item.data.action == 3">当日日付を登録</span>
                                                                <span v-show="item.data.action == 2">
                                                                    <span v-show="item.data.type == 1"><span style="margin-right: 5px">@{{item.data.name}}</span>(選択肢): @{{ item.data.content | shortContentFriendInfo }}</span>
                                                                    <span v-show="item.data.type == 2"><span style="margin-right: 5px">@{{item.data.name}}</span>(記述): @{{ item.data.content | shortContentFriendInfo }}</span>
                                                                    <span v-show="item.data.type == 3"><span style="margin-right: 5px">@{{item.data.name}}</span>(年月日): @{{ item.data.content | shortContentFriendInfo }}</span>
                                                                    <span v-show="item.data.type == 6"><span style="margin-right: 5px">@{{item.data.name}}</span>(ポイント): @{{ item.data.content | shortContentFriendInfo }} ポイントを</span>
                                                                    <span v-show="item.data.type == 6">
                                                                        <span v-show="item.data.type == 6 && item.data.action_content == 1">（上書き）</span>
                                                                        <span v-show="item.data.type == 6 && item.data.action_content == 2">（プラス）</span>
                                                                        <span v-show="item.data.type == 6 && item.data.action_content == 3">（マイナス）</span>
                                                                    </span>
                                                                </span>
                                                            </span> --}}
                            </p>
                        </small>
                    </td>
                    <td style="width: 85px" class="text-left">
                        <span style="color: #51595C" >@{{ item.total_user_click }}回/@{{ totalUserAction(item.total_user_friend, item.count_action_web, item.action_with_friend) }}人</span>

                    </td>
                    <td style="width: 80px">
                            <a :href="'landing/show/' + item.id">
                                <button class="btn fix-btn btn-detail-qrcode" style="padding: 10px 22px 8px 22px;outline: none; width: 80px; margin-top: 0">詳細</button>
                            </a>
                    </td>
                    <td>
                        <div class="btn-group" style="padding: unset;">
                            <i class="far fa-ellipsis-h ic-menu" style="font-size: 30px"></i>
                            <ul class="dropdown-menu action-landing-index "
                                style="min-width: 74px; left: -22px; top: 20px; text-align: center">
                                <li class="focus-pointer">
                                    @if($flagNewFreePlan == 0 || ( $flagNewFreePlan == 1 && $qrCodeNumber < 3))
                                        <a  :href="'landing/copy/'+ item.id"  style="padding: 0;font-weight: bold">
                                            <div style="cursor: pointer;font-weight: 600">
                                                コピー
                                            </div>
                                        </a>
                                    @endif
                                    @if($flagNewFreePlan == 1 && $qrCodeNumber >= 3)
                                        <div onclick="showAlertNewFreePlan()" style="cursor: pointer;font-weight: 600">
                                            コピー
                                        </div>
                                    @endif
                                </li>
                                <li class="focus-pointer" v-on:click="deleteLanding(item.id)" style="padding-bottom: 7px">
                                    <div style="cursor: pointer;color: #F44336;font-weight: 600">
                                        削除
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </td>
                </tr>
                <tr v-if="group_open != 0 && landings && landings.length == 0">
                    <td colspan="7">表示するサイトがありません。</td>
                </tr>
                </tbody>
            </table>
            <nav style="margin-left: auto; padding-top: 5px;" class="text-center" v-if="totalPage > 1">
                <ul class="pagination">
                    <li v-if="currentPage > 1">
                        <a href="#" aria-label="Previous" @click.prevent="changePage(currentPage - 1)" style="font-size: 14px;">
                            <span aria-hidden="true" style="color:#08BF5A"><i class="fas fa-chevron-left" style="color: #DDDDDD !important;"></i></span>
                        </a>
                    </li>
                    <li v-for="page in totalPage" v-bind:class="[ page == currentPage ? 'active' : '']">
                        <a href="#" @click.prevent="changePage(page)" style="font-size: 14px;">@{{ page }}</a>
                    </li>
                    <li v-if="currentPage < totalPage">
                        <a href="#" aria-label="Next" @click.prevent="changePage(currentPage + 1)" style="font-size: 14px;">
                            <span aria-hidden="true" style="color:#08BF5A"><i class="fas fa-chevron-right" style="color: #DDDDDD !important;"></i></span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
        <div class="modal fade" id="modalSortFolder"
             tabindex="-1" role="dialog"
             data-backdrop="static"
             data-keyboard="false"
             aria-labelledby="chatSettingStatus">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"
                                v-on:click="closeModalSortFolder()" aria-hidden="true" style="opacity: 1;font-size: 27px">
                            <i class="fas fa-times hover-icon-action" style="color: rgba(125,145,149,1);padding: 5px 10px;border-radius: 4px;font-size: 24px"></i></button>
                        <h2 class="text-center" style="font-weight: bold"> 【 フォルダ並べ替え 】</h2>

                    </div>
                    <div class="modal-body scroll-modal">
                        <div class="row mt-item-fol" v-for="(item,index) in arrGroupSort" :data-id="item.id">
                            <div class="col-sm-9 col-sm-offset-1  ">
                                <div style="padding: 8px; border: 1px solid rgba(205,214,221,1); border-radius: 4px">@{{item.name}}</div>
                            </div>
                            <div class="col-sm-1">
                                <div class="box-ic-sort" >
                                    <i class="far fa-chevron-up"  v-on:click="onUpdateDefaultGroup(undefined, index, 'up')"></i>
                                    <i class="far fa-chevron-down " v-on:click="onUpdateDefaultGroup(undefined, index, 'down')"></i>
                                </div>

                            </div>
                        </div>
                        <input type="hidden" id="array_sort_fol" value="">
                        <input type="hidden" id="current_position_fol" value="">
                    </div>
                    <div class="text-center">
                        <button type="button" class="btn btn-success btn-choise-folder" v-on:click="sortedFolder">保存</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="sorter_modal_v1" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div id="" class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"
                                aria-hidden="true" style="opacity: 1;font-size: 27px">
                            <i class="fas fa-times hover-icon-action" style="color: rgba(125,145,149,1);padding: 5px 10px;border-radius: 4px;font-size: 24px"></i></button>
                        <h2 class="text-center" style="font-weight: bold"> 【 並べ替え 】</h2>

                    </div>
                    <div class="modal-body scroll-modal"  id="sorter_modal_body">
                        <div class="row mt-item-fol" v-for="(item,index) in items_sort" :data-id="item.id">
                            <div class="col-sm-9 col-sm-offset-1  ">
                                <div style="padding: 8px; border: 1px solid rgba(205,214,221,1); border-radius: 4px">@{{item.name}}</div>
                            </div>
                            <div class="col-sm-1">
                                <div class="box-ic-sort">
                                    <i class="far fa-chevron-up "  v-on:click="onUpdate(undefined, index, 'up')"></i>
                                    <i class="far fa-chevron-down " v-on:click="onUpdate(undefined, index, 'down')"></i>
                                </div>
                            </div>
                        </div>
                        <input type="hidden" id="array_sort" value="">
                        <input type="hidden" id="current_position" value="">
                    </div>
                    <div class="text-center">
                        <button type="button" class="btn btn-success btn-choise-folder"
                                v-on:click="sortedLanding">保存</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="modalMoveFolder"
             tabindex="-1" role="dialog"
             aria-labelledby="chatSettingStatus">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="opacity: 1;font-size: 27px">
                            <i class="fas fa-times hover-icon-action" style="color: rgba(125,145,149,1);padding: 5px 10px;border-radius: 4px;font-size: 24px"></i></button>
                        <h2 class="text-center"> 【 一括フォルダ変更 】</h2>

                    </div>
                    <div class="modal-body">
                        <div class="row" style="display: flex; align-items: center">
                            <div class="title-left text-right" style="width: 150px">
                                移行先選択
                            </div>
                            <div class="col-sm-8">
                                <div class="b-select">
                                    <select class="form-control my_class" v-model="folder_move_id">
                                        <option value="0">未分類</option>
                                        <option v-for="(category, index) in sortedCategories" :value="category.id">@{{ category.name }}</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="text-center">
                        <button type="button" class="btn btn-success btn-choise-folder"
                                v-on:click="moveItems()"
                                v-bind:class="(group_open == 0 && selected == false) || (group_open != 0 && selected == false)?'disabled':''"
                        >登録</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="modalCopyLink" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document" style="width: 500px">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="opacity: 1;font-size: 27px">
                            <i class="fas fa-times hover-icon-action" style="color: rgba(125,145,149,1);padding: 5px 10px;border-radius: 4px;font-size: 24px"></i></button>
                    </div>
                    <div class="modal-body" style="text-align: center;padding: 0 30px 20px 30px">
                        <div style="text-align: left;margin-left: calc(20% - 26.76px)">
                                <div>流入アクションURL</div>
                                <div class="detail-qrcode">
                                        @if($getInfoBot->domain_url_shorten || !empty(env('URL_OUTSIDE_STEP')))
                                            <input style="font-weight: normal;" type="text" :id="'action-qr-'+item_copy_link.id" :value="item_copy_link.new_link_qr_code" class="action-qr"
                                                   autocomplete="off">
                                            <input type="hidden" :id="'action-qr-copy'+item_copy_link.id" :value="item_copy_link.new_link_qr_code" class="action-qr">
                                        @endif
                                        @if(!$getInfoBot->domain_url_shorten && empty(env('URL_OUTSIDE_STEP')))
                                            <input style="font-weight: normal;" type="text" :id="'action-qr-'+item_copy_link.id" :value="item_copy_link.link_qr_code" class="action-qr"
                                                   autocomplete="off">
                                            <input  type="hidden" :id="'action-qr-copy'+item_copy_link.id" :value="item_copy_link.link_qr_code" class="action-qr">
                                        @endif
                                            <div class=" ui-icon-qrcode" v-on:click="copyUrlLanding(item_copy_link.id)">
                                                <i  class="fas fa-copy"></i>
                                            </div>
                                        <a  target="_blank"
                                            :href="'