@php
    $existingRows = $questionRows->map(function ($question) {
        return [
            'id' => $question->id,
            'section' => $question->section,
            'question_text' => $question->question_text,
            'question_type' => $question->question_type,
            'is_required' => $question->is_required,
            'help_text' => $question->help_text,
            'options_text' => $question->options->map(function ($option) {
                $score = $option->score !== null ? '|'.$option->score : '';
                return $option->option_label.'|'.($option->option_value ?: $option->option_label).$score;
            })->implode("\n"),
        ];
    })->values();

    if ($existingRows->isEmpty()) {
        $existingRows = collect([
            [
                'id' => null,
                'section' => '',
                'question_text' => '',
                'question_type' => 'likert',
                'is_required' => true,
                'help_text' => '',
                'options_text' => "Sangat Tidak Setuju|STS|1\nTidak Setuju|TS|2\nNetral|N|3\nSetuju|S|4\nSangat Setuju|SS|5",
            ],
        ]);
    }
@endphp

<div class="panel">
    <h3 class="section-title">Identitas Instrumen</h3>
    <p class="helper">Instrumen disimpan pada tabel baru dan tidak mengubah data RPS yang sudah stabil.</p>
    <div class="grid">
        <div class="field col-6">
            <label for="title">Judul Angket</label>
            <input id="title" name="title" value="{{ old('title', $questionnaire->title) }}" required>
        </div>
        <div class="field col-3">
            <label for="target_role">Target Pengisi</label>
            <select id="target_role" name="target_role">
                <option value="all" @selected(old('target_role', $questionnaire->target_role ?: 'all') === 'all')>Semua User</option>
                <option value="user" @selected(old('target_role', $questionnaire->target_role) === 'user')>User Biasa</option>
                <option value="admin" @selected(old('target_role', $questionnaire->target_role) === 'admin')>Admin</option>
            </select>
        </div>
        <div class="field col-3">
            <label>Pengaturan Status</label>
            <label class="questionnaire-switch">
                <input type="checkbox" name="is_active" value="1" @checked(old('is_active', $questionnaire->is_active))>
                <span class="switch-slider"></span>
                <strong>Aktif tampil di user</strong>
            </label>
        </div>
        <div class="field">
            <label for="description">Deskripsi</label>
            <textarea id="description" name="description">{{ old('description', $questionnaire->description) }}</textarea>
        </div>
        <div class="field col-4">
            <label for="opened_at">Tanggal/Jam Buka</label>
            <input id="opened_at" name="opened_at" type="datetime-local" value="{{ old('opened_at', $questionnaire->opened_at?->format('Y-m-d\TH:i')) }}">
        </div>
        <div class="field col-4">
            <label for="closed_at">Tanggal/Jam Tutup</label>
            <input id="closed_at" name="closed_at" type="datetime-local" value="{{ old('closed_at', $questionnaire->closed_at?->format('Y-m-d\TH:i')) }}">
        </div>
        <div class="field col-4">
            <label>Aturan Pengisian</label>
            <label class="questionnaire-switch">
                <input type="checkbox" name="is_once_per_user" value="1" @checked(old('is_once_per_user', $questionnaire->is_once_per_user ?? true))>
                <span class="switch-slider"></span>
                <strong>Satu user satu kali isi</strong>
            </label>
        </div>
    </div>
</div>

