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

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

@section('custom-columns')
<div class="row detail-con-wrap">
    <div class="detail-con 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="product_id" id="product_id">
                                        <option value="">선택</option>
                                        @if ($post?->product)
                                        <option value="{{ $post->product->id }}" selected>{{ $post->product->name }}</option>
                                        @endif
                                    </select>
                                </div>
                            </dd>
                            <dd class="validation-wrap"><p></p></dd>
                        </dl>
                        <!-- 인강 상세 빠지는 항목 -->
                        <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>
                        <!-- // -->
                        <dl class="input-wrapper">
                            <dt class="req">강사</dt>
                            <dd>
                                <div>
                                    <select name="teacher_id" id="teacher_id">
                                        <option value="">선택</option>
                                        @foreach ($teachers as $teacher)
                                        <option value="{{ $teacher->id }}" @selected($post?->teacher_id == $teacher->id)>{{ $teacher->name }} 선생님</option>
                                        @endforeach
                                    </select>
                                </div>
                            </dd>
                            <dd class="validation-wrap"><p></p></dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="detail-con 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>
                                @foreach ($times as $key => $time)
                                <div class="form-check form-check-inline ">
                                    <input type="radio" id="class_time{{ $key }}" name="class_time" class="form-check-input" value="{{ $time }}" @checked($post?->class_time == $time)>
                                    <label class="form-check-label" for="class_time{{ $key }}">{{ $time }}</label>
                                </div>
                                @endforeach
                            </dd>
                            <dd class="validation-wrap"><p></p></dd>
                        </dl>
                        <dl class="input-wrapper">
                            <dt class="req">수업 난이도</dt>
                            <dd>
                                @foreach ($difficults as $key => $difficulty)
                                <div class="form-check form-check-inline ">
                                    <input type="radio" id="difficulty{{ $key }}" name="difficulty" class="form-check-input" value="{{ $difficulty }}" @checked($post?->difficulty == $difficulty)>
                                    <label class="form-check-label" for="difficulty{{ $key }}">{{ $difficulty }}</label>
                                </div>
                                @endforeach
                            </dd>
                            <dd class="validation-wrap"><p></p></dd>
                        </dl>
                        <!-- 인강 상세 빠지는 항목 -->
                        <dl class="input-wrapper">
                            <dt class="req">수업 방식</dt>
                            <dd>
                                @foreach ($courseReviewEvaluationTypes as $key => $courseReviewEvaluationType)
                                <div class="form-check form-check-inline">
                                    <input type="checkbox" id="course_review_evaluation_types{{ $key }}" name="course_review_evaluation_types[]" class="form-check-input" value="{{ $courseReviewEvaluationType->id }}" @checked($post?->courseReviewEvaluationTypes->firstWhere("id", $courseReviewEvaluationType->id))>
                                    <label class="form-check-label" for="course_review_evaluation_types{{ $key }}">{{ $courseReviewEvaluationType->name }}</label>
                                </div>
                                @endforeach
                            </dd>
                            <dd class="validation-wrap"><p></p></dd>
                        </dl>
                        <!-- // -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

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

    window.addEventListener("load", () => {
        productIdTomSelect = new TomSelect("#product_id", {
            plugins: [
                "input_autogrow",
            ],
            valueField: "id",
            labelField: "name",
            searchField: "name",
            maxItems: 1,
            load: (query, callback) => {
                edmAjax({
                    method: "GET",
                    url: route('api.product.by-name'),
                    data: {
                        query: query,
                    },
                    callback: callback,
                    isBlock: false,
                });
            },
            onFocus: () => {
                edmAjax({
                    method: "GET",
                    url: route('api.product.by-name'),
                    data: {
                        count: 5
                    },
                    callback: response => {
                        productIdTomSelect.addOptions(response.data);
                        productIdTomSelect.open();
                    },
                    isBlock: false,
                });
            },
        });

        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 $productId = document.getElementById("product_id");
        const productId = $productId?.value;
        if (!productId)
            $validationWrap = displayValidationForm($productId, "입력된 내용이 없습니다.");

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

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

        const $classTime = document.querySelector("input[name='class_time']:checked");
        const classTime = $classTime?.value;
        if (!classTime)
            $validationWrap = displayValidationForm(document.querySelector("input[name='class_time']"), "입력된 내용이 없습니다.");

        const $difficulty = document.querySelector("input[name='difficulty']:checked");
        const difficulty = $difficulty?.value;
        if (!difficulty)
            $validationWrap = displayValidationForm(document.querySelector("input[name='difficulty']"), "입력된 내용이 없습니다.");

        const $evaluationType = document.querySelector("input[name='course_review_evaluation_types[]']:checked");
        if (!$evaluationType)
            $validationWrap = displayValidationForm(document.querySelector("input[name='course_review_evaluation_types[]']"), "입력된 내용이 없습니다.");

        return $validationWrap;
    }

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