{% extends 'base.html' %}

{% block title %}Mietrechner{% endblock %}

{% block content %}
<h1 class="mb-4">Mietrechner</h1>

<div class="alert alert-info info-text">
    <i class="fas fa-info-circle"></i>
    Bei allen Werten handelt es sich um den Durchschnitt der letzten 12 Monate seit dem Erfassungsdatum ({{ datum }}).</br>
    <small>Wir haben, neben den Regelmäßigen Ausgaben auch andere Ausgaben, wie z.B. den Einkauf von Werkzeugen o.ä., welche hier nicht aufgelistet sind. Diese lassen sich aber in den Kassenberichten und im Monitoring nachvollziehen.</small>
</div>

<h2 class="mt-4 mb-3">Ist-Situation</h2>

<div class="row">
    <div class="col-md-6 mb-4">
        <h3><i class="fas fa-arrow-circle-down text-success"></i> Regelmäßige Einnahmen</h3>
        <table class="table table-striped table-einnahmen">
            <thead>
                <tr>
                    <th>Kategorie</th>
                    <th class="betrag">Betrag</th>
                </tr>
            </thead>
            <tbody>
                {% for item in einnahmen %}
                <tr>
                    <td>{{ item.name }}</td>
                    <td class="betrag">{{ item.betrag|euro }}</td>
                </tr>
                {% endfor %}
            </tbody>
            <tfoot>
                <tr>
                    <th>Summe Einnahmen</th>
                    <td class="betrag summe"><strong>{{ summe_einnahmen|euro }}</strong></td>
                </tr>
            </tfoot>
        </table>
    </div>

    <div class="col-md-6 mb-4">
        <h3><i class="fas fa-arrow-circle-up text-danger"></i> Regelmäßige Ausgaben</h3>
        <table class="table table-striped table-ausgaben">
            <thead>
                <tr>
                    <th>Kategorie</th>
                    <th class="betrag">Betrag</th>
                </tr>
            </thead>
            <tbody>
                {% for item in ausgaben %}
                <tr>
                    <td>{{ item.name }}</td>
                    <td class="betrag">{{ item.betrag|euro }}</td>
                </tr>
                {% endfor %}
            </tbody>
            <tfoot>
                <tr>
                    <th>Summe Ausgaben</th>
                    <td class="betrag summe"><strong>{{ summe_ausgaben|euro }}</strong></td>
                </tr>
            </tfoot>
        </table>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <table class="table table-saldo">
            <tr class="{% if saldo >= 0 %}saldo-positiv{% else %}saldo-negativ{% endif %}">
                <th>Monatlicher Saldo</th>
                <td class="betrag">
                    {% if saldo >= 0 %}
                    <i class="fas fa-check-circle text-success"></i>
                    {% else %}
                    <i class="fas fa-exclamation-triangle text-danger"></i>
                    {% endif %}
                    {{ saldo|euro }}
                </td>
            </tr>
        </table>
    </div>
</div>

<div class="alert alert-info info-text">
    <i class="fas fa-info-circle"></i>
    <small>Die Spenden beinhalten gut 1.000 € Spenden für den Einkauf von Transpondern im Jahr 2025.</small>
</div>

<div class="row mt-3">
    <div class="col-md-6">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title"><i class="fas fa-users"></i> Mitglieder-Entwicklung pro Jahr</h5>
                <table class="table table-sm mb-0">
                    <tr>
                        <td><i class="fas fa-user-plus text-success"></i> Neue Mitglieder</td>
                        <td class="text-right"><strong>{{ mitglieder_eintritte }}</strong></td>
                    </tr>
                    <tr>
                        <td><i class="fas fa-user-minus text-danger"></i> Austretende Mitglieder</td>
                        <td class="text-right"><strong>{{ mitglieder_austritte }}</strong></td>
                    </tr>
                    <tr class="{% if mitglieder_eintritte - mitglieder_austritte >= 0 %}table-success{% else %}table-danger{% endif %}">
                        <td><strong>Netto-Entwicklung</strong></td>
                        <td class="text-right"><strong>{{ mitglieder_eintritte - mitglieder_austritte }}</strong></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>

<hr class="my-5">

<div class="card mb-4" style="background-color: #f8f9fa;">
    <div class="card-body">
        <h5 class="card-title"><i class="fas fa-link"></i> Wichtige Links</h5>
        <p class="small">Um ein detailliertes Verständnis für unsere Finanzen zu erlangen gibt es verschiedene Ressourcen, welche euch helfen können.</p>
        <ul class="mb-0">
            <li><a href="https://monitoring.chaotikum.org/goto/ef958b354vh1ce?orgId=1" target="_blank">Im Monitoring könnt ihr die Finanzlage über die Jahre, Monat für Monat, dynamisch darstellen</a></li>
            <li><a href="https://wiki.chaotikum.org/offizielles:protokolle:mitgliederversammlung" target="_blank">In den Wiki-Seiten der Mitgliederversammlungen sind jeweils Kassenberichte und Kassenprüfberichte vorhanden. Diese geben eine detaillierte Aufstellung zum Ende des Jahres.</a></li>
        </ul>
    </div>
</div>

<h2 class="mb-3" id="plan">
    <i class="fas fa-truck-moving"></i> Umzug Planen
    <a href="#plan" class="text-muted ms-2" style="font-size: 0.6em; text-decoration: none;" onclick="copyAnchorLink(event, 'plan')" title="Link kopieren">
        <i class="fas fa-link"></i>
    </a>
</h2>
<p>Im nachfolgenden könnt ihr Szenarien auswählen und nach belieben Verändern und damit prüfen, welche Möglichkeiten für einen Umzug wir eurer Meining nach haben.</p>

<div class="card mb-4">
    <div class="card-body">
        <h5 class="card-title"><i class="fas fa-folder-open"></i> Szenario laden</h5>
        <p class="text-muted small">Wähle ein vordefiniertes Szenario als Ausgangspunkt für die Planung.</p>
        <div class="btn-group flex-wrap" role="group">
            {% for scenario in scenarios %}
            <button type="button" class="btn btn-outline-primary scenario-btn{% if scenario.id == default_scenario_id %} active{% endif %}" data-scenario="{{ scenario.id }}" title="{{ scenario.beschreibung }}">
                {{ scenario.name }}
            </button>
            {% endfor %}
        </div>
        <div class="mt-3">
            <small class="text-muted">
                <i class="fas fa-link"></i> Link zu diesem Szenario: 
                <a href="#" id="scenario-link" class="text-primary" onclick="copyScenarioLink(event)">
                    <span id="scenario-link-text"></span>
                    <i class="fas fa-copy ms-1"></i>
                </a>
            </small>
        </div>
    </div>
</div>

<div class="card mb-4">
    <div class="card-body">
        <h5 class="card-title">Umzug</h5>
        <div id="scenario-info" style="display: {% if default_scenario.name %}block{% else %}none{% endif %};" class="alert alert-info mb-3">
            <strong id="scenario-name">{{ default_scenario.name }}</strong>
            <p id="scenario-description" class="mb-0 mt-2 small">{{ default_scenario.beschreibung }}</p>
        </div>
        <div class="form-group row">
            <label for="umzugsdatum" class="col-sm-4 col-form-label">Umzugsdatum</label>
            <div class="col-sm-4">
                <input type="date" class="form-control" id="umzugsdatum" value="{{ default_scenario.umzugsdatum }}">
            </div>
        </div>
        <div class="form-group row">
            <label for="mitgliederzahl" class="col-sm-4 col-form-label">Mitgliederzahl</label>
            <div class="col-sm-4">
                <input type="number" class="form-control" id="mitgliederzahl" value="{{ default_scenario.mitgliederzahl|default(92) }}" min="1">
            </div>
        </div>
        <div class="form-group row">
            <label for="monate-doppelmiete" class="col-sm-4 col-form-label">Monate Doppelmiete</label>
            <div class="col-sm-4">
                <div class="input-group">
                    <input type="number" class="form-control" id="monate-doppelmiete" value="{{ default_scenario.monate_doppelmiete|default(3) }}" min="0" max="12">
                    <div class="input-group-append">
                        <span class="input-group-text">Monate</span>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <small class="text-muted">Aktuelle Miete mit Nebenkosten: {{ "%.2f"|format((ausgaben|selectattr('name', 'equalto', 'Miete')|map(attribute='betrag')|first|default(0)) + (ausgaben|selectattr('name', 'equalto', 'Nebenkosten')|map(attribute='betrag')|first|default(0))) }} €</small>
            </div>
        </div>
        <div class="form-group row">
            <label for="umzugskosten" class="col-sm-4 col-form-label">Einmalige Kosten</label>
            <div class="col-sm-4">
                <div class="input-group">
                    <input type="number" class="form-control" id="umzugskosten" value="{{ default_scenario.umzugskosten }}" step="0.01" min="0">
                    <div class="input-group-append">
                        <span class="input-group-text">€</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group row">
            <label for="inflation-rate" class="col-sm-4 col-form-label">Inflationsrate</label>
            <div class="col-sm-4">
                <div class="input-group">
                    <input type="number" class="form-control" id="inflation-rate" value="2.5" step="0.1" min="0" max="20">
                    <div class="input-group-append">
                        <span class="input-group-text">%</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group row">
            <div class="col-sm-4"></div>
            <div class="col-sm-8">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="inflate-membership-fees" value="" {% if default_scenario.inflate_membership_fees %}checked{% endif %}>
                    <label class="form-check-label" for="inflate-membership-fees">
                        Mitgliedsbeiträge erhöhen sich jährlich
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group row {% if not default_scenario.inflate_membership_fees %}d-none{% endif %}" id="membership-fee-increase-row">
            <label for="membership-fee-increase" class="col-sm-4 col-form-label">Beitragssteigerung</label>
            <div class="col-sm-4">
                <div class="input-group">
                    <input type="number" class="form-control" id="membership-fee-increase" value="{{ default_scenario.membership_fee_increase|default(2.5) }}" step="0.1" min="0" max="20">
                    <div class="input-group-append">
                        <span class="input-group-text">%</span>
                    </div>
                </div>
            </div>
            <div class="col-sm-4"></div>
        </div>
        <p class="text-muted small mb-0">Alle Kosten steigen jährlich um die Inflationsrate (Erhöhung im Januar).</p>
    </div>
</div>

