{% 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 %}Edit Survey Template{% else %}Create Survey Template{% endif %} - PX360{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="mb-1">
                <i class="bi bi-file-earmark-text text-primary me-2"></i>
                {% if template %}Edit Survey Template{% else %}Create Survey Template{% endif %}
            </h2>
            <p class="text-muted mb-0">{% if template %}Modify survey template and questions{% else %}Create a new survey template with questions{% endif %}</p>
        </div>
        <a href="{% url 'surveys:template_list' %}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left me-1"></i> Back to Templates
        </a>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <form method="post" id="survey-template-form">
                        {% csrf_token %}
                        
                        <!-- Template Details -->
                        <h5 class="card-title mb-3">Template Details</h5>
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="{{ form.name.id_for_label }}" class="form-label">Name (English) <span class="text-danger">*</span></label>
                                    {{ form.name }}
                                    {% if form.name.errors %}
                                        <div class="text-danger small">{{ form.name.errors }}</div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="{{ form.name_ar.id_for_label }}" class="form-label">Name (Arabic)</label>
                                    {{ form.name_ar }}
                                    {% if form.name_ar.errors %}
                                        <div class="text-danger small">{{ form.name_ar.errors }}</div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <div class="row mb-4">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="{{ form.hospital.id_for_label }}" class="form-label">Hospital <span class="text-danger">*</span></label>
                                    {{ form.hospital }}
                                    {% if form.hospital.errors %}
                                        <div class="text-danger small">{{ form.hospital.errors }}</div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="{{ form.survey_type.id_for_label }}" class="form-label">Survey Type <span class="text-danger">*</span></label>
                                    {{ form.survey_type }}
                                    {% if form.survey_type.errors %}
                                        <div class="text-danger small">{{ form.survey_type.errors }}</div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <div class="row mb-4">
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="{{ form.scoring_method.id_for_label }}" class="form-label">Scoring Method <span class="text-danger">*</span></label>
                                    {{ form.scoring_method }}
                                    {% if form.scoring_method.errors %}
                                        <div class="text-danger small">{{ form.scoring_method.errors }}</div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="{{ form.negative_threshold.id_for_label }}" class="form-label">Negative Threshold</label>
                                    {{ form.negative_threshold }}
                                    {% if form.negative_threshold.errors %}
                                        <div class="text-danger small">{{ form.negative_threshold.errors }}</div>
                                    {% endif %}
                                    <small class="text-muted">Scores below this are marked as negative</small>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label class="form-label">Active</label>
                                    <div class="form-check mt-2">
                                        {{ form.is_active }}
                                        <label class="form-check-label" for="{{ form.is_active.id_for_label }}">
                                            Make this template active
                                        </label>
                                    </div>
                                    {% if form.is_active.errors %}
                                        <div class="text-danger small">{{ form.is_active.errors }}</div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <hr class="my-4">

                        <!-- Questions -->
                        <h5 class="card-title mb-3">Questions</h5>
                        <div id="questions-container">
                            {{ formset.management_form }}
                            
                            <!-- Empty form template (hidden) -->
                            <div id="empty-question-form" style="display: none;">
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <h6 class="mb-0">Question #[index]</h6>
                                    <button type="button" class="btn btn-sm btn-outline-danger delete-question-btn">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </div>

                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label for="id_questions-__prefix__-text" class="form-label">Question (English) <span class="text-danger">*</span></label>
                                        <input type="text" name="questions-__prefix__-text" maxlength="1000" id="id_questions-__prefix__-text" class="form-control">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="id_questions-__prefix__-text_ar" class="form-label">Question (Arabic)</label>
                                        <input type="text" name="questions-__prefix__-text_ar" maxlength="1000" id="id_questions-__prefix__-text_ar" class="form-control">
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <div class="col-md-4">
                                        <label for="id_questions-__prefix__-question_type" class="form-label">Question Type <span class="text-danger">*</span></label>
                                        <select name="questions-__prefix__-question_type" id="id_questions-__prefix__-question_type" class="form-select">
                                            <option value="text">Text</option>
                                            <option value="rating">Rating (1-5)</option>
                                            <option value="multiple_choice">Multiple Choice</option>
                                            <option value="single_choice">Single Choice</option>
                                        </select>
                                    </div>
                                    <div class="col-md-2">
                                        <label for="id_questions-__prefix__-order" class="form-label">Order <span class="text-danger">*</span></label>
                                        <input type="number" name="questions-__prefix__-order" id="id_questions-__prefix__-order" class="form-control" min="0">
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check mt-4">
                                            <input type="checkbox" name="questions-__prefix__-is_required" id="id_questions-__prefix__-is_required" class="form-check-input">
                                            <label class="form-check-label" for="id_questions-__prefix__-is_required">
                                                Required question
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <div class="mb-3 choices-field" style="display: none;">
                                    <label for="id_questions-__prefix__-choices_json" class="form-label">Choices (JSON)</label>
                                    <textarea name="questions-__prefix__-choices_json" id="id_questions-__prefix__-choices_json" class="form-control" rows="5" placeholder='[{"value": "1", "label": "Option 1", "label_ar": "خيار 1"}]'></textarea>
                                    <small class="text-muted">JSON array of choices for multiple choice questions. Format: [{"value": "1", "label": "Option 1", "label_ar": "خيار 1"}]</small>
                                </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-4 p-3 border rounded">
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <h6 class="mb-0">Question #{{ forloop.counter }}</h6>
                                    {% if form.DELETE %}
                                        {{ form.DELETE }}
                                    {% endif %}
                                </div>

                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label for="{{ form.text.id_for_label }}" class="form-label">Question (English) <span class="text-danger">*</span></label>
                                        {{ form.text }}
                                        {% if form.text.errors %}
                                            <div class="text-danger small">{{ form.text.errors }}</div>
                                        {% endif %}
                                    </div>
                                    <div class="col-md-6">
                                        <label for="{{ form.text_ar.id_for_label }}" class="form-label">Question (Arabic)</label>
                                        {{ form.text_ar }}
                                        {% if form.text_ar.errors %}
                                            <div class="text-danger small">{{ form.text_ar.errors }}</div>
                                        {% endif %}
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <div class="col-md-4">
                                        <label for="{{ form.question_type.id_for_label }}" class="form-label">Question Type <span class="text-danger">*</span></label>
                                        {{ form.question_type }}
                                        {% if form.question_type.errors %}
                                            <div class="text-danger small">{{ form.question_type.errors }}</div>
                                        {% endif %}
                                    </div>
                                    <div class="col-md-2">
                                        <label for="{{ form.order.id_for_label }}" class="form-label">Order <span class="text-danger">*</span></label>
                                        {{ form.order }}
                                        {% if form.order.errors %}
                                            <div class="text-danger small">{{ form.order.errors }}</div>
                                        {% endif %}
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check mt-4">
                                            {{ form.is_required }}
                                            <label class="form-check-label" for="{{ form.is_required.id_for_label }}">
                                                Required question
                                            </label>
                                            {% if form.is_required.errors %}
                                                <div class="text-danger small">{{ form.is_required.errors }}</div>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>

                                <div class="mb-3 choices-field">
                                    <label for="{{ form.choices_json.id_for_label }}" class="form-label">Choices (JSON)</label>
                                    {{ form.choices_json }}
                                    {% if form.choices_json.errors %}
                                        <div class="text-danger small">{{ form.choices_json.errors }}</div>
                                    {% endif %}
                                    <small class="text-muted">{{ form.choices_json.help_text }}</small>
                                </div>

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

                        <div class="d-flex justify-content-between mt-4">
                            <a href="{% url 'surveys:template_list' %}" class="btn btn-outline-secondary">
                                Cancel
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-check-lg me-1"></i> {% if template %}Update Template{% else %}Create Template{% endif %}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Hide choices field for non-choice question types
document.addEventListener('DOMContentLoaded', function() {
    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.style.display = 'block';
        } else {
            choicesField.style.display = 'none';
        }
    }
    
    // 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>
{% endblock %}

{% block extra_js %}
<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>
{% endblock %}