@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>
@endsection

@section("content")
<div id="playerPopup">
    <div class="left">
        <div class="lectureName">{{ $post->content->title }}</div>
        <div class="player">
            <iframe title="{{ $lecture->name }}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen src="{{ $kollusUrl }}"></iframe>
        </div>
        <div class="subject">{{ $lecture->name }}</div>
    </div>
    <div class="right">
        <div class="listAreaWrap">
            <!-- 강의 목록 -->
            <div class="listArea lectureList">
                <div class="scrollWrap">
                    <form action="">
                        <div class="lectureWrap">
                            @foreach ($posts as $item)
                            <div class="lecture">
                                <div class="all">
                                    <div class="check-info">
                                        <label @class(['ellipsis_1', 'active' => $item->id == $post->id]) onclick="onOpenPlayer({{ $item->id }})">{{ $item->lecture->name }}</label>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </form>
                </div>
            </div>

            <!-- 1:1 학습 문의 -->

        </div>
    </div>
</div>
@endsection
@section("script")
<script>
    function onOpenPlayer(postId) {
        const href = "{{ route('special.player', ['service' => $service , 'postId' => ':id']) }}";
        location.href = href.replace(":id", postId);
    }
</script>
@endsection