@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>
                    <a href="{{ route('classroom.pause', ['service' => 'ielts']) }}">휴강신청</a>
                </li>
                <li class="on">
                    <a href="#none">무료연장신청</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 id="tab-cont1">
                <div class="bg-white">
                    <div class="text-gray">
                        <strong>
                            연장 가능한 상품을 수강 중이신 경우 연장 신청 과정을 통해 수강기간을 무료로 연장할 수 있습니다.
                        </strong>
                        <strong class="medium">
                            가능 상품 및 수강기간
                        </strong>
                        <div>
                            · 상품별 상이
                        </div>
                    </div>
                    <div class="text-gray">
                        <strong>
                            신청기간
                        </strong>
                        <div>
                            · 수강종료 30일 전 ~ 수강 종료일 내 신청<br>
                            · 기간 내 신청하지 않은 경우 무료 연장 불가<br>
                            · 연장신청 가능횟수는 구매한 상품마다 상이
                        </div>
                    </div>
                    <div class="text-gray">
                        <strong>
                            첨부 서류
                        </strong>
                        <div>
                            · 7.0 미만의 성적표 (환급반의 경우 환급도전챌린지 도전 실패 시 별도 첨부서류 없이 연장 가능)<br>
                            · 수강기간 내 응시한 시험 성적표에 한함
                        </div>
                    </div>
                    <div class="text-gray">
                        <strong>
                            구성서비스 이용 안내
                        </strong>
                        <div>
                            · 기존 상품 옵션과 동일한 서비스(강좌, 첨삭, CDT)를 연장된 기간 동안 이용하실 수 있습니다. (교재 제외)<br>
                            ※ 신청 후 삭제 수정은 불가합니다. 수정해야 하는 경우 재업로드해 주시기 바랍니다.
                        </div>
                    </div>
                </div>
                @if ($enrollments->count() > 0)
                    <form name="extension-form" method="post"
                          action="{{ route('classroom.extension.process', ['service' => 'ielts']) }}"
                          enctype="multipart/form-data">
                        @csrf
                        <div class="filter">
                            <select class="select-option wide" name="enrollment_id" onchange="alterCourse(this)">
                                <option value="">강좌를 선택해 주세요.</option>
                                @foreach($enrollments as $e)
                                    <option value="{{ $e->id }}" date="수강기간 : {{ $e->started_at }}~{{ $e->ended_at }}"
                                            data-extension-option="{{ $e->product->extension_option }}">
                                        @if ($User->is->admin)
                                            {{ $e->id }} ({{ $e->product->id }})
                                        @endif
                                        {{ $e->product->name }} {{ $e->productOption->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="option-category gap12">
                            <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="w100 fd-row">
                                <dt>
                                    신청가능횟수
                                </dt>
                                <dd id="extension-option-wrap"></dd>
                            </dl>
                            <textarea name="inquiry" id="" placeholder="내용을 입력해주세요."></textarea>
                            <!-- 이미지 첨부 (환급 여부가 Y인 경우 제거) -->
                            <div class="image-file d-none" id="fileUploadWrapper">
                                <div class="title">
                                    <i class="ico-camera"></i>
                                    <span>사진</span>
                                </div>
                                <div class="image-file-wrap">
                                    <div class="box">
                                        <div class="js--image-preview"></div>
                                        <div class="upload-options">
                                            <label>
                                                <input type="file" name="transcript" class="image-upload"
                                                       accept="image/*"/>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="box">
                                        {{--                                <div class="js--image-preview"></div>--}}
                                        {{--                                <div class="upload-options">--}}
                                        {{--                                    <label>--}}
                                        {{--                                        <input type="file" name="transcript" class="image-upload" accept="image/*" />--}}
                                        {{--                                    </label>--}}
                                        {{--                                </div>--}}
                                    </div>
                                    <div class="box">
                                        {{--                                <div class="js--image-preview"></div>--}}
                                        {{--                                <div class="upload-options">--}}
                                        {{--                                    <label>--}}
                                        {{--                                        <input type="file" name="transcript" class="image-upload" accept="image/*" />--}}
                                        {{--                                    </label>--}}
                                        {{--                                </div>--}}
                                    </div>
                                </div>
                            </div>
                            <!-- // 이미지 첨부 -->
                            <p class="sm-text" id="extension-option-wrap">ed:m 담당자 승인 후 연장됩니다.</p>
                            <button type="submit" class="btn-go on">
                                연장신청
                            </button>
                        </div>
                    </form>
                @else
                    <div class="filter"></div>
                    <div class="option-category gap12"><p>연장 신청 대상 강좌가 없습니다.</p></div>
                @endif
            </div>
            <div id="tab-cont2" style="display:none;">
                <div class="bg-white">
                    <table class="correct-table">
                        <colgroup>
                            <col width="50%">
                            <col width="50%">
                        </colgroup>
                        <thead>
                        <tr>
                            <th>상품명</th>
                            <th>연장승인여부</th>
                        </tr>
                        </thead>
                        <tbody class="tdpd12">
                        @foreach ($enrollmentExtensions as $extension)
                            @php
                                $p = $extension->extendedPeriods();
                            @endphp
                            <tr>
                                <td>{{ $extension->enrollment->product->name }} ({{ $extension->enrollment->productOption->name }})</td>
                                <td>{{  config("edmclass.extension_status")[$extension->status] }}</td>
                            </tr>
                            @if($extension->status === 'EXTENDED')
                                <tr colspan="2">
                                    <h3>연장 수강 기간</h3>
                                    <ul class="delay-list">
                                        <li>
                                            <p>{{ $p["course"][0] }}</p>
                                            <span>{{ $p["course"][1] }} ~ {{ $p["course"][2] }}</span>
                                        </li>
                                        @if ($p["feedback"][0])
                                            <li>
                                                <p>{{ $p["feedback"][0] }}</p>
                                                <span>{{ $p["feedback"][1] }} ~ {{ $p["feedback"][2] }}</span>
                                            </li>
                                        @endif
                                        @if ($p["cdt"][0])
                                            <li>
                                                <p>{{ $p["cdt"][0] }}</p>
                                                <span>{{ $p["cdt"][1] }} ~ {{ $p["cdt"][2] }}</span>
                                            </li>
                                        @endif
                                    </ul>
                                </tr>
                            @endif
                            @if ($extension->response)
                                <tr class="td-reply">
                                    <td colspan="2">
                                        <div class="bg-reply red">
                                            <strong>불가사유</strong> {!! nl2br($extension->response) !!}
                                        </div>
                                    </td>
                                </tr>
                            @endif
                        @endforeach

                        <!-- //연장 승인시 삭제 -->
                        </tbody>
                    </table>

                </div>
            </div>
        </div>
    </div>
@endsection



@section('ielts-script')
    {!! resource('js/common/jquery.nice-select-mo.js') !!}
    <script>
        $(document).ready(function () {
            $('#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()
            });
            $('.select-option').niceSelect();



            $('form[name="extension-form"]').on('submit', function(e){
                e.preventDefault();
                // 폼 캐시
                const form = this;

                // 폼 유효성 검사
                const selectedOption = $(form).find('select[name="enrollment_id"]').val();
                if (selectedOption == '') {
                    alertPopup('강좌를 선택해 주세요.');
                    return;
                }

                const fileInput = $(form).find('input[name="transcript"]')[0];
                if (fileInput.files.length === 0) {
                    alertPopup('성적표를 업로드해 주세요.');
                    return;
                }

                const file = fileInput.files[0];
                const fileSize = file.size / 1024 / 1024; // MB 단위로 변환
                if (fileSize > 5) {
                    alertPopup('파일 크기는 5MB 이하로 업로드 해주세요.');
                    return;
                }

                const fileExtension = file.name.split('.').pop().toLowerCase();
                const allowedExtensions = ['jpg', 'jpeg', 'png', 'pdf'];
                if (!allowedExtensions.includes(fileExtension)) {
                    alertPopup('jpg, jpeg, png, pdf 파일만 업로드 가능합니다.');
                    return;
                }

                // 폼 제출 확인 팝업
                popup({
                    title: '수강 연장 신청',
                    content: '수강 연장을 신청하시겠습니까?<br>신청 후에는 수정 및 삭제가 불가합니다.',
                    icon: 'icon-q',
                    onConfirm: function () {
                        LoadingOverlay.show();

                        $.ajax({
                            url: '{{ route('classroom.extension.process', ['service' => 'ielts']) }}',
                            type: 'POST',
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            data: new FormData(form),
                            processData: false,
                            contentType: false,
                            success: function(response) {
                                LoadingOverlay.hide();

                                if (response.status === 'success') {
                                    if (response.message === 'is_auto_approved') {
                                        alertPopup('수강기간이 연장되었습니다.<br>나의 강의실에서 연장된 기간만큼 학습 하실 수 있습니다.', {
                                            title: '수강 연장 완료!',
                                            onConfirm: function () {
                                                location.reload();
                                            }
                                        });
                                    } else {
                                        alertPopup('수강기간 연장 신청이 완료되었습니다.<br>관리자 승인 후 연장된 기간만큼 학습 하실 수 있습니다.', {
                                            title: '수강 연장 신청 완료!',
                                            onConfirm: function () {
                                                location.reload();
                                            }
                                        });
                                    }
                                } else {
                                    // 에러 메시지 표시
                                    alertPopup(response.message || '연장 신청에 실패했습니다. 다시 시도해 주세요.');
                                }
                            },
                            error: function(xhr, status, error) {
                                LoadingOverlay.hide();

                                // 서버 응답이 JSON 형식인 경우 메시지 추출 시도
                                let errorMessage = '연장 신청에 실패했습니다. 다시 시도해 주세요.';

                                try {
                                    const errorResponse = JSON.parse(xhr.responseText);
                                    if (errorResponse && errorResponse.message) {
                                        errorMessage = errorResponse.message;
                                    }
                                } catch (e) {
                                    // JSON 파싱 실패시 기본 메시지 사용
                                }

                                alertPopup(errorMessage);
                            }
                        });
                    }
                })


            });

        });

        function alterCourse(obj) {
            const selectedOption = obj.options[obj.selectedIndex];
            const courseName = selectedOption.textContent;
            const extensionOption = selectedOption.dataset.extensionOption;

            FileUploadHandler.resetFileDragArea();

            switch (extensionOption) {
                case '1회 신청':
                    $('#extension-option-wrap').html('1회 <span>(ed:m 담당자 승인 후 연장됩니다.)</span>');
                    $('#fileUploadWrapper').removeClass('d-none');
                    break;
                case '무제한 신청':
                    $('#extension-option-wrap').html('무제한 <span>(ed:m 담당자 승인 후 연장됩니다.)</span>');
                    $('#fileUploadWrapper').removeClass('d-none');
                    break;
                case '1회 자동 승인':
                    $('#extension-option-wrap').html('1회 <span>(연장 신청 즉시 수강기간이 연장됩니다.)</span>');
                    $('#fileUploadWrapper').addClass('d-none');
                    break;
                case '무제한 승인':
                    $('#extension-option-wrap').html('무제한 <span>(연장 신청 즉시 수강기간이 연장됩니다.)</span>');
                    $('#fileUploadWrapper').addClass('d-none');
                    break;
            }

            $('#course-wrap').text(courseName);
        }
    </script>
@endsection