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

@section("header")
@routes(["schedule", "product"])
@vite([
    'resources/js/domains/common/tomSelect.js',
    'resources/js/domains/common/fullCalendar.js',
])
<style>
    div.ts-wrapper div.ts-control input {
        height: auto;
    }
    .special-schedule-bg {
        background-color: green;
        border-color: green;
    }
</style>
@endsection

@section("main-content")
<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 id="special-lecture-schedule-form" 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="lecture_id" class="form-label req">강의</label>
                        <!-- validation 항목 활성화시 active-val 클래스 추가 -->
                        <div class="popup-input">
                            <select name="lecture_id" id="lecture_id" onchange="changeOption(event)" @readonly(!empty($specialLectureSchedules) && $specialLectureSchedules[0]?->lecture)>
                                <option value="">선택</option>
                                @if (!empty($specialLectureSchedules))
                                <option value="{{ $specialLectureSchedules[0]?->lecture?->id }}" selected>{{ $specialLectureSchedules[0]?->lecture?->name }}</option>
                                @endif
                            </select>
                        </div>
                    </div>
                </div>
                <div class="search-input-row">
                    <div class="input-wrapper">
                        <label for="start_time" class="form-label req">시간</label>
                        <!-- validation 항목 활성화시 active-val 클래스 추가 -->
                        <div class="popup-input">
                            <input type="time" name="start_time" id="start_time" value="{{ !empty($specialLectureSchedules) ? $specialLectureSchedules[0]?->start_time ?? '' : '' }}"/>
                            <span class="btw-bullet">-</span>
                            <input type="time" name="end_time" id="end_time" value="{{ !empty($specialLectureSchedules) ? $specialLectureSchedules[0]?->end_time ?? '' : '' }}"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <div id="validation-div"><div class="validation-wrap"><p></p></div></div>
    <div class="text-center">
        @if (!empty($specialLectureSchedules))
        <button class="button btn-style-8" type="button" onclick="deleteSchedules()">삭제</button>
        @endif
        <button class="button btn-style-1" type="button" onclick="handleSubmit()">등록</button>
    </div>
</div>
@endsection

