@extends($isPopup ? "common.layout-popup" : "common.layout")

@php
    $page_title = $pageServiceName . ' 영상 ' . ($video?->id ? '상세보기 ('.$video->id.')' : '등록');
@endphp

@section('page-title', $page_title)

@section("header")
{!! resource('css/form.css') !!}
{!! resource('js/form.js') !!}
@endsection

@section("content")

<form id="video-form" action="{{ $video?->id ? route('product.video.set', ['id'=>$video->id]) : route('product.video.set') }}" method="post" class="default" enctype="multipart/form-data">
    @csrf
    <input type="hidden" name="service" id="service" value="{{ $service }}">
    <input type="hidden" name="id" value="{{ $video?->id }}">

    <h1>
        @if (! $isPopup)
            <div>
                <a href="{{ route('product.video.list', $service) }}"><i class="bi bi-arrow-left-circle"></i></a>
                {{ $page_title }}
            </div>
        @endif

        <div class="fixed-btns btn-group">
            @if ($video?->id)
                @if ($User->is->root)
                <button class="btn btn-danger" type="button" onclick="videoDelete({{ $video->id }}, '{{ $service }}')">삭제</button>
                @endif
                <button type="button" class="btn btn-success" onclick="location.href='{{ route('product.video.add', $service) }}'">등록</button>
            @endif
            <button type="submit" class="btn btn-primary">{{ $video ? "변경" : "저장" }}</button>
            <button class="btn btn-warning" type="button" onclick="toggleOptions(this)"><i class="bi bi-chevron-up"></i></button>
        </div>
    </h1>

    <div class="layout-2-cols">
        <section>
            <header>
                영상정보
                <button class="btn btn-warning btn-toggle" type="button" onclick="toggleOption(this)" id="toggle-video-{{ $video?->id }}-1"><i class="bi bi-chevron-up"></i></button>
            </header>

            <main class="split-form">
                {{--영상 번호--}}
                @if ($video?->id)
                <div class="form-group">
                    <label>영상 번호</label>
                    <div>
                        {{ $video?->id }}
                    </div>
                </div>
                @endif

                <div class="form-group">
                    <label class="required" for="name">영상명</label>

                    <div class="right-col">
                        <input type="text" class="form-control" name="name" id="name" value="{{  old('name') ? old("name") : $video?->name }}" required>
                    </div>
                </div>

                <div class="form-group">
                    <label class="required" for="teacher_id">강사</label>

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

                {{--과목--}}
                <div class="form-group">
                    <label class="required">과목</label>
                    <div class="right-col">
                        @foreach ($subjects as $subjectKey => $subjectName)
                        <div class="form-check col-3">
                            <input class="form-check-input" type="radio" id="checkbox{{ $subjectKey }}" name="subject" value="{{ $subjectKey }}" @checked(old('subject') ? old("subject") == $subjectKey : $subjectKey == $video?->subject)>
                            <label class="form-check-label" for="checkbox{{ $subjectKey }}">{{ $subjectName }}</label>
                        </div>
                        @endforeach
                    </div>
                </div>

                <div class="form-group">
                    <label class="required" for="video">미디어 키</label>
                    <div class="right-col">
                        <div class="col-6">
                            <input type="text" name="media_key" value="{{ old('media_key') ? old('media_key') : $video?->media_key }}" id="media_key" class="form-control" placeholder="미디어 키를 입력하세요" />
                            <div class="validation-wrap" style="display: none"><p></p></div>
                        </div>
                    </div>
                </div>

                @if($service == 'ielts')
                    <div class="form-group">
                        <label class="required" for="video">업로드 파일키</label>
                        <div class="right-col">
                            <div class="col-6">
                                <input type="text" name="upload_file_key" value="{{ old('upload_file_key') ? old('upload_file_key') : $video?->upload_file_key }}" id="upload_file_key" class="form-control" placeholder="업로드 파일 키를 입력하세요" />
                                <div class="validation-wrap" style="display: none"><p></p></div>
                            </div>
                        </div>
                    </div>
                @endif
            </main>
        </section>
        @if($video)
        <section>
            <header>
                미리보기
                <button class="btn btn-warning btn-toggle" type="button" onclick="toggleOption(this)" id="toggle-video-{{ $video?->id }}-preview"><i class="bi bi-chevron-up"></i></button>
            </header>

            <main>
                <img src="{{ $video->thumbnail }}" style="width: 100%; max-width: 700px;">
            </main>
        </section>
        @endif
    </div>
</form>

@if($video)
<div class="layout-2-cols my-3">
    <section>
        <header>
            포함 강의
            <button class="btn btn-warning btn-toggle" type="button" onclick="toggleOption(this)" id="toggle-lecture-{{ $video?->id }}-courses"><i class="bi bi-chevron-up"></i></button>
        </header>

        <main>
            <table class="table table-sm table-striped table-hover">
                <colgroup>
                    <col width="30">
                </colgroup>
                <thead>
                    <tr class="text-center">
                        <th>번호</th>
                        <th class="text-start">강의명</th>
                        <th>모듈</th>
                        <th>활성</th>
                        <th>등록일</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($video->lectures as $lecture)
                    <tr class="text-center">
                        <td>{{ $lecture->id }}</td>
                        <td class="text-start"><a href="{{ route('product.lecture.detail', ['id' => $lecture->id]) }}">{{ $lecture->name }}</a></td>
                        <td>{{ $lecture->module }}</td>
                        <td>{{ $lecture->activated ? 'Y':'' }}</td>
                        <td>{{ explode(" ", $lecture->created_at)[0] }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </main>
    </section>
</div>
@endif
@endsection

@push("script")
<script>
    $('#video-form').submit(function(e){
        e.preventDefault();
        const isValid = checkValidation();
        if (isValid) {
            $("#loading-icon").show();
            this.submit();
        }
    });

    function checkValidation() {
        const mediaKeyTest = $('#service').val() == "ielts" ? /^[a-zA-Z0-9]{8}$/ : /^[a-zA-Z0-9?&=]+$/;
        const FileKeyTest = /^[a-zA-Z0-9]+(-[a-zA-Z0-9]+)?$/

        let isValid = true;
        if ($.isEmptyObject($('#media_key').val())) {
            displayValidationForm($('#media_key'), "미디어키를 입력해 주세요.", "div");
        } else {
            if (! mediaKeyTest.test($('#media_key').val())) {
                displayValidationForm($('#media_key'), "유효하지 않은 미디어키가 입력되었습니다", "div");
                isValid = false;
            }
        }


        if ($('#upload_file_key').length) {
            if ($.isEmptyObject($('#upload_file_key').val())) {
                displayValidationForm($('#upload_file_key'), "업로드 파일키를 입력해 주세요.", "div");
                isValid = false;
            } else {
                if (! FileKeyTest.test($('#upload_file_key').val())) {
                    displayValidationForm($('#upload_file_key'), "유효하지 않은 파일키가 입력되었습니다", "div");
                    isValid = false;
                }
            }
        }

        return isValid;
    }


</script>
@endpush