{% extends 'base.html.twig' %}

{% block title %}پاسخ به سوال: {{ question.title }} - پرسش و پاسخ{% endblock %}

{% block body %}
<div class="container my-4">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <!-- نمایش سوال -->
            <div class="card mb-4">
                <div class="card-header">
                    <h4 class="mb-0">سوال:</h4>
                </div>
                <div class="card-body">
                    <h5 class="card-title">{{ question.title }}</h5>
                    <div class="question-content">
                        {{ question.content|nl2br }}
                    </div>
                    <div class="mt-3">
                        <div class="tags">
                            {% for tagRelation in question.tagRelations %}
                                <span class="badge bg-light text-dark me-1">
                                    {{ tagRelation.tag.name }}
                                </span>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- فرم پاسخ -->
            <div class="card">
                <div class="card-header">
                    <h4 class="mb-0">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="me-2">
                            <polyline points="9,17 4,12 9,7"></polyline>
                            <path d="M20 18v-2a4 4 0 0 0-4-4H4"></path>
                        </svg>پاسخ شما
                    </h4>
                </div>
                <div class="card-body">
                    {{ form_start(form, {'attr': {'novalidate': 'novalidate'}}) }}
                    
                    <div class="mb-4">
                        {{ form_label(form.content) }}
                        <div class="editor-toolbar mb-2">
                            <button type="button" class="btn btn-outline-secondary btn-sm" onclick="formatText('bold')" title="پررنگ">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path>
                                    <path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path>
                                </svg>
                            </button>
                            <button type="button" class="btn btn-outline-secondary btn-sm" onclick="formatText('italic')" title="کج">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <line x1="19" y1="4" x2="10" y2="4"></line>
                                    <line x1="14" y1="20" x2="5" y2="20"></line>
                                    <line x1="15" y1="4" x2="9" y2="20"></line>
                                </svg>
                            </button>
                            <button type="button" class="btn btn-outline-secondary btn-sm" onclick="formatText('code')" title="کد">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <polyline points="16,18 22,12 16,6"></polyline>
                                    <polyline points="8,6 2,12 8,18"></polyline>
                                </svg>
                            </button>
                            <button type="button" class="btn btn-outline-secondary btn-sm" onclick="insertList()" title="لیست">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <line x1="8" y1="6" x2="21" y2="6"></line>
                                    <line x1="8" y1="12" x2="21" y2="12"></line>
                                    <line x1="8" y1="18" x2="21" y2="18"></line>
                                    <line x1="3" y1="6" x2="3.01" y2="6"></line>
                                    <line x1="3" y1="12" x2="3.01" y2="12"></line>
                                    <line x1="3" y1="18" x2="3.01" y2="18"></line>
                                </svg>
                            </button>
                        </div>
                        {{ form_widget(form.content, {'attr': {'class': 'form-control editor-textarea', 'rows': 8}}) }}
                        {{ form_errors(form.content) }}
                        <div class="form-text">
                            پاسخ خود را به صورت کامل و مفصل ارائه دهید. هرچه پاسخ شما دقیق‌تر باشد، برای دیگران مفیدتر خواهد بود.
                            <br><small class="text-muted">می‌توانید از دکمه‌های بالا برای فرمت کردن متن استفاده کنید.</small>
                        </div>
                    </div>
                    
                    <div class="d-flex justify-content-between">
                        <a href="{{ path('qa_question_show', {'id': question.id}) }}" class="btn btn-outline-secondary">
                            <i class="fas fa-arrow-right me-2"></i>انصراف
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-paper-plane me-2"></i>ارسال پاسخ
                        </button>
                    </div>
                    
                    {{ form_end(form) }}
                </div>
            </div>
            
            <!-- راهنمای پاسخ دادن -->
            <div class="card mt-4">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-lightbulb me-2"></i>راهنمای پاسخ دادن
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6 class="text-success">✅ پاسخ خوب:</h6>
                            <ul class="list-unstyled">
                                <li><i class="fas fa-check text-success me-2"></i>مستقیماً به سوال پاسخ دهید</li>
                                <li><i class="fas fa-check text-success me-2"></i>از مثال‌های عملی استفاده کنید</li>
                                <li><i class="fas fa-check text-success me-2"></i>منابع و لینک‌های مفید ارائه دهید</li>
                                <li><i class="fas fa-check text-success me-2"></i>کد و نمونه‌های کد ارائه دهید</li>
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <h6 class="text-danger">❌ پاسخ ضعیف:</h6>
                            <ul class="list-unstyled">
                                <li><i class="fas fa-times text-danger me-2"></i>پاسخ مبهم و کلی</li>
                                <li><i class="fas fa-times text-danger me-2"></i>عدم ارائه راه‌حل عملی</li>
                                <li><i class="fas fa-times text-danger me-2"></i>تکرار پاسخ‌های قبلی</li>
                                <li><i class="fas fa-times text-danger me-2"></i>پاسخ نامربوط</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.form-control:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.card {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border: none;
}

.card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.question-content {
    line-height: 1.6;
    font-size: 1.1rem;
}

.form-text {
    font-size: 0.9rem;
    color: #6c757d;
}

.list-unstyled li {
    margin-bottom: 0.5rem;
}

.tags .badge {
    font-size: 0.9rem;
}

.editor-toolbar {
    border: 1px solid #dee2e6;
    border-bottom: none;
    border-radius: 0.375rem 0.375rem 0 0;
    padding: 0.5rem;
    background-color: #f8f9fa;
}

.editor-textarea {
    border-radius: 0 0 0.375rem 0.375rem;
    border-top: none;
}
</style>

<script>
// توابع ادیتور متن
function formatText(command) {
    const textarea = document.querySelector('.editor-textarea');
    const start = textarea.selectionStart;
    const end = textarea.selectionEnd;
    const selectedText = textarea.value.substring(start, end);
    
    let formattedText = '';
    
    switch(command) {
        case 'bold':
            formattedText = `**${selectedText}**`;
            break;
        case 'italic':
            formattedText = `*${selectedText}*`;
            break;
        case 'code':
            formattedText = `\`${selectedText}\``;
            break;
    }
    
    textarea.value = textarea.value.substring(0, start) + formattedText + textarea.value.substring(end);
    textarea.focus();
    textarea.setSelectionRange(start + formattedText.length, start + formattedText.length);
}

function insertList() {
    const textarea = document.querySelector('.editor-textarea');
    const start = textarea.selectionStart;
    const end = textarea.selectionEnd;
    const selectedText = textarea.value.substring(start, end);
    
    const listText = selectedText.split('\n').map(line => `- ${line}`).join('\n');
    textarea.value = textarea.value.substring(0, start) + listText + textarea.value.substring(end);
    textarea.focus();
}
</script>
{% endblock %}