{% extends "base.html" %}

{% block content %}
<div class="container">
    <!-- Title -->
    <h1 class="page-title">Helium Output Yearly Summary</h1>
    <form method="post" action="{% url 'set_halfyear_interval' %}" class="interval-form">
        {% csrf_token %}
        <h3>Global 6-Month Interval</h3>

        <label>Year:</label>
        <select name="year">
            {% for y in available_years %}
                <option value="{{ y }}" {% if y == interval_year %}selected{% endif %}>
                    {{ y }}
                </option>
            {% endfor %}
        </select>

        <label>Start Month:</label>
        <select name="start_month">
            <option value="1"  {% if interval_start_month == 1  %}selected{% endif %}>01</option>
            <option value="2"  {% if interval_start_month == 2  %}selected{% endif %}>02</option>
            <option value="3"  {% if interval_start_month == 3  %}selected{% endif %}>03</option>
            <option value="4"  {% if interval_start_month == 4  %}selected{% endif %}>04</option>
            <option value="5"  {% if interval_start_month == 5  %}selected{% endif %}>05</option>
            <option value="6"  {% if interval_start_month == 6  %}selected{% endif %}>06</option>
            <option value="7"  {% if interval_start_month == 7  %}selected{% endif %}>07</option>
            <option value="8"  {% if interval_start_month == 8  %}selected{% endif %}>08</option>
            <option value="9"  {% if interval_start_month == 9  %}selected{% endif %}>09</option>
            <option value="10" {% if interval_start_month == 10 %}selected{% endif %}>10</option>
            <option value="11" {% if interval_start_month == 11 %}selected{% endif %}>11</option>
            <option value="12" {% if interval_start_month == 12 %}selected{% endif %}>12</option>
        </select>

        <button type="submit">Apply Interval</button>
    </form>


    <!-- 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 %}
            <tr class="total">
    <td><strong>Σ (all clients, selected 6-month interval)</strong></td>

    {% for month in months %}
        <td>-</td>
    {% endfor %}

    <td class="total"><strong>{{ interval_total_output_lhe|floatformat:2 }}</strong></td>
</tr>
        </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>
        <a href="/admin/" class="nav-button admin-button">Go to Admin Panel</a>
        <a href="{% url 'betriebskosten_list' %}" class="nav-button">Betriebskosten</a>

        <a href="{% url 'monthly_sheet' year=2024 month=1 %}" class="nav-button">Monthly Sheets</a>
        <a href="{% url 'halfyear_balance' %}" class="nav-button">Halbjahres Bilanz</a>

        <!-- ✅ NEW -->
        <a href="{% url 'abrechnung' %}" class="nav-button">Abrechnung</a>
        <a href="{% url 'rechnung' %}" class="nav-button">Rechnung</a>
    </div>

</div>

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

    .page-title {
        text-align: center;
        color: #333;
        margin-bottom: 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: 12px;
    margin-top: 30px;
    flex-wrap: wrap;          /* ✅ allow wrapping */
    }
    
    .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;
    }

    .admin-button {
        background-color: #6c757d;
    }
    
    .admin-button:hover {
        background-color: #5a6268;
    }
 .interval-filter {
        margin: 10px 0 25px 0;
        text-align: left;
    }
    .interval-filter h3 {
        margin-bottom: 8px;
    }
    .interval-filter label {
        margin-right: 6px;
    }
    .interval-filter select {
        margin-right: 12px;
        padding: 4px 6px;
    }
    .interval-filter button {
        padding: 6px 12px;
    }
</style>
{% endblock %}