@push('css')
    <link rel="stylesheet" href="/css/reply/style.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/css/sales/v2/list-items.css?v={{config("sns-line.version")}}">
    <style>
        #item_vuelist .group_list .group_list_head {
            background: white !important;
            padding: 10px 0 !important;
        }
        #item_vuelist .primary_list_head {
            background: white !important;
        }

        #item_vuelist .group_list .schedule_group .glyphicon {
            margin: 0!important;
        }

        .btn-group>.btn+.dropdown-toggle {
            padding: 0 10px !important;
        }

        .btn-group:hover .action-reply{
            opacity: 1;
            visibility: visible;
            z-index: 100;
            display: block !important;
        }

        #list-items-sales, #list-items-sales table td, #list-items-sales span {
            color: #51595C;
            font-weight: 600;
        }
        #list-auto-reply .box-ic-sort i {
            line-height: 2px;
            font-size: 24px;
            padding: 9px 3px !important;
        }
        #list-auto-reply .box-ic-sort i:hover {
            background-color: #96ADB2 !important;
            color: #FFFFFF !important;
            padding: 9px 3px !important;
            border-radius: 4px;
        }

        .focus-pointer:hover {
            background-color: #f6f6f6 !important;
        }

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

        .c-hover-icon-action {
            /*width: 38px;*/
            display: inline-block;
            /*font-size: 27px;*/
            padding: 2px 6px 0;
            border-radius: 4px;
        }

        .table>tbody>tr:first-child>td{
            border-top: 0px !important;
        }

        #table_list_items th {
            padding: 6px 8px !important;
            /*height: 37px;*/
        }

        .tab_folder {
            padding-top: 6px;
        }

        input[type=checkbox]:checked:before {
            color: rgb(81, 89, 92) !important;
        }

        input[type=checkbox]:before {
            font-family: "FontAwesome";
            content: "\f00c";
            font-size: 15px;
            color: transparent !important;
            background: #fff;
            display: block;
            width: 18px;
            height: 18px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-right: 7px;
        }
        input[type=checkbox] {
            -moz-appearance: none;
            -webkit-appearance: none;
            -o-appearance: none;
            outline: none !important;
            content: none;
        }

        .table>tbody>tr>td{
            border-top: 2px solid #F4F6F7;
        }

        .tag_left{
            width: 17%;
        }

        .tag_right{
            /*width: calc(100% - 230px);*/
            width: calc(100% - 17%);
        }

        .table>tbody>tr:last-child>td{
            border-bottom: 2px solid #F4F6F7;
        }

        #list-items .popuptext.show {
            visibility: visible;
        }

        #nano-inner-group .tag_group {
            padding: 5px 7px !important;
            height: 35px;
        }

        .btn-group .ic-menu {
            font-size: 20px;
        }

         .box-ic-sort i:hover {
            background-color: #96ADB2 !important;
            color: #FFFFFF !important;
            padding: 9px 3px !important;
            border-radius: 4px;
        }

        .box-ic-sort i {
            line-height: 2px;
            font-size: 24px;
            padding: 9px 3px !important;
        }
        #table_list_items{
            margin-top: 0;
            margin-bottom: 42px;
        }


        @media (min-width: 768px) {
            #modalFakeCard .modal-dialog {
                width: 700px;
            }
        }

    </style>
@endpush

