@extends('layout.basic.main')
@push('css')
    <style>
        .modal-title-header {
            margin-top: 15px;
            padding: 5px 15px;
            /*border-bottom: 1px solid #e5e5e5;*/
            background-color: #2ab27b;
            color: #ffffff;
            font-weight: bold;
        }

        .sub h4 {
            margin: 0;
        }

        .hasbtn a:hover {
            cursor: pointer;
        }

        .listtop_l ul li.time_now {
            margin-top: 5px;
        }

        @media screen and (max-width: 1023px) {
            .listtop_r {
                width: 40%;
            }
        }

        @media screen and (min-width: 1024px) {
            .listtop_r {
                width: 36%;
            }
        }

        @media screen and (min-width: 1280px) {
            .listtop_r {
                width: 20%;
            }
        }

        label:after {
            content: '';
        }

        .input-sm {
            line-height: 1.5 !important;
        }


        #stripe_connect {
            font-size: 15px;
        }

        .copy-btn {
            padding: 2px !important;
        }

        .alert-test {
            margin-bottom: 10px;
            background-color: #fcb646;
            color: black;
        }

        .copy-btn {
            width: 80px !important;
        }
        #list_item .btn-xs {
            width: 40px !important;
        }

        #list_item .table th {
            vertical-align: middle !important;
        }

        .btn-group .btn{
            float: unset;
        }

        #select-product-type {
            background: url(/images/down.png) right 10px center no-repeat;
            background-color: rgb(255, 255, 255);
            appearance: none;
            -webkit-appearance: none; /* Support for Google Chrome và Safari. */
            -moz-appearance: none; /* Support for firefox. */
            -ms-appearance: none; /* Support for Internet Explorer. */
            -o-appearance: none; /* Support for Opera. */
        }

        .table-item-list tr th {
            background-color: rgba(8,191,90,1) !important;
        }

        .table-item-list tr th:first-child {
            border-radius: 5px 0 0 5px;
        }

        .table-item-list tr th:last-child {
            border-radius: 0 5px 5px 0;
        }

        .table-item-list tr th, td {
            padding-top: 10px;
            padding-bottom: 10px;
            text-align: center;
        }

        .table-item-list td {
            /*background: unset;*/
            border-bottom: 1px solid #ddd;
        }

        /* The switch - the box around the slider */
        .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }

        /* Hide default HTML checkbox */
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        /* The slider */
        .slider {
            position: absolute;
            cursor: pointer;
            top: 3px;
            left: 0;
            right: 0;
            bottom: 0;
            -webkit-transition: .4s;
            transition: .4s;
            background-color: rgba(255,255,255,1);
            border: 2px solid rgba(112,112,112,1);
            width: 90px;
            height: 30px;
            border-radius: 5px;
        }

        .slider:before {
            position: absolute;
            content: "販売中";
            height: 24px;
            top: 3px;
            left: 4px;
            bottom: 5px;
            font-size: 11px;
            background-color: rgba(87,153,219,1);;
            -webkit-transition: .4s;
            transition: .4s;
            border-radius: 5px;
            padding: 2px;
            margin: -2px;
            color: white;
        }

        input:checked + .slider:before {
            -webkit-transform: translateX(45px);
            -ms-transform: translateX(45px);
            transform: translateX(45px);
            content: "停止中";
            background-color: rgba(244,67,54,1);
        }


        .label-item-code {
            display: inline-block;
            padding: 6px;
            margin-bottom: 0;
            font-size: 14px;
            font-weight: 400;
            line-height: 1.42857143;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            -ms-touch-action: manipulation;
            touch-action: manipulation;
            border-radius: 4px;
            background-color: rgba(8,191,90,1);
            border-color: rgba(8,191,90,1);
            color: white;
        }

        #table_first {
            width: 11%;
        }
        @media screen and (max-width: 1600px) {
            .label-item-code {
                font-size: 13px;
            }

            #table_first {
                width: 13%;
            }
        }
        @media screen and (max-width: 1400px) {
            .label-item-code {
                font-size: 14px;
            }

            #table_first {
                width: 15%;
            }
        }
        @media screen and (max-width: 1200px) {
            .label-item-code {
                font-size: 12px;
            }

            #table_first {
                width: 16%;
            }
        }

        .hover-code:hover {
            color: #0d488c;
        }

        .tab-switch-table {
            background: white;
            color: rgb(8, 191, 90);
            border-radius: 4px;
            padding: 6px 12px;
            cursor: pointer;
            border: 2px solid rgb(8, 191, 90);
        }

        .un-choose-type-hover:hover {
            border: 2px solid rgb(4, 139, 42);
            color: rgb(4, 139, 42);
        }

        .choose-type-item{
            background: rgb(8, 191, 90);
            color: white;
        }

        .note-cancel-feature {
            background-color: #FFE6E5;
            padding: 10px 15px;
            margin: 15px 0px;
            border-radius: 5px;
            font-weight: bold;
        }

    </style>
