{% extends "layouts/base.html" %}
{% load i18n static %}

{% block extra_css %}
<style>
.question-form.highlight-new {
    animation: highlight 2s ease-out;
}

@keyframes highlight {
    0% { background-color: #d4edda; }
    100% { background-color: transparent; }
}

.reorder-controls {
    display: flex;
    gap: 4px;
}

.reorder-controls button {
    padding: 2px 8px;
    font-size: 12px;
}

.choices-field.fade-in {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Preview Styles */
#survey-preview-card {
    border-left: 4px solid #0d6efd;
}

#survey-preview-card .card-body {
    max-height: 500px;
    overflow-y: auto;
}

#survey-preview-card .card-body.expanded {
    max-height: none;
    overflow: visible;
}

.survey-preview {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
}

.survey-title h4 {
    color: #0d6efd;
    border-bottom: 2px solid #0d6efd;
    padding-bottom: 10px;
}

.survey-question-preview {
    background-color: white;
    transition: all 0.3s ease;
}

.survey-question-preview:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.rating-preview {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.rating-option {
    cursor: default;
}

.rating-option input:disabled + span {
    opacity: 0.7;
}

.choices-preview label {
    cursor: default;
    padding: 5px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.choices-preview label:hover {
    background-color: #e9ecef;
}

.choices-preview input:disabled {
    opacity: 0.7;
}

/* Choices Builder Styles */
.choices-ui {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

.choice-item {
    background-color: white;
    border: 1px solid #dee2e6 !important;
    transition: all 0.2s ease;
}

.choice-item:hover {
    border-color: #0d6efd !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.drag-handle {
    cursor: grab;
    user-select: none;
}

.drag-handle:active {
    cursor: grabbing;
}
</style>
{% endblock %}

{% block title %}{% if template %}{% trans "Edit Survey Template" %}{% else %}{% trans "Create Survey Template" %}{% endif %} - PX360{% endblock %}

{% block content %}
<!-- Page Header -->
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
    <div>
        <h1 class="text-2xl font-bold text-navy flex items-center gap-2">
            <i data-lucide="file-text" class="w-7 h-7 text-blue"></i>
            {% if template %}{% trans "Edit Survey Template" %}{% else %}{% trans "Create Survey Template" %}{% endif %}
        </h1>
        <p class="text-slate mt-1">
            {% if template %}{% trans "Modify survey template and questions" %}{% else %}{% trans "Create a new survey template with questions" %}{% endif %}
        </p>
    </div>
    <a href="{% url 'surveys:template_list' %}" class="px-4 py-2.5 border border-slate-200 text-slate rounded-xl font-semibold hover:bg-light transition flex items-center gap-2">
        <i data-lucide="arrow-left" class="w-5 h-5"></i> {% trans "Back to Templates" %}
    </a>
</div>

<!-- Form Card -->
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
    <div class="p-6">
        <form method="post" id="survey-template-form">
            {% csrf_token %}
            
            <!-- Template Details -->
            <h2 class="text-lg font-bold text-navy mb-4">{% trans "Template Details" %}</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                <div>
                    <label for="{{ form.name.id_for_label }}" class="block text-sm font-medium text-slate mb-2">
                        {% trans "Name (English)" %} <span class="text-red-600">*</span>
                    </label>
                    {{ form.name }}
                    {% if form.name.errors %}
                        <div class="mt-1 text-sm text-red-600">{{ form.name.errors }}</div>
                    {% endif %}
                </div>
                <div>
                    <label for="{{ form.name_ar.id_for_label }}" class="block text-sm font-medium text-slate mb-2">
                        {% trans "Name (Arabic)" %}
                    </label>
                    {{ form.name_ar }}
                    {% if form.name_ar.errors %}
                        <div class="mt-1 text-sm text-red-600">{{ form.name_ar.errors }}</div>
                    {% endif %}
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                <div>
                    <label for="{{ form.hospital.id_for_label }}" class="block text-sm font-medium text-slate mb-2">
                        {% trans "Hospital" %} <span class="text-red-600">*</span>
                    </label>
                    {{ form.hospital }}
                    {% if form.hospital.errors %}
                        <div class="mt-1 text-sm text-red-600">{{ form.hospital.errors }}</div>
                    {% endif %}
                </div>
                <div>
                    <label for="{{ form.survey_type.id_for_label }}" class="block text-sm font-medium text-slate mb-2">
                        {% trans "Survey Type" %} <span class="text-red-600">*</span>
                    </label>
                    {{ form.survey_type }}
                    {% if form.survey_type.errors %}
                        <div class="mt-1 text-sm text-red-600">{{ form.survey_type.errors }}</div>
                    {% endif %}
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
                <div>
                    <label for="{{ form.scoring_method.id_for_label }}" class="block text-sm font-medium text-slate mb-2">
                        {% trans "Scoring Method" %} <span class="text-red-600">*</span>
                    </label>
                    {{ form.scoring_method }}
                    {% if form.scoring_method.errors %}
                        <div class="mt-1 text-sm text-red-600">{{ form.scoring_method.errors }}</div>
                    {% endif %}
                </div>
                <div>
                    <label for="{{ form.negative_threshold.id_for_label }}" class="block text-sm font-medium text-slate mb-2">
                        {% trans "Negative Threshold" %}
                    </label>
                    {{ form.negative_threshold }}
                    {% if form.negative_threshold.errors %}
                        <div class="mt-1 text-sm text-red-600">{{ form.negative_threshold.errors }}</div>
                    {% endif %}
                    <p class="mt-1 text-xs text-slate">{% trans "Scores below this are marked as negative" %}</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate mb-2">{% trans "Active" %}</label>
                    <div class="mt-2">
                        <label class="flex items-center gap-2 cursor-pointer">
                            {{ form.is_active }}
                            <span class="text-sm text-slate">{% trans "Make this template active" %}</span>
                        </label>
                        {% if form.is_active.errors %}
                            <div class="mt-1 text-sm text-red-600">{{ form.is_active.errors }}</div>
                        {% endif %}
                    </div>
                </div>
            </div>

            <hr class="my-6 border-slate-200">

            <!-- Questions -->
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-lg font-bold text-navy">{% trans "Questions" %}</h2>
                <button type="button" id="add-question-btn" class="px-4 py-2.5 bg-blue text-white rounded-xl font-semibold hover:bg-blue-700 transition flex items-center gap-2">
                  <i data-lucide="plus" class="w-5 h-5"></i> {% trans "Add Question" %}
                </button>
            </div>
            <div id="questions-container">
                {{ formset.management_form }}
                
                <!-- Empty form template (hidden) -->
                <div id="empty-question-form" class="hidden">
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="text-md font-semibold text-navy">{% trans "Question" %} #[index]</h3>
                        <button type="button" class="delete-question-btn px-3 py-1.5 bg-red-50 text-red-600 rounded-lg text-sm font-medium hover:bg-red-100 transition">
                            <i data-lucide="trash-2" class="w-4 h-4"></i>
                        </button>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                        <div>
                            <label for="id_questions-__prefix__-text" class="block text-sm font-medium text-slate mb-2">
                                {% trans "Question (English)" %} <span class="text-red-600">*</span>
                            </label>
                            <input type="text" name="questions-__prefix__-text" maxlength="1000" id="id_questions-__prefix__-text" class="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:border-blue focus:ring-1 focus:ring-blue transition">
                        </div>
                        <div>
                            <label for="id_questions-__prefix__-text_ar" class="block text-sm font-medium text-slate mb-2">
                                {% trans "Question (Arabic)" %}
                            </label>
                            <input type="text" name="questions-__prefix__-text_ar" maxlength="1000" id="id_questions-__prefix__-text_ar" class="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:border-blue focus:ring-1 focus:ring-blue transition">
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                        <div>
                            <label for="id_questions-__prefix__-question_type" class="block text-sm font-medium text-slate mb-2">
                                {% trans "Question Type" %} <span class="text-red-600">*</span>
                            </label>
                            <select name="questions-__prefix__-question_type" id="id_questions-__prefix__-question_type" class="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:border-blue focus:ring-1 focus:ring-blue transition bg-white">
                                <option value="text">{% trans "Text" %}</option>
                                <option value="rating">{% trans "Rating (1-5)" %}</option>
                                <option value="multiple_choice">{% trans "Multiple Choice" %}</option>
                                <option value="single_choice">{% trans "Single Choice" %}</option>
                            </select>
                        </div>
                        <div>
                            <label for="id_questions-__prefix__-order" class="block text-sm font-medium text-slate mb-2">
                                {% trans "Order" %} <span class="text-red-600">*</span>
                            </label>
                            <input type="number" name="questions-__prefix__-order" id="id_questions-__prefix__-order" class="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:border-blue focus:ring-1 focus:ring-blue transition" min="0">
                        </div>
                        <div class="mt-6">
                            <label class="flex items-center gap-2 cursor-pointer">
                                <input type="checkbox" name="questions-__prefix__-is_required" id="id_questions-__prefix__-is_required" class="w-5 h-5 text-blue border-slate-300 rounded focus:ring-blue">
                                <span class="text-sm text-slate">{% trans "Required question" %}</span>
                            </label>
                        </div>
                    </div>

                    <div class="mb-4 choices-field hidden">
                        <label for="id_questions-__prefix__-choices_json" class="block text-sm font-medium text-slate mb-2">
                            {% trans "Choices (JSON)" %}
                        </label>
                        <textarea name="questions-__prefix__-choices_json" id="id_questions-__prefix__-choices_json" class="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:border-blue focus:ring-1 focus:ring-blue transition font-mono text-sm" rows="5" placeholder='[{"value": "1", "label": "Option 1", "label_ar": "خيار 1"}]'></textarea>
                        <p class="mt-1 text-xs text-slate">{% trans "JSON array of choices for multiple choice questions. Format: [{'value': '1', 'label': 'Option 1', 'label_ar': 'خيار 1'}]" %}</p>
                    </div>

                    <input type="hidden" name="questions-__prefix__-id" id="id_questions-__prefix__-id">
                    <input type="hidden" name="questions-__prefix__-DELETE" id="id_questions-__prefix__-DELETE">
                </div>

                {% for form in formset %}
                <div class="question-form mb-6 p-4 border border-slate-200 rounded-xl bg-slate-50">
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="text-md font-semibold text-navy">{% trans "Question" %} #{{ forloop.counter }}</h3>
                        {% if form.DELETE %}
                            {{ form.DELETE }}
                        {% endif %}
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                        <div>
                            <label for="{{ form.text.id_for_label }}" class="block text-sm font-medium text-slate mb-2">
                                {% trans "Question (English)" %} <span class="text-red-600">*</span>
                            </label>
                            {{ form.text }}
                            {% if form.text.errors %}
                                <div class="mt-1 text-sm text-red-600">{{ form.text.errors }}</div>
                            {% endif %}
                        </div>
                        <div>
                            <label for="{{ form.text_ar.id_for_label }}" class="block text-sm font-medium text-slate mb-2">
                                {% trans "Question (Arabic)" %}
                            </label>
                            {{ form.text_ar }}
                            {% if form.text_ar.errors %}
                                <div class="mt-1 text-sm text-red-600">{{ form.text_ar.errors }}</div>
                            {% endif %}
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                        <div>
                            <label for="{{ form.question_type.id_for_label }}" class="block text-sm font-medium text-slate mb-2">
                                {% trans "Question Type" %} <span class="text-red-600">*</span>
                            </label>
                            {{ form.question_type }}
                            {% if form.question_type.errors %}
                                <div class="mt-1 text-sm text-red-600">{{ form.question_type.errors }}</div>
                            {% endif %}
                        </div>
                        <div>
                            <label for="{{ form.order.id_for_label }}" class="block text-sm font-medium text-slate mb-2">
                                {% trans "Order" %} <span class="text-red-600">*</span>
                            </label>
                            {{ form.order }}
                            {% if form.order.errors %}
                                <div class="mt-1 text-sm text-red-600">{{ form.order.errors }}</div>
                            {% endif %}
                        </div>
                        <div class="mt-6">
                            <label class="flex items-center gap-2 cursor-pointer">
                                {{ form.is_required }}
                                <span class="text-sm text-slate">{% trans "Required question" %}</span>
                            </label>
                            {% if form.is_required.errors %}
                                <div class="mt-1 text-sm text-red-600">{{ form.is_required.errors }}</div>
                            {% endif %}
                        </div>
                    </div>

                    <div class="mb-4 choices-field">
                        <label for="{{ form.choices_json.id_for_label }}" class="block text-sm font-medium text-slate mb-2">
                            {% trans "Choices (JSON)" %}
                        </label>
                        {{ form.choices_json }}
                        {% if form.choices_json.errors %}
                            <div class="mt-1 text-sm text-red-600">{{ form.choices_json.errors }}</div>
                        {% endif %}
                        <p class="mt-1 text-xs text-slate">{{ form.choices_json.help_text }}</p>
                    </div>

                    {{ form.id }}
                </div>
                {% endfor %}
            </div>

            <div class="flex justify-between items-center mt-6 pt-6 border-t border-slate-200">
                <a href="{% url 'surveys:template_list' %}" class="px-4 py-2.5 border border-slate-200 text-slate rounded-xl font-semibold hover:bg-light transition flex items-center gap-2">
                    <i data-lucide="x" class="w-5 h-5"></i> {% trans "Cancel" %}
                </a>
                <button type="submit" class="px-4 py-2.5 bg-navy text-white rounded-xl font-semibold hover:bg-blue transition flex items-center gap-2">
                    <i data-lucide="check" class="w-5 h-5"></i> {% if template %}{% trans "Update Template" %}{% else %}{% trans "Create Template" %}{% endif %}
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Add Tailwind classes to form fields dynamically
document.addEventListener('DOMContentLoaded', function() {
    // Apply Tailwind classes to form fields
    const textInputs = document.querySelectorAll('input[type="text"], input[type="number"], textarea, select');
    textInputs.forEach(input => {
        if (!input.id.includes('empty-question-form')) {
            input.classList.add('w-full', 'px-4', 'py-2.5', 'border', 'border-slate-200', 'rounded-xl', 'focus:border-blue', 'focus:ring-1', 'focus:ring-blue', 'transition');
        }
    });

    // Hide choices field for non-choice question types
    function toggleChoicesField(questionTypeSelect) {
        const questionForm = questionTypeSelect.closest('.question-form');
        
        // Skip if not in a question form (e.g., empty template)
        if (!questionForm) return;
        
        const choicesField = questionForm.querySelector('.choices-field');
        
        // Skip if no choices field found
        if (!choicesField) return;
        
        const questionType = questionTypeSelect.value;
        
        if (questionType === 'multiple_choice' || questionType === 'single_choice') {
            choicesField.classList.remove('hidden');
        } else {
            choicesField.classList.add('hidden');
        }
    }
    
    // Initialize all question type selects (skip empty template)
    document.querySelectorAll('select[name$="-question_type"]').forEach(select => {
        // Skip selects in the empty template
        if (select.closest('#empty-question-form')) return;
        
        toggleChoicesField(select);
        select.addEventListener('change', function() {
            toggleChoicesField(this);
        });
    });
});
</script>
<script src="{% static 'surveys/js/builder.js' %}"></script>
<script src="{% static 'surveys/js/choices-builder.js' %}"></script>
<script src="{% static 'surveys/js/preview.js' %}"></script>
<script>
// Initialize Lucide icons
document.addEventListener('DOMContentLoaded', function() {
    lucide.createIcons();
});
</script>
{% endblock %}