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

@section("header")
@vite([
    'resources/js/domains/common/tomSelect.js',
    'resources/js/domains/common/tomSelectAllCheck.js',
    'resources/js/domains/common/fullCalendar.js',
])
@routes(["product", "schedule"])
<style>
    div.ts-wrapper div.ts-control input {
        height: auto;
    }
</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">
        강좌의 일정을 등록합니다.<br>
        한 번에 1개의 강좌 단위로 등록 가능합니다.
    </p>
    <div class="po-re">
        <div id="schedule-calendar" class="schedule-calendar toggle-sche"></div>
        <div class="before-select" @if($schedules) style="display: none;" @endif>
            아래 항목들을 먼저 선택해 주세요.
        </div>
    </div>

    <!-- 조회조건 -->
    <form id="schedule-form">
        <div class="popup-search-wrap search-form">
            <div class="search-input-wrap full">
                @if (!$isCourseProcess)
                <div class="search-input-row">
                    <div class="input-wrapper">
                        <label for="course_id" class="form-label req">강좌명</label>
                        <!-- validation 항목 활성화시 active-val 클래스 추가 -->
                        <div class="">
                            <select name="course_id" id="course_id" onchange="changeOption(event)" @readonly($course)>
                                <option value="">선택</option>
                                @if ($course)
                                <option value="{{ $course->id }}" selected>{{ $course->name }}</option>
                                @endif
                            </select>
                        </div>
                    </div>
                </div>
                @endif
                <div class="search-input-row">
                    <div class="input-wrapper">
                        <label for="start_time" class="form-label req">시간</label>
                        <div class="popup-input">
                            <input type="time" name="start_time" id="start_time" onchange="changeOption(event)" value="{{ $schedules[0]->start_time ?? '' }}">
                            <span class="btw-bullet">-</span>
                            <input type="time" name="end_time" id="end_time" onchange="changeOption(event)" value="{{ $schedules[0]->end_time ?? '' }}">
                        </div>
                    </div>
                </div>
                @forelse ($schedules ?? [] as $index => $schedule)
                <div class="search-input-row">
                    <div class="input-wrapper">
                        <label for="start_date" class="form-label req">개강</label>
                        <div class="">
                            <input type="date" name="start_dates[]" onchange="changeOption(event)" value="{{ explode(" ", $schedule->start_date)[0] ?? '' }}" @readonly(date("Y-m-d", strtotime($schedule->start_date)) <= date("Y-m-d"))>
                        </div>
                    </div>
                    <div class="input-wrapper">
                        <label for="end_date" class="form-label req">종강</label>
                        <div class="">
                            <input type="date" name="end_dates[]" onchange="changeOption(event)" value="{{ explode(" ", $schedule->end_date)[0] ?? '' }}" @readonly(date("Y-m-d", strtotime($schedule->end_date)) <= date("Y-m-d"))>
                        </div>
                    </div>
                    @if ($index === 0)
                    <button class="button btn-style-1" type="button" onclick="addOption()">추가</button>
                    @elseif (!(date("Y-m-d", strtotime($schedule->start_date)) <= date("Y-m-d")) && !(date("Y-m-d", strtotime($schedule->end_date)) <= date("Y-m-d")))
                    <button class="button btn-style-8" type="button" onclick="deleteOption(event)">삭제</button>
                    @else
                    <button class="button btn-style-8" type="button" disabled>삭제</button>
                    @endif
                </div>
                @empty
                <div class="search-input-row date-wrapper">
                    <div class="input-wrapper">
                        <label for="start_date" class="form-label req">개강</label>
                        <div class="">
                            <input type="date" name="start_dates[]" onchange="changeOption(event)">
                        </div>
                    </div>
                    <div class="input-wrapper">
                        <label for="end_date" class="form-label req">종강</label>
                        <div class="">
                            <input type="date" name="end_dates[]" onchange="changeOption(event)">
                        </div>
                    </div>
                    <button class="button btn-style-1" type="button" onclick="addOption()">추가</button>
                </div>
                @endforelse
            </div>
        </div>
    </form>

    <p class="p-alert">
        수강일이 아닌 날은 상단의 캘린더에서 선택하여 제외 처리해 주세요.
    </p>
    <div id="validation-div" class="mb-3">
        <div class="validation-wrap"><p></p></div>
    </div>
    <div class="text-center">
        @if ($course && count($schedules ?? []) > 0)
        <button class="button btn-style-8" type="button" onclick="deleteSchedules()">삭제</button>
        <button class="button btn-style-1" type="button" onclick="handleSubmit()">저장</button>
        @else
        <button class="button btn-style-8" type="button" onclick="edmPopupOpen({{ Js::from(route('schedule.course-schedule.popup.load')) }}, null)">일정 불러오기</button>
        <button class="button btn-style-1" type="button" onclick="handleSubmit()">등록</button>
        @endif
    </div>
