@extends("common.layout")

@section('page-title', 'Speaking/Writing 문항 관리')

@section("content")

<h1>
    <a href="{{ route('product.feedback-topic.list') }}">Speaking/Writing 문항 관리</a>

    <button type="button" class="btn btn-primary" onclick="location.href='{{ route('product.feedback-topic.detail') }}'">문항 등록</button>
</h1>

<section class="mb-3">
    <main>
        <form action="{{ route('product.feedback-topic.list') }}" class="search-form" method="GET">
            <div class="search-input-wrap">
                <div class="input-group input-group-sm">
                    <label class="input-group-text" for="register_start_date">등록일</label>
                    <input class="form-control" type="date" id="register_start_date" name="register_start_date" @if (Request::get("register_start_date"))value="{{ Request::get("register_start_date") }}"@endif>
                    <input class="form-control" type="date" name="register_end_date" @if (Request::get("register_end_date"))value="{{ Request::get("register_end_date") }}"@endif>
                </div>

                <div class="input-group input-group-sm">
                    <label class="input-group-text" for="activated">활성구분</label>
                    <select class="form-select" name="activated" id="activated">
                        <option value="" @selected(Request::get("activated") === null)>전체</option>
                        <option value="0" @selected(Request::get("activated") === "0")>비활성</option>
                        <option value="1" @selected(!Request::has("activated") || Request::get("activated") === "1")>활성</option>
                    </select>
                </div>

                <div class="input-group input-group-sm">
                    <label class="input-group-text" for="service_type">서비스유형</label>
                    <select class="form-select" name="service_type" id="service_type">
                        <option value="">전체</option>
                        @foreach (config('system.feedback_topic_service_types') as $key => $serviceType)
                            <option value="{{ $key }}" @selected(Request::get("service_type") === $key)>{{ $serviceType }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="input-group input-group-sm">
                    <label class="input-group-text" for="module">모듈</label>
                    <select class="form-select" name="module" id="module">
                        <option value="" >전체</option>
                        @foreach ($modules as $module)
                            <option value={{ $module }} @selected(Request::get("module", null) == $module)>{{ $module }}</option>
                        @endforeach
                    </select>
                </div>

                {{-- 과목 --}}
                <div class="input-group input-group-sm">
                    <label class="input-group-text" for="subject">과목</label>
                    <select class="form-select" name="subject" id="subject">
                        <option value="" >전체</option>
                        @foreach ($feedbackPatterns as $subject => $types)
                            <option value={{ $subject }} @selected(Request::get("subject", null) == $subject || session('subject') == $subject)>{{ $subject }}</option>
                        @endforeach
                    </select>
                </div>

                {{-- 타입 --}}
                <div class="input-group input-group-sm">
                    <label class="input-group-text" for="type">타입</label>
                    <select class="form-select" name="type" id="type">
                        <option value="">전체</option>
                    </select>
                </div>

                {{-- 패턴 --}}
                <div class="input-group input-group-sm">
                    <label class="input-group-text" for="pattern">패턴</label>
                    <select class="form-select" name="pattern" id="pattern">
                        <option value="">전체</option>
                    </select>
                </div>

                {{--<div class="input-group input-group-sm">
                    <label class="input-group-text" for="feedback_chart_type">차트유형</label>
                    <select class="form-select" name="feedback_chart_type" id="feedback_chart_type">
                        <option value="">전체</option>
                        @foreach (config("system.feedback_chart_types") as $feedback_chart_type)
                            <option value="{{ $feedback_chart_type }}" @selected(Request::get('feedback_chart_type') == $feedback_chart_type)>{{ $feedback_chart_type }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="input-group input-group-sm">
                    <label class="input-group-text" for="name">패턴명</label>
                    <input class="form-control" type="text" name="title" id="title" autocomplete='on' value="{{ Request::get("title") }}">
                </div>--}}

                <div class="input-group input-group-sm">
                    <label class="input-group-text" for="name">토픽질문</label>
                    <input class="form-control" type="text" name="question" id="question" autocomplete='on' value="{{ Request::get("question") }}">
                </div>
                
                <input type="hidden" name="order_by" value="{{ Request::has("order_by") ? Request::get("order_by"):'' }}">
                <input type="hidden" name="paginate" value="{{ Request::has("paginate") ? Request::get("paginate"):'' }}">
                <input type="hidden" name="page" value="{{ Request::has("page") ? Request::get("page"):'' }}">
                <input type="hidden" name="sort" value="{{ Request::has("sort") ? Request::get("sort"):'' }}">
            </div>

            <button type="submit" class="btn btn-sm btn-outline-dark search-button"><i class="bi bi-search"></i> 조회</button>
        </form>
    </main>
</section>

<section>
    <header>
        <h6>총 <strong>{{ $feedbackTopics->total() }}</strong>건</h6>
    </header>

    <main>
        <x-product.feedback-topic :feedbackTopics="$feedbackTopics" :feedbackPatterns="$feedbackPatterns" />
    </main>

    <footer>
        <div class="pagination-wrap">
            {{ $feedbackTopics->links() }}

            <select id='paginate-control' class='form-select form-select-sm data-length-select' onchange="copyValue('.data-length-select', 'input[name=paginate]', '.search-form')">
                <option value="10" @selected(Request::get("paginate") == null || Request::get("paginate") == 10)>10개씩 보기</option>
                <option value="30" @selected(Request::get("paginate") == 30)>30개씩 보기</option>
                <option value="50" @selected(Request::get("paginate") == 50)>50개씩 보기</option>
                <option value="100" @selected(Request::get("paginate") == 100)>100개씩 보기</option>
            </select>
        </div>
    </footer>
</section>
@endsection

@push("script")
<script>
$(document).ready(function() {
    const feedbackPatterns = @json($feedbackPatterns);

    // 선택된 값 가져오기
    let selectedSubject = "{{ Request::get('subject', '') }}";
    let selectedType = "{{ Request::get('type', '') }}";
    let selectedtopic = "{{ Request::get('pattern', '') }}";
    let selectedModule = "{{ Request::get('module', '') }}";

    // 타입을 동적으로 생성하는 함수
    function populateTypes(subject, selectedType) {
        const typeSelect = $('#type');
        const topicSelect = $('#pattern');
        selectedType = decodeEntities(selectedType);

        // 타입과 패턴을 초기화
        typeSelect.empty().append('<option value="">전체</option>');
        topicSelect.empty().append('<option value="">전체</option>');

        if(subject && feedbackPatterns[subject]) {
            $.each(Object.keys(feedbackPatterns[subject]), function(index, type) {
                const isSelected = type === selectedType ? 'selected' : '';
                typeSelect.append(`<option value="${type}" ${isSelected}>${type}</option>`);
            });
        }
    }

    // 패턴을 동적으로 생성하는 함수
    function populatetopics(subject, type, selectedtopic) {
        type = decodeEntities(type);
        const topicSelect = $('#pattern');

        // 패턴을 초기화
        topicSelect.empty().append('<option value="">전체</option>');

        if (subject) {
            if (type == 'Task 1') {
                if (!selectedModule) {
                    selectedModule = 'academic';
                    $('#module').val(selectedModule);
                }

                $.each(feedbackPatterns[subject][type][selectedModule], function(pattern, description) {
                    const isSelected = pattern === selectedtopic ? 'selected' : '';
                    topicSelect.append(`<option value="${pattern}" ${isSelected}>${pattern} - ${description}</option>`);
                });
            } else {
                $.each(feedbackPatterns[subject][type], function(pattern, description) {
                    const isSelected = pattern === selectedtopic ? 'selected' : '';
                    topicSelect.append(`<option value="${pattern}" ${isSelected}>${pattern} - ${description}</option>`);
                });
            }
        }
    }

    function decodeEntities(encodedString) {
        const textarea = document.createElement('textarea');
        textarea.innerHTML = encodedString;
        return textarea.value;
    }

    // 초기화: 선택된 과목이 있을 경우 타입과 패턴을 로드
    if(selectedSubject) {
        populateTypes(selectedSubject, selectedType);
        if (selectedType) {
            populatetopics(selectedSubject, selectedType, selectedtopic);
        }
    }

    // 과목 변경 시 타입 업데이트
    $('#subject').on('change', function() {
        selectedSubject = $(this).val();
        selectedType = '';
        selectedtopic = '';

        populateTypes(selectedSubject, selectedType);
        populatetopics(selectedSubject, selectedType, selectedtopic);
    });

    // 타입 변경 시 패턴 업데이트
    $('#type').on('change', function() {
        selectedType = $(this).val();
        selectedtopic = '';

        populatetopics(selectedSubject, selectedType, selectedtopic);
    });
});
</script>
@endpush