@php
    $service = 'ielts'
@endphp

@extends("modular.classroom.mobile.layouts.layout-default")


@section("classroom-css")
    {!! resource('css/components/calendar.css') !!}
@endsection


@section("classroom-contents")
<div class="container_m">

    <div id="nav">
        <a href="javascript:void(0);" onclick="history.back()" class="ico-back">뒤로가기</a>
        <h2>강의수강</h2>
    </div>

    @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:onOpenMobilePlayer('ielts', {{ $latestAttendance->enrollment_id }}, {{ $latestAttendance->enrollmentCourseLecture->id }})" class="btn-play">
                </a>
            </div>
        </div>
    @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>

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


        @php
            $enrollmentCourses = $enrollment->getEnrollmentCourses();
        @endphp
        <div class="option-info">
            <span>
                총 <strong>{{ sizeof($enrollmentCourses) }}</strong>강
            </span>
        </div>
        <div id="option-wrap">
            @foreach ($enrollmentCourses as $course)
                <div class="option-list-wrap">
                    <div class="option-list-title">
                        <strong>{{ $course->name }}</strong>
                        <i class="ico-option-arrow"></i>
                    </div>

                    <ul class="option-list">
                        @php
                            $enrollmentCourseLectures = $course->getEnrollmentCourseLectures($service);
                        @endphp
                        @foreach ($enrollmentCourseLectures as $enrolledLecture)
                            @if(is_null($enrolledLecture?->lecture?->video)) @continue @endif
                            @include("modular.classroom.components.mobile.ielts.lecture")
                        @endforeach
                    </ul>
                </div>
            @endforeach
        </div>
    </div>
</div>
@endsection


@section("classroom-script")
    {!! resource('js/ielts/my_class.js') !!}
    {!! resource('js/classroom/course.js') !!}

    <script>
        setConfigs({
            'subjectTeachers' : @json($subjectTeachers),
            'teachers' : @json($teachers),
            'service' : '{{ $service }}',
            'id' : '{{ $enrollment->id }}',
        })
    </script>
@endsection