{% load i18n %}

<div hx-get="{% url 'insights_month_by_month' %}" hx-trigger="updated from:window" class="show-loading"
     hx-swap="outerHTML" hx-include="#year-selector, #group-by-selector-month">
  
  {# Hidden input to hold the year value #}
  <input type="hidden" name="year" id="year-selector" value="{{ selected_year }}" _="on change trigger updated">

  {# Tabs for Categories/Tags/Entities #}
  <div class="h-full text-center mb-4">
    <div class="tabs tabs-box mx-auto w-fit" role="group" id="group-by-selector-month" _="on change trigger updated">
      <label class="tab">
        <input type="radio"
               name="group_by"
               id="categories-view-month"
               autocomplete="off"
               value="categories"
               aria-label="{% trans 'Categories' %}"
               {% if group_by == "categories" %}checked{% endif %}>
        <i class="fa-solid fa-icons fa-fw me-2"></i>
        {% trans 'Categories' %}
      </label>
      <label class="tab">
        <input type="radio"
               name="group_by"
               id="tags-view-month"
               autocomplete="off"
               value="tags"
               aria-label="{% trans 'Tags' %}"
               {% if group_by == "tags" %}checked{% endif %}>
        <i class="fa-solid fa-hashtag fa-fw me-2"></i>
        {% trans 'Tags' %}
      </label>
      <label class="tab">
        <input type="radio"
               name="group_by"
               id="entities-view-month"
               autocomplete="off"
               value="entities"
               aria-label="{% trans 'Entities' %}"
               {% if group_by == "entities" %}checked{% endif %}>
        <i class="fa-solid fa-user-group fa-fw me-2"></i>
        {% trans 'Entities' %}
      </label>
    </div>
  </div>

  {% if data.items %}
    <div class="card bg-base-100 card-border">
      <div class="card-body">
        {# Year dropdown - left aligned #}
        {% if data.available_years %}
          <div class="mb-4">
            <div>
              <button class="btn btn-ghost" type="button"
                      data-bs-toggle="dropdown" aria-expanded="false">
                <i class="fa-solid fa-calendar fa-fw me-1"></i>
                {{ selected_year }}
                <i class="fa-solid fa-chevron-down fa-fw ms-1"></i>
              </button>
              <ul class="dropdown-menu menu">
                {% for year in data.available_years %}
                  <li>
                    <button class="{% if year == selected_year %}menu-active{% endif %}" type="button"
                            _="on click remove .menu-active from <li > button/> in the closest <ul/>
                              then add .menu-active to me
                              then set the value of #year-selector to '{{ year }}'
                              then trigger change on #year-selector">
                      {{ year }}
                    </button>
                  </li>
                {% endfor %}
              </ul>
            </div>
          </div>
        {% endif %}
        <div class="overflow-x-auto">

          <table class="table">
            <thead>
              <tr>
                <th scope="col" class="sticky left-0 bg-base-100 z-10">
                  {% if group_by == "categories" %}
                    {% trans 'Category' %}
                  {% elif group_by == "tags" %}
                    {% trans 'Tag' %}
                  {% else %}
                    {% trans 'Entity' %}
                  {% endif %}
                </th>
                <th scope="col" class="font-bold">{% trans 'Total' %}</th>
                {% for month in data.months %}
                  <th scope="col">
                    {% if month == 1 %}{% trans 'Jan' %}
                    {% elif month == 2 %}{% trans 'Feb' %}
                    {% elif month == 3 %}{% trans 'Mar' %}
                    {% elif month == 4 %}{% trans 'Apr' %}
                    {% elif month == 5 %}{% trans 'May' %}
                    {% elif month == 6 %}{% trans 'Jun' %}
                    {% elif month == 7 %}{% trans 'Jul' %}
                    {% elif month == 8 %}{% trans 'Aug' %}
                    {% elif month == 9 %}{% trans 'Sep' %}
                    {% elif month == 10 %}{% trans 'Oct' %}
                    {% elif month == 11 %}{% trans 'Nov' %}
                    {% elif month == 12 %}{% trans 'Dec' %}
                    {% endif %}
                  </th>
                {% endfor %}
              </tr>
            </thead>
            <tbody>
              {% for item_id, item in data.items.items %}
                <tr>
                  <th class="text-nowrap sticky left-0 bg-base-100 z-10">
                    {% if item.name %}
                      {{ item.name }}
                    {% else %}
                      {% if group_by == "categories" %}
                        {% trans 'Uncategorized' %}
                      {% elif group_by == "tags" %}
                        {% trans 'Untagged' %}
                      {% else %}
                        {% trans 'No entity' %}
                      {% endif %}
                    {% endif %}
                  </th>
                  {# Total column for this item #}
                  <td class="text-nowrap font-semibold bg-base-200">
                    {% for currency_id, currency_data in item.total.currencies.items %}
                      <c-amount.display
                          :amount="currency_data.final_total"
                          :prefix="currency_data.currency.prefix"
                          :suffix="currency_data.currency.suffix"
                          :decimal_places="currency_data.currency.decimal_places"
                          color="{% if currency_data.final_total < 0 %}red{% elif currency_data.final_total > 0 %}green{% endif %}"></c-amount.display>
                      {% if currency_data.exchanged %}
                        <div class="text-xs text-base-content/60">
                          <c-amount.display
                              :amount="currency_data.exchanged.final_total"
                              :prefix="currency_data.exchanged.currency.prefix"
                              :suffix="currency_data.exchanged.currency.suffix"
                              :decimal_places="currency_data.exchanged.currency.decimal_places"></c-amount.display>
                        </div>
                      {% endif %}
                    {% empty %}
                      -
                    {% endfor %}
                  </td>
                  {# Month columns #}
                  {% for month in data.months %}
                    <td class="text-nowrap">
                      {% with month_data=item.month_totals %}
                        {% for m, m_data in month_data.items %}
                          {% if m == month %}
                            {% for currency_id, currency_data in m_data.currencies.items %}
                              <c-amount.display
                                  :amount="currency_data.final_total"
                                  :prefix="currency_data.currency.prefix"
                                  :suffix="currency_data.currency.suffix"
                                  :decimal_places="currency_data.currency.decimal_places"
                                  color="{% if currency_data.final_total < 0 %}red{% elif currency_data.final_total > 0 %}green{% endif %}"></c-amount.display>
                              {% if currency_data.exchanged %}
                                <div class="text-xs text-base-content/60">
                                  <c-amount.display
                                      :amount="currency_data.exchanged.final_total"
                                      :prefix="currency_data.exchanged.currency.prefix"
                                      :suffix="currency_data.exchanged.currency.suffix"
                                      :decimal_places="currency_data.exchanged.currency.decimal_places"></c-amount.display>
                                </div>
                              {% endif %}
                            {% empty %}
                              -
                            {% endfor %}
                          {% endif %}
                        {% empty %}
                          -
                        {% endfor %}
                      {% endwith %}
                    </td>
                  {% endfor %}
                </tr>
              {% endfor %}
            </tbody>
            <tfoot>
              <tr class="font-bold bg-base-200">
                <th class="sticky left-0 bg-base-200 z-10">{% trans 'Total' %}</th>
                {# Grand total #}
                <td class="text-nowrap bg-base-300">
                  {% for currency_id, currency_data in data.grand_total.currencies.items %}
                    <c-amount.display
                        :amount="currency_data.final_total"
                        :prefix="currency_data.currency.prefix"
                        :suffix="currency_data.currency.suffix"
                        :decimal_places="currency_data.currency.decimal_places"
                        color="{% if currency_data.final_total < 0 %}red{% elif currency_data.final_total > 0 %}green{% endif %}"></c-amount.display>
                    {% if currency_data.exchanged %}
                      <div class="text-xs text-base-content/60">
                        <c-amount.display
                            :amount="currency_data.exchanged.final_total"
                            :prefix="currency_data.exchanged.currency.prefix"
                            :suffix="currency_data.exchanged.currency.suffix"
                            :decimal_places="currency_data.exchanged.currency.decimal_places"></c-amount.display>
                      </div>
                    {% endif %}
                  {% empty %}
                    -
                  {% endfor %}
                </td>
                {# Month totals #}
                {% for month in data.months %}
                  <td class="text-nowrap">
                    {% with month_total=data.month_totals %}
                      {% for m, m_data in month_total.items %}
                        {% if m == month %}
                          {% for currency_id, currency_data in m_data.currencies.items %}
                            <c-amount.display
                                :amount="currency_data.final_total"
                                :prefix="currency_data.currency.prefix"
                                :suffix="currency_data.currency.suffix"
                                :decimal_places="currency_data.currency.decimal_places"
                                color="{% if currency_data.final_total < 0 %}red{% elif currency_data.final_total > 0 %}green{% endif %}"></c-amount.display>
                            {% if currency_data.exchanged %}
                              <div class="text-xs text-base-content/60">
                                <c-amount.display
                                    :amount="currency_data.exchanged.final_total"
                                    :prefix="currency_data.exchanged.currency.prefix"
                                    :suffix="currency_data.exchanged.currency.suffix"
                                    :decimal_places="currency_data.exchanged.currency.decimal_places"></c-amount.display>
                              </div>
                            {% endif %}
                          {% empty %}
                            -
                          {% endfor %}
                        {% endif %}
                      {% empty %}
                        -
                      {% endfor %}
                    {% endwith %}
                  </td>
                {% endfor %}
              </tr>
            </tfoot>
          </table>
        </div>
      </div>
    </div>
  {% else %}
    <c-msg.empty title="{% translate 'No transactions for this year' %}"></c-msg.empty>
  {% endif %}
</div>