{% extends 'base.html' %}
{% load humanize %}

{% block title %}月次レポート{% endblock %}

{% block content %}
  <section>
    <h2>月次レポート</h2>
    <form method="get">
      <label>
        開始日
        <input type="date" name="start_date" value="{{ start_date }}">
      </label>
      <label>
        終了日
        <input type="date" name="end_date" value="{{ end_date }}">
      </label>
      <label>
        <input type="checkbox" name="all_time" value="1" {% if all_time %}checked{% endif %}>
        全期間
      </label>
      <label>
        店舗区分
        <select name="store_id">
          <option value="" {% if not selected_store %}selected{% endif %}>全て</option>
          <option value="unassigned" {% if selected_store == "unassigned" %}selected{% endif %}>
            未設定
          </option>
          {% for store in stores %}
            <option value="{{ store.id }}" {% if selected_store == store.id|stringformat:"s" %}selected{% endif %}>
              {{ store.name }}
            </option>
          {% endfor %}
        </select>
      </label>
      <label>
        経費区分
        <select name="expense_category_id">
          <option value="" {% if not selected_category %}selected{% endif %}>全て</option>
          <option value="unassigned" {% if selected_category == "unassigned" %}selected{% endif %}>
            未設定
          </option>
          {% for category in categories %}
            <option value="{{ category.id }}" {% if selected_category == category.id|stringformat:"s" %}selected{% endif %}>
              {{ category.name }}
            </option>
          {% endfor %}
        </select>
      </label>
      <label>
        利用先
        <input type="search" name="description" value="{{ description_query }}">
      </label>
      <input type="hidden" name="show" value="1">
      <button type="submit">表示</button>
      {% if show_report %}
        <a
          href="{% url 'monthly_report_pdf' %}?start_date={{ start_date }}&end_date={{ end_date }}&store_id={{ selected_store }}&expense_category_id={{ selected_category }}&description={{ description_query|urlencode }}&all_time={% if all_time %}1{% endif %}"
          target="_blank"
          rel="noopener"
        >
          PDF出力
        </a>
      {% endif %}
    </form>
    <script>
      const startInput = document.querySelector('input[name="start_date"]');
      const endInput = document.querySelector('input[name="end_date"]');
      const allTimeInput = document.querySelector('input[name="all_time"]');
      if (startInput && endInput && allTimeInput) {
        const syncAllTime = () => {
          if (startInput.value || endInput.value) {
            allTimeInput.checked = false;
          }
        };
        startInput.addEventListener('change', syncAllTime);
        endInput.addEventListener('change', syncAllTime);
        allTimeInput.addEventListener('change', () => {
          if (allTimeInput.checked) {
            startInput.value = '';
            endInput.value = '';
          }
        });
      }
    </script>
    {% if error_message %}
      <p style="color: #b00020;">{{ error_message }}</p>
    {% endif %}
    {% if not show_report %}
      <p>条件を指定して表示ボタンを押してください。</p>
    {% else %}
    <div>
      <h3>合計</h3>
      <p class="amount">{{ report.total_amount|intcomma }} 円</p>
    </div>
    <div>
      <h3>店舗別合計</h3>
      <table>
        <thead>
          <tr>
            <th>店舗</th>
            <th>件数</th>
            <th class="amount">金額</th>
          </tr>
        </thead>
        <tbody>
          {% for row in report.store_totals %}
            <tr>
              <td>{{ row.store__name|default:"未設定" }}</td>
              <td>{{ row.count }}</td>
              <td class="amount">{{ row.total|intcomma }}</td>
            </tr>
          {% empty %}
            <tr>
              <td colspan="3">対象データがありません。</td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
      {% for row in report.store_totals %}
        <h4>{{ row.store__name|default:"未設定" }} の明細</h4>
        <table>
          <thead>
            <tr>
              <th>日付</th>
              <th>経費区分</th>
              <th>利用先</th>
              <th class="amount">金額</th>
              <th>備考</th>
            </tr>
          </thead>
          <tbody>
            {% for detail in row.details %}
              <tr>
                <td>{{ detail.use_date }}</td>
                <td>{{ detail.expense_category_name|default:"未設定" }}</td>
                <td>{{ detail.description }}</td>
                <td class="amount">{{ detail.amount|intcomma }}</td>
                <td>{{ detail.note }}</td>
              </tr>
            {% empty %}
              <tr>
                <td colspan="5">対象データがありません。</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      {% endfor %}
    </div>
    <div>
      <h3>経費区分別合計</h3>
      <table>
        <thead>
          <tr>
            <th>経費区分</th>
            <th>件数</th>
            <th class="amount">金額</th>
          </tr>
        </thead>
        <tbody>
          {% for row in report.category_totals %}
            <tr>
              <td>{{ row.expense_category__name|default:"未設定" }}</td>
              <td>{{ row.count }}</td>
              <td class="amount">{{ row.total|intcomma }}</td>
            </tr>
          {% empty %}
            <tr>
              <td colspan="3">対象データがありません。</td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
      {% for row in report.category_totals %}
        <h4>{{ row.expense_category__name|default:"未設定" }} の明細</h4>
        <table>
          <thead>
            <tr>
              <th>日付</th>
              <th>経費区分</th>
              <th>利用先</th>
              <th class="amount">金額</th>
              <th>備考</th>
            </tr>
          </thead>
          <tbody>
            {% for detail in row.details %}
              <tr>
                <td>{{ detail.use_date }}</td>
                <td>{{ detail.expense_category_name|default:"未設定" }}</td>
                <td>{{ detail.description }}</td>
                <td class="amount">{{ detail.amount|intcomma }}</td>
                <td>{{ detail.note }}</td>
              </tr>
            {% empty %}
              <tr>
                <td colspan="5">対象データがありません。</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      {% endfor %}
    </div>
    <div>
      <h3>区分別合計</h3>
      <table>
        <thead>
          <tr>
            <th>区分</th>
            <th>件数</th>
            <th class="amount">金額</th>
          </tr>
        </thead>
        <tbody>
          {% for row in report.owner_totals %}
            <tr>
              <td>{{ row.owner_type }}</td>
              <td>{{ row.count }}</td>
              <td class="amount">{{ row.total|intcomma }}</td>
            </tr>
          {% empty %}
            <tr>
              <td colspan="3">対象データがありません。</td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
      {% for row in report.owner_totals %}
        <h4>{{ row.owner_type }} の明細</h4>
        <table>
          <thead>
            <tr>
              <th>日付</th>
              <th>経費区分</th>
              <th>利用先</th>
              <th class="amount">金額</th>
              <th>備考</th>
            </tr>
          </thead>
          <tbody>
            {% for detail in row.details %}
              <tr>
                <td>{{ detail.use_date }}</td>
                <td>{{ detail.expense_category_name|default:"未設定" }}</td>
                <td>{{ detail.description }}</td>
                <td class="amount">{{ detail.amount|intcomma }}</td>
                <td>{{ detail.note }}</td>
              </tr>
            {% empty %}
              <tr>
                <td colspan="5">対象データがありません。</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      {% endfor %}
    </div>
    <div>
      <h3>未分類件数</h3>
      <ul>
        <li>店舗未設定: {{ report.unclassified_counts.store_missing }}</li>
        <li>経費区分未設定: {{ report.unclassified_counts.category_missing }}</li>
        <li>区分未設定: {{ report.unclassified_counts.owner_pending }}</li>
        <li>対象総件数: {{ report.unclassified_counts.total }}</li>
      </ul>
    </div>
    {% endif %}
  </section>
{% endblock %}