@extends("domains.common.layouts.layout-popup")

@section("header")
@endsection

@section("main-content")
@vite([
    'resources/js/domains/common/tomSelect.js',
    'resources/js/domains/common/tomSelectAllCheck.js',
    'resources/js/domains/common/fullCalendar.js'
])
<div class="window-popup-titleBox">
    <h2>모의고사 일정 등록</h2>
    <span class="window-popup-close" onclick="edmPopupClose()"><i class="dripicons-cross"></i></span>
</div>
<div class="window-popup-con">
    <p class="mb-3">
        모의고사 일정을 수정합니다.<br>
        한 번에 1개의 모의고사 구분 값에 대해 수정 가능합니다.
    </p>
    <div class="schedule-calendar toggle-sche"></div>
    <!-- 조회조건 -->
    <form action="" class="mb-3">
        <div class="popup-search-wrap search-form">
            <div class="search-input-wrap full">
                <div class="search-input-row">
                    <div class="input-wrapper">
                        <label for="" class="form-label req">모의고사 구분</label>
                        <!-- validation 항목 활성화시 active-val 클래스 추가 -->
                        <div class="popup-input">
                            <span class="form-check form-check-inline">
                                <input type="radio" id="radio1" name="radio" value=""
                                    class="form-check-input" checked>
                                <label class="form-check-label" for="radio1">CDT 모의고사</label>
                            </span>
                            <span class="form-check form-check-inline">
                                <input type="radio" id="radio2" name="radio" value=""
                                    class="form-check-input">
                                <label class="form-check-label" for="radio2">PBT 모의고사</label>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <div class="validation-wrap">
        <p>선택된 날짜가 없습니다.</p>
        <p>같은 날에 등록된 일정이 있습니다.</p>
        <p>모의고사일은 익일 이후로만 설정 가능합니다.</p>
    </div>
    <div class="text-center">
        <button class="button btn-style-8" type="submit">삭제</button>
        <button class="button btn-style-1" type="submit">저장</button>
    </div>
</div>
@endsection

@push("script")
<script>

    let selectTmp;

    window.addEventListener("load", () => {
        selectTmp = new TomSelect("#lecture", {
            plugins: [
                "checkbox_options",
                "caret_position",
                "input_autogrow"
            ],
            maxItems: null
        });

    });

    window.addEventListener("load", () => {
            calendarInit();
        });

        const calendarInit = () => {
            // 캘린더 Elem 접근
            const calendarEls = document.querySelectorAll('.schedule-calendar');
            for (let calendarEl of calendarEls) {
                if (calendarEl != null) {
                    let calendar = new Calendar(calendarEl, {
                        // plugins: [dayGridPlugin, timeGridPlugin, listPlugin],
                        plugins: [dayGridPlugin, momentPlugin, interactionPlugin],
                        initialView: 'dayGridMonth',
                        headerToolbar: {
                            left: 'prev,next',
                            center: 'title',
                            // right: 'dayGridMonth,timeGridWeek,listWeek'
                            right: 'today'
                        },
                        titleFormat: 'YYYY년 MM월',
                        buttonText: {
                            today:    'Today',
                            // month:    'month',
                            // week:     'week',
                            // day:      'day',
                            // list:     'list'
                        },
                        buttonIcons: {
                            // prev: 'chevron-left',
                            // next: 'chevron-right',
                            // prevYear: 'chevrons-left', // double chevron
                            // nextYear: 'chevrons-right' // double chevron
                        },
                        // height: window.innerHeight - 300,
                        editable: false,
                        droppable: false,
                        // selectable: true,
                        events: [],
                        dateClick: function(info) {
                            info.dayEl.classList.toggle("selected");
                        }
                    });
                    calendar.render();
                }
            }

            const weekendElems = document.querySelectorAll("a.fc-col-header-cell-cushion");
            for (let weekendElem of weekendElems) {
                if (weekendElem.innerHTML == "Sun" || weekendElem.innerHTML == "Sat")
                    weekendElem.classList.add("weekend-red");
            }
        }
</script>
@endpush