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

@section("header")
@routes(["product"])
@vite([
    'resources/js/domains/common/tomSelect.js',
])
<style>
    div.ts-wrapper div.ts-control input {
        height: auto;
    }
</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>
        불러온 일정으로 일정이 업데이트 됩니다.
    </p>
    <!-- 조회조건 -->
    <div class="popup-search-wrap search-form">
        <div class="search-input-wrap full">
            <div class="search-input-row">
                <div class="input-wrapper">
                    <label for="year" class="form-label req">년도</label>
                    <!-- validation 항목 활성화시 active-val 클래스 추가 -->
                    <div class="">
                        <select name="year" id="year">
                            <option value="">선택</option>
                            @for ($i = 2023; $i <= date("Y"); $i++)
                            <option value="{{ $i }}">{{ $i }}</option>
                            @endfor
                        </select>
                    </div>
                </div>
            </div>
            <div class="search-input-row">
                <div class="input-wrapper">
                    <label for="course_id" class="form-label req">강좌명</label>
                    <!-- validation 항목 활성화시 active-val 클래스 추가 -->
                    <div class="">
                        <select name="course_id" id="course_id">
                            <option value="">선택</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="validation-wrap">
        <p></p>
    </div>
    <div class="text-center" style="margin-top: 1rem;">
        <button class="button btn-style-1" type="button" onclick="loadSchedules()">불러오기</button>
    </div>
</div>
@endsection

@push("script")
<script>
    let courseIdTomSelect = null;

    window.addEventListener("load", () => {
        courseIdTomSelect = new TomSelect("#course_id", {
            plugins: ["input_autogrow"],
            valueField: "id",
            labelField: "name",
            searchField: "name",
            maxItems: 1,
            load: (query, callback) => {
                edmAjax({
                    method: "GET",
                    url: route('api.product.course.by-name'),
                    data: {
                        query: query,
                        service_id: 2,
                        year: document.getElementById("year")?.value ?? null,
                    },
                    callback: callback,
                    isBlock: false,
                });
            },
            onFocus: () => {
                edmAjax({
                    method: "GET",
                    url: route('api.product.course.by-name'),
                    data: {
                        count: 5,
                        service_id: 2,
                        year: document.getElementById("year")?.value ?? null,
                    },
                    callback: response => {
                        courseIdTomSelect.addOptions(response.data);
                        courseIdTomSelect.open();
                    },
                    isBlock: false,
                });
            },
        });
    });

    function loadSchedules() {
        document.querySelectorAll("div.validation-wrap").forEach((item) => item.style.display = "none");
        const $COURSE = document.getElementById("course_id");
        const COURSE_ID = $COURSE.value;
        if (!COURSE_ID) {
            displayValidationForm($COURSE, "선택되지 않은 항목이 있습니다.", "div.window-popup-con", "div.validation-wrap");
            return;
        }

        edmAjax({
            method: "GET",
            url: route("api.product.course.detail", {id: COURSE_ID}),
            callback: response => {
                if (response.status == 200 && response.data.course_schedules.length > 0) {
                    console.log(response.data.course_schedules);
                    response.data.course_schedules.forEach(item => {
                        item.course = {};
                        item.course.name = response.data.name;
                    });
                    window.opener.syncSchedules(response.data.course_schedules);
                    window.close();
                } else if (response.status == 200 && response.data.course_schedules.length < 1) {
                    displayValidationForm($COURSE, "선택 강좌에 일정이 없습니다.", "div.window-popup-con", "div.validation-wrap");
                    return;
                } else
                    alertify.alert("오류가 발생했습니다.");
            },
        });
    }
</script>
@endpush