@extends("layout-popup")

@section("css")
    {!! resource('css/common/playerPopup.css') !!}

    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    {!! resource('js/components/classroom/player-qna.js') !!}
@endsection

@section("content")
@php
    $lecture = $enrollLecture->lecture;
    $enrollment = $enrollLecture->enrollmentCourse->enrollment;
@endphp
<div id="playerPopup">
    <div class="left">
        <div class="lectureName">{{ $enrollment->product->name }} {{ $enrollment->productOption->name }}</div>
        <div class="player">
            @if ($videoUrl)
            <iframe title="{{ $lecture->name }}" src='{{ $videoUrl }}' frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
            @else
                <h4 style="display: flex; align-items: center; justify-content: center; font-size: 1.5rem; line-height: 2;text-align: center">영상 미디어 키가 등록되지 않았습니다 <br> (릴리즈 시 삭제 예정문구)</h4>
            @endif
        </div>
        <div class="subject">{{ $lecture->name }}</div>
        <div class="lecture-buttonWrap flex sb">
            <div class="nav">
                @if ($prevLecture)
                <a href="javascript:onChangeVideo({{ $prevLecture->id }})" class="prev"><svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 12L6 8L10 4" stroke="#B8B8C7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg> 이전 강의</a>
                @endif
                @if ($nextLecture)
                <a href="javascript:onChangeVideo({{ $nextLecture->id }})" class="next">다음 강의 <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 12L10 8L6 4" stroke="#B8B8C7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
                @endif
            </div>
            <a href="javascript:onMoveReview()" class="writeReview">수강후기 남기기</a>
        </div>
    </div>
    <div class="right">
        <div class="top">
            <div class="tabMenu flex">
                <a href="javascript:void(0)" id="lectures" class="active">강의 목록</a>
                <a href="javascript:void(0)" id="studyQna">1:1 학습 문의</a>
            </div>
        </div>

        <div class="listAreaWrap">
            <!-- 강의 목록 -->
            <div class="listArea lectureList">
                <div class="allSelect flex sb">
                    <label><input type="checkbox" id="allSelect"><span>전체선택</span></label>
                    <a href="" class="btn1 file-download flex" download><span>다운로드</span> <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 11.3848V12.2566C2 12.719 2.1837 13.1625 2.51069 13.4895C2.83767 13.8165 3.28116 14.0002 3.74359 14.0002H11.5897C12.0522 14.0002 12.4957 13.8165 12.8226 13.4895C13.1496 13.1625 13.3333 12.719 13.3333 12.2566V11.3848" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 10.5131V2.66699" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M11.3359 7.33366L8.0026 10.667L4.66927 7.33366" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
                </div>
                <div class="scrollWrap">
                    <form action="">
                        <div class="lectureWrap">
                            @foreach ($enrollCourses as $enrollCourse)
                            <div class="lecture">
                                <div class="all">
                                    <input type="checkbox" class="m-check">
                                    <div class="check-info" id="course-wrap-{{ $enrollCourse->id }}">
                                        <label class="ellipsis_1">{{ $enrollCourse->name }}</label><figure class="arrow"></figure>
                                    </div>
                                </div>
                                <div class="list">
                                    @php
                                        $enrollmentCourseLectures = $enrollCourse->getEnrollmentCourseLectures($enrollment->service);
                                    @endphp
                                    @foreach ($enrollmentCourseLectures as $enrolledLecture)
                                    <div
                                        @class(['box', 'on' => $enrolledLecture->id == $enrollLecture->id ])
                                    > <!-- active 강의 : class on 추가 -->
                                        <input type="checkbox">
                                        <div class="check-info">
                                            <label>
                                                @if ($service == 'ielts')
                                                    <div class="progress">({{ $enrolledLecture->lectureAttendance?->getProgressPercentageAttribute() }}%)</div>
                                                @endif
                                                <button type="button" class="ellipsis_2 text" onclick="onChangeVideo({{ $enrolledLecture->id }})">{{ $enrolledLecture->name }}</button>
                                            </label>
                                            <div class="time">({{ gmdate('i:s', $enrolledLecture->lecture->video?->duration) }})</div>
                                        </div>
                                    </div>

                                    @endforeach
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </form>
                </div>
            </div>

            <!-- 1:1 학습 문의 -->
            <div class="listArea inquiryList" style="display: block;" x-data="studyQna">
                <div class="scrollWrap">
                    <input type="hidden" name="service" id="service" value="{{ $service }}"/>
                    <input type="hidden" name="enrollment_id" id="enrollment_id" value="{{ $enrollment->id }}"/>
                    {{-- <form action=""> --}}
                        <!-- 글작성 -->
                        <div class="writeArea" x-show="$.isEmptyObject(post)">
                            <div class="dropDownMenu type2">
                                <div class="selectBox">
                                    <button type="button" class="label" data-selected="{{ $lecture->enrollment_course_id }}">문의 강좌를 선택해 주세요.</button>
                                    <div class="optionListWrap">
                                        <ul class="optionList">
                                            <!-- 활성화 메뉴 active class 추가 -->
                                            @foreach ($enrollCourses as $enrollCourse)
                                                <li @class(["optionItem", "selected" => $lecture->enrollment_course_id == $enrollCourse->id]) >
                                                    <button type="button" data-account="{{ $enrollCourse->id }}">{{ $enrollCourse->name }}</button>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="writeWrap">
                                <textarea name="content" id="content" placeholder="문의 내용을 입력해 주세요." x-model="content"></textarea>
                                <span>*수정/삭제는 내강의실> 1:1학습문의에서 가능합니다.</span>
                                <input type="submit" value="문의등록" class="submitBtn" disabled @click="onSubmit()">
                            </div>
                        </div>

                        <!-- 게시글 view -->
                        <template x-if="! $.isEmptyObject(post)">
                            <div class="viewArea">
                                <div class="top flex sb">
                                    <div class="subject ellipsis_1" x-text="post.title"></div>
                                    <a class="btn1 go-writeBtn" @click="onChangePage(false)">문의등록</a>
                                </div>
                                <div class="content">
                                    <div class="scrollWidth">
                                        <div class="scrollWrap" x-text="post.content"></div>
                                    </div>
                                </div>
                                <div class="commentArea" x-show="! $.isEmptyObject(post.comments)">
                                    <div class="comment">
                                        <div class="box">
                                            <div class="manager flex sb">
                                                <p class="name" x-text="post.comments.writer_name"></p>
                                                <div class="info flex">
                                                    <p x-text="post.comments.comment_at"></p>
                                                </div>
                                            </div>
                                            <div class="textWrap">
                                                <div class="scrollWidth">
                                                    <div class="scrollWrap" x-text="post.comments.content"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </template>
                        <!-- 게시글 list -->
                        <div class="userList">
                            <!--
                                1. 최근 등록 글에는 class new 추가
                                2. 클릭해서 뷰 페이지가  보이면 해당 글 class active 추가
                            -->
                            <template x-for="(item, index) in list" :key="index">
                                <div class="list" :class="{ 'new' : item.is_new }">
                                    <a class="subject ellipsis_1" @click="onChangePage(true, index)" x-text="item.title"></a>
                                    <div class="answer" :class="{'complete' : item.status == 1 }"><span></span></div> <!-- 답변 완료 : class complete 추가 -->
                                </div>
                            </template>

                        </div>
                    {{-- </form> --}}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section("script")
    {{-- @if ($service == 'academy')
    <script src="https://player.vimeo.com/api/player.js"></script>
    <script>
        var iframe = document.querySelector('iframe');
        var player = new Vimeo.Player(iframe);

        player.on('play', function() {
        console.log('Played the video');
        });

        player.getVideoTitle().then(function(title) {
        console.log('title:', title);
        });
    </script>
    @endif --}}
