@extends($service.'.layout')

@section($service.'-css')
    {!! resource('css/common/nice-select.css') !!}
    {!! resource('js/common/jquery.nice-select.js') !!}

    {!! resource('css/'.$service.'/sub.css') !!}
    {!! resource('css/myclass/my_class.css') !!}
    @if ($service == 'academy')
    {!! resource('css/myclass/my_class_academy.css') !!}
    @endif
@endsection

@section($service."-content")
<div class="container">
    <div class="my-class-wrapper">
        <div class="wrapper">
            @include('classroom.'.$service.'.menu')

            <div class="my-class-contents">
                <div class="row">
                    <div class="column c100p">
                        <div class="card my-class-sub">

                            @if ($service == 'ielts')
                                <h4>바로 수강하기</h4>
                                <ul class="my-lecture-list">
                                    <li>
                                        <strong>수강 중인 강의</strong>
                                        <div class="lecture-name">
                                            @if ($latestAttendance)
                                                <span>[{{ $latestAttendance->enrollmentCourse->name }}]</span>
                                                <a href="#none">{{ $latestAttendance->enrollmentCourseLecture->name }}</a>
                                            @else
                                                <p>최근 수강한 강의가 없습니다.</p>
                                            @endif
                                        </div>
                                        @if ($latestAttendance)
                                        <div class="process">
                                            <div class="bar">
                                                <div class="bar-inner" style="width:{{ round($progressRate) }}%"></div>
                                            </div>
                                            <p>진도율 <span>{{ round($progressRate) }}%</span></p>
                                        </div>
                                        <a href="javascript:onOpenPlayer({{ $latestAttendance->enrollmentCourseLecture->id }})" class="my-btn-default"><i class="ico-go-class"></i>수강하기</a>
                                        @endif
                                    </li>
                                    @if ($latestAttendance)
                                        <li>
                                            <strong>다음 강의</strong>
                                            <div class="lecture-name">
                                                @if ($nextLecture)
                                                    <span>[{{ $nextLecture->enrollmentCourse->name }}]</span>
                                                    <a href="#none">{{ $nextLecture->name }}</a>
                                                @else
                                                    <p>다음 강의가 없습니다.</p>
                                                @endif
                                            </div>
                                            <div class="process">
                                                <div class="bar">
                                                    <div class="bar-inner" style="width:{{ round($nextProgressRate) }}0%"></div>
                                                </div>
                                                <p>진도율 <span>{{ round($nextProgressRate) }}%</span></p>
                                            </div>
                                            <a href="javascript:onOpenPlayer({{ $nextLecture->id }})" class="my-btn-default"><i class="ico-go-class"></i>수강하기</a>
                                        </li>
                                    @endif
                                </ul>
                            @endif

                            <select class="select-option" onchange="alterOption(this)">
                                <option value="">수강옵션 선택</option>
                                @foreach($enrollments as $e)
                                    <option value="{{ $e?->id }}">{{ $e->product?->name }} {{ $e->productOption?->name }}</option>
                                @endforeach
                            </select>

                            <h5 class="option-title mt32">
                                {{ $enrollment->module ? '('.ucfirst($enrollment->module).')'  : ''}} {{ $enrollment->product?->name }} {{ $enrollment->productOption?->name }}
                            </h5>

                            <div class="option-cont">
                                @if ($service == 'ielts')
                                <div class="option-category">
                                    <dl>
                                        <dt>
                                            과목 선택
                                        </dt>
                                        <dd>
                                            <select name="subject" onchange="searchLectures()">
                                                <option value="">과목 선택</option>
                                                @foreach ($subjects as $subject)
                                                    <option value="{{ $subject }}">{{ config('edmclass.subjects')[$subject] }}</option>
                                                @endforeach
                                            </select>
                                        </dd>
                                    </dl>
                                    <dl>
                                        <dt>
                                            선생님 선택
                                        </dt>
                                        <dd>
                                            <select name="teacher" onchange="searchLectures()">
                                                <option value="">선생님 선택</option>
                                                @foreach ($teachers as $teacher)
                                                    <option value="{{ $teacher->id }}">{{ $teacher->name }}</option>
                                                @endforeach
                                            </select>
                                        </dd>
                                    </dl>
                                </div>
                                @endif
                                <div class="option-info">
                                    <strong>
                                        강의목록
                                        <span class="point-color">총 {{ $enrollment->enrollmentCourses->count() }}강</span>
                                    </strong>
                                </div>
                                <div class="option-wrap" id="option-wrap">
                                    @include('classroom.course-lectures')
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section($service.'-script')
    <script>
        function alterOption(obj) {
            const enrollment_id = obj.value;
            const route = '/{{ $service }}/classroom/course/'+obj.value;
            location.href = route;
        }

        function searchLectures() {
            const subject = $('select[name="subject"]').val();
            const teacher = $('select[name="teacher"]').val();

            $.ajax({
                url: '/{{ $service }}/classroom/course-lectures/{{ $enrollment->id }}?subject='+subject+'&teacher='+teacher,
                type: 'GET',
                success: function(result) {
                    $('#option-wrap').html(result);
                }
            });
        }

        $(document).ready(function () {
            $('.option-list-title').on('click', function () {
                $(this).toggleClass('on')
                $(this).parent('.option-list-wrap').toggleClass('on').siblings('.option-list-wrap').removeClass('on').children('.option-list-title').removeClass('on')
            });

            $('.select-option').niceSelect();
        });

        let downloadButton = document.querySelector('.dw-btn');
        if(downloadButton) {
            downloadButton.addEventListener('click', function(event) {
                event.preventDefault();

                /* Start loading process. */
                downloadButton.classList.add('loading');

                /* Set delay before switching from loading to success. */
                window.setTimeout(function() {
                downloadButton.classList.remove('loading');
                downloadButton.classList.add('success');
                }, 3000);

                /* Reset animation. */
                window.setTimeout(function() {
                downloadButton.classList.remove('success');
                }, 8000);
            });
        };


        function onOpenPlayer(id) {
            const popupWidth = 1200;
            const popupHeight = 675;
            const popupX = Math.round(window.screenX + (window.outerWidth/2) - (popupWidth/2));
            const popupY = Math.round(window.screenY + (window.outerHeight/2) - (popupHeight/2));
            const featureWindow = "width=" + popupWidth + ", height="+popupHeight + ", left=" + popupX + ", top=" + popupY;

            const href = "{{ route('classroom.player', ['service' => $service, 'lectureId' => ':id']) }}";
            return window.open(href.replace(":id", id), '영상 플레이어 팝업', featureWindow);
        }
    </script>
@endsection