@php
    $service = 'academy';
@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">

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

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

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