@endpush
@section('content')
    <article class="">
        <input type="hidden" id="currentBotId" @if($currentBotId)value="{{$currentBotId}}"@endif>
        @if($success == false)<div style="color: red"> connect stripe fail!!</div>@endif
        @if(!empty($msgError))
            <p style="margin-top: 20px;color: #e52525;">{{$msgError}}</p>
        @endif
        <input id="flag_stripe" hidden @if($flagStripe) value="{{ $flagStripe }}" @endif>
        <section id="stripe_connect">
            <div id="step1_stripe" @if($flagStripe != 0)style="display: none" @endif>
{{--                <h2 style="font-size: 20px; color: #222222; font-weight: bold; padding: 10px 10px 10px 0">Stripe決済 1.テスト決済用アカウント作成</h2>--}}
{{--                <p style="margin-bottom: 15px; font-size: 15px; color: #222222"></p>--}}
{{--                <p>１．テスト決済用の設定</p>--}}
{{--                <div style="margin-top: 5px;font-weight: 600">テスト決済用の、Stripeアカウントを作成する</div>--}}
{{--                <br>--}}
{{--            <a href="/sales/stripe/test/connect">--}}
{{--                <button type="button" class="btn btn-success" style="width:320px;height:70px">--}}
{{--                    こちらから Stripe アカウント設定画面を<br>開いて、追加設定してください--}}
{{--                </button>--}}
{{--            </a>--}}
{{--                <hr>--}}
{{--            <div class="box-footer">--}}
{{--                    <button type="submit" class="btn btn-info">作成したのでチェックする</button>--}}
{{--            </div>--}}
{{--                <hr>--}}
                <h2 style="font-size: 20px; color: #222222; font-weight: bold; padding: 10px 10px 10px 0">商品一覧</h2>
                <div class="note-cancel-feature">
                    こちらの商品作成機能は2023年末をもって廃止いたします。（<a  style="text-decoration: underline; font-weight: bold" href="https://www.no-trouble.caa.go.jp/pdf/20220209ac02.pdf">2022年6月に施行された法改正</a>に、商品ページの記載内容が準拠していないため）<br>
                    現在、発生している継続決済は2023年末をもって停止となります。また、商品の新規作成もできかねます。 <br>
                    お手数ではございますが<a style="text-decoration: underline; font-weight: bold" href="/basic/sales/index">【新】商品販売機能の</a>ご利用をお願いいたします。
                </div>
            </div>
            <div id="step2_stripe" @if($flagStripe != 1) style="display: none" @endif>
{{--                <h2 style="font-size: 20px; color: #222222; font-weight: bold; padding: 10px 10px 10px 0">Stripe決済 2.本番決済用アカウント設定</h2>--}}
{{--                <p style="margin-bottom: 15px; font-size: 15px; color: #222222"></p>--}}
{{--                <p>２．本番決済用の設定</p>--}}
{{--                <div style="margin-top: 5px;font-weight: 600">本番決済用に、Stripeアカウントに追加設定する</div>--}}
{{--                <div style="margin-top: 5px">※すでにstripeアカウントお持ちの場合は、お持ちのアカウントでログインすると、新規アカウント作成しなくても、連携できます。</div>--}}
{{--                <br>--}}
{{--                <a href="/sales/stripe/production/connect">--}}
{{--                    <button type="button" class="btn btn-success" style="width:320px;height:70px">--}}
{{--                        こちらから Stripe アカウント設定画面を<br>開いて、追加設定してください--}}
{{--                    </button>--}}
{{--                </a>--}}
{{--                <hr>--}}
{{--                <div class="box-footer">--}}
{{--                    <button type="submit" class="btn btn-info">次へ</button>--}}
{{--                </div>--}}
{{--                <hr>--}}
                <h2 style="font-size: 20px; color: #222222; font-weight: bold; padding: 10px 10px 10px 0">商品一覧</h2>
                <div class="note-cancel-feature">
                    こちらの商品作成機能は2023年末をもって廃止いたします。（<a  style="text-decoration: underline; font-weight: bold" href="https://www.no-trouble.caa.go.jp/pdf/20220209ac02.pdf">2022年6月に施行された法改正</a>に、商品ページの記載内容が準拠していないため）<br>
                    現在、発生している継続決済は2023年末をもって停止となります。また、商品の新規作成もできかねます。 <br>
                    お手数ではございますが<a style="text-decoration: underline; font-weight: bold" href="/basic/sales/index">【新】商品販売機能の</a>ご利用をお願いいたします。
                </div>
            </div>
            <div id="step3_stripe" @if($flagStripe != 2) style="display: none" @endif>
                {{csrf_field()}}
                <h2 style="font-size: 20px; color: #222222; font-weight: bold; padding: 10px 10px 10px 0">Stripe決済 3.本番決済用アカウント設定完了</h2>
                <p style="margin-bottom: 15px; font-size: 15px; color: #222222"></p>
                <p>３．すべて設定完了</p>
                <div style="margin-top: 5px">L MessageとStripeの決済連携は完了しました。</div>
                <div style="margin-top: 5px">次は商品販売の作成を進めてください。</div>
                <div style="margin-top: 5px">※一部の決済に関しては別途Stripeを通して審査が必要になります。</div>
                <div style="margin-top: 5px">詳細はこちらのページをご確認ください。</div>
                <div style="margin-top: 5px"><a href="https://support.stripe.com/questions/enabling-jcb-payments-for-japan-based-stripe-accounts" target="_blank">https://support.stripe.com/questions/enabling-jcb-payments-for-japan-based-stripe-accounts</a></div>
                <hr>
                <div class="box-footer">
                    <button type="button" class="btn btn-info" onclick="step3Stripe()">商品を作成する</button>
                </div>
                <hr>
            </div>
        </section>

        <section class="list-item" id="list_item" @if($flagStripe != 3) style="display: none" @endif>

            <h2 style="font-size: 20px; color: #222222; font-weight: bold; padding: 10px 10px 10px 0">商品一覧</h2>
            <div class="note-cancel-feature">
                こちらの商品作成機能は2023年末をもって廃止いたします。（<a  style="text-decoration: underline; font-weight: bold" href="https://www.no-trouble.caa.go.jp/pdf/20220209ac02.pdf">2022年6月に施行された法改正</a>に、商品ページの記載内容が準拠していないため）<br>
                現在、発生している継続決済は2023年末をもって停止となります。また、商品の新規作成もできかねます。 <br>
                お手数ではございますが<a style="text-decoration: underline; font-weight: bold" href="/basic/sales/index">【新】商品販売機能の</a>ご利用をお願いいたします。
            </div>
            <p style=" font-size: 15px; color: #222222">ご自身のStripeアカウントと連動することで、エルメ上でクレジットカード決済による商品販売が可能となります。</p>
            <p style="margin-bottom: 20px; font-size: 15px; color: #222222">単発・継続決済両方の決済方法を選択することができます。</p>
                <div id="alert_mode" class="alert alert-warning alert-test" role="alert" style="display: none">テスト決済データを表示しています。</div>
            <div>
                <a v-if="dataType == 0"
                      @if(($flagNewFreePlan == 1 && $itemCycle <1 && $contract_type == 'free')
                      ||  ($flagNewFreePlan == 1 && $itemCycle <10 && $contract_type == 'standard')
                      || $flagNewFreePlan == 0)  href="{{ route('addItem') }}" @else  onclick="showAlertNewFreePlan({{$contract_type}})" @endif
                >
                    <button type="button" class="btn btn-primary" style="font-weight: bold; padding: 6px 20px; border-radius: 25px; margin-right: 10px">
                        <i class="fa fa-plus-circle" aria-hidden="true"></i> 新規作成
                    </button>
                </a>
                <a v-if="dataType == 1"
                   @if(($flagNewFreePlan == 1 && $itemOne <1 && $contract_type == 'free')
                   ||  ($flagNewFreePlan == 1 && $itemOne <10 && $contract_type == 'standard')
                   || $flagNewFreePlan == 0)  href="{{ route('addItem') }}" @else  onclick="showAlertNewFreePlan({{$contract_type}})" @endif
{{--                   @if((!empty($flagPlanBot) && $flagPlanBot == 0) || empty($flagPlanBot))  href="{{ route('addItem') }}" @endif--}}
{{--                   @if(!empty($flagPlanBot) && $flagPlanBot == 1)  onclick="showAlertNewFreePlan()" @endif--}}
                >
                    <button type="button" class="btn btn-primary" style="font-weight: bold; padding: 6px 20px; border-radius: 25px; margin-right: 10px">
                        <i class="fa fa-plus-circle" aria-hidden="true"></i> 新規作成
                    </button>
                </a>
                <button class="btn btn-secondary" data-toggle="modal" data-target="#sorter_modal_v1"
                        data-type="reaction" data-callback="item_sorted" id="btn-sort-items" style="font-weight: bold; background-color: rgba(123,123,123,1); color: white; padding: 6px 30px; border-radius: 25px; margin-right: 20px">
                    並べ替え
                </button>
{{--                <label for="select-product-type">商品選択</label>--}}
                <label class="tab-switch-table"  id="label_cycle_type" for="cycle-type-table" v-on:click="toggleTable(0)">継続商品</label>
                <label class="tab-switch-table" id="label_once_type" for="once-type-table" v-on:click="toggleTable(1)">単品商品</label>
                <input type="radio" hidden id="cycle-type-table" name="select-product-type" value="0" @if( empty($dataTypeCookie) || ( !empty($dataTypeCookie) && $dataTypeCookie == 0)) checked @endif>
                <input type="radio" hidden id="once-type-table" name="select-product-type" value="1" @if(!empty($dataTypeCookie) && $dataTypeCookie == 1) checked @endif>
{{--                <select name="select-product-type" id="select-product-type" v-on:change="toggleTable()" style="margin-right: 20px; width: 120px">--}}
{{--                    <option value="0"  @if( empty($dataTypeCookie) || ( !empty($dataTypeCookie) && $dataTypeCookie == 0)) selected @endif>継続商品</option>--}}
{{--                    <option value="1"  @if(!empty($dataTypeCookie) && $dataTypeCookie == 1) selected @endif>単品商品</option>--}}
{{--                </select>--}}
                <span style="margin-left: 20px">テストデータ</span>
                <span v-show="modeShow == 1">
                        <button type="button" class="btn btn-primary" style="padding: 6px 20px" v-on:click="switchMode(1)">表示</button>
                </span>
                <span v-show="modeShow == 0" style="display: none">
                        <button type="button" class="btn btn-primary" style="padding: 6px 20px" v-on:click="switchMode(0)">非表示</button>
                </span>
                
            </div>
            <div>
            <table class="table table-item-list table-striped table-item-list_product" v-show="dataType == 0" style="display: none">
                <thead>
                    <tr>
                        <th id="table_first"></th>
                        <th style="width:12%">販売状況</th>
                        <th style="width:6%">本番/テスト</th>
                        <th style="width:12%">商品名</th>
                        <th style="width:10%">初回トライアル価格</th>
                        <th style="width:10%">2回目以降価格</th>
                        <th style="width:12%">トライアル日数 /人数</th>
                        <th style="width:8%">契約者</th>
                        <th style="width:8%">キャンセル</th>
                    </tr>
                </thead>
                <tbody  v-for="(item,index) in listItems">
                        <tr>
                            <td style="text-align: left; border-radius: 5px 0 0 5px;">
                                <div class="label-item-code" >配信用コード</div>
                                <div class="btn btn-success" v-on:click="toggleRow(index)" style="background-color: rgba(8,191,90,1);; border-radius: 50%; width: 30px; height: 30px; font-size: 15px; padding: 2px 0 4px 0;"><i :id="'icon_'+index" class="fa fa-chevron-up" aria-hidden="true"></i></div>
                            </td>
                            <td style="text-align: center;padding-right: 3%">
                                <label class="switch">
                                    <input  type="checkbox" :checked="item.status_valid == 0" v-on:change="changeStatusValid(item.id,item.status_valid)">
                                    <span class="slider"></span>
                                </label>
                            </td>
                            <td v-show="item.flag_environment == 1">本番</td>
                            <td v-show="item.flag_environment == 0">テスト</td>
                            <td><a :href="'/basic/edit-item/'+item.id" style="cursor: pointer; text-decoration: underline;color: #00a0ea">@{{item.name}}</a></td>
                            <td><span v-show="item.flag_first == 1">@{{formatNumber(item.amount_first)}}円</span></td>
                            <td>@{{ formatNumber(item.amount)}}円</td>
                            <td v-show="modeShow == 1"><span v-show="item.flag_trial == 1">@{{item.time_trial}}日/ <span>@{{item.number_trial}}人</span></span></td>
                            <td v-show="modeShow == 1">@{{(item.number_register - (item.number_trial + item.number_cancel + item.number_done)) < 0 ? 0 : item.number_register - (item.number_trial + item.number_cancel + item.number_done) }}人</td>
                            <td v-show="modeShow == 1" style="border-radius: 0 5px 5px 0;">@{{item.number_cancel}}人</td>
                            <td v-show="modeShow == 0" style="display: none;"><span v-show="item.flag_trial == 1">@{{item.time_trial}}日/ <span >@{{item.number_trial_test}}人</span></span></td>
                            <td v-show="modeShow == 0" style="display: none;">@{{(item.number_register_test - (item.number_trial_test + item.number_cancel_test + item.number_done_test)) < 0 ? 0 : item.number_register_test - (item.number_trial_test + item.number_cancel_test + item.number_done_test) }}人</td>
                            <td v-show="modeShow == 0" style="display: none; border-radius: 0 5px 5px 0;">@{{item.number_cancel_test}}人</td>
                        </tr>
                        <tr style="display: none">
                            <td colspan="9" style="text-align: left">
                                <div style="display: flex; width: 260px; background-color: rgba(172,172,172,1); padding: 8px; color: white; align-items: center; border-radius: 5px; float: left; margin-right: 4%">
                                    <span style="margin-right: 8px">商品</span>
                                    <input type="text" :value="'[ITEM_'+item.item_code+']'" style="color: rgba(118,118,118,1); width: 140px; margin-right: 10px; border-radius: 5px" readonly>
                                    <i class="fa fa-files-o hover-code" style="font-size: 20px; margin-right: 10px;cursor: pointer" aria-hidden="true" onclick="copyInputContent(this)"></i>
                                    <a :href="'/order-item/detail/'+item.item_code+'/preview'" target="_blank" style="color:white"><i class="fa fa-eye hover-code" style="font-size: 23px" aria-hidden="true"></i></a>
                                </div>
                                <div v-show="item.type_payment != 0"  style="display: flex; width: 260px; background-color: rgba(172,172,172,1); padding: 8px; color: white; align-items: center; border-radius: 5px; float: left; margin-right: 4%">
                                    <span style="margin-right: 8px">変更</span>
                                    <input type="text" :value="'[CHANGE_'+item.item_code+']'" style="color: rgba(118,118,118,1); width: 140px; margin-right: 10px; border-radius: 5px" readonly>
                                    <i class="fa fa-files-o hover-code" style="font-size: 20px; margin-right: 10px ;cursor: pointer" aria-hidden="true" onclick="copyInputContent(this)"></i>
                                    <a  :href="'/order-item/change/'+item.item_code+'/preview'" target="_blank" style="color:white"><i class="fa fa-eye hover-code" style="font-size: 23px" aria-hidden="true"></i></a>
                                </div>
                                <div v-show="item.type_payment != 0"  style="display: flex; width: 260px; background-color: rgba(172,172,172,1); padding: 8px; color: white; align-items: center; border-radius: 5px; float: left">
                                    <span style="margin-right: 8px">解約</span>
                                    <input type="text" :value="'[CANCEL_'+item.item_code+']'" style="color: rgba(118,118,118,1); width: 140px; margin-right: 10px; border-radius: 5px" readonly>
                                    <i class="fa fa-files-o hover-code" style="font-size: 20px; margin-right: 10px ;cursor: pointer" aria-hidden="true" onclick="copyInputContent(this)"></i>
                                    <a :href="'/order-item/cancel/'+item.item_code+'/preview'" target="_blank" style="color:white"><i class="fa fa-eye hover-code" style="font-size: 23px" aria-hidden="true"></i></a>
                                </div>
                            </td>
                        </tr>
                </tbody>
            </table>
            
            <table class="table-item-list table-striped table-item-list_single_item" style="display: none" v-show="dataType == 1" style="display: none">
                <thead>
                    <tr>
                        <th style="width: 16%">販売状況</th>
                        <th style="width: 12%">本番/テスト</th>
                        <th style="width: 22%">商品名</th>
                        <th style="width: 12%">販売価格</th>
                        <th style="width: 28%">配信用コード</th>
                        <th style="width: 10%">販売数</th>
                    </tr>
                </thead>
                <tbody v-for="(item,index) in listItems">
                        <tr>
                            <td style="text-align: center;padding-right: 3%; border-radius: 5px 0 0 5px;">
                                <label class="switch">
                                    <input type="checkbox" :checked="item.status_valid == 0" v-on:change="changeStatusValid(item.id,item.status_valid)">
                                    <span class="slider"></span>
                                </label>
                            </td>
                            <td v-show="item.flag_environment == 1">本番</td>
                            <td v-show="item.flag_environment == 0">テスト</td>
                            <td><a :href="'/basic/edit-item/'+item.id" style="cursor: pointer; text-decoration: underline;color: #00a0ea">@{{item.name}}</a></td>
                            <td>@{{formatNumber(item.amount)}}円</td>
                            <td style="color: rgba(131,131,131,1);">
                                <input type="text" :value="'[ITEM_'+item.item_code+']'" style="color: rgba(118,118,118,1); width: 140px; border-radius: 5px" readonly>
                                <i class="fa fa-files-o hover-code" style="font-size: 20px;cursor: pointer" aria-hidden="true" onclick="copyInputContent(this)"></i>
                                <a style="color: rgba(131,131,131,1);" :href="'/order-item/detail/'+item.item_code+'/preview'" target="_blank" style="color:white"><i class="fa fa-eye hover-code" style="font-size: 23px" aria-hidden="true"></i></a>
                            </td>
                            <td v-show="modeShow == 1" style="border-radius: 0 5px 5px 0; ">@{{item.number_register}}</td>
                            <td v-show="modeShow == 0" style="border-radius: 0 5px 5px 0;">@{{item.number_register_test}}</td>
                        </tr>
                </tbody>
            </table>
                <input type="hidden" id="array_sort" value="">
                <input type="hidden" id="current_position" value="">
                <div class="modal fade" id="sorter_modal_v1" role="dialog">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div id="" class="modal-header"><span id="sorter_modal_v1">並べ替え</span>
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                            </div>
                            <div id="sorter_modal_body" class="modal-body modal-body-main scroll-modal">
                                <div class="panel-group">
                                    <div>
                                    <span>
                                        {{--default--}}
                                        <div v-for="(item,index) in listItems"
                                             class="panel panel-default sortitem sortable-chosen sort_item"
                                             draggable="true" style="will-change: transform;" :data-id="item.id"
                                             :id="item.id">
                                            <div class="panel-heading sort-panel-heading"
                                                 style="min-height: 100px">
                                                <div class="inner" style="width: 50%;float: left;">
                                                    <div class="message">
                                                        <p class="text-left temp_name">
                                                            <label :for="'itemcheck_'+item.id"
                                                                   style="display: block;">
                                                                    <span class="keyword_strong_sort">@{{ item.name }}</span>
                                                            </label>
                                                        </p>
                                                    </div>
                                                </div>
                                                <div style="width: 50%;float: right">
                                                    <span v-on:click="onUpdate(undefined, index, 'bottom')"

                                                          class="pull-right sort-button sort-menu movedown" id="">
                                                        <i class="glyphicon glyphicon-arrow-down"></i>末尾
                                                    </span>

                                                    <span v-on:click="onUpdate(undefined, index, 'down')"
                                                          class="pull-right sort-button sort-menu movebottom" id="">
                                                        <i class="glyphicon glyphicon-menu-down"></i>下
                                                    </span>

                                                    <span v-on:click="onUpdate(undefined, index, 'up')"
                                                          class="pull-right sort-button sort-menu movetop" id="">
                                                        <i class="glyphicon glyphicon-menu-up"></i>上
                                                    </span>

                                                    <span v-on:click="onUpdate(undefined, index, 'top')"
                                                          class="pull-right sort-button sort-menu moveup" id="">
                                                        <i class="glyphicon glyphicon-arrow-up"></i>先頭
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </span>
                                        <input type="hidden" id="array_sort" value="">
                                        <input type="hidden" id="current_position" value="">
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                            <span class="btn btn-danger pull-left">
                                <button type="button" class="close" data-dismiss="modal"
                                        style="color: #fff;font-size: 16px;opacity:unset !important;font-weight:normal !important;"
                                        v-on:click="cancelSorted">&times; キャンセル</button>
                            </span>
                                <span class="sorter_client_finishers">
                                <span data-dismiss="modal" class="btn btn-primary sorter-modal-finisher"
                                      v-on:click="sortedItems">この順番で決定する</span>
                            </span>
                            </div>
                        </div>
                    </div>
                </div>
                <input type="hidden" id="data_type_cookie" @if($dataTypeCookie) value="{{ $dataTypeCookie }}" @endif>
            </div>
        </section>
    </article>

@endsection
@push('js')
    <script>
        function showAlertNewFreePlan(contract_type) {
            if(contract_type == 'standard'){
                alert('スタンダードプランの上限に達しています。制限を解除する場合は、プロプランへの変更が必要になります。');
                return false;
            }else{
                alert('現在のプランは利用できない機能です。アップグレードが必要になります。');
                return false;
            }
        }
    </script>
    <script src="/chat_files/clipboard.min.js"></script>
{{--    <script type="application/javascript" src="/js/sales/item.js?v={{config("sns-line.version")}}"></script>--}}
    <script src="/js/sales/list_items.js?v={{config("sns-line.version")}}"></script>
{{--    <script>--}}
{{--        function toggleTable(indexTable) {--}}
{{--            $(".table-item-list").hide();--}}
{{--            $(".table-item-list:eq(" + indexTable + ")").show();--}}
{{--        };--}}
{{--    </script>--}}
@endpush