@push('css')
<style>
    .preview-mobile {
        border-radius: 32px 32px 10px 10px;
    }

    .content_preview {
        overflow-y: auto;
        scrollbar-width: thin;
    }
</style>
@endpush
<div class="content" id="wrap-content-change-word">
    <div class="flex">
        <div class="">
            <label class="mb-[10px] text-[18px] font-semibold block">システムワード変更</label>
            <span class="">このページでは、お客様に表示される予約ページの表示設定ができます。</span>
            <div class="mt-[20px] h-[250px]">
                <div class="d-flex items-center mb-[15px]">
                    <div class="bg-[#888888] w-[150px] h-[25px] rounded-[3px] text-[#ffffff] text-center leading-[25px] font-[600]">
                        現在
                    </div>
                    <div class="w-[50px]">
                    </div>
                    <div class="bg-[#08BF5A] w-[200px] h-[25px] rounded-[3px] text-[#ffffff] text-center leading-[25px] font-[600]">
                        変更後
                    </div>
                </div>
                <div class="d-flex items-center mb-[25px]">
                    <div class="bg-[#F8F8F8] w-[150px] border border-[#DDDDDD] h-[40px] rounded-[3px] text-[#222222] text-center leading-[40px]">
                        コース
                    </div>
                    <div class="w-[50px] text-center text-[#222222]">
                        <i class="fal fa-long-arrow-right"></i>
                    </div>
                    <div class="relative">
                        <input type="text"
                            v-model.trim="booking_setting_name"
                            @input="inputSystemWord"
                            placeholder="例）サービス" class="form-control text-center !h-[40px] w-[200px] rounded-[3px] border border-[#DDDDDD]">
                        <span class="absolute bottom-[0px] right-[-45px] text-[14px] text-[#888888]">@{{ booking_setting_name ? booking_setting_name.length : 0 }}/10</span>
                    </div>
                </div>
                <div class="d-flex items-center mb-[25px]" v-show="detailCalendar.calendar_staff_type == CALENDAR_STAFF_TYPE_MULTIPLE_STAFF">
                    <div class="bg-[#F8F8F8] w-[150px] border border-[#DDDDDD] h-[40px] rounded-[3px] text-[#222222] text-center leading-[40px]">
                        スタッフ
                    </div>
                    <div class="w-[50px] text-center text-[#222222]">
                        <i class="fal fa-long-arrow-right"></i>
                    </div>
                    <div class="relative">
                        <input type="text"
                            v-model.trim="booking_setting_text_staff"
                            @input="inputSettingTextStaff"
                            placeholder="例）コーチ" class="form-control text-center !h-[40px] w-[200px] rounded-[3px] border border-[#DDDDDD]">
                        <span class="absolute bottom-[0px] right-[-45px] text-[14px] text-[#888888]">@{{ booking_setting_text_staff ? booking_setting_text_staff.length : 0 }}/10</span>
                    </div>
                </div>
                <div class="d-flex items-center mb-[15px]" v-show="detailCalendar.calendar_staff_type == CALENDAR_STAFF_TYPE_MULTIPLE_STAFF">
                    <div class="bg-[#F8F8F8] w-[150px] border border-[#DDDDDD] h-[40px] rounded-[3px] text-[#222222] text-center leading-[40px]">
                        指名料
                    </div>
                    <div class="w-[50px] text-center text-[#222222]">
                        <i class="fal fa-long-arrow-right"></i>
                    </div>
                    <div class="relative">
                        <input type="text"
                            v-model.trim="booking_setting_text_fee"
                            @input="inputSettingTextFee"
                            placeholder="例）オプション料" class="form-control text-center !h-[40px] w-[200px] rounded-[3px] border border-[#DDDDDD]">
                        <span class="absolute bottom-[0px] right-[-45px] text-[14px] text-[#888888]">@{{ booking_setting_text_fee ? booking_setting_text_fee.length : 0 }}/10</span>
                    </div>
                </div>
            </div>
            <div class="my-4">
                <div class="!font-[600] text-[#222222] font-[14px] mb-2">週・月 表示設定</div>
                <div class="text-[#222222] font-[14px]">お客様に表示される予約ページで週・月のどちらを先に表示するかの設定ができます。</div>
                <div class="mb-[9px] mt-[15px]">
                    <div>
                        <label for="is_show_week" class="w-full cursor-pointer mb-[8px]">
                            <input v-model="is_show_month" type="radio" value="0" name="settingDisplaySceenMonth" id="is_show_week" class="text-[16px] accent-[green] !m-0 !mr-[5px] !cursor-pointer">
                            <span class="font-light text-[#888888] !cursor-pointer" style="line-height: normal;">週を先に表示</span></label>
                    </div>
                    <div>
                        <label for="is_show_month" class="w-full cursor-pointer">
                            <input v-model="is_show_month" type="radio" value="1" name="settingDisplaySceenMonth" id="is_show_month" class="text-[16px] accent-[green] !m-0 !mr-[5px] !cursor-pointer">
                            <span class="font-light text-[#888888] !cursor-pointer" style="line-height: normal;">月を先に表示</span>
                        </label>
                    </div>
                </div>
            </div>
            <div class="mt-5">
                <button @click="saveSystemWordChange"
                    class="relative w-[200px] h-[40px] border border-solid border-[#08BF5A] text-[16px] text-[#08BF5A] rounded-[3px] mr-[15px] hover:text-white hover:!bg-[#08BF5A]">
                    保存
                </button>
            </div>
        </div>
    </div>
</div>

@push('js')
{{-- <script src="https://cdn.tiny.cloud/1/g3zs72us63f0hhxg73jreycj5mblfo0jqrg6udujttaqokrz/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>--}}
{{-- <script src="/tinymce/langs/ja.js"></script>--}}
<script>
    $(function() {
        tinymce.init({
            selector: 'textarea#calendarDetailInfoDescription',
            sandbox_iframes: false,
            menubar: false,
            mode: "exact",
            plugins: "autolink link code 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,
            setup: function(editor) {
                editor.on("keyup", function() {
                    appCalendarSalon.calendarDetailInfo.description = tinymce.get("calendarDetailInfoDescription").getContent();
                });
                editor.on('change', function() {
                    appCalendarSalon.calendarDetailInfo.description = tinymce.get("calendarDetailInfoDescription").getContent();
                });
            },
        });
    })
</script>
@endpush