{% extends "base.html" %}
{% load crispy_forms_tags %}

{% block content %}
<div class="container my-5">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <a href="{% url 'survey:survey_list' %}" class="btn btn-sm btn-outline-secondary mb-2">
                <i class="bi bi-arrow-left"></i> Back to Dashboard
            </a>
            <h1 class="h2 text-white"><i class="bi bi-list-task text-primary me-2"></i>Questions: {{ survey.name }}</h1>
            <p class="text-muted mb-0">Add, reorder, or remove questions in this survey.</p>
        </div>
    </div>

    {% if messages %}
        {% for message in messages %}
            <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endfor %}
    {% endif %}

    <div class="row g-4">
        <!-- Question list and reordering -->
        <div class="col-lg-7">
            <div class="card bg-dark border-secondary text-white shadow h-100">
                <div class="card-header border-secondary d-flex justify-content-between align-items-center py-3">
                    <h3 class="h5 card-title mb-0 text-white"><i class="bi bi-card-list me-2 text-primary"></i>Current Questions</h3>
                </div>
                <div class="card-body">
                    {% if questions %}
                        <form method="post">
                            {% csrf_token %}
                            <input type="hidden" name="action" value="reorder">
                            <div class="list-group list-group-flush mb-4">
                                {% for q in questions %}
                                    <div class="list-group-item bg-dark border-secondary text-white py-3 px-0">
                                        <div class="row align-items-center g-2">
                                            <div class="col-auto">
                                                <input type="number" name="order_{{ q.pk }}" value="{{ q.position }}" class="form-control form-control-sm text-center bg-black border-secondary text-white" style="width: 60px;" title="Order Position">
                                            </div>
                                            <div class="col">
                                                <span class="d-block fw-semibold">{{ q.text }}</span>
                                                <small class="text-muted">
                                                    Type: <strong>{{ q.get_question_type_display }}</strong> 
                                                    {% if q.required %}<span class="text-danger">*Required</span>{% else %}<span class="text-muted">(Optional)</span>{% endif %}
                                                </small>
                                                {% if q.question_type == 'CHOICE' %}
                                                    <div class="mt-2 small text-info">
                                                        <i class="bi bi-ui-checks-grid me-1"></i>Options: {{ q.get_choices_list|join:", " }}
                                                    </div>
                                                {% elif q.question_type == 'INTEGER' %}
                                                    {% if q.validation_rules.min_value is not None or q.validation_rules.max_value is not None %}
                                                        <div class="mt-2 small text-info">
                                                            <i class="bi bi-shield-check me-1"></i>Validation:
                                                            {% if q.validation_rules.min_value is not None %}Min: {{ q.validation_rules.min_value }}{% endif %}
                                                            {% if q.validation_rules.max_value is not None %}Max: {{ q.validation_rules.max_value }}{% endif %}
                                                        </div>
                                                    {% endif %}
                                                {% elif q.question_type == 'DATE' %}
                                                    {% if q.validation_rules.min_date or q.validation_rules.max_date %}
                                                        <div class="mt-2 small text-info">
                                                            <i class="bi bi-shield-check me-1"></i>Validation:
                                                            {% if q.validation_rules.min_date %}After: {{ q.validation_rules.min_date }}{% endif %}
                                                            {% if q.validation_rules.max_date %}Before: {{ q.validation_rules.max_date }}{% endif %}
                                                        </div>
                                                    {% endif %}
                                                {% endif %}
                                            </div>
                                            <div class="col-auto">
                                                <button type="button" class="btn btn-sm btn-outline-danger" onclick="confirmDeleteQuestion({{ q.pk }}, '{{ q.text|escapejs }}')">
                                                    <i class="bi bi-trash"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                            <button type="submit" class="btn btn-sm btn-success">
                                <i class="bi bi-save me-1"></i>Update Order
                            </button>
                        </form>
                    {% else %}
                        <p class="text-muted text-center py-5">No questions added yet. Use the form on the right to add your first question.</p>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Add new question form -->
        <div class="col-lg-5">
            <div class="card bg-dark border-secondary text-white shadow">
                <div class="card-header border-secondary py-3">
                    <h3 class="h5 card-title mb-0 text-white"><i class="bi bi-plus-circle me-2 text-primary"></i>Add Question</h3>
                </div>
                <div class="card-body">
                    <form method="post">
                        {% csrf_token %}
                        <input type="hidden" name="action" value="add">
                        
                        {{ form|crispy }}
                        
                        <div class="mt-4">
                            <button type="submit" class="btn btn-primary w-100">
                                <i class="bi bi-plus-lg me-1"></i>Add Question
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal Form -->
<form id="delete-question-form" method="post" style="display:none;">
    {% csrf_token %}
    <input type="hidden" name="action" value="delete">
    <input type="hidden" name="question_id" id="delete-question-id">
</form>

<script>
function confirmDeleteQuestion(id, text) {
    if (confirm("Are you sure you want to delete the question:\n\"" + text + "\"?")) {
        document.getElementById('delete-question-id').value = id;
        document.getElementById('delete-question-form').submit();
    }
}

document.addEventListener("DOMContentLoaded", function() {
    var typeField = document.getElementById("id_question_type");
    var choicesDiv = document.getElementById("div_id_choices");
    var minValDiv = document.getElementById("div_id_min_value");
    var maxValDiv = document.getElementById("div_id_max_value");
    var minDateDiv = document.getElementById("div_id_min_date");
    var maxDateDiv = document.getElementById("div_id_max_date");
    
    function toggleFields() {
        if (typeField) {
            if (choicesDiv) choicesDiv.style.display = (typeField.value === "CHOICE") ? "block" : "none";
            if (minValDiv) minValDiv.style.display = (typeField.value === "INTEGER") ? "block" : "none";
            if (maxValDiv) maxValDiv.style.display = (typeField.value === "INTEGER") ? "block" : "none";
            if (minDateDiv) minDateDiv.style.display = (typeField.value === "DATE") ? "block" : "none";
            if (maxDateDiv) maxDateDiv.style.display = (typeField.value === "DATE") ? "block" : "none";
        }
    }
    
    if (typeField) {
        typeField.addEventListener("change", toggleFields);
        toggleFields();
    }
});
</script>
{% endblock %}