@extends("common.layout")

@section('page-title', $service=='ielts' ? '인강 영상 관리' : '어학원 영상 관리')

@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') !!}
@endsection

@section("content")

<h1>
    <a href="{{ route('product.video.list', ['service'=>$service]) }}">{{ $pageServiceName }} 영상 관리</a>

    <button type="button" class="btn btn-primary" onclick="location.href='{{ route('product.video.add', $service) }}'">{{ $pageServiceName }} 영상 등록</button>
</h1>

<section class="mb-3">
    <main>
        <form action="{{ route('product.video.list', ['service'=>$service]) }}" class="search-form" method="GET">
            <div class="search-input-wrap">
                <div class="input-group input-group-sm">
                    <label class="input-group-text" for="register_start_date">등록일</label>
                    <input class="form-control" type="date" id="register_start_date" name="register_start_date" @if (Request::get("register_start_date"))value="{{ Request::get("register_start_date") }}"@endif>
                    <input class="form-control" type="date" name="register_end_date" @if (Request::get("register_end_date"))value="{{ Request::get("register_end_date") }}"@endif>
                </div>

                <div class="input-group input-group-sm">
                    <label class="input-group-text" for="activated">활성</label>
                    <select class="form-select" name="activated" id="activated">
                        <option value="" @selected(Request::get("activated") === null)>전체</option>
                        <option value="0" @selected(Request::get("activated") === "0")>비활성</option>
                        <option value="1" @selected(!Request::has("activated") || Request::get("activated") === "1")>활성</option>
                    </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", null) == $teacher->id)>{{$teacher->name}}</option>
                        @endforeach
                    </select>
                </div>

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

                <div class="input-group input-group-sm w-500">
                    <label class="input-group-text" for="name">영상명</label>
                    <input class="form-control form-control-sm" type="text" name="name" id="name" autocomplete='on'
                    @if (Request::get("name"))
                        value="{{ Request::get("name") }}"
                    @endif
                    >
                </div>

                <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"):'desc' }}">
            </div>

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

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

    </header>

    <main>
        <table class="table table-hover">
            <colgroup>
                <col width="3%">
                <col width="/">
                <col width="15%">
                <col width="10%">
                <col width="10%">
                <col width="5%">
                <col width="10%">
                <col width="5%">
                <col width="10%">
                <col width="5%">
            </colgroup>
            <thead>
                <tr class="text-center">
                    {!! \BaseHelper::sortHead('번호', 'id', 'text-end', 'desc') !!}
                    {!! \BaseHelper::sortHead('영상명', 'name', 'text-start') !!}
                    <th>썸네일</th>
                    <th class="text-start">과목</th>

                    <th>강사</th>
                    <th>영상길이</th>
                    <th>미디어키</th>
                    <th>강의 수</th>
                    {!! \BaseHelper::sortHead('등록일', 'created_at') !!}
                    <th>관리</th>
                </tr>
            </thead>
            <tbody id="sortable">
                @foreach ($videos as $video)
                <tr @class(['text-center'])>

                    <td class="number text-end">
                        {{ $video->id }}
                        <input type="hidden" name="sort[]" value="{{ $video->id }}">
                        <input type="hidden" name="id" value="{{ $video->id }}" />
                    </td>

                    <td class="text-start">
                        <a href="{{ route('product.video.detail', ['id' => $video->id]) }}">{{ $video->name }}</a>
                        <input type="text" name="name" value="{{ $video->name  }}" class="form-control form-control-sm" />
                    </td>
                    <td>
                        <div>
                            <img src="{{ $video->thumbnail }}" width="100%;" style="max-width: 300px;"/>
                        </div>
                    </td>
                    <td class="text-start">
                        <div class="row mx-0">
                            <select class="form-select form-select-sm" name="subject">
                                <option value="">선택하세요</option>
                                @foreach (config('system.subjects') as $key => $subject)
                                    <option value="{{ $key  }}" @selected($key == $video->subject)>{{ $subject }}</option>
                                @endforeach
                            </select>
                        </div>
                    </td>

                    <td>
                        <select class="form-select form-select-sm" name="teacher_id">
                            <option value="" @selected($video?->teacher_id == null)>선택</option>
                            @foreach ($teachers as $teacher)
                                <option value="{{ $teacher->id }}" @selected($video?->teacher_id == $teacher->id)>{{ $teacher->name }}</option>
                            @endforeach
                        </select>
                    </td>

                    <td class="number">
                      {{  gmdate('G:i:s', $video->duration) }}
                    </td>
                    <td class="font-sm">
                        @if ( $video->upload_file_key )
                            {{ $video->upload_file_key }} <br>
                        @endif
                        {{ $video->media_key }}
                    </td>

                    <td class="number">
                        {{ $video->lectures->count() }}
                    </td>
                    <td class="number">
                        {{ $video->created_at }}
                    </td>
                    <td>
                        <button class="btn btn-sm btn-primary" type="button" onclick="onSubmit($(this))">수정</button>
                        <button class="btn btn-sm btn-danger" type="button" onclick="onRemove({{ $video->id }})">삭제</button>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </main>

    <footer>
        <div class="pagination-wrap">
            {{ $videos->links() }}

            <select id='paginate-control' class='form-select form-select-sm data-length-select' onchange="copyValue('.data-length-select', 'input[name=paginate]', '.search-form')">
                <option value="10" @selected(Request::get("paginate") == null || Request::get("paginate") == 10)>10개씩 보기</option>
                <option value="30" @selected(Request::get("paginate") == 30)>30개씩 보기</option>
                <option value="50" @selected(Request::get("paginate") == 50)>50개씩 보기</option>
                <option value="100" @selected(Request::get("paginate") == 100)>100개씩 보기</option>
            </select>
        </div>
    </footer>
