@extends("common.layout")

@php
    $page_title = ' CDT 세트 답변 '. ($cdtSetAnswer ? '상세보기 ('.$file_set.')' : '등록');
    if ($file_set) $service = $cdtSetAnswer[0]->service;
    else $service = null;
@endphp

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

@section("header")
{!! resource('css/form.css') !!}
{!! resource('js/form.js') !!}
<link href="https://cdn.jsdelivr.net/npm/summernote@0.9.0/dist/summernote-bs4.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.9.0/dist/summernote-bs4.min.js"></script>
@endsection

@section("content")

<form id="cdtSetAnswer-form" action="{{ route('api.product.cdt-set.set-cdt-set-answer') }}" method="post" class="default">
    @csrf

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

        <div class="fixed-btns btn-group">
            <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>

    <section>
        <header>
            기본 정보
            <button class="btn btn-warning btn-toggle" type="button" onclick="toggleOption(this)" id="toggle-cdtSetAnswer-{{ $service.$file_set }}-basic"><i class="bi bi-chevron-up"></i></button>
        </header>

        <main class="split-form">
            <div class="form-group">
                <label class="required" for="service">서비스</label>

                <div class="right-col">
                    @if ($file_set)
                        {{ $cdtSetAnswer[0]->service }}
                        <input type="hidden" name="service" id="service" value="{{ $cdtSetAnswer[0]->service }}" />
                    @else
                        @foreach (config('system.services') as $service)
                        <div class="form-check form-check-inline">
                            <input class="form-check" type="radio" name="service" id="service-{{ $service }}" value="{{ $service }}" @checked($cdtSetAnswer && $cdtSetAnswer[0]->service == $service)>
                            <label class="form-check" for="service-{{ $service }}">{{ $service }}</label>
                        </div>
                        @endforeach
                    @endif
                </div>
            </div>

            <div class="form-group">
                <label class="required" for="module">모듈</label>

                <div class="right-col">
                    @foreach (config('system.modules') as $module)
                    <div class="form-check form-check-inline">
                        <input class="form-check" type="radio" name="module" id="module-{{ $module }}" value="{{ $module }}" @checked($cdtSetAnswer && $cdtSetAnswer[0]->module == $module)>
                        <label class="form-check" for="module-{{ $module }}">{{ $module }}</label>
                    </div>
                    @endforeach
                </div>
            </div>

            <div class="form-group">
                <label class="required" for="file_set">CDT 문항 세트</label>

                <div class="right-col">
                    @if ($file_set)
                        {{ $file_set }}
                        <input type="hidden" name="file_set" id="file_set" value="{{ $file_set }}" />
                    @else
                        <select name="file_set" id="file_set" class="form-select">
                            <option value="">선택</option>
                        </select>
                    @endif
                </div>
            </div>

        </main>
    </section>


    <section class="my-3">
        <header>
            Listening
            <div>
                <button class="btn btn-info" type="button" id="preview-listening">문제 보기</button>
                <button class="btn btn-warning btn-toggle" type="button" onclick="toggleOption(this)" id="toggle-cdtSetAnswer-listening-{{ $service.$file_set }}-basic"><i class="bi bi-chevron-up"></i></button>
            </div>
        </header>

        <main>
            <table class="table table-bordered cdt-set-answer-table">
                <thead>
                    <tr>
                        <th>문항</th>
                        <th>정답</th>
                        <th>해설</th>
                        <th>해설(영문)</th>
                    </tr>
                </thead>
                <tbody>
                    @for ($i = 1; $i <= 40; $i++)
                    @php
                        if ($cdtSetAnswer) {
                            $an = $cdtSetAnswer->where('number', $i)->where('subject', 'listening')->first();
                            $answers = preg_split('/[|;]/', $an->answer);
                        } else {
                            $an = null;
                            $answers = [];
                        }
                    @endphp
                    <tr>
                        <td class="number">
                            {{ $i }}
                        </td>

                        <td class="answer">
                            <div id="listening-answer-container-{{ $i }}">
                                @if ($an?->answer)
                                    @foreach ($answers as $k => $answer)
                                        <div @class(['input-group input-group-sm', 'mt-1' => $k > 0])>
                                            <input type="text" name="listening_answers[{{ $i }}][]" id="listening-answers-{{ $i }}" class="form-control" placeholder="정답" value="{{ $answer }}" />
                                            <button type="button" class="btn btn-outline-{{ $k == 0 ? 'secondary':'danger' }}" onclick="addAnswerForm({{ $i }}, 'listening')"><i class="bi bi-{{ $k == 0 ? 'plus':'dash' }}"></i></button>
                                        </div>
                                    @endforeach
                            
                                    @if (count($answers) > 1)
                                    <div id="listening-condition-container-{{ $i }}" class="answer-condition">
                                        <input type="radio" name="listening_answer_condition[{{ $i }}]" id="listening-answer-condition-and-{{ $i }}" value="AND" @checked(preg_match('/;/', $an->answer)) />
                                        <label for="listening-answer-condition-and-{{ $i }}">AND</label>
                                        <input type="radio" name="listening_answer_condition[{{ $i }}]" id="listening-answer-condition-or-{{ $i }}" value="OR" @checked(preg_match('/\|/', $an->answer)) />
                                        <label for="listening-answer-condition-or-{{ $i }}">OR</label>
                                    </div>
                                    @endif
                                @else
                                    <div class="input-group input-group-sm">
                                        <input type="text" name="listening_answers[{{ $i }}][]" id="listening-answers-{{ $i }}" class="form-control" placeholder="정답" />
                                        <button type="button" class="btn btn-outline-secondary" onclick="addAnswerForm({{ $i }}, 'listening')"><i class="bi bi-plus"></i></button>
                                    </div>
                                @endif
                            </div>
                        </td>

                        <td class="explanation">
                            <textarea name="listening_explanations[{{ $i }}]" id="listening-explanations-{{ $i }}" class="form-control" rows="3">{!! $an?->explanation !!}</textarea>
                        </td>

                        <td class="explanation">
                            <textarea name="listening_explanations_en[{{ $i }}]" id="listening-explanations-en-{{ $i }}" class="form-control" rows="3">{!! $an?->explanation_en !!}</textarea>
                        </td>
                    </tr>
                    @endfor
                </tbody>
            </table>
        </main>
    </section>

    <section>
        <header>
            Reading
            <div>
                <button class="btn btn-info" type="button" id="preview-reading">문제 보기</button>
                <button class="btn btn-warning btn-toggle" type="button" onclick="toggleOption(this)" id="toggle-cdtSetAnswer-reading-{{ $service.$file_set }}-basic"><i class="bi bi-chevron-up"></i></button>
            </div>
        </header>

        <main>
            <table class="table table-bordered cdt-set-answer-table">
                <thead>
                    <tr>
                        <th>문항</th>
                        <th>정답</th>
                        <th>해설</th>
                        <th>해설(영문)</th>
                    </tr>
                </thead>
                <tbody>
                    @for ($i = 1; $i <= 40; $i++)
                    @php
                        if ($cdtSetAnswer) {
                            $an = $cdtSetAnswer->where('number', $i)->where('subject', 'reading')->first();
                            $answers = explode('|', $an->answer);
                        } else {
                            $an = null;
                            $answers = [];
                        }
                    @endphp
                    <tr>
                        <td class="number">
                            {{ $i }}
                        </td>

                        <td class="answer">
                            <div id="reading-answer-container-{{ $i }}">
                                @if ($an?->answer)
                                    @foreach ($answers as $k => $answer)
                                        <div @class(['input-group input-group-sm', 'mt-1' => $k > 0])>
                                            <input type="text" name="reading_answers[{{ $i }}][]" id="reading-answers-{{ $i }}" class="form-control" placeholder="정답" value="{{ $answer }}" />
                                            <button type="button" class="btn btn-outline-{{ $k == 0 ? 'secondary':'danger' }}" onclick="addAnswerForm({{ $i }}, 'reading')"><i class="bi bi-{{ $k == 0 ? 'plus':'dash' }}"></i></button>
                                        </div>
                                    @endforeach
                            
                                    @if (count($answers) > 1)
                                    <div id="reading-condition-container-{{ $i }}" class="answer-condition">
                                        <input type="radio" name="reading_answer_condition[{{ $i }}]" id="reading-answer-condition-and-{{ $i }}" value="AND" @checked(preg_match('/;/', $an->answer)) />
                                        <label for="reading-answer-condition-and-{{ $i }}">AND</label>
                                        <input type="radio" name="reading_answer_condition[{{ $i }}]" id="reading-answer-condition-or-{{ $i }}" value="OR" @checked(preg_match('/\|/', $an->answer)) />
                                        <label for="reading-answer-condition-or-{{ $i }}">OR</label>
                                    </div>
                                    @endif
                                @else
                                    <div class="input-group input-group-sm">
                                        <input type="text" name="reading_answers[{{ $i }}][]" id="reading-answers-{{ $i }}" class="form-control" placeholder="정답" />
                                        <button type="button" class="btn btn-outline-secondary" onclick="addAnswerForm()"><i class="bi bi-plus"></i></button>
                                    </div>
                                @endif
                            </div>
                        </td>

                        <td class="explanation">
                            <textarea name="reading_explanations[{{ $i }}]" id="reading-explanations-{{ $i }}" class="form-control" rows="3">{{ $an?->explanation }}</textarea>
                        </td>

                        <td class="explanation">
                            <textarea name="reading_explanations_en[{{ $i }}]" id="reading-explanations-en-{{ $i }}" class="form-control" rows="3">{{ $an?->explanation_en }}</textarea>
                        </td>
                    </tr>
                    @endfor
                </tbody>
            </table>
        </main>
    </section>

