@extends('layouts.public')

@section('title', 'Borang Penilaian — ' . $program->title)

@section('hero')
<h4 class="mb-1">{{ $program->title }}</h4>
<div class="opacity-75 small">
    <i class="bi bi-clipboard2-check me-1"></i>Borang Penilaian Program
</div>
@endsection

@section('content')

<div class="checkin-card card p-4 mb-3">
    <div class="text-center mb-4">
        <div class="rounded-circle bg-primary bg-opacity-10 d-inline-flex align-items-center justify-content-center mx-auto mb-3"
             style="width:70px; height:70px;">
            <i class="bi bi-clipboard2-check-fill text-primary" style="font-size:2rem;"></i>
        </div>
        <h5 class="fw-bold mb-1">{{ $pq->questionnaireSet->title }}</h5>
        <p class="text-muted small mb-0">
            Sila jawab semua soalan sebelum memuat turun sijil anda, {{ $participant->name }}.
        </p>
    </div>

    <form method="POST" action="{{ route('public.questionnaire.submit', [$qrCode->token, $participant->uuid]) }}">
        @csrf

        @foreach($questions as $q)
        <div class="mb-4">
            <label class="form-label fw-medium">
                {{ $loop->iteration }}. {{ $q->question_text }}
                @if($q->is_required)
                <span class="text-danger">*</span>
                @endif
            </label>

            @error('q_' . $q->id)
            <div class="text-danger small mb-1"><i class="bi bi-exclamation-circle me-1"></i>{{ $message }}</div>
            @enderror

            @if($q->question_type === 'rating')
            <div class="d-flex gap-2 flex-wrap">
                @for($i = 1; $i <= 5; $i++)
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio"
                           name="q_{{ $q->id }}" id="q{{ $q->id }}_{{ $i }}"
                           value="{{ $i }}" {{ old('q_'.$q->id) == $i ? 'checked' : '' }}>
                    <label class="form-check-label" for="q{{ $q->id }}_{{ $i }}">
                        {{ $i }}
                        @if($i === 1) <small class="text-muted">(Sangat Tidak Setuju)</small>
                        @elseif($i === 5) <small class="text-muted">(Sangat Setuju)</small>
                        @endif
                    </label>
                </div>
                @endfor
            </div>

            @elseif($q->question_type === 'single_choice')
            @foreach($q->options_json ?? [] as $opt)
            <div class="form-check">
                <input class="form-check-input" type="radio"
                       name="q_{{ $q->id }}" id="q{{ $q->id }}_{{ $loop->index }}"
                       value="{{ $opt }}" {{ old('q_'.$q->id) === $opt ? 'checked' : '' }}>
                <label class="form-check-label" for="q{{ $q->id }}_{{ $loop->index }}">{{ $opt }}</label>
            </div>
            @endforeach

            @elseif($q->question_type === 'multiple_choice')
            @foreach($q->options_json ?? [] as $opt)
            <div class="form-check">
                <input class="form-check-input" type="checkbox"
                       name="q_{{ $q->id }}[]" id="q{{ $q->id }}_{{ $loop->index }}"
                       value="{{ $opt }}"
                       {{ in_array($opt, (array)(old('q_'.$q->id) ?? [])) ? 'checked' : '' }}>
                <label class="form-check-label" for="q{{ $q->id }}_{{ $loop->index }}">{{ $opt }}</label>
            </div>
            @endforeach

            @elseif($q->question_type === 'short_text')
            <input type="text" name="q_{{ $q->id }}"
                   class="form-control @error('q_'.$q->id) is-invalid @enderror"
                   value="{{ old('q_'.$q->id) }}"
                   placeholder="Jawapan anda...">

            @elseif($q->question_type === 'long_text')
            <textarea name="q_{{ $q->id }}" rows="4"
                      class="form-control @error('q_'.$q->id) is-invalid @enderror"
                      placeholder="Jawapan anda...">{{ old('q_'.$q->id) }}</textarea>
            @endif
        </div>
        @endforeach

        <button type="submit" class="btn btn-primary w-100 btn-checkin">
            <i class="bi bi-send me-2"></i>Hantar Maklum Balas
        </button>
    </form>
</div>

@endsection