@extends("domains.board.layout.post-detail-layout")

@routes(["product"])
@section("header-child")
<style>
    div.ts-wrapper div.ts-control input {
        height: auto;
    }
</style>
@endsection

@section('custom-columns')
<div class="row">
    <div class="card">
        <div class="card-body">
            <div class="flex-box">
                <div class="w100">
                    <div class="detail-input">
                        <dl class="input-wrapper">
                            <dt class="req">강좌</dt>
                            <dd>
                                <div>
                                    <select name="course_id" id="course_id">
                                        <option value="">선택</option>
                                        @if ($post?->course)
                                        <option value="{{ $post->course->id }}" selected>{{ $post->course->name }}</option>
                                        @endif
                                    </select>
                                </div>
                            </dd>
                            <dd class="validation-wrap"><p></p></dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </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,
                    },
                    callback: callback,
                    isBlock: false,
                });
            },
            onFocus: () => {
                edmAjax({
                    method: "GET",
                    url: route('api.product.course.by-name'),
                    data: {
                        count: 5
                    },
                    callback: response => {
                        courseIdTomSelect.addOptions(response.data);
                        courseIdTomSelect.open();
                    },
                    isBlock: false,
                });
            },
        });
    });

    async function validate() {
        let $validationWrap = null;

        const $course_id = document.getElementById("course_id");
        if (!$course_id?.value)
            $validationWrap = displayValidationForm($course_id, "입력된 내용이 없습니다.");

        return $validationWrap;
    }

    function getRequestBody(formData) {
        return formData;
    }
</script>
@endpush