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

{% block title %}{{ template.name }} - 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>
            {{ template.name }}
        </h1>
        <p class="text-slate mt-1">{{ template.name_ar }}</p>
    </div>
    <div class="flex flex-wrap gap-2">
        <a href="{% url 'surveys:template_list' %}" class="px-4 py-2 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-4 h-4"></i> {% trans "Back" %}
        </a>
        <a href="{% url 'surveys:template_edit' template.pk %}" class="px-4 py-2 bg-navy text-white rounded-xl font-semibold hover:bg-blue transition flex items-center gap-2">
            <i data-lucide="pencil" class="w-4 h-4"></i> {% trans "Edit" %}
        </a>
        <button @click="$dispatch('open-delete-modal')" class="px-4 py-2 bg-red-600 text-white rounded-xl font-semibold hover:bg-red-700 transition flex items-center gap-2">
            <i data-lucide="trash-2" class="w-4 h-4"></i> {% trans "Delete" %}
        </button>
    </div>
</div>

<!-- Statistics Cards -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
    <div class="bg-navy text-white rounded-2xl p-6">
        <div class="flex items-center gap-3">
            <div class="w-12 h-12 bg-white/10 rounded-xl flex items-center justify-center">
                <i data-lucide="layers" class="w-6 h-6"></i>
            </div>
            <div>
                <p class="text-sm text-white/70">{% trans "Total Instances" %}</p>
                <p class="text-2xl font-bold">{{ stats.total_instances }}</p>
            </div>
        </div>
    </div>
    <div class="bg-green-600 text-white rounded-2xl p-6">
        <div class="flex items-center gap-3">
            <div class="w-12 h-12 bg-white/10 rounded-xl flex items-center justify-center">
                <i data-lucide="check-circle" class="w-6 h-6"></i>
            </div>
            <div>
                <p class="text-sm text-white/70">{% trans "Completed" %}</p>
                <p class="text-2xl font-bold">{{ stats.completed_instances }}</p>
            </div>
        </div>
    </div>
    <div class="bg-amber-500 text-white rounded-2xl p-6">
        <div class="flex items-center gap-3">
            <div class="w-12 h-12 bg-white/10 rounded-xl flex items-center justify-center">
                <i data-lucide="thumbs-down" class="w-6 h-6"></i>
            </div>
            <div>
                <p class="text-sm text-white/70">{% trans "Negative" %}</p>
                <p class="text-2xl font-bold">{{ stats.negative_instances }}</p>
            </div>
        </div>
    </div>
    <div class="bg-blue text-white rounded-2xl p-6">
        <div class="flex items-center gap-3">
            <div class="w-12 h-12 bg-white/10 rounded-xl flex items-center justify-center">
                <i data-lucide="trending-up" class="w-6 h-6"></i>
            </div>
            <div>
                <p class="text-sm text-white/70">{% trans "Avg Score" %}</p>
                <p class="text-2xl font-bold">{{ stats.avg_score }}</p>
            </div>
        </div>
    </div>
</div>

