{% extends "base.html" %}

{% block content %}
<div class="container">
    <!-- Year Filter -->
    <div class="year-filter">
        <label for="year-select">Year:</label>
        <select id="year-select" onchange="window.location.href='?year='+this.value">
            {% for year in available_years %}
                <option value="{{ year }}" {% if year == current_year %}selected{% endif %}>
                    {{ year }}
                </option>
            {% endfor %}
        </select>
    </div>

    <!-- Annual Summary Table -->
    <table class="summary-table">
        <thead>
            <tr>
                <th>Client</th>
                {% for month in months %}
                    <th>{{ month }}</th>
                {% endfor %}
                <th>Total</th>
            </tr>
        </thead>
        <tbody>
            {% for data in monthly_data %}
                <tr>
                    <td>{{ data.client.name }}</td>
                    {% for total in data.monthly_totals %}
                        <td>{{ total|floatformat:2 }}</td>
                    {% endfor %}
                    <td class="total">{{ data.year_total|floatformat:2 }}</td>
                </tr>
            {% endfor %}
        </tbody>
    </table>

    <!-- Navigation Buttons -->
    <div class="navigation-buttons">
        <a href="{% url 'table_one' %}" class="nav-button">
            Go to Helium Input
        </a>
        <a href="{% url 'table_two' %}" class="nav-button">
            Go to Helium Output
        </a>
    </div>
</div>

<style>
    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
    }

    .year-filter {
        margin: 20px 0;
        text-align: right;
    }
    
    .year-filter label {
        margin-right: 10px;
    }
    
    .year-filter select {
        padding: 5px;
        border-radius: 4px;
        border: 1px solid #ddd;
    }

    .summary-table {
        width: 100%;
        border-collapse: collapse;
        margin: 20px 0;
    }
    
    .summary-table th, .summary-table td {
        padding: 10px;
        text-align: center;
        border: 1px solid #ddd;
    }
    
    .summary-table th {
        background-color: #007bff;
        color: white;
    }
    
    .summary-table tr:nth-child(even) {
        background-color: #f9f9f9;
    }
    
    .summary-table tr:hover {
        background-color: #f1f1f1;
    }
    
    .total {
        font-weight: bold;
        background-color: #e6f2ff;
    }

    .navigation-buttons {
        display: flex;
        justify-content: center;
        gap: 20px;
        margin-top: 30px;
    }
    
    .nav-button {
        padding: 12px 24px;
        background-color: #007bff;
        color: white;
        text-decoration: none;
        border-radius: 4px;
        transition: background-color 0.3s;
    }
    
    .nav-button:hover {
        background-color: #0056b3;
    }
</style>
{% endblock %}