@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_mo.css') !!}
    {!! resource('css/myclass/my_class_mo_'.$service.'.css') !!}
@endsection



@section($service."-content")
    <div class="container_m">

        <div id="nav">
            <a href="javascript:void(0);" onclick="history.back()" class="ico-back">뒤로가기</a>
            <h2>강의수강</h2>
        </div>
        @if ($service == 'ielts')
        @if ($latestAttendance)
        <div id="my-lecture">
            <strong>수강 중인 강의</strong>
            <div class="process">
                <div class="title-bar">
                    <div class="title">{{ $latestAttendance->enrollmentCourseLecture->name }}</div>
                    <div class="bar-wrap">
                        <div class="bar">
                            <div style="width:{{round($progressRate)}}%"></div>
                        </div>
                        <span>
                        {{$finishedLectures}}강/{{$totalLectures}}강
                    </span>
                    </div>
                </div>
                <a href="javascript:onOpenPlayer({{ $latestAttendance->enrollmentCourseLecture->id }})" class="btn-play">
                </a>
            </div>
        </div>
        @endif
        @endif
        <div id="container">
            <h2 class="ico-list">
                수강목록
            </h2>
            <div class="lecture-title">
                {{ $enrollment->module ? '('.ucfirst($enrollment->module).')'  : ''}} {{ $enrollment->product?->name }} {{ $enrollment->productOption?->name }}
            </div>
            @if ($service == 'ielts')
            <div class="filter">
                <select name="subject" onchange="searchLectures()">
                    <option value="">과목 선택</option>
                    @foreach ($subjects as $subject)
                        <option value="{{ $subject }}">{{ config('edmclass.subjects')[$subject] }}</option>
                    @endforeach
                </select>
                <select name="teacher" onchange="searchLectures()">
                    <option value="">선생님 선택</option>
                    @foreach ($teachers as $teacher)
                        <option value="{{ $teacher->id }}">{{ $teacher->name }}</option>
                    @endforeach
                </select>
            </div>
            @endif
            <div class="option-info">
            <span>
                총 <strong>{{ $enrollment->enrollmentCourses->count() }}강</strong>
            </span>
{{--                <a href="#none" class="dw-btn">--}}
{{--                    <i class="ico-pdf"></i>--}}
{{--                    학습자료 일괄 다운받기--}}
{{--                    <i class="ico-download"></i>--}}
{{--                </a>--}}
            </div>
            <div id="option-wrap">
            @include('classroom.course-lectures-mobile')
            </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();

            if(subject == '' && teacher == ''){
                location.reload();
            }

            $.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 href = "{{ route('classroom.player', ['service' => $service, 'lectureId' => ':id']) }}";
            return window.open(href.replace(":id", id));
        }
    </script>
@endsection