<script>

    $(function(){
        let wraps = JSON.parse(localStorage.getItem("course-wraps")) || [];
        if (wraps) {
            wraps.map(wrap => $('#' + wrap).parents(".lecture").toggleClass('active').find('.list').stop().slideToggle(300));
        }

        // 상단 탭 메뉴 버튼
        $('.top .tabMenu a').on('click',function(e){
            // e.preventDefault();
            $(this).addClass('active').siblings().removeClass('active');
            $('.right .listArea').eq($(this).index()).show().siblings().hide();

            localStorage.setItem("player-tab", $(this).attr("id"));
        });

        const activeTab = localStorage.getItem("player-tab") || "";
        if (activeTab) {
            $('.top .tabMenu a#' + activeTab).trigger("click");
        }

        // 강의 목록 > 강의 리스트 열기
        $('.lectureList .lecture .all .check-info').on('click',function(){
            $(this).parents('.lecture').toggleClass('active').find('.list').stop().slideToggle(300);
            const isOpen = $(this).parents('.lecture').hasClass("active");
            const wrapId = $(this).attr("id");

            if (isOpen) {
                wraps.push(wrapId);
            } else {
                wraps = wraps.filter(wrap => wrap !== wrapId);
            }
            localStorage.setItem("course-wraps", JSON.stringify(wraps));

        });

        // 1:1 학습 문의 textarea
        $('#content').on('input change', function() {
            $('.inquiryList .writeWrap .submitBtn').prop('disabled', ! $(this).val().length);
        });


        // 강의 목록 > checkbox
        $('.lectureList input[type=checkbox]').click(function(){
            if ($(this).attr('id') == 'allSelect') { // all
                if ($(this).prop("checked")) {
                    $(".lectureList .lecture input[type=checkbox]").prop("checked",true);
                } else {
                    $(".lectureList .lecture input[type=checkbox]").prop("checked",false);
                }
            } else {
                if ($('.lectureList .lecture input[type=checkbox]:checked').length == $('.lectureList .lecture input[type=checkbox]').length) {
                    $('#allSelect').prop('checked',true);
                } else {
                    $('#allSelect').prop('checked',false);
                }
            }
        });

        $('.lectureList .lecture').each(function(index, item){
            $(item).find('input[type=checkbox]').click(function(){
                if ($(this).attr('class') == 'm-check') { // all
                    if ($(this).prop("checked")) {
                        $(this).parents('.lecture').find(".list input[type=checkbox]").prop("checked",true);
                        if($('.lectureList .lecture').length == $('.lecture .all input[type=checkbox]:checked').length){ // 전체선택 checked
                            $('#allSelect').prop('checked',true);
                        }
                    } else {
                        $(this).parents('.lecture').find(".list input[type=checkbox]").prop("checked",false);
                    }
                } else {
                    if ($(item).find('.list input[type=checkbox]:checked').length == $(item).find('.list input[type=checkbox]').length) {
                        $(item).find('.m-check').prop('checked',true);
                        if($('.lectureList .lecture').length == $('.lecture .all input[type=checkbox]:checked').length){
                            $('#allSelect').prop('checked',true);
                        }
                    } else {
                        $(item).find('.m-check').prop('checked',false);
                    }
                }
            });
        });
    });

    function onChangeVideo(id) {
        const href = "{{ route('classroom.player', ['service' => $service, 'lectureId' => ':id']) }}";
        location.href=href.replace(":id", id)
    }

    function onMoveReview() {
        window.opener.location.href="{{ route('class.index', ['service' => 'ielts']) }}"
    }

    // window.addEventListener("unload", function () {
    //     localStorage.removeItem("course-wraps");
    //     localStorage.removeItem("player-tab");
    // });
</script>
@endsection