@extends('ielts.layout')

@section('ielts-css')
    {!! resource('css/ielts/sub.css') !!}
    {!! resource('css/myclass/my_class_mo.css') !!}
    {!! resource('css/myclass/my_class_mo_ielts.css') !!}
    {!! resource('css/classroom/mobile.css') !!}
    {!! resource('css/components/calendar.css') !!}
@endsection

@section("ielts-content")
<div class="container_m dashboard myClassPage">

	<!-- shortcut btn -->
	<div id="site-shortcut">
		<div class="max-width">
			<div class="dropDownMenu type1 pretendard">
				<div class="selectBox">
					<button type="button" class="label">인강 내강의실</button>
					<div class="optionListWrap">
						<div class="scrollWidth">
							<ul class="optionList scrollWrap">
								<li class="optionItem"><a href="/ielts/classroom">인강 내강의실</a></li>
								<li class="optionItem"><a href="/academy/classroom">어학센터 내강의실</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

    <!-- 내 강의실 -->
    <div id="my-class">
        <h3>내 강의실</h3>
        <ul>
            <li>
                <a href="{{ route('classroom.course', ['service' => $service]) }}" class="ico-quick-01">
                    <i></i>
                    <span>강의수강</span>
                </a>
            </li>
            <li>
                <a href="{{ route('classroom.feedback', ['service' => $service]) }}" class="ico-quick-02">
                    <i></i>
                    <span>첨삭학습</span>
                </a>
            </li>
            <li>
                <a href="{{ route('classroom.cdt-list', ['service' => $service]) }}" class="ico-quick-03">
                    <i></i>
                    <span>CDT모의고사</span>
                </a>
            </li>
            <li>
                <a href="{{ route('classroom.study.index', ['service' => $service]) }}" class="ico-quick-04">
                    <i></i>
                    <span>1:1게시판</span>
                </a>
            </li>
        </ul>
    </div>

    @if ($latestAttendance)
        <!-- 최근 수강 -->
        <div id="recent" class="section">
            <div class="section-=wrap">
                <div class="section-title">
                    <h3>최근 수강</h3>
                </div>
                <p class="lesson-title">{{ $latestAttendance->enrollmentCourseLecture?->name }}</p>
                <div class="process">
                    <div class="bar">
                        <div style="width:{{ $progressRate }}%"></div>
                    </div>
                    <span>{{ $finishedLectures }}강/{{ $totalLectures }}강</span>
                    <a href="javascript:onOpenPlayer({{ $latestAttendance->enrollmentCourseLecture->id }})" class="btn-go">바로가기</a>
                </div>
            </div>
        </div>
    @endif

    <!-- 출석 현황 -->
    <div id="status" class="certificateArea section">
        <div class="status-inner section-wrap" onclick="getAttendancePopup({{ $refundableEnrollment?->id }}, 'calendarPopUp')">
            <div class="section-title">
                <h3>출석 현황</h3>
            </div>

            @if ($refundableEnrollment)
                <!-- 환급 상품일 경우 -->
                <div class="o-attendance">
                    <div class="attendance">
                        <span>출석율</span>
                        <p>{{ number_format($attendanceRate) }}%</p>
                        <span>잔여출석일수</span>
                        <p>{{$remainingDaysInRefundable}}일</p>
                    </div>
                    <p class="detail_popup">상세보기</p>
                </div>
            @else
                <!-- 환급 상품이 아닐 경우 -->
                <div class="x-attendance">환급반 상품이 없습니다</div>
            @endif

        </div>
        <div id="calendarPopUp">
        </div>
        <ul class="status-list">
            <li>
                <a href="javascript:onClickDevice('ielts')" class="ico-my-01 popupOn">
                    <i></i>
                    <strong>기기관리</strong>
                    <span>기기 설정하기</span>
                </a>
            </li>
            <li>
                <a href="{{ route("class.index", ['service' => $service]) }}" class="ico-my-02">
                    <i></i>
                    <strong>수강후기</strong>
                    <span>후기 남기기</span>
                </a>
            </li>
            <li>
                <a href="javascript:onClickCertificate('ielts')" class="ico-my-03 popupOn">
                    <i></i>
                    <strong>수강증</strong>
                    <span>수강증 확인</span>
                </a>
            </li>
            <li>
                <a href="{{ route('classroom.pause', ['service' => $service]) }}" class="ico-my-04">
                    <i></i>
                    <strong>휴강/연장</strong>
                    <span>신청하기</span>
                </a>
            </li>
        </ul>

        <div class="popupArea" id='dashboardPopup'></div>
    </div>

    <div id="event">
        <div id="eventBannerSlide">
            <div class="swiper-wrapper">
				<div class="swiper-slide timer timer1">
                    <a href="/ielts/board/event/view/10" class="event-banner">
                        <img src="{{ env('AWS_S3_IMG_URL') }}/banner/ielts/s_v_8-classroom-mo.png" alt="아이엘츠 여름방학 한달완성 / 올 여름 한달만에 끝! 선착순 50명 /  GS25 5000원,  30,000원 할인, 올리브영 모바일 상품권 5000원">
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div id="board" class="section">
        <div class="board-wrap section-wrap">
            <div class="board-title section-title">
                <h3>1:1 학습문의</h3>
                <a href="{{ route('classroom.study.index', ['service' => $service]) }}" class="btn-more">더보기</a>
            </div>
            <ul>
                @if ($studies->count()>0)
                    @foreach ($studies as $post)
                        @php
                            $content = $post->content;

                        @endphp
                        <li>
                            <a href="{{ route("classroom.study.view", ['service' => 'ielts', 'id' => $post->id]) }}" title="{{ $content->title }}">
                                <span @class(['reply', 'fin' => $post->status == 1])>{{ ($post->status == 1) ? "답변완료" : "미답변" }}</span>
                                <span class="title">{{ $content->title }}</span>
                            </a>
                            <span class="date">{{ date('y.m.d', strtotime($post->created_at)) }}</span>
                        </li>
                    @endforeach
                @else
                    <li class="no-data">
                        등록된 학습문의가 없습니다.
                    </li>
                @endif
            </ul>
        </div>
        <div class="board-wrap section-wrap">
            <div class="board-title section-title">
                <h3>공지사항</h3>
                <a href="{{ route("notice.index", ['service' => $service]) }}" class="btn-more">더보기</a>
            </div>

            <ul>
                @if ($notices->count()>0)
                    @foreach ($notices as $notice)
                        @php
                            $content = $notice->content;
                        @endphp
                        <li>
                            <a href="{{ route("notice.view", ['service' => $service, 'id' => $notice->id]) }}" title="{{ $content->title }}">
                                <span class="title">{{ $content->title }}</span></a>
                            <span class="date">{{ date('y.m.d', strtotime($notice->created_at)) }}</span>
                        </li>
                    @endforeach
                @else
                    <li class="no-data">
                        등록된 공지사항이 없습니다.
                    </li>
                @endif
            </ul>
        </div>
    </div>

    <div id="product" class="section">
        <div class="product-wrap section-wrap">
            <div class="section-title">
                <h3>수강중인 상품</h3>
            </div>
            <div class="section-body">

                @if ($enrollments->count()>0)
                    <div class="list-group course">
                        @foreach ($enrollments as $enrollment)
                        <div class="list-item">
                            <div class="list-header">
                                <div class="list-image">
                                    <img src="{{ $enrollment->product->thumbnail }}" alt="{{ $enrollment->id }}" style="">
                                </div>
                                <div class="list-title">
                                    <div class="name">{{ $enrollment->product->name }}</div>
                                    <div class="desc"> {{ $enrollment->productOption?->name }}</div>
                                </div>
                            </div>
                            <div class="list-contents">
                                <div class="info-group">
                                    <div class="info-box">
                                        <div class="info-title">수강기간</div>
                                        <div class="info-desc">
                                            <strong>{{ Carbon::parse($enrollment->started_at)->format('y.m.d') }} ~ {{ Carbon::parse($enrollment->ended_at)->format('y.m.d') }}</strong>
                                        </div>
                                    </div>
                                </div>
                                <div class="info-group col-2">
                                    <div class="info-box">
                                        <div class="info-title">CDT</div>
                                        <div class="info-desc">
                                            <strong>{{ !empty($enrollment->enrollmentCdtPasses->count()) ? $enrollment->enrollmentCdtPasses->count().'회':'-' }}</strong>
                                        </div>
                                    </div>
                                    <div class="info-box">
                                        <div class="info-title">첨삭</div>
                                        <div class="info-desc">
                                            <strong>{{ !empty($enrollment->enrollmentFeedbackPasses->count()) ? $enrollment->enrollmentFeedbackPasses->count().'회':'-' }}</strong>
                                        </div>
                                    </div>
                                </div>

                                <span class="rate">{{  round($enrollment->progress_rate) ?? 0 }}%</span>
                            </div>
                            <div class="list-action">
                                @if ($enrollment->status == 'READY')
                                    <a class="btn-submit" href="{{ route('classroom.course', ['service' => 'ielts']) }}#{{ $enrollment->id }}"><i class="play"></i>수강하기</a>
                                @else
                                    <a class="btn-submit" href="{{ route('classroom.course', ['service' => 'ielts', 'enrollment_id' => $enrollment->id]) }}"><i class="play"></i>수강하기</a>
                                @endif
                            </div>
                        </div>
                        @endforeach
                    </div>
                @else
                    <div class="no-data">수강중인 상품이 없습니다.</div>
                @endif
            </div>
        </div>
    </div>

    <div id="welcome" class="section">
        <div class="section-wrap">
            <div class="section-title">
                <h3>웰컴 패키지</h3>
            </div>

            <ul class="welcome-list">
                <li>
                    <a href="{{ env("AWS_S3_IMG_URL") }}/ielts/my_class/edm_ielts_plan.pdf" target="_blank">
                        <img src="{{ env("AWS_S3_IMG_URL") }}/ielts/my_class/img_welcome_1.jpg" alt="">
                        <div class="welcome-text">
                            <p>웰컴패키지 스케줄러</p>
                            <i class="ico-download"></i>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="{{ env("AWS_S3_IMG_URL") }}/ielts/my_class/edm_ielts_wrong.pdf" target="_blank">
                        <img src="{{ env("AWS_S3_IMG_URL") }}/ielts/my_class/img_welcome_2.jpg" alt="">
                        <div class="welcome-text">
                            <p>웰컴패키지 오답노트</p>
                            <i class="ico-download"></i>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="{{ env("AWS_S3_IMG_URL") }}/ielts/my_class/edm_ielts_voca_1300.pdf" target="_blank">
                        <img src="{{ env("AWS_S3_IMG_URL") }}/ielts/my_class/img_welcome_3.jpg" alt="">
                        <div class="welcome-text">
                            <p>웰컴패키지 단어장1</p>
                            <i class="ico-download"></i>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="{{ env("AWS_S3_IMG_URL") }}/ielts/my_class/edm_ielts_voca_writing.pdf" target="_blank">
                        <img src="{{ env("AWS_S3_IMG_URL") }}/ielts/my_class/img_welcome_3.jpg" alt="">
                        <div class="welcome-text">
                            <p>웰컴패키지 단어장2</p>
                            <i class="ico-download"></i>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>

</div>
@endsection



@section('ielts-script')
    {!! resource('js/components/calendar.js') !!}
    {!! resource('js/common/classroom/dashboard.js') !!}
    {!! resource('js/ielts/my_class.js') !!}

    <script>
        function onOpenPlayer(id) {
            const href = "{{ route('classroom.player', ['service' => $service, 'lectureId' => ':id']) }}";
            return window.open(href.replace(":id", id));
        }
    </script>
@endsection