@extends("domains.common.layouts.layout")
@section("header")
@vite([
    'resources/js/domains/common/toastGrid.js',
    'resources/js/domains/common/fullCalendar.js',
    'resources/js/domains/product/composed.js',
    'resources/js/domains/product/gridColumns.js',
])
@endsection

@php
    $SERVICE_NAME = App\Domains\Product\Infrastructure\Model\Service::ACADEMY == $course->service_id ? "어학원" : "인강";
    $SERVICE_ENGLISH_NAME = App\Domains\Product\Infrastructure\Model\Service::ACADEMY == $course->service_id ? "academy" : "ielts";
@endphp
@section("main-content")
    <div class="container-fluid detail">

        <!-- start page title -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box">
                    <h1>{{ $SERVICE_NAME }} 강좌 상세</h1>
                    <ul class="page-wayfinding">
                        <li onclick="window.location.href='{{ route('product.course.list') }}'">강좌 관리</li>
                        <li>{{ $SERVICE_NAME }} 강좌 상세</li>
                    </ul>
                    <div class="page-btn-wrap">
                        <button class="button btn-style-2" onclick="window.location.href='{{ route('product.course.list') }}'">목록</button>
                        <button class="button btn-style-6" onclick="window.location.href='{{ route('product.course.copy', ['service' => $SERVICE_ENGLISH_NAME, 'id' => $course->id]) }}'">복제</button>
                        <button class="button btn-style-1" onclick="handleSubmit()">저장</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- end page title -->

        <div @class([
            "row",
            "detail-con-wrap" => $SERVICE_ENGLISH_NAME == "academy",
            "detail-con-wrap2" => $SERVICE_ENGLISH_NAME == "ielts",
        ])>
            <div class="detail-con card">
                <form id="courseForm" class="set-user-form" >
                    <input type="hidden" name="id" value="{{ $course->id }}">
                    <input type="hidden" name="service_id" value="{{ $course->service_id }}">
                    <div class="card-body">
                        <div class="flex-box">
                            {{-- 어학원 기본정보 --}}
                            @if ($SERVICE_ENGLISH_NAME == "academy")
                            <div class="w50">
                                <h2 class="detail-title">강좌 구분</h2>
                                <div class="detail-input">
                                    <dl class="input-wrapper">
                                        <dt>강좌 번호</dt>
                                        <dd><span>{{ $course->id }}</span></dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt class="req">활성 구분</dt>
                                        <dd>
                                            <div class="form-check form-check-inline ">
                                                <input type="radio" id="customRadio1" name="activated" class="form-check-input" value="1" @checked($course->activated == 1)>
                                                <label class="form-check-label" for="customRadio1">활성</label>
                                            </div>
                                            <div class="form-check form-check-inline ">
                                                <input type="radio" id="customRadio2" name="activated" class="form-check-input" value="0" @checked($course->activated === 0)>
                                                <label class="form-check-label" for="customRadio2">비활성</label>
                                            </div>
                                        </dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt class="req">모듈</dt>
                                        <dd>
                                            {{ $course->module->name }}
                                        </dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt class="req">썸네일</dt>
                                        <dd class="dblock">
                                            <div class="detail-img-btn-wrap">
                                                <button class="button btn-style-1 w100" type="button" onclick="document.getElementById('thumbnail').click()">찾기</button>
                                                <input  type="file" id="thumbnail" name="thumbnail" accept="image/*" style="display: none;" onchange="thumbnailChange(event)"/>
                                            </div>
                                            <div class="thumbnail-img mb-1">
                                                <button class="btn-delete" type="button" onclick="deleteThumbnail()">이미지 삭제</button>
                                                <img id="thumbnail_image" alt=""
                                                @if ($course?->s3_key)
                                                src="{{ app(\S3Helper::class)->getDownloadPresignedUrl($course?->s3_key) }}"
                                                @endif
                                                >
                                            </div>
                                            <div class="thumbnail-img-notice">
                                                * 파일 형식 : jpg, jpeg, png<br>* 권장 이미지 사이즈 : 512*344
                                            </div>
                                        </dd>
                                        <dd class="validation-wrap">
                                            <p></p>
                                        </dd>
                                    </dl>
                                </div>
                            </div>
                            <div class="w50">
                                <h2 class="detail-title">기본 정보</h2>
                                <div class="detail-input">
                                    <dl class="input-wrapper">
                                        <dt class="req">강좌명</dt>
                                        <dd>
                                            <div class="flex-1">
                                                <input type="text" class="form-control" id="name" name="name" placeholder="첨삭명을 입력해 주세요." value="{{ $course->name }}">
                                            </div>
                                        </dd>
                                        <dd class="validation-wrap">
                                            <p></p>
                                        </dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt>간략 소개</dt>
                                        <dd>
                                            <div class="flex-1">
                                                <input type="text" class="form-control" id="description" name="description" placeholder="" value="{{ $course->description }}">
                                            </div>
                                        </dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt>강좌 대상</dt>
                                        <dd>
                                            <div class="flex-1">
                                                <textarea name="target" id="target" cols="30" rows="10">{{ $course->target }}</textarea>
                                            </div>
                                        </dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt>강좌 가이드</dt>
                                        <dd>
                                            <div class="flex-1">
                                                <textarea name="guide" id="guide" cols="30" rows="10">{{ $course->guide }}</textarea>
                                            </div>
                                        </dd>
                                    </dl>
                                </div>
                            </div>
                            @endif
                            {{-- 인강 기본정보 --}}
                            @if ($SERVICE_ENGLISH_NAME == "ielts")
                            <div class="w100">
                                <h2 class="detail-title">강좌 정보</h2>
                                <div class="detail-input">
                                    <dl class="input-wrapper">
                                        <dt>강좌 번호</dt>
                                        <dd><span>{{ $course->id }}</span></dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt class="req">활성 구분</dt>
                                        <dd>
                                            <div class="form-check form-check-inline ">
                                                <input type="radio" id="customRadio1" name="activated" class="form-check-input" value="1" @checked($course->activated == 1)>
                                                <label class="form-check-label" for="customRadio1">활성</label>
                                            </div>
                                            <div class="form-check form-check-inline ">
                                                <input type="radio" id="customRadio2" name="activated" class="form-check-input" value="0" @checked($course->activated === 0)>
                                                <label class="form-check-label" for="customRadio2">비활성</label>
                                            </div>
                                        </dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt>모듈</dt>
                                        <dd>
                                            <div>
                                                {{ $course->module->name }}
                                            </div>
                                        </dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt class="req">강좌명</dt>
                                        <dd>
                                            <div class="flex-1">
                                                <input type="text" class="form-control" id="name" name="name" placeholder="" value="{{ $course->name }}">
                                            </div>
                                        </dd>
                                    </dl>
                                </div>
                            </div>
                            @endif
                        </div>
                    </div>
                </form>
            </div>

            {{-- 어학원 학사일정 --}}
            @if ($SERVICE_ENGLISH_NAME == "academy")
            <div class="detail-con card">
                <div class="card-body">
                    <h2 class="detail-title">
                        강좌 일정
                        <div class="detail-calendar-text">
                            <dl>
                                <dt><strong class="text-primary schedule-month">{{ date('m') }}</strong>월 수업</dt>
                                <dd>총 <strong class="text-primary course-schedule-count">N</strong>회</dd>
                            </dl>
                            <dl>
                                <dt>모의고사</dt>
                                <dd>총 <strong class="text-primary test-schedule-count">N</strong>회</dd>
                            </dl>
                        </div>
                    </h2>
                    <div id="schedule-calendar" class="schedule-calendar"></div>
                </div>
            </div>
            @endif
        </div>

        {{-- 어학원 커리큘럼 --}}
        @if ($SERVICE_ENGLISH_NAME == "academy")
        <div class="row">
            <div class="card">
                <div class="card-body">
                    <h2 class="detail-title req">과목별 강사 및 커리큘럼</h2>
                    <dl class="validation-wrapper">
                        <div class="grid">
                            @php
                            $subjectNames = [
                                "L", "R", "S", "S", "WT1", "WT2"
                            ];
                            @endphp

                            @foreach ($subjectNames as $key => $subjectName)
                                @php
                                    $tmpCourseTeacher = $course?->CourseTeachers->where("subject_id", $subjects[$subjectName][0]?->id)->groupBy("teacher_id") ?? [];
                                @endphp
                                @if ($key === 0 || $key === (count($subjectNames) / 2))
                                <div class="grid-row" style="align-items: flex-start; margin-bottom: 10px;">
                                @endif
                                    <div class="grid-col course-teacher-wrapper">
                                        <dl class="input-wrapper">
                                            <dt>{{ $subjects[$subjectName][0]?->fullname ?? "" }}</dt>
                                            <dd>
                                                <select class="form-select w120" name="teacher_id" data-subject_id="{{ $subjects[$subjectName][0]?->id ?? '' }}">
                                                    <option value="">선택</option>
                                                    @foreach ($teachers as $teacher)
                                                    <option value="{{ $teacher->id }}" @selected(isset($tmpCourseTeacher[$teacher->id]))>{{ $teacher->name }}</option>
                                                    @endforeach
                                                </select>
                                            </dd>
                                        </dl>
                                        <div class="input-wrapper">
                                            <textarea id="" cols="30" rows="10" name="content" placeholder="한 줄에 공백 포함 40자, 최대 3줄까지 입력해 주세요.">{{ count($tmpCourseTeacher) > 0 ? $tmpCourseTeacher->first()[0]->content : '' }}</textarea>
                                        </div>
                                        <dd class="validation-wrap" style="min-height: 1rem;">
                                            <p></p>
                                        </dd>
                                    </div>
                                @if (($key + 1) === (count($subjectNames) / 2) || $key == (count($subjectNames) - 1))
                                </div>
                                @endif
                            @endforeach
                        </div>
                        <dd class="validation-wrap whole">
                            <p></p>
                        </dd>
                    </dl>
                </div>
            </div>
        </div>
        @endif

        <div class="row">
            <div class="card">
                <div class="card-body">
                    <div class="add-list-wrapper">
                        <dl>
                            <h2 class="detail-title">
                                구성 강의 총&nbsp;<strong class="point-color add-list-total">0</strong>건
                                <span class="ml20">총 영상 길이 <strong class="point-color add-list-duration-total">00:00:00</strong></span>
                                <div class="button-wrap">
                                    <button class="button btn-style-8" type="button" onclick="removeCheckedRows(lectureGrid)">선택 삭제</button>
                                    <button class="button btn-style-1" type="button" onclick="edmPopupOpen('{{ route('product.lecture.popup.add-lecture') ?? '' }}', null)">강의 추가</button>
                                </div>
                            </h2>
                            <div id="lecture-grid"></div>
                            <dd class="validation-wrap">
                                <p></p>
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="card">
                <div class="card-body">
                    <div class="add-list-wrapper">
                        <dl>
                            <h2 class="detail-title">
                                구성 교재 &nbsp;<strong class="point-color add-list-total">0</strong>건
                                <div class="button-wrap">
                                    <button class="button btn-style-8" type="button" onclick="removeCheckedRows(textbookGrid)">선택 삭제</button>
                                    <button class="button btn-style-1" type="button" onclick="edmPopupOpen('{{ route('product.textbook.popup.add-textbook') ?? '' }}', null)">교재 추가</button>
                                </div>
                            </h2>
                            <div id="textbook-grid"></div>
                            <dd class="validation-wrap">
                                <p></p>
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="card">
                <div class="card-body">
                    <h2 class="detail-title">
                        포함 상품
                    </h2>

                    <table class="default-table">
                        <colgroup>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col width="500">
                        </colgroup>
                        <thead>
                            <tr>
                                <th scope="col">번호</th>
                                <th scope="col">등록 일시</th>
                                <th scope="col">서비스 구분</th>
                                <th scope="col">상품 구분</th>
                                <th scope="col">모듈</th>
                                <th scope="col">상품명</th>
                            </tr>
                        </thead>
                        <tbody style="text-align: center">
                            @forelse ($course->getIncludedProducts() as $product)
                            <tr>
                                <td>1</td>
                                <td>2023.06.16<br>00:00:00</td>
                                <td>인강</td>
                                <td>판매</td>
                                <td>Academic</td>
                                <td class="text-left">
                                    <a href="#none">%강좌명%</a>
                                </td>
                            </tr>
                            @empty
                            <tr><td colspan="6">No data.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="card">
                <div class="card-body">
                    <h2 class="detail-title">
                        변경 히스토리
                    </h2>

                    <table class="default-table">
                        <colgroup>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                        </colgroup>
                        <thead>
                            <tr>
                                <th scope="col">번호</th>
                                <th scope="col">일시</th>
                                <th scope="col">활성 구분</th>
                                <th scope="col">썸네일</th>
                                <th scope="col">강좌명</th>
                                <th scope="col">강좌 일정</th>
                                <th scope="col">과목별 강사</th>
                                <th scope="col">담당자</th>
                                <th scope="col">자세히 보기</th>
                            </tr>
                        </thead>
                        <tbody style="text-align: center">
                            @forelse ($course->getParsingLogs() as $productLog)
                            <tr>
                                <td>{{ $productLog->id }}</td>
                                <td>
                                    @if (isset($productLog->created_at))
                                        {{ explode(" ", $productLog->created_at)[0] }} <br>
                                        {{ explode(" ", $productLog->created_at)[1] }}
                                    @else
                                        -
                                    @endif
                                </td>
                                <td>
                                    @if ($productLog->activated == 1)
                                        활성
                                    @else
                                        비활성
                                    @endif
                                </td>
                                <td class="text-left">{{ last(explode('/', $productLog?->s3_key ?? '')) ?? '-' }}</td>
                                <td class="text-left">{{ $productLog->name }}</td>
                                <td>변경/삭제</td>
                                <td>
                                    @forelse ($productLog?->courseTeachers ?? [] as $courseTeacher)
                                    {{ $courseTeacher->subject->name }} - {{ $courseTeacher->user->name }}<br>
                                    @empty
                                    -
                                    @endforelse
                                </td>
                                <td>{{ $productLog->created_by }}</td>
                                <td>
                                    <a href="#none">자세히 보기</a>
                                </td>
                            </tr>
                            @empty
                            <tr><td colspan="9">No data.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- end row -->
    </div>

