@extends('layouts.app', ['title' => 'Isi Angket'])

@section('content')
    <div class="panel">
        <h2 class="section-title" style="font-size: 1.55rem;">{{ $questionnaire->title }}</h2>
        <p class="helper">{{ $questionnaire->description ?: 'Mohon isi angket berikut sesuai pengalaman Bapak/Ibu.' }}</p>
    </div>

    <form method="POST" action="{{ route('questionnaires.store', $questionnaire) }}" style="margin-top: 20px;">
        @csrf
        <div class="panel">
            <div class="stack">
                @foreach ($questionnaire->questions as $question)
                    <div class="repeater-item">
                        <label for="answer_{{ $question->id }}">
                            {{ $loop->iteration }}. {{ $question->question_text }}
                            @if ($question->is_required)<span style="color: var(--danger);">*</span>@endif
                        </label>
                        @if ($question->section)
                            <p class="meta" style="margin-bottom: 8px;">Bagian: {{ $question->section }}</p>
                        @endif
                        @if ($question->help_text)
                            <p class="helper">{{ $question->help_text }}</p>
                        @endif

                        @if ($question->question_type === 'long_text')
                            <textarea id="answer_{{ $question->id }}" name="answers[{{ $question->id }}]" @required($question->is_required)>{{ old('answers.'.$question->id) }}</textarea>
                        @elseif ($question->question_type === 'number')
                            <input id="answer_{{ $question->id }}" name="answers[{{ $question->id }}]" type="number" step="any" value="{{ old('answers.'.$question->id) }}" @required($question->is_required)>
                        @elseif ($question->question_type === 'date')
                            <input id="answer_{{ $question->id }}" name="answers[{{ $question->id }}]" type="date" value="{{ old('answers.'.$question->id) }}" @required($question->is_required)>
                        @elseif ($question->question_type === 'single_choice' || $question->question_type === 'likert')
                            <div class="stack" style="gap: 8px;">
                                @foreach ($question->options as $option)
                                    <label class="filter-toggle" style="margin: 0;">
                                        <input type="radio" name="answers[{{ $question->id }}]" value="{{ $option->option_value ?: $option->option_label }}" @checked(old('answers.'.$question->id) === ($option->option_value ?: $option->option_label)) @required($question->is_required && $loop->first)>
                                        <span>{{ $option->option_label }}</span>
                                    </label>
                                @endforeach
                            </div>
                        @elseif ($question->question_type === 'multiple_choice')
                            <div class="stack" style="gap: 8px;">
                                @foreach ($question->options as $option)
                                    <label class="filter-toggle" style="margin: 0;">
                                        <input type="checkbox" name="answers[{{ $question->id }}][]" value="{{ $option->option_value ?: $option->option_label }}" @checked(in_array($option->option_value ?: $option->option_label, old('answers.'.$question->id, []), true))>
                                        <span>{{ $option->option_label }}</span>
                                    </label>
                                @endforeach
                            </div>
                        @else
                            <input id="answer_{{ $question->id }}" name="answers[{{ $question->id }}]" value="{{ old('answers.'.$question->id) }}" @required($question->is_required)>
                        @endif
                    </div>
                @endforeach
            </div>
            <div class="actions" style="margin-top: 20px;">
                <button class="btn" type="submit">Kirim Jawaban</button>
                <a class="btn ghost" href="{{ route('questionnaires.index') }}">Kembali</a>
            </div>
        </div>
    </form>
@endsection