@extends("academy.layout", ['service' => 'academy'])

@section("academy-css")

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

    {!! setResources([ 'toast-calendar']) !!}
@endsection



@section("academy-content")
<div class="container">
    <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">
            <div class="my-class-menu">
                <ul>
                    <li class="on">
                        <a href="#none">
                            <i class="ico-myclass-01"></i>
                            <span>메인</span>
                        </a>
                    </li>
                    <li>
                        <a href="#none">
                            <i class="ico-myclass-07"></i>
                            <span>현장 강의</span>
                        </a>
                    </li>
                    <li>
                        <a href="#none">
                            <i class="ico-myclass-03"></i>
                            <span>CDT<br>모의고사</span>
                        </a>
                    </li>
                    <li>
                        <a href="#none">
                            <i class="ico-myclass-02"></i>
                            <span>자료실</span>
                        </a>
                    </li>
                    <li>
                        <a href="#none">
                            <i class="ico-myclass-05"></i>
                            <span>1:1<br>게시판</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="my-class-contents">
                <!-- 수강중인 상품 -->
                <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>
                                    <tr class="no-data">
                                        <td colspan="7" class="text-center">
                                            수강 중인 상품이 없습니다.
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="pd">
                                            <img src="https://placehold.co/136x85?text=thumbnail" alt="">
                                            <span title="N개월 알짜패스패스 패스">N개월 알짜패스패스 패스</span>
                                        </td>
                                        <td class="option"><a href="#none" title="(제너럴) 라이팅 스피킹 30일 완성 PA111">(제너럴) 라이팅
                                                스피킹 30일 완성 PA111
                                                test test test</a></td>
                                        <td class="text-center">5회</td>
                                        <td class="text-center">3회</td>
                                        <td class="text-center date">24.03.01 ~ 24.09.30</td>
                                        <td class="text-center td-rate">100%</td>
                                        <td class="text-right">
                                            <a class="my-btn-default" href="#none"><i
                                                    class="ico-go-class"></i><span>수강하기</span></a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="pd">
                                            <img src="https://placehold.co/136x85?text=thumbnail" alt="">
                                            <span title="N개월 알짜패스패스 패스">N개월 알짜패스패스 패스</span>
                                        </td>
                                        <td class="option"><a href="#none" title="(제너럴) 라이팅 스피킹 30일 완성 PA111">(제너럴) 라이팅
                                                스피킹 30일 완성 PA111
                                                test test test</a></td>
                                        <td class="text-center">5회</td>
                                        <td class="text-center">3회</td>
                                        <td class="text-center date">24.03.01 ~ 24.09.30</td>
                                        <td class="text-center td-rate">100%</td>
                                        <td class="text-right">
                                            <a class="my-btn-default" href="#none"><i
                                                    class="ico-go-class"></i><span>수강하기</span></a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="pd">
                                            <img src="https://placehold.co/136x85?text=thumbnail" alt="">
                                            <span title="N개월 알짜패스패스 패스">N개월 알짜패스패스 패스</span>
                                        </td>
                                        <td class="option"><a href="#none" title="(제너럴) 라이팅 스피킹 30일 완성 PA111">(제너럴) 라이팅
                                                스피킹 30일 완성 PA111
                                                test test test</a></td>
                                        <td class="text-center">5회</td>
                                        <td class="text-center">3회</td>
                                        <td class="text-center date">24.03.01 ~ 24.09.30</td>
                                        <td class="text-center td-rate">100%</td>
                                        <td class="text-right">
                                            <a class="my-btn-default" href="#none"><i
                                                    class="ico-go-class"></i><span>수강하기</span></a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <!-- //수강중인 상품 -->
                <!-- 현황 -->
                <div class="row">
                    <div class="column square">
                        <div class="card pd16 text-center product">
                            <div class="calendar-header">
                                <div class="month"> 2024년 10월 </div>
                            </div>
                            <div class="schedule-calendar toggle-sche" id="calendar"></div>
                        </div>
                    </div>
                    <div class="column ">
                        <div class="row calendar-detail">
                            <div class="column c100p">
                                <div class="card">
                                    <h5>2024.02.16(금)</h5>
                                    <ul>
                                        <li>
                                            <span class="line cdt"></span>
                                            <p>CDT 모의고사</p>
                                            <p class="red">공휴일</p>
                                        </li>
                                        <li>
                                            <span class="line pbt"></span>
                                            <p>PBT 모의고사</p>
                                            <p class="red">휴일</p>
                                        </li>
                                        <li>
                                            <span class="line etc"></span>
                                            <p>[개강] 오후 2시 %강좌명%</p>
                                        </li>
                                        <li>
                                            <span class="line etc"></span>
                                            <p>[개강] 오후 2시 %강좌명%</p>
                                        </li>
                                        <li>
                                            <span class="line etc"></span>
                                            <p>[개강] 오후 2시 %강좌명%</p>
                                        </li>
                                        <li>
                                            <span class="line etc"></span>
                                            <p>[개강] 오후 2시 %강좌명%</p>
                                        </li>
                                        <li>
                                            <span class="line etc"></span>
                                            <p>[개강] 오후 2시 %강좌명%</p>
                                        </li>
                                        <li>
                                            <span class="line etc"></span>
                                            <p>[개강] 오후 2시 %강좌명%</p>
                                        </li>
                                        <li>
                                            <span class="line etc"></span>
                                            <p>[개강] 오후 2시 %강좌명%</p>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="row crt">
                            <div class="column c50p">
                                <div class="card pd16 text-center">
                                    <div>
                                        <i class="ico-crt-01"></i>
                                        <h5>CDT 모의고사</h5>
                                    </div>
                                    <div>
                                        <p><strong>10/10</strong></p>
                                        <p><span>잔여횟수/전체횟수</span></p>
                                        <a href="#none">응시하러가기</a>
                                    </div>
                                </div>
                            </div>
                            <div class="column c50p">
                                <div class="card pd16 text-center">
                                    <div>
                                        <i class="ico-crt-02"></i>
                                        <h5>첨삭</h5>
                                    </div>
                                    <div>
                                        <p><strong>10/10</strong></p>
                                        <p><span>잔여횟수/전체횟수</span></p>
                                        <a href="#none">첨삭 받으러가기</a>
                                    </div>
                                </div>
                            </div>
                            <div class="column c50p">
                                <div class="card pd16 text-center">
                                    <div>
                                        <i class="ico-crt-03"></i>
                                        <h5>기기관리</h5>
                                    </div>
                                    <div>
                                        <p><strong>10/10</strong></p>
                                        <p><span>등록대수/가능대수</span></p>
                                        <a href="#none">기기 설정하기</a>
                                    </div>
                                </div>
                            </div>
                            <div class="column c50p">
                                <div class="card pd16 text-center">
                                    <div>
                                        <i class="ico-crt-05"></i>
                                        <h5>수강증</h5>
                                    </div>
                                    <div>
                                        <a href="#none">수강증 확인</a>
                                    </div>
                                </div>
                            </div>
                        </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">
                                    1:1문의내역이 없습니다.
                                </li> -->
                                <li>
                                    <a href="#none" title="[기본 다지기] Listening part 4강 스텔라 관련하여 문의드립니다.">[기본 다지기]
                                        Listening part 4강 스텔라 관련하여 문 …</a>
                                    <span class="date">24.03.11</span>
                                </li>
                                <li>
                                    <a href="#none" title="[기본 다지기] Listening part 4강 스텔라 관련하여 문의드립니다.">[기본 다지기]
                                        Listening part 4강 스텔라 관련하여 문 …</a>
                                    <span class="date">24.03.11</span>
                                </li>
                                <li>
                                    <a href="#none" title="[기본 다지기] Listening part 4강 스텔라 관련하여 문의드립니다.">[기본 다지기]
                                        Listening part 4강 스텔라 관련하여 문 …</a>
                                    <span class="date">24.03.11</span>
                                </li>
                                <li>
                                    <a href="#none" title="[기본 다지기] Listening part 4강 스텔라 관련하여 문의드립니다.">[기본 다지기]
                                        Listening part 4강 스텔라 관련하여 문 …</a>
                                    <span class="date">24.03.11</span>
                                </li>
                                <li>
                                    <a href="#none" title="[기본 다지기] Listening part 4강 스텔라 관련하여 문의드립니다.">[기본 다지기]
                                        Listening part 4강 스텔라 관련하여 문 …</a>
                                    <span class="date">24.03.11</span>
                                </li>
                            </ul>
                        </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="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="#none">
                            <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="#none">
                            <img src="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/my_class/img_welcome_4.jpg" alt="">
                            <p>웰컴패키지 단어장1</p>
                            <i class="ico-download"></i>
                        </a>
                    </div>
                    <div class="column c212">
                        <a class="card pd2416" href="#none">
                            <img src="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/my_class/img_welcome_4.jpg" alt="">
                            <p>웰컴패키지 단어장2</p>
                            <i class="ico-download"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection



@section("academy-script")
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.14/index.global.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@6.1.14/index.global.min.js"></script>
    <script>
        var swiper = new Swiper(".eventSwiper", {
            direction: "vertical",
            autoplay: {
                delay: 5000,
                disableOnInteraction: false,
            }
        });
    </script>
    {{-- <script>
        document.addEventListener('DOMContentLoaded', function () {
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                headerToolbar: {
                    left: 'prev,next',
                    center: 'title',
                    // right: 'dayGridMonth,timeGridWeek,listWeek'
                    right: 'today'
                },
            });
            calendar.render();
        });
    </script> --}}

    <script>
        $(function() {
            new Calendar('calendar');
        })
    </script>
@endsection