@extends("domains.common.layouts.layout")
@section("header")
@vite([
    'resources/js/domains/common/toastGrid.js',
])
@endsection

@section("main-content")
<div class="container-fluid lecture-detail">

    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <h1>강의 관리</h1>
                <ul class="page-wayfinding">
                    <li><a href="{{ route('product.lecture.list') }}">강의 관리</a></li>
                    <li>상세</li>
                </ul>
                <div class="page-btn-wrap">
                    <button onclick="window.location.href='{{ route('product.lecture.list') }}'" class="button btn-style-2">목록</button>
                    <button type="button" class="button btn-style-1 submit" onclick="submitClick(event)">저장</button>
                </div>
            </div>
        </div>
    </div>
    <!-- end page title -->
    <div class="lecture-detail-con row">
        <div class="card col-8">
            <form class="set-lecture-form" onsubmit="handleSubmit(event)">
                @csrf
                <input type="hidden" name="id" value="{{ $lecture->id }}">
                <div class="card-body">
                    <div class="flex-box">
                        <div class="w50" style="margin-bottom: 1rem;">
                            <h2 class="detail-title">강의 구분</h2>
                            <div class="detail-input">
                                <dl class="input-wrapper">
                                    <dt>강의 번호</dt>
                                    <dd>{{ $lecture->id }}</dd>
                                </dl>
                                <dl class="input-wrapper">
                                    <dt class="req">활성 구분</dt>
                                    <dd>
                                        <div class="form-check form-check-inline ">
                                            <input type="radio" id="customRadio1" name="activated" class="form-check-input" value="1" @checked($lecture->activated == 1)>
                                            <label class="form-check-label" for="customRadio1">활성</label>
                                        </div>
                                        <div class="form-check form-check-inline ">
                                            <input type="radio" id="customRadio2" name="activated" class="form-check-input" value="0" @checked($lecture->activated == 0)>
                                            <label class="form-check-label" for="customRadio2">
                                                비활성
                                                @if ($lecture->activated == 0 && $lecture->deactivated_at)
                                                    <span>({{ explode(" ", $lecture->deactivated_at)[0] }})</span>
                                                @endif
                                            </label>
                                        </div>
                                    </dd>
                                </dl>
                                <dl class="input-wrapper">
                                    <dt class="req">서비스 구분 </dt>
                                    <dd>
                                        <select class="form-select" name="service_id">
                                            @foreach ($services as $service)
                                                <option value="{{ $service->id }}" @selected($lecture->service->id == $service->id)>{{ $service->name }}</option>
                                            @endforeach
                                        </select>
                                    </dd>
                                </dl>
                                <dl class="input-wrapper">
                                    <dt>모듈 구분</dt>
                                    <dd>
                                        <select class="form-select" name="module_id">
                                            <option value="" @selected($lecture->module == null)>선택</option>
                                            @foreach ($modules as $module)
                                                <option value="{{ $module->id }}" @selected($lecture->module?->id == $module->id)>{{ $module->name }}</option>
                                            @endforeach
                                        </select>
                                    </dd>
                                </dl>
                                <dl class="input-wrapper">
                                    <dt class="req">과목</dt>
                                    <dd>
                                        <div class="input-grid">
                                            @php
                                                $subjectsKeys = array_keys($lecture->subjects?->groupBy("id")->toArray() ?? []);
                                            @endphp
                                            @foreach ($subjects as $key => $subject)
                                                <span>
                                                    <input type="checkbox" id="checkbox{{ $key }}" name="subjects[]" value="{{ $subject->id }}" @checked(in_array($subject->id, $subjectsKeys))>
                                                    <label for="checkbox{{ $key }}">{{ $subject->name }}</label>
                                                </span>
                                            @endforeach
                                        </div>
                                    </dd>
                                </dl>
                            </div>
                        </div>
                        <div class="w50">
                            <h2 class="detail-title">기본 정보</h2>
                            <div class="detail-input">
                                <div class="input-wrapper mb-3">
                                    <label class="form-label req" for="validationCustom01">강의명</label>
                                    <div>
                                        <div class="flex-box m-0">
                                            <input type="text" class="form-control" name="name" value="{{ $lecture->name }}" required>
                                        </div>
                                    </div>
                                </div>
                                <div class="input-wrapper mb-3">
                                    <label class="form-label" for="validationCustom02">강사</label>
                                    <div>
                                        <select class="form-select" name="teacher_id">
                                            <option value="" @selected($lecture->teacher_id == null)>선택</option>
                                            @foreach ($teachers as $teacher)
                                                <option value="{{ $teacher->id }}" @selected($lecture->teacher_id == $teacher->id)>{{ $teacher->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="input-wrapper mb-3">
                                    <label class="form-label req">강의 영상</label>
                                    <div>
                                        <div class="flex-box m-0 mb-1">
                                            <span class="video-span" readonly style="width: calc(80% - .5rem); background-color: #F6F6F6; border: 1px solid #CECECE; font-size: .9rem; color: #6c757d; padding: 0.5rem;">
                                                @if (isset($lecture->assets["video"]))
                                                    {{ $lecture->assets["video"][0]->name . ($lecture->assets["video"][0]->extension ? ".{$lecture->assets['video'][0]->extension}" : '') }}
                                                @else
                                                    -
                                                @endif
                                            </span>
                                            <button type="button" class="button btn-style-3" onclick="fileInputOpen('video-file-input')">찾기</button>
                                            <input type="file" accept="video/*" value="" id="video-file-input" hidden onchange="fileSelected(event)" name="video">
                                        </div>
                                        <p><small>* 파일 형식 : MP4, MOV, WMV, WEBM</small></p>
                                    </div>
                                </div>
                                <div class="input-wrapper mb-3">
                                    <label class="form-label req">pdf 파일</label>
                                    <div>
                                        <div class="flex-box m-0 mb-1">
                                            {{-- <input type="text" value="" readonly style="width: calc(60% - 1rem);"> --}}
                                            <span class="pdf-span" readonly style="width: 100%; background-color: #F6F6F6; border: 1px solid #CECECE; font-size: .9rem; color: #6c757d; padding: 0.5rem;">
                                                @if (isset($lecture->assets["pdf"]))
                                                    {{ $lecture->assets["pdf"][0]->name . ($lecture->assets["pdf"][0]->extension ? ".{$lecture->assets['pdf'][0]->extension}" : '') }}
                                                @else
                                                    -
                                                @endif
                                            </span>
                                            <button type="button" class="button btn-style-3" onclick="fileInputOpen('pdf-file-input')">찾기</button>
                                            <button type="button" class="button btn-style-4" onclick="deleteAsset('pdf')">삭제</button>
                                            <input type="file" accept=".pdf" value="" id="pdf-file-input" hidden onchange="fileSelected(event)" name="pdf">
                                        </div>
                                    </div>
                                </div>
                                <div class="input-wrapper mb-3">
                                    <label class="form-label">영상 썸네일</label>
                                    <div>
                                        <div class="flex-box m-0 mb-1">
                                            {{-- <input type="text" value="" readonly style="width: calc(60% - 1rem);"> --}}
                                            <span class="thumbnail-span" readonly style="width: 100%; background-color: #F6F6F6; border: 1px solid #CECECE; font-size: .9rem; color: #6c757d; padding: 0.5rem;">
                                                @if (isset($lecture->assets["thumbnail"]))
                                                    {{ $lecture->assets["thumbnail"][0]->name . ($lecture->assets["thumbnail"][0]->extension ? ".{$lecture->assets['thumbnail'][0]->extension}" : '') }}
                                                @else
                                                    -
                                                @endif
                                            </span>
                                            <button type="button" class="button btn-style-3" onclick="fileInputOpen('thumbnail-file-input')">찾기</button>
                                            <button type="button" class="button btn-style-4" onclick="deleteAsset('thumbnail')">삭제</button>
                                            <input type="file" accept="image/*" value="" id="thumbnail-file-input" hidden onchange="fileSelected(event)" name="thumbnail">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <div class="card col-4">
            <div class="thumbnail">
                @if (isset($lecture->assets["video"][0]) && $lecture->assets["video"][0]->sub_type == "s3" && !empty($lecture->getVideoSource()))
                    <video controls src="{{ $lecture->getVideoSource() }}" style="width: 100%"></video>
                @else
                    업로드 진행중
                @endif
            </div>
            {{-- <a href="">영상 확인하기</a> --}}
        </div>

        <div class="card col-12">
            <h2>포함 강좌</h2>

            <div id="lecture-course-table"></div>
        </div>

        <div class="card col-12">
            <h2>포함 상품</h2>

            <div id="lecture-product-table"></div>
        </div>

        <div class="card col-12">
            <h2>변경 히스토리</h2>

            <div id="lecture-history-table"></div>
        </div>
    </div>
</div>

@endsection

@push("script")
<script>
    let lectureCoursesTable = null;
    let lectureProductsTable = null;
    let lectureHistoriesTable = null;

    let lectureCoursesTableItems = {{ Js::from($lecture->courses->sortByDesc("created_at")->values()->all() ?? []) }};
    let lectureProductsTableItems = {{ Js::from($lecture?->getIncludedProducts()?->all() ?? []) }};
    let lectureHistoriesTableItems = {{ Js::from($lecture->getParsingLogs() ?? []) }};

    window.addEventListener("load", () => {
        document.querySelector("video")?.focus();
        // 강의 상세 -  포함 강좌
        lectureCoursesTable = new Grid({
            el: document.getElementById('lecture-course-table'),
            scrollX: false,
            scrollY: false,
            data: lectureCoursesTableItems,
            columns: [{
                    header: '번호',
                    name: 'id',
                    sortable: true
                },
                {
                    header: '등록일시',
                    name: 'created_at'
                },
                {
                    header: '강좌 번호',
                    name: 'id'
                },
                {
                    header: '활성 구분',
                    name: 'activated'
                },
                {
                    header: '서비스 구분',
                    name: 'service_id'
                },
                {
                    header: '모듈',
                    name: 'module_id'
                },
                {
                    header: '강좌명',
                    name: 'name'
                },
            ],
            columnOptions: {
                resizable: true
            }
        });

        // 강의 상세 -  포함 상품
        lectureProductsTable = new Grid({
            el: document.getElementById('lecture-product-table'),
            scrollX: false,
            scrollY: false,
            data: lectureProductsTableItems,
            columns: [{
                    header: '번호',
                    name: 'id',
                    sortable: true
                },
                {
                    header: '등록일시',
                    name: 'created_at'
                },
                {
                    header: '서비스 구분',
                    name: 'service_id'
                },
                {
                    header: '모듈',
                    name: 'module_id'
                },
                {
                    header: '상품명',
                    name: 'title'
                },
            ],
            columnOptions: {
                resizable: true
            }
        });

        // 강의 상세 -  변경 히스토리
        lectureHistoriesTable = new Grid({
            el: document.getElementById('lecture-history-table'),
            scrollX: false,
            scrollY: false,
            data: lectureHistoriesTableItems,
            columns: [{
                    header: '번호',
                    name: 'row_number',
                    sortable: true
                },
                {
                    header: '일시',
                    name: 'created_at'
                },
                {
                    header: '활성 구분',
                    name: 'activated'
                },
                {
                    header: '서비스 구분',
                    name: 'service_id'
                },
                {
                    header: '모듈',
                    name: 'module_id'
                },
                {
                    header: '과목',
                    name: 'subjects'
                },
                {
                    header: '강의명',
                    name: 'name'
                },
                {
                    header: '강사',
                    name: 'teacher_id'
                },
                {
                    header: '강의영상',
                    name: 'assets'
                },
                {
                    header: '담당자',
                    name: 'created_by'
                },
            ],
            columnOptions: {
                resizable: true
            }
        });
    });

    function submitClick(e) {
        e.preventDefault();
        handleSubmit(null);
    }

    function handleSubmit(e) {
        if (e != null)
            e.preventDefault();

        const targetUrl = "{{ route('product.lecture.set', $lecture->id) }}";
        const $formElem = document.querySelector("form.set-lecture-form");

        let formData = new FormData($formElem);

        const callback = (response) => {
            if (response.status == 200)
                location.reload();
            else
                alertify.alert('Error', '오류가 발생했습니다.');

        };

        edmAjax({
            method: "POST",
            url: targetUrl,
            data: formData,
            callback: callback
        });
    }

    function fileInputOpen(fileInputId) {
        document.getElementById(fileInputId).click();
    }

    function deleteAsset(type) {
        const targetUrl = "{{ route('api.product.lecture.delete-asset', $lecture->id) }}/" + type;

        const callback = response => {
            if (response.status == 200)
                location.reload();
            else
                alertify.alert('Error', '오류가 발생했습니다.');
        };

        edmAjax({
            method: "DELETE",
            url: targetUrl,
            callback: callback
        });
    }

    function fileSelected(e) {
        const fileType = e.target.getAttribute("name");
        const spanElem = document.querySelector("." + fileType + "-span");
        spanElem.innerHTML = e.target.files[0].name;
    }

</script>
@endpush