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

{% block title %}{{ template.name }} - 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>
                {{ template.name }}
            </h2>
            <p class="text-muted mb-0">{{ template.name_ar }}</p>
        </div>
        <div>
            <a href="{% url 'surveys:template_list' %}" class="btn btn-outline-secondary me-2">
                <i class="bi bi-arrow-left me-1"></i> Back to Templates
            </a>
            <a href="{% url 'surveys:template_edit' template.pk %}" class="btn btn-primary me-2">
                <i class="bi bi-pencil me-1"></i> Edit
            </a>
            <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModal">
                <i class="bi bi-trash me-1"></i> Delete
            </button>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <h6 class="card-title">Total Instances</h6>
                    <h3 class="mb-0">{{ stats.total_instances }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <h6 class="card-title">Completed</h6>
                    <h3 class="mb-0">{{ stats.completed_instances }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-warning text-white">
                <div class="card-body">
                    <h6 class="card-title">Negative</h6>
                    <h3 class="mb-0">{{ stats.negative_instances }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-info text-white">
                <div class="card-body">
                    <h6 class="card-title">Avg Score</h6>
                    <h3 class="mb-0">{{ stats.avg_score }}</h3>
                </div>
            </div>
        </div>
    </div>

    <!-- Template Details -->
    <div class="row">
        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">Template Details</h5>
                </div>
                <div class="card-body">
                    <table class="table table-borderless">
                        <tr>
                            <th width="30%">Hospital:</th>
                            <td>{{ template.hospital.name_en }}</td>
                        </tr>
                        <tr>
                            <th>Survey Type:</th>
                            <td><span class="badge bg-primary">{{ template.get_survey_type_display }}</span></td>
                        </tr>
                        <tr>
                            <th>Scoring Method:</th>
                            <td>{{ template.get_scoring_method_display }}</td>
                        </tr>
                        <tr>
                            <th>Negative Threshold:</th>
                            <td>{{ template.negative_threshold }}</td>
                        </tr>
                        <tr>
                            <th>Status:</th>
                            <td>
                                {% if template.is_active %}
                                <span class="badge bg-success">Active</span>
                                {% else %}
                                <span class="badge bg-secondary">Inactive</span>
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th>Created By:</th>
                            <td>{{ template.created_by.get_full_name|default:"System" }}</td>
                        </tr>
                        <tr>
                            <th>Created At:</th>
                            <td>{{ template.created_at|date:"Y-m-d H:i" }}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">Statistics</h5>
                </div>
                <div class="card-body">
                    <table class="table table-borderless">
                        <tr>
                            <th width="30%">Total Instances:</th>
                            <td>{{ stats.total_instances }}</td>
                        </tr>
                        <tr>
                            <th>Completed:</th>
                            <td>{{ stats.completed_instances }}</td>
                        </tr>
                        <tr>
                            <th>Completion Rate:</th>
                            <td>{{ stats.completion_rate }}%</td>
                        </tr>
                        <tr>
                            <th>Negative Responses:</th>
                            <td>{{ stats.negative_instances }}</td>
                        </tr>
                        <tr>
                            <th>Average Score:</th>
                            <td>{{ stats.avg_score }}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Questions -->
    <div class="card">
        <div class="card-header">
            <h5 class="mb-0">Questions ({{ questions.count }})</h5>
        </div>
        <div class="card-body">
            {% if questions %}
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Order</th>
                            <th>Question (EN)</th>
                            <th>Question (AR)</th>
                            <th>Type</th>
                            <th>Required</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for question in questions %}
                        <tr>
                            <td>{{ question.order }}</td>
                            <td>{{ question.text }}</td>
                            <td>{{ question.text_ar|default:"-" }}</td>
                            <td><span class="badge bg-info">{{ question.get_question_type_display }}</span></td>
                            <td>
                                {% if question.is_required %}
                                <span class="badge bg-success">Yes</span>
                                {% else %}
                                <span class="badge bg-secondary">No</span>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <div class="text-center py-4">
                <i class="bi bi-inbox" style="font-size: 2rem; color: #ccc;"></i>
                <p class="text-muted mt-2">No questions added yet</p>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title" id="deleteModalLabel">Confirm Delete</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete the survey template "<strong>{{ template.name }}</strong>"?</p>
                <p class="text-muted">This action cannot be undone.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <form method="post" action="{% url 'surveys:template_delete' template.pk %}">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-danger">Delete Template</button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}