<div class="panel">
    <div class="action-row" style="justify-content: space-between; align-items: center; margin-bottom: 16px;">
        <div>
            <h3 class="section-title" style="margin-bottom: 6px;">Butir Instrumen</h3>
            <p class="helper" style="margin-bottom: 0;">Jenis jawaban dapat diatur dinamis: isian, pilihan, skala Likert, angka, dan tanggal.</p>
        </div>
        <button class="btn secondary" type="button" data-add-question>+ Tambah Butir</button>
    </div>

    <div class="stack" id="questionnaire-builder">
        @foreach ($existingRows as $index => $row)
            <div class="repeater-item questionnaire-question-card" data-question-row>
                <input type="hidden" name="questions[{{ $index }}][id]" value="{{ old("questions.$index.id", $row['id']) }}">
                <div class="action-row" style="justify-content: space-between; align-items: center; margin-bottom: 12px;">
                    <strong class="questionnaire-row-title">Butir {{ $index + 1 }}</strong>
                    <button class="btn danger" type="button" data-remove-question>Hapus Butir</button>
                </div>
                <div class="grid">
                    <div class="field col-4">
                        <label>Bagian/Section</label>
                        <input name="questions[{{ $index }}][section]" value="{{ old("questions.$index.section", $row['section']) }}" placeholder="Misal: Kemudahan Penggunaan">
                    </div>
                    <div class="field col-4">
                        <label>Tipe Jawaban</label>
                        <select name="questions[{{ $index }}][question_type]" data-question-type>
                            @foreach ($questionTypes as $typeKey => $typeLabel)
                                <option value="{{ $typeKey }}" @selected(old("questions.$index.question_type", $row['question_type']) === $typeKey)>{{ $typeLabel }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="field col-4">
                        <label>Wajib Diisi</label>
                        <label class="questionnaire-switch">
                            <input type="checkbox" name="questions[{{ $index }}][is_required]" value="1" @checked(old("questions.$index.is_required", $row['is_required']))>
                            <span class="switch-slider"></span>
                            <strong>Wajib</strong>
                        </label>
                    </div>
                    <div class="field">
                        <label>Pertanyaan</label>
                        <textarea name="questions[{{ $index }}][question_text]" required>{{ old("questions.$index.question_text", $row['question_text']) }}</textarea>
                    </div>
                    <div class="field col-6">
                        <label>Bantuan/Petunjuk</label>
                        <textarea name="questions[{{ $index }}][help_text]" class="questionnaire-short-textarea">{{ old("questions.$index.help_text", $row['help_text']) }}</textarea>
                    </div>
                    <div class="field col-6" data-options-box>
                        <label>Opsi Jawaban</label>
                        <textarea name="questions[{{ $index }}][options_text]" class="questionnaire-options-textarea" placeholder="Format: Label|Nilai|Skor&#10;Contoh: Setuju|S|4">{{ old("questions.$index.options_text", $row['options_text']) }}</textarea>
                        <p class="helper">Dipakai untuk Pilihan Tunggal, Pilihan Ganda, dan Likert. Satu opsi per baris. Skor boleh dikosongkan.</p>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
</div>

<div class="actions" style="margin-top: 18px;">
    <button class="btn" type="submit">Simpan Instrumen</button>
    <a class="btn ghost" href="{{ route('admin.questionnaires.index') }}">Kembali</a>
</div>

<template id="questionnaire-row-template">
    <div class="repeater-item questionnaire-question-card" data-question-row>
        <input type="hidden" name="__NAME__[id]" value="">
        <div class="action-row" style="justify-content: space-between; align-items: center; margin-bottom: 12px;">
            <strong class="questionnaire-row-title">Butir</strong>
            <button class="btn danger" type="button" data-remove-question>Hapus Butir</button>
        </div>
        <div class="grid">
            <div class="field col-4">
                <label>Bagian/Section</label>
                <input name="__NAME__[section]" placeholder="Misal: Kemudahan Penggunaan">
            </div>
            <div class="field col-4">
                <label>Tipe Jawaban</label>
                <select name="__NAME__[question_type]" data-question-type>
                    @foreach ($questionTypes as $typeKey => $typeLabel)
                        <option value="{{ $typeKey }}">{{ $typeLabel }}</option>
                    @endforeach
                </select>
            </div>
            <div class="field col-4">
                <label>Wajib Diisi</label>
                <label class="questionnaire-switch">
                    <input type="checkbox" name="__NAME__[is_required]" value="1" checked>
                    <span class="switch-slider"></span>
                    <strong>Wajib</strong>
                </label>
            </div>
            <div class="field">
                <label>Pertanyaan</label>
                <textarea name="__NAME__[question_text]" required></textarea>
            </div>
            <div class="field col-6">
                <label>Bantuan/Petunjuk</label>
                <textarea name="__NAME__[help_text]" class="questionnaire-short-textarea"></textarea>
            </div>
            <div class="field col-6" data-options-box>
                <label>Opsi Jawaban</label>
                <textarea name="__NAME__[options_text]" class="questionnaire-options-textarea" placeholder="Format: Label|Nilai|Skor&#10;Contoh: Setuju|S|4">Sangat Tidak Setuju|STS|1
Tidak Setuju|TS|2
Netral|N|3
Setuju|S|4
Sangat Setuju|SS|5</textarea>
                <p class="helper">Dipakai untuk Pilihan Tunggal, Pilihan Ganda, dan Likert. Satu opsi per baris. Skor boleh dikosongkan.</p>
            </div>
        </div>
    </div>
</template>

<style>
    .questionnaire-switch {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        user-select: none;
        margin: 0;
    }
    .questionnaire-switch input { position: absolute; opacity: 0; pointer-events: none; }
    .switch-slider {
        position: relative;
        width: 54px;
        height: 30px;
        border-radius: 999px;
        background: #d9e5f5;
        border: 1px solid #bfd4ef;
        transition: 0.2s ease;
        flex: 0 0 auto;
    }
    .switch-slider::after {
        content: "";
        position: absolute;
        width: 22px;
        height: 22px;
        top: 3px;
        left: 4px;
        border-radius: 999px;
        background: #fff;
        box-shadow: 0 4px 12px rgba(13,34,66,0.18);
        transition: 0.2s ease;
    }
    .questionnaire-switch input:checked + .switch-slider {
        background: linear-gradient(180deg, var(--primary-bright), var(--primary));
        border-color: var(--primary);
    }
    .questionnaire-switch input:checked + .switch-slider::after { left: 26px; }
    .questionnaire-short-textarea { min-height: 78px; }
    .questionnaire-options-textarea { min-height: 136px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9rem; }
    .questionnaire-question-card[data-hide-options="true"] [data-options-box] { display: none; }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const builder = document.getElementById('questionnaire-builder');
        const template = document.getElementById('questionnaire-row-template');
        const addButton = document.querySelector('[data-add-question]');

        function refreshRows() {
            builder.querySelectorAll('[data-question-row]').forEach(function (row, index) {
                row.querySelector('.questionnaire-row-title').textContent = 'Butir ' + (index + 1);
                row.querySelectorAll('[name]').forEach(function (field) {
                    field.name = field.name.replace(/questions\[\d+\]|__NAME__/g, 'questions[' + index + ']');
                });
                toggleOptions(row);
            });
        }

        function toggleOptions(row) {
            const type = row.querySelector('[data-question-type]')?.value;
            const needsOptions = ['single_choice', 'multiple_choice', 'likert'].includes(type);
            row.dataset.hideOptions = needsOptions ? 'false' : 'true';
        }

        addButton?.addEventListener('click', function () {
            const html = template.innerHTML.replaceAll('__NAME__', 'questions[' + builder.querySelectorAll('[data-question-row]').length + ']');
            const wrap = document.createElement('div');
            wrap.innerHTML = html.trim();
            builder.appendChild(wrap.firstElementChild);
            refreshRows();
        });

        builder?.addEventListener('click', function (event) {
            if (! event.target.matches('[data-remove-question]')) return;
            const rows = builder.querySelectorAll('[data-question-row]');
            if (rows.length <= 1) {
                alert('Minimal harus ada satu butir instrumen.');
                return;
            }
            event.target.closest('[data-question-row]').remove();
            refreshRows();
        });

        builder?.addEventListener('change', function (event) {
            if (event.target.matches('[data-question-type]')) {
                toggleOptions(event.target.closest('[data-question-row]'));
            }
        });

        refreshRows();
    });
</script>