@extends("common.layout")

@php
    $page_title = ' Speaking/Writing 문항 ' . ($feedbackTopic?->id ? '상세보기 ('.$feedbackTopic->id.')' : '등록');
@endphp

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

@section("header")
{!! resource('css/form.css') !!}
{!! resource('js/form.js') !!}

<style>
    .toastui-editor-contents img {max-height: 50vh}
    .pattern-col {align-items: flex-start !important}
</style>
@endsection

@section("content")

<form id="feedback-topic-form" action="{{ $feedbackTopic?->id ? route('product.feedback-topic.set', ['id'=>$feedbackTopic->id]) : route('product.feedback-topic.set') }}" method="post" class="default" enctype="multipart/form-data">
    @csrf

    <h1>
        <div>
            <a href="{{ route('product.feedback-topic.list') }}"><i class="bi bi-arrow-left-circle"></i></a>
            {{ $page_title }}
        </div>

        <div class="fixed-btns btn-group">
            @if ($feedbackTopic?->id)
                @if ($User->is->root)
                <button class="btn btn-danger" type="button" onclick="deleteTopic({{ $feedbackTopic->id }})">삭제</button>
                @endif
            @endif
            <button type="submit" class="btn btn-primary">저장</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" style="grid-template-columns: 1fr 400px;">
        <section>
            <header>
                상세내용
                <button class="btn btn-warning btn-toggle" type="button" onclick="toggleOption(this)" id="toggle-feedback-topic-{{ $feedbackTopic?->id }}-1"><i class="bi bi-chevron-up"></i></button>
            </header>

            <main class="split-form">
                {{--토픽 번호--}}
                @if ($feedbackTopic?->id)
                <div class="form-group">
                    <label>토픽 번호</label>
                    <div>
                        {{ $feedbackTopic?->id }}
                    </div>
                </div>
                @endif

                {{--활성 구분--}}
                <div class="form-group">
                    <label class="required">활성 구분</label>

                    <div class="right-col">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" role="switch" id="activated" name="activated" value="1" @checked(!$feedbackTopic || $feedbackTopic->activated == 1)>
                        </div>
                    </div>
                </div>

                {{--서비스유형--}}
                <div class="form-group">
                    <label class="required">서비스유형</label>
                    @php
                        if ($feedbackTopic) {
                            $serviceTypes = $feedbackTopic->service_types;
                        } else {
                            $serviceTypes = []; #session('service_type') ? [session('service_type')] : [];
                        }
                    @endphp
                    <div class="right-col" id="service-type-container">
                        @foreach (config('system.feedback_topic_service_types') as $key => $serviceType)
                            <div class="form-check">
                                <input type="checkbox" id="serviceId{{ $key }}" name="service_type[]" class="form-check-input" value="{{ $key }}" @checked(in_array($key , $serviceTypes) || (!$feedbackTopic && $key == 'feedback'))>
                                <label class="form-check-label" for="serviceId1">{{ $serviceType }}</label>
                            </div>
                        @endforeach
                    </div>
                </div>

                {{--모듈--}}
                <div class="form-group">
                    <label class="required">모듈</label>
                    <div class="right-col" id="module-container">
                        @foreach (config('system.modules') as $key => $module)
                        <div class="form-check">
                            <input type="radio" id="moduleId{{ $key }}" name="module" class="form-check-input" value="{{ $module }}" @checked($feedbackTopic?->module == $module)>
                            <label class="form-check-label" for="moduleId{{ $key }}">{{ $module }}</label>
                        </div>
                        @endforeach
                    </div>
                </div>

                {{-- 과목 --}}
                <div class="form-group">
                    <label class="required">과목</label>
                    <div class="right-col" id="subject-container">
                        @foreach ($feedbackPatterns as $subject => $types)
                            <div class="form-check">
                                <input
                                    type="radio"
                                    name="subject"
                                    class="form-check-input"
                                    value="{{ $subject }}"
                                    id="subject-{{ $loop->index }}"
                                    @checked(old('subject', $feedbackTopic->subject ?? '') == $subject)>
                                <label class="form-check-label" for="subject-{{ $loop->index }}">{{ $subject }}</label>
                            </div>
                        @endforeach
                    </div>
                </div>

                {{-- 타입 --}}
                <div class="form-group">
                    <label class="required">타입</label>
                    <div class="right-col" id="type-container"></div>
                </div>

                {{-- 패턴 --}}
                <div class="form-group">
                    <label class="required">패턴</label>
                    <div class="right-col pattern-col">
                        <div id="pattern-container"></div>
                        <div id="chart-type-container"></div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="required" for="question" id="qustion1-label">
                        @if ($feedbackTopic?->type == 'Task 1')
                            Task 1 질문
                        @elseif ($feedbackTopic?->type == 'Task 2')
                            Task 2 질문
                        @elseif ($feedbackTopic?->type == 'Part 1')
                            Part 1 질문
                        @elseif ($feedbackTopic?->type == 'Part 2&3')
                            Part 2 질문
                        @else
                            토픽 질문
                        @endif
                    </label>

                    <div class="right-col">
                        <x-editor id='question' height='auto' :content="$feedbackTopic?->question" />
                    </div>
                </div>

                <div class="form-group" id="question2-container" @if ($feedbackTopic?->type != 'Part 2&3') style="display: none;" @endif>
                    <label class="required" for="question2" id="qustion2-label">Part 3</label>

                    <div class="right-col">
                        <x-editor id='question2' height='auto' :content="$feedbackTopic?->question2" />
                    </div>
                </div>

                <div class="form-group" id="answer-container" @if ($feedbackTopic?->type != 'Task 1' && $feedbackTopic?->type != 'Task 2') style="display: none;" @endif>
                    <label for="answer" id="answer-label">모범 답안</label>

                    <div class="right-col">
                        <x-editor id='answer' height='auto' :content="$feedbackTopic?->answer" />
                    </div>
                </div>
            </main>
        </section>

        <section>
            <header>
                차트이미지
                <div>
                    <button type="button" class="btn btn-info" onclick="$('#thumbnail').click();" id="thumbnail-find-btn">이미지 찾기</button>
                            <input class="d-none" type="file" id="thumbnail" name="chart_image" accept="image/*" onchange="changeImage(event)"/>
                    <button class="btn btn-warning btn-toggle" type="button" onclick="toggleOption(this)" id="toggle-feedbackTopic-{{ $feedbackTopic?->id }}-preview"><i class="bi bi-chevron-up"></i></button>
                </div>
            </header>

            <main>
                <div id="thumbnail-wrapper">
                    @if ($feedbackTopic?->chart_s3_key)
                        <div class="thumbnail-img-wrapper">
                            <button class="btn-delete" type="button" onclick="deleteImage({{ $feedbackTopic->id }})"><i class="bi bi-x-circle-fill"></i></button>
                            <img name="thumbnail" data-id="{{ $feedbackTopic->id }}" alt="" src="{{ app(\S3Helper::class)->getPublicUrl($feedbackTopic->chart_s3_key) }}">
                        </div>
                    @endif
                </div>
            </main>
        </section>
    </div>
