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

{% block title %}{% trans "Survey Templates" %} - 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="clipboard-list" class="w-7 h-7 text-blue"></i>
            {% trans "Survey Templates" %}
        </h1>
        <p class="text-slate mt-1">{% trans "Manage survey templates and questions" %}</p>
    </div>
    <a href="{% url 'surveys:template_create' %}" class="px-4 py-2.5 bg-navy text-white rounded-xl font-semibold hover:bg-blue transition flex items-center gap-2">
        <i data-lucide="plus" class="w-5 h-5"></i> {% trans "Create Survey Template" %}
    </a>
</div>

<!-- Templates List Card -->
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
    {% if templates %}
    <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-6 py-4 text-left">{% trans "Name" %}</th>
                    <th class="px-6 py-4 text-left">{% trans "Survey Type" %}</th>
                    <th class="px-6 py-4 text-left">{% trans "Hospital" %}</th>
                    <th class="px-6 py-4 text-left">{% trans "Questions" %}</th>
                    <th class="px-6 py-4 text-left">{% trans "Scoring" %}</th>
                    <th class="px-6 py-4 text-left">{% trans "Status" %}</th>
                    <th class="px-6 py-4 text-left">{% trans "Actions" %}</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100">
                {% for template in templates %}
                <tr class="hover:bg-light/30 transition">
                    <td class="px-6 py-4">
                        <span class="font-semibold text-navy">{{ template.name }}</span>
                    </td>
                    <td class="px-6 py-4">
                        <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>
                    </td>
                    <td class="px-6 py-4">
                        <span class="text-sm text-slate">{{ template.hospital.name_en }}</span>
                    </td>
                    <td class="px-6 py-4">
                        <span class="px-2.5 py-1 rounded-lg text-xs font-bold bg-slate-100 text-slate-700">{{ template.questions.count }} {% trans "questions" %}</span>
                    </td>
                    <td class="px-6 py-4">
                        <span class="text-sm text-slate">{{ template.get_scoring_method_display }}</span>
                    </td>
                    <td class="px-6 py-4">
                        {% 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 %}
                    </td>
                    <td class="px-6 py-4">
                        <div class="relative">
                            <button type="button" class="dropdown-toggle p-2 text-slate hover:text-navy hover:bg-light rounded-lg transition" data-dropdown="dropdown-{{ template.pk }}">
                                <i data-lucide="more-horizontal" class="w-5 h-5"></i>
                            </button>
                            <div id="dropdown-{{ template.pk }}" class="dropdown-menu hidden absolute right-0 mt-2 w-48 bg-white rounded-xl shadow-lg border border-slate-100 py-2 z-10">
                                <a href="{% url 'surveys:template_detail' template.pk %}" class="flex items-center gap-2 px-4 py-2 text-sm text-slate hover:bg-light hover:text-navy transition">
                                    <i data-lucide="eye" class="w-4 h-4"></i> {% trans "View" %}
                                </a>
                                <a href="{% url 'surveys:template_edit' template.pk %}" class="flex items-center gap-2 px-4 py-2 text-sm text-slate hover:bg-light hover:text-navy transition">
                                    <i data-lucide="pencil" class="w-4 h-4"></i> {% trans "Edit" %}
                                </a>
                                <a href="{% url 'surveys:instance_list' %}?survey_type={{ template.survey_type }}" class="flex items-center gap-2 px-4 py-2 text-sm text-slate hover:bg-light hover:text-navy transition">
                                    <i data-lucide="list-checks" class="w-4 h-4"></i> {% trans "View Instances" %}
                                </a>
                                <hr class="my-2 border-slate-100">
                                <button type="button" class="delete-btn w-full flex items-center gap-2 px-4 py-2 text-sm text-red-600 hover:bg-red-50 transition" data-template-id="{{ template.pk }}" data-template-name="{{ template.name }}">
                                    <i data-lucide="trash-2" class="w-4 h-4"></i> {% trans "Delete" %}
                                </button>
                            </div>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    {% if page_obj.has_other_pages %}
    <!-- Pagination -->
    <div class="px-6 py-4 border-t border-slate-100">
        <div class="flex items-center justify-between">
            <div class="text-sm text-slate">
                {% trans "Page" %} {{ page_obj.number }} {% trans "of" %} {{ page_obj.paginator.num_pages }}
            </div>
            <nav class="flex gap-2">
                {% if page_obj.has_previous %}
                <a href="?page={{ page_obj.previous_page_number }}" class="px-3 py-2 text-slate hover:text-navy hover:bg-light rounded-lg transition">
                    <i data-lucide="chevron-left" class="w-5 h-5"></i>
                </a>
                {% endif %}
                
                {% for num in page_obj.paginator.page_range %}
                    {% if page_obj.number == num %}
                    <span class="px-4 py-2 bg-light text-navy rounded-lg font-medium">{{ num }}</span>
                    {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                    <a href="?page={{ num }}" class="px-4 py-2 text-slate hover:text-navy hover:bg-light rounded-lg transition">{{ num }}</a>
                    {% endif %}
                {% endfor %}
                
                {% if page_obj.has_next %}
                <a href="?page={{ page_obj.next_page_number }}" class="px-3 py-2 text-slate hover:text-navy hover:bg-light rounded-lg transition">
                    <i data-lucide="chevron-right" class="w-5 h-5"></i>
                </a>
                {% endif %}
            </nav>
        </div>
    </div>
    {% endif %}

    {% else %}
    <!-- Empty State -->
    <div class="text-center py-16">
        <div class="inline-flex items-center justify-center w-20 h-20 bg-slate-100 rounded-full mb-4">
            <i data-lucide="clipboard-list" class="w-10 h-10 text-slate-400"></i>
        </div>
        <h3 class="text-xl font-bold text-navy mb-2">{% trans "No Templates Found" %}</h3>
        <p class="text-slate mb-6">{% trans "Get started by creating your first survey template." %}</p>
        <a href="{% url 'surveys:template_create' %}" class="px-4 py-2.5 bg-navy text-white rounded-xl font-semibold hover:bg-blue transition inline-flex items-center gap-2">
            <i data-lucide="plus" class="w-5 h-5"></i> {% trans "Create Survey Template" %}
        </a>
    </div>
    {% endif %}
</div>

<!-- Delete Confirmation Modal -->
<div id="deleteModal" class="fixed inset-0 z-50 overflow-y-auto hidden">
    <div class="flex items-center justify-center min-h-screen px-4">
        <div class="fixed inset-0 bg-black/50 modal-backdrop"></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-6">
                {% trans "Are you sure you want to delete the survey template" %} "<strong id="deleteTemplateName" class="text-navy"></strong>"?
            </p>
            <p class="text-sm text-slate mb-6">
                {% trans "This will also delete all associated questions and instances." %}
            </p>
            <div class="flex justify-end gap-3">
                <button type="button" id="cancelDelete" class="px-4 py-2 border border-slate-200 text-slate rounded-xl font-semibold hover:bg-light transition">
                    {% trans "Cancel" %}
                </button>
                <form id="deleteForm" method="post" 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" %}
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    lucide.createIcons();
    
    // Dropdown toggle functionality
    document.querySelectorAll('.dropdown-toggle').forEach(function(button) {
        button.addEventListener('click', function(e) {
            e.stopPropagation();
            var dropdownId = this.getAttribute('data-dropdown');
            var dropdown = document.getElementById(dropdownId);
            
            // Close all other dropdowns
            document.querySelectorAll('.dropdown-menu').forEach(function(menu) {
                if (menu.id !== dropdownId) {
                    menu.classList.add('hidden');
                }
            });
            
            // Toggle current dropdown
            dropdown.classList.toggle('hidden');
        });
    });
    
    // Close dropdowns when clicking outside
    document.addEventListener('click', function() {
        document.querySelectorAll('.dropdown-menu').forEach(function(menu) {
            menu.classList.add('hidden');
        });
    });
    
    // Delete modal functionality
    var deleteModal = document.getElementById('deleteModal');
    var deleteForm = document.getElementById('deleteForm');
    var deleteTemplateName = document.getElementById('deleteTemplateName');
    var cancelDelete = document.getElementById('cancelDelete');
    
    document.querySelectorAll('.delete-btn').forEach(function(btn) {
        btn.addEventListener('click', function() {
            var templateId = this.getAttribute('data-template-id');
            var templateName = this.getAttribute('data-template-name');
            
            deleteTemplateName.textContent = templateName;
            deleteForm.action = '/surveys/templates/' + templateId + '/delete/';
            deleteModal.classList.remove('hidden');
            
            // Close the dropdown
            this.closest('.dropdown-menu').classList.add('hidden');
        });
    });
    
    cancelDelete.addEventListener('click', function() {
        deleteModal.classList.add('hidden');
    });
    
    deleteModal.querySelector('.modal-backdrop').addEventListener('click', function() {
        deleteModal.classList.add('hidden');
    });
});
</script>
{% endblock %}