@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="{{ route('classroom.dashboard', ['service' => ! empty($service)&& in_array($service, ['ielts', 'academy']) ? $service : 'ielts' ]) }}" class="ico-back">뒤로가기</a>
        <h2>강의수강</h2>
    </div>
    <div id="tab">
        <ul>
            <li class="on">
                <a href="#none">학습중</a>
            </li>
            <li>
                <a href="#none">휴강/학습종료</a>
            </li>
        </ul>
    </div>
    <div id="container" class="bg-gray">
        <div id="tab-cont1">
            <ul class="my-lecture-list ">
                @if ($latestAttendance)
                    <li>
                        <strong>수강 중인 강의</strong>
                        <div class="process">
                            <div class="title-bar">
                                <div class="title">{{$latestAttendance->enrollmentCourseLecture->name}}</div>
                                <div class="bar-wrap">
                                    @if ($latestAttendance)
                                        <div class="bar">
                                            <div style="width:{{ round($progressRate) }}%"></div>
                                        </div>
                                        <span>
                                {{$finishedLectures}}강/{{$totalLectures}}강
                            </span>
                                    @endif
                                </div>
                            </div>
                            <a href="javascript:onOpenMobilePlayer('ielts', {{ $latestAttendance->enrollment_id }}, {{ $latestAttendance->enrollmentCourseLecture->id }})"
                               class="btn-play">
                            </a>
                        </div>
                    </li>
                @endif
                @if ($nextLecture)
                    <li>
                        <strong>다음강의</strong>
                        <div class="process">
                            <div class="title-bar">
                                <div class="title">{{ $nextLecture->name }}</div>
                                <div class="bar-wrap">
                                    <div class="bar">
                                        <div style="width:{{ round($nextProgressRate) }}%"></div>
                                    </div>
                                    <span>
                                {{$finishedLectures + 1}}강/{{$totalLectures}}강
                            </span>
                                </div>
                            </div>
                            <a href="javascript:onOpenMobilePlayer('ielts', {{ $nextLecture->enrollmentCourse->enrollment_id }}, {{ $nextLecture->id }})" class="btn-play">
                            </a>
                        </div>
                    </li>
                @endif
            </ul>


            @include("classroom.ielts.partials.enrollments-mobile", ['enrollments' => $ongoingEnrollments, 'type' => 'ongoing'])

        </div>
        <div id="tab-cont2" style="display: none;">
            @include("classroom.ielts.partials.enrollments-mobile", ['enrollments' => $endedEnrollments, 'type' => 'finished'])

        </div>
    </div>
<!-- 출석확인 팝업-->
<div id="status">
    <div id="popup-form">
    </div>
</div>
@endsection


@section("classroom-script")
{!! resource('js/components/calendar.js') !!}
    {!! resource('js/ielts/my_class.js') !!}
    <script>
        $(document).ready(function () {
            $('#tab ul li').on('click', function () {
                $(this).addClass('on').siblings('li').removeClass('on')
                var nowTab = $(this).index() + 1;
                $('#tab-cont'+nowTab).show().siblings('[id^="tab-cont"]').hide()
            });

            $('a.confirm').each(function(){
                const url = $(this).attr('href');

                $(this).on('click', function(e){
                    e.preventDefault();

                    alertPopup('수강을 시작하시겠습니까?', {
                        confirmText: '네, 시작합니다', // 버튼 텍스트 변경 가능
                        onConfirm: function () {
                            location.href = url;
                        },
                        onClose: function () {
                        },
                    });
                });
            });
        });

    </script>
@endsection