@extends('ielts.layout')

@section('ielts-css')
    {!! resource('css/myclass/my_class.css') !!}
    {!! resource("css/components/calendar.css") !!}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" />
@endsection

@section("ielts-content")
<div class="container myClassPage">
    <div class="my-class-wrapper">
        <div class="wrapper">
            @include('classroom.ielts.menu')

            <div class="my-class-contents" id="popup-form">
                <!-- 수강 및 출석 -->
                <div class="row">
                    <div class="column c80p">
                        @if ($latestAttendance)
                        <div class="card">
                            <div class="main-process">
                                <h4>최근 수강</h4>
                                <p>@if ($User->is->admin) <sup>{{ $latestAttendance->enrollment_id }}</sup> @endif<strong>{{ $latestAttendance->enrollmentCourseLecture->name }}</strong></p>

                                @php
                                    $startDate = Carbon::parse($latestAttendance->enrollment->started_at)->format('Y.m.d');
                                    $endDate = Carbon::parse($latestAttendance->enrollment->ended_at)->format('Y.m.d');
                                    $remainingDays = Carbon::now()->diffInDays(Carbon::parse($latestAttendance->enrollment->ended_at), false);
                                @endphp

                                <p>수강기간: {{ $startDate }} ~ {{ $endDate }} 잔여 수강일: {{ $remainingDays }}일</p>
                                <div class="class-rate">
                                    <p>진도율</p>
                                    <p>{{ $finishedLectures }}강/{{ $totalLectures }}강</p>
                                    <div class="bar">
                                        <div class="bar-inner" style="width:{{ $progressRate }}%"></div>
                                    </div>
                                    <p>{{ $progressRate }}%</p>
                                    <a href="{{ route('classroom.course', ['service' => 'ielts']) }}"><i class="ico-go-class"></i>수강하기</a>
                                </div>
                            </div>
                        </div>
                        @else
                        <div class="card recent">
                            <div class="main-process">
                                <h4>최근 수강</h4>
                                <center>
                                    <p>수강 중인 강좌가 없습니다.</p>
                                    <p></p>
                                    <a href="{{ route('enrol', ['service' => 'ielts']) }}" class="class-rate">
                                        수강 신청하러 가기 >
                                    </a>
                                </center>
                            </div>
                        </div>
                        @endif
                    </div>
                    <div class="column c20p">
                        <div class="card attendance">
                            <div class="main-process2">
                                <h4>출석 현황</h4>

                                <!-- 환급 상품이 아닐 경우 -->
                                @if ($refundableEnrollment)
                                <div class="o-attendance">
                                    <div class="atdc-rate">
                                        {{ $attendanceRate }}%
                                    </div>
                                    <span>잔여 출석일수 {{ $remainingDaysInRefundable }}일</span>
                                    <button type="button" class="detail_popup" onclick="getAttendancePopup({{ $refundableEnrollment?->id }}, 'popup-form')">상세보기</button>
                                </div>
                                @else
                                <div class="x-attendance">환급반 상품이 <br>없습니다</div>
                                @endif


                                <!-- 환급 상품일 경우 -->

                            </div>
                        </div>
                    </div>
                </div>
                <!-- //수강 및 출석 -->

                <!-- 현황 -->
                <div class="row crt">
                    <div class="column c20p">
                        <div class="card pd16 text-center h215">
                            <h5>CDT 모의고사</h5>
                            <i class="ico-crt-01"></i>
                            <p><strong>{{ $remainingCdtCount }}/{{ $cdtCount }}</strong><span>잔여횟수/전체횟수</span></p>
                            {{-- 241218 LHS 링크는 없어도 노출하는 것으로 변경되어, if 문 주석처리해두었습니다.  --}}
                            {{-- @if ($remainingCdtCount) --}}
                            <a href="{{ route('classroom.cdt-list', ['service' => $service]) }}">응시하러가기</a>
                            {{-- @endif --}}
                        </div>
                    </div>
                    <div class="column c20p">
                        <div class="card pd16 text-center h215">
                            <h5>첨삭</h5>
                            <i class="ico-crt-02"></i>
                            <p><strong>{{ $remainingFeedbackCount }}/{{ $feedbackCount }}</strong><span>잔여횟수/전체횟수</span></p>
                            {{-- 241218 LHS 링크는 없어도 노출하는 것으로 변경되어, if 문 주석처리해두었습니다.  --}}
                            {{-- @if ($remainingFeedbackCount) --}}
                            <a href="{{ route('classroom.feedback', ['service' => $service]) }}">첨삭 받으러가기</a>
                            {{-- @endif --}}
                        </div>
                    </div>
                    <div class="column c20p">
                        <div class="card pd16 text-center h215">
                            <h5>기기관리</h5>
                            <i class="ico-crt-03"></i>
                            <p><strong id="deviceCnt">{{ $userDeviceCount }}/3</strong><span>등록대수/가능대수</span></p>
                            @if ($userDeviceCount > 0)
                            <a href="javascript:onClickDevice()" class="popupOn">기기 설정하기</a>
                            @endif
                        </div>
                    </div>
                    <div class="column c20p">
                        <div class="card pd16 text-center h215">
                            <h5>수강후기</h5>
                            <i class="ico-crt-04"></i>
                            <p></p>
                            <a href="{{ route("class.index", ['service' => $service]) }}">수강후기 남기기</a>
                        </div>
                    </div>
                    <div class="column c20p certificateArea">
                        <div class="card pd16 text-center h215">
                            <h5>수강증</h5>
                            <i class="ico-crt-05"></i>
                            <p></p>
                            <a href="javascript:onClickCertificate('ielts')" class="popupOn">수강증 확인</a>

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

                    </div>
                </div>
                <!-- //현황 -->

                <!-- 이벤트 배너 -->
                <div class="row banner">
                    <div class="column c100p">
                        <a href="/ielts/board/event/view/1" class="card" style="background: linear-gradient(90deg, #E6FDF5 0%, #C9E5FB 50%, #A1E0FF 100%); ">
                            <img src="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/banner/ielts/classroom-banner-bg.png" alt="네이버 페이 10,000원, gs25 5,000원, 올리브영 5,000원, 스타벅스 5,000원, 배달의 민족 10,000원">
                        </a>
                    </div>
                </div>
                <!-- //이벤트 배너 -->

                <!-- 학습문의 및 공지사항 -->
                <div class="row notice">
                    <div class="column c50p">
                        <div class="card pd32">
                            <h4>1:1 학습문의</h4>
                            <a class="ico-more" href="{{ route('classroom.study.index', ['service' => $service]) }}"></a>
                            <ul class="board-list">
                                @if ($studies->count()>0)
                                    @foreach ($studies as $post)
                                        @php
                                            $content = $post->content;
                                        @endphp
                                        <li>
                                            @if ($post->status == 1 )
                                                <span @class(['badge', 'green' => $post->status == 1])>답변완료</span>
                                            @endif
                                            <a href="{{ route("classroom.study.view", ['service' => 'ielts', 'id' => $post->id]) }}" title="{{ $content->title }}">{{ $content->title }}</a>
                                            <span class="date">{{ date('y.m.d', strtotime($post->created_at)) }}</span>
                                        </li>
                                    @endforeach
                                @else
                                    <li class="noData">
                                        <div class="flex"><p>등록된 학습문의가 없습니다.</p></div>
                                    </li>
                                @endif

                            </ul>
                        </div>
                    </div>
                    <div class="column c50p">
                        <div class="card pd32">
                            <h4>공지사항</h4>
                            <a class="ico-more" href="{{ route("notice.index", ['service' => 'ielts']) }}"></a>
                            <ul class="board-list">
                                @if ($notices->count()>0)
                                    @foreach ($notices as $notice)
                                        @php
                                            $content = $notice->content;
                                        @endphp
                                        <li>
                                            {{-- 퍼블 확인 후 디자인 변경예정 --}}
                                            <a href="{{ route("notice.view", ['service' => 'ielts', 'id' => $notice->id]) }}" title="{{ $content->title }}">{{ $content->title }}</a>
                                            <span class="date">{{ date('y.m.d', strtotime($notice->created_at)) }}</span>
                                        </li>
                                    @endforeach
                                @else
                                    <li class="noData">
                                        <div class="flex"><p>등록된 공지사항이 없습니다.</p></div>
                                    </li>
                                @endif
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- //학습문의 및 공지사항 -->

                <!-- 수강중인 상품 -->
                <div class="row pd-list">
                    <div class="column c100p">
                        <div class="card pd32">
                            <h4>수강중인 상품</h4>
                            <table class="main-list-table">
                                <colgroup>
                                    <col width="360">
                                    <col width="280">
                                    <col width="50">
                                    <col width="50">
                                    <col width="160">
                                    <col width="60">
                                    <col>
                                </colgroup>
                                <thead>
                                    <tr>
                                        <th>구매상품</th>
                                        <th>옵션</th>
                                        <th>CDT</th>
                                        <th>첨삭</th>
                                        <th>수강기간</th>
                                        <th>진도율</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @if ($enrollments->count()>0)
                                        @foreach ($enrollments as $enrollment)
                                        <tr>
                                            <td>
                                                <div class="pd">
                                                    <img src="{{ $enrollment->product->thumbnail }}" alt="{{ $enrollment->id }}">
                                                    <span title="{{ $enrollment->product->name }}">{{ $enrollment->product->name }}</span>
                                                </div>
                                            </td>
                                            <td class="option">
                                                {{ $enrollment->productOption?->name }}
                                                @if ($User->is->admin)
                                                <div class="ids">
                                                    erm<sup>{{ $enrollment->id }}</sup>  prd<sup>{{ $enrollment->product->id }}</sup> opt<sup>{{ $enrollment->productOption->id }}</sup>
                                                </div>
                                                @endif
                                            </td>
                                            <td class="text-center">{{ !empty($enrollment->enrollmentCdtPasses->count()) ? $enrollment->enrollmentCdtPasses->count().'회':'-' }}</td>
                                            <td class="text-center">{{ !empty($enrollment->enrollmentFeedbackPasses->count()) ? $enrollment->enrollmentFeedbackPasses->count().'회':'-' }}</td>
                                            <td class="date">{{ Carbon::parse($enrollment->started_at)->format('y.m.d') }} ~ {{ Carbon::parse($enrollment->ended_at)->format('y.m.d') }}</td>
                                            <td class="text-center td-rate">{{ round($enrollment->progress_rate) ?? 0 }}%</td>
                                            <td class="text-right">
                                                @if ($enrollment->status == 'READY')
                                                    <a class="my-btn-default" href="{{ route('classroom.course', ['service' => 'ielts']) }}#{{ $enrollment->id }}"><i class="ico-go-class"></i><span>수강하기</span></a>
                                                @else
                                                    <a class="my-btn-default" href="{{ route('classroom.course', ['service' => 'ielts', 'enrollment_id' => $enrollment->id]) }}"><i class="ico-go-class"></i><span>수강하기</span></a>
                                                @endif
                                            </td>
                                        </tr>
                                        @endforeach
                                    @else
                                        <tr class="no-data">
                                            <td colspan="7" class="text-center noData">
                                                <div class="flex"><p>수강 중인 상품이 없습니다.</p></div>
                                            </td>
                                        </tr>
                                    @endif
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <!-- //수강중인 상품 -->

                <div class="row">
                    <div class="column c100p">
                        <h3>웰컴패키지</h3>
                    </div>
                </div>
                <div class="row welcome-package">
                    <div class="column c212">
                        <a class="card pd2416" href="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/my_class/edm_ielts_plan.pdf" target="_blank">
                            <img src="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/my_class/img_welcome_1.jpg" alt="">
                            <p>웰컴패키지 스케줄러</p>
                            <i class="ico-download"></i>
                        </a>
                    </div>
                    <div class="column c212">
                        <a class="card pd2416" href="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/my_class/edm_ielts_wrong.pdf" target="_blank">
                            <img src="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/my_class/img_welcome_2.jpg" alt="">
                            <p>웰컴패키지 오답노트</p>
                            <i class="ico-download"></i>
                        </a>
                    </div>
                    <div class="column c212">
                        <a class="card pd2416" href="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/my_class/edm_ielts_voca_1300.pdf" target="_blank">
                            <img src="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/my_class/img_welcome_3.jpg" alt="">
                            <p>웰컴패키지 단어장1</p>
                            <i class="ico-download"></i>
                        </a>
                    </div>
                    <div class="column c212">
                        <a class="card pd2416" href="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/my_class/edm_ielts_voca_writing.pdf" target="_blank">
                            <img src="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/my_class/img_welcome_3.jpg" alt="">
                            <p>웰컴패키지 단어장2</p>
                            <i class="ico-download"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

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

    </script>
@endsection