@extends('layouts.app')
@section('title', 'إنشاء استبيان')
@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">إنشاء استبيان جديد</h1>
    </div>
</div>

<form method="POST" action="{{ route('surveys.store') }}" id="surveyForm">
    @csrf
    <div class="card">
        <div class="card-header"><h3>بيانات الاستبيان</h3></div>
        <div class="card-body">
            <div class="form-grid cols-2">
                <div class="form-group" style="grid-column:span 2">
                    <label class="form-label required">عنوان الاستبيان</label>
                    <input type="text" name="title" class="form-input" required>
                </div>
                <div class="form-group" style="grid-column:span 2">
                    <label class="form-label">الوصف</label>
                    <textarea name="description" class="form-textarea" rows="2"></textarea>
                </div>
                <div class="form-group">
                    <label class="form-label required">النوع</label>
                    <select name="type" class="form-select" required>
                        <option value="satisfaction">رضا الموظفين</option>
                        <option value="engagement">مشاركة</option>
                        <option value="pulse">نبض سريع</option>
                        <option value="exit">مغادرة</option>
                        <option value="custom">مخصص</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">
                        <input type="hidden" name="is_anonymous" value="0">
                        <input type="checkbox" name="is_anonymous" value="1" checked>
                        استبيان سري (لا يُظهر اسم المشارك)
                    </label>
                </div>
                <div class="form-group">
                    <label class="form-label">تاريخ البدء</label>
                    <input type="date" name="start_date" class="form-input">
                </div>
                <div class="form-group">
                    <label class="form-label">تاريخ الانتهاء</label>
                    <input type="date" name="end_date" class="form-input">
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h3>الأسئلة</h3>
        </div>
        <div class="card-body">
            <div id="questionsContainer">
                <div class="question-row" style="border:1px solid var(--border);border-radius:var(--radius);padding:15px;margin-bottom:15px">
                    <div class="form-grid cols-2">
                        <div class="form-group" style="grid-column:span 2">
                            <label class="form-label required">السؤال 1</label>
                            <input type="text" name="questions[0][text]" class="form-input" required placeholder="نص السؤال">
                        </div>
                        <div class="form-group">
                            <label class="form-label">نوع الإجابة</label>
                            <select name="questions[0][type]" class="form-select">
                                <option value="rating">تقييم (1-5)</option>
                                <option value="scale">مقياس (1-10)</option>
                                <option value="yes_no">نعم / لا</option>
                                <option value="text">نص حر</option>
                                <option value="multiple_choice">اختيار متعدد</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="form-label">الخيارات (للاختيار المتعدد — فاصلة بين كل خيار)</label>
                            <input type="text" name="questions[0][options]" class="form-input" placeholder="خيار 1, خيار 2, خيار 3">
                        </div>
                    </div>
                </div>
            </div>
            <button type="button" class="btn btn-secondary" onclick="addQuestion()"><i class="fa-solid fa-plus"></i> إضافة سؤال</button>
        </div>
    </div>

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

<script>
let qIndex = 1;
function addQuestion() {
    const html = `<div class="question-row" style="border:1px solid var(--border);border-radius:var(--radius);padding:15px;margin-bottom:15px">
        <div class="form-grid cols-2">
            <div class="form-group" style="grid-column:span 2">
                <label class="form-label required">السؤال ${qIndex + 1}</label>
                <input type="text" name="questions[${qIndex}][text]" class="form-input" required placeholder="نص السؤال">
            </div>
            <div class="form-group">
                <label class="form-label">نوع الإجابة</label>
                <select name="questions[${qIndex}][type]" class="form-select">
                    <option value="rating">تقييم (1-5)</option>
                    <option value="scale">مقياس (1-10)</option>
                    <option value="yes_no">نعم / لا</option>
                    <option value="text">نص حر</option>
                    <option value="multiple_choice">اختيار متعدد</option>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">الخيارات</label>
                <input type="text" name="questions[${qIndex}][options]" class="form-input" placeholder="خيار 1, خيار 2">
            </div>
        </div>
    </div>`;
    document.getElementById('questionsContainer').insertAdjacentHTML('beforeend', html);
    qIndex++;
}
</script>
@endsection