{% extends "wiki/article.html" %}
{% load i18n %}
{% load wiki_tags %}
{% load static %}

{% block wiki_contents_tab %}
<div class="bg-white rounded-lg shadow-md p-6">
    <h2 class="text-2xl font-bold mb-6">{% trans "Park Statistics" %}</h2>

    <!-- Add New Statistics -->
    <div class="mb-8">
        <h3 class="text-lg font-semibold mb-4">{% trans "Add New Statistics" %}</h3>
        <form method="POST" class="bg-gray-50 p-4 rounded-lg">
            {% csrf_token %}
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div class="form-group">
                    {{ form.year.label_tag }}
                    {{ form.year }}
                    {{ form.year.errors }}
                </div>
                <div class="form-group">
                    {{ form.attendance.label_tag }}
                    {{ form.attendance }}
                    {{ form.attendance.errors }}
                </div>
                <div class="form-group">
                    {{ form.revenue.label_tag }}
                    {{ form.revenue }}
                    {{ form.revenue.errors }}
                </div>
                <div class="form-group">
                    {{ form.investment.label_tag }}
                    {{ form.investment }}
                    {{ form.investment.errors }}
                </div>
            </div>
            <div class="mt-4 flex justify-end">
                <button type="submit" 
                        class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
                    {% trans "Add Statistics" %}
                </button>
            </div>
        </form>
    </div>

    <!-- Statistics History -->
    <div>
        <h3 class="text-lg font-semibold mb-4">{% trans "Historical Statistics" %}</h3>
        {% if statistics %}
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                {% trans "Year" %}
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                {% trans "Attendance" %}
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                {% trans "Revenue" %}
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                {% trans "Investment" %}
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                {% trans "Actions" %}
                            </th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        {% for stat in statistics %}
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                {{ stat.year }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{ stat.attendance|default:"-" }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {% if stat.revenue %}
                                    ${{ stat.revenue }}
                                {% else %}
                                    -
                                {% endif %}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {% if stat.investment %}
                                    ${{ stat.investment }}
                                {% else %}
                                    -
                                {% endif %}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                <form method="POST" action="{% url 'wiki:parks_delete_statistic' article.id stat.id %}"
                                      class="inline-block">
                                    {% csrf_token %}
                                    <button type="submit" 
                                            class="text-red-600 hover:text-red-900"
                                            onclick="return confirm('{% trans "Are you sure you want to delete this statistic?" %}')">
                                        {% trans "Delete" %}
                                    </button>
                                </form>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <p class="text-gray-500 italic">{% trans "No statistics available." %}</p>
        {% endif %}
    </div>

    <!-- Back to Article -->
    <div class="mt-8">
        <a href="{% url 'wiki:get' path=article.get_absolute_url %}" 
           class="inline-block px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">
            {% trans "Back to Article" %}
        </a>
    </div>
</div>
{% endblock %}

{% block wiki_footer_script %}
{{ block.super }}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Auto-fill current year if empty
        const yearInput = document.getElementById('id_year');
        if (yearInput && !yearInput.value) {
            yearInput.value = new Date().getFullYear();
        }

        // Format number inputs
        const numberInputs = document.querySelectorAll('input[type="number"]');
        numberInputs.forEach(input => {
            input.addEventListener('blur', function() {
                if (this.value) {
                    this.value = parseInt(this.value).toLocaleString();
                }
            });
        });
    });
</script>
{% endblock %}