<div class="card mb-4">
    <div class="card-body">
        <h5 class="card-title"><i class="fas fa-users"></i> Geplante Mitglieder-Entwicklung pro Jahr</h5>
        <div class="form-group row mb-2">
            <label for="plan-eintritte" class="col-sm-8 col-form-label"><i class="fas fa-user-plus text-success"></i> Neue Mitglieder</label>
            <div class="col-sm-4">
                <input type="number" class="form-control form-control-sm" id="plan-eintritte" value="{{ default_scenario.mitglieder_eintritte }}" min="0">
            </div>
        </div>
        <div class="form-group row mb-2">
            <label for="plan-austritte" class="col-sm-8 col-form-label"><i class="fas fa-user-minus text-danger"></i> Austretende Mitglieder</label>
            <div class="col-sm-4">
                <input type="number" class="form-control form-control-sm" id="plan-austritte" value="{{ default_scenario.mitglieder_austritte }}" min="0">
            </div>
        </div>
        <div class="form-group row mb-2">
            <label class="col-sm-8 col-form-label"><strong>Netto-Entwicklung</strong></label>
            <div class="col-sm-4">
                <span class="form-control-plaintext text-right" id="plan-netto-mitglieder"><strong>0</strong></span>
            </div>
        </div>
        <div class="form-group row mb-0">
            <label for="plan-max-mitglieder" class="col-sm-8 col-form-label"><i class="fas fa-users-cog text-info"></i> Maximum Mitglieder</label>
            <div class="col-sm-4">
                <input type="number" class="form-control form-control-sm" id="plan-max-mitglieder" value="{{ default_scenario.mitglieder_maximum|default(140) }}" min="1">
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-6 mb-4">
        <h3><i class="fas fa-arrow-circle-down text-success"></i> Geplante Einnahmen</h3>
        <table class="table table-striped table-einnahmen" id="plan-einnahmen-table">
            <thead>
                <tr>
                    <th>Kategorie</th>
                    <th class="betrag" style="width: 130px;">Betrag</th>
                    <th style="width: 200px;">Dauer</th>
                    <th style="width: 50px;"></th>
                </tr>
            </thead>
            <tbody id="plan-einnahmen-body">
                {% for item in default_scenario.einnahmen %}
                {% set config_value = einnahmen|selectattr('name', 'equalto', item.name)|map(attribute='betrag')|first|default(none) %}
                <tr data-config-value="{{ config_value if config_value is not none else '' }}" data-item-name="{{ item.name }}">
                    <td>
                        {{ item.name }}
                        <div class="value-warning" style="display: none;">
                            <small class="text-warning"><i class="fas fa-exclamation-triangle"></i></small>
                            <small class="text-muted warning-text"></small>
                        </div>
                    </td>
                    <td class="betrag">
                        <div class="input-group input-group-sm">
                            <input type="number" class="form-control plan-einnahme" value="{{ item.betrag }}" step="0.01" min="0">
                            <div class="input-group-append">
                                <span class="input-group-text">€{% if item.name == 'Getränke- und Snackverkauf' or item.name == 'Merch-Verkauf' %}*{% endif %}</span>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="d-flex align-items-center">
                            <select class="form-control form-control-sm dauer-select dauer-einnahme" style="width: auto;">
                                <option value="kontinuierlich" {% if not item.dauer or item.dauer == 'kontinuierlich' %}selected{% endif %}>kontinuierlich</option>
                                <option value="kontinuierlich_inflationsangepasst" {% if item.dauer == 'kontinuierlich_inflationsangepasst' %}selected{% endif %}>kont. infl.</option>
                                <option value="begrenzt" {% if item.dauer == 'begrenzt' %}selected{% endif %}>für X Monate</option>
                            </select>
                            <input type="number" class="form-control form-control-sm ml-1 dauer-monate" style="width: 70px; display: {% if item.dauer == 'begrenzt' %}inline-block{% else %}none{% endif %};" value="{{ item.dauer_monate|default(12) }}" min="1">
                        </div>
                    </td>
                    <td></td>
                </tr>
                {% endfor %}
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="4">
                        <button type="button" class="btn btn-sm btn-outline-success" id="add-einnahme">
                            <i class="fas fa-plus"></i> Neue Einnahme
                        </button>
                    </td>
                </tr>
                <tr>
                    <th>Summe Einnahmen</th>
                    <td class="betrag summe" colspan="3"><strong id="plan-summe-einnahmen">0,00 €</strong></td>
                </tr>
            </tfoot>
        </table>
    </div>

    <div class="col-md-6 mb-4">
        <h3><i class="fas fa-arrow-circle-up text-danger"></i> Geplante Ausgaben</h3>
        <table class="table table-striped table-ausgaben" id="plan-ausgaben-table">
            <thead>
                <tr>
                    <th>Kategorie</th>
                    <th class="betrag" style="width: 130px;">Betrag</th>
                    <th style="width: 200px;">Dauer</th>
                    <th style="width: 50px;"></th>
                </tr>
            </thead>
            <tbody id="plan-ausgaben-body">
                {% for item in default_scenario.ausgaben %}
                {% set config_value = ausgaben|selectattr('name', 'equalto', item.name)|map(attribute='betrag')|first|default(none) %}
                <tr data-config-value="{{ config_value if config_value is not none else '' }}" data-item-name="{{ item.name }}">
                    <td>
                        {{ item.name }}
                        <div class="value-warning" style="display: none;">
                            <small class="text-warning"><i class="fas fa-exclamation-triangle"></i></small>
                            <small class="text-muted warning-text"></small>
                        </div>
                    </td>
                    <td class="betrag">
                        <div class="input-group input-group-sm">
                            <input type="number" class="form-control plan-ausgabe" value="{{ item.betrag }}" step="0.01" min="0">
                            <div class="input-group-append">
                                <span class="input-group-text">€{% if item.name == 'Getränke- und Snackeinkauf' or item.name == 'Merch-Einkauf' %}*{% endif %}</span>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="d-flex align-items-center">
                            <select class="form-control form-control-sm dauer-select dauer-ausgabe" style="width: auto;">
                                <option value="kontinuierlich" {% if not item.dauer or item.dauer == 'kontinuierlich' %}selected{% endif %}>kontinuierlich</option>
                                <option value="begrenzt" {% if item.dauer == 'begrenzt' %}selected{% endif %}>für X Monate</option>
                            </select>
                            <input type="number" class="form-control form-control-sm ml-1 dauer-monate" style="width: 70px; display: {% if item.dauer == 'begrenzt' %}inline-block{% else %}none{% endif %};" value="{{ item.dauer_monate|default(12) }}" min="1">
                        </div>
                    </td>
                    <td></td>
                </tr>
                {% endfor %}
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="4">
                        <button type="button" class="btn btn-sm btn-outline-danger" id="add-ausgabe">
                            <i class="fas fa-plus"></i> Neue Ausgabe
                        </button>
                    </td>
                </tr>
                <tr>
                    <th>Summe Ausgaben</th>
                    <td class="betrag summe" colspan="3"><strong id="plan-summe-ausgaben">0,00 €</strong></td>
                </tr>
            </tfoot>
        </table>
    </div>
</div>

<div class="card mb-4" id="prognose">
    <div class="card-header">
        <h4 class="mb-0">
            <i class="fas fa-chart-line"></i> 10-Jahres-Prognose
            <a href="#prognose" class="text-muted ms-2" style="font-size: 0.8em; text-decoration: none;" onclick="copyAnchorLink(event, 'prognose')" title="Link kopieren">
                <i class="fas fa-link"></i>
            </a>
        </h4>
    </div>
    <div class="card-body">
        <p class="text-muted small">Wähle eine Rücklage, um die Entwicklung über 10 Jahre zu sehen. Die Mitglieder-Entwicklung wird gleichmäßig über die Jahre verteilt. Annahme: Ein neues Mitglied zahlt durchschnittlich 15 € Beitrag.</p>
        
        <div class="btn-group mb-4 flex-wrap" role="group">
            <button type="button" class="btn btn-outline-secondary reserve-btn" data-reserve="20000">20.000 €</button>
            <button type="button" class="btn btn-outline-secondary reserve-btn" data-reserve="30000">30.000 €</button>
            <button type="button" class="btn btn-outline-secondary reserve-btn" data-reserve="35000">35.000 €</button>
            <button type="button" class="btn btn-outline-secondary reserve-btn" data-reserve="40000">40.000 €</button>
            <button type="button" class="btn btn-outline-secondary reserve-btn active" data-reserve="45000">45.000 €</button>
            <button type="button" class="btn btn-outline-secondary reserve-btn" data-reserve="50000">50.000 €</button>
        </div>
        
        <div class="chart-container" style="position: relative; height: 300px; margin-bottom: 2rem;">
            <canvas id="prognose-chart"></canvas>
        </div>
        
        <h6 class="mt-4"><i class="fas fa-chart-bar text-success"></i> Monatliche Einnahmen (10-Jahres-Prognose)</h6>
        <div class="chart-container" style="position: relative; height: 300px; margin-bottom: 2rem;">
            <canvas id="income-chart"></canvas>
        </div>
        
        <h6 class="mt-4"><i class="fas fa-chart-bar text-danger"></i> Monatliche Ausgaben (10-Jahres-Prognose)</h6>
        <div class="chart-container" style="position: relative; height: 300px; margin-bottom: 2rem;">
            <canvas id="expense-chart"></canvas>
        </div>
        
        <h6 class="mt-4"><i class="fas fa-users"></i> Mitglieder-Entwicklung</h6>
        <div class="chart-container" style="position: relative; height: 200px; margin-bottom: 2rem;">
            <canvas id="mitglieder-chart"></canvas>
        </div>
        
        <h6 class="mt-4"><i class="fas fa-euro-sign"></i> Durchschnittlicher Mitgliedsbeitrag</h6>
        <p class="text-muted small">Der <strong>Benötigte Beitrag</strong> ist die Höhe des durchschnittlichen Mitgliedsbeitrags, um die gesamten regelmäßigen Ausgaben des Vereins über Mitgliedsbeiträge finanzieren zu können. Der <strong>Empfohlene Beitrag</strong> berücksichtigt die soziale Verträglichkeit: Mitglieder mit niedrigen Beiträgen (0-5€) können nicht mehr zahlen, mittlere Gruppen nur teilweise anpassen (30-60%), während höhere Gruppen voll anpassen können (100%).</p>
        <div class="chart-container" style="position: relative; height: 200px; margin-bottom: 2rem;">
            <canvas id="avg-membership-fee-chart"></canvas>
        </div>
        
        <h6 class="mt-4"><i class="fas fa-table"></i> Beitragsentwicklung nach Gruppen</h6>
        <p class="text-muted small">Diese Tabelle zeigt, wie viel Prozent ihres bisherigen Beitrags Mitglieder in verschiedenen Gruppen zahlen müssten, basierend auf der empfohlenen Beitragsanpassung zum 1. Januar jedes Jahres (100% = keine Änderung). Die Annahme dabei ist, dass bei einer sozialverträglichen Anpassung die Mitglieder mit den höheren Beiträgen auch stärker bei der Erhöhung belastet werden.</p>
        <div class="table-responsive mb-4">
            <table class="table table-sm table-bordered" id="fee-projection-table">
                <thead class="thead-light">
                    <tr>
                        <th>Jahr</th>
                        <th>0,01-5€<br><small>(0%)</small></th>
                        <th>5,01-10€<br><small>(30%)</small></th>
                        <th>10,01-15€<br><small>(60%)</small></th>
                        <th>15,01-20€<br><small>(100%)</small></th>
                        <th>20,01-24,99€<br><small>(100%)</small></th>
                        <th>25€<br><small>(100%)</small></th>
                        <th>25,01-30€<br><small>(100%)</small></th>
                        <th>30,01-84,99€<br><small>(100%)</small></th>
                        <th>85-100€<br><small>(100%)</small></th>
                    </tr>
                </thead>
                <tbody id="fee-projection-table-body">
                </tbody>
            </table>
        </div>
        
        <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
            <table class="table table-sm table-striped table-hover" id="prognose-table">
                <thead class="thead-light sticky-top">
                    <tr>
                        <th>Datum</th>
                        <th class="text-right">Mitglieder</th>
                        <th class="text-right">Mitgliedsbeiträge</th>
                        <th class="text-right">Kontostand</th>
                        <th class="text-right">Einnahmen</th>
                        <th class="text-right">Ausgaben</th>
                        <th class="text-right">Saldo</th>
                    </tr>
                </thead>
                <tbody id="prognose-table-body">
                </tbody>
            </table>
        </div>
    </div>
