@extends('ielts.layout')

@section('ielts-css')
    {!! resource('css/ielts/sub.css') !!}
    {!! resource('css/common/nice-select.css') !!}
    {!! resource('css/myclass/my_class.css') !!}
    {!! resource('css/dev.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 boardWrite">
                <div class="row">
                    <div class="column c100p">
                        <div class="my-tab">
                            <ul>
                                <li><a href="{{ route('classroom.pause', ['service' => 'ielts']) }}">휴강신청</a></li>
                                <li class="on"><a href="#none">연장신청</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="column c100p">
                        <div class="card my-class-sub">
                            <h3>무료 연장 신청</h3>
                            <div class="bg-gray pd24 br12">
                                <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>
                                        · 수강기간 내 응시한 시험 성적표에 한함<br>
                                        · 응시일, 응시자명, 성적을 확인할 수 있는 성적표 제출 필수
                                    </div>
                                </div>
                                <div class="text-gray">
                                    <strong>
                                        구성서비스 이용 안내
                                    </strong>
                                    <div>
                                        · 무료 연장의 경우 동영상 강의만 기간 연장됩니다. (첨삭, CDT 연장 불가)<br>
                                        ※ 신청 후 삭제 수정은 불가합니다. 수정해야 하는 경우 재업로드해 주시기 바랍니다.
                                    </div>
                                </div>
                            </div>

                            <div class="sub-tab mt36">
                                <ul>
                                    <li class="on">
                                        <a href="#none">신청하기</a>
                                    </li>
                                    <li>
                                        <a href="#none">신청내역</a>
                                    </li>
                                </ul>
                                <div id="tab-cont1" class="pt24">
                                    @if ($enrollments->count() > 0)
                                    <form name="extension-form" method="post" action="{{ route('classroom.extension.process', ['service' => 'ielts']) }}" enctype="multipart/form-data">
                                        @csrf

                                        <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 class="delay-form" id="extensionForm" style="display: none">
                                            <div class="option-category pd2416 pb0">
                                                <dl>
                                                    <dt>
                                                        선택 강좌
                                                    </dt>
                                                    <dd id="course-wrap">
                                                        @if ($enrollment_id)
                                                        ({{ ucfirst($enrollment->product->module) }}) {{ $enrollment->product->name }} {{ $enrollment->productOption->name }}
                                                        @endif
                                                    </dd>
                                                </dl>

                                                <dl>
                                                    <dt>
                                                        신청 가능 횟수
                                                    </dt>
                                                    <dd id="extension-option-wrap"></dd>
                                                </dl>

                                                <div id="fileUploadWrapper" class="uploadFile">
                                                    <x-board.attachments isPreview="{{ false }}" isView="{{ false }}" max="1" accept=".jpg, .jpeg, .png, .pdf" />
                                                </div>

                                                <dl class="w100p">
                                                    <dt>
                                                        내용 입력
                                                    </dt>
                                                </dl>

                                                <textarea name="inquiry" placeholder="내용을 입력해주세요."></textarea>

                                                <div class="flex-end w100p">
                                                    <button type="submit" class="my-btn-default4 md">연장 신청</button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                    @else
                                    <div class="noData"><div class="flex"><p>연장 신청 대상 강좌가 없습니다.</p></div></div>
                                    @endif
                                </div>

                                <div id="tab-cont2" class="pt24" style="display: none;">
                                    <table class="correct-table extension-table gray">
                                        <colgroup>
                                            <col>
                                            <col width="120">
                                            <col width="258">
                                            <col width="258">
                                        </colgroup>
                                        <thead>
                                            <tr>
                                                <th>구매상품</th>
                                                <th>승인여부</th>
                                                <th>세부항목</th>
                                                <th>연장 수강기간</th>
                                            </tr>
                                        </thead>
                                        <tbody class="tdpd16">
                                            @foreach ($enrollmentExtensions as $extension)
                                            @php
                                                $p = $extension->extendedPeriods();
                                            @endphp
                                            <tr>
                                                <td>{{ $extension->enrollment->product->name }} ({{ $extension->enrollment->productOption->name }})</td>
                                                <td>
                                                    <span class="{{ $extension->status }}">{{  config("edmclass.extension_status")[$extension->status] }}</span>
                                                </td>
                                                <td class="text-left">
                                                    <p>{{ $p["course"][0] }}</p>
                                                    @if ($p["feedback"][0])
                                                        <p>{{ $p["feedback"][0] }}</p>
                                                    @endif
                                                    @if ($p["cdt"][0])
                                                        <p>{{ $p["cdt"][0] }}</p>
                                                    @endif
                                                </td>
                                                <td>
                                                    <p>{{ $p["course"][1] }} ~ {{ $p["course"][2] }}</p>
                                                    @if ($p["feedback"][0])
                                                        <p>{{ $p["feedback"][1] }} ~ {{ $p["feedback"][2] }}</p>
                                                    @endif
                                                    @if ($p["cdt"][0])
                                                        <p>{{ $p["cdt"][1] }} ~ {{ $p["cdt"][2] }}</p>
                                                    @endif
                                                </td>
                                            </tr>

                                            @if ($extension->response)
                                            <tr class="td-reply">
                                                <td colspan="4">
                                                    <div class="bg-reply red">
                                                        {!! nl2br($extension->response) !!}
                                                    </div>
                                                </td>
                                            </tr>
                                            @endif
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>

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

@section('ielts-script')
    {!! resource('js/common/jquery.nice-select.js') !!}
    {!! resource('js/common/board/file-upload.js') !!}
    <script>
        const fileUploadType = 'text';
        $(document).ready(function () {
        let isProcess = false;
            $('form[name="extension-form"]').on('submit', function(e){
                e.preventDefault();
                if ( isProcess ) {
                    return false;
                }
                // 폼 캐시
                const form = this;

                // 폼 유효성 검사
                const selectedOption = $(form).find('select[name="enrollment_id"]').val();
                if (selectedOption == '') {
                    alertPopup('강좌를 선택해 주세요.');
                    return;
                }
                if (! $('#fileUploadWrapper').hasClass("d-none")) {
                    const fileInput = $(form).find('#file').attr('name', 'transcript');
                    if (Object.keys(files).length === 0) {
                        alertPopup('성적표를 업로드해 주세요.');
                        return;
                    }

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


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

                                if (response.status === 'success') {
                                    if (response.message === 'is_auto_approved') {
                                        alertPopup('수강기간이 연장되었습니다.<br>나의 강의실에서 연장된 기간만큼 학습 하실 수 있습니다.', {
                                            title: '수강 연장 완료!',
                                            icon: 'icon-c',
                                            onConfirm: function () {
                                                location.reload();
                                            }
                                        });
                                    } else {
                                        alertPopup('수강기간 연장 신청이 완료되었습니다.<br>관리자 승인 후 연장된 기간만큼 학습 하실 수 있습니다.', {
                                            title: '수강 연장 신청 완료!',
                                            icon: 'icon-c',
                                            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);
                            }
                        });
                    }
                });
            });

            $('.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();
        });

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

            // FileUploadHandler.resetFileDragArea();
            $('#extensionForm').show();

            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