</form>

@endsection

@push("script")
<script>
@if ($feedbackTopic)
function deleteTopic(feedbackTopicId) {
    if (confirm('정말 삭제하시겠습니까?')) {
        $.ajax({
            type: "DELETE",
            url: '/api/products/feedback-topics/'+feedbackTopicId,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') // CSRF 토큰 추가
            },
            success: function(service) {
                location.href = '/products/feedback-topics/list';
            },
            error: function(xhr, status, error) {
                console.error("Error deleting feedbackTopic:", error);
            }
        });
    }
}
@endif

function changeImage(e) {
    let file = e.target.files[0];
    const dataTransfer = new DataTransfer();
    dataTransfer.items.add(file);
    addImageElement(file);
    e.target.files = dataTransfer.files;
}

function addImageElement(file) {
    const $thumbnailDiv = $("<div>").addClass("thumbnail-img-wrapper");

    const $deleteBtn = $("<button>")
        .addClass("btn-delete")
        .attr("type", "button")
        .html('<i class="bi bi-x-circle-fill"></i>')
        .on("click", deleteImage);

    const imageSource = URL.createObjectURL(file);
    const $thumbnailImg = $("<img>")
        .attr("src", imageSource)
        .attr("name", "chart_image")
        .data("file", file);

    $thumbnailDiv.append($deleteBtn, $thumbnailImg);

    const $parent = $("#thumbnail-wrapper");
    $parent.html($thumbnailDiv);

    URL.revokeObjectURL(file);
}

