@extends('layout')

@section('css')
<link rel="stylesheet" href="{{ env('AWS_S3_LIB_URL') }}/swiper/9.4.1/swiper.min.css">
<script src="{{ env('AWS_S3_LIB_URL') }}/swiper/9.4.1/swiper.min.js"></script>

{!! resource('css/my_class.css') !!}
@endsection

@section('gnb', view('gnb', ['service'=>$service]))

@section('subgnb', view('ielts.gnb'))

@section('content')
<main class="container classroom">
    <div class="path-wrapper">
        <div class="wrapper">
            <dl class="path">
                <dt class="blind">path</dt>
                <dd>전체</dd>
                <dd>나의 강의실</dd>
                <dd>메인</dd>
            </dl>
        </div>
    </div>
    <div class="my-class-wrapper">
        <div class="wrapper">
            @include('classroom.menu')
            <div class="my-class-contents">
                <!-- 수강 및 출석 -->
                <div class="row">
                    <div class="column c80p">
                        @if ($latestAttendance)
                            <div class="card">
                                <div class="main-process">
                                    <h4>최근 수강</h4>
                                    <p>
                                        <strong>{{ $latestAttendance->enrollmentCourseLecture->name }}</strong>
                                    </p>

                                    <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

                                        수강기간: 
                                        {{ $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="#none"><i class="ico-go-class"></i>수강하기</a>
                                    </div>
                                </div>
                            </div>
                        @else
                            <div class="card">
                                <div class="main-process">
                                    <h4>최근 수강</h4>
                                    <center>
                                        <p>수강 중인 강좌가 없습니다.</p>
                                        <a href="{{ route('ielts.enrol') }}" class="class-rate">
                                            수강 신청하러 가기 >
                                        </a>
                                    </center>
                                </div>
                            </div>
                        @endif
                    </div>
                    <div class="column c20p">
                        <div class="card">
                            <div class="main-process2">
                                <h4>출석현황</h4>
                                <div class="atdc-rate">
                                    {{ $attendanceRate }}%
                                </div>
                                <span>
                                    잔여 출석일수 {{ $remainingDaysInRefundable }}일
                                </span>
                                <a href="#none">상세보기</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- //수강 및 출석 -->
                <!-- 현황 -->
                <div class="row crt">
                    <div class="column c20p">
                        <div class="card pd16 text-center">
                            <h5>CDT 모의고사</h5>
                            <i class="ico-crt-01"></i>
                            <p><strong>10/10</strong><span>잔여횟수/전체횟수</span></p>
                            <a href="#none">응시하러가기</a>
                        </div>
                    </div>
                    <div class="column c20p">
                        <div class="card pd16 text-center">
                            <h5>첨삭</h5>
                            <i class="ico-crt-02"></i>
                            <p><strong>10/10</strong><span>잔여횟수/전체횟수</span></p>
                            <a href="#none">첨삭 받으러가기</a>
                        </div>
                    </div>
                    <div class="column c20p">
                        <div class="card pd16 text-center">
                            <h5>기기관리</h5>
                            <i class="ico-crt-03"></i>
                            <p><strong>10/10</strong><span>등록대수/가능대수</span></p>
                            <a href="#none">기기 설정하기</a>
                        </div>
                    </div>
                    <div class="column c20p">
                        <div class="card pd16 text-center">
                            <h5>수강후기</h5>
                            <i class="ico-crt-04"></i>
                            <p></p>
                            <a href="#none">수강후기 남기기</a>
                        </div>
                    </div>
                    <div class="column c20p">
                        <div class="card pd16 text-center">
                            <h5>수강증</h5>
                            <i class="ico-crt-05"></i>
                            <p></p>
                            <a href="#none">수강증 확인</a>
                        </div>
                    </div>
                </div>
                <!-- //현황 -->
                <!-- 이벤트 배너 -->
                <div class="row banner">
                    <div class="column c100p">
                        <div class="card">
                            <ul>
                                <li>
                                    <div class="swiper eventSwiper">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide">
                                                <span class="badge red">Event</span>
                                                <a href="#none">합격 후기 작성시 네이버페이 포인트 30,000원 100% 증정!</a>
                                            </div>
                                            <div class="swiper-slide">
                                                <span class="badge red">Event</span>
                                                <a href="#none">합격 후기 작성시 네이버페이 포인트 30,000원 100% 증정!</a>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- //이벤트 배너 -->
                <!-- 학습문의 및 공지사항 -->
                <div class="row notice">
                    <div class="column c50p">
                        <div class="card pd32">
                            <h4>1:1 학습문의</h4>
                            <a class="ico-more" href="#none"></a>
                            <ul>
                                <li>
                                    <span class="badge green">답변완료</span>
                                    <a href="#none" title="[기본 다지기] Listening part 4강 스텔라 관련하여 문의드립니다.">[기본 다지기] Listening part 4강 스텔라 관련하여 문 …</a>
                                    <span class="date">24.03.11</span>
                                </li>
                                <li>
                                    <span class="badge">미답변</span>
                                    <a href="#none" title="[기본 다지기] Listening part 4강 스텔라 관련하여 문의드립니다.">[기본 다지기] Listening part 4강 스텔라 관련하여 문 …</a>
                                    <span class="date">24.03.11</span>
                                </li>
                                <li>
                                    <span class="badge">미답변</span>
                                    <a href="#none" title="[기본 다지기] Listening part 4강 스텔라 관련하여 문의드립니다.">[기본 다지기] Listening part 4강 스텔라 관련하여 문 …</a>
                                    <span class="date">24.03.11</span>
                                </li>
                                <li>
                                    <span class="badge">미답변</span>
                                    <a href="#none" title="[기본 다지기] Listening part 4강 스텔라 관련하여 문의드립니다.">[기본 다지기] Listening part 4강 스텔라 관련하여 문 …</a>
                                    <span class="date">24.03.11</span>
                                </li>
                                <li>
                                    <span class="badge">미답변</span>
                                    <a href="#none" title="[기본 다지기] Listening part 4강 스텔라 관련하여 문의드립니다.">[기본 다지기] Listening part 4강 스텔라 관련하여 문 …</a>
                                    <span class="date">24.03.11</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="column c50p">
                        <div class="card pd32">
                            <h4>공지사항</h4>
                            <a class="ico-more" href="#none"></a>
                            <ul>
                                <li class="no-data">
                                    공지사항이 없습니다.
                                </li>
                            </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="318">
                                    <col width="290">
                                    <col width="58">
                                    <col width="64">
                                    <col width="156">
                                    <col width="62">
                                    <col width="138">
                                </colgroup>
                                <thead>
                                    <tr>
                                        <th>구매상품</th>
                                        <th>옵션</th>
                                        <th>CDT</th>
                                        <th>첨삭</th>
                                        <th>수강기간</th>
                                        <th>진도율</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @if ($enrollments)
                                        @foreach ($enrollments as $enrollment)
                                        <tr>
                                            <td class="pd">
                                                <img src="{{ $enrollment->product->thumbnail }}" alt="{{ $enrollment->id }}">
                                                <span title="{{ $enrollment->product->name }}">[{{ $enrollment->id }}]{{ $enrollment->product->name }}</span>
                                            </td>
                                            <td class="option"><a href="#none" title="{{ $enrollment->productOption->name }}">{{ $enrollment->productOption->name }}</a></td>
                                            <td class="text-center">{{ !empty($enrollment->enrollmentCdtGroups->count()) ? $enrollment->enrollmentCdtGroups->count().'회':'-' }}</td>
                                            <td class="text-center">{{ !empty($enrollment->enrollmentCorrections->count()) ? $enrollment->enrollmentCorrections->count().'회':'-' }}</td>
                                            <td class="text-center 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">{{ $enrollment->progress_rate ?? 0 }}%</td>
                                            <td class="text-right">
                                                <a class="my-btn-default" href="#none"><i class="ico-go-class"></i><span>수강하기</span></a>
                                            </td>
                                        </tr>
                                        @endforeach
                                    @else
                                        <tr class="no-data">
                                            <td colspan="7" class="text-center">
                                                수강 중인 상품이 없습니다.
                                            </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="#none">
                            <img src="{{ env('AWS_S3_IMG_URL') }}/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="#none">
                            <img src="{{ env('AWS_S3_IMG_URL') }}/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="#none">
                            <img src="{{ env('AWS_S3_IMG_URL') }}/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="#none">
                            <img src="{{ env('AWS_S3_IMG_URL') }}/ielts/my_class/img_welcome_3.jpg" alt="">
                            <p>웰컴패키지 단어장2</p>
                            <i class="ico-download"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
@endsection

@section('footer', view('footer'))

@section('script')
<script>
    var swiper = new Swiper(".eventSwiper", {
        direction: "vertical",
        autoplay: {
            delay: 5000,
            disableOnInteraction: false,
        }
    });
</script>
@endsection