@extends('layout.admin_v2.main')
@push('css')
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-rqn26AG5Pj86AF4SO72RK5fyefcQ/x32DNQfChxWvbXIyXFePlEktwD18fEz+kQU" crossorigin="anonymous">
    <link rel="stylesheet" href="/chat_files/jquery-ui.min.css">
    <style>
        #setting-popup-ads {
            width: auto;
            max-width: 50%;
        }
        label::after {
            content: none;
        }
        .btn-save-common {
            background-color: #f0faf5;
            color: #08BF5A !important;
            box-shadow: 0px 1px 0px #00000033;
            border-radius: 3px;
            width: 150px;
            margin-bottom: 15px;
            padding: 6px 18px;
            font-weight: bold;
            font-size: 15px;
            cursor: pointer;
            border: none;
        }
        .btn-save-common:hover {
            opacity: 0.7;
        }
        .is-feedback {
            margin-top: .25rem;
            font-size: .875rem;
            color: #dc3545;
        }
        .required {
            color: red;
            margin-left: 10px;
            font-size: 16px;
        }
    </style>
@endpush
@section('content')
    <article class="sub" id="setting-popup-ads">
        <section class="masteredit">
            <h2 class="font-weight-bold" style="font-size: 20px; padding: 0">ポップアップ設定</h2>
            <div class="container mt-5">
                <input type="hidden" name="id" value="{{ $popup['id'] }}">
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label">タイトル<span class="required">*</span></label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" name="popup_title" value="{{ $popup['popup_title'] }}">
                        <div class="is-feedback err-popup_title"></div>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label">内容<span class="required">*</span></label>
                    <div class="col-sm-10">
                        <textarea name="description" id="calendarDetailInfoTopDescription" rows="4" class="form-control" aria-hidden="true" name="popup_content">{!! $popup['popup_content'] !!}</textarea>
                        <div class="is-feedback err-popup_content"></div>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label">外部リンク</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" name="popup_link" value="{{ $popup['popup_link'] }}">
                        <div class="is-feedback err-popup_link"></div>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label">表示開始</label>
                    <div class="col-sm-4">
                        <input type="datetime-local" class="form-control" name="popup_time_start" value="{{ $popup['popup_time_start'] }}">
                        <div class="is-feedback err-popup_time_start"></div>
                    </div>
                </div>
                <button onclick="storeSettingPopupAds()" class="btn-save-common">保存する</button>
            </div>

        </section>
    </article>
@endsection
@push('script')
    <script src="/js/form_answer/jquery.ui.datepicker-ja.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
    <script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></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',
                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 storeSettingPopupAds(){
            $(".is-feedback").text('')
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                url: "/admin/store-setting-popup-ads",
                beforeSend: function () {
                    $.LoadingOverlay('show');
                },
                type: 'POST',
                data: {
                    id: $('input[name="id"]').val(),
                    popup_title: $('input[name="popup_title"]').val(),
                    popup_link: $('input[name="popup_link"]').val(),
                    popup_time_start: $('input[name="popup_time_start"]').val(),
                    popup_content: tinymce.get("calendarDetailInfoTopDescription").getContent()
                },
            }).done(function (a, b, c) {
                $.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) {
                if (a.status === 422) {
                    var errors = a.responseJSON.errors
                    $.each(errors, function (field, messsages) {
                        $(".err-" + field).text(messsages[0])
                    })
                }
                $.LoadingOverlay('hide');
            }).always(function (a, b) {
                $.LoadingOverlay('hide');
            });
        }
    </script>
@endpush