@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="">
                            <select name="" id="lecture">
                                <option value="1" >%강좌명%</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 class="popup-input">
                            <select name="" id="">
                                <option value="">오전 12:00</option>
                            </select>
                            <span class="btw-bullet">-</span>
                            <select name="" id="" disabled>
                                <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 class="">
                            <input type="date">
                        </div>
                    </div>
                    <div class="input-wrapper">
                        <label for="" class="form-label req">종강</label>
                        <!-- validation 항목 활성화시 active-val 클래스 추가 -->
                        <div class="">
                            <input type="date">
                        </div>
                    </div>
                    <button class="button btn-style-1">추가</button>
                </div>
                <div class="search-input-row">
                    <div class="input-wrapper">
                        <label for="" class="form-label req">개강</label>
                        <!-- validation 항목 활성화시 active-val 클래스 추가 -->
                        <div class="">
                            <input type="date">
                        </div>
                    </div>
                    <div class="input-wrapper">
                        <label for="" class="form-label req">종강</label>
                        <!-- validation 항목 활성화시 active-val 클래스 추가 -->
                        <div class="">
                            <input type="date">
                        </div>
                    </div>
                    <button class="button btn-style-8">삭제</button>
                </div>
                <div class="search-input-row">
                    <div class="input-wrapper">
                        <label for="" class="form-label req">개강</label>
                        <!-- validation 항목 활성화시 active-val 클래스 추가 -->
                        <div class="">
                            <input type="date">
                        </div>
                    </div>
                    <div class="input-wrapper">
                        <label for="" class="form-label req">종강</label>
                        <!-- validation 항목 활성화시 active-val 클래스 추가 -->
                        <div class="">
                            <input type="date">
                        </div>
                    </div>
                    <button class="button btn-style-8">삭제</button>
                </div>
                <div class="search-input-row">
                    <div class="input-wrapper">
                        <label for="" class="form-label req">개강</label>
                        <!-- validation 항목 활성화시 active-val 클래스 추가 -->
                        <div class="">
                            <input type="date">
                        </div>
                    </div>
                    <div class="input-wrapper">
                        <label for="" class="form-label req">종강</label>
                        <!-- validation 항목 활성화시 active-val 클래스 추가 -->
                        <div class="">
                            <input type="date">
                        </div>
                    </div>
                    <button class="button btn-style-8">삭제</button>
                </div>
                <div class="search-input-row">
                    <div class="input-wrapper">
                        <label for="" class="form-label req">개강</label>
                        <!-- validation 항목 활성화시 active-val 클래스 추가 -->
                        <div class="">
                            <input type="date">
                        </div>
                    </div>
                    <div class="input-wrapper">
                        <label for="" class="form-label req">종강</label>
                        <!-- validation 항목 활성화시 active-val 클래스 추가 -->
                        <div class="">
                            <input type="date">
                        </div>
                    </div>
                    <button class="button btn-style-8">삭제</button>
                </div>
                <div class="search-input-row">
                    <div class="input-wrapper">
                        <label for="" class="form-label req">개강</label>
                        <!-- validation 항목 활성화시 active-val 클래스 추가 -->
                        <div class="">
                            <input type="date">
                        </div>
                    </div>
                    <div class="input-wrapper">
                        <label for="" class="form-label req">종강</label>
                        <!-- validation 항목 활성화시 active-val 클래스 추가 -->
                        <div class="">
                            <input type="date">
                        </div>
                    </div>
                    <button class="button btn-style-8">삭제</button>
                </div>
                <div class="search-input-row">
                    <div class="input-wrapper">
                        <label for="" class="form-label req">개강</label>
                        <!-- validation 항목 활성화시 active-val 클래스 추가 -->
                        <div class="">
                            <input type="date">
                        </div>
                    </div>
                    <div class="input-wrapper">
                        <label for="" class="form-label req">종강</label>
                        <!-- validation 항목 활성화시 active-val 클래스 추가 -->
                        <div class="">
                            <input type="date">
                        </div>
                    </div>
                    <button class="button btn-style-8">삭제</button>
                </div>
                <div class="search-input-row">
                    <div class="input-wrapper">
                        <label for="" class="form-label req">개강</label>
                        <!-- validation 항목 활성화시 active-val 클래스 추가 -->
                        <div class="">
                            <input type="date">
                        </div>
                    </div>
                    <div class="input-wrapper">
                        <label for="" class="form-label req">종강</label>
                        <!-- validation 항목 활성화시 active-val 클래스 추가 -->
                        <div class="">
                            <input type="date">
                        </div>
                    </div>
                    <button class="button btn-style-8">삭제</button>
                </div>
                <div class="search-input-row">
                    <div class="input-wrapper">
                        <label for="" class="form-label req">개강</label>
                        <!-- validation 항목 활성화시 active-val 클래스 추가 -->
                        <div class="">
                            <input type="date">
                        </div>
                    </div>
                    <div class="input-wrapper">
                        <label for="" class="form-label req">종강</label>
                        <!-- validation 항목 활성화시 active-val 클래스 추가 -->
                        <div class="">
                            <input type="date">
                        </div>
                    </div>
                    <button class="button btn-style-8">삭제</button>
                </div>
                <div class="search-input-row">
                    <div class="input-wrapper">
                        <label for="" class="form-label req">개강</label>
                        <!-- validation 항목 활성화시 active-val 클래스 추가 -->
                        <div class="">
                            <input type="date">
                        </div>
                    </div>
                    <div class="input-wrapper">
                        <label for="" class="form-label req">종강</label>
                        <!-- validation 항목 활성화시 active-val 클래스 추가 -->
                        <div class="">
                            <input type="date">
                        </div>
                    </div>
                    <button class="button btn-style-8">삭제</button>
                </div>
                <div class="search-input-row">
                    <div class="input-wrapper">
                        <label for="" class="form-label req">개강</label>
                        <!-- validation 항목 활성화시 active-val 클래스 추가 -->
                        <div class="">
                            <input type="date">
                        </div>
                    </div>
                    <div class="input-wrapper">
                        <label for="" class="form-label req">종강</label>
                        <!-- validation 항목 활성화시 active-val 클래스 추가 -->
                        <div class="">
                            <input type="date">
                        </div>
                    </div>
                    <button class="button btn-style-8">삭제</button>
                </div>
                <div class="search-input-row">
                </div>
            </div>
        </div>
    </form>
    <p class="p-alert">
        수강일이 아닌 날은 상단의 캘린더에서 선택하여 제외 처리해 주세요.
    </p>
    <div class="validation-wrap">
        <p>선택되지 않은 항목이 있습니다.</p>
        <p>종강일이 개강일보다 빠릅니다.</p>
        <p>중복된 강좌 일정이 있습니다.</p>
        <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