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

@section("header")
@routes(["schedule"])
@vite([
    'resources/js/domains/common/fullCalendar.js'
])
<style>
    .test-schedule-bg {
        background-color: orange;
        border-color: orange;
    }
</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="schedule-calendar toggle-sche"></div>
    <!-- 조회조건 -->
    <form id="test-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="" class="form-label req">모의고사 구분</label>
                        <!-- validation 항목 활성화시 active-val 클래스 추가 -->
                        <div class="popup-input">
                            <span class="form-check form-check-inline">
                                <input type="radio" id="type0" name="type" value="CDT"
                                    class="form-check-input" @checked(!$testSchedule || $testSchedule?->type == "CDT") onchange="changeType(event)">
                                <label class="form-check-label" for="type0">CDT 모의고사</label>
                            </span>
                            <span class="form-check form-check-inline">
                                <input type="radio" id="type1" name="type" value="PBT"
                                    class="form-check-input" @checked($testSchedule && $testSchedule?->type == "PBT") onchange="changeType(event)">
                                <label class="form-check-label" for="type1">PBT 모의고사</label>
                            </span>
                        </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="{{ $testSchedule?->start_time ?? '' }}"/>
                            <span class="btw-bullet">-</span>
                            <input type="time" name="end_time" id="end_time" value="{{ $testSchedule?->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 ($testSchedule)
        <button class="button btn-style-8" type="button" onclick="deleteSchedule()">삭제</button>
        @endif
        <button class="button btn-style-1" type="button" onclick="handleSubmit()">등록</button>
    </div>
</div>
@endsection

@push("script")
<script>
    const SCHEDULE = {{ Js::from($testSchedule) }};
    let calendar = null;

    window.addEventListener("load", () => {
        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,
            events: [],
            dateClick: info => {
                calendar.getEvents().forEach(item => item.remove());
                calendar.addEvent({
                    title: (document.querySelector("input[name='type']:checked").value ?? '') + " 모의고사",
                    start: info.dateStr,
                    allDay: true,
                    className: "test-schedule-bg",
                });
            }
        });

        if (SCHEDULE) {
            calendar.addEvent({
                title: (document.querySelector("input[name='type']:checked").value ?? '') + " 모의고사",
                start: SCHEDULE.register_date,
                allDay: true,
                className: "test-schedule-bg",
            });
            calendar.gotoDate(SCHEDULE.register_date);
        }

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

    function changeType(e) {
        calendar.getEvents().forEach(item => item.setProp("title", `${e.target.value} 모의고사`));
    }

    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 $TYPE = document.querySelector("input[name='type']:checked");
        const $startTime = document.getElementById("start_time");
        const $endTime = document.getElementById("end_time");
        if (!$TYPE || !$TYPE.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("test-schedule-form"));
        const schedule = calendar.getEvents()[0];
        if (schedule) {
            const SPLIT_DATA = schedule.startStr.split("-");
            formData.append("register_date", schedule.startStr);
            formData.append("year", SPLIT_DATA[0]);
            formData.append("month", SPLIT_DATA[1]);
            formData.append("day", SPLIT_DATA[2]);
        }

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

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