</section>
@endsection

@push("script")
<script>
    $(document).ready(function() {
        new TomSelect("#subjects", {
            plugins: {
                "checkbox_options": {},
                "input_autogrow": {},
                'dropdown_header': {
                    title: '전체 선택',
                    html: tomSelectAllCheckRender,
                },
            }
        });
    });

    $(function () {
        $("#sortable").sortable({
            handle: ".handle",
            axis: "y",
            placeholder: "ui-state-highlight",
            helper: function(e, ui) {
                ui.children().each(function() {
                    $(this).width($(this).width());
                });
                return ui;
            },
            update: function(e,ui){
                var order = '';
                $('input[name="sort[]"]').map(function(){
                    order += $(this).val()+',';
                });
                var eurl = '/api/products/update-sequence?sort='+order;
                $.ajax({
                    type: 'get',
                    url: eurl,
                    success: function(result) {
                        //alertify.alert("성공", "정렬값이 저장되었습니다");
                    }
                });
            }
        });
        $( "#sortable" ).disableSelection();
    });

    async function onSubmit(row) {
        const target = row.closest("tr").find('input, select');
        const params = {};
        $.each(target, function(index) {
            params[$(this).attr('name')] = $(this).val();
        })

        const url = "{{ route('product.video.set', ['id'=> ':id']) }}";
        const result = await customFetch(url.replace(":id", params['id']), {
            method: "POST",
            body : JSON.stringify(params) ,
            headers: { "Content-Type" : "application/json"}
        })

        if (result.status) {
            alertify.alert("알림", "성공하셨습니다.", () => {});
        } else {
            alertify.alert("알림", result.message, () => { });
        }
    }

    async function onRemove(id) {
        alertify.confirm("확인", "삭제하시겠습니까?", async () => {
            let url = "{{ route('product.video.remove', ['id' => ':id']) }}";
            const result = await customFetch(url.replace(":id", id), {
                method: "POST",
                headers: { "Content-Type" : "application/json"}
            });

            if (result.status) {
                alertify.alert("알림", "삭제되었습니다.", () => { location.reload() });
            } else {
                alertify.alert("알림", result.message, () => { });
            }
        }, () => {})
    }
</script>
@endpush