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

{% block title %}{% trans "Survey Templates" %} - PX360{% endblock %}

{% block extra_css %}
<style>
.page-header-gradient {
    background: linear-gradient(135deg, #005696 0%, #0069a8 50%, #007bbd 100%);
    color: white;
    padding: 1.5rem 2rem;
    border-radius: 1rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 86, 150, 0.2);
}

.section-card {
    background: white;
    border-radius: 1rem;
    border: 2px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
}
.section-card:hover {
    border-color: #005696;
    box-shadow: 0 10px 25px -5px rgba(0, 86, 150, 0.15);
}

.section-header {
    padding: 1rem 1.5rem;
    border-bottom: 2px solid #e2e8f0;
    background: linear-gradient(to right, #f8fafc, #f1f5f9);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.section-icon {
    width: 40px;
    height: 40px;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
{% endblock %}

{% block content %}
<!-- Page Header -->
<div class="page-header-gradient">
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
        <div>
            <h1 class="text-2xl font-bold flex items-center gap-3">
                <div class="section-icon bg-white/20">
                    <i data-lucide="file-text" class="w-6 h-6 text-white"></i>
                </div>
                {% trans "Survey Templates" %}
            </h1>
            <p class="text-white/80 mt-2">{% trans "Create and manage survey templates with questions" %}</p>
        </div>
        <a href="{% url 'surveys:template_create' %}" class="px-4 py-2.5 bg-white text-[#005696] rounded-xl font-semibold hover:bg-white/90 transition flex items-center gap-2 shadow-lg">
            <i data-lucide="plus" class="w-5 h-5"></i> {% trans "Create Survey Template" %}
        </a>
    </div>
</div>

<!-- Templates List -->
<div class="section-card">
    <div class="section-header">
        <div class="section-icon bg-blue-100">
            <i data-lucide="layout-template" class="w-5 h-5 text-blue-600"></i>
        </div>
        <h3 class="font-bold text-navy">{% trans "Templates" %}</h3>
    </div>

    {% 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 tmpl in templates %}
                <tr class="hover:bg-light/30 transition">
                    <td class="px-6 py-4">
                        <span class="font-semibold text-navy">{{ tmpl.name }}</span>
                    </td>
                    <td class="px-6 py-4">
                        <span class="px-2.5 py-1 rounded-lg text-xs font-bold
                            {% if tmpl.survey_type == 'stage' %}bg-blue-100 text-blue-700
                            {% elif tmpl.survey_type == 'complaint_resolution' %}bg-red-100 text-red-700
                            {% elif tmpl.survey_type == 'nps' %}bg-green-100 text-green-700
                            {% else %}bg-slate-100 text-slate-700{% endif %}">
                            {{ tmpl.get_survey_type_display }}
                        </span>
                    </td>
                    <td class="px-6 py-4">
                        <span class="text-sm text-slate">{{ tmpl.hospital|default:"—" }}</span>
                    </td>
                    <td class="px-6 py-4">
                        <span class="font-semibold text-slate">{{ tmpl.questions_count|default:0 }}</span>
                    </td>
                    <td class="px-6 py-4">
                        <span class="px-2.5 py-1 rounded-lg text-xs font-bold bg-purple-100 text-purple-700">{{ tmpl.get_scoring_method_display }}</span>
                    </td>
                    <td class="px-6 py-4">
                        {% if tmpl.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-{{ tmpl.pk }}">
                                <i data-lucide="more-horizontal" class="w-5 h-5"></i>
                            </button>
                            <div id="dropdown-{{ tmpl.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' tmpl.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' tmpl.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>
                                <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="{{ tmpl.pk }}" data-template-name="{{ tmpl.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 %}
    <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 %}
    <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="file-text" class="w-10 h-10 text-slate-400"></i>
        </div>
        <h3 class="text-xl font-bold text-navy mb-2">{% trans "No Survey 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>
            <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();

    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);

            document.querySelectorAll('.dropdown-menu').forEach(function(menu) {
                if (menu.id !== dropdownId) {
                    menu.classList.add('hidden');
                }
            });

            dropdown.classList.toggle('hidden');
        });
    });

    document.addEventListener('click', function() {
        document.querySelectorAll('.dropdown-menu').forEach(function(menu) {
            menu.classList.add('hidden');
        });
    });

    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');

            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 %}