@extends("common.layout-popup")

@section("page-title", "강좌 일정 등록")

@section("header")

@endsection

@section("main-content")
<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