@push('css')
    <link rel="stylesheet" href="/css/base/main.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/css/sales/v2/setting.css?v={{config("sns-line.version")}}">
    <style>
        .c-hover-icon-action:hover {
            background-color: #96ADB2 !important;
            color: #FFFFFF !important;
        }

        .c-hover-icon-action {
            display: inline-block;
            padding: 2px 6px 0;
            border-radius: 4px;
        }
    </style>
@endpush
<div id="setting" style="margin-left: -15px" v-cloak>
    <div class="mt-4">
        <div class="" style="width: 1000px">
            <div class="mt-4">
                <ul class="" id="tabs-c-items" style="border-bottom: 3px solid #E8E8E8;">
{{--                    <li :class="{active: tableActive == 'tab-1'}" class="tab-item">--}}
{{--                        <a @click="showTab('tab-1')" href="#tab-1">--}}
{{--                            <span style="font-weight: bold">連携設定</span>--}}
{{--                        </a>--}}
{{--                    </li>--}}
                    <li :class="{active: tableActive == 'tab-2'}" class="tab-item">
                        <a @click="showTab('tab-2')" href="#tab-2">
                            <span style="font-weight: bold">事業者・特商法設定</span>
                        </a>
                    </li>
                    <li :class="{active: tableActive == 'tab-3'}" class="tab-item">
                        <a @click="showTab('tab-3')" href="#tab-3">
                            <span style="font-weight: bold">最終確認画面</span>
                        </a>
                    </li>
{{--                    <li :class="{active: tableActive == 'tab-4'}" class="tab-item">--}}
{{--                        <a @click="showTab('tab-4')" href="#tab-4">--}}
{{--                            <span style="font-weight: bold">領収書</span>--}}
{{--                        </a>--}}
{{--                    </li>--}}
                </ul>
            </div>
            <div>
                @include('basic.sales.v2.tab-settings.tab-1')
                @include('basic.sales.v2.tab-settings.tab-2')
                @include('basic.sales.v2.tab-settings.tab-3')
{{--                @include('basic.sales.v2.tab-settings.tab-4')--}}
            </div>

        </div>
    </div>
</div>


@push('js')
    <script>
        let flagStripe = {{ $flagStripe }};
        let hashBotId = '{{$hashBotId}}';
        let univapayLinked = '{{$univapayLinked}}';
        let webhook = '{{ $univapayWebhook }}';
        let emailUnivapay = '{{ $emailUnivapay }}';
    </script>
    <script src="/tinymce/js/tinymce/tinymce.min.js" referrerpolicy="origin"></script>
    <!-- <script src="https://cdn.tiny.cloud/1/g3zs72us63f0hhxg73jreycj5mblfo0jqrg6udujttaqokrz/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script> -->
    <script src="/tinymce/langs/ja.js"></script>
    <script src="/js/validate/validate.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/sales/v2/setting.js?v={{config('sns-line.version')}}"></script>
    <script>
        tinymce.init({
            selector: 'textarea#editor-setting-common-confirm',
            sandbox_iframes: false,
            menubar: false,
            mode: "exact",
            plugins: [
                "advlist", "anchor", "autolink", "charmap", "code", "fullscreen", 
                "help", "image", "insertdatetime", "link", "lists", "media", 
                "preview", "searchreplace", "table", "visualblocks", "advtemplate", "emoticons"
            ],
            toolbar:
                "undo redo | blocks | styleselect | forecolor | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | link | code",
            language: "ja",
            link_default_protocol: "https",
            autoresize_max_height: 400,
            height: 400
        })

        tinymce.init({
            selector: 'textarea#editor-setting-info-store',
            sandbox_iframes: false,
            menubar: false,
            mode: "exact",
            plugins: [
                "advlist", "anchor", "autolink", "charmap", "code", "fullscreen", 
                "help", "image", "insertdatetime", "link", "lists", "media", 
                "preview", "searchreplace", "table", "visualblocks", "advtemplate", "emoticons"
            ],
            toolbar:
                "undo redo | blocks | styleselect | forecolor | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | link | code",
            language: "ja",
            link_default_protocol: "https",
            autoresize_max_height: 400,
            height: 400
        })
    </script>
@endpush