@extends('layout.admin_v2.main')
@push('css')
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
<style>
    label{
        margin-bottom: 15px;
    }
    label:after{
        display: none;
    }

    .btn-save-common {
        background-color: #f0faf5;
        color: #08BF5A !important;
        box-shadow: 0px 1px 0px #00000033;
        border-radius: 3px;
        width: 150px;
        margin-bottom: 15px;
        font-size: 12px;
        /* margin-left: 10px; */
    }

    .btn-sns-line-lg {
        padding: 10px 16px !important;
    }

    .btn-sns-line {
        padding: 6px 18px;
        font-weight: bold;
        font-size: 15px;
        cursor: pointer;
    }
</style>
@endpush
@section('content')
<article class="sub" id="adminPaymentHistory">
    <section class="masteredit">
        <h2 class="font-weight-bold" style="font-size: 20px; padding: 0">機能紹介設定</h2>
        <div>
            <label>テキスト</label>
            <textarea name="description" id="calendarDetailInfoTopDescription" rows="4" class="form-control" aria-hidden="true">{!! $message !!}</textarea>
        </div>
        <div style="margin-top: 30px;">
            <button onclick="saveSettingMessageIntro()" class="btn btn-sns-line btn-sns-line-lg btn-save-common">保存</button>
        </div>
    </section>
</article>
@endsection
@push('script')
    <script src="/tinymce/js/tinymce/tinymce.min.js" referrerpolicy="origin"></script>
    <script src="/tinymce/langs/ja.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
    <script>
        $(function () {
            tinymce.init({
                selector: 'textarea#calendarDetailInfoTopDescription',
                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",
                valid_elements : '*[*]',
                link_default_protocol: "https",
                // autoresize_max_height: 400,
                height: 500,
                extended_valid_elements: 'i[class]',
                setup: function (editor) {
                    editor.on("keyup", function () {
                        
                    });
                    editor.on('change', function () {
                    });
                },
            });
        })

        function saveSettingMessageIntro(){
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                url: "/admin/save-setting-message-intro",
                beforeSend: function () {
                    $.LoadingOverlay('show');
                },
                type: 'POST',
                data: {
                    content: tinymce.get("calendarDetailInfoTopDescription").getContent()
                },
            }).done(function (a, b, c) {
                console.log(a)
                $.LoadingOverlay('hide');
                Toastify({
                        text: '保存しました。',
                        duration: 3000,
                        newWindow: true,
                        close: true,
                        className: "toastCalendar",
                        avatar: '/images/circle-check.svg',
                        gravity: "bottom", 
                        position: "right", 
                        stopOnFocus: true,
                        offset: {
                            y: 30
                        },
                        style: {
                            background: '#F4FBF2',
                            boxShadow: '0px 2px 4px #00000029',
                            borderRadius: '5px',
                            display: 'flex',
                            alignItems: 'center',
                            color: '#08BF5A',
                            width: '250px',
                            height: '40px',
                            padding: '0',
                        },
                    }).showToast();

            }).fail(function (a, b, c) {
                $.LoadingOverlay('hide');
            }).always(function (a, b) {
                $.LoadingOverlay('hide');
            });
        }
    </script>
@endpush