@extends("common.layout")

@php
    $page_title = "첨삭 요청 상세보기 (". $feedbackRequest->id .")";
    $grades = range(0.5, 9.5, 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>
@endsection

@section("content")
<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="enrollment_feedback_request_id" value="{{ $feedbackRequest->id }}">
    @if ($feedbackResponse)
        <input type="hidden" name="response_id" value="{{ $feedbackResponse->id }}">
    @endif

    <h1>
        <a href="{{ route('enrollment.feedback') }}">
            {{ $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 }}</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>
                @include("enrollment.feedback-".strtolower($subject))
            </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>{{ $subject == 'Writing' ? 'Task Achievement' : 'Fluency & Coherence' }}</label>

                        <select name="grade_1" 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?->grade_1 ?? 0, 1))>
                                    {{ number_format($grade, 1) }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label>{{ $subject == 'Writing' ? 'Cohesion & Coherence' : 'Lexical Resources' }}</label>

                        <select name="grade_2" 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?->grade_2 ?? 0, 1))>
                                    {{ number_format($grade, 1) }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group">
                        <label>{{ $subject == 'Writing' ? 'Lexical Resources' : 'Grammatical Range & Accuracy' }}</label>

                        <select name="grade_3" 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?->grade_3 ?? 0, 1))>
                                    {{ number_format($grade, 1) }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group">
                        <label>{{ $subject == 'Writing' ? 'Grammatical Range & Accuracy' : 'Pronunciation' }}</label>

                        <select name="grade_4" 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?->grade_4 ?? 0, 1))>
                                    {{ number_format($grade, 1) }}
                                </option>
                            @endforeach
                        </select>
                    </div>

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

                        <select name="band_score" 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?->band_score ?? 0, 1))>
                                    {{ number_format($grade, 1) }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="feedback-files">
                    @if ($subject == 'Writing')
                        @if ($passType == 'CDT')
                            <h6>WT1</h6>
                            <div data-container="WT1">
                                @if (!empty($feedbackResponse?->feedback_files))
                                    <ul>
                                        @foreach(json_decode($feedbackResponse->feedback_files) as $file)
                                            @if ($file->subject == 'WT1')
                                            <li>
                                                <a href="{{ app(S3Helper::class)->getDownloadPresignedUrl($file->s3_path) }}" target="_blank">{{ $file->original_name }}</a>
                                                @if ($status != 'COMPLETED')
                                                <a href="javascript:;" onclick="deleteFile(this, '{{ $file->id }}')"><i class="bi bi-trash3"></i></a>
                                                @endif
                                            </li>
                                            @endif
                                        @endforeach
                                    </ul>
                                @endif

                                @if ($status != 'COMPLETED')
                                <button type="button" class="btn btn-sm btn-outline-secondary" onclick="addFileInput('WT1')">파일 추가 <i class="bi bi-plus-circle"></i></button>
                                @endif
                            </div>

                            <h6>WT2</h6>
                            <div data-container="WT2">
                                @if (!empty($feedbackResponse?->feedback_files))
                                    <ul>
                                        @foreach(json_decode($feedbackResponse->feedback_files) as $file)
                                            @if ($file->subject == 'WT2')
                                            <li>
                                                <a href="{{ app(S3Helper::class)->getDownloadPresignedUrl($file->s3_path) }}" target="_blank">{{ $file->original_name }}</a>
                                                @if ($status != 'COMPLETED')
                                                <a href="javascript:;" onclick="deleteFile(this, '{{ $file->id }}')"><i class="bi bi-trash3"></i></a>
                                                @endif
                                            </li>
                                            @endif
                                        @endforeach
                                    </ul>
                                @endif

                                @if ($status != 'COMPLETED')
                                <button type="button" class="btn btn-sm btn-outline-secondary" onclick="addFileInput('WT2')">파일 추가 <i class="bi bi-plus-circle"></i></button>
                                @endif
                            </div>
                        @else
                            <h6>첨삭</h6>

                            @if (!empty($feedbackResponse?->feedback_files))
                                <ul>
                                    @foreach(json_decode($feedbackResponse->feedback_files) as $file)
                                    <li>
                                        @if (isset($file->s3_path))
                                            <a href="{{ app(S3Helper::class)->getDownloadPresignedUrl($file->s3_path) }}" target="_blank">{{ $file->original_name }}</a>
                                            @if ($status != 'COMPLETED')
                                                <a href="javascript:;" onclick="deleteFile(this, '{{ $file->id }}')"><i class="bi bi-trash3"></i></a>
                                            @endif
                                        @else
                                            {{ $file }}
                                        @endif
                                    </li>
                                    @endforeach
                                </ul>
                            @endif

                            @if ($status != 'COMPLETED')
                            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="addFileInput()">파일 추가 <i class="bi bi-plus-circle"></i></button>
                            @endif
                        @endif
                    @else
                        @if($passType == 'Basic' || $passType == 'CDT')
                            <h6>Part 1 첨삭</h6>
                            <textarea name="feedback_part_1" class="form-control" rows="{{ $feedbackRequest->speaking_part1_audio_url ? 10 : 1 }}" @disabled($status == 'COMPLETED' || !$feedbackRequest->speaking_part1_audio_url)>{{ $feedbackResponse?->feedback_part_1 }}</textarea>

                            <h6>Part 2 첨삭</h6>
                            <textarea name="feedback_part_2" class="form-control" rows="{{ $feedbackRequest->speaking_part2_audio_url ? 10 : 1 }}" @disabled($status == 'COMPLETED' || !$feedbackRequest->speaking_part2_audio_url)>{{ $feedbackResponse?->feedback_part_2 }}</textarea>

                            <h6>Part 3 첨삭</h6>
                            <textarea name="feedback_part_3" class="form-control" rows="{{ $feedbackRequest->speaking_part3_audio_url ? 10 : 1 }}" @disabled($status == 'COMPLETED' || !$feedbackRequest->speaking_part3_audio_url)>{{ $feedbackResponse?->feedback_part_3 }}</textarea>
                        @else
                            <h6>첨삭</h6>

                            @if (!empty($feedbackResponse?->feedback_files))
                                <ul>
                                    @foreach(json_decode($feedbackResponse->feedback_files) as $file)
                                    <li>
                                        <a href="{{ app(S3Helper::class)->getDownloadPresignedUrl($file->s3_path) }}" target="_blank">{{ $file->original_name }}</a>
                                        <a href="javascript:;" onclick="deleteFile(this, '{{ $file->id }}')"><i class="bi bi-trash3"></i></a>
                                    </li>
                                    @endforeach
                                </ul>
                            @endif

                            @if ($status != 'COMPLETED')
                            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="addFileInput()">파일 추가 <i class="bi bi-plus-circle"></i></button>
                            @endif
                        @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(https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/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');
        }

        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 = document.querySelector('input[name="enrollment_feedback_request_id"]').value;

        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('파일 삭제 중 오류가 발생했습니다.');
                    }
                });
            }
        });
    }

    function validateForm()
    {
        var errors = [];

        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);

        @if ($subject == 'Writing')
            @if ($passType == 'CDT')
            if ($('input[name="upload_files[WT1][]"]').length == 0 && $('div[data-container="WT1"] ul li').length == 0) {
                errors.push({
                    message: 'WT1 첨삭 파일을 추가해 주세요.',
                    element: $('div[data-container="WT1"]').first()
                });
            }

            if ($('input[name="upload_files[WT2][]"]').length == 0 && $('div[data-container="WT2"] ul li').length == 0) {
                errors.push({
                    message: 'WT2 첨삭 파일을 추가해 주세요.',
                    element: $('div[data-container="WT2"]').first()
                });
            }
            @else
            if ($('input[name="upload_files[]"]').length == 0 && $('.feedback-files ul li').length == 0) {
                errors.push({
                    message: '첨삭 파일을 추가해 주세요.',
                    element: $('.feedback-files').first()
                });
            }
            @endif
        @else
            // Speaking
            @if ($passType == 'Premium')
                if ($('input[name="upload_files[]"]').length == 0 && $('.feedback-files ul li').length == 0) {
                    errors.push({
                        message: '첨삭 파일을 추가해 주세요.',
                        element: $('.feedback-files').first()
                    });
                }
            @else
                @if($feedbackRequest->feedbackTopic->type == 'Part 1')
                if ($('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 ($('textarea[name="feedback_part_2"]').val().trim() === '') {
                    errors.push({
                        message: 'Part 2 첨삭 내용을 입력해 주세요.',
                        element: $('textarea[name="feedback_part_2"]').first()
                    });
                }

                if ($('textarea[name="feedback_part_3"]').val().trim() === '') {
                    errors.push({
                        message: 'Part 3 첨삭 내용을 입력해 주세요.',
                        element: $('textarea[name="feedback_part_3"]').first()
                    });
                }
                @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;
        }

        return true;
    }

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

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

        // Check new files
        $('input[type="file"]').each(function() {
            const filename = $(this).val().split('\\').pop();
            if (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);

            console.log(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);
                }
            });

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

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