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

@section("board-display")
<li class="mb-3 row mx-0 align-middle">
    <label class="col-2">기본 좋아요 수</label>
    <div class="col-3">
        <input type="text" name="default_like_cnt" value="{{ $post->default_like_cnt }}" class="form-control number-only" />
    </div>
</li>
@endsection

@section("board-content")
<li class="mb-3 row mx-0 align-middle">
    <label class="col-1">상품명</label>
    <div class="col-5">
        <select class="form-select" name="product_id">
            @foreach ($products as $p)
                <option value="{{ $p->id }}" @selected($p->id == $post->product_id)>{{ $p->name }}</option>
            @endforeach
        </select>
    </div>
    <label class="col-1">옵션명</label>
    <div class="col-5">
        <select class="form-select" name="product_option_id" @disabled($post->product_id == 0)>
            @foreach ($options as $o)
                <option value="{{ $o->id }}" @selected($o->id == $post->product_option_id)>{{ $o->name }}</option>
            @endforeach
        </select>
    </div>
</li>

<li class="mb-3 row mx-0 align-middle">
    <label class="col-1">강사</label>
    <div class="col-2">
        @php
            $teacherIds = $post->teachers->pluck("teacher_id")->toArray();
        @endphp
        <select class="form-control" multiple name="teacher_id" id="teacher_id">
            @foreach ($teachers as $teacher )
                <option value="{{ $teacher->id }}" @selected(! empty($teacherIds) && in_array($teacher->id, $teacherIds))>{{ $teacher->name }}</option>
            @endforeach
        </select>
        {{-- @foreach ($post->teachers as $teacher)
            <span class="badge badge-primary badge-select">{{ $teacher->teacher->name }}</span>
        @endforeach --}}
    </div>
</li>
<li class="mb-3 row mx-0 align-middle">
    <label class="col-1">평가</label>
    <div class="col-11 row m-0 px-0">
        <div class="col-2">
            <label>난이도</label>
            <div>
                <select class="form-control form-control-sm" >
                    <option value="">선택하세요</option>
                    @foreach ($difficulties as $key => $d)
                        <option value="{{ $key }}" @selected($post->difficulty == $key)>{{ $d }}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="col-2">
            <label>수업시간</label>
            <div>
                <select class="form-control form-control-sm" >
                    <option value="">선택하세요</option>
                    @foreach ($times as $key => $t)
                        <option value="{{ $key }}" @selected($post->class_time == $key)>{{ $t }}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="col-6">
            <label>평점</label>
            <div>
                <input type="hidden" name="grade" value="{{ $post->grade }}" />
                @for($i = 5 ; $i > 0 ; $i --)
                    <span @class(["badge", "btn-score",
                        "badge-warning" => $i == $post->grade,
                        "badge-outline-warning" => $i != $post->grade,
                    ])>{{ $i }}</span>
                @endfor
            </div>
        </div>
    </div>
</li>
@endsection


@push("script")

    <script>
        $(function() {
            const teacher = new MultiSelector("teacher_id", { isOverall : false });

            $('.btn-score').on("click", function() {
                const target = $(this).closest("div");

                target.find(".badge").removeClass("badge-warning").addClass("badge-outline-warning");
                $(this).addClass("badge-warning").removeClass("badge-outline-warning");

                target.find("input[type=hidden]").val($(this).text());
            })
        })
    </script>
@endpush