</div>


<div class="card mb-4">
    <div class="card-header">
        <h4 class="mb-0"><i class="fas fa-calculator"></i> Berechnetes Ergebnis</h4>
    </div>
    <div class="card-body">
        <table class="table table-bordered mb-4">
            <tbody>
                <tr class="table-info">
                    <th style="width: 50%;">Einmalige Umzugskosten</th>
                    <td class="betrag" id="ergebnis-umzug">3.500,00 €</td>
                </tr>
            </tbody>
        </table>
        
        <div id="erfa-warning" class="alert" style="display: none;">
            <i class="fas fa-exclamation-triangle"></i> <span id="erfa-warning-text"></span>
        </div>

        <h5 class="mt-4 mb-3"><i class="fas fa-piggy-bank"></i> Wie lange reichen die Rücklagen?</h5>
        <p class="text-muted small">Bei einem monatlichen Defizit: Wie lange können wir uns die Miete leisten, bevor die Rücklagen aufgebraucht sind? Und wie viele neue Mitglieder (Ø 15 €/Monat) bräuchten wir, um bis dahin kostendeckend zu werden?</p>
        
        <table class="table table-bordered table-hover">
            <thead class="thead-light">
                <tr>
                    <th>Rücklagen</th>
                    <th class="text-center">Reichweite</th>
                    <th class="text-center">Neue Mitglieder nötig</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><strong>20.000 €</strong></td>
                    <td class="text-center" id="reichweite-20000">—</td>
                    <td class="text-center" id="mitglieder-20000">—</td>
                </tr>
                <tr>
                    <td><strong>30.000 €</strong></td>
                    <td class="text-center" id="reichweite-30000">—</td>
                    <td class="text-center" id="mitglieder-30000">—</td>
                </tr>
                <tr>
                    <td><strong>35.000 €</strong></td>
                    <td class="text-center" id="reichweite-35000">—</td>
                    <td class="text-center" id="mitglieder-35000">—</td>
                </tr>
                <tr>
                    <td><strong>40.000 €</strong></td>
                    <td class="text-center" id="reichweite-40000">—</td>
                    <td class="text-center" id="mitglieder-40000">—</td>
                </tr>
                <tr>
                    <td><strong>45.000 €</strong></td>
                    <td class="text-center" id="reichweite-45000">—</td>
                    <td class="text-center" id="mitglieder-45000">—</td>
                </tr>
                <tr>
                    <td><strong>50.000 €</strong></td>
                    <td class="text-center" id="reichweite-50000">—</td>
                    <td class="text-center" id="mitglieder-50000">—</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<div class="card mb-4">
    <div class="card-body">
        <h5 class="card-title"><i class="fas fa-download"></i> Szenario exportieren</h5>
        <p class="text-muted small">Exportiere die aktuellen Werte als JSON-Datei. Um ein Szenario dauerhaft verfügbar zu machen, füge die JSON-Datei im <a href="https://git.chaotikum.org/tvluke/rentcalculator/-/tree/main/scenarios" target="_blank">scenarios-Ordner im Git</a> hinzu.</p>
        <div class="form-group row mb-0">
            <label for="export-name" class="col-sm-2 col-form-label">Name</label>
            <div class="col-sm-6">
                <input type="text" class="form-control form-control-sm" id="export-name" value="Mein Szenario" placeholder="Szenario-Name">
            </div>
            <div class="col-sm-4">
                <button type="button" class="btn btn-success btn-sm" id="export-scenario-btn">
                    <i class="fas fa-download"></i> JSON exportieren
                </button>
            </div>
        </div>
    </div>
</div>

<div class="alert alert-info mt-4 mb-4">
    <h6><i class="fas fa-info-circle"></i> Preisanpassung bei Inflation</h6>
    <p class="mb-0">
        <small>
            Die mit <strong>*</strong> markierten Positionen werden bei Inflation automatisch angepasst, 
            um die Gewinnmarge zu erhalten. Das Verhältnis zwischen Verkauf und Einkauf bleibt konstant:
            <br>• <strong>Getränke- und Snackverkauf</strong> / <strong>Getränke- und Snackeinkauf</strong>: <span id="getraenke-ratio-display">wird berechnet...</span>
            <br>• <strong>Merch-Verkauf</strong> / <strong>Merch-Einkauf</strong>: <span id="merch-ratio-display">wird berechnet...</span>
        </small>
    </p>
</div>

{% endblock %}

{% block extra_css %}
<style>
    .sticky-top {
        position: sticky;
        top: 0;
        z-index: 1;
        background: #e9ecef;
    }
    .reserve-btn.active {
        background-color: #007bff;
        color: white;
        border-color: #007bff;
    }
    .value-warning {
        display: block;
        margin-top: 2px;
        font-size: 0.75em;
    }
    .betrag .input-group {
        min-width: 120px;
    }
    .betrag input[type="number"] {
        min-width: 80px;
    }