</form>

@endsection

@push("script")
<script>
    // edmPopupOpen 함수 수정 또는 새로운 함수 생성
    function openCdtPreview(url, name) {
        var width = 800;
        var height = 600;
        var left = (window.innerWidth - width) / 2;
        var top = (window.innerHeight - height) / 2;
        
        var options = 'width=' + width + ',height=' + height + 
                    ',top=' + top + ',left=' + left + 
                    ',resizable=yes,scrollbars=yes,status=no,location=no';
                    
        window.open(url, name, options);
        
        return false;
    }

    // 정답 입력 폼 추가 함수
    function addAnswerForm(number, subject) {
        // 해당 문항의 컨테이너를 찾음
        const container = $(`#${subject}-answer-container-${number}`);
        const inputGroups = container.find('.input-group');
        const conditionContainerId = `${subject}-condition-container-${number}`;

        // 새 입력 그룹 생성
        const newInput = $('<div class="input-group input-group-sm mt-1"></div>');
        newInput.append(
            $('<input>')
                .attr('type', 'text')
                .attr('name', `${subject}_answers[${number}][]`)
                .attr('class', 'form-control')
                .attr('placeholder', '정답')
        );

        // 삭제 버튼 추가
        newInput.append(
            $('<button>')
                .attr('type', 'button')
                .attr('class', 'btn btn-outline-danger')
                .html('<i class="bi bi-dash"></i>')
                .on('click', function () {
                    $(this).parent().remove();
                    toggleConditionButtons(number, subject); // 폼 개수 변경 시 라디오 버튼 상태 업데이트
                })
        );

        // 새 입력 그룹을 라디오 버튼 컨테이너 앞에 추가
        if ($(`#${conditionContainerId}`).length > 0) {
            $(`#${conditionContainerId}`).before(newInput);
        } else {
            container.append(newInput);
        }

        // 폼 개수 변경 시 라디오 버튼 상태 업데이트
        toggleConditionButtons(number, subject);
    }

    // 폼 개수에 따라 라디오 버튼 컨테이너를 동적으로 추가/삭제하는 함수
    function toggleConditionButtons(number, subject) {
        const container = $(`#${subject}-answer-container-${number}`);
        const inputGroups = container.find('.input-group');
        const conditionContainerId = `${subject}-condition-container-${number}`;

        if (inputGroups.length > 1) {
            // 폼이 2개 이상이면 라디오 버튼 컨테이너 추가
            if ($(`#${conditionContainerId}`).length === 0) {
                const conditionHtml = `
                    <div id="${conditionContainerId}" class="answer-condition mt-1">
                        <input type="radio" name="${subject}_answer_condition[${number}]" id="${subject}-answer-condition-and-${number}" value="AND">
                        <label for="${subject}-answer-condition-and-${number}">AND</label>
                        <input type="radio" name="${subject}_answer_condition[${number}]" id="${subject}-answer-condition-or-${number}" value="OR" checked>
                        <label for="${subject}-answer-condition-or-${number}">OR</label>
                    </div>
                `;
                container.append(conditionHtml); // 항상 컨테이너의 마지막에 추가
            }
        } else {
            // 폼이 1개 이하이면 라디오 버튼 컨테이너 삭제
            $(`#${conditionContainerId}`).remove();
        }
    }

    // Function to initialize Quill editor for a specific textarea
    const editors = {};

    function initRichEditor(textareaId) {
        $(`#${textareaId}`).summernote({
            height: 100,
            toolbar: [
                ['style', ['bold', 'italic', 'underline', 'strikethrough']],
                ['para', ['ul', 'ol']]
            ],
            callbacks: {
                onPaste: function(e) {
                    // 붙여넣기 시 태그 필터링
                    var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');
                    e.preventDefault();
                    document.execCommand('insertText', false, bufferText);
                }
            },
            styleTags: ['p'],
            disableResizeEditor: true,
            disableDragAndDrop: true,
            codeviewFilter: false,
            codeviewIframeFilter: false,
            dialogsInBody: true,
            spellCheck: false,
            placeholder: ''
        });
    }

    // 미리보기 버튼 활성화 및 이벤트 연결 함수
    function updatePreviewButtons() {
        let service = '';
        let fileSet = '';
        
        // 서비스 값 가져오기 (hidden input 또는 radio로 구성됨)
        if ($("input[name=service]").is(':radio')) {
            service = $("input[name=service]:checked").val();
        } else {
            service = $("#service").val();
        }
        
        // 파일세트 값 가져오기 (hidden input 또는 select로 구성됨)
        if ($("select[name=file_set]").length) {
            fileSet = $("select[name=file_set]").val();
        } else {
            fileSet = $("#file_set").val();
        }
        
        const $previewListening = $("#preview-listening");
        const $previewReading = $("#preview-reading");
        
        // 둘 다 선택된 경우에만 버튼 활성화
        if (service && fileSet) {
            $previewListening.prop('disabled', false).removeClass('disabled');
            $previewReading.prop('disabled', false).removeClass('disabled');
            
            // 클릭 이벤트 바인딩 (이전 이벤트 제거 후 새로 바인딩)
            $previewListening.off('click').on('click', function() {
                openCdtPreview('{{ route("product.cdt-set.question", ["service" => ":service", "file_set" => ":file_set", "subject" => "listening"]) }}'.replace(':service', service).replace(':file_set', fileSet), 'cdt-preview-listening-' + fileSet);
            });
            
            $previewReading.off('click').on('click', function() {
                openCdtPreview('{{ route("product.cdt-set.question", ["service" => ":service", "file_set" => ":file_set", "subject" => "reading"]) }}'.replace(':service', service).replace(':file_set', fileSet), 'cdt-preview-reading-' + fileSet);
            });
        } else {
            // 선택되지 않은 경우 버튼 비활성화
            $previewListening.prop('disabled', true).addClass('disabled');
            $previewReading.prop('disabled', true).addClass('disabled');
            
            // 클릭 이벤트 제거
            $previewListening.off('click');
            $previewReading.off('click');
        }
    }

    // Function to load file_set options based on current service and module
    function loadFileSetOptions() {
        let service = $("input[name=service]:checked").val();
        let module = $("input[name=module]:checked").val();
        let fileSet = $("select[name=file_set]");
        let selectedValue = fileSet.val(); // Store current selection if any
        
        if (service) {
            fileSet.attr('disabled', false);
        } else {
            fileSet.attr('disabled', true);
        }

        if (service) {
            // Show loading state
            fileSet.empty();
            fileSet.append('<option value="">로딩중...</option>');
            
            // ajax 요청으로 file_set option 가져오기
            $.ajax({
                url: "{{ route('api.product.cdt-set.get-cdt-sets') }}/" + service + (module ? '/' + module : ''),
                type: "GET",
                success: function(data) {
                    console.log(data);
                    fileSet.empty();
                    fileSet.append('<option value="">선택</option>');
                    $.each(data, function(index, item) {
                        let option = $('<option value="' + item.name + '">' + item.name + '</option>');
                        // Restore previous selection if it exists in new options
                        if(item.name === selectedValue) {
                            option.attr('selected', 'selected');
                        }
                        fileSet.append(option);
                    });
                },
                error: function(xhr, status, error) {
                    fileSet.empty();
                    fileSet.append('<option value="">선택</option>');
                    console.error("Error fetching file_set options:", error);
                }
            });
        }
    }

    $(document).ready(function() {
        updatePreviewButtons();

        // Initial load of file_set options
        loadFileSetOptions();
        
        // Add event listeners for service and module changes
        $("input[name=service]").change(function() {
            loadFileSetOptions();
            updatePreviewButtons();
        });
        
        $("input[name=module]").change(function() {
            loadFileSetOptions();
        });

        $("select[name=file_set]").change(function() {
            updatePreviewButtons();
        });
        
        
        for (let i = 1; i <= 40; i++) {
            initRichEditor(`listening-explanations-${i}`);
            initRichEditor(`listening-explanations-en-${i}`);
            initRichEditor(`reading-explanations-${i}`);
            initRichEditor(`reading-explanations-en-${i}`);
        }
        
        // Form submit 전 모든 에디터 내용을 해당 textarea에 복사
        $("#cdtSetAnswer-form").on('submit', function(event) {
            // 필수 필드 체크
            let service = '';
            let module = '';
            let fileSet = '';
            
            // 서비스 값 가져오기 (hidden input 또는 radio로 구성됨)
            if ($("input[name=service]").is(':radio')) {
                service = $("input[name=service]:checked").val();
            } else {
                service = $("#service").val();
            }
            
            // 모듈 값 가져오기
            module = $("input[name=module]:checked").val();
            
            // 파일세트 값 가져오기 (hidden input 또는 select로 구성됨)
            if ($("select[name=file_set]").length) {
                fileSet = $("select[name=file_set]").val();
            } else {
                fileSet = $("#file_set").val();
            }
            
            // 필수 값 검증
            if (!service) {
                event.preventDefault();
                alert("서비스를 선택해주세요.");
                return false;
            }
            
            if (!module) {
                event.preventDefault();
                alert("모듈을 선택해주세요.");
                return false;
            }
            
            if (!fileSet) {
                event.preventDefault();
                alert("CDT 문항 세트를 선택해주세요.");
                return false;
            }
        });
    });
</script>
@endpush