@extends('layout.basic.main')
@section('title','QRコードアクション（一覧）')
@push('css')
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-rqn26AG5Pj86AF4SO72RK5fyefcQ/x32DNQfChxWvbXIyXFePlEktwD18fEz+kQU" crossorigin="anonymous">
    <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/qr_code_v2_new.css')}}?v={{config("sns-line.version")}}">

    <style>
        .i-tooltip {
            cursor: pointer;
            position: relative;
        }

        .i-tooltip:hover > .hide {
            display: block !important;
        }
        .toastMessage::before {
            content: "";
            display: inline-block;
            width: 18px;
            height: 18px;
            background-image: url('/images/circle-check.svg');
            background-size: cover;
            margin-right: 3px;
        }
    </style>
@endpush
@section('content')
    <article class="">
        <div id="loading_overlay" class="loading-overlay text-center" style="display: none">
            <i class="glyphicon glyphicon-refresh spin"></i>
        </div>
        <section class="qrlist tmp" id="item_vuelist_qr_v2" v-cloak>
            <div class="header">
                <div class="font-s18 font-w-bold color-text pb-1" style="border-bottom: 1px solid var(--line-color)">QRコードアクション（流入経路分析）</div>
                <p class="base-text" style="padding-top: 5px">個別の友だち追加URLを発行し、流入経路の分析やそのURLから登録した友だちに対して個別のアクション稼働ができる機能です。</p>
            </div>
            <div class="separate" style="display: flex; flex-direction: column; height: calc(100vh - 225px); position: relative">
                <div class="gr-action" @mouseleave="hideNote('.gr-action')">
                    <div class="text-[#222222] d-flex align-items-center" @click="openModalSortQr()">
                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
                            <path id="Icon_ionic-ios-move" data-name="Icon ionic-ios-move" d="M14.115,7.977,11.99,5.852a.371.371,0,0,0-.525,0l-.005.005a.372.372,0,0,0,0,.525l1.469,1.47L8.6,7.865l.013-4.331L10.082,5a.371.371,0,0,0,.525,0L10.612,5a.372.372,0,0,0,0-.525L8.487,2.348a.371.371,0,0,0-.525,0L5.837,4.473a.372.372,0,0,0,0,.525L5.842,5a.371.371,0,0,0,.525,0l1.469-1.47L7.85,7.865l-4.33-.013,1.469-1.47a.372.372,0,0,0,0-.525l-.005-.005a.371.371,0,0,0-.525,0L2.334,7.977a.372.372,0,0,0,0,.525l2.125,2.125a.371.371,0,0,0,.525,0l.005-.005a.372.372,0,0,0,0-.525L3.519,8.628l4.33-.013-.013,4.331-1.469-1.47a.371.371,0,0,0-.525,0l-.005.005a.372.372,0,0,0,0,.525l2.125,2.125a.371.371,0,0,0,.525,0l2.125-2.125a.372.372,0,0,0,0-.525l-.005-.005a.371.371,0,0,0-.525,0l-1.469,1.47L8.6,8.614l4.33.013L11.46,10.1a.372.372,0,0,0,0,.525l.005.005a.371.371,0,0,0,.525,0L14.115,8.5A.367.367,0,0,0,14.115,7.977Z" transform="translate(-2.226 -2.24)" fill="#2b2f36"/>
                        </svg>
                        並べ替え
                    </div>
                    <div class="text-[#222222] d-flex align-items-center" @click="linkGoogle()">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="19" height="19" viewBox="0 0 19 19">
                            <image id="images" width="19" height="19" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAb1BMVEX///80qFMYgDgopUuk1bCGyJeLx5mQzJ4co0ROsmjl9Okxp1Ds9++ByJMXokI+rVvL5tHb7t/T7NoKfTEriUfQ5NY2jU/i8+fZ6t684cXS5dgwikslhkN7xI0AnzmHypjF5c1sv4Kr2La94sav27rZ0M73AAADU0lEQVR4nO3d23bSQBhA4QwBUpm0EKgiKgVr3/8ZTY+2xQzC+k/q3he9mlX41jCZJCWrVUVERESn1u7HzVSjz96yxxbfL2qd8vVHb1zfbFvXSavV9drbV22yni+l0eqb9yze5awITKPR6pPvWtzoAnvhaHX9xRHYJl3gvbCfRUfiTnMNPgv7WXT7oC6VfU/Cfha9DjfqU/gk7I+oTrOovAh/CfsPqsssdupT+CLsZ3HmINwYCn22/ltL4Wj11X4tjk2FHmvRWOiw9VsL7U/gzIXmW7+90PoEzkHYH1EtZ9FDaLv1uwhNt34foeVadBIazqKX0O7ejZvQbOv3E1qdwDkKjQ43nkKbEzhXYX9E1b/h7yu0uF50Fo70/2zjLdTf+t2F6lu/v1B7LQYQKm/9EYS6W38IoerWH0OoOYtBhIr3bqII9e7dhBGqbf1xhFp/tgkkVNr6Iwl1TuBCCVXu3cQSamz9wYQKW380ofwshhOK37vRF85PFEpvGgGFwmvR4FN6evUYIUKE3iFEiNA/hAgR+ocQIUL/ECJE6B9ChAj9QygnzJpFEM4/aDb3F+ZtO9Or3Q7PopWw3gm+zmGTwitbCSeCr3MYQqkQ6oVQKoR6IZQK4XPrZaH1OQOjCSc3F4PdbF8N3JYGvvmNwYTTwjVIfflq4GVp4BQhQoQIESJEiBAhQoT/uXByczXYu6unwsDIV09tsXMGRhPKh1AqhHohlAqhXgilQqhXNOGsKzQ7Z2A0YZPmg6XXX0vZlQY2gYXTOj98Ceztj8fvhb27ejoc9jw29NXTv399iBAhQoQIESJEiBBhDOHwsyG/ubYYGBhZ2C0KdecMjCaUD6FUCPVCKBVCvRBKhVAvhFKVnnTOw09OCFR4mJvn8REi9A8hQoT+IUSI0D+ECBH6hxAhQv8QIkToH0KECP1DiBChfwgRIvQPIUKE/iFEiNA/UeFtSOGtoHATUvhDULgOKVwff+N/Xir90x6fcpIEVk28Sayb42/7hDpvz0E5dcff9imFm0ThKayqNthKzKk9/qZPaxGKmNNCGlhV++I/QbMt5708sJ/FeZS1WM8VZvC+dpIiGOu0E1+DLy0n9VXt21XdLNV8D3V348av8Z3wLkhERET0d/QTjAS15j+6JjQAAAAASUVORK5CYII="/>
                        </svg>
                        スプレッドシート連携
                    </div>
                    <div class="text-[#222222] d-flex align-items-center" @click="showModalLinkASP()">
                        <svg id="database-outlined" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                            <rect id="矩形" width="16" height="16" opacity="0"/>
                            <path id="形状" d="M10.5,14H.5a.5.5,0,0,1-.5-.5V.5A.5.5,0,0,1,.5,0h10a.5.5,0,0,1,.5.5v13A.5.5,0,0,1,10.5,14ZM1.125,9.625v3.251h8.75V9.625Zm0-4.25v3.25h8.75V5.375Zm0-4.25v3.25h8.75V1.125Zm1.75,10.75A.625.625,0,1,1,3.5,11.25.625.625,0,0,1,2.875,11.875Zm0-4.25A.625.625,0,1,1,3.5,7,.625.625,0,0,1,2.875,7.625Zm0-4.25A.625.625,0,1,1,3.5,2.75.625.625,0,0,1,2.875,3.375Z" transform="translate(2.5 1)"/>
                        </svg>
                        ASP連携
                    </div>
                </div>
                <span class="c-tooltip guide-sub-menu" style="width:110px; top: 0;  left: unset; right: -8px; z-index: 99999">その他の操作</span>
                <span class="c-tooltip t-search" style="width: 50px; top: -10px; right: 77px; left: unset; z-index: 99999" v-if="is_show_search == 0">検索</span>
                <span class="c-tooltip t-filter-action" style="width: 78px; top: -10px; left: unset; right: 168px; z-index: 99999">表示変更</span>
                <span class="c-tooltip c-t-right text-center pt-[3px]" style="position: fixed; z-index: 99999" id="tooltip-more-action-table">コピー・削除</span>
                <span class="c-tooltip text-center pt-[3px]" id="tooltip-csv-table" style="position: fixed;width: 136px;z-index: 99999">CSVダウンロード</span>

                <div class="qr_separate" style="margin-top: 5px; display: flex; flex: 1 1 auto; margin-bottom: 20px; overflow: hidden">
                    <div class="sidebar-left" v-show="show_menu_left == 1">
                        <div class="folder_action" style="display: flex; justify-content: space-between; margin-bottom: 15px">
                            <div class="popup" style="width: 50%;">
                                <span @click="showModalCreateFolder()" style="display: inline-block">
                                    <button class="btn btn-sns-line btn-sns-line-outline-default btn_group_popup"  style="width: 110px; font-weight: 300; padding: 6px 0">
                                        <i class="far fa-plus" style="color: #222222 !important; padding-right: 5px;"></i>フォルダ追加
                                    </button>
                                </span>
                                <div class="popuptext" id="myPopup" :class="show_create_folder ? 'show' : ''" style="cursor: auto">
                                    <span class="font-weight-bold">フォルダ名</span>
                                    <div style="padding: 7px 0; display: flex; align-items: flex-end">
                                        <input type="text" id="cat_txt" maxlength="15" v-model="folder_name" style="font-size:14px;width: 79%;height: 32px;padding-left: 3px;border: 1px solid #bbb;border-radius: 4px; font-weight: bold">
                                        <span style="font-size: 12px;margin-left: 2px;font-weight: bold">@{{ folder_name ? folder_name.length : 0 }}/15</span>
                                    </div>
                                    <div class="text-center" style="display: flex;align-items: center;justify-content: space-between;">
                                        <button class="btn btn-sns-line-success btn-sns-line" style="width: 82px;background: #08BF5A;" @click="createOrUpdateFolder()">決定</button>
                                        <button class="btn btn-sns-line-secondary btn-sns-line" style="padding: 6px;" @click="show_create_folder = false">キャンセル</button>
                                    </div>
                                </div>
                            </div>


                            <button
                                    @click="openModalSortFolder()"
                                    style="width: 110px; font-weight: 300 !important;"
                                    class="btn btn-sns-line btn-sns-line-outline-default btn_modal_sort" >
                                <i class="fa fa-arrows " style="color: #2B2F36 !important; padding-right: 5px;"></i>並べ替え
                            </button>
                        </div>
                        <div class="scrollable" style="overflow-x: hidden; max-height: calc(100% - 45px);">
                            <div class="nano-inner" id="nano-inner-group" style="margin-top: 0;">
                                <div class="qr_group" id="group_0" data-id="0" style="padding: 10px 7px; border: none; cursor: pointer;" v-bind:class="(folder_active == 0)?'active':'folder-close'">
                                    <div @click="selectedFolder(0, $event)" class="display_category" style="margin-left: 1px;">
                                        <div class="list-i-fol">
                                            <div style="font-size: 14px; color: #222222; font-weight: 300;">未分類 (@{{ 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 categories" class="qr_group"
                                     :id="'group_'+category.id" :data-id="category.id" v-bind:class="(folder_active == category.id)?'active':'folder-close'"
                                     style="border: none; cursor: pointer;" @click="selectedFolder(category.id, $event)">
                                    <div class="display_category row" style="margin-left: 1px;">
                                        <div class="list-i-fol">
                                            <div style="font-size: 14px; color: #222222; font-weight: 300;" v-if="category.name">
                                                @{{ category.name }} (@{{ category.count ?? 0 }})
                                            </div>
                                            <div class="btn-group active" style="background: unset !important; right: 20px; padding-left: 10px" :style="(category.id == folder_active)?'display:block':'display:none'">
                                                <i class="far fa-ellipsis-v ic-menu"></i>
                                                <ul class="dropdown-menu action-broadcast" :class="{ 'last-sub-menu': index == categories.length - 1 }" style="font-weight: 500; color: #222222;">
                                                    <li class="focus-pointer" @click.stop="showModalEditFolder(category.id, category.name)">
                                                        <div style="cursor: pointer;">
                                                            <i class="fal fa-edit"></i>
                                                            名称変更
                                                        </div>
                                                    </li>
                                                    <li class="focus-pointer" @click.stop="deleteFolder(category.id, index)">
                                                        <div style="cursor: pointer">
                                                            <i class="fal fa-trash-alt"></i>
                                                            フォルダ削除
                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="qr_temp_right">
                        <div class="box-btn-center" style="margin-bottom: 0;">
                            <div class="d-flex align-items-center">
                                <button type="button" @click="openModalCreateQr()" class="btn btn-sns-line btn-sns-line-primary btn_create_temp" style="width: 110px; margin-right: 10px">
                                    <i class="far fa-plus" style="color: #FFFFFF !important; padding-right: 5px;"></i>新規作成
                                </button>
                                <span style="color: #222222; font-size: 14px;" v-show="selected.length > 0">このフォルダ内の @{{ selected.length }} 件が選択されています</span>
                            </div>
                            <div class="flex items-center" style="position: relative">
                                <div class="custom-dropdown filter" style="right: 121px; position: absolute">
                                    <div class="selected" @mouseover="showTooltipHover($event, '.t-filter-action', 'flex')" @mouseleave="hideNote('.t-filter-action')">
                                        <span class="name">全件表示</span>
                                        <i class="fas fa-caret-down icon"></i>
                                    </div>
                                    <ul class="options scrollable" id="filter-item">
                                        <li class="text-[#222222]">表示する稼働対象</li>
                                        <li class="text-[#222222]" value="0">全件表示</li>
                                        <li class="text-[#222222]" value="2">全ての友だち</li>
                                        <li class="text-[#222222]" value="1">新規友だちのみ</li>
                                    </ul>
                                </div>
                                <div class="btn-right-top gr-search" @mouseover="showTooltipHover($event, '.t-search', 'flex')" @mouseleave="hideNote('.t-search')" style="position: relative;align-items: center; background: #ffffff;">
                                    <i class="far fa-search"
                                       @click="is_show_search = !is_show_search"
                                       style="color: #888888 !important; font-size: 20px; width: 40px; height: 40px; display: flex;align-items: center; justify-content: center"></i>
                                    <input type="text" @keyup.enter="searchKeyword()" class="form-control search_for_temp" v-model="query.keyword"
                                           placeholder="管理名を入力"
                                           style="padding: 0 35px 2px 0px;
                                                  height: 38px;
                                                  border: none;
                                                  box-shadow: none;
                                                  width: 310px;
                                                  font-size: 13px;
                                                  transition: 0.4s;
                                                  color: #222222"
                                           :class="{ 'hide-search': is_show_search == 0 }"
                                    >

                                    <img @click="clearSearch" v-if="query.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 class="more w-[16px] text-center ml-[27px] mr-[23px]" @click="showTooltip($event, '.gr-action')">
                                    <i class="far fa-ellipsis-h ic-menu hover" @mousemove="showTooltipHover($event, '.guide-sub-menu', 'flex')" @mouseleave="hideNote('.guide-sub-menu')" style="font-size: 16px; color: #1F1F1F; position: relative"></i>
                                </div>
                            </div>
                        </div>

                        <div class="d-flex" style="justify-content: end">

                        </div>
                        <div class="note note-total-click">
                            <p>新規友だちの場合は</p>
                            <p>友だち追加ページが</p>
                            <p>表示された場合のみ</p>
                            <p>カウントされます</p>
                        </div>
                        <div class="note note-total-friend">
                            <p>カウント対象は</p>
                            <p>新規友だちのみ</p>
                        </div>
                        <div class="table-responsive table-responsive-list-template" style="max-height: calc(100% - 90px); margin-top: 20px" :style="qrs.length === 0 ? 'overflow-y: hidden' : ''">
                        <div>
                                <div class="wrap-scroll-table">
                                    <table id="table_list_qrs" style="margin-top: 0">
                                        <thead style="border-radius: 5px; background: unset">
                                        <tr style="border-radius: 5px; border-bottom: 1px solid #ffffff">
                                            <th class="checkth" style="border-radius: 4px 0px 0px 4px;">
                                                <label class="c-checkbox">
                                                    <input type="checkbox" name="" value="" v-model="selectAll">
                                                    <span class="checkmark"></span>
                                                </label>
                                            </th>
                                            <th style="width: 100px; text-align: center !important;">
                                                <div style="display: flex; align-items: center">
                                                    稼働状況
                                                    <div class="sort" style="display: grid; position: relative; bottom: 2px; margin-left: 5px" @click="sort('status')">
                                                        <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 class="btnth" style="width: 230px">
                                                <div style="display: flex; align-items: center">
                                                    管理名
                                                    <div class="sort" style="display: grid; position: relative; bottom: 2px; margin-left: 5px" @click="sort('name')">
                                                        <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 class="siteth" style="width: 160px; text-align: center !important;">
                                                <div style="display: flex; align-items: center; justify-content: center">
                                                    稼働対象
                                                    <div class="sort" style="display: grid; position: relative; bottom: 2px; margin-left: 5px" @click="sort('action_with_friend')">
                                                        <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 class="siteth" style="width: 200px; text-align: center !important;">
                                                設定済みアクション
                                            </th>
                                            <th class="siteth" style="width:150px; text-align: right !important;">
                                                <div class="d-flex align-items-center">
                                                    URL読み込み人数
                                                </div>
                                            </th>
                                            <th class="siteth" style="width:210px; text-align: right !important;">
                                                <div class="d-flex align-items-center">
                                                    友だち追加・ブロック解除人数
                                                </div>
                                            </th>
                                            <th class="siteth" style="width:170px; text-align: center !important;">アクション稼働人数</th>

                                            <th class="siteth" style="width:395px; text-align: center !important;">
                                                <div style="display: flex; align-items: center">
                                                    有効期間
                                                </div></th>
                                            <th class="siteth" style="width:120px; text-align: center !important;">
                                                <div style="display: flex; align-items: center">
                                                    作成日
                                                    <div class="sort" style="display: grid; position: relative; bottom: 2px; margin-left: 5px" @click="sort('created_at')">
                                                        <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 class="siteth" style="width:120px; text-align: center !important;">
                                                <div style="display: flex; align-items: center">
                                                    最終編集日
                                                    <div class="sort" style="display: grid; position: relative; bottom: 2px; margin-left: 5px" @click="sort('updated_at')">
                                                        <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 class="siteth" style="width:155px; text-align: center !important;">QRコード表示</th>
                                            <th class="siteth" style="width: 233px; border-radius: 0 4px 4px 0; text-align: left !important;">データ詳細</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr v-for="(item, index) in qrs" :class="{ 'disabled': item.status == 0 }" @click="window.location.href = `/basic/landing/v2/edit/${item.id}`" style="cursor: pointer">
                                            <td class="input_check" style="padding: 10px">
                                                <label class="c-checkbox" @click.stop>
                                                    <input type="checkbox" name="check_item[]" :value="item.id"
                                                           v-model="selected"
                                                    >
                                                    <span class="checkmark"></span>
                                                </label>
                                            </td>
                                            <td style="padding-left: 40px">
                                                <label class="custom-switch" @click.stop>
                                                    <input type="checkbox"
                                                           v-model="item.status"
                                                           false-value="0"
                                                           true-value="1"
                                                           @change="changeStatus(item)"
                                                    >
                                                    <span class="custom-slider"></span>
                                                    <span class="label on">ON</span>
                                                    <span class="label off">OFF</span>
                                                </label>
                                            </td>
                                            <td style="padding-left: 10px">
                                                <div class="text">
                                                    <p class="full-text c-tooltip bottom-[35px] left-0" style="transform: translateX(-20%); height: fit-content" v-if="item.name?.length > 13">@{{ item.name }}</p>
                                                    <p class="trunc-text" style="font-weight: 600; font-size: 16px; color: #5799DB">@{{ truncText(item.name) }}</p>
                                                </div>
                                            </td>
                                            <td style="padding-left: 20px">
                                                <div class="d-flex justify-content-start">
                                                    <div class="type-qr all-friend" v-if="item.action_with_friend == 2">
                                                        <span></span>
                                                        <span>全ての友だち</span>
                                                    </div>
                                                    <div class="type-qr new-friend" v-else>
                                                        <span></span>
                                                        <span>新規友だちのみ</span>
                                                    </div>
                                                </div>
                                            </td>
                                            <td style="text-align: center">
                                                <button href="#" class="underline font-s16 hover:opacity-70" style="color: #5799DB; font-weight: 300" @click.stop="openModalFilter(item.action_id)" v-if="isAction(item)">アクション確認</button>
                                                <span class="color-gray1 font-s16" v-else>アクション未設定</span>
                                            </td>
                                            <td style="text-align: right; padding-right: 20px">
                                                @{{ item.total_user_click }}人
                                            </td>
                                            <td style="text-align: right">
                                                @{{ item.total_user_friend }}人
                                            </td>
                                            <td style="text-align: right; padding-right: 20px">
                                                @{{ item.count_action_web + item.count_action }}人
                                            </td>
                                            <td style="padding: 10px">
                                                <div class="flex">
                                                    <div class="w-[156px]">@{{ datetimeFormat(item.limit_start_time) }}</div>
                                                    <div class="mx-[15px]">-</div>
                                                    <div class="w-[156px]">@{{ datetimeFormat(item.limit_end_time) }}</div>
                                                </div>
                                            </td>
                                            <td style="padding: 10px">@{{ moment(item.created_at).format('YYYY.MM.DD') }}</td>
                                            <td style="padding: 10px">@{{ moment(item.updated_at).format('YYYY.MM.DD') }}</td>
                                            <td class="pending" style="padding-left: 15px">
                                                <div class="btn-url hover" @click.stop="showModalUrlLanding(item)">
                                                    <svg id="qrcode-outlined" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                                                        <rect id="矩形" width="16" height="16" fill="#08bf5a" opacity="0"/>
                                                        <path id="形状" d="M11.875,12h-.75A.125.125,0,0,1,11,11.875v-.75A.127.127,0,0,1,11.125,11h.75a.125.125,0,0,1,.125.125v.75A.125.125,0,0,1,11.875,12ZM9.656,12h-.75a.125.125,0,0,1-.125-.125v-.75A.125.125,0,0,1,8.906,11h.75a.125.125,0,0,1,.125.125v.75A.125.125,0,0,1,9.656,12ZM7.438,12h-.75a.125.125,0,0,1-.125-.125V6.688a.125.125,0,0,1,.125-.125H9.656a.125.125,0,0,1,.125.125V8.781H11V6.688a.125.125,0,0,1,.125-.125h.75A.125.125,0,0,1,12,6.688V9.656a.125.125,0,0,1-.125.125H8.906a.125.125,0,0,1-.125-.125V8.062H7.563v3.812A.125.125,0,0,1,7.438,12ZM5.313,12H.5a.5.5,0,0,1-.5-.5V6.688a.125.125,0,0,1,.125-.125H5.313a.125.125,0,0,1,.125.125v5.187A.125.125,0,0,1,5.313,12ZM1,7.563V11H4.438V7.563ZM3.156,9.843H2.282a.125.125,0,0,1-.125-.124V8.843a.125.125,0,0,1,.125-.125h.875a.127.127,0,0,1,.125.125v.876A.125.125,0,0,1,3.156,9.843Zm8.718-4.405H6.688a.125.125,0,0,1-.125-.125V.125A.125.125,0,0,1,6.688,0H11.5a.5.5,0,0,1,.5.5V5.313A.125.125,0,0,1,11.875,5.438ZM7.563,1V4.438H11V1ZM5.313,5.438H.125A.125.125,0,0,1,0,5.313V.5A.5.5,0,0,1,.5,0H5.313a.125.125,0,0,1,.125.125V5.313A.127.127,0,0,1,5.313,5.438ZM1,1V4.438H4.438V1ZM9.719,3.281H8.843a.127.127,0,0,1-.125-.125V2.282a.125.125,0,0,1,.125-.125h.876a.125.125,0,0,1,.124.125v.875A.125.125,0,0,1,9.719,3.281Zm-6.563,0H2.282a.125.125,0,0,1-.125-.125V2.282a.125.125,0,0,1,.125-.125h.875a.125.125,0,0,1,.125.125v.875A.127.127,0,0,1,3.156,3.281Z" transform="translate(2 2)" fill="#08bf5a"/>
                                                    </svg>
                                                    QRコードを表示
                                                </div>
                                            </td>
                                            <td class="" style="padding: 10px;">
                                                <div class="gr-btn d-flex align-items-center">
                                                    <div class="btn btn-detail" @click.stop="window.location.href = `/basic/landing/show/${item.id}`">データ詳細</div>
                                                    <div class="spreadsheet" v-if="item.google_sheet_id" @click.stop="redirectGoogleSheet(item.google_sheet_id)">
                                                        <span class="c-tooltip" style="width: 162px">スプレッドシート表示</span>
                                                        <img src="/images/google-sheet.png" alt="" width="20px" class="">
                                                    </div>
                                                    <div class="download-csv"
                                                         @mouseover="showTooltipCsvTable($event)"
                                                         @mouseleave="hideNote('#tooltip-csv-table')"
                                                         @click.stop="downloadCsv(item)">
                                                        <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="more" style="padding: unset; position: relative"
                                                         @click.stop="showTooltip($event, '.dropdown-menu-' + index)">
                                                        <i class="far fa-ellipsis-h ic-menu" style="font-size: 20px; color: rgb(224, 224, 224); margin-left: 11px; margin-right: 12px" @mouseover="showTooltipMoreActionTable($event)" @mouseleave="hideNote('#tooltip-more-action-table')"></i>
                                                        <ul class="dropdown-menu" :class="{ 'last-menu-qr': index == qrs.length - 1, ['dropdown-menu-' + index]: true }" style="min-width: 74px;">
                                                            <li class="focus-pointer-item">
                                                                <div style="font-weight: 300; color: rgb(34, 34, 34) !important; padding: 7px 15px" @click.stop="copyLanding(item)">
                                                                    <i class="far fa-copy"></i>
                                                                    コピー
                                                                </div>
                                                            </li>
                                                            <li class="focus-pointer-item">
                                                                <div style="cursor: pointer; font-weight: 300; color: rgb(34, 34, 34) !important; padding: 7px 15px" @click.stop="deleteQrs([item.id])">
                                                                    <i class="fal fa-trash-alt"></i>
                                                                    削除
                                                                </div>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="text-center md:mt-[75px]" v-if="qrs.length == 0">
                            <div class="flex justify-center" style="margin-bottom: 19px">
                                <img src="/images/group_4483.svg" alt="">
                            </div>
                            <div style="color: #8C8C8C; font-weight: 400; font-size: 16px">まだデータがありません</div>
                            <div style="margin-bottom: 9px; font-size: 14px">
                                <button v-on:click="openModalCreateQr()" style="color: #5799DB; text-decoration: underline; font-weight: 300">新規作成</button>
                                <span style="color: #B7B7B7">するとここにデータが表示されます</span>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="action_separate">
                    <div class="qr_action_left text-center" style="padding-left: 30px" v-if="show_menu_left == 1">
                        <a class="d-flex justify-content-center align-items-center" style="text-decoration: none;
                           color: #222222;
                           cursor: pointer;
                           font-size: 14px;
                           font-weight: 300;"
                           @click="openTabContent(0)">
                            <div style="border: 1px solid var(--line-color);
                                   border-radius: 4px;
                                   width: 20px;
                                   height: 20px;
                                   margin-right: 5px">
                                <i class="fas fa-caret-left" style="color: var(--gray1) !important; font-size: 14px;"></i>
                            </div>
                            フォルダを非表示
                        </a>
                    </div>
                    <div class="" v-if="show_menu_left == 0">
                        <div class="qr_action_left_sm" style="font-weight: bold; color: #222222;" @click="openTabContent(1)">
                            <div style="cursor: pointer;
                               font-size: 14px;
                               font-weight: 300;
                               border: 1px solid var(--line-color);
                               border-radius: 4px;
                               width: 20px;
                               height: 20px;">
                                <i class="fas fa-caret-right" style="color: var(--gray1) !important; font-size: 14px;"></i>
                            </div>
                        </div>
                    </div>
                    <div class="qr_right qr_action_right">
                        <div class="text-center" style="line-height: 80px;">
                            <button class="btn btn-sns-line btn-sns-line-outline-default btn_folder_change" style="font-weight: 300; font-size: 14px"
                                    @click="showModalMoveTemplate()" :class="{'active': selected.length > 0}" :disabled="selected.length == 0">
                                <i class="far fa-folder" style="padding-right: 5px; color: #888888"></i>一括フォルダ変更
                            </button>
                            <button class="btn btn-sns-line btn-sns-line-outline-default btn_bulk_delete" style="margin-left: 13px; font-weight: 300; font-size: 14px"
                                    @click="deleteQrs(selected)" :class="{'active': selected.length > 0}" :disabled="selected.length == 0">
                                <i class="fal fa-trash-alt" style="padding-right: 5px; color: #888888"></i>一括削除
                            </button>
                            <a href="/basic/landing-qr/removed" class="href-remove hover:opacity-70">削除したQRコードアクション</a>
                        </div>
                        <pagination :pagination="pagination" @change_page="changePage" @change_limit="changeLimit"></pagination>
                    </div>
                </div>
            </div>

            @include('basic.qr_code.v2.modal.sort_qr')
            @include('basic.qr_code.v2.modal.sort_folder')
            @include('basic.qr_code.v2.modal.move_folder')
            @include('basic.qr_code.v2.modal.create_qr')
            @include('basic.qr_code.v2.modal.url')
            @include('basic.qr_code.v2.modal.link_asp')

            <modal-preview-send-test ref="modal-preview-send-test"></modal-preview-send-test>
        </section>
        @include('layout.modal_setting.modal_select_action')
        @include('layout.modal_filter_v2')
        @include('basic.template_v2.common.modal.modal-preview-send-test')
    </article>
    <input type="hidden" id="folder_cookie"   value="{{$folderCookie}}" >
    <input type="text" value="preview_qr_code" id="type_action_qrcode" hidden>
@endsection
@push('js')
    <script>
        route_add_item = "{!! route('addItemReply') !!}";
        bot_id = "{!! \Session::get('current_bot_id') !!}"
        var flagNewFreePlan = '{{ $flagNewFreePlan }}';
        var bot = @json($getInfoBot);
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#checkAll').change(function () {
                var checkboxes = $(this).closest('form').find(':checkbox');
                checkboxes.prop('checked', $(this).is(':checked'));
            })
        });
    </script>
    <script src="/js/tailwindcss.js"></script>
    <script src="/js/form_answer/vee-validate.rc7.min.js"></script>
    <script src="/js/form_answer/vee-validate_ja.min.js"></script>
    <script src="/js/validate/config.js"></script>
    <script src="/js/qr_code/v2/index.js?v={{config('sns-line.version')}}"></script>
    <script>
        var params = [];
        var basic_home_new = [];
    </script>
    <script>
        @if($errors->any())
        alert('{{$errors->first()}}');
        @endif
    </script>

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

@endpush