@extends('ielts.layout')

@section('ielts-css')
    {!! resource('css/ielts/sub.css') !!}

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



@section("ielts-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>
                        <a href="#none">
                            <i class="ico-myclass-01"></i>
                            <span>메인</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-03"></i>
                            <span>첨삭 학습</span>
                        </a>
                    </li>
                    <li>
                        <a href="#none">
                            <i class="ico-myclass-04"></i>
                            <span>CDT 모의고사</span>
                        </a>
                    </li>
                    <li>
                        <a href="#none">
                            <i class="ico-myclass-05"></i>
                            <span>게시판</span>
                        </a>
                    </li>
                    <li class="on">
                        <a href="#none">
                            <i class="ico-myclass-06"></i>
                            <span>휴강/연장 신청</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="my-class-contents">
                <div class="row">
                    <div class="column c100p">
                        <div class="card my-class-sub">
                            <a href="#none" class="button primary" data-popup="popup1">출석 현황</a> <br><br>
                            <a href="#none" class="button primary" data-popup="popup2">수강증 출력</a> <br><br>
                            <a href="#none" class="button primary" data-popup="popup3">임시저장 리스트</a> <br><br>
                            <hr><br>
                            <a href="#none" class="button primary popupOn">popup (최종)</a><br><br>
                            <a href="#none" class="button popupOn">popup - 퍼블리싱 확인용 (휴강/연장)</a><br><br>
                            <hr><br>
                            <a href="#none" class="button primary alertOn">alert (최종)</a> <br><br>
                            <a href="#none" class="button alertOn">alert - 퍼블리싱 확인용</a> <br><br>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- popup1 -->
<div class="popup-wrap" id="popup1">
    <div class="popup-header">
        <p>출석 현황</p>
        <a href="#none" class="ico-close"></a>
    </div>
    <div class="popup-contents">
        <strong>상품명%+%옵션명상품명%+%옵션명상품명%+%옵션명</strong>
        <p>(제너럴)ALL-PASS IELTS + 매주첨삭</p>
        <div class="calendar-wrap">
            <div class="calendar-status">
                <dl>
                    <dt>총이용일</dt>
                    <dd>365</dd>
                </dl>
                <dl>
                    <dt>출석</dt>
                    <dd class="green">5</dd>
                </dl>
                <dl>
                    <dt>결석</dt>
                    <dd class="red">365</dd>
                </dl>
                <dl>
                    <dt>출석률</dt>
                    <dd>99.83%</dd>
                </dl>
            </div>
            <div class="schedule-calendar toggle-sche" id="calendar"></div>
            <p class="noti-text">당일 출석건은 익일에 확인이 가능합니다.</p>
        </div>
    </div>
</div>
<!-- popup2 -->
<div class="popup-wrap" id="popup2">
    <div class="popup-header">
        <p>수강증 출력</p>
        <a href="#none" class="ico-close"></a>
    </div>
    <div class="popup-contents">
        <select name="" id="" class="select-option small">
            <option value="" disabled selected>상품을 선택해 주세요.</option>
            <option value="">%상품%</option>
            <option value="">%상품%</option>
            <option value="">%상품%</option>
            <option value="">%상품%</option>
            <option value="">%상품%</option>
        </select>
        <div class="certificate">
            <div class="head">수강증</div>
            <div class="contents">
                <div class="logo-edm">ed:m</div>
                <ul>
                    <li>
                        <dl>
                            <dt>성명</dt>
                            <dd>문다윤(Dev01)</dd>
                        </dl>
                    </li>
                    <li>
                        <dl>
                            <dt>상품명</dt>
                            <dd>(제너럴)ALL-PASS IELTS + 매주첨삭) ALL-PASS IELTS + 매주첨삭첨삭</dd>
                        </dl>
                    </li>
                    <li>
                        <dl>
                            <dt>수강기간</dt>
                            <dd>2023.04.12~2026.06.04</dd>
                        </dl>
                    </li>
                    <li>
                        <dl>
                            <dt>출석율</dt>
                            <dd>91.99%</dd>
                        </dl>
                    </li>
                </ul>
                <p class="bold-text">위 수강 현황은 사실과 같음을 증명합니다.</p>
                <p class="date">2024년 01월 24일</p>
                <p class="logo-edu">ed:m education</p>
                <p class="ceo">사업자등록번호 : 220-86-39587 대표 : 서동성</p>
            </div>
        </div>
    </div>
    <div class="popup-btn">
        <a href="#none" class="button black line">인쇄</a>
        <a href="#none" class="button black line">닫기</a>
    </div>
</div>
<!-- popup3 -->
<div class="popup-wrap w740" id="popup3">
    <div class="popup-header">
        <p>임시저장 리스트</p>
        <a href="#none" class="ico-close"></a>
    </div>
    <div class="popup-contents imsi">
        <input type="radio" id="imsi1" name="imsi">
        <label for="imsi1">
            <dl class="imsi-wrap">
                <dt class="ico-imsi"></dt>
                <dd>
                    <div class="badge-wrap">
                        <span class="badge">Basic</span>
                        <span class="badge">Writing</span>
                        <span class="badge gray">N회차</span>
                        <span class="date">작성일 23.04.02</span>
                    </div>
                    <div class="title">첨삭명이 들어갑니다.첨삭명이 들어갑니다.첨삭명이 들어갑니다.</div>
                    <div class="subject">Discuss both views and give your opinio</div>
                    <div class="contents">Some people say that the best way to improve public health is by increasing the number of sports facilities. Other, however, say that this would have little effect on public health so that other measures are required. Discuss both these views and give your own opinion</div>
                </dd>
            </dl>
        </label>
        <input type="radio" id="imsi2" name="imsi">
        <label for="imsi2">
            <dl class="imsi-wrap">
                <dt class="ico-imsi"></dt>
                <dd>
                    <div class="badge-wrap">
                        <span class="badge">Basic</span>
                        <span class="badge">Writing</span>
                        <span class="badge gray">N회차</span>
                        <span class="date">작성일 23.04.02</span>
                    </div>
                    <div class="title">첨삭명이 들어갑니다.첨삭명이 들어갑니다.첨삭명이 들어갑니다.</div>
                    <div class="subject">Discuss both views and give your opinio</div>
                    <div class="contents">Some people say that the best way to improve public health is by increasing the number of sports facilities. Other, however, say that this would have little effect on public health so that other measures are required. Discuss both these views and give your own opinion</div>
                </dd>
            </dl>
        </label>
    </div>
