inwo_vgl/src/main/resources/templates/hhm-einkommen.html

<!DOCTYPE html>
<html lang="de" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>DIWO Vergleich – Haushaltsmitglieder/Einkommen</title>
    <link rel="stylesheet" href="/styles.css"/>
    <!-- JavaScript Module -->
    <script src="/js/cookie-utils.js"></script>
    <script src="/js/ajax-handlers.js"></script>
    <script src="/js/ui-updater.js"></script>
    <script src="/js/interactions.js"></script>
    <script src="/js/color-scheme.js"></script>
    <script src="/js/app.js"></script>
</head>
<body>

  <!-- Header-Fragment einbinden -->
  <div th:replace="~{fragments/header :: header}"></div>

  <!-- Vergleichslegende-Fragment einbinden -->
  <div th:replace="~{fragments/legend :: legend}"></div>

  <!-- Haushaltsmitglieder - erweiterte Tabelle mit aufklappbaren Zeilen -->
  <main role="main">
    <div class="section-container">
      <div class="section-header" onclick="toggleSection('haushaltsmitglieder')" role="button" tabindex="0" 
           onkeypress="handleKeyPress(event, 'haushaltsmitglieder')" aria-expanded="true" aria-controls="haushaltsmitglieder-content">
        <span class="toggle-icon" id="haushaltsmitglieder-icon" aria-hidden="true">▼</span>
        <h3>Haushaltsmitglieder</h3>
      </div>
      <div class="section-content" id="haushaltsmitglieder-content">
        <table role="table" aria-labelledby="haushaltsmitglieder-caption" class="expandable-table" id="haushaltsmitglieder-table">
          <thead>
            <tr>
              <th scope="col" class="expand-col"></th>
              <th scope="col">Änderung</th>
              <th scope="col">Name</th>
              <th scope="col">Blockname</th>
              <th scope="col">Geburtsdatum</th>
              <th scope="col">Sterbedatum</th>
              <th scope="col">Familienstand</th>
              <th scope="col">Geschlecht</th>
              <th scope="col">Anrede</th>
              <th scope="col">Verwandtschaft</th>
              <th scope="col">Ausschlussgrund</th>
              <th scope="col">Soz. Stellung</th>
              <th scope="col">Antragsteller</th>
              <th scope="col">Zahlungsempfänger</th>
              <th scope="col">Ende Aufenthaltstitel</th>
            </tr>
          </thead>
          <tbody>
            <th:block th:each="r : ${mitgliederRows}">
              <!-- Hauptzeile -->
              <tr th:class="'person-row ' + ${r.rowClass} + ((${r.personId} == ${personId}) ? ' person-selected' : '')"
                  th:data-person-id="${r.personId}"
                  role="button"
                  tabindex="0"
                  th:aria-label="'Person auswählen: ' + ${r.nameHtml}"
                  onkeypress="handleRowKeyPress(event, this)">
                <td class="expand-col">
                  <button type="button" 
                          class="expand-btn" 
                          th:data-person-id="${r.personId}"
                          onclick="togglePersonDetailsFromButton(this)"
                          onkeypress="handleExpandKeyPressFromButton(event, this)"
                          aria-expanded="false"
                          th:aria-controls="'person-details-' + ${r.personId}"
                          th:aria-label="'Details für ' + ${r.nameHtml} + ' anzeigen'">
                    <span aria-hidden="true">▶</span>
                  </button>
                </td>
                <td class="sym" th:classappend="' ' + ${r.symbolClass}" th:text="${r.symbol}" 
                    th:aria-label="${r.symbol == '+' ? 'Hinzugefügt' : (r.symbol == '-' ? 'Gelöscht' : (r.symbol == '!' ? 'Geändert' : 'Unverändert'))}"></td>
                <td th:utext="${r.nameHtml}"></td>
                <td th:utext="${r.blocknameHtml}"></td>
                <td th:utext="${r.geburtsdatumHtml}"></td>
                <td th:utext="${r.sterbedatumHtml}"></td>
                <td th:utext="${r.familienstandHtml}"></td>
                <td th:utext="${r.geschlechtHtml}"></td>
                <td th:utext="${r.anredeHtml}"></td>
                <td th:utext="${r.verwandtschaftHtml}"></td>
                <td th:utext="${r.ausschlussgrundHtml}"></td>
                <td th:utext="${r.sozialstellungHtml}"></td>
                <td th:utext="${r.antragstellerHtml}"></td>
                <td th:utext="${r.zahlungsempfaengerHtml}"></td>
                <td th:utext="${r.aufenthaltstitelEndeHtml}"></td>
              </tr>
              
              <!-- Aufklappbare Detailzeile -->
              <tr th:id="'person-details-' + ${r.personId}" 
                  class="person-details-row hidden"
                  th:aria-labelledby="'person-details-label-' + ${r.personId}">
                <td colspan="15" class="details-cell">
                  <div class="details-container">
                    <table class="details-table">
                      <tbody>
                        <tr>
                          <td class="detail-label">Titel:</td>
                          <td th:utext="${r.titelHtml}"></td>
                          <td class="detail-label">Geburtsort:</td>
                          <td th:utext="${r.geburtsortHtml}"></td>
                          <td class="detail-label">Telefon:</td>
                          <td th:utext="${r.telefonHtml}"></td>
                          <td class="detail-label">Aktenzeichen Soz.:</td>
                          <td th:utext="${r.aktenzeichenSozialHtml}"></td>
                        </tr>
                        <tr>
                          <td class="detail-label">Geburtsname:</td>
                          <td th:utext="${r.geburtsnameHtml}"></td>
                          <td class="detail-label">Alter Name:</td>
                          <td th:utext="${r.alterNameHtml}"></td>
                          <td class="detail-label">E-Mail:</td>
                          <td th:utext="${r.emailHtml}"></td>
                          <td class="detail-label">Postabrutionsnummer:</td>
                          <td th:utext="${r.postabrutionsnummerHtml}"></td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </td>
              </tr>
            </th:block>
          </tbody>
        </table>
      </div>
    </div>

    <!-- Hidden data for AJAX requests -->
    <div id="ajax-data" style="display: none;" aria-hidden="true">
      <input type="hidden" id="leftJson" th:value="${leftJson}"/>
      <input type="hidden" id="rightJson" th:value="${rightJson}"/>
      <input type="hidden" id="leftVorgangId" th:value="${leftVorgangId}"/>
      <input type="hidden" id="leftZeitraumId" th:value="${leftZeitraumId}"/>
      <input type="hidden" id="rightZeitraumId" th:value="${rightZeitraumId}"/>
      <input type="hidden" id="currentPersonId" th:value="${personId}"/>
    </div>

    <h2 id="person-details-title">Details zu <span th:if="${personLabel != null and !#strings.isEmpty(personLabel) and personLabel != '(keine Person)'}"><span th:text="${personLabel}"> - </span></span></h2>
    
    <!-- Einkommen -->
    <div class="section-container">
      <div class="section-header" onclick="toggleSection('einkommen')" role="button" tabindex="0" 
           onkeypress="handleKeyPress(event, 'einkommen')" aria-expanded="true" aria-controls="einkommen-content">
        <span class="toggle-icon" id="einkommen-icon" aria-hidden="true">▼</span>
        <h3>Einkommen</h3>
      </div>
      <div class="section-content" id="einkommen-content">
        <table role="table" aria-labelledby="einkommen-caption" id="einkommen-table">
          <thead>
            <tr>
              <th scope="col">Änderung</th>
              <th scope="col">Art</th>
              <th scope="col">Ergänzung</th>
              <th scope="col">Faktor</th>
              <th scope="col">Betrag</th>
              <th scope="col">Zuschlag</th>
              <th scope="col">Abschlag</th>
              <th scope="col">Werbungskosten</th>
            </tr>
          </thead>
          <tbody>
            <tr th:each="z : ${einkommenZeilen}" th:class="${z.rowClass}">
              <td class="sym" th:classappend="' ' + ${z.symbolClass}" th:text="${z.symbol}"
                  th:aria-label="${z.symbol == '+' ? 'Hinzugefügt' : (z.symbol == '-' ? 'Gelöscht' : (z.symbol == '!' ? 'Geändert' : 'Unverändert'))}"></td>
              <td th:utext="${z.artHtml}"></td>
              <td th:utext="${z.artZusatzHtml}"></td>
              <td th:utext="${z.faktorHtml}"></td>
              <td th:utext="${z.betragHtml}"></td>
              <td th:utext="${z.zuschlagHtml}"></td>
              <td th:utext="${z.abschlagHtml}"></td>
              <td th:utext="${z.werbungskostenHtml}"></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div class="freibetrag-container">
      <div class="freibetrag-section">
        <div class="section-container">
          <div class="section-header" onclick="toggleSection('pauschale')" role="button" tabindex="0" 
               onkeypress="handleKeyPress(event, 'pauschale')" aria-expanded="true" aria-controls="pauschale-content">
            <span class="toggle-icon" id="pauschale-icon" aria-hidden="true">▼</span>
            <h3>Pauschale Abzüge</h3>
          </div>
          <div class="section-content" id="pauschale-content">
            <table role="table" aria-labelledby="pauschale-caption" id="pauschale-table">
              <thead>
                <tr>
                  <th scope="col">Änderung</th>
                  <th scope="col">Art</th>
                  <th scope="col">Faktor</th>
                  <th scope="col">Betrag</th>
                </tr>
              </thead>
              <tbody>
                <tr th:each="z : ${freibetragZeilen}" th:if="${z.typ == 'P'}" th:class="${z.rowClass}">
                  <td class="sym" th:classappend="' ' + ${z.symbolClass}" th:text="${z.symbol}"
                      th:aria-label="${z.symbol == '+' ? 'Hinzugefügt' : (z.symbol == '-' ? 'Gelöscht' : (z.symbol == '!' ? 'Geändert' : 'Unverändert'))}"></td>
                  <td th:utext="${z.artHtml}"></td>
                  <td th:utext="${z.faktorHtml}"></td>
                  <td th:utext="${z.betragHtml}"></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      
      <div class="freibetrag-section">
        <div class="section-container">
          <div class="section-header" onclick="toggleSection('freibetraege')" role="button" tabindex="0" 
               onkeypress="handleKeyPress(event, 'freibetraege')" aria-expanded="true" aria-controls="freibetraege-content">
            <span class="toggle-icon" id="freibetraege-icon" aria-hidden="true">▼</span>
            <h3>Freibeträge</h3>
          </div>
          <div class="section-content" id="freibetraege-content">
            <table role="table" aria-labelledby="freibetraege-caption" id="freibetraege-table">
              <thead>
                <tr>
                  <th scope="col">Änderung</th>
                  <th scope="col">Art</th>
                  <th scope="col">Faktor</th>
                  <th scope="col">Betrag</th>
                  <th scope="col">Frist</th>
                </tr>
              </thead>
              <tbody>
                <tr th:each="z : ${freibetragZeilen}" th:if="${z.typ == 'F'}" th:class="${z.rowClass}">
                  <td class="sym" th:classappend="' ' + ${z.symbolClass}" th:text="${z.symbol}"
                      th:aria-label="${z.symbol == '+' ? 'Hinzugefügt' : (z.symbol == '-' ? 'Gelöscht' : (z.symbol == '!' ? 'Geändert' : 'Unverändert'))}"></td>
                  <td th:utext="${z.artHtml}"></td>
                  <td th:utext="${z.faktorHtml}"></td>
                  <td th:utext="${z.betragHtml}"></td>
                  <td th:utext="${z.fristHtml}"></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    <!-- Kinderbetreuungskosten -->
    <div class="kinderbetreuung-container">
      <div class="section-container">
        <div class="section-header" onclick="toggleSection('kinderbetreuung')" role="button" tabindex="0" 
             onkeypress="handleKeyPress(event, 'kinderbetreuung')" aria-expanded="true" aria-controls="kinderbetreuung-content">
          <span class="toggle-icon" id="kinderbetreuung-icon" aria-hidden="true">▼</span>
          <h3>Kinderbetreuungskosten</h3>
        </div>
        <div class="section-content" id="kinderbetreuung-content">
          <table role="table" aria-labelledby="kinderbetreuung-caption" id="kinderbetreuung-table">
            <thead>
              <tr>
                <th scope="col">Änderung</th>
                <th scope="col">Kind</th>
                <th scope="col">Betrag</th>
              </tr>
            </thead>
            <tbody>
              <tr th:each="z : ${kitaZeilen}" th:class="${z.rowClass}">
                <td class="sym" th:classappend="' ' + ${z.symbolClass}" th:text="${z.symbol}"
                    th:aria-label="${z.symbol == '+' ? 'Hinzugefügt' : (z.symbol == '-' ? 'Gelöscht' : (z.symbol == '!' ? 'Geändert' : 'Unverändert'))}"></td>
                <td th:utext="${z.kindNameHtml}"></td>
                <td th:utext="${z.betragHtml}"></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </main>

</body>
</html>