@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">
        개인 일정을 수정합니다.
    </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">
                            <select name="" id="">
                                <option value="">오전 12:00</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="search-input-row">
                    <div class="input-wrapper">
                        <label for="" class="form-label req">일정제목</label>
                        <!-- validation 항목 활성화시 active-val 클래스 추가 -->
                        <div>
                            <input type="text">
                        </div>
                    </div>
                </div>
                <div class="search-input-row">
                    <div class="input-wrapper">
                        <label for="" class="form-label">
                            <input type="checkbox" id="ck-notice" name="ck-notice">
                            <label for="ck-notice">공지</label>
                        </label>
                        <!-- validation 항목 활성화시 active-val 클래스 추가 -->
                        <div>
                            <p class="p-alert">
                                체크 후 저장하면 전체 인원의 일정에도 노출됩니다.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <div class="validation-wrap">
        <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