<div id="list-items-sales" v-cloak>
    {{-- Thư mục đang mở (đọc từ cookie folder_sales ở controller) để reload giữ nguyên, không nhảy về mặc định --}}
    <input type="hidden" id="folder_cookie" value="{{ $folderCookie ?? 0 }}">
    <div id="list-items">
        <ul class="" id="tabs-type-items" style="border-bottom: 3px solid #E8E8E8;">
            <li :class="{active: typePayment == 0}" class="tab-item">
                <a @click="showTabTypePayment(0)" href="#buy-one">
                    <span style="font-weight: bold">単品商品</span>
                </a>

            </li>
            <li :class="{active: typePayment != 0}" class="tab-item">
                <a @click="showTabTypePayment(2)" href="#cyclical-buying">
                    <span style="font-weight: bold">継続商品</span>
                </a>
            </li>

            <li style="margin-left: auto; display: flex">
                <div class="display-environment">
                    <button @click="filterByMode(1)" :class="{'btn-environment': modeShow}" class="btn-cus-a" style="margin-right: 10px">本番環境</button>
                    <button @click="filterByMode(0)" :class="{'btn-environment': !modeShow}" class="btn-cus-a">テスト環境</button>
                </div>
                <div style="margin-left: 20px; display: inline-block">
                    <span style="padding-right: 20px">表示設定</span>
                    <select v-model="paymentMethod" @change="filterByPaymentMethod" class="form-control method-payment my_class" id="">
                        <option value="">全て</option>
                        <option value="univapay">UnivaPay</option>
                        <option value="stripe">Stripe</option>
                    </select>
                </div>
            </li>
        </ul>
        <div class="tag_separate" style="margin-top: 9px">

            <div class="tag_left">
                <div class="row">
                    <div class="col-md-12" style="padding:0">
                        <div class="tab_folder  " >
                            <span style="font-weight: bold">フォルダ</span>
                            <div>
                                <div class="popup" style="margin-right: 5px">
                                                <span class="c-hover-icon-action" style="text-align:center; font-weight: 400;font-size: 25px;font-weight: normal;" v-on:click="showAddGroupPopup">
                                                    <i class="far fa-plus-circle" style="background-color: unset;" ></i>
                                                </span>
                                    <div class="popuptext" id="myPopup">
                                        <span style="font-weight: 600">フォルダ</span>
                                        <div style="padding: 7px 0; display: flex; align-items: flex-end">
                                            <input type="text" id="cat_txt" v-model="name_group"
                                                   style="width: 79%;height: 32px;padding-left: 3px;border: 1px solid #bbb;border-radius: 4px">
                                            <span style="font-size: 12px;margin-left: 2px;font-weight: 600">@{{ 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;font-weight: 600"
                                                    v-on:click="addGroup()">決定</button>
                                            <button class="btn btn-secondary btn-sm" style="background-color: rgb(125, 145, 149);color: white;font-weight: 600"
                                                    v-on:click="closeAddPopup">キャンセル</button>
                                        </div>

                                    </div>
                                </div>
                                <i class="fas fa-sort-amount-down-alt c-hover-icon-action"  data-toggle='modal'
                                   data-target='#modalSortFolder' v-on:click="showModalSortFolder()" style="font-size: 25px;padding: 5px;"></i>
                            </div>

                        </div>

                    </div>

                </div>

                <div class="nano-inner" id="nano-inner-group" style="margin-top: 0">
                    <div class="list-group 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" style="background-color: #F6F6F6"></i>--}}
                                </div>
                            </div>

                        </div>
                    </div>
                    <div v-for="(category, index) in sortedCategories" class="tag_group list-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 class="category-left-list">
                                    <div class="name-category-left">@{{ category.name }}</div> <span>(@{{ category.count }})</span>
                                </div>
                                <div class="btn-group" style="padding: unset; width: 15px;" :style="(category.id == group_open)?'display:block':'display:none'">
                                    <i class="far fa-ellipsis-h ic-menu" style="background: unset"></i>
                                    <ul class="dropdown-menu action-reply"
                                        style="min-width: 113px;left: -89px;top: 15px;">
                                        <li class="focus-pointer" v-on:click="editGroup(category)">
                                            <div style="cursor: pointer;font-weight: 600; font-size: 13px;">
                                                フォルダ名変更
                                            </div>
                                        </li>
                                        <li class="focus-pointer" v-on:click="deleteGroup(category.id)">
                                            <div style="cursor: pointer; font-weight: 600; font-size: 13px;">
                                                フォルダ削除
                                            </div>
                                        </li>
                                    </ul>
                                </div>

                            </div>

                        </div>

                    </div>
                </div>
            </div>
            <div class="tag_right" style="margin-top: 6px">
                <div class="box-btn-center">
                    <div class="">
                        <a v-if="maxItemBillOne == 0 && typePayment == 0" :href="'/basic/sales/index?typePayment=' + typePayment + '&tab=add-item&flag_environment=' + modeShow + '&s_category_id=' + group_open + '&payment_method=' + paymentMethod"
                           class="btn btn-sns-line btn-sns-line-primary"  style="background-color:rgba(87,153,219,1); color: white !important; width: 105px; height: 35px; line-height: 35px; padding: 0px 18px" target="_self"> 新規作成</a>
                        <a v-else-if="maxItemBillCycle == 0 && typePayment != 0" :href="'/basic/sales/index?typePayment=' + typePayment + '&tab=add-item&flag_environment=' + modeShow + '&s_category_id=' + group_open + '&payment_method=' + paymentMethod"
                           class="btn btn-sns-line btn-sns-line-primary"  style="background-color:rgba(87,153,219,1); color: white !important; width: 105px; height: 35px; line-height: 35px; padding: 0px 18px" target="_self"> 新規作成</a>
                        <a v-else href="javascript:void(0)"
                           v-on:click="showLimitBot()"
{{--                           @click="alert('現在のプランは利用できない機能です。アップグレードが必要になります。')"--}}
                           class="btn btn-sns-line btn-sns-line-primary"  style="background-color:rgba(87,153,219,1); color: white !important; width: 105px; height: 35px; line-height: 35px; padding: 0px 18px" target="_self"> 新規作成</a>
                    </div>
                    <div v-show="modeShow == 0" style="padding-left: 14px ;" class="text-hint-modal-fake-card">
                        <span>※テスト決済をする場合は</span>
                        <a style="padding: 0px 3px; text-decoration: underline" data-toggle="modal" href="#modalFakeCard"><span style="color: #5799DB">こちら</span></a>
                        <span>のダミーカード番号をご利用ください</span>
                    </div>
                    <div class="btn-right-top">
                        <div style="margin-right: 13px">
                            <a v-if="group_open == -1"
                               style="background-color: rgba(125,145,149,1); color: white; cursor: no-drop;
                               width: 105px; height: 35px; line-height: 35px; padding: 0px 18px;
                               font-size: 13px; font-weight: bold;
                               "
                               class="btn btn-sns-line btn-sns-line-dark">並べ替え</a>
                            <a v-else href="" style="background-color: rgba(125,145,149,1); color: white;
                                font-size: 13px; font-weight: bold;
                                width: 105px; height: 35px; line-height: 35px; padding: 0px 18px;"
                               data-toggle="modal" data-target="#modalSortItem"
                               v-on:click="showModalSortItems()"
                               data-type="tag" data-id="" data-callback="tag_sorted"
                               class="btn btn-sns-line btn-sns-line-dark">並べ替え</a>
                        </div>
                        <div>
                            <a v-if="(group_open == 0 && selected == false) || (group_open != 0 && selected == false)"
                               class="btn btn-sns-line btn-sns-line-secondary"
                               style="background-color: rgb(176, 194, 198);color: white; font-size: 13px; font-weight: bold;
                                    cursor: no-drop;
                                     margin-top: 1px;margin-left: 9px; padding: 0px 9px;  height: 35px; line-height: 35px; "
                            > 一括フォルダ変更
                            </a>
                            <a v-else  class="btn btn-sns-line btn-sns-line-primary"
                               style="background-color: #5799DB;color: white; padding: 0px 9px; margin-top: 1px;margin-left: 9px;
                                font-size: 13px; font-weight: bold;
                               height: 35px; line-height: 35px; "
                               data-toggle='modal'
                               data-target='#modalMoveFolder'
                            > 一括フォルダ変更
                            </a>
                        </div>
                    </div>
                </div>
                <div class="table-responsive table-responsive-list-template">
                    <table v-if="typePayment == 0" id="table_list_items" class="table vuelist-nanowrapper" >
                        <thead>
                        <tr>
                            <th style="width: 40px; min-width: 40px; border-radius: 5px 0px 0px 5px;" class="text-left">
                                <label for="itemcheck_all" style="padding-left: 10px">
                                    <input type="checkbox" name="dammy"
                                           v-model="selectAll">
                                </label>
                            </th>
                            <th style="width: 29%;" class="text-left">
                                <span style="font-weight: 600; color: #51595C">作成日 / 管理名</span>
                            </th>
                            <th style="width: 17%; width: 200px; max-width: 200px; text-align: center !important;">商品ページ
                            </th>
                            <th style="width: 10%;text-align: center !important;">決済システム</th>
                            <th style="width: 10%; text-align: right">価格</th>
                            <th style="width: 110px;" class="text-right">販売数</th>
                            <th style="width: 50px;" class="text-center"></th>
                            <th style="width: 90px" class="text-center">在庫数</th>
                            <th style="width: 70px; border-radius: 0px 5px 5px 0px"></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(item, index) in items" :key="index">
                            <td class="text-center">
                                <input type="checkbox" v-model="selected" :value="item.id" style="margin-right: 0px"
                                       name="dammy">
                            </td>
                            <td class="text-left">
                                <div style="display: flex">
                                    <div v-if="item.image_product" class="wrapper-thumbail">
                                        <img :src="getFirstImage(item.image_product)" alt="" class="img-thumbnail">
                                    </div>
                                    <div v-else class="wrapper-thumbail text-center"
                                         style="border: 1px solid #E8E8E8; border-radius: 5px">
                                        <i class="fal fa-image"></i>
                                    </div>
                                    <div style="display: inline-block; padding-left: 10px; padding-top: 5px">
                                        <p style="font-size: 12px; font-weight: normal">@{{ moment(item.created_at).format('YYYY.MM.DD') }}</p>
                                        <p style="margin-top: 5px">
                                            <a :href="'/basic/sales/get-single-item-detail/' + item.hash_id + '?typePayment=0&flag_environment=' + modeShow + '&s_category_id=' + group_open + '&payment_method=' + paymentMethod"
                                               style="text-decoration: underline; color: #5799DB; font-size: 16px;
                                               white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
                                                width: 120px; display: inline-block; font-weight: bold">
                                                @{{ item.name }}
                                            </a>
                                        </p>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="link-order">
                                    <div style="border-right: 1.5px solid #B0C2C6; width: 120px; text-align: left; flex-grow: 6; overflow: hidden;">
                                        <input style="font-weight: normal" type="text"
                                               :value="'https://liff.line.me/' + liffAppId + '?product_id=' + item.id +'&type=product-detail&ts=' + timestamp">
                                    </div>
                                    <div class="icon-hover"
                                         style="flex-grow: 2; width: 35px; border-right: 1.5px solid #B0C2C6"
                                         @click="copyToClipboard('https://liff.line.me/' + liffAppId + '?product_id='+ item.id + '&type=product-detail&ts=' + timestamp, $event)">
                                        <i class="far fa-copy" style="color: #7D9195;"></i>
                                    </div>
                                    <div class="icon-hover" style="flex-grow: 2; width: 35px">
                                        <a class="" target="_blank" style="color: #7D9195"
                                           :href="'/v2/order-item/detail/' + item.item_code + '/preview'">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <span style="font-weight: normal" v-if="item.payment_method == 'stripe'">Stripe</span>
                                <span style="font-weight: normal" v-else-if="item.payment_method == 'univapay'">UnivaPay</span>
                                <span style="font-weight: normal" v-else>-</span>
                            </td>
                            <td class="text-right">
                                <span style="font-weight: normal">@{{ formatNumber(item.amount) }}円</span>
                            </td>
                            <td class="text-right">
{{--                                <span style="font-weight: normal" v-show="modeShow == 1">@{{item.number_register}}</span>--}}
{{--                                <span style="font-weight: normal" v-show="modeShow == 0">@{{item.number_register_test}}</span>--}}
                                <span style="font-weight: normal">@{{item.totalBuy ? item.totalBuy : 0}}</span>
                            </td>
                            <td class="text-right">
                                /
                            </td>
                            <td  :class="{'text-right align-right-number': item.flag_use_stock == 1, 'text-center': item.flag_use_stock == 0 }">
                                <span style="font-weight: normal" v-if="item.flag_use_stock == 1">@{{ formatNumber(item.quantity_stock)}}</span>
                                <span style="font-weight: normal" v-else>無制限</span>
                            </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-reply"
                                        style="min-width: 74px;     left: -49px;    top: 19px; text-align: center;">
                                        <li class="focus-pointer" @click="copyItem(item.id)">
                                            <div style="cursor: pointer;font-weight: 600">
                                                コピー
                                            </div>
                                        </li>
                                        <li class="focus-pointer" style="padding-top: 2px" data-toggle="modal"
                                            @click="itemDeleteId = item.id" data-target="#modalConfirmDeleteItem">
                                            <div style="cursor: pointer;color: #F44336;font-weight: 600">
                                                削除
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <table v-if="typePayment != 0" id="table_list_items" class="table vuelist-nanowrapper">
                        <thead>
                        <tr>
                            <th style="width: 40px; min-width: 40px; border-radius: 5px 0px 0px 5px;" class="text-left">
                                <label for="itemcheck_all" style="padding-left: 10px">
                                    <input type="checkbox" name="dammy"
                                           v-model="selectAll">
                                </label>
                            </th>
                            <th style="width: 29%;" class="text-left">
                                <span style="font-weight: 600; color: #51595C">作成日 / 管理名</span>
                            </th>
                            <th style="width: 11%; width: 150px; max-width: 200px; text-align: center !important;">
                                決済・変更・解約ページ
                            </th>
                            <th style="width: 10%;text-align: center !important;">決済システム</th>
                            <th style="width: 10%; text-align: right">価格</th>
                            <th style="width: 150px;" class="text-right">トライアル中</th>
                            <th style="width: 120px" class="text-right">販売数</th>
                            <th style="width: 120px" class="text-center">在庫数</th>
                            <th style="width: 70px; border-radius: 0px 5px 5px 0px"></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(item, index) in items" :key="index">
                            <td class="text-center">
                                <input type="checkbox" :value="item.id" v-model="selected" style="margin-right: 0px"
                                       name="dammy">
                            </td>
                            <td class="text-left">
                                <div style="display: flex">
                                    <div v-if="item.image_product" class="wrapper-thumbail">
                                        <img :src="getFirstImage(item.image_product)" alt="" class="img-thumbnail">
                                    </div>
                                    <div v-else class="wrapper-thumbail text-center"
                                         style="border: 1px solid #E8E8E8; border-radius: 5px">
                                        <i class="fal fa-image"></i>
                                    </div>
                                    <div style="display: inline-block; padding-left: 10px; padding-top: 5px">
                                        <p style="font-size: 12px; font-weight: normal">@{{ moment(item.created_at).format('YYYY.MM.DD') }}</p>
                                        <p style="margin-top: 5px">
                                            <a :href="'/basic/sales/get-single-item-detail/' + item.hash_id + '?typePayment=1&flag_environment=' + modeShow + '&s_category_id=' + group_open + '&payment_method=' + paymentMethod"
                                               style="text-decoration: underline; color: #5799DB; font-size: 16px;
                                                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 120px; display: inline-block; font-weight: bold">
                                                @{{ item.name }}
                                            </a>
                                        </p>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <button class="w-btn btn-send-code btn-shadown-dropdown" @click="modelDetailItem = item"
                                        data-toggle="modal" data-target="#modalDetailItem">ページURL
                                </button>
                            </td>
                            <td>
                                <span style="font-weight: normal" v-if="item.payment_method == 'stripe'">Stripe</span>
                                <span style="font-weight: normal" v-else-if="item.payment_method == 'univapay'">UnivaPay</span>
                                <span style="font-weight: normal" v-else>-</span>
                            </td>
                            <td class="text-right">
                                <span style="font-weight: normal">@{{ formatNumber(item.amount) }}円</span>
                            </td>
                            <td class="text-right">
                                <span style="font-weight: normal" v-show="modeShow == 1">@{{item.number_trial}}</span>
                                <span style="font-weight: normal" v-show="modeShow == 0">@{{item.number_trial_test}}</span>
                            </td>
                            <td class="text-right">
{{--                                <span style="font-weight: normal" v-show="modeShow == 1">@{{item.number_register}}</span>--}}
{{--                                <span style="font-weight: normal" v-show="modeShow == 0">@{{item.number_register_test}}</span>--}}

                                <span style="font-weight: normal">@{{item.totalBuy ? item.totalBuy : 0}}</span>
                            </td>
                            <td :style="[item.flag_use_stock == 1 ? {paddingRight: 34 +'px'} : {paddingRight: 8 + 'px'} ]" :class="{'text-right': item.flag_use_stock == 1, 'text-center': item.flag_use_stock == 0 }">
                                <span style="font-weight: normal" v-if="item.flag_use_stock == 1">@{{ formatNumber(item.quantity_stock) }}</span>
                                <span style="font-weight: normal" v-else>無制限</span>
                            </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-reply"
                                        style="min-width: 74px;    left: -49px;    top: 19px; text-align: center;">
                                        <li class="focus-pointer" @click="copyItem(item.id)">
                                            <div style="cursor: pointer;font-weight: 600">
                                                コピー
                                            </div>
                                        </li>
                                        <li class="focus-pointer" data-toggle="modal" data-target="#modalConfirmDeleteItem"
                                            @click="itemDeleteId = item.id" style="padding-top: 2px">
                                            <div style="cursor: pointer;color: #F44336;font-weight: 600">
                                                削除
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <span id="modalCaller" data-type="egg" type="button" data-toggle="modal"
          data-target="#messageModal" style="display: none;"></span>
    <div class="modal fade" id="modalSortItem"
         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"
                            aria-hidden="true" style="opacity: 1;font-size: 27px"
                            v-on:click="closeModalSortItems()"
                    >
                        <i class="fas fa-times c-hover-icon-action" style="color: rgba(125,145,149,1); padding: 5px 10px; border-radius: 4px;"></i></button>
                    <h2 class="text-center" style="font-weight: bold">並べ替え</h2>

                </div>
                <div class="modal-body scroll-modal">
                    <div style="padding: 0px 20px;">
                        <draggable
                                v-model="items"
                                @start="isDragging = true"
                                @end="isDragging = false"
                                @change="sortItems"
                                tag="div"
                                v-bind="dragOptions"
                        >
                            <transition-group type="transition" name="flip-list">
                                <div class="wrapper-item-modal-sort " v-for="(item, index) in items" :key="'sort' + index">
                                    <div class="item-modal-sort" style="font-weight: bold">@{{ item.name }}</div>
                                    <i class="fas fa-bars"></i>
                                </div>
                            </transition-group>
                        </draggable>
                    </div>
                </div>
                <div class="text-center">
                    <button type="button" class="btn btn-sns-line btn-sns-line-success btn-save-sort-items" v-on:click="sortedItemInfor">保存</button>
                </div>
            </div>
        </div>
    </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 c-hover-icon-action" style="color: rgba(125,145,149,1); padding: 5px 10px; border-radius: 4px;"></i></button>
                    <h2 class="text-center"> 【 フォルダ並べ替え 】</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="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 c-hover-icon-action" style="color: rgba(125,145,149,1); padding: 5px 10px; border-radius: 4px"></i></button>
                    <h2 class="text-center"> 【 一括フォルダ変更 】</h2>

                </div>
                <div class="modal-body">
                    <div class="row " >
                        <div class="col-sm-2 col-sm-offset-1 title-left" style="font-weight: 600">
                            移行先選択
                        </div>
                        <div class="col-sm-8">
                            <div class="b-select">
                                <select class="form-control" v-model="folder_move_id">
                                    <option style="font-weight: bold" value="0">未分類</option>
                                    <option style="font-weight: bold" v-for="(category, index) in sortedCategories" :value="category.id">@{{ category.name }}</option>
                                </select>
                                <i class="fal fa-angle-down"></i>
                            </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="modalDetailItem"
         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"
                            aria-hidden="true" style="opacity: 1;font-size: 27px"
                    >
                        <i class="fas fa-times c-hover-icon-action" style="color: rgba(125,145,149,1); padding: 5px 10px; border-radius: 4px;"></i></button>
                    <h3 class="text-center" style="font-weight: bold">商品名 詳細</h3>

                </div>
                <div class="modal-body scroll-modal">
                    <div class="wrapper-modal-detail-item">
                        <div class="bor-title-c">
                            <span style="padding-left: 30px">各種案内ページ</span>
                        </div>
                        <div style="margin-top: 20px">
                            <span>商品ページ</span>
                            <div class="link-order" style="width: 100%; margin-top: 7px">
                                <div style="border-right: 2px solid #B0C2C6; text-align: left; flex-grow: 8; overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
                                    <input type="text" :value="'https://liff.line.me/' + liffAppId + '?product_id=' + modelDetailItem.id +'&type=product-detail&ts=' + timestamp">
                                </div>
                                <div class="text-center icon-hover" style="width: 40px; border-right: 2px solid #B0C2C6" @click="copyToClipboard('https://liff.line.me/' + liffAppId + '?product_id='+ modelDetailItem.id +'&type=product-detail&ts=' + timestamp, $event)">
                                    <i class="far fa-copy" style="color: #7D9195;"></i>
                                </div>
                                <div style="width: 40px" class="text-center icon-hover">
                                    <a target="_blank" style="color: #7D9195" :href="'/v2/order-item/detail/' + modelDetailItem.item_code + '/preview'">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div style="margin-top: 20px">
                            <span>カード情報変更ページ</span>
                            <div class="link-order" style="width: 100%; margin-top: 7px">
                                <div style="border-right: 2px solid #B0C2C6; text-align: left; flex-grow: 8; overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
                                    <input type="text" :value="'https://liff.line.me/' + liffAppId + '?product_id=' + modelDetailItem.id +'&type=product-change&ts=' + timestamp">
                                </div>
                                <div class="text-center icon-hover" style="width: 40px; border-right: 2px solid #B0C2C6" @click="copyToClipboard('https://liff.line.me/' + liffAppId + '?product_id='+ modelDetailItem.id +'&type=product-change&ts=' + timestamp, $event)">
                                    <i class="far fa-copy" style="color: #7D9195;"></i>
                                </div>
                                <div style="width: 40px" class="text-center icon-hover">
                                    <a target="_blank" style="color: #7D9195" :href="'/v2/order-item/change/' + modelDetailItem.item_code + '/preview'">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div style="margin-top: 20px">
                            <span>解約用ページ</span>
                            <div class="link-order" style="width: 100%; margin-top: 7px">
                                <div style="border-right: 2px solid #B0C2C6; text-align: left; flex-grow: 8; overflow: hidden;  white-space: nowrap; text-overflow: ellipsis">
                                    <input type="text" :value="'https://liff.line.me/' + liffAppId + '?product_id=' + modelDetailItem.id +'&type=product-cancel&ts=' + timestamp">
                                </div>
                                <div class="text-center icon-hover" style="width: 40px; border-right: 2px solid #B0C2C6" @click="copyToClipboard('https://liff.line.me/' + liffAppId + '?product_id='+ modelDetailItem.id +'&type=product-cancel&ts=' + timestamp, $event)">
                                    <i class="far fa-copy" style="color: #7D9195;"></i>
                                </div>
                                <div style="width: 40px" class="text-center icon-hover">
                                    <a target="_blank" style="color: #7D9195" :href="'/v2/order-item/cancel/' + modelDetailItem.item_code + '/preview'">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wrapper-modal-detail-item">
                        <div class="bor-title-c" style="margin-bottom: 0px">
                            <span style="padding-left: 30px">商品詳細</span>
                        </div>
                        <div class="item-info-detail">
                            <small>本番/テスト</small>
                            <p>@{{ modelDetailItem.flag_environment == 0 ? 'テスト' : '本番'  }}</p>
                        </div>
                        <div class="item-info-detail">
                            <small>通常販売価格（税込）</small>
                            <p>@{{ formatNumber(modelDetailItem.amount) }}円</p>
                        </div>
                        <div class="item-info-detail">
                            <small>トライアル期間/価格</small>
                            <p>申込日から次回決済日まで / @{{modelDetailItem.flag_first == 1 ? formatNumber(modelDetailItem.amount_first) + '円' : '設定なし'}}</p>
                        </div>
                        <div class="item-info-detail">
                            <small>支払いサイクル</small>
                            <p v-if="modelDetailItem.type_payment == 1">毎週</p>
                            <p v-else-if="modelDetailItem.type_payment == 2">毎月</p>
                            <p v-else-if="modelDetailItem.type_payment == 3">3ヶ月毎</p>
                            <p v-else-if="modelDetailItem.type_payment == 4">6ヶ月毎</p>
                            <p v-else-if="modelDetailItem.type_payment == 5">毎年</p>
                        </div>
                        <div class="item-info-detail">
                            <small>請求終了回数</small>
                            <p v-if="modelDetailItem.number_charge == 0">期限なし</p>
                            <p v-else-if="modelDetailItem.number_charge == 2">2回</p>
                            <p v-else-if="modelDetailItem.number_charge == 3">3回</p>
                            <p v-else-if="modelDetailItem.number_charge == 4">4回</p>
                            <p v-else-if="modelDetailItem.number_charge == 5">5回</p>
                            <p v-else-if="modelDetailItem.number_charge == 6">6回</p>
                            <p v-else-if="modelDetailItem.number_charge == 12">12回</p>
                            <p v-else-if="modelDetailItem.number_charge == 18">18回</p>
                            <p v-else-if="modelDetailItem.number_charge == 24">24回</p>
                            <p v-else-if="modelDetailItem.number_charge == 36">36回</p>
                        </div>
                        <div class="item-info-detail">
                            <small>販売上限数</small>
                            <p>
                                @{{ (modelDetailItem.flag_use_stock == 1) ? modelDetailItem.quantity_stock : '設定なし' }}
                            </p>
                        </div>
                        <div class="item-info-detail">
                            <small>1人が購入できる上限数</small>
                            <p>@{{ (modelDetailItem.flag_use_max_per_person == 1) ? modelDetailItem.max_per_person : '設定なし' }}</p>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="modal fade" id="modalUnlink"
         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"
                            aria-hidden="true" style="opacity: 1;font-size: 27px"
                    >
                        <i class="fas fa-times c-hover-icon-action" style="color: rgba(125,145,149,1); padding: 5px 10px; border-radius: 4px;"></i></button>
                    <h3 class="text-center" style="font-weight: bold; font-size: 18px; color: #F44336">決済システム連携設定が完了していません</h3>

                </div>
                <div class="modal-body scroll-modal" style="padding-top: 0px">
                    <div class="text-center">
                        <h3 class="text-center"><span style="font-size: 16px; font-weight: normal">商品作成機能の利用には、事前にUnivaPayもしくはStripeの</span></h3>
                        <p style="font-size: 16px; font-weight: normal">アカウント作成とエルメとの連携設定が完了している必要があります。</p>
                        <p style=" font-size: 16px; font-weight: normal"><a style="text-decoration: underline; font-weight: normal" href="{{ route('linkPaymentV2') }}">決済システム連携設定</a>より設定を完了させてください。</p>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="modal fade" id="modalConfirmDeleteItem"
         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"
                            aria-hidden="true" style="opacity: 1;font-size: 27px"
                    >
                        <i class="fas fa-times c-hover-icon-action" style="color: rgba(125,145,149,1); padding: 5px 10px; border-radius: 4px;"></i></button>
                    <h3 class="text-center" style="font-weight: bold">商品削除確認</h3>

                </div>
                <div class="modal-body scroll-modal">
                    <div class="content-confirm-delete">
                        <h3 class="text-center"><span>注意</span></h3>
                        <div v-if="typePayment == 0">
                            <p style="margin-bottom: 10px">・商品を削除した場合、商品復元の復元はできません。</p>
                            <p style="margin-bottom: 10px">・商品を削除した場合、当該商品の販売履歴も全て削除され復元できなくなります。</p>
                        </div>
                        <div v-else>
                            <p style="margin-bottom: 10px">・商品を削除した場合、商品の復元はできません。</p>
                            <p style="margin-bottom: 10px">・商品を削除した場合、当該商品の販売履歴も全て削除され復元できなくなります。</p>
                            <p style="margin-bottom: 10px">・商品を削除した場合、現在行われている継続決済は終了し今後も当該商品の請求は行われなくなります。</p>
                        </div>
                    </div>
                </div>
                <div class="text-center">
                    <button @click="deleteItem(itemDeleteId)" class="btn btn-sns-line btn-sns-line-danger btn-confirm-delete">削除する</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modalFakeCard"
         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"
                            aria-hidden="true" style="opacity: 1;font-size: 27px"
                    >
                        <i class="fas fa-times c-hover-icon-action" style="color: rgba(125,145,149,1); padding: 5px 10px; border-radius: 4px;"></i></button>
                    <h3 class="text-center" style="font-weight: bold">ダミーカード番号</h3>

                </div>
                <div class="modal-body scroll-modal">
                    <div class="wrap">
                        <h4 style="font-weight: bold">UnivaPayの場合</h4>
                        <table>
                            <tr>
                                <td>カード番号</td>
                                <td>4000-0200-0000-0000</td>
                            </tr>
                            <tr>
                                <td>カード名義人</td>
                                <td>Test User</td>
                            </tr>
                            <tr>
                                <td>有効期限</td>
                                <td>06/99</td>
                            </tr>
                            <tr>
                                <td>セキュリティコード（CVV）</td>
                                <td>123</td>
                            </tr>
                            <tr>
                                <td>メールアドレス</td>
                                <td>dummy-email@univapay.com</td>
                            </tr>
                        </table>

                        <h4 style="margin-top: 43px; font-weight: bold">Stripeの場合</h4>
                        <table>
                            <tr>
                                <td>カード番号</td>
                                <td>4242-4242-4242-4242</td>
                            </tr>
                            <tr>
                                <td>有効期限</td>
                                <td>来月以降の未来の年月を入力</td>
                            </tr>
                            <tr>
                                <td>セキュリティコード（CVV）</td>
                                <td>任意の3桁の数字</td>
                            </tr>
                        </table>
                        <div class="text-center">
                            <button @click="closeModalFakeCard" class="w-btn btn-cus-a btn-sns-line-secondary btn-close-modal">閉じる</button>
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
@push('js')
    <script src="/js/my_page/Sortable.min.js"></script>
    <script src="/js/my_page/vuedraggable.min.js"></script>
    <script>
        let liffAppId = '{{ $liffAppId }}';
        let maxItemBillOne = {{ $maxItemBillOne }};
        let maxItemBillCycle = {{ $maxItemBillCycle }};
        let contractType = '{{ $contractType }}';
        let timestamp = '{{ $timestamp }}';
    </script>
    <script src="/js/sales/v2/list-items-v2.js?v={{config("sns-line.version")}}"></script>
    <script>
        @if(!$univapayLinked && $flagStripe != 3)
            $('#modalUnlink').modal('show')
        @endif

    </script>
@endpush