@push("script")
<script>
    const SPECIAL_LECTURE_SCHEDULES = {{ Js::from($specialLectureSchedules) }};
    const LECTURE_ID = {{ Js::from($lectureId) }};

    let lectureIdTomSelect = null;
    let calendar = null;

    window.addEventListener("load", () => {
        lectureIdTomSelect = new TomSelect("#lecture_id", {
            plugins: ["input_autogrow",],
            valueField: "id",
            labelField: "name",
            searchField: "name",
            maxItems: 1,
            load: (query, callback) => {
                edmAjax({
                    method: "GET",
                    url: route('api.product.lecture.by-name'),
                    data: {
                        query: query,
                        service_id: 2
                    },
                    callback: callback,
                    isBlock: false,
                });
            },
            onFocus: () => {
                edmAjax({
                    method: "GET",
                    url: route('api.product.lecture.by-name'),
                    data: {
                        count: 5,
                        service_id: 2
                    },
                    callback: response => {
                        lectureIdTomSelect.addOptions(response.data);
                        lectureIdTomSelect.open();
                    },
                    isBlock: false,
                });
            },
        });

        calendarInit();
        fitWindowSize();
    });

    function calendarInit() {
        calendar = new Calendar(document.querySelector("div.schedule-calendar"), {
            plugins: [dayGridPlugin, momentPlugin, interactionPlugin],
            initialView: 'dayGridMonth',
            headerToolbar: {
                left: 'prev,next',
                center: 'title',
                right: 'today'
            },
            titleFormat: 'YYYY년 MM월',
            buttonText: {today: 'Today',},
            buttonIcons: {},
            editable: false,
            droppable: false,
            // selectable: true,
            events: [],
            dateClick: info => {
                let start = info.dateStr;
                const TARGET_EVENT = calendar.getEvents().filter(item => item.startStr == start);
                if (TARGET_EVENT.length > 0)
                    TARGET_EVENT.forEach(item => item.remove());
                else {
                    const $lectureId = document.getElementById("lecture_id");
                    const lectureName = Array.from($lectureId.options).filter(item => item.value == $lectureId.value)[0].innerHTML;
                    calendar.addEvent({
                        title: lectureName,
                        start: start,
                        allDay: true,
                        className: "special-schedule-bg",
                    });
                }
            }
        });

        if (SPECIAL_LECTURE_SCHEDULES.length > 0)
            SPECIAL_LECTURE_SCHEDULES.forEach(item => {
                // const START = new Date(`${item.year}-${String(item.month).padStart(2, "0")}-${String(item.day).padStart(2, "0")}`);
                calendar.addEvent({
                    title: item.lecture?.name,
                    start: `${item.year}-${String(item.month).padStart(2, "0")}-${String(item.day).padStart(2, "0")}`,
                    allDay: true,
                    className: "special-schedule-bg",
                })
            });
        calendar.render();
    }

    function handleSubmit() {
        if (!validate())
            return;

        execSubmit();
    }

    function validate() {
        document.querySelectorAll("div.validation-wrap").forEach((item) => item.style.display = "none");
        const $validationDiv = document.querySelector("div.validation-wrap");
        let $validationResult = null;

        const $lectureId = document.getElementById("lecture_id");
        const $startTime = document.getElementById("start_time");
        const $endTime = document.getElementById("end_time");

        if (!$lectureId.value)
            $validationResult = displayValidationForm($validationDiv, "선택되지 않은 항목이 있습니다.", "#validation-div", "div.validation-wrap");
        else if (!$startTime.value)
            $validationResult = displayValidationForm($validationDiv, "선택되지 않은 항목이 있습니다.", "#validation-div", "div.validation-wrap");
        else if (!$endTime.value)
            $validationResult = displayValidationForm($validationDiv, "선택되지 않은 항목이 있습니다.", "#validation-div", "div.validation-wrap");
        else {
            const startTime = new Date();
            startTime.setHours($startTime.value.split(":")[0], $startTime.value.split(":")[1]);

            const endTime = new Date();
            endTime.setHours($endTime.value.split(":")[0], $endTime.value.split(":")[1]);

            if (startTime.getTime() >= endTime.getTime())
                $validationResult = displayValidationForm($validationDiv, "종료 시간이 시작 시간보다 빠르거나 같습니다.", "#validation-div", "div.validation-wrap");
            else {
                if (calendar.getEvents().length < 1)
                    $validationResult = displayValidationForm($validationDiv, "날짜를 선택해주세요.", "#validation-div", "div.validation-wrap");
            }
        }

        if ($validationResult)
            return false;
        else
            return true;
    }

    function execSubmit() {
        const formData = new FormData(document.getElementById("special-lecture-schedule-form"));
        calendar.getEvents().forEach(item => formData.append("schedules[]", item.startStr));

        const URL = route('api.schedule.course-schedule.set-special-lecture', {lectureId: document.getElementById("lecture_id").value});
        edmAjax({
            method: "POST",
            url: URL,
            data: formData,
            callback: response => {
                if (response.status == 200 || response.status == 201) {
                    alertify.alert("알림", "저장이 완료되었습니다.", () => {
                        window.opener.location.reload();
                        window.close();
                    });
                }
                else
                    alertify.alert("Error", "오류가 발생했습니다.");
            },
        });
    }

    async function deleteSchedules() {
        if (await alertifyAsync("알림", "정말 삭제하시겠습니까?")) {
            if (LECTURE_ID) {
                edmAjax({
                    method: "DELETE",
                    url: route("api.schedule.course-schedule.delete-special-lecture", {lectureId: LECTURE_ID}),
                    callback: response => {
                        if (response.status == 200) {
                            alertify.alert("알림", "삭제가 완료되었습니다.", () => {
                                window.opener.location.reload();
                                window.close();
                            });
                        } else
                            alertify.alert("Error", "오류가 발생했습니다.");
                    }
                });
            }
        }
    }
</script>
@endpush