</div>
@endsection

@push("script")
<script>
    const SCHEDULES = {{ Js::from($schedules ?? []) }};
    const COURSE = {{ Js::from($course) }};
    const IS_COURSE_PROCESS = {{ Js::from($isCourseProcess) }};

    let courseIdTomSelect = null;
    let calendar = null;

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

        calendar = new Calendar(document.getElementById("schedule-calendar"), {
            plugins: [dayGridPlugin, momentPlugin, interactionPlugin],
            initialView: 'dayGridMonth',
            // weekends: false,
            headerToolbar: {
                left: 'prev,next',
                center: 'title',
                right: 'today'
            },
            titleFormat: 'YYYY년 MM월',
            buttonText: {today: 'Today',},
            buttonIcons: {},
            editable: false,
            droppable: false,
            selectable: false,
            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 $courseId = document.getElementById("course_id");
                    const courseName = Array.from($courseId.options).filter(item => item.value == $courseId.value)[0]?.innerHTML ?? '수강';
                    calendar.addEvent({
                        title: courseName,
                        start: start,
                        allDay: true,
                        className: "course-schedule-bg",
                    });
                }

            }
        });

        if (SCHEDULES.length > 0) {
            let lastEvent = null;
            SCHEDULES.forEach(SCHEDULE => SCHEDULE.course_schedule_details.forEach((item, index) => lastEvent = calendar.addEvent({
                title: index === 0 ? `[개강일] ${SCHEDULE.course.name}` : SCHEDULE.course.name,
                start: item.target_date,
                allDay: true,
                className: "course-schedule-bg",
            })));

            if (lastEvent)
                lastEvent.setProp("title", `[종강일] ${COURSE.name}`);
        }

        calendar.render();
        fitWindowSize();
    });

    function changeOption(e) {
        const $beforeSelect = document.querySelector("div.before-select");
        if ($beforeSelect.style.display != "none") {
            let isCompleted = true;

            const $courseId = document.getElementById("course_id");
            if (!IS_COURSE_PROCESS) {
                if (!$courseId.value)
                    isCompleted = false;
            }

            const $startTime = document.getElementById("start_time");
            if (!$startTime.value)
                isCompleted = false;

            const $endTime = document.getElementById("end_time");
            if (!$endTime.value)
                isCompleted = false;

            const startDates = document.getElementsByName("start_dates[]");
            if (startDates.length < 1)
                isCompleted = false;
            else
                startDates.forEach(item => !(item.value) ? isCompleted = false : 1);

            const endDates = document.getElementsByName("end_dates[]");
            if (endDates.length < 1)
                isCompleted = false;
            else
                endDates.forEach(item => !(item.value) ? isCompleted = false : 1);

            if (isCompleted) {
                const courseName = Array.from($courseId.options).filter(item => item.value == $courseId.value)[0]?.innerHTML ?? '수강';
                startDates.forEach((item, index) => {
                    const standardDate = new Date(item.value);
                    const endDate = new Date(endDates[index].value);
                    insertCalendarEvents(standardDate, endDate, courseName);
                });
                document.querySelector("div.before-select").style.display = "none";
            }
        } else {
            const $TARGET = e.target;
            if ($TARGET.name == "start_dates[]" || $TARGET.name == "end_dates[]") {
                const $PARENT = $TARGET.closest("div.search-input-row");
                const $START_DATE = $PARENT.querySelector("input[name='start_dates[]']");
                const $END_DATE = $PARENT.querySelector("input[name='end_dates[]']");
                const $COURSE_ID = document.getElementById("course_id");

                if ($START_DATE.value && $END_DATE.value && $COURSE_ID.value) {
                    const defaultStart = new Date($START_DATE.defaultValue);
                    const defaultEnd = new Date($END_DATE.defaultValue);

                    calendar.getEvents().forEach(item => {
                        const itemDate = new Date(item.startStr);
                        if (itemDate >= defaultStart && itemDate <= defaultEnd)
                            item.remove();
                    });

                    const startDate = new Date($START_DATE.value);
                    const endDate = new Date($END_DATE.value);
                    const courseName = Array.from($COURSE_ID.options).filter(item => item.value == $COURSE_ID.value)[0]?.innerHTML ?? '수강';
                    insertCalendarEvents(startDate, endDate, courseName);
                }

            }
        }
    }

    function insertCalendarEvents(startDate, endDate, courseName = '') {
        let i = 1;
        let event = null;
        while (startDate <= endDate) {
            if (startDate.getDay() !== 0 && startDate.getDay() !== 6) {
                const title = i === 1 ? `[개강일] ${courseName}` : `${courseName}`;
                event = calendar.addEvent({
                    title: title,
                    start: startDate,
                    allDay: true,
                    className: "course-schedule-bg",
                });
                i++;
            }
            startDate.setDate(startDate.getDate() + 1);
        }

        if (event)
            event.setProp("title", `[종강일] ${courseName}`);
    }

    function addOption() {
        const $newOption = document.createElement("div");
        $newOption.classList.add("search-input-row");
        $newOption.innerHTML =
        `<div class="input-wrapper">
            <label for="start_date" class="form-label req">개강</label>
            <div class="">
                <input type="date" name="start_dates[]" onchange="changeOption(event)">
            </div>
        </div>
        <div class="input-wrapper">
            <label for="end_date" class="form-label req">종강</label>
            <div class="">
                <input type="date" name="end_dates[]" onchange="changeOption(event)">
            </div>
        </div>
        <button class="button btn-style-8" type="button" onclick="deleteOption(event)">삭제</button>`;

        const $TARGET = document.querySelector("div.search-input-wrap");
        $TARGET.appendChild($newOption);

        return $newOption;
    }

    function deleteOption(e) {
        const $root = e.target.closest("div.search-input-row");

        const $startDate = $root.querySelector("input[name='start_dates[]']");
        const $endDate = $root.querySelector("input[name='end_dates[]']");

        if ($startDate.value && $endDate.value) {
            const startDate = (new Date($startDate.value)).getTime();
            const endDate = (new Date($endDate.value)).getTime();

            calendar.getEvents().forEach(item => {
                const itemDate = (new Date(item.startStr)).getTime();
                if (itemDate >= startDate && itemDate <= endDate)
                    item.remove();
            });
        }

        $root.remove();
    }

    async function deleteSchedules() {
        if (!(await alertifyAsync("알림", "전체 일정을 삭제 하시겠습니까?")))
            return;

        if (COURSE) {
            edmAjax({
                method: "DELETE",
                url: route("api.schedule.course-schedule.delete", {courseId: COURSE.id}),
                callback: response => {
                    if (response.status == 200 || response.status == 201) {
                        alertify.alert("알림", "저장이 완료되었습니다.", () => {
                            window.opener.location.reload();
                            window.close();
                        });
                    }
                    else
                        alertify.alert("Error", "오류가 발생했습니다.");
                },
            });
        }
    }

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

        execSubmit();
    }

    function execSubmit() {
        if (IS_COURSE_PROCESS) {
            const data = {
                "startDates": Array.from(document.getElementsByName("start_dates[]")).map(item => item.value),
                "endDates": Array.from(document.getElementsByName("end_dates[]")).map(item => item.value),
                "startTime": document.getElementById("start_time").value,
                "endTime": document.getElementById("end_time").value,
                "schedules": calendar.getEvents(),
            };

            window.opener.addSchedulePostProcess(data);
            window.close();
        } else {
            const URL = route('api.schedule.course-schedule.set', {courseId: document.getElementById("course_id").value});
            const formData = new FormData(document.getElementById("schedule-form"));
            calendar.getEvents().forEach(item => formData.append("scheduleDetails[]", item.startStr));

            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", "오류가 발생했습니다.");
                },
            });
        }
    }

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

        const $courseId = document.getElementById("course_id");
        const $startTime = document.getElementById("start_time");
        const $endTime = document.getElementById("end_time");
        const startDates = document.getElementsByName("start_dates[]");
        const endDates = document.getElementsByName("end_dates[]");

        if (!IS_COURSE_PROCESS) {
            if (!$courseId.value)
                $validationResult = displayValidationForm($validationDiv, "선택되지 않은 항목이 있습니다.", "#validation-div", "div.validation-wrap");
        }
        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 {
                startDates.forEach(($startDate, index) => {
                    const $endDate = endDates[index];
                    if (!$startDate.value || !$endDate.value) {
                        $validationResult = displayValidationForm($validationDiv, "선택되지 않은 항목이 있습니다.", "#validation-div", "div.validation-wrap");
                        return true;
                    }

                    const today = new Date();
                    const startDate = new Date($startDate.value);
                    if (!$startDate.readOnly && today.getTime() >= startDate.getTime()) {
                        $validationResult = displayValidationForm($validationDiv, "개강일은 익일 이후로만 설정 가능합니다.", "#validation-div", "div.validation-wrap");
                        return true;
                    }

                    const endDate = new Date($endDate.value);
                    if (startDate.getTime() >= endDate.getTime()) {
                        $validationResult = displayValidationForm($validationDiv, "종갈일이 개강일보다 빠릅니다.", "#validation-div", "div.validation-wrap");
                        return true;
                    }
                });

                calendar.getEvents().forEach(event => {
                    const eventDate = new Date(event.startStr);
                    let includedCount = 0;

                    startDates.forEach(($startDate, index) => {
                        const startDate = new Date($startDate.value);
                        const endDate = new Date(endDates[index].value);

                        if (eventDate.getTime() >= startDate.getTime() && eventDate.getTime() <= endDate.getTime())
                            includedCount++;
                    });

                    if (includedCount === 0) {
                        $validationResult = displayValidationForm($validationDiv, "강좌 일정에 포함되지 않은 강의날이 있습니다.", "#validation-div", "div.validation-wrap");
                        return true;
                    } else if (includedCount > 1) {
                        $validationResult = displayValidationForm($validationDiv, "같은 일시에 등록된 강좌 일정이 있습니다.", "#validation-div", "div.validation-wrap");
                        return true;
                    }
                });
            }
        }

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

    }

    function syncSchedules(SCHEDULES) {
        calendar.getEvents().forEach(item => item.remove());

        SCHEDULES.forEach((SCHEDULE, index) => {
            let lastEvent = null;
            SCHEDULE.course_schedule_details.forEach((item, index) => {
                lastEvent = calendar.addEvent({
                    title: index === 0 ? `[개강일] ${SCHEDULE.course.name}` : SCHEDULE.course.name,
                    start: item.target_date,
                    allDay: true,
                    className: "course-schedule-bg",
                });
            });

            if (lastEvent)
                lastEvent.setProp("title", `[종강일] ${SCHEDULE.course.name}`);

            let $DATE_WRAPPER = null;
            if (index !== 0)
                $DATE_WRAPPER = addOption();
            else
                $DATE_WRAPPER = document.querySelector("div.date-wrapper");

            $DATE_WRAPPER.querySelector("input[name='start_dates[]']").value = SCHEDULE.start_date.split(" ")[0];
            $DATE_WRAPPER.querySelector("input[name='end_dates[]']").value = SCHEDULE.end_date.split(" ")[0];

            if (index === 0) {
                document.getElementById("start_time").value = SCHEDULE.start_time;
                document.getElementById("end_time").value = SCHEDULE.end_time;
                document.querySelector("div.before-select").style.display = "none";
            }
        });
    }

</script>
@endpush