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

{% block title %}Survey #{{ survey.id|slice:":8" }} - PX360{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="mb-3">
        <a href="{% url 'surveys:instance_list' %}" class="btn btn-outline-secondary btn-sm">
            <i class="bi bi-arrow-left me-1"></i> {{ _("Back to Surveys")}}
        </a>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0">{{ survey.survey_template.name }}</h5>
                </div>
                <div class="card-body">
                    <h6 class="mb-3">{% trans "Survey Responses" %}</h6>
                    
                    {% for response in responses %}
                    <div class="mb-4 pb-3 border-bottom">
                        <div class="mb-2">
                            <strong>Q{{ forloop.counter }}:</strong> {{ response.question.text }}
                        </div>
                        <div class="ms-3">
                            {% if response.numeric_value %}
                            <span class="badge bg-primary">Score: {{ response.numeric_value }}</span>
                            {% endif %}
                            {% if response.choice_value %}
                            <span class="badge bg-secondary">{{ response.choice_value }}</span>
                            {% endif %}
                            {% if response.text_value %}
                            <p class="mb-0 mt-2">{{ response.text_value }}</p>
                            {% endif %}
                        </div>
                    </div>
                    {% empty %}
                    <div class="text-center py-5">
                        <i class="bi bi-clipboard" style="font-size: 3rem; color: #ccc;"></i>
                        <p class="text-muted mt-3">{{ _("No responses yet")}}</p>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card mb-3">
                <div class="card-header">
                    <h6 class="mb-0"><i class="bi bi-info-circle me-2"></i>{% trans "Survey Information" %}</h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <strong>Status:</strong><br>
                        {% if survey.status == 'completed' %}
                        <span class="badge bg-success">{{ survey.get_status_display }}</span>
                        {% elif survey.status == 'pending' %}
                        <span class="badge bg-warning">{{ survey.get_status_display }}</span>
                        {% elif survey.status == 'active' %}
                        <span class="badge bg-info">{{ survey.get_status_display }}</span>
                        {% elif survey.status == 'cancelled' %}
                        <span class="badge bg-danger">{{ survey.get_status_display }}</span>
                        {% else %}
                        <span class="badge bg-secondary">{{ survey.get_status_display }}</span>
                        {% endif %}
                    </div>
                    
                    {% if survey.total_score %}
                    <div class="mb-3">
                        <strong>{{ _("Total Score")}}:</strong><br>
                        <h3 class="mb-0 {% if survey.is_negative %}text-danger{% else %}text-success{% endif %}">
                            {{ survey.total_score|floatformat:1 }}/5.0
                        </h3>
                        {% if survey.is_negative %}
                        <span class="badge bg-danger mt-2">{{ _("Negative Feedback")}}</span>
                        {% endif %}
                    </div>
                    {% endif %}
                    
                    {% if survey.sent_at %}
                    <div class="mb-3">
                        <strong>{{ _("Sent") }}:</strong><br>
                        {{ survey.sent_at|date:"M d, Y H:i" }}
                    </div>
                    {% endif %}
                    
                    {% if survey.completed_at %}
                    <div class="mb-0">
                        <strong>{{ _("Completed") }}:</strong><br>
                        {{ survey.completed_at|date:"M d, Y H:i" }}
                    </div>
                    {% endif %}
                </div>
            </div>
            
            <div class="card mb-3">
                <div class="card-header">
                    <h6 class="mb-0"><i class="bi bi-person me-2"></i>{% trans "Patient Information" %}</h6>
                </div>
                <div class="card-body">
                    <div class="mb-2">
                        <strong>{{ _("Name") }}:</strong><br>
                        {{ survey.patient.get_full_name }}
                    </div>
                    <div class="mb-2">
                        <strong>{{ _("Phone") }}:</strong><br>
                        {{ survey.patient.phone }}
                    </div>
                    <div class="mb-0">
                        <strong>{{ _("MRN") }}:</strong><br>
                        {{ survey.patient.mrn }}
                    </div>
                </div>
            </div>
            
            {% if survey.is_negative %}
            <div class="card border-warning">
                <div class="card-header bg-warning text-dark">
                    <h6 class="mb-0"><i class="bi bi-exclamation-triangle me-2"></i>{% trans "Follow-up Actions" %}</h6>
                </div>
                <div class="card-body">
                    {% if not survey.patient_contacted %}
                    <div class="alert alert-warning mb-3">
                        <i class="bi bi-info-circle me-2"></i>
                        <strong>Action Required:</strong> Contact patient to discuss negative feedback.
                    </div>
                    
                    <form method="post" action="{% url 'surveys:log_patient_contact' survey.id %}">
                        {% csrf_token %}
                        <div class="mb-3">
                            <label for="contact_notes" class="form-label">{% trans "Contact Notes *" %}</label>
                            <textarea class="form-control" id="contact_notes" name="contact_notes" rows="4" required 
                                placeholder="{% trans 'Document your conversation with the patient...' %}"></textarea>
                        </div>
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" id="issue_resolved" name="issue_resolved">
                            <label class="form-check-label" for="issue_resolved">
                                Issue resolved or explained to patient
                            </label>
                        </div>
                        <button type="submit" class="btn btn-warning w-100">
                            <i class="bi bi-telephone me-2"></i>Log Patient Contact
                        </button>
                    </form>
                    {% else %}
                    <div class="alert alert-success mb-3">
                        <i class="bi bi-check-circle me-2"></i>
                        <strong>{{ _("Patient Contacted")}}</strong><br>
                        <small>By {{ survey.patient_contacted_by.get_full_name }} on {{ survey.patient_contacted_at|date:"M d, Y H:i" }}</small>
                    </div>
                    
                    <div class="mb-3">
                        <strong>{{ _("Contact Notes")}}:</strong>
                        <p class="mb-0 mt-2">{{ survey.contact_notes }}</p>
                    </div>
                    
                    <div class="mb-3">
                        <strong>{{ _("Status") }}:</strong><br>
                        {% if survey.issue_resolved %}
                        <span class="badge bg-success">Issue Resolved</span>
                        {% else %}
                        <span class="badge bg-warning">Issue Discussed</span>
                        {% endif %}
                    </div>
                    
                    {% if not survey.satisfaction_feedback_sent %}
                    <hr>
                    <h6 class="mb-3">{% trans "Send Satisfaction Feedback" %}</h6>
                    <p class="text-muted small mb-3">
                        Send a feedback form to the patient to assess their satisfaction with how their concerns were addressed.
                    </p>
                    <form method="post" action="{% url 'surveys:send_satisfaction_feedback' survey.id %}">
                        {% csrf_token %}
                        <button type="submit" class="btn btn-primary w-100">
                            <i class="bi bi-send me-2"></i>Send Satisfaction Feedback
                        </button>
                    </form>
                    {% else %}
                    <hr>
                    <div class="alert alert-info mb-0">
                        <i class="bi bi-check-circle me-2"></i>
                        <strong>Satisfaction Feedback Sent</strong><br>
                        <small>{{ survey.satisfaction_feedback_sent_at|date:"M d, Y H:i" }}</small>
                    </div>
                    
                    {% if survey.follow_up_feedbacks.exists %}
                    <div class="mt-3">
                        <strong>Related Feedback:</strong>
                        {% for feedback in survey.follow_up_feedbacks.all %}
                        <div class="mt-2">
                            <a href="{% url 'feedback:feedback_detail' feedback.id %}" class="btn btn-sm btn-outline-primary">
                                <i class="bi bi-chat-left-text me-1"></i>View Feedback #{{ feedback.id|slice:":8" }}
                            </a>
                        </div>
                        {% endfor %}
                    </div>
                    {% endif %}
                    {% endif %}
                    {% endif %}
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}