@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-[21px] mb-[28px]">
                <div class="flex items-center">
                    <span class="mr-[35px] !font-[600]">イメージ</span> <span class="text-[16px]">推奨 1,000 × 500（px）</span>
                </div>
                <div class="mt-[13px] flex items-end mb-[26px]">
                    <img :src="calendarDetailInfo.image_calendar ? ((calendarDetailInfo.image_calendar.startsWith('data:') || calendarDetailInfo.image_calendar.includes('http')) ? calendarDetailInfo.image_calendar : '{{ env('URL_SERVER_MEDIA') }}' + calendarDetailInfo.image_calendar) : '/images/Group3022.png'"
                         width="150px"/>
                    <div class="ml-3">
                        <div class="text-[16px]" v-if="!calendarDetailInfo.image_calendar">
                            設定されていません
                        </div>
                        <label class="text-[#5799DB] underline font-light cursor-pointer">
                            <input type="file" name="image_calendar" class="hidden" accept="image/*"
                                   @change="uploadPreviewImageCalendar($event)"/>
                            <span v-if="!calendarDetailInfo.image_calendar">アップロード</span>
                            <span v-else class="!text-[16px]">変更</span>
                        </label>
                        <span v-if="calendarDetailInfo.image_calendar"
                               class="text-[#F44336] underline cursor-pointer font-light ml-3 !text-[16px]"
                               @click.stop="deleteImageCalendar()">削除</span>
                    </div>
                </div>
                <div class="mt-[17px]">
                    <label class="font-semibold mb-[17px]">テキスト</label>
                    <textarea name="description" id="calendarDetailInfoDescription"
                              v-model="calendarDetailInfo.description" class="form-control !w-[470px] !h-[500px] !rounded-[5px]" rows="4"></textarea>
                </div>
            </div>
            <div class="mt-3">
                <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('preview')"
                        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 src="https://cdn.tiny.cloud/1/g3zs72us63f0hhxg73jreycj5mblfo0jqrg6udujttaqokrz/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script> -->
    <script src="/tinymce/js/tinymce/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: [
                    "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,
                setup: function (editor) {
                    editor.on("keyup", function () {
                        appCalendar.calendarDetailInfo.description = tinymce.get("calendarDetailInfoDescription").getContent();
                    });
                    editor.on('change', function () {
                        appCalendar.calendarDetailInfo.description = tinymce.get("calendarDetailInfoDescription").getContent();
                    });
                },
            });
        })
    </script>
@endpush