@extends("board.layout.layout-board")
@section("header")
{!! resource('js/components/multiSelect.js') !!}
{!! resource('css/components/multiSelect.css') !!}
@endsection


@section("board-content")
    @php
        $viewCourse = $post?->courses?->pluck('id')->toArray();
    @endphp


    <li class="mb-3 row mx-0 align-middle">
        <label class="col-1">강사선택</label>
        <span class="col-2">
            <select name="teacher_id" id="teacher_id" class="form-select">
                @foreach ($teachers as $teacher)
                    <option value="{{ $teacher->id }}" @selected($teacher->id == $post?->teacher_id) >{{ $teacher->name }}</option>
                @endforeach
            </select>
        </span>
    </li>
    <li class="mb-3 row mx-0 align-middle">
        <label class="col-1 required">강좌</label>
        <span class="col-2">
            <select name="course_id" id="course_id" multiple>
                @foreach ($courses as $course)
                    <option value="{{ $course->id }}" @selected(! empty($viewCourse) && in_array($course->id, $viewCourse))>{{ $course->name }}</option>
                @endforeach
            </select>
        </span>
        <div class="validation-wrap" style="display: none"><p class='m-0 mt-2'></p></div>
    </li>
@endsection


@push("script")

    <script>
        $(function() {
            const courseSelector = new MultiSelector('course_id', {
                isOverall : true,
                isLarge : true
            });
        })
        function checkPostValidation(isValid) {
            if ($("input[type=checkbox][name^=course_id]:checked").length == 0) {
                displayValidationForm($("#select-course_id"), "강좌를 선택해주세요", "li");
                isValid = false;
            }

            return isValid;
        }
    </script>
@endpush