@extends("common.layout-popup")

@section("header")
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js"></script>
{!! resource('js/common/tomSelectAllCheck.js') !!}
{!! resource('js/product/add-option-type.js') !!}
@endsection

@section("page-title", "특강 강의 선택")

@section("content")

<section class="mb-3">
    <main>
        <form method="get" id="search-form" class="search-form">
            {{-- <input type="hidden" name="service" value="{{ $service }}"> --}}
            <input type="hidden" name="paginate" value="{{ Request::has("paginate") ? Request::get("paginate"):'' }}">
            <input type="hidden" name="page" value="{{ Request::has("page") ? Request::get("page"):'' }}">
            <input type="hidden" name="order_by" value="{{ Request::has("order_by") ? Request::get("order_by"):'' }}">
            <input type="hidden" name="sort" value="{{ Request::has("sort") ? Request::get("sort"):'' }}">

            <div class="search-input-wrap">
                <div class="input-group input-group-sm">
                    <label class="input-group-text" for="register_start_date">등록일</label>
                    <input type="date" id="register_start_date" name="register_start_date" class="form-control">
                    <input type="date" id="register_end_date" name="register_end_date" class="form-control">
                </div>

                <div class="input-group input-group-sm">
                    <label class="input-group-text" for="name">강의명</label>
                    <input type="text" name="name" id="name" value="" class="form-control">
                </div>

                <div class="input-group input-group-sm">
                    <label class="input-group-text" for="subjects">과목</label>
                    <select name="subjects[]" id="subjects" multiple>
                        @foreach ($subjects as $subjectKey => $subjectName)
                        <option value="{{ $subjectKey }}">{{ $subjectName }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="input-group input-group-sm">
                    <label class="input-group-text" for="teacher_id">강사</label>
                    <select class="form-select" name="teacher_id" id="teacher_id">
                        <option value="" >선택</option>
                        @foreach ($teachers as $teacher)
                            <option value={{ $teacher->id }}>{{$teacher->name}}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <button type="submit" class="btn btn-sm btn-outline-dark search-button" id="search-button" onclick="getGrid()"><i class="bi bi-search"></i> 조회</button>
        </form>
    </main>
</section>

<div class="search-result-wrapper" id="listGrid">
    @include('product.popup.lecture-grid')
</div>

<div class="align-right">
    <button class="btn btn-primary" type="button" onclick="onSelectLecture()">선택</button>
</div>

@endsection

@push("script")
<script>
    $(document).ready(function() {
        $('#search-form').on('submit', function(e){
            e.preventDefault();
            getGrid();
        });

        new TomSelect("#subjects", {
            plugins: {
                "checkbox_options": {},
                "input_autogrow": {},
                'dropdown_header': {
                    title: '전체 선택',
                    html: tomSelectAllCheckRender,
                },
            }
        });
    });

    function getGrid(page) {
        if (page) $('input[name="page"]').val(page);
        let formData = $('#search-form').serialize();
        getListData("{{ route('board.lecture', ['service' => $service]) }}", formData, "#listGrid");
    }

    function onSelectLecture() {
        if ($('input[name=lecture_id]:checked').length == 0) {
            alertify.alert("Error", '강의를 선택하세요');
            return false;
        }

        const lectureId = $('input[name=lecture_id]:checked').val();
        const tr = $('input[name=lecture_id]:checked').closest("tr");

        window.opener.$('#lecture_id').val(lectureId);
        window.opener.$('#lecture_name').text(tr.find("td:eq(2)").text());
        window.opener.$('#lecture_type').text(tr.find("td:eq(4)").text());


        window.close();
    }
</script>
@endpush