@extends('ielts.layout')

@section('ielts-css')
    {!! resource('css/ielts/sub.css') !!}
    {!! resource('css/common/nice-select.css') !!}
    {!! resource('css/myclass/my_class.css') !!}
@endsection

@section("ielts-content")
<div class="container">
    <div class="my-class-wrapper">
        <div class="wrapper">
            @include('classroom.ielts.menu')

            <div class="my-class-contents">
                <div class="row">
                    <div class="column c100p">
                        <div class="my-tab">
                            <ul>
                                <li class="on"><a href="#none">휴강신청</a></li>
                                <li><a href="{{ route('classroom.extension', ['service' => 'ielts']) }}">연장신청</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="column c100p">
                        <div class="card my-class-sub">
                            <div class="bg-lightgreen pd32 br12">
                                휴강신청은 각 강좌당 수강기간 내에 단 <strong>1회</strong>만 가능합니다. <br>
                                <strong>200% 환급반의 경우 휴강 기능이 제공되지 않으며, 조건에 따라 연장 신청만 가능합니다.</strong> <br>
                                휴강/연장신청이 가능한 상품에 한해 조회됩니다. <br>
                                잔여 수강기간이 7일 미만인 경우 휴강이 불가합니다.
                            </div>
                            <h5 class="option-title mt40 bd1">
                                신청
                            </h5>
                            <div class="option-cont">
                                @if ($enrollments->count() == 0)
                                    <div class="noData"><div class="flex"><p>휴강신청 대상강좌가 없습니다.</p></div></div>
                                @else
                                <form name="pause-form" method="post" action="{{ route('classroom.pause.process', ['service' => 'ielts']) }}">
                                    @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="수강기간 : {{ date('Y.m.d', strtotime($e->started_at)) }}~{{ date('Y.m.d', strtotime($e->ended_at)) }}">
                                                    @if ($User->is->admin){{ $e->id }}@endif
                                                    {{ $e->product->name }} {{ $e->productOption->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    @endif
                                    <div class="option-category between mt16">
                                        <dl>
                                            <dt>
                                                선택 강좌
                                            </dt>
                                            <dd id="course-wrap">
                                                @if ($enrollment_id)
                                                ({{ ucfirst($enrollment->product->module) }}) {{ $enrollment->product->name }} {{ $enrollment->productOption->name }}
                                                @endif
                                            </dd>
                                        </dl>
                                        <dl disabled>
                                            <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 disabled>
                                            <dt>
                                                휴강기간 선택
                                            </dt>
                                            <dd>
                                                <select name="period" required class="w140">
                                                    <option value="">기간선택</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>
                                    </div>
                                    <div class="list-info border-top">
                                        <button type="submit" class="my-btn-default4 md">휴강 신청</button>
                                    </div>
                                </form>
                                @endif
                            </div>

                            <h5 class="option-title mt40 bd0">
                                신청내역
                            </h5>
                            <a name="history"></a>
                            <table class="correct-table gray">
                                <colgroup>
                                    <col width="400">
                                    <col width="180">
                                    <col width="150">
                                    <col width="150">
                                    <col width="/">
                                    <col width="/">
                                </colgroup>
                                <thead>
                                    <tr>
                                        <th>수강상품</th>
                                        <th>수강기간</th>
                                        <th>휴강시작일</th>
                                        <th>휴강종료일</th>
                                        <th colspan="2">휴강상태</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @if ($enrollmentPauses->count() == 0)
                                        <tr><td colspan="6" class="noData"><div class="flex"><p>신청 내역이 없습니다.</p></div></td></tr>
                                    @else
                                        @foreach ($enrollmentPauses as $pause)
                                            <tr id="pause{{ $pause->id }}">
                                                <td>
                                                    @if ($User->is->admin){{ $pause->enrollment->id }}@endif
                                                    ({{ ucfirst($pause->enrollment->module) }}) {{ $pause->enrollment->product->name }} {{ $pause->enrollment->productOption->name }}
                                                </td>
                                                <td>{{ Carbon::parse($pause->enrollment->started_at)->format('y.m.d') }} ~ {{ Carbon::parse($pause->enrollment->ended_at)->format('y.m.d') }}</td>
                                                <td>{{ Carbon::parse($pause->started_at)->format('y.m.d') }}</td>
                                                <td>{{ $pause->calculated_ended_at->format('y.m.d') }}</td>
                                                <td class="status">{{ $pause->status }}</td>
                                                <td>
                                                    @if ($pause->status == '휴강중')
                                                        <button type="button" class="my-btn-default5" onclick="resume({{ $pause->id }})">휴강 해제</button>
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                    @endif
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('ielts-script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    {!! resource('js/common/jquery.nice-select.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('button').remove();
                                },
                                onClose: function () {
                                    //location.reload();
                                    $('#pause'+pause_id).find('.status').text('휴강종료');
                                    $('#pause'+pause_id).find('button').remove();
                                },
                            });
                        }
                    });
                },
                onCancel: function () {
                    //console.log('취소 버튼 클릭');
                },
            });
        }

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

            $('.select-option').niceSelect();

            $("form[name='pause-form']").on('submit', function(e) {
                e.preventDefault();

                const form = $(this);
                const productName = $('select[name="enrollment_id"] option:selected').text();
                const pauseStartDate = $('input[name="started_at"]').val();
                const pausePeriod = parseInt($('select[name="period"] option:selected').val(), 10);
                const pauseStartDateObj = moment(pauseStartDate, 'YYYY-MM-DD');
                const pauseEndDateObj = pauseStartDateObj.clone().add(pausePeriod, 'days');
                const formattedPauseStartDate = pauseStartDateObj.format('YYYY.MM.DD');
                const formattedPauseEndDate = pauseEndDateObj.format('YYYY.MM.DD');
                const pausePeriods = `${formattedPauseStartDate} ~ ${formattedPauseEndDate}`;
                const restartDate = pauseEndDateObj.add(1, 'day').format('YYYY.MM.DD');

                popup({
                    title: '휴강 신청 안내',
                    caption: '휴강 신청을 하시겠습니까? 휴강 신청은 1회로 제한됩니다.',
                    content: `<div class="grayBox"><p class="listTitle">휴강정보</p><ul class="dotList">
                                <li>신청 강좌 상품명: `+productName+`</li>
                                <li>휴강 기간: `+pausePeriods+`</li>
                                <li>수강 재시작일: `+restartDate+`</li>
                            </ul></div>`,
                    icon: 'icon-q',
                    onConfirm: function () {
                        form[0].submit();
                    },
                    onCancel: function () {
                        //console.log('취소 버튼 클릭');
                    },
                });
            });


            const today = new Date();

            setDatePicker($("#started_at"), { minDate: today });

        });
    </script>
@endsection