@extends('layouts.app')
@section('title', 'المشاركة في الاستبيان')
@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">{{ $survey->title }}</h1>
        <p class="page-subtitle">{{ $survey->description }}</p>
    </div>
</div>

<form method="POST" action="{{ route('surveys.submit-response', $survey) }}">
    @csrf
    @foreach($survey->questions as $q)
    <div class="card">
        <div class="card-body">
            <label class="form-label {{ $q->is_required ? 'required' : '' }}" style="font-size:16px;margin-bottom:15px">
                {{ $q->sort_order }}. {{ $q->question_text }}
            </label>

            @if($q->question_type === 'rating')
            <div style="display:flex;gap:10px">
                @for($i = 1; $i <= 5; $i++)
                <label style="flex:1;text-align:center;padding:15px;border:2px solid var(--border);border-radius:var(--radius);cursor:pointer">
                    <input type="radio" name="answers[{{ $q->id }}]" value="{{ $i }}" style="display:none" {{ $q->is_required ? 'required' : '' }}>
                    <div style="font-size:24px;margin-bottom:4px">{{ $i }}</div>
                    @php $labels = [1=>'ضعيف',2=>'مقبول',3=>'جيد',4=>'جيد جداً',5=>'ممتاز']; @endphp
                    <div style="font-size:11px;color:var(--text-muted)">{{ $labels[$i] }}</div>
                </label>
                @endfor
            </div>
            @elseif($q->question_type === 'scale')
            <div style="display:flex;gap:5px">
                @for($i = 1; $i <= 10; $i++)
                <label style="flex:1;text-align:center;padding:10px 5px;border:2px solid var(--border);border-radius:var(--radius);cursor:pointer">
                    <input type="radio" name="answers[{{ $q->id }}]" value="{{ $i }}" style="display:none" {{ $q->is_required ? 'required' : '' }}>
                    {{ $i }}
                </label>
                @endfor
            </div>
            @elseif($q->question_type === 'yes_no')
            <div style="display:flex;gap:15px">
                <label style="flex:1;text-align:center;padding:15px;border:2px solid var(--border);border-radius:var(--radius);cursor:pointer">
                    <input type="radio" name="answers[{{ $q->id }}]" value="yes" style="display:none" {{ $q->is_required ? 'required' : '' }}>
                    <i class="fa-solid fa-check" style="color:#388e3c;font-size:20px"></i><br>نعم
                </label>
                <label style="flex:1;text-align:center;padding:15px;border:2px solid var(--border);border-radius:var(--radius);cursor:pointer">
                    <input type="radio" name="answers[{{ $q->id }}]" value="no" style="display:none">
                    <i class="fa-solid fa-times" style="color:#d32f2f;font-size:20px"></i><br>لا
                </label>
            </div>
            @elseif($q->question_type === 'text')
            <textarea name="answers[{{ $q->id }}]" class="form-textarea" rows="3" {{ $q->is_required ? 'required' : '' }}></textarea>
            @elseif($q->question_type === 'multiple_choice')
            @foreach($q->options ?? [] as $opt)
            <label style="display:block;padding:10px 15px;border:1px solid var(--border);border-radius:var(--radius);margin-bottom:8px;cursor:pointer">
                <input type="radio" name="answers[{{ $q->id }}]" value="{{ $opt }}" {{ $q->is_required ? 'required' : '' }}>
                {{ $opt }}
            </label>
            @endforeach
            @endif
        </div>
    </div>
    @endforeach

    <div class="form-actions">
        <a href="{{ route('surveys.index') }}" class="btn btn-secondary">إلغاء</a>
        <button type="submit" class="btn btn-primary">إرسال الاستجابة</button>
    </div>
</form>

<style>
input[type="radio"]:checked + div, input[type="radio"]:checked + i, input[type="radio"]:checked ~ * {
    color: var(--primary) !important;
}
label:has(input[type="radio"]:checked) {
    border-color: var(--primary) !important;
    background: var(--primary-light);
}
</style>
@endsection