@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="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" value="{{ Request::get("register_start_date", date('Y-m-d')) }}">
                    <input type="date" id="register_end_date" name="register_end_date" class="form-control" value="{{ Request::get("register_end_date", date('Y-m-d')) }}">
                </div>

                <div class="input-group input-group-sm">
                    <label class="input-group-text" for="name">영상명</label>
                    <input type="text" name="name" id="name" value="{{ Request::get("name") }}" 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 }}" @selected(! empty(Request::get("subjects", [])) && in_array($subjectKey, Request::get("subjects", [])) )>{{ $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 }} @selected(Request::get("teacher_id") == $teacher->id)>{{$teacher->name}}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <button class="btn btn-sm btn-outline-dark search-button" id="search-button">
                <i class="bi bi-search"></i> 조회
            </button>
        </form>
    </main>
</section>

<section>
    <header>
        <h6>총 <strong>{{ $videos->total() }}</strong>건</h6>

    </header>

    <main class="{{ $service }}">
        <table class="table table-hover">
            <colgroup>
                <col width="30">
                <col width="30">
            </colgroup>
            <thead>
                <tr class="text-center">
                    <th></th>
                    {!! \BaseHelper::sortHead('번호', 'id', 'text-end', 'desc') !!}
                    {!! \BaseHelper::sortHead('영상명', 'name', 'text-start') !!}
                    <th class="text-start">과목</th>

                    <th>강사</th>
                    <th>영상길이</th>
                    <th>강의 수</th>
                    {!! \BaseHelper::sortHead('등록일', 'created_at') !!}
                </tr>
            </thead>
            <tbody>
                @foreach ($videos as $video)
                <tr @class(['text-center'])>
                    <td>
                        <input type="radio" value="{{ $video->id }}" name="video_id" class="video_id" />
                        <span class="d-none" data-preview="upload_file_key">{{ $video->upload_file_key }}</span>
                        <span class="d-none" data-preview="media_key">{{ $video->media_key }}</span>
                    </td>
                    <td class="number text-end">
                        {{ $video->id }}
                    </td>

                    <td class="text-start">
                        <a href="javascript:edmPopupOpen('{{ route('product.video.detail', ['id' => $video->id]) }}?is_popup=1', 'popup_window2', null, null, 'large')" data-preview="video_name">{{ $video->name }}</a>
                    </td>

                    <td class="text-start" data-preview="video_subject">
                        {{ $video->subject }}
                    </td>
                    <td data-preview="teacher_name">
                        {{ $video->teacher?->name }}
                    </td>


                    <td class="number">
                        {{  gmdate('G:i:s', $video->duration) }}
                    </td>

                    <td class="number">
                        {{ $video->lectures->count() }}
                    </td>
                    <td class="number">
                        {{ date("Y-m-d", strtotime($video->created_at))}}
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </main>

    <footer class="d-flex justify-content-between">
        <div class="pagination-wrap">
            {{ $videos->links() }}
        </div>
        <span>
            <button class="btn btn-sm btn-primary" type="button" onclick="onSubmit()">저장</button>
        </span>
    </footer>
</section>
@endsection

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

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

        $('td').on("click", function() {
            const tr = $(this).closest("tr")
            tr.find("input[type=radio]").prop("checked" , true);
        })
    });

    function onSubmit() {
        if ($('input[name=video_id]:checked').length == 0) {
            alertify.alert("Error", "변경할 영상을 선택하세요");
            return false
        }

        const tr = $('input[name=video_id]:checked').closest("tr");
        const videoId = $('input[name=video_id]:checked').val();
        window.opener.$('#video_id').val(videoId);
        window.opener.$('#video_id_text').text(videoId);

        $.each(tr.find('[data-preview]'), function() {
            const field = $(this).data("preview")
            window.opener.$('#' + field).text($(this).text());
        })

        window.close();
    }


</script>
@endpush