@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">
                <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">
                                            <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="d-none">
                                                    <input class="d-none" type="file" id="transcript" name="transcript" accept="image/*,application/pdf" />
                                                    <div class="file-drag" id="fileDragArea">
                                                        <i class="ico-upload"></i>
                                                        성적표 파일을 마우스로 끌어 오세요.
                                                        <a href="javascript:;" onclick="$('#transcript').click();">내 PC에서 가져오기</a>
                                                    </div>
                                                </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>

                            <h3 class="mt60">유료 연장 신청</h3>
                            <div class="bg-gray pd24 br12">
                                <div class="text-gray">
                                    <strong>
                                        수강 중인 상품에 대해 추가 결제를 통해 기간을 연장하여 수강하실 수 있습니다.
                                    </strong>
                                    <strong class="medium">
                                        연장 가능 상품
                                    </strong>
                                    <div class="red">
                                        · 입문 올패스, 실전 올패스, N개월 실속팩, 200%환급반 입문/실전, 30일 집중 스피킹&마스, 간호 패키지 입문/실전
                                    </div>
                                </div>
                                <div class="text-gray">
                                    <strong>
                                        연장 구매 관련
                                    </strong>
                                    <div>
                                        · 30일, 60일 선택 가능 <br>
                                        · 교재 불포함 <br>
                                        · 일할금액으로 가격 산정 - 강의료 (판매값-교재값) / 수강기간 <br>
                                        · (첨삭) 매주 첨삭 및 다른 패키지 - 첨삭 연장 불가, 대신 모두의 첨삭 결제 시 50% 할인 <br>
                                        · (첨삭) 무제한 첨삭 - 첨삭도 함께 연장됨 (1일 5회 Writing, Speaking 첨삭)
                                    </div>
                                </div>
                                <div class="text-gray">
                                    <strong>
                                        유의사항
                                    </strong>
                                    <div>
                                        · 응시권 결합 상품의 경우 응시권 유효기간/사용기간은 연장되지 않음 (상품 최초 결제일로부터 6개월까지 사용 가능)<br>
                                        · 환급반은 연장 또는 재수강 시 환급챌린지 불가 <br>
                                        · 재수강, 연장 모두 교환 및 환불 불가<br>
                                        · 구매 내역은 마이페이지에서 확인 가능
                                    </div>
                                </div>
                            </div>

                            <h5 class="option-title mt40 bd0">
                                신청 가능한 강좌
                            </h5>
                            <table class="correct-table extension-table gray">
                                <colgroup>
                                    <col>
                                    <col>
                                    <col>
                                    <col>
                                    <col>
                                    <col>
                                    <col>
                                </colgroup>
                                <thead>
                                    <tr>
                                        <th>상품</th>
                                        <th>모듈</th>
                                        <th>CDT</th>
                                        <th>첨삭</th>
                                        <th>수강기간</th>
                                        <th colspan="2">수강료</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($enrollments as $e)
                                        @if (!empty($e->productOption->additional_purchase_option))
                                            @php
                                                $opt = $e->productOption->additional_purchase_option;
                                            @endphp
                                    
                                            @foreach ($opt['period'] ?? [] as $i => $period)
                                                <tr>
                                                    <td>
                                                        <div class="product-with-thumbnail">
                                                            <img src="{{ $e->product->thumbnail }}" alt="" width="96" height="60" class="thumb">
                                    
                                                            <div>
                                                                <div class="product-name">{{ $e->product->name }}</div>
                                                                <div class="product-option-name">{{ $e->productOption->name }}</div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>{{ ucfirst($e->module) }}</td>
                                                    <td>{{ isset($opt['cdt_total_use_count'][$i]) && $opt['cdt_total_use_count'][$i] ? $opt['cdt_total_use_count'][$i]."회":"무제한" }}</td>
                                                    <td>{{ isset($opt['feedback_total_use_count'][$i]) && $opt['feedback_total_use_count'][$i] ? $opt['feedback_total_use_count'][$i]."회":"무제한" }}</td>
                                                    <td>{{ $period }}일</td>
                                                    <td class="text-end">{{ isset($opt['sales_price'][$i]) ? number_format($opt['sales_price'][$i]) : '' }}원</td>
                                                    <td>
                                                        <a href="#none" class="my-btn-default5">수강신청</a>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        @endif
                                    @endforeach
                                </tbody>
                            </table>

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

@section('ielts-script')
    {!! resource('js/common/jquery.nice-select.js') !!}
    <script>
        // const LoadingOverlay = {
        //     create: function() {
        //         // 이미 존재하는지 확인
        //         if ($('#loading-overlay').length === 0) {
        //             // 존재하지 않으면 동적으로 생성
        //             const loadingHtml = `
        //                 <div id="loading-overlay">
        //                     <div class="loading-spinner" style="background-color: white; padding: 30px; border-radius: 8px; text-align: center; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);">
        //                         <i class="ico-download"></i>
        //                         <p>처리 중입니다...</p>
        //                     </div>
        //                 </div>
        //             `;
        //             $('body').append(loadingHtml);
        //         }
        //     },
        //     show: function() {
        //         this.create(); // 요소가 없으면 생성
        //         $('#loading-overlay').css('display', 'flex'); // display: flex로 설정하여 중앙 정렬
        //     },
        //     hide: function() {
        //         $('#loading-overlay').hide();
        //     }
        // };

        const FileUploadHandler = {
            resetFileDragArea: function () {
                const $fileDragArea = $('#fileDragArea');
                const $fileInput = $('#transcript');

                $fileDragArea.removeClass('uploaded').html(`
                    <i class="ico-upload"></i>
                    <p>성적표 파일을 마우스로 끌어 오세요.</p>
                    <a href="javascript:;" onclick="$('#transcript').click();">내 PC에서 가져오기</a>
                `);

                $fileInput.val('');
            },

            handleFileUpload: function (file) {
                if (!file) return;

                const $fileDragArea = $('#fileDragArea');
                const $fileInput = $('#transcript');

                // DataTransfer 객체를 생성하고 파일 추가
                const dataTransfer = new DataTransfer();
                dataTransfer.items.add(file);
                $fileInput[0].files = dataTransfer.files; // 파일을 input에 설정

                const fileName = file.name;
                const fileSize = (file.size / 1024).toFixed(1) + ' KB';
                const filePreviewHTML = `
                    <a href="#none">${fileName} (${fileSize})</a>
                    <a href="#none" class="ico-file-delete"></a>
                `;

                $fileDragArea.html(filePreviewHTML).addClass('uploaded');

                $fileDragArea.find('.ico-file-delete').on('click', function () {
                    FileUploadHandler.resetFileDragArea();
                });
            }
        };

        $(document).ready(function () {
            const $fileInput = $('#transcript');
            const $fileDragArea = $('#fileDragArea');

            $fileDragArea.on('dragover', function (e) {
                e.preventDefault();
                e.stopPropagation();
                $fileDragArea.addClass('drag-over');
            });

            $fileDragArea.on('dragleave', function (e) {
                e.preventDefault();
                e.stopPropagation();
                $fileDragArea.removeClass('drag-over');
            });

            $fileDragArea.on('drop', function (e) {
                e.preventDefault();
                e.stopPropagation();
                $fileDragArea.removeClass('drag-over');
                const files = e.originalEvent.dataTransfer.files;
                FileUploadHandler.handleFileUpload(files[0]);
            });

            $fileInput.on('change', function () {
                const files = $fileInput[0].files;
                FileUploadHandler.handleFileUpload(files[0]);
            });

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

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

            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