@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="{{ route('classroom.dashboard', ['service' => ! empty($service)&& in_array($service, ['ielts', 'academy']) ? $service : 'ielts' ]) }}" class="ico-back">뒤로가기</a>
            <h2>휴강/연장신청</h2>
        </div>
        <div id="tab">
            <ul>
                <li class="on">
                    <a href="#none">휴강신청</a>
                </li>
                <li>
                    <a href="{{ route('classroom.extension', ['service' => 'ielts']) }}">무료연장신청</a>
                </li>
                <li>
                    <a href="{{ route('classroom.extension-payment', ['service' => 'ielts']) }}">유료연장신청</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 id="tab-cont1">
                @if ($enrollments->count() == 0)
                    <div class="option-category">
                        <p>휴강신청 대상강좌가 없습니다.</p>
                    </div>
                @else
                    <form name="pause-form" method="post" action="{{ route('classroom.pause.process', ['service' => 'ielts']) }}">
                    <div class="filter">
                        @csrf
                        @if ($enrollment_id)
                            <input type="hidden" name="enrollment_id" value="{{ $enrollment_id }}">
                        @else
                            <select class="select-option wide" name="enrollment_id" required
                                    onchange="alterCourse(this)">
                                <option value="">강좌를 선택해 주세요.</option>
                                @foreach($enrollments as $e)
                                    <option value="{{ $e->id }}" date="수강기간 : {{ $e->started_at }}~{{ $e->ended_at }}">
                                        @if ($User->is->admin)
                                            {{ $e->id }}
                                        @endif
                                        {{ $e->product->name }} {{ $e->productOption->name }}
                                    </option>
                                @endforeach
                            </select>
                        @endif
                    </div>
                    <div class="option-category">
                        <dl class="w100">
                            <dt>
                                선택 강좌
                            </dt>
                            <dd id="course-wrap">
                                @if ($enrollment_id)
                                    <p>({{ ucfirst($enrollment->product->module) }}
                                        ) {{ $enrollment->product->name }} {{ $enrollment->productOption->name }}</p>
                                @endif
                            </dd>
                        </dl>
                        <dl class="w50">
                            <dt>
                                휴강시작일 선택
                            </dt>
                            <dd>
                                <input type="text" required name="started_at" id="started_at" autocomplete="off"
                                       class="w140" placeholder="YYYY-MM-DD" readonly>
                            </dd>
                        </dl>
                        <dl class="w50">
                            <dt>
                                휴강기간 선택
                            </dt>
                            <dd>
                                <select name="period" required class="select-option wide">
                                    <option value="" selected>기간선택</option>
                                    <option value="5">5일</option>
                                    <option value="10">10일</option>
                                    <option value="15">15일</option>
                                    <option value="20">20일</option>
                                    <option value="25">25일</option>
                                    <option value="30">30일</option>
                                </select>
                            </dd>
                        </dl>
                        <button type="submit" class="btn-go on">
                            휴강 신청
                        </button>
                    </div>
                    </form>
                @endif
            </div>
            <div id="tab-cont2" style="display:none;">
                @if ($enrollmentPauses->count() == 0)
                    <div class="option-category cancel2">
                        <p>신청 내역이 없습니다.</p>
                    </div>
                @else
                    @foreach ($enrollmentPauses as $pause)
                        <div class="option-category cancel2" id="pause{{ $pause->id }}">
                            <p>
                                @if ($User->is->admin){{ $pause->enrollment->id }}@endif
                                ({{ ucfirst($pause->enrollment->module) }}) {{ $pause->enrollment->product->name }} {{ $pause->enrollment->productOption->name }}
                            </p>
                            <dl>
                                <dt>휴강기간:</dt>
                                <dd>{{ Carbon::parse($pause->started_at)->format('y.m.d') }} ~ {{ $pause->calculated_ended_at->format('y.m.d') }} <span>(휴강신청일: {{Carbon::parse($pause->created_at)->format('y.m.d')}})</span></dd>
                            </dl>
                            <div class="btn-wrap">
                                @if ($pause->status == '휴강중')
                                    <span class="status">휴강중</span>
                                    <a href="javascript:void(0);" class="btn-line" onclick="resume({{ $pause->id }})">휴강 해제
                                    </a>
                                @elseif($pause->status == '휴강종료')
                                    <span class="status">휴강종료</span>
                                @endif

                            </div>
                        </div>
                    @endforeach
                @endif
            </div>
        </div>
    </div>
@endsection



@section('ielts-script')

    {!! resource('js/common/jquery.nice-select-mo.js') !!}
    <script>
        function alterCourse(obj) {
            const selectedOption = obj.options[obj.selectedIndex];
            const course_name = selectedOption.textContent;

            $('#course-wrap').text(course_name);
        }

        function resume(pause_id) {
            popup({
                title: '휴강 해지',
                content: '<p>휴강 상태를 해지하시겠습니까? <br>확인 선택 시 즉시 수강이 가능합니다. <br>(휴강 신청권은 더이상 사용이 불가합니다.)</p>',
                icon: 'icon-q',
                onConfirm: function () {
                    $.ajax({
                        url: "/ielts/classroom/resume/"+pause_id,
                        type: 'GET',
                        success: function(result) {
                            alertPopup('휴강 해지가 완료되었습니다.', {
                                onConfirm: function () {
                                    //location.reload();
                                    $('#pause'+pause_id).find('.status').text('휴강종료');
                                    $('#pause'+pause_id).find('a').remove();
                                },
                                onClose: function () {
                                    //location.reload();
                                    $('#pause'+pause_id).find('.status').text('휴강종료');
                                    $('#pause'+pause_id).find('a').remove();
                                },
                            });
                        }
                    });
                },
                onCancel: function () {
                    //console.log('취소 버튼 클릭');
                },
            });
        }


        $(document).ready(function () {
            $('.select-option').niceSelect();

            $('#cnt-tab ul li').on('click', function () {
                $(this).addClass('on').siblings('li').removeClass('on')
                var nowTab = $(this).index() + 1;
                $('#tab-cont'+nowTab).show().siblings('[id^="tab-cont"]').hide()
            });
        });

        const today = new Date();
        setDatePicker($("#started_at"), {minDate: today});
    </script>
@endsection