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

@section("header")
@routes("product")
@vite([
    'resources/js/domains/common/GridTomSelectEditor.js',
    'resources/js/domains/common/GridTomSelectRenderer.js',
    'resources/js/domains/product/GridTomSelectEditor4Course.js',
    'resources/js/domains/common/toastGrid.js',
    'resources/js/domains/common/tomSelect.js',
])
<style>
    th[data-column-name="name"],
    th[data-column-name="activated"],
    th[data-column-name="module_id"],
    th[data-column-name="subjects"],
    th[data-column-name="course_id"],
    th[data-column-name="teacher_id"],
    th[data-column-name="special_type_id"] {
        background-color: #babfff!important;
    }
    th[data-column-name="name"]::after,
    th[data-column-name="activated"]::after,
    th[data-column-name="module_id"]::after,
    th[data-column-name="subjects"]::after {
        display: inline;
        content: '*';
        color: red;
    }
    .bg-red {
        background-color: #FA6767 !important;
        background: #FA6767 !important;
    }
    div.active-val div.ts-wrapper {
        width: 100%;
    }
    div.tui-grid-cell-content-editor div.ts-wrapper div.ts-control{
        width: auto;
    }
    div.ts-wrapper div.ts-control input {
        height: auto;
    }

</style>
@endsection

@section("main-content")
<div class="window-popup-titleBox">
    <h2>{{ ($service == "academy") ? "어학원" : "인강" }} 강의 업로드</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>수정 되지 않은 강의명은 파일명으로 등록됩니다.</p>
    <!-- 조회조건 -->
    <form action="" class="mb-3">
        <div class="popup-search-wrap search-form">
            <div class="search-input-wrap">
                <div class="search-input-row">
                    <div class="input-wrapper">
                        <label for="" class="form-label">활성 구분</label>
                        <div>
                            <span class="form-check form-check-flex">
                                <input type="radio" id="customRadio1" name="activated" value=1
                                    class="form-check-input" checked>
                                <label class="form-check-label" for="customRadio1">활성</label>
                            </span>
                            <span class="form-check form-check-flex">
                                <input type="radio" id="customRadio2" name="activated" value=0
                                    class="form-check-input">
                                <label class="form-check-label" for="customRadio2">비활성</label>
                            </span>
                        </div>
                    </div>
                    <div class="input-wrapper">
                        <label for="module_id" class="form-label">모듈</label>
                        <!-- validation 항목 활성화시 active-val 클래스 추가 -->
                        <div class="active-val">
                            <select name="module_id" id="">
                                <option value="" selected>선택</option>
                                @foreach ($modules as $module)
                                    <option value="{{ $module->id }}">{{ $module->name }}</option>
                                @endforeach
                            </select>
                            {{-- <div class="validation-wrap">
                                <p>선택된 항목이 없습니다.</p>
                            </div> --}}
                        </div>
                    </div>
                    <div class="input-wrapper">
                        <label for="subjects" class="form-label">과목</label>
                        <!-- validation 항목 활성화시 active-val 클래스 추가 -->
                        <div class="active-val">
                            <select name="subjects" id="subjects">
                                <option value="">선택</option>
                                @foreach ($subjects as $subject)
                                    <option value="{{ $subject->id }}">{{ $subject->name }}</option>
                                @endforeach
                            </select>
                            {{-- <div class="validation-wrap">
                                <p>선택된 항목이 없습니다.</p>
                            </div> --}}
                        </div>
                    </div>
                </div>
                <div class="search-input-row">
                    <div class="input-wrapper grow3">
                        <label for="name" class="form-label">강의명</label>
                        <!-- validation 항목 활성화시 active-val 클래스 추가 -->
                        <div class="active-val">
                            <input type="text" name="name" id="">
                            {{-- <div class="validation-wrap">
                                <p>선택된 항목이 없습니다.</p>
                            </div> --}}
                        </div>
                    </div>
                    <div class="input-wrapper">
                        <label for="teacher_id" class="form-label">강사</label>
                        <!-- validation 항목 활성화시 active-val 클래스 추가 -->
                        <div class="active-val">
                            <select name="teacher_id" id="">
                                <option value="" selected>선택</option>
                                @foreach ($teachers as $teacher)
                                    <option value="{{ $teacher->id }}">{{ $teacher->name }}</option>
                                @endforeach
                            </select>
                            {{-- <div class="validation-wrap">
                                <p>선택된 항목이 없습니다.</p>
                            </div> --}}
                        </div>
                    </div>
                </div>
            </div>
            <button type="button" class="search-button" onclick="bulkChange()">구분 값 적용</button>
        </div>
    </form>
    <!-- 상품 추가 버튼 클릭시 해당 영역 복제 -->
    <div class="pd-wrap">
        <div class="pd-title mb-1">
            <button type="button" class="button btn-style-1" onclick="fileUploadOpen()">영상 업로드</button>
        </div>
        <div class="pd-con-wrap">
            <div class="pd-con">
                <!-- 구성항목 타이틀 -->
                <div class="pd-con-title mb-3">
                    <div class="btn-wrap">
                        <button type="button" class="button btn-style-8" onclick="deleteRow()">선택 삭제</button>
                        <button type="button" class="button btn-style-1" onclick="copyRow()">행 복제</button>
                    </div>
                </div>
                <!-- //구성항목 타이틀 -->
                <!-- tui table 추가 -->
                <div id="tui-grid"></div>
                <!-- //tui table 추가 -->
                {{-- <div class="validation-wrap">
                    <p>강좌 선택 시 활성 상태로만 업로드 가능합니다.</p>
                    <p>선택 항목이 모두 동일한 행이 있습니다.</p>
                    <p>선택된 항목이 없습니다.</p>
                </div> --}}
            </div>
        </div>
    </div>
    <!-- //상품 추가 버튼 클릭시 해당 영역 복제 -->
    <div class="text-center">
        <button class="button btn-style-1" type="button" onclick="setLectures()">등록</button>
    </div>
