@props([
    'title' => '팝업 ' . ($popup->id ? '수정' : '등록'),
    'pageTitle' => '팝업 ' . ($popup->id ? '수정' : '등록'),
    'action' => $popup->id ? route('admin.common.popup.update', ['popup' => $popup]) : route('admin.common.popup.store')
])
<x-admin.layout.default-layout :title="$title" :pageTitle="$pageTitle">
    <div id="popupWrite" class="contents-wrapper">
        <form name="form_popup" action="{{ $action }}" onsubmit="return validate_form(this);" method="post">
            @csrf
            @if ($popup->id)
                @method('PUT')
            @endif

            <div class="form">
                <div class="form-item">
                    <div class="col">
                        <label for="title" class="item-label">팝업 타이틀</label>
                    </div>
                    <div class="col">
                        <input type="text" id="title" name="title" value="{{ old('title', $popup->title) }}" required class="item-input">
                        <span class="item-msg item-msg-help"></span>
                    </div>
                </div>

                <div class="form-item">
                    <div class="col">
                        <label for="position" class="item-label">위치</label>
                    </div>
                    <div class="col">
                        <x-admin.forms.selectbox
                            id="position"
                            name="position"
                            :value="$popup->position"
                            :options="$positions"
                        />
                        <span class="item-msg item-msg-help"></span>
                    </div>
                    {{--
                    @todo 아래 목록으로 변경해야함
                    <ul class="select__options">
                        <!-- #BACK 서비스 패키지에서 추가: 홈페이지 메인 / 커뮤니티 메인 -->
                        <li class="options-item" data-value="" tabindex="0">홈페이지 메인</li>
                        <li class="options-item" data-value="" tabindex="0">커뮤니티 메인</li>
                        <li class="options-item" data-value="" tabindex="0">고객센터 메인</li>
                    </ul>
                    --}}
                </div>

                <div class="form-item">
                    <div class="col">
                        <label for="start_datetime" class="item-label">시작일시</label>
                    </div>
                    <div class="col">
                        <input type="text" id="start_datetime" name="start_datetime" value="{{ old('start_datetime', $popup->start_datetime) }}" class="item-input" maxlength="19">
                        <input type="checkbox" id="set_start_datetime" value="{{ now()->format('Y-m-d 00:00:00') }}">
                        <label for="set_start_datetime">시작일시를 오늘로</label>
                        <span class="item-msg item-msg-help"></span>
                    </div>
                </div>

                <div class="form-item">
                    <div class="col">
                        <label for="end_datetime" class="item-label">종료일시</label>
                    </div>
                    <div class="col">
                        <input type="text" id="end_datetime" name="end_datetime" value="{{ old('end_datetime', $popup->end_datetime) }}" class="item-input" maxlength="19">
                        <input type="checkbox" id="set_end_datetime" value="{{ now()->addDays(7)->format('Y-m-d 23:59:59') }}">
                        <label for="set_end_datetime">종료일시를 오늘로부터 7일 후로</label>
                        <span class="item-msg item-msg-help"></span>
                    </div>
                </div>

                <div class="form-item">
                    <div class="col">
                        <label for="disable_days" class="item-label">다시 보지 않음 설정</label>
                        <x-admin.forms.tooltip>며칠 간 다시 표시하지 않을지 설정합니다.</x-admin.forms.tooltip>
                    </div>
                    <div class="col">
                        <input type="text" id="disable_days" name="disable_days" value="{{ old('disable_days', $popup->disable_days) ?: 1 }}" required class="item-input" size="5" placeholder="일">
                        <span class="item-msg item-msg-help"></span>
                    </div>
                </div>

                <div class="form-item">
                    <div class="col">
                        <label for="content" class="item-label">팝업 내용</label>
                    </div>
                    <div class="col">
                        <x-editor content="{{ old('content', $popup->content) }}" tagName="content"/>
                        <span class="item-msg item-msg-help"></span>
                    </div>
                </div>

                <div class="form-item">
                    <div class="col">
                        <span class="item-label">팝업 노출</span>
                    </div>

                    <div class="col">
                        <div class="form-checkbox">
                            <div class="inner">
                                <input type="checkbox" id="is_active" name="is_active" value="1" @checked(old('is_active', $popup->is_active))>
                                <label for="is_active" tabindex="0">노출함</label>
                            </div>
                        </div>
                        <span class="item-msg item-msg-help"></span>
                    </div>
                </div>
            </div>

            <div class="form-submit is-fixed">
                <input type="submit" class="btn btn-contained-primary" value="저장하기">
                @if($popup->id)
                <button class="btn btn-contained-secondary btn_delete" data-url="{{ route('admin.common.popup.destroy', ['popup' => $popup]) }}">팝업 삭제</button>
                @endif
                <a href="{{ route('admin.common.popup') }}" class="btn btn-solid-secondary">취소</a>
            </div>
        </form>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const setBeginTime = document.getElementById('set_start_datetime');
            const beginDatetime = document.getElementById('start_datetime');
            const setEndTime = document.getElementById('set_end_datetime');
            const endDatetime = document.getElementById('end_datetime');

            setBeginTime.addEventListener('change', function () {
                beginDatetime.value = this.checked ? this.value : beginDatetime.defaultValue;
            });
            setEndTime.addEventListener('change', function () {
                endDatetime.value = this.checked ? this.value : endDatetime.defaultValue;
            });

            const btn_delete = document.querySelector('.btn_delete');
            btn_delete.addEventListener('click', function() {
                deleteConfirm(btn_delete.dataset.url, '팝업을 삭제하시겠습니까?', {callback: function() {
                    window.location.href = '{{ route('admin.common.popup') }}';
                }});
            });
        });

        function validate_form(f) {
            return true;
        }
    </script>
</x-admin.layout.default-layout>