@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

@section("main-content")
    <div class="container-fluid detail">

        <!-- start page title -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box">
                    <h1>
                        @if ($service == "academy")
                        어학원
                        @elseif ($service == "ielts")
                        인강
                        @endif
                        강좌 등록
                    </h1>
                    <ul class="page-wayfinding">
                        <li onclick="window.location.href='{{ route('product.course.list') }}'">강좌 관리</li>
                        <li>
                            @if ($service == "academy")
                            어학원
                            @elseif ($service == "ielts")
                            인강
                            @endif
                            강좌 등록
                        </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-1" onclick="handleSubmit()">등록</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- end page title -->


        <div @class([
            "row",
            "detail-con-wrap" => $service == "academy",
            "detail-con-wrap2" => $service == "ielts",
        ])>
            <div class="detail-con card">
                <form id="courseForm" class="set-user-form">
                    <input type="hidden" name="service_id" value="{{ $service == "ielts" ? 1 : 2 }}">
                    <div class="card-body">
                        <div class="flex-box">
                            {{-- 어학원 --}}
                            @if ($service == "academy")
                            <div class="w50">
                                <h2 class="detail-title">강좌 구분</h2>
                                <div class="detail-input">
                                    <dl class="input-wrapper">
                                        <dt>강좌 번호</dt>
                                        <dd><span>-</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>
                                        <dd class="validation-wrap">
                                            <p></p>
                                        </dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt class="req">모듈</dt>
                                        <dd>
                                            @foreach ($modules as $key => $module)
                                            <div class="form-check form-check-inline ">
                                                <input type="radio" id="module{{ $key }}" name="module_id" class="form-check-input" value="{{ $module->id }}" @checked($course?->module_id == $module->id)>
                                                <label class="form-check-label" for="module{{ $key }}">{{ $module->name }}</label>
                                            </div>
                                            @endforeach
                                        </dd>
                                        <dd class="validation-wrap">
                                            <p></p>
                                        </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>
                            {{-- 어학원 종료 --}}
                            {{-- 인강 --}}
                            @elseif ($service == "ielts")
                            <div class="w100">
                                <h2 class="detail-title">강좌 정보</h2>
                                <div class="detail-input">
                                    <dl class="input-wrapper">
                                        <dt>강좌 번호</dt>
                                        <dd><span>-</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>
                                        <dd class="validation-wrap">
                                            <p></p>
                                        </dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt class="req">모듈</dt>
                                        <dd>
                                            @foreach ($modules as $key => $module)
                                            <div class="form-check form-check-inline ">
                                                <input type="radio" id="module{{ $key }}" name="module_id" class="form-check-input" value="{{ $module->id }}" @checked($course?->module_id == $module->id)>
                                                <label class="form-check-label" for="module{{ $key }}">{{ $module->name }}</label>
                                            </div>
                                            @endforeach
                                        </dd>
                                        <dd class="validation-wrap">
                                            <p></p>
                                        </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>
                                        <dd class="validation-wrap">
                                            <p></p>
                                        </dd>
                                    </dl>
                                </div>
                            </div>
                            @endif
                            {{-- 인강 종료 --}}
                        </div>
                    </div>
                </form>
            </div>

            @if ($service == "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 == "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>

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

@endsection

@push("script")
<script>
    const IS_COPY_PROCESS = {{ Js::from($course ? true : false) }};
    const TEST_SCHEDULES = {{ Js::from($testSchedules) }};
    const course = {{ Js::from($course) }};
    const service = {{ Js::from($service) }};
    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,
        });

        calendarInit();
    });

    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() {
        const $thumbnailElem = document.getElementById("thumbnail");
        if ($thumbnailElem)
            $thumbnailElem.value = null;

        const $imageElem = document.getElementById("thumbnail_image");
        if ($imageElem)
            $imageElem.src = "";
    }

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

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

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

        const $thumbnailElem = document.getElementById("thumbnail");
        const $imageElem = document.getElementById("thumbnail_image");
        if (IS_COPY_PROCESS && course.s3_key && $thumbnailElem.files.length < 1 && $imageElem.currentSrc != "") {
            const tmpThumbnailFile = await getS3File(course.s3_key);
            if (tmpThumbnailFile)
                formData.append("thumbnail", tmpThumbnailFile);
        }

        // 일정

        // 강의
        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 listUrl = "{{ route('product.course.list') }}";
        const callback = (response) => {
            if (response.status == 200 || response.status == 201)
                alertify.alert("알림", "완료되었습니다.", () => {
                    window.location.href = listUrl;
                });
            else
                alertify.alert('Error', '오류가 발생했습니다.');
        };

        let setUrl = "{{ route('product.course.set') }}";
        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 $activatedElem = document.querySelector('input[name="activated"]:checked');
        const activated = $activatedElem?.value;
        if (!activated)
            validationWrap = displayValidationForm(document.querySelector('input[name="activated"]'), "선택된 항목이 없습니다.");

        // 모듈 구분
        const $moduleIdElem = document.querySelector('input[name="module_id"]:checked');
        const moduleId = $moduleIdElem?.value;
        if (!moduleId)
            validationWrap = displayValidationForm(document.querySelector('input[name="module_id"]'), "선택된 항목이 없습니다.");

        // 강좌명
        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 $thumbnail = document.getElementById('thumbnail');
            const $thumbnailImage = document.getElementById('thumbnail_image');
            const thumbnail = $thumbnail?.value;
            if (!thumbnail && !$thumbnailImage.currentSrc)
                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 id = null;
        const url = "{{ route('api.product.course.by-name') }}";
        const params = {
            "id": id,
            "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 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",
            });
        });

        if (course?.course_schedules) {
            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);
        } else
            updateScheduleCount();

        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