@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/common/nice-select-mo.css') !!}
@endsection



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

    <div id="nav">
        <a href="#none" class="ico-back">뒤로가기</a>
        <h2>휴강/연장신청</h2>
    </div>
    <div id="tab">
        <ul>
            <li class="on">
                <a href="#none">휴강신청</a>
            </li>
            <li>
                <a href="#none">무료연장신청</a>
            </li>
            <li>
                <a href="#none">유료연장신청</a>
            </li>
        </ul>
    </div>
    <div id="container" class="bg-gray">
        <div id="cnt-tab">
            <ul>
                <li class="on">
                    <a href="#none">신청하기</a>
                </li>
                <li>
                    <a href="#none">신청내역</a>
                </li>
            </ul>
        </div>
        <div class="bg-lightgreen">
            · 휴강신청은 각 강좌당 수강기간 내에 단 <strong>1회</strong>만 가능합니다. <br>
            · <strong>무제한 프리패스의 경우 연장신청만 가능</strong>합니다. (휴강신청 불가) <br>
            · 휴강/연장신청이 가능한 상품에 한해 조회됩니다. <br>
            · 잔여 수강기간이 7일 미만인 경우 휴강이 불가합니다.
        </div>
        <div class="filter">
            <select class="select-option wide" name="" id="" required>
                <option value="" disabled selected>강좌를 선택해 주세요.</option>
                <option value="" date="수강기간 : 2024.03.19~24.09.30">%상품명% %옵션명%</option>
                <option value="" date="수강기간 : 2024.03.19~24.09.30">%상품명% %옵션명%</option>
                <option value="" date="수강기간 : 2024.03.19~24.09.30">%상품명% %옵션명%</option>
                <option value="" date="수강기간 : 2024.03.19~24.09.30">%상품명% %옵션명%</option>
            </select>
        </div>
        <div class="option-category">
            <dl class="w100">
                <dt>
                    선택 강좌
                </dt>
                <dd>
                    <p>입문 올패스 180일 입문 올패스 180일 입문 올패스 180일</p>
                </dd>
            </dl>
            <dl class="w50">
                <dt>
                    휴강시작일 선택
                </dt>
                <dd>
                    <input type="date">
                </dd>
            </dl>
            <dl class="w50">
                <dt>
                    휴강기간 선택
                </dt>
                <dd>
                    <select name="" id="" required class="select-option wide">
                        <option value="" disabled selected>기간선택</option>
                        <option value="">5일</option>
                        <option value="">10일</option>
                        <option value="">15일</option>
                        <option value="">20일</option>
                        <option value="">25일</option>
                        <option value="">30일</option>
                    </select>
                </dd>
            </dl>
            <a href="#none" class="btn-go on">
                휴강 신청
            </a>
        </div>
    </div>
</div>
@endsection



@section('ielts-script')

    {!! resource('js/common/jquery.nice-select-mo.js') !!}
    <script>
        $(document).ready(function () {
            $('.select-option').niceSelect();
        });
    </script>
@endsection