@extends("common.layout")

@php
    $page_title = $pageServiceName . ' CDT 세트 ' . ($cdtSet?->id ? '상세보기 ('.$cdtSet->id.')' : '등록');
@endphp

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

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

@section("content")

<form id="cdtSet-form" action="{{ $cdtSet?->id ? route('product.cdt-set.set', ['id'=>$cdtSet->id]) : route('product.cdt-set.set') }}" method="post" class="default">
    @csrf
    <input type="hidden" name="service" value="{{ $service }}">

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

        <div class="fixed-btns btn-group">
            @if ($cdtSet?->id)
                @if ($User->is->root)
                <button class="btn btn-danger" type="button" onclick="cdtSetDelete({{ $cdtSet->id }}, '{{ $service }}')">삭제</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>

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

        <main class="split-form">
            {{--CDT 세트 번호--}}
            @if ($cdtSet?->id)
            <div class="form-group">
                <label>CDT 세트 번호</label>
                <div>
                    {{ $cdtSet?->id }}
                </div>
            </div>
            @endif

            <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($cdtSet?->module == $module)>
                        <label class="form-check" for="module-{{ $module }}">{{ $module }}</label>
                    </div>
                    @endforeach
                </div>
            </div>

            <div class="form-group">
                <label class="required" for="name">세트명</label>

                <div class="right-col">
                    <input type="text" class="form-control" name="name" id="name" value="{{ $cdtSet?->name }}" placeholder="CDT 세트명을 입력해 주세요." required>
                </div>
            </div>

            <div class="form-group">
                <label class="required" for="subjects">과목</label>

                @php
                    if ($cdtSet?->subjects) {
                        $subjects = explode('|', $cdtSet->subjects);
                    }
                @endphp
                <div class="right-col">
                    @foreach (config('system.cdt_subjects') as $subjKey => $subject)
                    <div class="form-check form-check-inline">
                        <input class="form-check" type="checkbox" name="subjects[]" id="subjects-{{ $subjKey }}" value="{{ $subjKey }}" @checked($cdtSet?->subjects && in_array($subjKey, $subjects))>
                        <label class="form-check" for="subjects-{{ $subjKey }}">{{ $subject }}</label>
                    </div>
                    @endforeach
                </div>
            </div>

            <div class="form-group">
                <label>유료</label>

                <div class="right-col">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" role="switch" id="is_paid" name="is_paid" value="1" @checked($cdtSet?->is_paid)>
                    </div>
                </div>
            </div>

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

                <div class="right-col">
                    <select name="file_set" id="file_set" class="form-select">
                        <option value="">선택</option>
                        @foreach ($cdtSetFiles as $file)
                            @if ($file['has_listening'] || $file['has_reading'])
                                <option value="{{ $file['name'] }}" @selected($file['name'] == $cdtSet?->file_set)>{{ $file['name'] }}</option>
                            @endif
                        @endforeach
                    </select>
                </div>
            </div>

        </main>
    </section>

    @if ($cdtSet?->id)
        @php
            $feedbackTopics = $cdtSet?->feedbackTopics;
            $feedbackTopicsWriting = $feedbackTopics->where('subject', 'Writing');
            $feedbackTopicsSpeaking = $feedbackTopics->where('subject', 'Speaking');
        @endphp

        <section class="my-3">
            <header>
                <div>Writing 문항세트 <span style="color: var(--bs-orange)">(Task 1, 2 각각 한 문항씩)</span></div>
                <button class="btn btn-warning btn-toggle" type="button" onclick="toggleOption(this)" id="toggle-cdtSet-{{ $cdtSet?->id }}-writing"><i class="bi bi-chevron-up"></i></button>
            </header>

            <main class="split-form">
                <div class="form-group mb-3 ms-2 justify-content-end">
                    <button type="button" class="btn btn-sm btn-info" onclick="popupSelector('cdt-writing', {
                        service: '{{ $service }}', targetId: {{ $cdtSet->id }}, gridType: 'cdt-writing',
                        removeIds: $('input[name^=cdtWritings]').map(function() { return $(this).val(); }).get()
                        })">문항세트 추가</button>
                </div>

                <x-product.feedback-topic sortable="1" cdtSetId="{{ $cdtSet?->id }}" questionType="writing" :feedbackTopics="$feedbackTopicsWriting" :feedbackPatterns="$feedbackPatterns" />
            </main>
        </section>

        <section>
            <header>
                <div>Speaking 문항세트 <span style="color: var(--bs-orange)">(Part 1, 2&3 각각 한 문항씩)</span></div>
                <button class="btn btn-warning btn-toggle" type="button" onclick="toggleOption(this)" id="toggle-cdtSet-{{ $cdtSet?->id }}-speaking"><i class="bi bi-chevron-up"></i></button>
            </header>

            <main class="split-form">
                <div class="form-group mb-3 ms-2 justify-content-end">
                    <button type="button" class="btn btn-sm btn-info" onclick="popupSelector('cdt-speaking', {
                        service: '{{ $service }}', targetId: {{ $cdtSet->id }}, gridType: 'cdt-speaking',
                        removeIds: $('input[name^=cdtSpeakings]').map(function() { return $(this).val(); }).get()
                        })">문항세트 추가</button>
                </div>

                <x-product.feedback-topic sortable="1" cdtSetId="{{ $cdtSet?->id }}" questionType="speaking" :feedbackTopics="$feedbackTopicsSpeaking" :feedbackPatterns="$feedbackPatterns" />
            </main>
        </section>
    @endif
</form>

@endsection

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

    $(document).ready(function() {
        $("#cdtSet-form").on("submit", function(e) {
            $("#loading-icon").show();

            return true;
        });

        $(".grid-sortable").sortable({
            handle: ".handle",
            axis: "y",
            placeholder: "ui-state-highlight",
            helper: function(e, ui) {
                ui.children().each(function() {
                    $(this).width($(this).width());
                });
                return ui;
            },
        });
    });
</script>
@endpush