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

{% block title %}{% trans "Report Templates" %}{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-6">
    <!-- Header -->
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-2xl font-bold text-gray-800">{% trans "Report Templates" %}</h1>
            <p class="text-gray-600 text-sm mt-1">{% trans "Pre-built report templates for quick report generation" %}</p>
        </div>
        <a href="{% url 'reports:builder' %}" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition flex items-center gap-2">
            <i data-lucide="plus" class="w-4 h-4"></i>
            {% trans "Custom Report" %}
        </a>
    </div>

    <!-- Template Categories -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- Complaints Templates -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="bg-red-50 px-4 py-3 border-b border-red-100">
                <h3 class="font-semibold text-red-800 flex items-center gap-2">
                    <i data-lucide="file-text" class="w-5 h-5"></i>
                    {% trans "Complaints Reports" %}
                </h3>
            </div>
            <div class="p-4 space-y-3">
                <a href="{% url 'reports:builder' %}?template=complaints_by_department" class="block p-3 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition">
                    <div class="font-medium text-gray-800">{% trans "Complaints by Department" %}</div>
                    <p class="text-xs text-gray-500 mt-1">{% trans "Complaint count and resolution rate per department" %}</p>
                </a>
                <a href="{% url 'reports:builder' %}?template=complaints_by_journey" class="block p-3 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition">
                    <div class="font-medium text-gray-800">{% trans "Complaints by Journey" %}</div>
                    <p class="text-xs text-gray-500 mt-1">{% trans "Complaint distribution across patient journeys" %}</p>
                </a>
                <a href="{% url 'reports:builder' %}?template=complaints_trends" class="block p-3 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition">
                    <div class="font-medium text-gray-800">{% trans "Complaint Trends" %}</div>
                    <p class="text-xs text-gray-500 mt-1">{% trans "Monthly complaint trends and patterns" %}</p>
                </a>
                <a href="{% url 'reports:builder' %}?template=complaints_sla_compliance" class="block p-3 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition">
                    <div class="font-medium text-gray-800">{% trans "SLA Compliance" %}</div>
                    <p class="text-xs text-gray-500 mt-1">{% trans "Resolution time compliance report" %}</p>
                </a>
            </div>
        </div>

        <!-- Inquiries Templates -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="bg-yellow-50 px-4 py-3 border-b border-yellow-100">
                <h3 class="font-semibold text-yellow-800 flex items-center gap-2">
                    <i data-lucide="help-circle" class="w-5 h-5"></i>
                    {% trans "Inquiries Reports" %}
                </h3>
            </div>
            <div class="p-4 space-y-3">
                <a href="{% url 'reports:builder' %}?template=inquiries_by_department" class="block p-3 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition">
                    <div class="font-medium text-gray-800">{% trans "Inquiries by Department" %}</div>
                    <p class="text-xs text-gray-500 mt-1">{% trans "Inquiry volume per department" %}</p>
                </a>
                <a href="{% url 'reports:builder' %}?template=inquiries_response_time" class="block p-3 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition">
                    <div class="font-medium text-gray-800">{% trans "Response Time Analysis" %}</div>
                    <p class="text-xs text-gray-500 mt-1">{% trans "Average response time metrics" %}</p>
                </a>
                <a href="{% url 'reports:builder' %}?template=inquiries_by_source" class="block p-3 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition">
                    <div class="font-medium text-gray-800">{% trans "Inquiries by Source" %}</div>
                    <p class="text-xs text-gray-500 mt-1">{% trans "Distribution by communication channel" %}</p>
                </a>
            </div>
        </div>

        <!-- Surveys Templates -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="bg-green-50 px-4 py-3 border-b border-green-100">
                <h3 class="font-semibold text-green-800 flex items-center gap-2">
                    <i data-lucide="clipboard-list" class="w-5 h-5"></i>
                    {% trans "Survey Reports" %}
                </h3>
            </div>
            <div class="p-4 space-y-3">
                <a href="{% url 'reports:builder' %}?template=survey_satisfaction" class="block p-3 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition">
                    <div class="font-medium text-gray-800">{% trans "Satisfaction Summary" %}</div>
                    <p class="text-xs text-gray-500 mt-1">{% trans "Overall satisfaction scores and trends" %}</p>
                </a>
                <a href="{% url 'reports:builder' %}?template=survey_by_journey" class="block p-3 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition">
                    <div class="font-medium text-gray-800">{% trans "Satisfaction by Journey" %}</div>
                    <p class="text-xs text-gray-500 mt-1">{% trans "Survey results by patient journey type" %}</p>
                </a>
                <a href="{% url 'reports:builder' %}?template=survey_response_rate" class="block p-3 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition">
                    <div class="font-medium text-gray-800">{% trans "Response Rate Report" %}</div>
                    <p class="text-xs text-gray-500 mt-1">{% trans "Survey response rates over time" %}</p>
                </a>
                <a href="{% url 'reports:builder' %}?template=negative_feedback" class="block p-3 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition">
                    <div class="font-medium text-gray-800">{% trans "Negative Feedback Analysis" %}</div>
                    <p class="text-xs text-gray-500 mt-1">{% trans "Detailed negative response breakdown" %}</p>
                </a>
            </div>
        </div>

        <!-- PX Actions Templates -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="bg-purple-50 px-4 py-3 border-b border-purple-100">
                <h3 class="font-semibold text-purple-800 flex items-center gap-2">
                    <i data-lucide="check-square" class="w-5 h-5"></i>
                    {% trans "PX Action Reports" %}
                </h3>
            </div>
            <div class="p-4 space-y-3">
                <a href="{% url 'reports:builder' %}?template=actions_status" class="block p-3 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition">
                    <div class="font-medium text-gray-800">{% trans "Action Status Overview" %}</div>
                    <p class="text-xs text-gray-500 mt-1">{% trans "Current status of all PX actions" %}</p>
                </a>
                <a href="{% url 'reports:builder' %}?template=actions_by_department" class="block p-3 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition">
                    <div class="font-medium text-gray-800">{% trans "Actions by Department" %}</div>
                    <p class="text-xs text-gray-500 mt-1">{% trans "PX actions assigned to each department" %}</p>
                </a>
                <a href="{% url 'reports:builder' %}?template=actions_overdue" class="block p-3 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition">
                    <div class="font-medium text-gray-800">{% trans "Overdue Actions" %}</div>
                    <p class="text-xs text-gray-500 mt-1">{% trans "List of overdue action items" %}</p>
                </a>
            </div>
        </div>

        <!-- Observations Templates -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="bg-orange-50 px-4 py-3 border-b border-orange-100">
                <h3 class="font-semibold text-orange-800 flex items-center gap-2">
                    <i data-lucide="eye" class="w-5 h-5"></i>
                    {% trans "Observation Reports" %}
                </h3>
            </div>
            <div class="p-4 space-y-3">
                <a href="{% url 'reports:builder' %}?template=observations_by_type" class="block p-3 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition">
                    <div class="font-medium text-gray-800">{% trans "Observations by Type" %}</div>
                    <p class="text-xs text-gray-500 mt-1">{% trans "Distribution by observation category" %}</p>
                </a>
                <a href="{% url 'reports:builder' %}?template=observations_trends" class="block p-3 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition">
                    <div class="font-medium text-gray-800">{% trans "Observation Trends" %}</div>
                    <p class="text-xs text-gray-500 mt-1">{% trans "Monthly observation patterns" %}</p>
                </a>
                <a href="{% url 'reports:builder' %}?template=observations_by_location" class="block p-3 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition">
                    <div class="font-medium text-gray-800">{% trans "Observations by Location" %}</div>
                    <p class="text-xs text-gray-500 mt-1">{% trans "Observations grouped by area/ward" %}</p>
                </a>
            </div>
        </div>

        <!-- Performance Templates -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="bg-blue-50 px-4 py-3 border-b border-blue-100">
                <h3 class="font-semibold text-blue-800 flex items-center gap-2">
                    <i data-lucide="trending-up" class="w-5 h-5"></i>
                    {% trans "Performance Dashboards" %}
                </h3>
            </div>
            <div class="p-4 space-y-3">
                <a href="{% url 'reports:builder' %}?template=dept_performance" class="block p-3 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition">
                    <div class="font-medium text-gray-800">{% trans "Department Performance" %}</div>
                    <p class="text-xs text-gray-500 mt-1">{% trans "KPI dashboard for departments" %}</p>
                </a>
                <a href="{% url 'reports:builder' %}?template=resolution_time" class="block p-3 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition">
                    <div class="font-medium text-gray-800">{% trans "Resolution Time Analysis" %}</div>
                    <p class="text-xs text-gray-500 mt-1">{% trans "Average resolution time metrics" %}</p>
                </a>
                <a href="{% url 'reports:builder' %}?template=monthly_summary" class="block p-3 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition">
                    <div class="font-medium text-gray-800">{% trans "Monthly Summary" %}</div>
                    <p class="text-xs text-gray-500 mt-1">{% trans "Overall monthly performance summary" %}</p>
                </a>
            </div>
        </div>
    </div>

    <!-- Back Link -->
    <div class="mt-6">
        <a href="{% url 'reports:saved_reports' %}" class="text-blue-600 hover:text-blue-800 flex items-center gap-2">
            <i data-lucide="arrow-left" class="w-4 h-4"></i>
            {% trans "Back to Saved Reports" %}
        </a>
    </div>
</div>
{% endblock %}