@endsection

@push("script")
<script>
    const COURSE = {{ Js::from($course) }};
    const TEST_SCHEDULES = {{ Js::from($testSchedules) }};
    const courseId = {{ Js::from($course->id) }};
    const service = {{ Js::from($SERVICE_ENGLISH_NAME) }};
    const lectures = {{ Js::from(App\Domains\Product\Infrastructure\Model\Lecture::parseComposedGridData($course->lectures)) }};
    const textbooks = {{ Js::from($course->textbooks) }};

    let lectureGrid = null;
    let textbookGrid = null;
    let courseSchedules = null;

    window.addEventListener("load", () => {
        lectureGrid = new Grid({
            el: document.getElementById("lecture-grid"),
            data: lectures,
            draggable: true,
            scrollX: false,
            scrollY: false,
            contextMenu: null,
            columnOptions: {
                resizable: true,
            },
            rowHeaders: [
                {
                    type: 'checkbox'
                }
            ],
            columns: LECTURE_COLUMNS,
        });

        textbookGrid = new Grid({
            el: document.getElementById("textbook-grid"),
            data: textbooks,
            draggable: true,
            scrollX: false,
            scrollY: false,
            contextMenu: null,
            columnOptions: {
                resizable: true,
            },
            rowHeaders: [
                {
                    type: 'checkbox'
                }
            ],
            columns: TEXTBOOK_COLUMNS,
        });

        countAddListRows(lectureGrid);
        countAddListRows(textbookGrid);
        calculateListTotalDuration(lectureGrid);
        calendarInit();
    });

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

        alertify.confirm("알림", "변경 내용을 저장하시겠습니까?", () => execSubmit(), () => {});
    }

    async function execSubmit() {
        const $formElem = document.getElementById("courseForm");
        const formData = new FormData($formElem);

        // 강의
        const lectures = lectureGrid.getData();
        if (lectures.length > 0)
            lectures.forEach(item => formData.append("lectures[]", item.id));

        // 교재
        const textbooks = textbookGrid.getData();
        if (textbooks.length > 0)
            textbooks.forEach(item => formData.append("textbooks[]", item.id));

        // 선생님 및 커리큘럼
        if (service == "academy") {
            const $teacherElems = Array.from(document.querySelectorAll("select[name=teacher_id]")).filter(item => item.value);
            const $curriculumElems = [];
            $teacherElems.forEach(item => {
                const teacher = {
                    teacher_id: item.value,
                    subject_id: item.dataset.subject_id,
                    content: item.closest("div").querySelector("textarea").value,
                };
                formData.append(`teachers[]`, JSON.stringify(teacher));
            });
        }

        const callback = (response) => {
            if (response.status == 200 || response.status == 201)
                alertify.alert("알림", "완료되었습니다.", () => {
                    location.reload();
                });
            else
                alertify.alert('Error', '오류가 발생했습니다.');
        };

        let setUrl = "{{ route('product.course.set', $course->id) }}";
        edmAjax({
            method: "POST",
            url: setUrl,
            data: formData,
            callback: callback
        });
    }

    async function validate() {
        document.querySelectorAll("dd.validation-wrap").forEach((item) => item.style.display = "none");
        let validationWrap = null;

        // 강좌명
        const $nameElem = document.getElementById('name');
        const name = $nameElem?.value;
        if (!name)
            validationWrap = displayValidationForm($nameElem, "입력된 내용이 없습니다.");
        else if (!(await validateName(name)))
            validationWrap = displayValidationForm($nameElem, "동일한 강좌명이 존재합니다.");

        // 어학원일 때만 진행
        if (service == "academy") {
            // 썸네일
            const $img = document.getElementById('thumbnail_image');
            const $thumbnail = document.getElementById('thumbnail');
            const thumbnail = $thumbnail?.value;
            if (!$img.src && !thumbnail)
                validationWrap = displayValidationForm(document.getElementById('thumbnail'), "등록된 파일이 없습니다.");

            // 과목별 강사 및 커리큘럼
            const $teacherElems = Array.from(document.querySelectorAll("select[name=teacher_id]")).filter(item => item.value);
                // 구성된 선생님이 있는지 확인
            if ($teacherElems.length < 1)
                validationWrap = displayValidationForm(document.querySelector("select[name=teacher_id]"), "선택된 강사가 없습니다.", "dl.validation-wrapper", "dd.validation-wrap.whole");
            else {
                const $curriculumElems = [];
                $teacherElems.forEach(item => $curriculumElems.push(item.closest("div").querySelector("textarea")));
                const $unfilledCurriculumElems = $curriculumElems.filter(item => !item.value);
                // 커리큘럼이 채워져있는지 확인
                if ($unfilledCurriculumElems.length > 0)
                    $unfilledCurriculumElems.forEach(item => validationWrap = displayValidationForm(item, "입력된 내용이 없습니다.", "div.course-teacher-wrapper"));
                else {
                    // 1줄에 40자, 최대 3줄 확인
                    $curriculumElems.forEach(item => {
                        const values = item.value.split("\n");
                        if (values.length > 3)
                            validationWrap = displayValidationForm(item, "3줄을 초과하여 작성할 수 없습니다.", "div.course-teacher-wrapper");
                        else {
                            const unverifiedValues = values.filter(value => value.length > 40);
                            if (unverifiedValues.length > 0)
                                validationWrap = displayValidationForm(item, "1줄에 40자를 초과하여 작성할 수 없습니다.", "div.course-teacher-wrapper");
                        }
                    });
                }
            }
        }

        if (validationWrap)
            return false;
        else
            return true;
    }

    async function validateName(name) {
        const url = "{{ route('api.product.course.by-name') }}";
        const params = {
            "id": courseId,
            "query": name,
            "strict": true,
        };

        let result = false;
        await edmAjax({
            method: "GET",
            url: url,
            data: params,
            isBlock: false,
            callback: response => {
                if (response.status == 200 && response.data.length < 1)
                    result = true;
            }
        });

        return result;
    }

    function thumbnailChange(e) {
        const $thumbnailImageElem = document.getElementById("thumbnail_image");
        const imageSource = URL.createObjectURL(e.target.files[0]);
        $thumbnailImageElem.src = imageSource;
        URL.revokeObjectURL(e.target.files[0]);
    }

    function deleteThumbnail() {
        if (!courseId) {
            const $thumbnailElem = document.getElementById("thumbnail");
            if ($thumbnailElem)
                $thumbnailElem.value = null;

            const $imageElem = document.getElementById("thumbnail_image");
            if ($imageElem)
                $imageElem.src = "";
        } else {
            alertify.confirm("알림", "정말 삭제하시겠습니까?", () => {
                const url = {{ Js::from(route('api.product.course.delete-thumbnail')) }};
                edmAjax({
                    method: "DELETE",
                    url: url,
                    data: {
                        id: courseId,
                    },
                    callback: (response) => {
                        if (response.data)
                            alertify.alert("알림", "완료되었습니다.", () => location.reload());
                        else
                            alertify.alert("알림", "오류가 발생했습니다.");
                    },
                    errorCallback: (error) => {
                        alertify.alert("알림", "오류가 발생했습니다.");
                    }
                });
            }, () => 1);
        }
    }

    function addLecture(grid) {
        appendSelectedRow(grid, lectureGrid);
    }

    function addTextbook(grid) {
        appendSelectedRow(grid, textbookGrid);
    }

    function calendarInit() {
        calendar = new Calendar(document.getElementById("schedule-calendar"), {
            plugins: [dayGridPlugin, momentPlugin],
            initialView: 'dayGridMonth',
            headerToolbar: {
                left: 'prev,next',
                center: 'title',
                right: 'today'
            },
            titleFormat: 'YYYY년 MM월',
            buttonText: {today: 'Today',},
            buttonIcons: {},
            editable: false,
            droppable: false,
            selectable: false,
            events: [],
        });

        TEST_SCHEDULES.forEach(item => {
            calendar.addEvent({
                title: "모의고사",
                start: item.register_date,
                allDay: true,
                groupId: "모의고사",
                className: "test-schedule-bg",
            });
        });

        const data = {
            "startDates": COURSE.course_schedules.map(courseSchedule => courseSchedule.start_date),
            "endDates": COURSE.course_schedules.map(courseSchedule => courseSchedule.end_date),
            "startTime": COURSE.course_schedules[0]?.start_time ?? '',
            "endTime": COURSE.course_schedules[0]?.end_time ?? '',
            "schedules": [],
        };
        COURSE.course_schedules.forEach(courseSchedule => courseSchedule.course_schedule_details.forEach((detail, index) => data["schedules"].push({
            title: (index === 0 ? '[개강]' : (index + 1) == courseSchedule.course_schedule_details.length ? '[종강]' : '') + "수강",
            start: detail.target_date,
            allDay: true,
            groupId: "수강",
            className: "course-schedule-bg",
        })));

        addSchedulePostProcess(data);
        calendar.gotoDate(new Date());
        calendar.render();

        calendar.el.querySelector("button.fc-next-button").addEventListener("click", e => updateScheduleCount());
        calendar.el.querySelector("button.fc-prev-button").addEventListener("click", e => updateScheduleCount());
        calendar.el.querySelector("button.fc-today-button").addEventListener("click", e => updateScheduleCount());
    }

    function addSchedulePostProcess(data) {
        courseSchedules = data;
        calendar.getEvents().forEach(item => item.groupId == "수강" ? item.remove() : '');
        (data["schedules"] ?? []).forEach(item => calendar.addEvent(item));
        updateScheduleCount();
    }

    function updateScheduleCount() {
        const MONTH = calendar.getDate().getMonth();
        document.querySelector("strong.schedule-month").innerHTML = MONTH + 1;
        document.querySelector("strong.course-schedule-count").innerHTML = calendar.getEvents().filter(item => item.groupId == "수강" && MONTH == (new Date(item.startStr)).getMonth()).length;
        document.querySelector("strong.test-schedule-count").innerHTML = calendar.getEvents().filter(item => item.groupId == "모의고사" && MONTH == (new Date(item.startStr)).getMonth()).length;
    }

</script>
@endpush