@extends("common.layout")

@php
    $page_title = "첨삭 요청 상세보기 (". $feedbackRequest->id .")";
    $grades = range(2.0, 9.0, 1);
    $totalGrades = range(2.0, 9.0, 0.5);
    $subject = $feedbackRequest->feedbackTopic->subject;
    $status = $feedbackRequest?->status;
    $passType = $feedbackRequest->enrollmentFeedbackPass->feedbackPass->type;
@endphp

@section('page-title', $page_title)

@section("header")
{!! resource('css/form.css') !!}
{!! resource('js/form.js') !!}
<script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script>

{!! resource('js/components/tab.js') !!}
@endsection

@section("content")
@php
    $evaluationTexts = [
        "Writing" => ["Task Achievement", "Cohesion & Coherence","Lexical Resources","Grammatical Range & Accuracy"],
        "Speaking" => ["Fluency & Coherence","Lexical Resources","Grammatical Range & Accuracy","Pronunciation"],
    ];
@endphp
<form name="feedback-form" id="feedback-form" action="{{ route('api.enrollment.set-feedback') }}" method="post" class="default" enctype="multipart/form-data">
    @csrf
    <input type="hidden" name="pass_type" value="{{ $passType }}">
    <input type="hidden" name="subject" value="{{ $subject }}">
    <input type="hidden" name="old_status" value="{{ $feedbackRequest->status }}">

    <h1>
        <a href="{{ route('enrollment.feedback', [ 'service' => $service]) }}">
            <i class="bi bi-arrow-left-circle"></i>
            {{ $page_title }}
        </a>

        <div class="fixed-btns btn-group">
            <button type="submit" class="btn btn-primary" @disabled(!$User->is->root && $status == 'COMPLETED')>저장</button>
            <button class="btn btn-warning" type="button" onclick="toggleOptions(this)"><i class="bi bi-chevron-up"></i></button>
        </div>
    </h1>

    <div class="layout-2-cols">
        <section>
            <header>
                첨삭요청본
                <div>
                    <span class="badge text-bg-success">{{ $status }}</span>
                    <span class="badge text-bg-primary">{{ $subject }} {{ $passType == 'CDT' ? "" : $feedbackRequest->feedbackTopic->type }}</span>
                    <span class="badge text-bg-light">{{ $passType }}</span>

                    <button class="btn btn-warning btn-toggle" type="button" onclick="toggleOption(this)" id="toggle-feedbackRequest-{{ $feedbackRequest?->id }}-1"><i class="bi bi-chevron-up"></i></button>
                </div>
            </header>

            <main>
                <div class="feedback-request-info">
                    <div>
                        <label>요청자</label>
                        <span>{{ $feedbackRequest->enrollmentFeedbackPass->user->name }}
                            ( {{ $feedbackRequest->enrollmentFeedbackPass->user->edm_id ?? $feedbackRequest->enrollmentFeedbackPass->user->email }}  )
                        </span>

                        @if ( $passType != 'CDT')
                            <label class="ms-3">Topic ID</label>
                            <a href="{{ route('product.feedback-topic.detail', ['id' => $feedbackRequest->feedbackTopic->id]) }}" target="_new">{{ $feedbackRequest->feedbackTopic->id }}</a>
                        @endif
                    </div>

                    @if ($feedbackRequest->enrollmentFeedbackPass->feedbackPass->type == 'Premium')
                        <div>
                            <label>선택 강사</label>
                            <span>{{ $feedbackRequest->teacher_id ? $feedbackRequest->teacher->name : '지정되지 않음' }}</span>
                        </div>
                    @else
                        <div>
                            <select class="form-select" id="teacher_id" name="teacher_id">
                                <option value="">강사선택</option>
                                @foreach ($teachers as $teacher)
                                    <option value="{{ $teacher->id }}" @selected($feedbackRequest->teacher_id == $teacher->id)>
                                        {{ $teacher->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    @endif
                </div>

                @if ($subject == 'Writing' && $passType == 'CDT')
                    <div class="mb-3 row mx-0" style="align-items: center">

                        @foreach ($cdtFeedbackRequests as $key => $request)
                            <div class="col-6 p-0">
                                <input type="hidden" name="enrollment_feedback_request_id[]" value="{{ $request->id }}">
                                <input type="hidden" name="response_id[{{ $request->id }}]" value="{{ $request->feedbackResponse?->id }}">
                                <span class="badge badge-secondary">{{ $request->feedbackTopic->type }}</span>
                                <span class="ml-3">
                                    <a href="{{ route('product.feedback-topic.detail', ['id' => $request->feedbackTopic->id]) }}" target="_new" class="mr-3">{{ $request->feedbackTopic->id }}</a>
                                    <a href="#none" onclick="preViewRequestText({{ $request->id }})" class="mr-3"><i class="bi bi-eye-fill"></i></a>
                                    <a href="#none" onclick="downloadRequestText({{ $request->id }}, '{{ $request->feedbackTopic->type }}')"><i class="bi bi-download"></i></a>
                                </span>
                            </div>
                        @endforeach
                        {{-- </div> --}}
                    </div>
                    <div class="tab-wrap" data-name="tasks">
                        <ul class="tab-list">
                            <li class="tab-item active" data-name='task1'><a class="tab-text" href="javascript:void(0)">Task 1</a></li>
                            <li class="tab-item" data-name='task2'><a class="tab-text" href="javascript:void(0)">Task 2</a></li>
                        </ul>
                        <div class="tab-contents">
                            @foreach ($cdtFeedbackRequests as $key => $request)
                                <div @class(['tab-content', 'active' => $key == 0])>
                                    @include("enrollment.contents.feedback-".strtolower($subject) , ['feedbackRequest' => $request])
                                </div>
                            @endforeach
                        </div>
                    </div>
                @else
                    @include("enrollment.contents.feedback-".strtolower($subject))
                    <input type="hidden" name="enrollment_feedback_request_id" value="{{ $feedbackRequest->id }}">
                    <input type="hidden" name="response_id" value="{{ $feedbackResponse?->id }}">
                    @if ($feedbackResponse)
                        <input type="hidden" name="response_id" value="{{ $feedbackResponse->id }}">
                    @endif

                @endif
            </main>
        </section>

        <section>
            <header>
                첨삭 및 평가
                <button class="btn btn-warning btn-toggle" type="button" onclick="toggleOption(this)" id="toggle-feedbackRequest-{{ $feedbackRequest?->id }}-2"><i class="bi bi-chevron-up"></i></button>
            </header>

            <main>
                <div class="feedback-status">
                    <label>답변 완료</label>

                    <div class="right-col">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" role="switch" id="status_completed" name="status_completed" value="1" @checked($status == 'COMPLETED') @disabled(!$User->is->root && $status == 'COMPLETED')>
                        </div>
                    </div>
                </div>

                <div class="feedback-grades">
                    <div class="form-group">
                        <label>Band Score</label>

                        <select name="band_score" class="form-select" @disabled($status == 'COMPLETED')>
                            <option value="">선택</option>
                            @foreach($totalGrades as $grade)
                                <option value="{{ number_format($grade, 1) }}" @selected(number_format($grade, 1) == number_format($feedbackResponse?->band_score ?? 0, 1))>
                                    {{ number_format($grade, 1) }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="feedback-grades">
                    @foreach ( $evaluationTexts[$subject] as $key => $text )
                        @php
                            $field = 'grade_' . ($key + 1);
                        @endphp
                        <div class="form-group">
                        <label>{{ $text}}</label>

                        <select name="{{ $field }}" class="form-select" @disabled($status == 'COMPLETED')>
                            <option value="">선택</option>
                            @foreach($grades as $grade)
                                <option value="{{ number_format($grade, 1) }}" @selected(number_format($grade, 1) == number_format($feedbackResponse?->{$field} ?? 0, 1))>
                                    {{ number_format($grade, 1) }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    @endforeach

                </div>

                <div class="feedback-files">

                    @if ($subject == 'Writing')
                        @if ( $passType == 'CDT')
                            @foreach ($cdtFeedbackRequests as $key => $request)
                                @include("enrollment.answers.feedback-files",
                                    [
                                        'feedbackResponse' => $request->enrollmentFeedbackResponse,
                                        'sectionTitle' => $request->feedbackTopic->type ,
                                        'containerType' => $request->id
                                    ])
                            @endforeach
                        @else
                            @include("enrollment.answers.feedback-files")
                        @endif
                    @else
                        @if($passType == 'Basic' || $passType == 'CDT')
                            @include("enrollment.answers.feedback-text")
                        @else
                            @include("enrollment.answers.feedback-files")
                        @endif
                    @endif
                </div>
            </main>
        </section>
    </div>
</form>

<section class="mt-3">
    <header>
        학습 문의 {{ $feedbackRequest->comments->count() }}건
        <button class="btn btn-warning btn-toggle" type="button" onclick="toggleOption(this)" id="toggle-feedbackRequest-{{ $feedbackRequest?->id }}-3"><i class="bi bi-chevron-up"></i></button>
    </header>

    <main>
        <form name="feedback-comment" id="feedback-comment" action="{{ route('api.enrollment.set-feedback-comment') }}" method="post" class="default">
            @csrf
            <input type="hidden" name="enrollment_feedback_request_id" value="{{ $feedbackRequest->id }}">

            <div class="input-group">
                <textarea name="comment" id="comment" class="form-control" rows="2" placeholder="내용을 입력해 주세요." maxlength="2000">{{ $feedbackRequest->comment }}</textarea>
                <button type="submit" class="btn btn-outline-secondary">등록</button>
            </div>
        </form>

        <ul class="feedback-comments">
            @foreach($feedbackRequest->topLevelComments as $comment)
                <li id="parent-{{ $comment->id }}">
                    <div class="comment-wrap">
                        @if ($comment->childComments->isEmpty())
                            <a href="#none" class="btn-delete" onclick="deleteComment(this, '{{ $comment->id }}')"><i class="bi bi-trash3"></i></a>
                        @endif

                        <div class="comment-info">
                            <i class="ico-profile" style="background-image: url({{ env("AWS_S3_IMG_URL") }}/ielts/my_class/ico_profile{{ $comment->user->is->staff ? '_edm':'' }}.svg);"></i>
                            <span class="id">{{ $comment->id }}</span>
                            <span class="name">{{ $comment->user->name }}</span>
                            <time datetime="{{ $comment->created_at }}">{{ $comment->created_at }}</time>
                        </div>

                        <div class="comment-content">
                            {!! nl2br($comment->content) !!}
                        </div>

                        <div class="comment-actions">
                            <a href="#none" onclick="replyComment(this, '{{ $comment->id }}')">답글</a>

                            @if ($comment->childComments->count() > 0)
                                <a href="#none" onclick="toggleComments(this, {{ $comment->id }})">답글 <span>{{ $comment->all_children_count }}</span>개 숨기기</a>
                            @endif
                        </div>
                    </div>

                    @if ($comment->childComments)
                        @include('enrollment.comment-children', ['comments' => $comment->childComments])
                    @endif
                </li>
            @endforeach
        </ul>

    </main>
</section>

@endsection


@push("script")
<script>

    function toggleComments(element, commentId) {
        const parentElement = $(`#parent-${commentId}`);
        if (!parentElement.length) return;

        const childComments = parentElement.find('.child-comment');
        childComments.each(function() {
            const child = $(this);
            if (child.is(':visible')) {
                child.slideUp();
            } else {
                child.slideDown();
            }
        });

        if ($(element).text().includes('숨기기')) {
            $(element).html($(element).html().replace('숨기기', '보이기'));
        } else {
            $(element).html($(element).html().replace('보이기', '숨기기'));
        }
    }

    function deleteComment(element, commentId) {
        const parentElement = element.closest('div');
        const requestId = document.querySelector('input[name="enrollment_feedback_request_id"]').value;

        alertify.confirm('정말로 삭제하시겠습니까?', function (e) {
            if (e) {
                $.ajax({
                    url: '{{ route('api.enrollment.delete-feedback-comment') }}',
                    type: 'DELETE',
                    data: {
                        _token: '{{ csrf_token() }}',
                        request_id: requestId,
                        comment_id: commentId
                    },
                    success: function(response) {
                        if (response.success) {
                            alertify.alert('댓글이 삭제되었습니다.');
                            parentElement.fadeOut(500, function() {
                                $(this).remove();
                            });
                        } else {
                            alertify.alert('댓글 삭제에 실패했습니다.');
                        }
                    },
                    error: function(error) {
                        console.log(error.responseJSON.message);
                        alertify.alert('댓글 삭제 중 오류가 발생했습니다.');
                    }
                });
            }
        });
    }

    function replyComment(element, commentId) {
        const form = $('<form>', {
            method: 'post',
            action: '{{ route('api.enrollment.set-feedback-comment') }}',
            class: 'default'
        });

        const csrfInput = $('<input>', {
            type: 'hidden',
            name: '_token',
            value: '{{ csrf_token() }}'
        });

        const requestIdInput = $('<input>', {
            type: 'hidden',
            name: 'enrollment_feedback_request_id',
            value: '{{ $feedbackRequest->id }}'
        });

        const parentIdInput = $('<input>', {
            type: 'hidden',
            name: 'parent_comment_id',
            value: commentId
        });

        const inputGroup = $('<div>', {
            class: 'input-group mt-2'
        });

        const textarea = $('<textarea>', {
            name: 'comment',
            class: 'form-control',
            rows: 2,
            placeholder: '내용을 입력해 주세요.',
            maxlength: 2000
        });

        const submitButton = $('<button>', {
            type: 'submit',
            class: 'btn btn-outline-secondary',
            text: '등록'
        });

        inputGroup.append(textarea, submitButton);
        form.append(csrfInput, requestIdInput, parentIdInput, inputGroup);
        $(element).parent().after(form);
    }

    function addFileInput(type = null) {
        let container;
        if (type) {
            container = document.querySelector(`[data-container="${type}"]`);
            if (!container) return;
        } else {
            container = document.querySelector('.feedback-files div');
        }

        const input = document.createElement('input');
        input.type = 'file';
        input.name = type ? `upload_files[${type}][]` : 'upload_files[]';
        input.classList.add('form-control');
        input.addEventListener('change', function() {
            if (checkDuplicateFilenames()) {
                alert('파일명이 중복되었습니다. 다른 파일명을 사용해 주세요.');
                container.removeChild(input);
            }
        });
        container.appendChild(input);
    }

    function deleteFile(element, file_id) {
        const fileElement = element.closest('li');
        const requestId = $(fileElement).data("request-id");

        alertify.confirm('정말로 삭제하시겠습니까?', function (e) {
            if (e) {
                $.ajax({
                    url: '{{ route('api.enrollment.delete-feedback-file') }}',
                    type: 'DELETE',
                    data: {
                        _token: '{{ csrf_token() }}',
                        request_id: requestId,
                        file_id: file_id
                    },
                    success: function(response) {
                        console.log(response);
                        if (response.success) {
                            fileElement.remove();
                        } else {
                            alertify.alert('파일 삭제에 실패했습니다.');
                        }
                    },
                    error: function(error) {
                        console.log(error.responseJSON.message);
                        alertify.alert('파일 삭제 중 오류가 발생했습니다.');
                    }
                });

                // const form = document.createElement('form');
                // form.method = 'POST';
                // form.action = '{{ route('api.enrollment.delete-feedback-file') }}';
                // form.style.display = 'none';

                // // 필요한 입력 필드들 추가
                // const fields = [
                //     { name: '_token', value: '{{ csrf_token() }}' },
                //     { name: '_method', value: 'DELETE' },
                //     { name: 'request_id', value: requestId },
                //     { name: 'file_id', value: file_id }
                // ];

                // fields.forEach(field => {
                //     const input = document.createElement('input');
                //     input.type = 'hidden';
                //     input.name = field.name;
                //     input.value = field.value;
                //     form.appendChild(input);
                // });

                // document.body.appendChild(form);
                // form.submit();
            }
        });
    }

    function validateForm()
    {
        var errors = [];

        // Speaking audio file 등록 중인지 확인
        var isUploadingAudioFiles = checkIsUploadingAudioFiles();

        // Audio file 등록 중이 아닐 때만 grade validation 수행
        if (! isUploadingAudioFiles) {
            validateInput('select[name="grade_1"]', "점수를 선택하세요.", errors);
            validateInput('select[name="grade_2"]', "점수를 선택하세요.", errors);
            validateInput('select[name="grade_3"]', "점수를 선택하세요.", errors);
            validateInput('select[name="grade_4"]', "점수를 선택하세요.", errors);
            validateInput('select[name="band_score"]', "점수를 선택하세요.", errors);
        }

        $.each($('input[name^="upload_files"]'), function() {
            if ($(this)[0].files.length === 0) {
                $(this).remove();
            }
        })
        @if ($service == 'ielts')
            @if ($subject == 'Writing')
                if (!isUploadingAudioFiles && $('input[name^="upload_files"]').length == 0 && $('.feedback-files ul li').length == 0) {
                    errors.push({
                        message: '첨삭 파일을 추가해 주세요.',
                        element: $('.feedback-files').first()
                    });
                }
            @else
                // Speaking
                @if ($passType == 'Premium')
                    if (!isUploadingAudioFiles && $('input[name="upload_files[]"]').length == 0 && $('.feedback-files ul li').length == 0) {
                        errors.push({
                            message: '첨삭 파일을 추가해 주세요.',
                            element: $('.feedback-files').first()
                        });
                    }
                @else
                    // Audio file 등록 중이 아니고, 기존 audio file이 있는 경우에만 텍스트 첨삭 validation 수행
                    if (!isUploadingAudioFiles) {
                        var audioFileStatus = checkIsUploadingAudioFiles();

                        @if($feedbackRequest->feedbackTopic->type == 'Part 1')
                        if (audioFileStatus.hasPart1Audio && $('textarea[name="feedback_part_1"]').length > 0 && $('textarea[name="feedback_part_1"]').val().trim() === '') {
                            errors.push({
                                message: 'Part 1 첨삭 내용을 입력해 주세요.',
                                element: $('textarea[name="feedback_part_1"]').first()
                            });
                        }
                        @endif

                        @if($feedbackRequest->feedbackTopic->type == 'Part 2&3')
                        if (audioFileStatus.hasPart2Audio && $('textarea[name="feedback_part_2"]').val().trim() === '') {
                            errors.push({
                                message: 'Part 2 첨삭 내용을 입력해 주세요.',
                                element: $('textarea[name="feedback_part_2"]').first()
                            });
                        }

                        if (audioFileStatus.hasPart3Audio && $('textarea[name="feedback_part_3"]').val().trim() === '') {
                            errors.push({
                                message: 'Part 3 첨삭 내용을 입력해 주세요.',
                                element: $('textarea[name="feedback_part_3"]').first()
                            });
                        }
                        @endif
                    }
                @endif
            @endif
        @endif
        if (checkDuplicateFilenames()) {
            errors.push({
                message: '파일명이 중복되었습니다. 다른 파일명을 사용해 주세요.',
                element: $('.feedback-files').first()
            });
        }

        $('.tooltip').remove();

        if (errors.length > 0) {
            generateErrors(errors, 1);

            if (errors[0].element) {
                const $element = $(errors[0].element);

                if ($element.length > 0) {
                    $('html, body').animate({
                        scrollTop: $element.offset().top - 100
                    }, 500);

                    $element.focus();
                }
            }

            return false;
        }



        $('#status_completed').prop("checked", true);

        return true;
    }

    // 헬퍼 함수 추가
    function checkIsUploadingAudioFiles() {
        // 새로운 speaking audio file이 선택되었는지 확인
        if ($('input[name="speaking_part1_audio"]').length > 0 && $('input[name="speaking_part1_audio"]')[0].files.length > 0) {
            return true;
        }
        if ($('input[name="speaking_part2_audio"]').length > 0 && $('input[name="speaking_part2_audio"]')[0].files.length > 0) {
            return true;
        }
        if ($('input[name="speaking_part3_audio"]').length > 0 && $('input[name="speaking_part3_audio"]')[0].files.length > 0) {
            return true;
        }
        return false;
    }

    function checkDuplicateFilenames() {
        const filenames = [];
        let hasDuplicates = false;

        // Check existing files
        $('.feedback-files ul li a').each(function() {
            const filename = $(this).text();
            if (filename.length > 0) {
                filenames.push(filename);
            }
        });

        // Check new files
        $('input[type="file"]').each(function() {
            const filename = $(this).val().split('\\').pop();
            if (filename.length > 0 && filenames.includes(filename)) {
                hasDuplicates = true;
                return false; // break the loop
            }
            filenames.push(filename);
        });

        return hasDuplicates;
    }

    function calculateBandScore() {
        const grade1 = parseFloat($('select[name="grade_1"]').val());
        const grade2 = parseFloat($('select[name="grade_2"]').val());
        const grade3 = parseFloat($('select[name="grade_3"]').val());
        const grade4 = parseFloat($('select[name="grade_4"]').val());

        if (grade1 && grade2 && grade3 && grade4) {
            // Calculate average
            const average = (grade1 + grade2 + grade3 + grade4) / 4;

            // Round to nearest 0.5
            const roundedScore = Math.round(average * 2) / 2;
            const formattedScore = roundedScore.toFixed(1);

            // Set the band score select
            $('select[name="band_score"]').val(formattedScore);
        }
    }

    $(document).ready(function() {
        if (window.location.hash) {
            const target = $(window.location.hash);
            if (target.length) {
                $('html, body').animate({
                    scrollTop: target.offset().top
                }, 'smooth');
            }
        }

        $('#status_completed').on('change', function() {
            // 폼 내용을 모두 작성했을 때만 체크박스 활성화
            if ($(this).is(':checked')) {
                const isFormValid = validateForm();
                $(this).prop('checked', isFormValid);
            } else {
                $(this).prop('checked', false);
            }
        });

        $('#feedback-form').submit(function(e){
            e.preventDefault();

            if (!validateForm()) return;

            // $("#loading-icon").show();

            $(this).find('input[role="switch"]').each( function () {
                var checkbox = $(this);
                if( checkbox.is(':checked')) {
                    checkbox.attr('value','1');
                } else {
                    checkbox.after().append(checkbox.clone().attr({type:'hidden', value:0}));
                    checkbox.prop('disabled', true);
                }
            });


            $.each($('select'), function() {
                $(this).prop("disabled", false)
            })

            // 폼 제출
            this.submit();
        });

        $('select[name^="grade_"]').on('change', function() {
            calculateBandScore();
        });
    });
</script>

    @if ($subject == 'Writing')
        <script>
            function downloadRequestText(id, type) {
                const url = '{{ route("api.enrollment.download-request-text") }}'

                $.ajax({
                    url: url + "?id=" + id ,
                    method: 'GET',
                    xhrFields: {
                        responseType: 'blob'
                    },
                    success: function(data) {
                        const blob = new Blob([data], { type: 'application/pdf' });
                        const link = document.createElement('a');
                        link.href = window.URL.createObjectURL(blob);
                        link.download = `{{ $feedbackRequest->enrollmentFeedbackPass->user->name }}_writing_${type}.pdf`;
                        link.click();
                    },
                    error: function() {
                        alert('Failed to download PDF.');
                    }
                });
            }

            function preViewRequestText(id) {
                const url = '{!! route("api.enrollment.download-request-text", ['preview' => 1]) !!}' + "&id=" + id
                window.open(url, '_blank');
            }

            $(document).ready(function() {
                $(".handle").on("click", function() {
                    const content =  $(this).closest('.feedback-request-wrap').find('.feedback-request-info-table-wrap');
                    if ( content.hasClass('open') ) {
                        content.removeClass("open");
                        $(this).find("i").removeClass('bi-chevron-up').addClass('bi-chevron-down')
                    } else {
                        content.addClass("open");
                        $(this).find("i").addClass('bi-chevron-up').removeClass('bi-chevron-down')
                    }
                })
            });
        </script>
    @endif
@endpush