</div>

<div class="popupArea">
    <!-- popup -->
    <div class="popupWrap myClass">

        <!-- popup 가로크기에 따라 클래스 추가 여부 결정 :: max-width: 600 -> large , 기본 : max-width: 420 -->
        <div class="popup large">
            <div class="closeIcon closeBtn"></div>

            <!-- 아이콘 클래스명으로 모양이 바뀜 // icon-c(check), icon-e(exclamation), icon-q(question) -->
            <i class="icon-q"></i>
            <div class="textWrap">
                <div class="title">휴강 신청 안내</div>

                <!-- strong-caption 이 붙으면 강조 스타일로 변경됩니다. (컬러, 굵기, 크기 등) -->
                <!-- <p class="caption">휴강 신청을 하시겠습니까? 휴강 신청은 1회로 제한됩니다. </p> -->
                <p class="caption strong-caption">휴강 신청을 하시겠습니까? 휴강 신청은 1회로 제한됩니다. </p>
                <div class="info">

                    <div class="scrollWrap">
                        <!-- <p>휴강 상태를 해지하시겠습니까? <br>확인 선택 시 즉시 수강이 가능합니다. <br>(휴강 신청권은 더이상 사용이 불가합니다.)</p> -->
                        <div class="grayBox">
                            <p class="listTitle">휴강정보</p>
                            <ul class="dotList">
                                <li>신청 강좌 상품명: %상품명% %옵션명%</li>
                                <li>휴강 기간: YYYY.MM.DD ~ YY.MM.DD</li>
                                <li>수강 재시작일: YYYY.MM.DD</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="buttonWrap flex">
                <button type="button" class="btn cancel closeBtn">취소</button>
                <a href="#none" class="btn">확인</a>
                <!-- a태그는 disabled가 필요하면 클래스로 들어갑니다 -->
            </div>

        </div>
        <div class="dim"></div>
    </div>

    <!-- popup :: 퍼블리싱 확인용 -->
    <div class="popupWrap myClass">

        <div class="popup">

            <!-- 아이콘 클래스명으로 모양이 바뀜 // icon-c(check), icon-e(exclamation), icon-q(question) -->
            <i class="icon-q"></i>
            <div class="textWrap">
                <div class="title">휴강 해지</div>
                <div class="info">

                    <div class="scrollWrap">
                        <p>휴강 상태를 해지하시겠습니까? <br>확인 선택 시 즉시 수강이 가능합니다. <br>(휴강 신청권은 더이상 사용이 불가합니다.)</p>
                    </div>
                </div>
            </div>
            <div class="buttonWrap flex">
                <button type="button" class="btn cancel closeBtn">취소</button>
                <a href="#none" class="btn">확인</a> <!-- a태그는 disabled가 필요하면 클래스로 들어갑니다 -->
            </div>

        </div>
        <div class="dim"></div>
    </div>
</div>

<div class="alertArea">
    <!-- alert -->
    <div class="alertWrap">

        <!-- alert 가로크기에 따라 클래스 추가 여부 결정 :: max-width: 420 -> large , 기본 : max-width: 360 -->
        <div class="alert large">
            <div class="closeIcon closeBtn"></div>

            <!-- 아이콘 클래스명으로 모양이 바뀜 // icon-c(check), icon-e(exclamation), icon-q(question) -->
            <i class="icon-c"></i>
            <p class="title"><b>첨삭 신청 완료!</b></p>
            <!-- <p class="caption">캡션이 있을 수 있습니다. 캡션이 있을 수 있습니다.</p> -->
            <div class="alert-contents">
                <p>답변은 등록일로부터 3~5일 정도 소요됩니다. <br>(영업일 기준)</p>
            </div>
            <a href="" class="btn alert-btn">확인</a>
        </div>

        <div class="dim"></div>
    </div>

    <!-- alert :: 퍼블리싱 확인용 -->
    <div class="alertWrap">
        <div class="alert">
            <div class="closeIcon closeBtn"></div>

            <div class="alert-contents">
                <p>수강을 시작하시겠습니까?</p>
            </div>
            <a href="" class="btn alert-btn">확인</a>
        </div>

        <div class="dim"></div>
    </div>
</div>

@endsection



@section('ielts-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>
        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>
        $(document).ready(function () {
            $('a[data-popup]').on('click', function () {
                var thisAlert = $(this).attr('data-popup');
                $('#' + thisAlert).addClass('on')
            });

            $('.popup-wrap .ico-close').on('click', function () {
                $(this).closest('.popup-wrap').removeClass('on')
            });
            $('.popup-btn .button').on('click', function () {
                $(this).closest('.popup-wrap').removeClass('on')
            });
        });
    </script>
@endsection