{% extends "base.html" %}

{% block content %}
<div class="spreadsheet-container">

    <style>
        .spreadsheet-container {
            padding: 20px;
        }

        .sheet-navigation {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding: 10px;
            background-color: #f8f9fa;
            border-radius: 5px;
        }

        .sheet-navigation h2 {
            margin: 0;
            font-size: 20px;
            font-weight: bold;
        }

        .sheet-navigation a,
        .sheet-navigation span {
            text-decoration: none;
            color: #007bff;
            font-weight: bold;
        }

        .sheet-navigation .disabled-link {
            color: #aaa;
            cursor: default;
        }
        .indent {
            padding-left: 18px;
            font-weight: bold;
            text-align: center;
            width: 60px;
        }
        .top-tables {
            display: flex;
            gap: 20px;
            align-items: flex-start;
        }

        .table-container {
            flex: 1;
            background-color: #ffffff;
            border-radius: 5px;
            padding: 10px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

        .table-container h3 {
            margin-top: 0;
            margin-bottom: 10px;
            font-size: 16px;
        }

        .sheet-table,
        .spreadsheet-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
        }

        .sheet-table th,
        .sheet-table td,
        .spreadsheet-table th,
        .spreadsheet-table td {
            border: 1px solid #dee2e6;
            padding: 4px 6px;
        }

        .sheet-table th,
        .spreadsheet-table th {
            background-color: #f2f2f2;
            font-weight: bold;
            text-align: center;
        }

        .row-label {
            background-color: #f9f9f9;
            font-weight: bold;
            white-space: nowrap;
        }

        .number-cell {
            text-align: right;
            white-space: nowrap;
        }

        .sheet-table tbody tr:nth-child(even),
        .spreadsheet-table tbody tr:nth-child(even) {
            background-color: #fcfcfc;
        }

        .sheet-table tbody tr:hover,
        .spreadsheet-table tbody tr:hover {
            background-color: #f1f3f5;
        }

        .summary-row {
            font-weight: bold;
            background-color: #e8f4f8;
        }
    </style>

    <div class="sheet-navigation">
        <a href="{% url 'clients_list' %}">&larr; Helium Output Übersicht</a>
        <h2>
            {% with first=window.0 last=window|last %}
                Halbjahres-Bilanz ({{ first.1 }}/{{ first.0 }} – {{ last.1 }}/{{ last.0 }})
            {% endwith %}
        </h2>
        {% with first=window.0 %}
            <a href="{% url 'monthly_sheet' first.0 first.1 %}">Monatsblätter</a>
        {% endwith %}
    </div>

    <div class="top-tables">
        <!-- LEFT TABLE (Top Left – AG Vogel / AG Halfm / IKP) -->
        <div class="table-container">
            <h3>Top Left – Halbjahresbilanz</h3>
            <table class="sheet-table spreadsheet-table">
                <thead>
                <tr>
                    <th>Bezeichnung</th>
                    {% for c in clients_left %}
                        <th>{{ c }}</th>
                    {% endfor %}
                    <th>&Sigma;</th>
                </tr>
                </thead>
                <tbody>
                {% for row in rows_left %}
                    <tr>
                        <td>{{ row.label }}</td>
                        {% for v in row.values %}
                            <td class="number-cell">
                                {% if row.is_percent and v is not None %}
                                    {{ v|floatformat:4 }}
                                {% elif v is not None %}
                                    {{ v|floatformat:2 }}
                                {% endif %}
                            </td>
                        {% endfor %}
                        <td class="number-cell">
                            {% if row.is_percent and row.total %}
                                {{ row.total|floatformat:4 }}
                            {% elif row.total is not None %}
                                {{ row.total|floatformat:2 }}
                            {% endif %}
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- RIGHT TABLE (Top Right – Dr. Fohrer / AG Buntk. / etc.) -->
        <div class="table-container">
            <h3>Top Right – Halbjahresbilanz</h3>
            <table class="sheet-table spreadsheet-table">
                <thead>
                <tr>
                    <th>Bezeichnung</th>
                    {% for c in clients_right %}
                        <th>{{ c }}</th>
                    {% endfor %}
                    <th>&Sigma;</th>
                </tr>
                </thead>
                <tbody>
                {% for row in rows_right %}
                    <tr>
                        <td>{{ row.label }}</td>
                        {% for v in row.values %}
                            <td class="number-cell">
                                {% if row.is_text_row %}
                                    {{ v }}
                                {% elif row.is_percent and v is not None %}
                                    {{ v|floatformat:4 }}
                                {% elif v is not None %}
                                    {{ v|floatformat:2 }}
                                {% endif %}
                            </td>
                        {% endfor %}
                        <td class="number-cell">
                            {% if row.is_text_row %}
                                {{ row.total }}
                            {% elif row.is_percent and row.total %}
                                {{ row.total|floatformat:4 }}
                            {% elif row.total is not None %}
                                {{ row.total|floatformat:2 }}
                            {% endif %}
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
         <div class="table-container overall-summary-table">
            <h3>Summe</h3>
            <table class="sheet-table spreadsheet-table">
            <thead>
                <tr>
                <th>Bezeichnung</th>
                <th>Σ</th>
                <th>Licht-wiese</th>
                <th>Chemie</th>
                <th>MaWi</th>
                <th>M3</th>
                </tr>
            </thead>
            <tbody>
                {% for r in rows_sum %}
                <tr data-row-index="{{ r.row_index }}">
                <tr>
                <td>{{ r.label }}</td>
                <td class="sum-col sum-cell">
                    {% if r.is_percent %}
                        {{ r.total|floatformat:2 }}%
                    {% else %}
                        {{ r.total|floatformat:2 }}
                    {% endif %}
                </td>

                <td class="sum-col">
                    {% if r.is_percent %}
                        {{ r.lichtwiese|floatformat:2 }}%
                    {% else %}
                        {{ r.lichtwiese|floatformat:2 }}
                    {% endif %}
                </td>

                <td class="sum-col">
                    {% if r.is_percent %}
                        {{ r.chemie|floatformat:2 }}%
                    {% else %}
                        {{ r.chemie|floatformat:2 }}
                    {% endif %}
                </td>

                <td class="sum-col">
                    {% if r.is_percent %}
                        {{ r.mawi|floatformat:2 }}%
                    {% else %}
                        {{ r.mawi|floatformat:2 }}
                    {% endif %}
                </td>

                <td class="sum-col">
                    {% if r.is_percent %}
                        {{ r.m3|floatformat:2 }}%
                    {% else %}
                        {{ r.m3|floatformat:2 }}
                    {% endif %}
                </td>
                </tr>
                {% endfor %}
            </tbody>
            </table>
        </div>
        <div class="table-container" style="margin-top: 20px;">
            <h3>Bottom Table 1 – Bilanz (read-only)</h3>

            <table class="sheet-table spreadsheet-table">
                <thead>
                <tr>
                    <th>Gasspeicher</th>
                    <th>Volumen</th>
                    <th>bar</th>
                    <th>korrigiert</th>
                    <th>Nm³</th>
                    <th>Lit. LHe</th>
                </tr>
                </thead>

                <tbody>
                {% for r in bottom1_rows %}
                <tr class="{% if r.is_total %}summary-row{% endif %}">
                    <td class="row-label {% if r.indent %}indent{% endif %}">{{ r.label }}</td>
                    <td class="number-cell">{{ r.volume|floatformat:1 }}</td>
                    <td class="number-cell">{{ r.bar|floatformat:0 }}</td>
                    <td class="number-cell">{{ r.korr|floatformat:1 }}</td>
                    <td class="number-cell">{{ r.nm3|floatformat:0 }}</td>
                    <td class="number-cell">{{ r.lhe|floatformat:0 }}</td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
            <div class="table-container bottom-table-2">
                <h3>Bottom Table 2 – Verbraucherbestand L-He (read-only)</h3>

                <table class="sheet-table spreadsheet-table">
                    <tbody>
                    <!-- Row 38 -->
                    <tr>
                        <td class="row-label" colspan="5">Verbraucherbestand</td>
                        <td class="readonly-cell">{{ bottom2.j38|floatformat:2 }}</td>
                        <td class="readonly-cell">{{ bottom2.k38|floatformat:2 }}</td>
                    </tr>

                    <!-- Row 39 -->
                    <tr>
                        <td class="row-label">+ Anlage:</td>
                        <td>Gefäss 2,5:</td>
                        <td class="readonly-cell">{{ bottom2.g39|floatformat:2 }}</td>
                        <td>Gefäss 1,0:</td>
                        <td class="readonly-cell">{{ bottom2.i39|floatformat:2 }}</td>
                        <td class="readonly-cell">{{ bottom2.j39|floatformat:2 }}</td>
                        <td class="readonly-cell">{{ bottom2.k39|floatformat:2 }}</td>
                    </tr>

                    <!-- Row 40 -->
                    <tr>
                        <td class="row-label">+ Kaltgas:</td>
                        <td>Gefäss 2,5:</td>
                        <td class="readonly-cell">{{ bottom2.g40|default_if_none:""|floatformat:2 }}</td>
                        <td>Gefäss 1,0:</td>
                        <td class="readonly-cell">{{ bottom2.i40|default_if_none:""|floatformat:2 }}</td>
                        <td class="readonly-cell">{{ bottom2.j40|floatformat:2 }}</td>
                        <td class="readonly-cell">{{ bottom2.k40|floatformat:2 }}</td>
                    </tr>

                    <!-- Row 43 -->
                    <tr>
                        <td class="row-label" colspan="5">Bestand flüssig He</td>
                        <td class="readonly-cell">{{ bottom2.j43|floatformat:2 }}</td>
                        <td class="readonly-cell">{{ bottom2.k43|floatformat:2 }}</td>
                    </tr>

                    <!-- Row 44 -->
                    <tr>
                        <td class="row-label" colspan="5">Gesamtbestand neu:</td>
                        <td class="readonly-cell">{{ bottom2.j44|floatformat:2 }}</td>
                        <td class="readonly-cell">{{ bottom2.k44|floatformat:2 }}</td>
                    </tr>
                    </tbody>
                </table>
            </div>

         </div>

    
    </div>
</div>  {# closes .spreadsheet-container #}
{% endblock %}