</div>
@endsection

@push("script")
<script>
    const setUrl = '{{ route("product.lecture.set") }}';
    const serviceId = {{ $service == 'academy' ? 2 : 1 }};
    const toastGridElemId = "tui-grid";
    let toastGrid = null;
    let $subjectsTomSelect = null;

    window.addEventListener("load", () => {
        document.querySelector("body").addEventListener("click", (e) => {
            if (!hasSomeParentTheClass(e.target, "tui-grid-container") && toastGrid)
                toastGrid.blur();
        });

        $subjectsTomSelect = new TomSelect(document.getElementById("subjects"), {
            plugins: [
                "checkbox_options",
                "caret_position",
                "input_autogrow",
                // "remove_button",
            ],
            maxItems: null
        });

        toastGrid = new Grid({
            el: document.getElementById(toastGridElemId),
            draggable: true,
            scrollX: false,
            scrollY: false,
            contextMenu: null,
            columnOptions: {
                resizable: true,
            },
            rowHeaders: [
                {
                    type: 'checkbox'
                }
            ],
            columns: [
                {
                    header: '순서',
                    name: 'row_num',
                    // sortable: true,
                    width: 50,
                    align: 'center'
                },
                {
                    header: '강의명',
                    name: 'name',
                    editor: 'text',
                },
                {
                    header: '활성 구분',
                    name: 'activated',
                    width: 80,
                    align: 'center',
                    formatter: 'listItemText',
                    editor: {
                        type: 'select',
                        options: {
                            listItems: [
                                { text: '활성', value: '1' },
                                { text: '비활성', value: '0' }
                            ]
                        },
                        useViewMode: true
                    }
                },
                {
                    header: '모듈',
                    name: 'module_id',
                    align: 'center',
                    width: 110,
                    formatter: 'listItemText',
                    editor: {
                        type: 'select',
                        options: {
                            listItems: [
                                @foreach ($modules as $module)
                                { text: '{{ $module->name }}', value: '{{ $module->id }}' },
                                @endforeach
                            ]
                        },
                    }
                },
                {
                    header: '과목',
                    name: 'subjects',
                    align: 'center',
                    width: 80,
                    renderer: {
                        type: GridSelectRenderer,
                        value: [],
                        text: [],
                    },
                    editor: {
                        type: GridSelectEditor,
                        options: {
                            listItems: [
                                { text: '선택', value: '' },
                                @foreach ($subjects as $subject)
                                { text: '{{ $subject->name }}', value: '{{ $subject->id }}' },
                                @endforeach
                            ],
                            maxItems: {{ count($subjects) }}
                        },
                    }
                },
                @if ($service == 'academy')
                {
                    header: '강좌명',
                    name: 'course_id',
                    width: 120,
                    renderer: {
                        type: GridSelectRenderer,
                        value: [],
                        text: [],
                    },
                    editor: {
                        type: GridSelectEditor4Course,
                        options: {
                            service: '{{ $service }}'
                        },
                    }
                },
                @endif
                {
                    header: '강사',
                    name: 'teacher_id',
                    align: 'center',
                    width: 120,
                    formatter: 'listItemText',
                    editor: {
                        type: 'select',
                        options: {
                            listItems: [
                                @foreach ($teachers as $teacher)
                                { text: '{{ $teacher->name }}', value: '{{ $teacher->id }}' },
                                @endforeach
                            ]
                        },
                    }
                },
                {
                    header: '특강',
                    name: 'special_type_id',
                    align: 'center',
                    width: 120,
                    formatter: 'listItemText',
                    editor: {
                        type: 'select',
                        options: {
                            listItems: [
                                @foreach ($specialTypes as $specialType)
                                { text: '{{ $specialType->name }}', value: '{{ $specialType->id }}' },
                                @endforeach
                            ]
                        },
                    }
                },
                {
                    header: '영상 길이',
                    name: 'duration',
                    align: 'center',
                    width: 80
                },
                {
                    header: '파일',
                    name: 'video',
                    hidden: true
                }
            ],
        });

        toastGrid.on("drop", (e) => {
            resetRowNumber(toastGrid);
        });
        toastGrid.on("click", (e) => {
            if (e.targetType == "cell")
                toastGrid.startEditing(e.rowKey, e.columnName);
            else
                toastGrid.blur();
        });
    });

    function bulkChange() {
        if (!toastGrid) {
            refreshAlert();
            return;
        }

        const checkRows = toastGrid.getCheckedRows();
        if (!checkRows || checkRows.length < 1) {
            alertify.alert("알림", "선택된 행이 없습니다.");
            return;
        }

        const $bulkWrapper = document.querySelector("div.search-input-wrap");

        const activated = $bulkWrapper.querySelector("input[name=activated]:checked")?.value;
        const moduleId = $bulkWrapper.querySelector("select[name=module_id]")?.value;
        const subjects = $subjectsTomSelect.getValue();
        const name = $bulkWrapper.querySelector("input[name=name]")?.value;
        const teacherId = $bulkWrapper.querySelector("select[name=teacher_id]")?.value;

        checkRows.forEach(item => {
            if (activated !== null && activated != "")
                item.activated = activated;
            if (moduleId !== null && moduleId != "")
                item.module_id = moduleId;
            if (subjects !== null && subjects != "")
                item.subjects = subjects;
            if (name !== null && name != "")
                item.name = name;
            if (teacherId !== null && teacherId != "")
                item.teacher_id = teacherId;

            toastGrid.setRow(item.rowKey, item);
            if (subjects !== null && subjects != "") {
                let name = "";
                subjects.forEach(tmpValue => {
                    const tmpName = $subjectsTomSelect.getOption(tmpValue).textContent;
                    if (name == '')
                        name = tmpName;
                    else
                        name += (", " + tmpName);
                });
                const subjectColumn = toastGrid.getColumn("subjects");
                subjectColumn.renderer.text[item.rowKey] = name;
                subjectColumn.renderer.value[item.rowKey] = subjects;
            }
        });

        toastGrid.refreshLayout();
        alertify.alert("알림", "적용이 완료되었습니다.");
    }

    function fileUploadOpen() {
        const fileInputElem = document.createElement("input");
        fileInputElem.type = "file";
        fileInputElem.onchange = videoUpload;
        fileInputElem.multiple = true;
        fileInputElem.accept = "video/*";
        fileInputElem.click();
    }

    function videoUpload(e) {
        if (!toastGrid) {
            refreshAlert();
            return;
        }

        const files = e.target.files;
        if (toastGrid.getRowCount() + files.length > 10) {
            alertify.alert("알림", "최대 10건까지 업로드 가능합니다.");
            return;
        }

        for (const file of files) {
            const $video = document.createElement('video');
            $video.preload = "metadata";
            $video.onloadedmetadata = () => {
                window.URL.revokeObjectURL($video.src);
                const duration = convertSecondsToDuration($video.duration);
                let lectureName = file.name.split('.');
                if (lectureName.length > 1) {
                    lectureName.pop();
                    lectureName = lectureName.join('.');
                }
                else
                    lectureName = file.name;

                toastGrid.appendRow({
                    row_num: toastGrid.getRowCount() + 1,
                    name: lectureName,
                    activated: '1',
                    module_id: null,
                    subjects: null,
                    course_id: null,
                    teacher_id: '1',
                    special_type_id: '1',
                    duration: duration,
                    video: file
                });
            };

            $video.src = URL.createObjectURL(file);
        }
    }

    function deleteRow() {
        if (!toastGrid) {
            refreshAlert();
            return;
        }

        const rowKeys = toastGrid.getCheckedRowKeys();
        if (rowKeys.length > 0) {
            toastGrid.removeRows(rowKeys);
            resetRowNumber(toastGrid);
        } else
            alertify.alert("알림", "선택된 행이 없습니다.");
    }

    function copyRow() {
        if (!toastGrid) {
            refreshAlert();
            return;
        }

        const rowKeys = toastGrid.getCheckedRows();
        if (rowKeys.length > 0) {
            rowKeys.forEach((item) => {
                const originRowKey = item.rowKey;
                delete item.rowKey;
                toastGrid.appendRow(item);

                const rowData = toastGrid.getData();
                const newItem = rowData[rowData.length - 1];

                const subjectColumn = toastGrid.getColumn("subjects");
                subjectColumn.renderer.text[newItem.rowKey] = subjectColumn.renderer.text[originRowKey];
                subjectColumn.renderer.value[newItem.rowKey] = subjectColumn.renderer.value[originRowKey];

                const courseIdColumn = toastGrid.getColumn("course_id");
                if (courseIdColumn) {
                    courseIdColumn.renderer.text[newItem.rowKey] = courseIdColumn.renderer.text[originRowKey];
                    courseIdColumn.renderer.value[newItem.rowKey] = courseIdColumn.renderer.value[originRowKey];
                }
            });

            resetRowNumber(toastGrid);
            toastGrid.refreshLayout();
        } else
            alertify.alert("알림", "선택된 행이 없습니다.");
    }

    async function setLectures() {
        if (!toastGrid) {
            refreshAlert();
            return;
        }

        showBlockUI();
        const lectures = toastGrid.getData();
        if (lectures.length < 1) {
            hideBlockUI();
            alertify.alert("알림", "행을 추가해주세요.");
            return;
        }

        for (const lecture of lectures) {
            await Object.keys(lecture).forEach(async (item, index) => {
                await toastGrid.removeCellClassName(lecture.rowKey, item, "bg-red");
            });
            await validateLecture(lecture);
        }

        const unvalidatedLecture = document.querySelector("div#" + toastGridElemId + " .bg-red");
        if (unvalidatedLecture) {
            hideBlockUI();
            alertify.alert("알림", "정보를 올바르게 입력해주세요.");
            return;
        }

        const lectureTotal = lectures.length;
        const $loadingText = document.querySelector("div.loading-spinner div.loading-text");
        const loadingTextOrigin = $loadingText.innerHTML;
        $loadingText.innerHTML = `업로드 진행 중... (0/${lectureTotal})`;

        for (let i = 0; i < lectures.length; i++) {
            $loadingText.innerHTML = `업로드 진행 중... (${i+1}/${lectureTotal})`;
            await setLecture(lectures[i]);
        }

        $loadingText.innerHTML = loadingTextOrigin;
        hideBlockUI();

        alertify.alert("성공", "등록이 완료되었습니다.", () => {
            opener.location.reload();
            window.close();
        });
    }

    async function setLecture(lecture) {
        const formData = new FormData();
        Object.keys(lecture).forEach(key => {
            if (key.startsWith("_"))
                return;

            formData.append(key, lecture[key]);
        });
        formData.append("service_id", serviceId);

        const ajaxOptions = {
            method: "POST",
            url: setUrl,
            data: formData,
            isBlock: false,
            errorCallback: (error) => console.log(error),
        };
        return await edmAjax(ajaxOptions);
    }

    async function validateLecture(lecture) {
        if (!lecture)
            return;

        if (lecture.name == null || lecture.name == "")
            toastGrid.addCellClassName(lecture.rowKey, "name", "bg-red");
        if (lecture.activated == null || lecture.activated == "")
            toastGrid.addCellClassName(lecture.rowKey, "activated", "bg-red");
        if (lecture.module_id == null || lecture.module_id == "")
            toastGrid.addCellClassName(lecture.rowKey, "module_id", "bg-red");
        if (lecture.subjects == null || lecture.subjects == "")
            toastGrid.addCellClassName(lecture.rowKey, "subjects", "bg-red");
        if (lecture.teacher_id == null || lecture.teacher_id == "")
            toastGrid.addCellClassName(lecture.rowKey, "teacher_id", "bg-red");
        if (lecture?.course_id != null && lecture.activated != 1)
            toastGrid.addCellClassName(lecture.rowKey, "activated", "bg-red");

        toastGrid.getData().forEach((item, index) => {
            toastGrid.setValue(item.rowKey, "row_num", index + 1);
        });

        return true;
    }

    function refreshAlert() {
        alertify.alert("알림", "새로고침 후 다시 실행해주세요.");
    }

</script>
@endpush