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

        .content_preview {
            overflow-y: auto;
            scrollbar-width: thin;
        }

    </style>
@endpush
<div class="content">
    <div class="flex">
        <div class="w-7/12">
            <label class="mb-[10px] text-[18px] font-semibold block">トップ画面設定</label>
            <span class="">予約画面トップに表示する内容を設定します。</span>
            <div class="mt-[15px]">
                <label class="mb-[10px] text-[14px] font-semibold block">トップ画面設定</label>
                <span class="text-[14px] text-[#222222] font-[400]">お客様の予約画面で、トップ画面を表示するかどうかを選択できます。</span>
                <span class="text-[14px] text-[#222222] font-[400]">通常、予約リンクをタップすると、トップ画面が表示され、その後コース選択画面に進みます。</span>
                <span class="text-[14px] text-[#222222] font-[400]">「トップ画面を表示しない」を選択すると、お客様にトップ画面は表示されません。</span>

                <div class="mt-[15px]">
                    <div class="">
                        <label for="show-top-page" class="w-full cursor-pointer mb-[8px]">
                            <input type="radio" class="text-[16px] accent-[green] !m-0 !mr-[5px] !cursor-pointer" v-model="calendarDetailInfo.show_top_page" value="1" name="is-show-top-page" id="show-top-page">
                            <span class="font-light text-[#888888] !cursor-pointer" style="line-height: normal">トップ画面を表示する</span>
                        </label>
                    </div>
                    <div class="">
                        <label for="not-show-top-page" class="w-full cursor-pointer mb-[8px]">
                            <input type="radio" class="text-[16px] accent-[green] !m-0 !mr-[5px] !cursor-pointer" v-model="calendarDetailInfo.show_top_page" value="0" name="is-show-top-page" id="not-show-top-page">
                            <span class="font-light text-[#888888] !cursor-pointer" style="line-height: normal">トップ画面を表示しない</span>
                        </label>
                    </div>
                </div>
            </div>
            <div class="mt-[21px] mb-[28px]" v-show="calendarDetailInfo.show_top_page == 1">
                <div class="flex items-center">
                    <span class="mr-[35px] !font-[600]">イメージ</span> <span class="text-[16px] !text-[#2B2F36]">推奨 1,000 × 500（px）</span>
                </div>
                <div class="mt-[13px] flex items-end mb-[26px]">
                    <img :src="calendarDetailInfo.image_calendar_top ? ((calendarDetailInfo.image_calendar_top.startsWith('data:') || calendarDetailInfo.image_calendar_top.includes('http')) ? calendarDetailInfo.image_calendar_top : '{{ env('URL_SERVER_MEDIA') }}' + calendarDetailInfo.image_calendar_top) : '/images/Group3022.png'"
                         width="150px"/>
                    <div class="ml-3">
                        <div class="text-[#222222] text-[16px]" v-if="!calendarDetailInfo.image_calendar_top">
                            設定されていません
                        </div>
                        <label class="text-[#5799DB] underline font-light cursor-pointer">
                            <input type="file" name="image_calendar_top" class="hidden" accept="image/*"
                                   @change="uploadPreviewImageCalendar($event, 'top')"/>
                            <span v-if="!calendarDetailInfo.image_calendar_top" class="!text-[16px]">アップロード</span>
                            <span v-else class="!text-[16px]">変更</span>
                        </label>
                        <span v-if="calendarDetailInfo.image_calendar_top"
                               class="text-[#F44336] underline cursor-pointer font-light ml-3 !text-[16px]"
                               @click.stop="deleteImageCalendar('top')">削除</span>
                    </div>
                </div>
                <div class="mt-3">
                    <label class="mb-[14px] font-semibold">店舗名</label>
                    <input class="form-control w-[470px] h-[40px] !border-[#DDDDDD] !text-[#2B2F36]" name="store_name"
                           v-model="calendarDetailInfo.calendar_name" placeholder="ヘアサロン エルメ 渋谷店"/>
                </div>
                <div class="mt-[17px]">
                    <label class="font-semibold mb-[17px]">テキスト</label>
                    <textarea name="description" id="calendarDetailInfoTopDescription" class="form-control" rows="4"></textarea>
                </div>
            </div>
            <div class="mt-[28px]">
                <button @click="saveCalendarInfo()"
                        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>
                <button @click="saveCalendarInfo('previewTop')"
                        v-if="calendarDetailInfo.show_top_page == 1"
                        class="relative w-[150px] h-[40px] border border-solid border-[#DDDDDD] text-[16px] rounded-[3px] hover:opacity-70">
                    プレビュー
                </button>
            </div>
        </div>
    </div>
</div>

@push('js')
    <script>
        $(function () {
            tinymce.init({
                selector: 'textarea#calendarDetailInfoTopDescription',
                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_top = tinymce.get("calendarDetailInfoTopDescription").getContent();
                    });
                    editor.on('change', function () {
                        appCalendarSalon.calendarDetailInfo.description_top = tinymce.get("calendarDetailInfoTopDescription").getContent();
                    });
                },
            });
        })
    </script>
@endpush