<!-- Template Details -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
    <!-- Details Card -->
    <div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
        <div class="px-6 py-4 border-b border-slate-100">
            <h3 class="text-lg font-bold text-navy">{% trans "Template Details" %}</h3>
        </div>
        <div class="p-6">
            <div class="space-y-4">
                <div class="flex justify-between py-2 border-b border-slate-50">
                    <span class="text-slate font-medium">{% trans "Hospital" %}</span>
                    <span class="text-navy">{{ template.hospital.name_en }}</span>
                </div>
                <div class="flex justify-between py-2 border-b border-slate-50">
                    <span class="text-slate font-medium">{% trans "Survey Type" %}</span>
                    <span class="px-2.5 py-1 rounded-lg text-xs font-bold bg-blue-100 text-blue-700">{{ template.get_survey_type_display }}</span>
                </div>
                <div class="flex justify-between py-2 border-b border-slate-50">
                    <span class="text-slate font-medium">{% trans "Scoring Method" %}</span>
                    <span class="text-navy">{{ template.get_scoring_method_display }}</span>
                </div>
                <div class="flex justify-between py-2 border-b border-slate-50">
                    <span class="text-slate font-medium">{% trans "Negative Threshold" %}</span>
                    <span class="text-navy">{{ template.negative_threshold }}</span>
                </div>
                <div class="flex justify-between py-2 border-b border-slate-50">
                    <span class="text-slate font-medium">{% trans "Status" %}</span>
                    {% if template.is_active %}
                    <span class="px-2.5 py-1 rounded-lg text-xs font-bold bg-green-100 text-green-700">{% trans "Active" %}</span>
                    {% else %}
                    <span class="px-2.5 py-1 rounded-lg text-xs font-bold bg-slate-100 text-slate-600">{% trans "Inactive" %}</span>
                    {% endif %}
                </div>
                <div class="flex justify-between py-2 border-b border-slate-50">
                    <span class="text-slate font-medium">{% trans "Created By" %}</span>
                    <span class="text-navy">{{ template.created_by.get_full_name|default:"System" }}</span>
                </div>
                <div class="flex justify-between py-2">
                    <span class="text-slate font-medium">{% trans "Created At" %}</span>
                    <span class="text-navy">{{ template.created_at|date:"Y-m-d H:i" }}</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistics Card -->
    <div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
        <div class="px-6 py-4 border-b border-slate-100">
            <h3 class="text-lg font-bold text-navy">{% trans "Statistics" %}</h3>
        </div>
        <div class="p-6">
            <div class="space-y-4">
                <div class="flex justify-between py-2 border-b border-slate-50">
                    <span class="text-slate font-medium">{% trans "Total Instances" %}</span>
                    <span class="text-navy font-semibold">{{ stats.total_instances }}</span>
                </div>
                <div class="flex justify-between py-2 border-b border-slate-50">
                    <span class="text-slate font-medium">{% trans "Completed" %}</span>
                    <span class="text-navy font-semibold">{{ stats.completed_instances }}</span>
                </div>
                <div class="flex justify-between py-2 border-b border-slate-50">
                    <span class="text-slate font-medium">{% trans "Completion Rate" %}</span>
                    <span class="text-navy font-semibold">{{ stats.completion_rate }}%</span>
                </div>
                <div class="flex justify-between py-2 border-b border-slate-50">
                    <span class="text-slate font-medium">{% trans "Negative Responses" %}</span>
                    <span class="text-amber-600 font-semibold">{{ stats.negative_instances }}</span>
                </div>
                <div class="flex justify-between py-2">
                    <span class="text-slate font-medium">{% trans "Average Score" %}</span>
                    <span class="text-green-600 font-semibold">{{ stats.avg_score }}</span>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Questions Card -->
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
    <div class="px-6 py-4 border-b border-slate-100">
        <h3 class="text-lg font-bold text-navy">{% trans "Questions" %} ({{ questions.count }})</h3>
    </div>
    <div class="p-6">
        {% if questions %}
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-slate-50 border-b border-slate-100">
                    <tr class="text-xs font-bold text-slate uppercase tracking-wider">
                        <th class="px-4 py-3 text-left">{% trans "Order" %}</th>
                        <th class="px-4 py-3 text-left">{% trans "Question (EN)" %}</th>
                        <th class="px-4 py-3 text-left">{% trans "Question (AR)" %}</th>
                        <th class="px-4 py-3 text-left">{% trans "Type" %}</th>
                        <th class="px-4 py-3 text-left">{% trans "Required" %}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    {% for question in questions %}
                    <tr class="hover:bg-light/30 transition">
                        <td class="px-4 py-3">
                            <span class="w-8 h-8 bg-slate-100 rounded-lg flex items-center justify-center text-slate font-semibold">
                                {{ question.order }}
                            </span>
                        </td>
                        <td class="px-4 py-3 text-navy">{{ question.text }}</td>
                        <td class="px-4 py-3 text-slate">{{ question.text_ar|default:"-" }}</td>
                        <td class="px-4 py-3">
                            <span class="px-2.5 py-1 rounded-lg text-xs font-bold bg-cyan-100 text-cyan-700">{{ question.get_question_type_display }}</span>
                        </td>
                        <td class="px-4 py-3">
                            {% if question.is_required %}
                            <span class="px-2.5 py-1 rounded-lg text-xs font-bold bg-green-100 text-green-700">{% trans "Yes" %}</span>
                            {% else %}
                            <span class="px-2.5 py-1 rounded-lg text-xs font-bold bg-slate-100 text-slate-600">{% trans "No" %}</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="text-center py-12">
            <div class="inline-flex items-center justify-center w-16 h-16 bg-slate-100 rounded-full mb-4">
                <i data-lucide="inbox" class="w-8 h-8 text-slate-400"></i>
            </div>
            <h3 class="text-lg font-bold text-navy mb-2">{% trans "No Questions" %}</h3>
            <p class="text-slate">{% trans "No questions have been added to this template yet." %}</p>
        </div>
        {% endif %}
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div x-data="{ show: false }" 
     x-init="$listen('open-delete-modal', () => show = true)"
     x-show="show" 
     x-transition:enter="transition ease-out duration-300"
     x-transition:enter-start="opacity-0"
     x-transition:enter-end="opacity-100"
     x-transition:leave="transition ease-in duration-200"
     x-transition:leave-start="opacity-100"
     x-transition:leave-end="opacity-0"
     class="fixed inset-0 z-50 overflow-y-auto" 
     style="display: none;">
    <div class="flex items-center justify-center min-h-screen px-4">
        <div class="fixed inset-0 bg-black/50" @click="show = false"></div>
        <div class="relative bg-white rounded-2xl max-w-md w-full p-6 shadow-xl">
            <div class="flex items-center gap-3 mb-4">
                <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center">
                    <i data-lucide="alert-triangle" class="w-6 h-6 text-red-600"></i>
                </div>
                <div>
                    <h3 class="text-lg font-bold text-navy">{% trans "Confirm Delete" %}</h3>
                    <p class="text-sm text-slate">{% trans "This action cannot be undone" %}</p>
                </div>
            </div>
            <p class="text-slate mb-4">
                {% trans "Are you sure you want to delete the survey template" %} "<strong class="text-navy">{{ template.name }}</strong>"?
            </p>
            <div class="flex justify-end gap-3">
                <button @click="show = false" class="px-4 py-2 border border-slate-200 text-slate rounded-xl font-semibold hover:bg-light transition">
                    {% trans "Cancel" %}
                </button>
                <form method="post" action="{% url 'surveys:template_delete' template.pk %}" class="inline">
                    {% csrf_token %}
                    <button type="submit" class="px-4 py-2 bg-red-600 text-white rounded-xl font-semibold hover:bg-red-700 transition">
                        {% trans "Delete Template" %}
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
lucide.createIcons();
</script>
{% endblock %}