function deleteImage(feedbackTopicId) {
    if (typeof feedbackTopicId === 'number') {
        const $image = $('img[data-id="'+feedbackTopicId+'"]');
        const targetUrl = '/api/products/feedback-topics/delete-chart-image?id='+feedbackTopicId;

        $.ajax({
            type: "DELETE",
            url: targetUrl,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') // CSRF 토큰 추가
            },
            beforeSend: function() {
                $("#loading-icon").show();
            },
            success: function(response) {
                $("#loading-icon").hide();
                alertify.alert("성공", "썸네일이 삭제되었습니다.");
                $image.closest('.thumbnail-img-wrapper').remove();
            },
            error: function(xhr, status, error) {
                $("#loading-icon").hide();
                console.error("Error deleting image:", error);
            }
        });
    }
}

function validateForm() {
    var errors = [];

    // 활성 구분 체크
    // validateInput('input[name="activated"]', "활성 구분을 선택하세요.", errors);

    // 서비스유형 체크
    validateInput('input[name="service_type[]"]', "서비스유형을 선택하세요.", errors);

    // 모듈 체크
    validateInput('input[name="module"]', "모듈을 선택하세요.", errors);

    // 과목 체크
    validateInput('input[name="subject"]', "과목을 선택하세요.", errors);

    // 타입 체크
    validateInput('input[name="type"]', "타입을 선택하세요.", errors);

    // Part 2&3인 경우 question2 필드도 검증
    const selectedType = $('input[name="type"]:checked').val();

    // Task 1, Task 2, Part 2&3이 아닌 경우 패턴 체크
    if (selectedType && selectedType !== 'Part 1') {
        validateInput('input[name="pattern"]', "패턴을 선택하세요.", errors);
    }

    // 에디터 내용 검증 (question)
    const questionContent = window.toastuiEditors['question'].getMarkdown().trim();
    if (!questionContent) {
        errors.push({
            message: "질문을 입력하세요.",
            element: $('#question')
        });
    }

    // Part 2&3 타입인 경우 question2 필드 검증
    if (selectedType === 'Part 2&3') {
        const question2Content = window.toastuiEditors['question2'].getMarkdown().trim();
        if (!question2Content) {
            errors.push({
                message: "Part 3 질문을 입력하세요.",
                element: $('#question2')
            });
        }
    }

    // Task 1 또는 Task 2인 경우 차트 타입 검증
    const selectedSubject = $('input[name="subject"]:checked').val();
    const selectedModule = $('input[name="module"]:checked').val();
    const selectedPattern = $('input[name="pattern"]:checked').val();

    if (selectedSubject === 'Writing' && selectedModule === 'academic' &&
        selectedType === 'Task 1' && (selectedPattern == 'Pattern 1' || selectedPattern == 'Pattern 2') && !$('input[name="chart_type"]:checked').length) {
        errors.push({
            message: "차트 타입을 선택하세요.",
            element: $('#chart-type-container')
        });
    }

    // Writing Task 1인 경우 차트 이미지 검증
    if (selectedSubject === 'Writing' && selectedModule === 'academic' && selectedType === 'Task 1' && (selectedPattern == 'Pattern 1' || selectedPattern == 'Pattern 2')) {
        // 기존 이미지가 있는지 확인
        const hasExistingImage = $('#thumbnail-wrapper .thumbnail-img-wrapper img').length > 0;
        // 새 이미지가 선택되었는지 확인
        const hasNewImage = $('#thumbnail').get(0)?.files?.length > 0;

        if (!hasExistingImage && !hasNewImage) {
            errors.push({
                message: "이미지를 선택하세요.",
                element: $('#thumbnail-find-btn')
            });
        }
    }

    // 이전 툴팁 제거
    $('.tooltip').remove();

    console.log(errors);

    // 에러가 있으면 첫 번째 에러 메시지 표시 및 해당 요소로 스크롤
    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;
}

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

        // 필수 항목 검증
        if (!validateForm()) return;

        const editor = window.toastuiEditors['question'];
        const editor2 = window.toastuiEditors['question2'];
        const editor3 = window.toastuiEditors['answer'];

        var editorInput = $('<input>').attr({
            type: 'hidden',
            name: 'question',
            value: editor.getHTML()
        });
        $(this).append(editorInput);

        var editorInput2 = $('<input>').attr({
            type: 'hidden',
            name: 'question2',
            value: editor2.getHTML()
        });
        $(this).append(editorInput2);

        var editorInput3 = $('<input>').attr({
            type: 'hidden',
            name: 'answer',
            value: editor3.getHTML()
        });
        $(this).append(editorInput3);

        this.submit();
    });

    const feedbackPatterns = @json($feedbackPatterns);

    let selectedSubject = "{{ old('subject', $feedbackTopic->subject ?? '') }}";
    let selectedType = {!! json_encode(old('type', $feedbackTopic->type ?? '')) !!};
    let selectedPattern = "{{ old('pattern', $feedbackTopic->pattern ?? '') }}";
    let selectedModule = "{{ old('module', $feedbackTopic->module ?? '') }}";
    let selectedChartType = "{{ old('chart_type', $feedbackTopic->chart_type ?? '') }}";
    let selectedServiceType = {!! json_encode(old('service_types', $feedbackTopic->service_types ?? [])) !!};

    // Initialize form on page load
    if (selectedSubject) {
        populateTypes(selectedSubject, selectedModule);
        populatePatterns(selectedSubject, selectedModule, selectedType);

        if (!(selectedModule == 'academic' && selectedSubject == 'Writing' && selectedType == 'Task 1')) toggleChartImage('hide');
    } else {
        toggleChartImage('hide');
    }

    $('#module-container').on('change', 'input[name="module"]', function() {
        selectedModule = $(this).val();
        resetSelections(['type', 'pattern', 'chart_type']);
        populateTypes(selectedSubject, selectedModule);
    });

    $('#subject-container').on('change', 'input[name="subject"]', function() {
        selectedSubject = $(this).val();
        resetSelections(['type', 'pattern', 'chart_type']);
        populateTypes(selectedSubject, selectedModule);
    });

    $('#type-container').on('change', 'input[name="type"]', function() {
        selectedType = $(this).val();

        switch (selectedType) {
            case 'Task 1':
                $('#qustion1-label').text('Task 1 질문');
                $('#question2-container').hide();
                $('#answer-container').show();
                break;

            case 'Task 2':
                $('#qustion1-label').text('Task 2 질문');
                $('#question2-container').hide();
                $('#answer-container').show();
                break;

            case 'Part 1':
                $('#qustion1-label').text('Part 1 질문');
                $('#question2-container').hide();
                $('#answer-container').hide();
                break;

            case 'Part 2&3':
                $('#qustion1-label').text('Part 2 질문');
                $('#qustion2-label').text('Part 3 질문');
                $('#question2-container').show();
                $('#answer-container').hide();
                break;
        }

        /*if (selectedType == 'Part 2&3') {
            $('#question2 .toastui-editor-contents').prop('contenteditable', true);
            $('#question2 .toastui-editor').css('background-color', '#fff');
        } else {
            $('#question2 .toastui-editor-contents').prop('contenteditable', false);
            $('#question2 .toastui-editor').css('background-color', '#f8f9fa');
        }*/

        console.log(selectedType);

        resetSelections(['pattern', 'chart_type']);
        //if (!(selectedServiceType.includes('cdt') && selectedSubject === 'Speaking')) {
            populatePatterns(selectedSubject, selectedModule, selectedType);
        //}
    });

    $('#pattern-container').on('change', 'input[name="pattern"]', function() {
        selectedPattern = $(this).val();
        populateSubOptions(selectedPattern);
    });

    function populateTypes(subject, module) {
        $('#type-container').empty();

        const types = feedbackPatterns[subject];
        $.each(types, function(index, type) {
            const typeLabel = typeof type === 'string' ? type : index;
            const typeHtml = `<div class="form-check">
                <input type="radio" name="type" value="${typeLabel}" id="type-${index}" class="form-check-input">
                <label for="type-${index}" class="form-check-label">${typeLabel}</label>
            </div>`;
            $('#type-container').append(typeHtml);
        });

        if (selectedType) {
            $(`input[name="type"][value="${selectedType}"]`).prop('checked', true).trigger('change');
        }
    }

    function populatePatterns(subject, module, type) {
        $('#pattern-container').empty();

        if (type == 'Part 1') {
            return;
        }

        let patterns = [];
        let speakingPatterns = [];

        if (type == 'Task 1') {
            patterns = Object.keys(feedbackPatterns[subject][type][module]);
        } else {
            patterns = Object.keys(feedbackPatterns[subject][type]);

            if (type == 'Part 2&3') {
                speakingPatterns = getSpeakingPattenrns();
                // console.log(speakingPatterns);
            }
        }

        $.each(patterns, function(index, pattern) {
            let patternDesc = ''; let patternHtml = '';
            if (type === 'Task 1' && feedbackPatterns[subject][type][module]) {
                patternDesc = feedbackPatterns[subject][type][module][pattern];
            } else if (feedbackPatterns[subject][type]) {
                patternDesc = feedbackPatterns[subject][type][pattern];
            }

            if (type == 'Part 2&3' && speakingPatterns.includes(pattern)) {
                patternHtml = `<div class="form-check">
                    <input type="radio" name="pattern" value="${pattern}" id="pattern-${index}" class="form-check-input">
                    <label for="pattern-${index}" class="form-check-label text-secondary">${pattern} - ${patternDesc}</label>
                </div>`;
            } else {
                patternHtml = `<div class="form-check">
                    <input type="radio" name="pattern" value="${pattern}" id="pattern-${index}" class="form-check-input">
                    <label for="pattern-${index}" class="form-check-label text-dark">${pattern} - ${patternDesc}</label>
                </div>`;
            }
            $('#pattern-container').append(patternHtml);
        });

        if (selectedPattern) {
            $(`input[name="pattern"][value="${selectedPattern}"]`).prop('checked', true).prop('disabled', false).trigger('change');
            //$(`input[name="pattern"][value="${selectedPattern}"]`).prop('checked', true).trigger('change');
            populateSubOptions(selectedPattern);
        }
    }

    function getSpeakingPattenrns() {
        const speakingPatterns = [];
        $.ajax({
            type: "GET",
            url: '/api/products/feedback-topics/speaking-patterns?type='+selectedType,
            async: false,
            success: function(response) {
                speakingPatterns.push(...response);
            },
            error: function(xhr, status, error) {
                console.error("Error fetching speaking patterns:", error);
            }
        });

        return speakingPatterns;
    }

    function populateSubOptions(pattern) {
        //$('#chart-type-container').empty();
        if (selectedSubject === 'Writing' && selectedModule === 'academic') {
            let subOptions = [];
            // if (pattern === 'Pattern 1') {
            //     subOptions = ['Bar', 'Line', 'Pie', 'Table', 'Mixed'];
            // } else if (pattern === 'Pattern 2') {
                if (pattern === 'Pattern 1' || pattern === 'Pattern 2') {
                    subOptions = ['Bar', 'Pie', 'Table', 'Mixed'];
                }
                // subOptions = ['Bar', 'Pie', 'Table', 'Mixed'];
            // }

            if (selectedType == 'Task 1') toggleChartImage('show');
            else toggleChartImage('hide');

            if (selectedType == 'Task 1') createSubOptions(subOptions, selectedChartType);
        }
    }

    function createSubOptions(subOptions, preselected = null) {
        let subOptionHtml = '';
        $.each(subOptions, function(index, subOption) {
            const isChecked = preselected === subOption ? 'checked' : '';
            subOptionHtml += `<div class="form-check">
                <input type="radio" name="chart_type" value="${subOption}" class="form-check-input" ${isChecked}>
                <label class="form-check-label">${subOption}</label>
            </div>`;
        });

        $('#chart-type-container').html(subOptionHtml);
    }

    function resetSelections(selections = []) {
        if (selections.includes('type')) {
            selectedType = null;
            $('#type-container').empty();
            toggleChartImage('hide');
        }

        if (selections.includes('pattern')) {
            selectedPattern = null;
            $('#pattern-container').empty();
            toggleChartImage('hide');
        }

        if (selections.includes('chart_type')) {
            selectedChartType = null;
            $('#chart-type-container').empty();
            toggleChartImage('hide');
        }
    }

    function toggleChartImage(action = 'hide') {
        if (action == 'hide') {
            $('#thumbnail-find-btn').prop('disabled', true);
        } else {
            $('#thumbnail-find-btn').prop('disabled', false);
        }
    }
});

</script>
@endpush