</style>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    let currentScenarioId = '{{ default_scenario_id }}';
    
    // Read URL parameters
    const urlParams = new URLSearchParams(window.location.search);
    const scenarioParam = urlParams.get('scenario');
    
    function formatEuro(value) {
        return value.toLocaleString('de-DE', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' €';
    }

    function parseInputValue(input) {
        const val = parseFloat(input.value);
        return isNaN(val) ? 0 : val;
    }

    function calculateAndUpdate() {
        let summeEinnahmen = 0;
        let summeAusgaben = 0;

        document.querySelectorAll('.plan-einnahme').forEach(function(input) {
            summeEinnahmen += parseInputValue(input);
        });

        document.querySelectorAll('.plan-ausgabe').forEach(function(input) {
            summeAusgaben += parseInputValue(input);
        });

        const umzugskosten = parseInputValue(document.getElementById('umzugskosten'));
        const eintritte = parseInt(document.getElementById('plan-eintritte').value) || 0;
        const austritte = parseInt(document.getElementById('plan-austritte').value) || 0;
        const nettoMitglieder = eintritte - austritte;
        
        const saldoMonat = summeEinnahmen - summeAusgaben;
        const saldoJahr = saldoMonat * 12;

        document.getElementById('plan-summe-einnahmen').textContent = formatEuro(summeEinnahmen);
        document.getElementById('plan-summe-ausgaben').textContent = formatEuro(summeAusgaben);
        
        // Update member development display
        const nettoEl = document.getElementById('plan-netto-mitglieder');
        nettoEl.innerHTML = '<strong>' + (nettoMitglieder >= 0 ? '+' : '') + nettoMitglieder + '</strong>';
        nettoEl.className = 'form-control-plaintext text-right ' + (nettoMitglieder >= 0 ? 'text-success' : 'text-danger');
        
        document.getElementById('ergebnis-umzug').textContent = formatEuro(umzugskosten);
        
        // Reserve scenarios and ERFA warning will be updated by updateProjection -> updateReserveScenarios
        
        // Update value warnings
        updateWarnings();
    }

    // Config values for comparison
    const configEinnahmen = {{ einnahmen|tojson }};
    const configAusgaben = {{ ausgaben|tojson }};
    
    function getConfigValue(name, type) {
        const list = type === 'einnahme' ? configEinnahmen : configAusgaben;
        const item = list.find(i => i.name === name);
        return item ? item.betrag : null;
    }
    
    function updateWarnings() {
        document.querySelectorAll('#plan-einnahmen-body tr, #plan-ausgaben-body tr').forEach(function(row) {
            const input = row.querySelector('.plan-einnahme, .plan-ausgabe');
            const warning = row.querySelector('.value-warning');
            if (!input || !warning) return;
            
            const configValue = row.dataset.configValue;
            if (configValue === '') return; // No config value to compare
            
            const currentValue = parseFloat(input.value) || 0;
            const originalValue = parseFloat(configValue) || 0;
            const diff = currentValue - originalValue;
            
            if (Math.abs(diff) > 0.01) {
                const sign = diff > 0 ? '+' : '';
                warning.querySelector('.warning-text').textContent = `${sign}${diff.toFixed(2)} € (Ist: ${originalValue.toFixed(2)} €)`;
                warning.style.display = 'block';
            } else {
                warning.style.display = 'none';
            }
        });
    }

    function addInputListeners() {
        document.querySelectorAll('.plan-einnahme, .plan-ausgabe, #umzugskosten, #inflation-rate, #plan-eintritte, #plan-austritte, #plan-max-mitglieder, #umzugsdatum, #monate-doppelmiete, #mitgliederzahl, .dauer-select, .dauer-monate').forEach(function(input) {
            input.removeEventListener('input', calculateAndUpdate);
            input.removeEventListener('change', calculateAndUpdate);
            input.addEventListener('input', calculateAndUpdate);
            input.addEventListener('change', calculateAndUpdate);
        });
        
        // Toggle visibility of duration months input
        document.querySelectorAll('.dauer-select').forEach(function(select) {
            select.removeEventListener('change', toggleDauerMonate);
            select.addEventListener('change', toggleDauerMonate);
        });
        
        // Update warnings on input change
        updateWarnings();
    }
    
    function toggleDauerMonate(e) {
        const monateInput = e.target.closest('td').querySelector('.dauer-monate');
        if (e.target.value === 'begrenzt') {
            monateInput.style.display = 'inline-block';
        } else {
            monateInput.style.display = 'none';
        }
        calculateAndUpdate();
    }

    function createNewRow(type) {
        const tbody = document.getElementById('plan-' + type + '-body');
        const tr = document.createElement('tr');
        tr.innerHTML = `
            <td><input type="text" class="form-control form-control-sm" placeholder="Neue Kategorie" value=""></td>
            <td class="betrag">
                <div class="input-group input-group-sm">
                    <input type="number" class="form-control plan-${type === 'einnahmen' ? 'einnahme' : 'ausgabe'}" value="0" step="0.01" min="0">
                    <div class="input-group-append">
                        <span class="input-group-text">€</span>
                    </div>
                </div>
            </td>
            <td>
                <div class="d-flex align-items-center">
                    <select class="form-control form-control-sm dauer-select dauer-${type === 'einnahmen' ? 'einnahme' : 'ausgabe'}" style="width: auto;">
                        <option value="kontinuierlich" selected>kontinuierlich</option>
                        ${type === 'einnahmen' ? '<option value="kontinuierlich_inflationsangepasst">kont. infl.</option>' : ''}
                        <option value="begrenzt">für X Monate</option>
                    </select>
                    <input type="number" class="form-control form-control-sm ml-1 dauer-monate" style="width: 70px; display: none;" value="12" min="1">
                </div>
            </td>
            <td>
                <button type="button" class="btn btn-sm btn-outline-secondary remove-row" title="Entfernen">
                    <i class="fas fa-times"></i>
                </button>
            </td>
        `;
        tbody.appendChild(tr);
        addInputListeners();
        calculateAndUpdate();
    }

    document.getElementById('add-einnahme').addEventListener('click', function() {
        createNewRow('einnahmen');
    });

    document.getElementById('add-ausgabe').addEventListener('click', function() {
        createNewRow('ausgaben');
    });

    document.addEventListener('click', function(e) {
        if (e.target.closest('.remove-row')) {
            e.target.closest('tr').remove();
            calculateAndUpdate();
        }
    });

    // Update scenario link
    function updateScenarioLink() {
        const url = window.location.origin + window.location.pathname + '?scenario=' + currentScenarioId;
        document.getElementById('scenario-link').href = url;
        document.getElementById('scenario-link-text').textContent = url;
    }
    
    // Copy scenario link to clipboard
    window.copyScenarioLink = function(event) {
        event.preventDefault();
        const url = window.location.origin + window.location.pathname + '?scenario=' + currentScenarioId;
        
        navigator.clipboard.writeText(url).then(function() {
            const link = event.currentTarget;
            const icon = link.querySelector('i');
            const originalClass = icon.className;
            
            icon.className = 'fas fa-check ms-1';
            link.style.color = '#28a745';
            
            setTimeout(function() {
                icon.className = originalClass;
                link.style.color = '';
            }, 1500);
        }).catch(function(err) {
            console.error('Failed to copy link: ', err);
        });
    };

    // Scenario loading
    document.querySelectorAll('.scenario-btn').forEach(function(btn) {
        btn.addEventListener('click', function() {
            const scenarioId = this.dataset.scenario;
            const clickedBtn = this;
            currentScenarioId = scenarioId;
            updateScenarioLink();
            
            fetch('/api/scenario/' + scenarioId)
                .then(response => response.json())
                .then(function(data) {
                    // Update active state on buttons
                    document.querySelectorAll('.scenario-btn').forEach(b => b.classList.remove('active'));
                    clickedBtn.classList.add('active');
                    loadScenario(data);
                })
                .catch(function(error) {
                    console.error('Error loading scenario:', error);
                });
        });
    });
    
    // Load scenario from URL parameter on page load
    if (scenarioParam) {
        const scenarioBtn = document.querySelector(`.scenario-btn[data-scenario="${scenarioParam}"]`);
        if (scenarioBtn) {
            currentScenarioId = scenarioParam;
            scenarioBtn.click();
        }
    }
    
    // Initialize scenario link
    updateScenarioLink();

    // Scenario export
    document.getElementById('export-scenario-btn').addEventListener('click', function() {
        const scenario = {
            name: document.getElementById('export-name').value || 'Mein Szenario',
            beschreibung: '',
            sortierung: 99,
            umzugsdatum: document.getElementById('umzugsdatum').value,
            monate_doppelmiete: parseInt(document.getElementById('monate-doppelmiete').value) || 0,
            mitgliederzahl: parseInt(document.getElementById('mitgliederzahl').value) || 92,
            mitglieder_maximum: parseInt(document.getElementById('plan-max-mitglieder').value) || 140,
            mitglieder_eintritte: parseInt(document.getElementById('plan-eintritte').value) || 0,
            mitglieder_austritte: parseInt(document.getElementById('plan-austritte').value) || 0,
            einnahmen: [],
            ausgaben: [],
            umzugskosten: parseFloat(document.getElementById('umzugskosten').value) || 0
        };
        
        // Collect Einnahmen
        document.querySelectorAll('#plan-einnahmen-body tr').forEach(function(row) {
            const nameCell = row.querySelector('td:first-child');
            const input = row.querySelector('.plan-einnahme');
            const dauerSelect = row.querySelector('.dauer-einnahme');
            const dauerMonate = row.querySelector('.dauer-monate');
            const inputField = nameCell.querySelector('input');
            
            if (nameCell && input) {
                // Get name from either text content (original rows) or input field (new rows)
                let name;
                if (inputField) {
                    name = inputField.value.trim() || 'Unbenannt';
                    // Clean up warning text if present
                    if (name.includes(' (ist ') || name.includes('(Ist:')) {
                        name = name.split(' (ist ')[0].trim();
                        name = name.split('(Ist:')[0].trim();
                        name = name.replace(/[\+\-\d\s€\.]+$/, '').replace(/\s+/g, ' ').trim();
                    }
                } else {
                    name = nameCell.textContent.trim().split('\n')[0].trim();
                    // Clean up warning text if present
                    if (name.includes(' (ist ') || name.includes('(Ist:')) {
                        name = name.split(' (ist ')[0].trim();
                        name = name.split('(Ist:')[0].trim();
                        name = name.replace(/[\+\-\d\s€\.]+$/, '').replace(/\s+/g, ' ').trim();
                    }
                }
                
                const item = {
                    name: name,
                    betrag: parseFloat(input.value) || 0
                };
                if (dauerSelect && dauerSelect.value === 'begrenzt') {
                    item.dauer = 'begrenzt';
                    item.dauer_monate = parseInt(dauerMonate.value) || 12;
                } else if (dauerSelect && dauerSelect.value === 'kontinuierlich_inflationsangepasst') {
                    item.dauer = 'kontinuierlich_inflationsangepasst';
                }
                scenario.einnahmen.push(item);
            }
        });
        
        // Collect Ausgaben
        document.querySelectorAll('#plan-ausgaben-body tr').forEach(function(row) {
            const nameCell = row.querySelector('td:first-child');
            const input = row.querySelector('.plan-ausgabe');
            const dauerSelect = row.querySelector('.dauer-ausgabe');
            const dauerMonate = row.querySelector('.dauer-monate');
            const inputField = nameCell.querySelector('input');
            
            if (nameCell && input) {
                // Get name from either text content (original rows) or input field (new rows)
                let name;
                if (inputField) {
                    name = inputField.value.trim() || 'Unbenannt';
                    // Clean up warning text if present
                    if (name.includes(' (ist ') || name.includes('(Ist:')) {
                        name = name.split(' (ist ')[0].trim();
                        name = name.split('(Ist:')[0].trim();
                        name = name.replace(/[\+\-\d\s€\.]+$/, '').replace(/\s+/g, ' ').trim();
                    }
                } else {
                    name = nameCell.textContent.trim().split('\n')[0].trim();
                    // Clean up warning text if present
                    if (name.includes(' (ist ') || name.includes('(Ist:')) {
                        name = name.split(' (ist ')[0].trim();
                        name = name.split('(Ist:')[0].trim();
                        name = name.replace(/[\+\-\d\s€\.]+$/, '').replace(/\s+/g, ' ').trim();
                    }
                }
                
                const item = {
                    name: name,
                    betrag: parseFloat(input.value) || 0
                };
                if (dauerSelect && dauerSelect.value === 'begrenzt') {
                    item.dauer = 'begrenzt';
                    item.dauer_monate = parseInt(dauerMonate.value) || 12;
                }
                scenario.ausgaben.push(item);
            }
        });
        
        // Download as JSON file
        const json = JSON.stringify(scenario, null, 4);
        const blob = new Blob([json], { type: 'application/json' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = scenario.name.toLowerCase().replace(/[^a-z0-9]/g, '_') + '.json';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
    });

    function loadScenario(data) {
        // Display scenario name and description
        const scenarioInfo = document.getElementById('scenario-info');
        const scenarioName = document.getElementById('scenario-name');
        const scenarioDescription = document.getElementById('scenario-description');
        
        if (data.name) {
            scenarioName.textContent = data.name;
            scenarioDescription.textContent = data.beschreibung || '';
            scenarioInfo.style.display = 'block';
        } else {
            scenarioInfo.style.display = 'none';
        }
        
        // Load Umzugsdatum
        if (data.umzugsdatum) {
            document.getElementById('umzugsdatum').value = data.umzugsdatum;
        }
        
        // Load Mitgliederzahl
        document.getElementById('mitgliederzahl').value = (data.mitgliederzahl !== undefined) ? data.mitgliederzahl : 92;
        
        // Load Monate Doppelmiete
        document.getElementById('monate-doppelmiete').value = (data.monate_doppelmiete !== undefined) ? data.monate_doppelmiete : 3;
        
        // Load Umzugskosten
        document.getElementById('umzugskosten').value = (data.umzugskosten !== undefined) ? data.umzugskosten : 3500;
        
        // Load Mitglieder-Entwicklung
        document.getElementById('plan-eintritte').value = data.mitglieder_eintritte || 0;
        document.getElementById('plan-austritte').value = data.mitglieder_austritte || 0;
        document.getElementById('plan-max-mitglieder').value = data.mitglieder_maximum || 140;
        
        // Load Membership Fee Inflation settings
        const inflateMembershipFeesCheckbox = document.getElementById('inflate-membership-fees');
        const membershipFeeIncreaseRow = document.getElementById('membership-fee-increase-row');
        const membershipFeeIncreaseInput = document.getElementById('membership-fee-increase');
        
        // Always set the checkbox state (default to false if not in scenario)
        inflateMembershipFeesCheckbox.checked = data.inflate_membership_fees || false;
        if (data.inflate_membership_fees) {
            membershipFeeIncreaseRow.classList.remove('d-none');
            membershipFeeIncreaseInput.value = data.membership_fee_increase || 2.5;
        } else {
            membershipFeeIncreaseRow.classList.add('d-none');
        }
        
        // Manually trigger projection update without dispatching change event
        updateProjection();
        
        // Load Einnahmen
        const einnahmenBody = document.getElementById('plan-einnahmen-body');
        einnahmenBody.innerHTML = '';
        data.einnahmen.forEach(function(item) {
            const dauer = item.dauer || 'kontinuierlich';
            const dauerMonate = item.dauer_monate || 12;
            const showMonate = dauer === 'begrenzt' ? 'inline-block' : 'none';
            const configItem = configEinnahmen.find(c => c.name === item.name);
            const configValue = configItem ? configItem.betrag : '';
            const tr = document.createElement('tr');
            tr.dataset.configValue = configValue;
            tr.dataset.itemName = item.name;
            tr.innerHTML = `
                <td>
                    ${item.name}
                    <div class="value-warning" style="display: none;">
                        <small class="text-warning"><i class="fas fa-exclamation-triangle"></i></small>
                        <small class="text-muted warning-text"></small>
                    </div>
                </td>
                <td class="betrag">
                    <div class="input-group input-group-sm">
                        <input type="number" class="form-control plan-einnahme" value="${item.betrag}" step="0.01" min="0">
                        <div class="input-group-append">
                            <span class="input-group-text">€</span>
                        </div>
                    </div>
                </td>
                <td>
                    <div class="d-flex align-items-center">
                        <select class="form-control form-control-sm dauer-select dauer-einnahme" style="width: auto;">
                            <option value="kontinuierlich" ${dauer === 'kontinuierlich' ? 'selected' : ''}>kontinuierlich</option>
                            <option value="kontinuierlich_inflationsangepasst" ${dauer === 'kontinuierlich_inflationsangepasst' ? 'selected' : ''}>kont. infl.</option>
                            <option value="begrenzt" ${dauer === 'begrenzt' ? 'selected' : ''}>für X Monate</option>
                        </select>
                        <input type="number" class="form-control form-control-sm ml-1 dauer-monate" style="width: 70px; display: ${showMonate};" value="${dauerMonate}" min="1">
                    </div>
                </td>
                <td></td>
            `;
            einnahmenBody.appendChild(tr);
        });
        
        // Load Ausgaben
        const ausgabenBody = document.getElementById('plan-ausgaben-body');
        ausgabenBody.innerHTML = '';
        data.ausgaben.forEach(function(item) {
            const dauer = item.dauer || 'kontinuierlich';
            const dauerMonate = item.dauer_monate || 12;
            const showMonate = dauer === 'begrenzt' ? 'inline-block' : 'none';
            const configItem = configAusgaben.find(c => c.name === item.name);
            const configValue = configItem ? configItem.betrag : '';
            const tr = document.createElement('tr');
            tr.dataset.configValue = configValue;
            tr.dataset.itemName = item.name;
            tr.innerHTML = `
                <td>
                    ${item.name}
                    <div class="value-warning" style="display: none;">
                        <small class="text-warning"><i class="fas fa-exclamation-triangle"></i></small>
                        <small class="text-muted warning-text"></small>
                    </div>
                </td>
                <td class="betrag">
                    <div class="input-group input-group-sm">
                        <input type="number" class="form-control plan-ausgabe" value="${item.betrag}" step="0.01" min="0">
                        <div class="input-group-append">
                            <span class="input-group-text">€</span>
                        </div>
                    </div>
                </td>
                <td>
                    <div class="d-flex align-items-center">
                        <select class="form-control form-control-sm dauer-select dauer-ausgabe" style="width: auto;">
                            <option value="kontinuierlich" ${dauer === 'kontinuierlich' ? 'selected' : ''}>kontinuierlich</option>
                            <option value="begrenzt" ${dauer === 'begrenzt' ? 'selected' : ''}>für X Monate</option>
                        </select>
                        <input type="number" class="form-control form-control-sm ml-1 dauer-monate" style="width: 70px; display: ${showMonate};" value="${dauerMonate}" min="1">
                    </div>
                </td>
                <td></td>
            `;
            ausgabenBody.appendChild(tr);
        });
        
        addInputListeners();
        calculateAndUpdate();
    }

    // Projection Charts
    let prognoseChart = null;
    let mitgliederChart = null;
    let incomeChart = null;
    let expenseChart = null;
    let avgMembershipFeeChart = null;
    let selectedReserve = 45000;

    // Current rent from config.json (for double rent calculation)
    const aktuelleMiete = {{ ausgaben|selectattr('name', 'equalto', 'Miete')|map(attribute='betrag')|first|default(0) }};

    // Collect income/expense items with duration info
    function collectItems(selector, dauerSelector) {
        const items = [];
        document.querySelectorAll(selector).forEach(function(input) {
            const row = input.closest('tr');
            const betrag = parseInputValue(input);
            
            // Get name from either text content or input field
            let name = '';
            const firstCell = row.querySelector('td:first-child');
            const textContent = firstCell.textContent.trim();
            const inputField = firstCell.querySelector('input');
            
            console.log(`Processing row - textContent: "${textContent}", hasInputField: ${!!inputField}`);
            
            if (inputField) {
                let rawName = inputField.value.trim() || 'Unbenannt';
                console.log(`Input field rawName: "${rawName}"`);
                // Extract clean name from warning text like "+275.03 € (Ist: 1424.97 €)"
                // or "+2300 (ist 650)" - remove leading +, -, numbers, currency symbols, and warning text
                if (rawName.includes(' (ist ') || rawName.includes('(Ist:')) {
                    // Remove the warning part first
                    let cleanName = rawName.split(' (ist ')[0].trim();
                    cleanName = cleanName.split('(Ist:')[0].trim();
                    // Remove trailing +, -, numbers, currency symbols and clean up whitespace
                    name = cleanName.replace(/[\+\-\d\s€\.]+$/, '').replace(/\s+/g, ' ').trim();
                    console.log(`Input field cleaned name: "${name}"`);
                } else {
                    // Also handle case where there might be leading numbers without warning
                    name = rawName.replace(/^[\+\-\d\s€\.]+/, '').replace(/\s+/g, ' ').trim();
                    console.log(`Input field name (no warning): "${name}"`);
                }
            } else {
                // For original rows, get clean name from text content (remove warning text)
                let rawName = textContent || 'Unbenannt';
                console.log(`Text content rawName: "${rawName}"`);
                if (rawName.includes(' (ist ') || rawName.includes('(Ist:')) {
                    let cleanName = rawName.split(' (ist ')[0].trim();
                    cleanName = cleanName.split('(Ist:')[0].trim();
                    name = cleanName.replace(/[\+\-\d\s€\.]+$/, '').replace(/\s+/g, ' ').trim();
                    console.log(`Text content cleaned name: "${name}"`);
                } else {
                    name = rawName.replace(/\s+/g, ' ').trim();
                    console.log(`Text content name (no warning): "${name}"`);
                }
            }
            
            // Include items even if betrag is 0 (for newly added items)
            if (name && name !== 'Unbenannt') {
                const dauerSelect = row.querySelector(dauerSelector);
                const dauerMonate = row.querySelector('.dauer-monate');
                
                let dauer = 'kontinuierlich';
                let monate = 999; // effectively infinite
                
                if (dauerSelect && dauerSelect.value === 'begrenzt') {
                    dauer = 'begrenzt';
                    monate = parseInt(dauerMonate.value) || 12;
                } else if (dauerSelect && dauerSelect.value === 'kontinuierlich_inflationsangepasst') {
                    dauer = 'kontinuierlich_inflationsangepasst';
                }
                
                items.push({ name, betrag, dauer, monate });
            }
        });
        return items;
    }

    function updateRatioDisplays(getraenkeRatio, merchRatio) {
        const getraenkeDisplay = document.getElementById('getraenke-ratio-display');
        const merchDisplay = document.getElementById('merch-ratio-display');
        
        // Check if elements exist before trying to update them
        if (!getraenkeDisplay || !merchDisplay) {
            console.log('Ratio display elements not found, skipping update');
            return;
        }
        
        if (getraenkeDisplay) {
            if (getraenkeRatio > 0) {
                const profitMargin = ((getraenkeRatio - 1) * 100).toFixed(1);
                getraenkeDisplay.innerHTML = `${getraenkeRatio.toFixed(2)} (${profitMargin}% Gewinnmarge)`;
            } else {
                getraenkeDisplay.innerHTML = 'Nicht verfügbar';
            }
        }
        
        if (merchDisplay) {
            if (merchRatio > 0) {
                const profitMargin = ((merchRatio - 1) * 100).toFixed(1);
                merchDisplay.innerHTML = `${merchRatio.toFixed(2)} (${profitMargin}% Gewinnmarge)`;
            } else {
                merchDisplay.innerHTML = 'Nicht verfügbar';
            }
        }
    }

    function calculateProjectionWithParams(reserve, params) {
        const umzugsdatum = params.umzugsdatum;
        const umzugskosten = params.umzugskosten;
        const inflationRate = params.inflationRate;
        
        const startDate = new Date(umzugsdatum);
        const months = 120; // 10 years
        
        const inflateMembershipFees = params.inflateMembershipFees;
        const einnahmenItems = params.einnahmenItems;
        const ausgabenItems = params.ausgabenItems;
        
        console.log('=== All Collected Items ===');
        console.log('Einnahmen items:', einnahmenItems.map(item => ({ name: item.name, betrag: item.betrag })));
        console.log('Ausgaben items:', ausgabenItems.map(item => ({ name: item.name, betrag: item.betrag })));
        
        // Find Getränke items to calculate initial ratio
        const getraenkeVerkauf = einnahmenItems.find(item => item.name === 'Getränke- und Snackverkauf');
        const getraenkeEinkauf = ausgabenItems.find(item => item.name === 'Getränke- und Snackeinkauf');
        
        console.log('=== Getränke Items Debug ===');
        console.log('Getränke-Verkauf found:', !!getraenkeVerkauf);
        if (getraenkeVerkauf) {
            console.log('Getränke-Verkauf name:', getraenkeVerkauf.name);
            console.log('Getränke-Verkauf betrag:', getraenkeVerkauf.betrag);
        }
        console.log('Getränke-Einkauf found:', !!getraenkeEinkauf);
        if (getraenkeEinkauf) {
            console.log('Getränke-Einkauf name:', getraenkeEinkauf.name);
            console.log('Getränke-Einkauf betrag:', getraenkeEinkauf.betrag);
        }
        
        // Calculate initial profit margin ratio for Getränke
        let getraenkeRatio = 1.0;
        if (getraenkeVerkauf && getraenkeEinkauf && getraenkeEinkauf.betrag > 0) {
            getraenkeRatio = getraenkeVerkauf.betrag / getraenkeEinkauf.betrag;
            console.log(`Initial Getränke ratio: ${getraenkeRatio.toFixed(3)} (Verkauf: ${getraenkeVerkauf.betrag}, Einkauf: ${getraenkeEinkauf.betrag})`);
        }
        
        // Find Merch items to calculate initial ratio
        const merchVerkauf = einnahmenItems.find(item => item.name === 'Merch-Verkauf');
        const merchEinkauf = ausgabenItems.find(item => item.name === 'Merch-Einkauf');
        
        console.log('=== Merch Items Debug ===');
        console.log('Merch-Verkauf found:', !!merchVerkauf);
        if (merchVerkauf) {
            console.log('Merch-Verkauf name:', merchVerkauf.name);
            console.log('Merch-Verkauf betrag:', merchVerkauf.betrag);
        }
        console.log('Merch-Einkauf found:', !!merchEinkauf);
        if (merchEinkauf) {
            console.log('Merch-Einkauf name:', merchEinkauf.name);
            console.log('Merch-Einkauf betrag:', merchEinkauf.betrag);
        }
        
        // Calculate initial profit margin ratio for Merch
        let merchRatio = 1.0;
        if (merchVerkauf && merchEinkauf && merchEinkauf.betrag > 0) {
            merchRatio = merchVerkauf.betrag / merchEinkauf.betrag;
            console.log(`Initial Merch ratio: ${merchRatio.toFixed(3)} (Verkauf: ${merchVerkauf.betrag}, Einkauf: ${merchEinkauf.betrag})`);
        }
        
        // Update ratio displays in footer
        updateRatioDisplays(getraenkeRatio, merchRatio);
        
        // Member growth calculation
        const startMitglieder = params.startMitglieder;
        const maxMitglieder = params.maxMitglieder;
        const eintritteProJahr = params.eintritteProJahr;
        const austritteProJahr = params.austritteProJahr;
        
        const monthlyMemberGrowth = (eintritteProJahr - austritteProJahr) / 12;
        const avgBeitrag = 15; // Average contribution per new member
        const monthlyMemberIncomeIncrease = monthlyMemberGrowth * avgBeitrag;
        
        let additionalMemberIncome = 0;
        let currentMitglieder = startMitglieder;
        
        // Calculate initial monthly balance
        const startMitgliedsbeitraege = einnahmenItems.find(item => item.name === 'Mitgliedsbeiträge')?.betrag || 0;
        const aktuelleMiete = ausgabenItems.find(item => item.name === 'Miete')?.betrag || 0;
        const monateDoppelmiete = params.monateDoppelmiete;
        
        // Old rent values from kein_umzug.json (before the move)
        const alteMiete = 650;
        const alteNebenkosten = 179.74;
        const alteMieteGesamt = alteMiete + alteNebenkosten;
        
        console.log('=== Projection Calculation ===');
        console.log(`- Start members: ${startMitglieder}, Max: ${maxMitglieder}`);
        console.log(`- Monthly growth: ${monthlyMemberGrowth}, income increase: ${monthlyMemberIncomeIncrease}`);
        
        // Inflation tracking
        let inflationMultiplier = 1.0;
        let membershipFeeInflationMultiplier = 1.0;
        const startYear = new Date(startDate).getFullYear();
        const membershipFeeIncreaseRate = params.membershipFeeIncreaseRate || 0;
        
        const data = [];
        
        // Starting balance: reserve - moving costs
        let balance = reserve - umzugskosten;
        console.log(`Starting balance: ${reserve} - ${umzugskosten} = ${balance} €`);
        
        for (let i = 0; i <= months; i++) {
            const date = new Date(startDate);
            date.setMonth(date.getMonth() + i);
            
            // Apply inflation starting from second year (January of year after start)
            const currentYear = date.getFullYear();
            if (currentYear > startYear && date.getMonth() === 0) {
                if (inflationRate > 0) {
                    inflationMultiplier *= (1 + inflationRate / 100);
                    console.log(`Year ${currentYear}: Inflation applied, multiplier = ${inflationMultiplier}`);
                }
                if (membershipFeeIncreaseRate > 0) {
                    membershipFeeInflationMultiplier *= (1 + membershipFeeIncreaseRate / 100);
                    console.log(`Year ${currentYear}: Membership fee increase applied, multiplier = ${membershipFeeInflationMultiplier}`);
                }
            }
            
            // Calculate income for this month (considering duration limits)
            let monthlyIncome = 0; // Start at 0, don't add additionalMemberIncome here
            let incomeBreakdown = {}; // Track individual income categories
            
            einnahmenItems.forEach(function(item) {
                if (item.dauer === 'kontinuierlich' || item.dauer === 'kontinuierlich_inflationsangepasst' || i < item.monate) {
                    let itemAmount = item.betrag;
                    
                    // Apply inflation to membership fees (both base and additional) - using separate rate
                    if (item.name === 'Mitgliedsbeiträge' && membershipFeeIncreaseRate > 0) {
                        // Apply membership fee increase to both base fees and additional member income
                        itemAmount = (item.betrag + additionalMemberIncome) * membershipFeeInflationMultiplier;
                        console.log(`Month ${i}: Membership fees - base: ${item.betrag}, additional: ${additionalMemberIncome}, inflated: ${itemAmount.toFixed(2)}`);
                    } else if (item.name === 'Mitgliedsbeiträge') {
                        // No increase, but still include additional member income
                        itemAmount = item.betrag + additionalMemberIncome;
                        console.log(`Month ${i}: Membership fees - base: ${item.betrag}, additional: ${additionalMemberIncome}, total: ${itemAmount.toFixed(2)}`);
                    } else if (item.dauer === 'kontinuierlich_inflationsangepasst' && inflationRate > 0) {
                        // Apply inflation to income items marked as inflation-adjusted
                        itemAmount = item.betrag * inflationMultiplier;
                        console.log(`Month ${i}: ${item.name} - base: ${item.betrag}, inflated: ${itemAmount.toFixed(2)}`);
                    } else if (item.name === 'Getränke- und Snackverkauf' && inflationRate > 0) {
                        // Apply inflation to maintain profit margin ratio
                        const correspondingExpense = ausgabenItems.find(exp => exp.name === 'Getränke- und Snackeinkauf');
                        if (correspondingExpense) {
                            const inflatedExpense = correspondingExpense.betrag * inflationMultiplier;
                            itemAmount = inflatedExpense * getraenkeRatio;
                            console.log(`Month ${i}: Getränke- und Snackverkauf - inflated expense: ${inflatedExpense.toFixed(2)}, ratio: ${getraenkeRatio.toFixed(3)}, adjusted income: ${itemAmount.toFixed(2)}`);
                        }
                    } else if (item.name === 'Merch-Verkauf' && inflationRate > 0) {
                        // Apply inflation to maintain profit margin ratio
                        const correspondingExpense = ausgabenItems.find(exp => exp.name === 'Merch-Einkauf');
                        if (correspondingExpense) {
                            const inflatedExpense = correspondingExpense.betrag * inflationMultiplier;
                            itemAmount = inflatedExpense * merchRatio;
                            console.log(`Month ${i}: Merch-Verkauf - inflated expense: ${inflatedExpense.toFixed(2)}, ratio: ${merchRatio.toFixed(3)}, adjusted income: ${itemAmount.toFixed(2)}`);
                        }
                    }
                    
                    monthlyIncome += itemAmount;
                    
                    // For membership fees, store the total amount (base + additional + inflation)
                    if (item.name === 'Mitgliedsbeiträge') {
                        incomeBreakdown[item.name] = itemAmount;
                    } else {
                        incomeBreakdown[item.name] = itemAmount;
                    }
                }
            });
            
            // Calculate expenses for this month (considering duration limits)
            let monthlyExpenses = 0;
            let expenseBreakdown = {}; // Track individual expense categories
            
            ausgabenItems.forEach(function(item) {
                if (item.dauer === 'kontinuierlich' || i < item.monate) {
                    const inflatedAmount = item.betrag * inflationMultiplier;
                    monthlyExpenses += inflatedAmount;
                    expenseBreakdown[item.name] = inflatedAmount;
                }
            });
            
            // Add old rent for double rent months (no inflation applied)
            if (i < monateDoppelmiete) {
                monthlyExpenses += alteMieteGesamt;
                expenseBreakdown['Alte Miete (Doppelmiete)'] = alteMieteGesamt;
                console.log(`Month ${i}: Double rent - old rent: ${alteMieteGesamt.toFixed(2)} (no inflation)`);
            }
            const monthlySaldo = monthlyIncome - monthlyExpenses;
            
            // Update balance first, then push to data
            balance += monthlySaldo;
            
            // Use actual membership fees from incomeBreakdown (includes inflation if enabled)
            const totalMembershipFees = incomeBreakdown['Mitgliedsbeiträge'] || 0;
            const avgMembershipFee = currentMitglieder > 0 ? totalMembershipFees / currentMitglieder : 0;
            const requiredFeePerMember = currentMitglieder > 0 ? monthlyExpenses / currentMitglieder : 0;
            
            data.push({
                date: date,
                dateStr: date.toLocaleDateString('de-DE', { year: 'numeric', month: '2-digit' }),
                balance: balance,
                income: monthlyIncome,
                expenses: monthlyExpenses,
                saldo: monthlySaldo,
                mitglieder: Math.round(currentMitglieder),
                mitgliedsbeitraege: totalMembershipFees,
                avgMembershipFee: avgMembershipFee,
                requiredFeePerMember: requiredFeePerMember,
                incomeBreakdown: incomeBreakdown,
                expenseBreakdown: expenseBreakdown
            });
            
            // Only grow members if below maximum
            if (currentMitglieder < maxMitglieder) {
                const newMitglieder = currentMitglieder + monthlyMemberGrowth;
                if (newMitglieder <= maxMitglieder) {
                    additionalMemberIncome += monthlyMemberIncomeIncrease;
                    currentMitglieder = newMitglieder;
                    console.log(`Month ${i}: Added members, now ${currentMitglieder.toFixed(2)}, additional income: ${additionalMemberIncome.toFixed(2)}`);
                } else {
                    // Cap at maximum
                    const actualGrowth = maxMitglieder - currentMitglieder;
                    additionalMemberIncome += actualGrowth * avgBeitrag;
                    currentMitglieder = maxMitglieder;
                    console.log(`Month ${i}: Reached max members ${maxMitglieder}, additional income: ${additionalMemberIncome.toFixed(2)}`);
                }
            }
        }
        
        return data;
    }
    
    // Wrapper function that reads from DOM and calls calculateProjectionWithParams
    function calculateProjection(reserve) {
        const inflationRate = document.getElementById('inflation-rate').value === '' ? 2.5 : parseFloat(document.getElementById('inflation-rate').value);
        const inflateMembershipFees = document.getElementById('inflate-membership-fees').checked;
        const membershipFeeIncreaseRate = inflateMembershipFees 
            ? (parseFloat(document.getElementById('membership-fee-increase').value) || inflationRate)
            : 0;
        
        const params = {
            umzugsdatum: document.getElementById('umzugsdatum').value || '2027-01-01',
            umzugskosten: parseInputValue(document.getElementById('umzugskosten')),
            inflationRate: inflationRate,
            inflateMembershipFees: inflateMembershipFees,
            membershipFeeIncreaseRate: membershipFeeIncreaseRate,
            einnahmenItems: collectItems('.plan-einnahme', '.dauer-einnahme'),
            ausgabenItems: collectItems('.plan-ausgabe', '.dauer-ausgabe'),
            startMitglieder: parseInt(document.getElementById('mitgliederzahl').value) || 92,
            maxMitglieder: parseInt(document.getElementById('plan-max-mitglieder').value) || 140,
            eintritteProJahr: parseInt(document.getElementById('plan-eintritte').value) || 0,
            austritteProJahr: parseInt(document.getElementById('plan-austritte').value) || 0,
            monateDoppelmiete: parseInt(document.getElementById('monate-doppelmiete').value) || 0
        };
        
        return calculateProjectionWithParams(reserve, params);
    }

    function updateProjection() {
        console.log('=== UpdateProjection Called ===');
        const data = calculateProjection(selectedReserve);
        
        // Update chart
        const ctx = document.getElementById('prognose-chart').getContext('2d');
        
        if (prognoseChart) {
            prognoseChart.destroy();
        }
        
        const labels = data.map(d => d.dateStr);
        const balances = data.map(d => d.balance);
        
        // Find where balance goes negative
        const negativeIndex = balances.findIndex(b => b < 0);
        const minBalance = Math.min(...balances);
        const yMin = minBalance >= 0 ? 0 : undefined;
        
        prognoseChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Kontostand',
                    data: balances,
                    borderColor: function(context) {
                        const value = context.raw;
                        return value < 0 ? '#dc3545' : '#28a745';
                    },
                    segment: {
                        borderColor: function(context) {
                            return context.p1.raw < 0 ? '#dc3545' : '#28a745';
                        }
                    },
                    backgroundColor: 'rgba(40, 167, 69, 0.1)',
                    fill: true,
                    tension: 0.1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return formatEuro(context.raw);
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        min: yMin,
                        ticks: {
                            callback: function(value) {
                                return formatEuro(value);
                            }
                        },
                        grid: {
                            color: function(context) {
                                if (context.tick.value === 0) {
                                    return '#dc3545';
                                }
                                return '#e9ecef';
                            },
                            lineWidth: function(context) {
                                if (context.tick.value === 0) {
                                    return 2;
                                }
                                return 1;
                            }
                        }
                    },
                    x: {
                        ticks: {
                            maxTicksLimit: 12
                        }
                    }
                }
            }
        });
        
        // Update member chart
        const ctxMitglieder = document.getElementById('mitglieder-chart').getContext('2d');
        
        if (mitgliederChart) {
            mitgliederChart.destroy();
        }
        
        const mitglieder = data.map(d => d.mitglieder);
        
        mitgliederChart = new Chart(ctxMitglieder, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Mitglieder',
                    data: mitglieder,
                    borderColor: '#17a2b8',
                    backgroundColor: 'rgba(23, 162, 184, 0.1)',
                    fill: true,
                    tension: 0.1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: false,
                        ticks: {
                            callback: function(value) {
                                return Math.round(value);
                            }
                        }
                    },
                    x: {
                        ticks: {
                            maxTicksLimit: 12
                        }
                    }
                }
            }
        });
        
        // Update average membership fee chart
        const ctxAvgFee = document.getElementById('avg-membership-fee-chart').getContext('2d');
        
        if (avgMembershipFeeChart) {
            avgMembershipFeeChart.destroy();
        }
        
        const avgFees = data.map(d => d.avgMembershipFee);
        const requiredFees = data.map(d => d.requiredFeePerMember);
        
        // Calculate socially-adjusted recommended fee based on actual 9 groups
        // Group distribution and adjustment capacity:
        const groups = [
            { pct: 0.182, avg: 2.63, ratio: 0.105, adjustment: 0.00 },  // 0-20% (0-5€): 0% adjustment
            { pct: 0.263, avg: 7.57, ratio: 0.303, adjustment: 0.30 },  // 20-40% (5-10€): 30% adjustment
            { pct: 0.131, avg: 13.00, ratio: 0.520, adjustment: 0.60 }, // 40-60% (10-15€): 60% adjustment
            { pct: 0.152, avg: 18.93, ratio: 0.757, adjustment: 1.00 }, // 60-80% (15-20€): 100% adjustment
            { pct: 0.010, avg: 24.99, ratio: 1.000, adjustment: 1.00 }, // 80-100% (20-25€): 100% adjustment
            { pct: 0.162, avg: 25.00, ratio: 1.000, adjustment: 1.00 }, // 100% (25€): 100% adjustment
            { pct: 0.030, avg: 29.00, ratio: 1.160, adjustment: 1.00 }, // 100-120% (25-30€): 100% adjustment
            { pct: 0.040, avg: 31.25, ratio: 1.250, adjustment: 1.00 }, // 120-140% (30-35€): 100% adjustment
            { pct: 0.020, avg: 92.50, ratio: 3.700, adjustment: 1.00 }  // 85-100€: 100% adjustment (combined, avg of 85 and 100)
        ];
        
        const recommendedFees = data.map(d => {
            const required = d.requiredFeePerMember;
            const currentRecommendation = 25; // Current baseline
            
            // Calculate fixed contribution (groups that can't adjust)
            let fixedContribution = 0;
            let adjustableBase = 0;
            let adjustableCapacity = 0;
            
            groups.forEach(group => {
                const baseContribution = group.pct * group.avg;
                
                if (group.adjustment === 0) {
                    // This group can't adjust at all
                    fixedContribution += baseContribution;
                } else {
                    // This group can adjust
                    adjustableBase += baseContribution;
                    // Capacity = percentage of members * adjustment factor * ratio to recommendation
                    adjustableCapacity += group.pct * group.adjustment * group.ratio;
                }
            });
            
            // Solve for X: required = fixedContribution + adjustableBase + (X - 25) * adjustableCapacity
            const remainingRequired = required - fixedContribution - adjustableBase;
            const recommendedFee = currentRecommendation + (remainingRequired / adjustableCapacity);
            
            return Math.max(currentRecommendation, recommendedFee);
        });
        
        avgMembershipFeeChart = new Chart(ctxAvgFee, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Durchschnittlicher Mitgliedsbeitrag',
                    data: avgFees,
                    borderColor: '#28a745',
                    backgroundColor: 'rgba(40, 167, 69, 0.1)',
                    fill: false,
                    tension: 0.1
                }, {
                    label: 'Benötigter Beitrag',
                    data: requiredFees,
                    borderColor: '#dc3545',
                    backgroundColor: 'rgba(220, 53, 69, 0.1)',
                    fill: false,
                    tension: 0.1,
                    borderDash: [5, 5]
                }, {
                    label: 'Empfohlener Beitrag (bei aktueller Verteilung)',
                    data: recommendedFees,
                    borderColor: '#ffc107',
                    backgroundColor: 'rgba(255, 193, 7, 0.1)',
                    fill: false,
                    tension: 0.1,
                    borderDash: [10, 5]
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: true,
                        position: 'top'
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            callback: function(value) {
                                return formatEuro(value);
                            }
                        }
                    },
                    x: {
                        ticks: {
                            maxTicksLimit: 12
                        }
                    }
                }
            }
        });
        
        // Update fee projection table
        const feeTableBody = document.getElementById('fee-projection-table-body');
        feeTableBody.innerHTML = '';
        
        // Get January 1st of each year from the data
        const januaryData = data.filter(d => d.date.getMonth() === 0 && d.date.getDate() === 1);
        
        januaryData.forEach(function(row) {
            const year = row.date.getFullYear();
            const recommendedFee = recommendedFees[data.indexOf(row)];
            const increase = recommendedFee - 25; // Increase from baseline
            
            // Calculate what each group would pay based on their adjustment capacity
            const groupFees = groups.map(group => {
                return group.avg + (increase * group.adjustment * group.ratio);
            });
            
            // Calculate percentage of original fee (100% = no change)
            const groupPercentages = groups.map((group, i) => {
                return (groupFees[i] / group.avg) * 100;
            });
            
            const tr = document.createElement('tr');
            tr.innerHTML = `
                <td><strong>${year}</strong></td>
                <td class="text-right">${groupPercentages[0].toFixed(0)}%</td>
                <td class="text-right">${groupPercentages[1].toFixed(0)}%</td>
                <td class="text-right">${groupPercentages[2].toFixed(0)}%</td>
                <td class="text-right">${groupPercentages[3].toFixed(0)}%</td>
                <td class="text-right">${groupPercentages[4].toFixed(0)}%</td>
                <td class="text-right">${groupPercentages[5].toFixed(0)}%</td>
                <td class="text-right">${groupPercentages[6].toFixed(0)}%</td>
                <td class="text-right">${groupPercentages[7].toFixed(0)}%</td>
                <td class="text-right">${groupPercentages[8].toFixed(0)}%</td>
            `;
            feeTableBody.appendChild(tr);
        });
        
        // Update table
        const tbody = document.getElementById('prognose-table-body');
        tbody.innerHTML = '';
        
        data.forEach(function(row, index) {
            const tr = document.createElement('tr');
            const balanceClass = row.balance < 0 ? 'text-danger' : 'text-success';
            const saldoClass = row.saldo < 0 ? 'text-danger' : 'text-success';
            
            tr.innerHTML = `
                <td>${row.dateStr}</td>
                <td class="text-right">${row.mitglieder}</td>
                <td class="text-right">${formatEuro(row.mitgliedsbeitraege)}</td>
                <td class="text-right ${balanceClass}"><strong>${formatEuro(row.balance)}</strong></td>
                <td class="text-right">${formatEuro(row.income)}</td>
                <td class="text-right">${formatEuro(row.expenses)}</td>
                <td class="text-right ${saldoClass}">${formatEuro(row.saldo)}</td>
            `;
            tbody.appendChild(tr);
        });
        
        // Update income and expense charts
        updateIncomeChart(data);
        updateExpenseChart(data);
        
        // Update reserve scenarios table
        updateReserveScenarios();
    }
    
    function updateReserveScenarios() {
        const ruecklagen = [20000, 30000, 35000, 40000, 45000, 50000];
        
        // Get base parameters from DOM
        const inflationRate = document.getElementById('inflation-rate').value === '' ? 2.5 : parseFloat(document.getElementById('inflation-rate').value);
        const inflateMembershipFees = document.getElementById('inflate-membership-fees').checked;
        const membershipFeeIncreaseRate = inflateMembershipFees 
            ? (parseFloat(document.getElementById('membership-fee-increase').value) || inflationRate)
            : 0;
        
        const baseParams = {
            umzugsdatum: document.getElementById('umzugsdatum').value || '2027-01-01',
            umzugskosten: parseInputValue(document.getElementById('umzugskosten')),
            inflationRate: inflationRate,
            inflateMembershipFees: inflateMembershipFees,
            membershipFeeIncreaseRate: membershipFeeIncreaseRate,
            einnahmenItems: collectItems('.plan-einnahme', '.dauer-einnahme'),
            ausgabenItems: collectItems('.plan-ausgabe', '.dauer-ausgabe'),
            startMitglieder: parseInt(document.getElementById('mitgliederzahl').value) || 92,
            maxMitglieder: parseInt(document.getElementById('plan-max-mitglieder').value) || 140,
            eintritteProJahr: 0,  // NO new members for this calculation
            austritteProJahr: 0,  // NO exits for this calculation
            monateDoppelmiete: parseInt(document.getElementById('monate-doppelmiete').value) || 0
        };
        
        ruecklagen.forEach(function(reserve) {
            const reichweiteEl = document.getElementById('reichweite-' + reserve);
            const mitgliederEl = document.getElementById('mitglieder-' + reserve);
            
            // Calculate projection with NO member growth
            const data = calculateProjectionWithParams(reserve, baseParams);
            
            // Find when balance goes negative
            const negativeIndex = data.findIndex(d => d.balance < 0);
            
            if (negativeIndex === -1) {
                // Never goes negative in 10 years
                reichweiteEl.innerHTML = '<span class="text-success"><i class="fas fa-check-circle"></i> >10 Jahre</span>';
                mitgliederEl.innerHTML = '<span class="text-success">0</span>';
            } else {
                // Format the duration
                const jahre = Math.floor(negativeIndex / 12);
                const monate = negativeIndex % 12;
                const dateStr = data[negativeIndex].dateStr;
                
                let dauer = '';
                if (jahre > 0) {
                    dauer = jahre + ' Jahr' + (jahre > 1 ? 'e' : '');
                    if (monate > 0) {
                        dauer += ', ' + monate + ' Monat' + (monate > 1 ? 'e' : '');
                    }
                } else {
                    dauer = negativeIndex + ' Monat' + (negativeIndex > 1 ? 'e' : '');
                }
                dauer += ' <small class="text-muted">(' + dateStr + ')</small>';
                
                const colorClass = negativeIndex < 12 ? 'text-danger' : (negativeIndex < 24 ? 'text-warning' : '');
                reichweiteEl.innerHTML = '<span class="' + colorClass + '">' + dauer + '</span>';
                
                // Binary search to find minimum members per year needed to prevent going negative
                let low = 0;
                let high = 200;
                let neededMembersPerYear = high;
                
                while (low <= high) {
                    const mid = Math.floor((low + high) / 2);
                    
                    // Test with this many new members per year
                    const testParams = { ...baseParams, eintritteProJahr: mid };
                    const testData = calculateProjectionWithParams(reserve, testParams);
                    const goesNegative = testData.some(d => d.balance < 0);
                    
                    if (goesNegative) {
                        // Need more members
                        low = mid + 1;
                    } else {
                        // This works, try fewer
                        neededMembersPerYear = mid;
                        high = mid - 1;
                    }
                }
                
                const totalMembers = neededMembersPerYear * 10;
                mitgliederEl.innerHTML = '<strong>' + neededMembersPerYear + '</strong> pro Jahr<br><small class="text-muted">(' + totalMembers + ' insgesamt)</small>';
            }
        });
        
        // ERFA Zuschuss warning - check if ERFA subsidy is needed
        const erfaWarning = document.getElementById('erfa-warning');
        const erfaWarningText = document.getElementById('erfa-warning-text');
        
        // Get ERFA amount from einnahmen
        const erfaItem = baseParams.einnahmenItems.find(item => item.name === 'Erfa-Zuschuss');
        const erfaAmount = erfaItem ? erfaItem.betrag : 0;
        
        if (erfaAmount > 0) {
            // Calculate projection with current settings
            const projectionData = calculateProjection(45000); // Use 45k as reference
            
            // Find the LAST month where ERFA is needed (saldo without ERFA < 0)
            let lastErfaNeededMonth = null;
            for (let i = projectionData.length - 1; i >= 0; i--) {
                const saldoWithoutErfa = projectionData[i].saldo - erfaAmount;
                if (saldoWithoutErfa < 0) {
                    lastErfaNeededMonth = projectionData[i];
                    break;
                }
            }
            
            if (lastErfaNeededMonth === null) {
                // ERFA never needed - green
                erfaWarning.className = 'alert alert-success';
                erfaWarningText.textContent = 'Der Erfa-Zuschuss wird nicht zur Deckung laufender Kosten benötigt.';
                erfaWarning.style.display = 'block';
            } else if (lastErfaNeededMonth === projectionData[projectionData.length - 1]) {
                // ERFA needed until the end - red
                erfaWarning.className = 'alert alert-danger';
                erfaWarningText.textContent = 'Das aktuelle Rechenbeispiel nutzt den Erfa-Zuschuss zur Deckung laufender Kosten über die gesamten 10 Jahre. Dies ist nicht explizit verboten, aber auch nicht so gewünscht von einigen im CCC.';
                erfaWarning.style.display = 'block';
            } else {
                // ERFA needed until a certain date - yellow
                erfaWarning.className = 'alert alert-warning';
                erfaWarningText.textContent = 'Das aktuelle Rechenbeispiel nutzt den Erfa-Zuschuss zur Deckung laufender Kosten bis ' + lastErfaNeededMonth.dateStr + '. Dies ist nicht explizit verboten, aber auch nicht so gewünscht von einigen im CCC.';
                erfaWarning.style.display = 'block';
            }
        } else {
            erfaWarning.style.display = 'none';
        }
    }

    function updateIncomeChart(data) {
        console.log('Updating income chart with data:', data);
        const ctx = document.getElementById('income-chart').getContext('2d');
        
        if (incomeChart) {
            incomeChart.destroy();
        }
        
        const labels = data.map(d => d.dateStr);
        
        // Get all unique income categories
        const allCategories = new Set();
        data.forEach(function(month) {
            Object.keys(month.incomeBreakdown).forEach(cat => allCategories.add(cat));
        });
        
        const categories = Array.from(allCategories);
        console.log('Income categories found:', categories);
        
        // Create datasets for each category
        const datasets = categories.map(function(category, index) {
            const colors = [
                '#28a745', '#20c997', '#17a2b8', '#6f42c1', '#e83e8c',
                '#fd7e14', '#ffc107', '#6610f2', '#6c757d', '#343a40'
            ];
            const color = colors[index % colors.length];
            
            const categoryData = data.map(d => d.incomeBreakdown[category] || 0);
            console.log(`Category "${category}" data:`, categoryData.slice(0, 3), '...');
            
            return {
                label: category,
                data: categoryData,
                backgroundColor: color,
                borderColor: color,
                borderWidth: 1
            };
        });
        
        incomeChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: datasets
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: true,
                        position: 'top',
                        labels: {
                            boxWidth: 12,
                            padding: 10,
                            font: {
                                size: 11
                            }
                        }
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return context.dataset.label + ': ' + formatEuro(context.raw);
                            }
                        }
                    }
                },
                scales: {
                    x: {
                        stacked: true,
                        ticks: {
                            maxTicksLimit: 12,
                            font: {
                                size: 10
                            }
                        }
                    },
                    y: {
                        stacked: true,
                        beginAtZero: true,
                        ticks: {
                            callback: function(value) {
                                return formatEuro(value);
                            }
                        }
                    }
                }
            }
        });
    }

    function updateExpenseChart(data) {
        const ctx = document.getElementById('expense-chart').getContext('2d');
        
        if (expenseChart) {
            expenseChart.destroy();
        }
        
        const labels = data.map(d => d.dateStr);
        
        // Get all unique expense categories
        const allCategories = new Set();
        data.forEach(function(month) {
            Object.keys(month.expenseBreakdown).forEach(cat => allCategories.add(cat));
        });
        
        const categories = Array.from(allCategories);
        
        // Create datasets for each category
        const datasets = categories.map(function(category, index) {
            const colors = [
                '#dc3545', '#fd7e14', '#ffc107', '#e83e8c', '#6f42c1',
                '#17a2b8', '#20c997', '#28a745', '#6c757d', '#343a40'
            ];
            const color = colors[index % colors.length];
            
            return {
                label: category,
                data: data.map(d => d.expenseBreakdown[category] || 0),
                backgroundColor: color,
                borderColor: color,
                borderWidth: 1
            };
        });
        
        expenseChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: datasets
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: true,
                        position: 'top',
                        labels: {
                            boxWidth: 12,
                            padding: 10,
                            font: {
                                size: 11
                            }
                        }
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return context.dataset.label + ': ' + formatEuro(context.raw);
                            }
                        }
                    }
                },
                scales: {
                    x: {
                        stacked: true,
                        ticks: {
                            maxTicksLimit: 12,
                            font: {
                                size: 10
                            }
                        }
                    },
                    y: {
                        stacked: true,
                        beginAtZero: true,
                        ticks: {
                            callback: function(value) {
                                return formatEuro(value);
                            }
                        }
                    }
                }
            }
        });
    }

    // Reserve button handlers
    document.querySelectorAll('.reserve-btn').forEach(function(btn) {
        btn.addEventListener('click', function() {
            document.querySelectorAll('.reserve-btn').forEach(b => b.classList.remove('active'));
            this.classList.add('active');
            selectedReserve = parseInt(this.dataset.reserve);
            updateProjection();
        });
    });

    // Update projection when membership fee inflation checkbox changes
    document.getElementById('inflate-membership-fees').addEventListener('change', function() {
        const isChecked = this.checked;
        const increaseRow = document.getElementById('membership-fee-increase-row');
        const increaseInput = document.getElementById('membership-fee-increase');
        
        if (isChecked) {
            // Show the field and initialize with current inflation rate only if empty
            increaseRow.classList.remove('d-none');
            if (!increaseInput.value || increaseInput.value === '') {
                const inflationRate = parseFloat(document.getElementById('inflation-rate').value) || 2.5;
                increaseInput.value = inflationRate;
            }
        } else {
            // Hide the field
            increaseRow.classList.add('d-none');
        }
        
        updateProjection();
    });
    
    // Update projection when membership fee increase rate changes
    document.getElementById('membership-fee-increase').addEventListener('input', function() {
        updateProjection();
    });

    // Update projection when values change
    const originalCalculateAndUpdate = calculateAndUpdate;
    calculateAndUpdate = function() {
        originalCalculateAndUpdate();
        updateProjection();
    };

    addInputListeners();
    calculateAndUpdate();
    
    // Function to copy anchor link to clipboard
    window.copyAnchorLink = function(event, anchorId) {
        event.preventDefault();
        const url = window.location.origin + window.location.pathname + '#' + anchorId;
        
        navigator.clipboard.writeText(url).then(function() {
            // Show temporary success feedback
            const link = event.currentTarget;
            const icon = link.querySelector('i');
            const originalClass = icon.className;
            
            icon.className = 'fas fa-check';
            link.style.color = '#28a745';
            
            setTimeout(function() {
                icon.className = originalClass;
                link.style.color = '';
            }, 1500);
        }).catch(function(err) {
            console.error('Failed to copy link: ', err);
        });
    };
});
</script>
{% endblock %}