@php
  $rows = $readerTrendRows ?? [];
  $totals = $readerTrendTotals ?? ['new_registrations' => 0, 'cancellations' => 0, 'net_day' => 0];
  $fromStr = $readerTrendFromStr ?? '';
  $toStr = $readerTrendToStr ?? '';
  $rangeError = $readerTrendRangeError ?? null;
  $actionUrl = route('scenario.workspace.show', [$account, $scenario, 'reader-trends']);
@endphp

<div class="card scenario-ws-card mb-3">
  <div class="card-body">
    <h2 class="h5 mb-3">読者数推移</h2>
    <p class="text-muted small mb-3">
      日別の新規登録・解除（配信停止）と、その日の終わり時点での有効読者数・累計読者数を表示します。<i class="bi bi-question-circle" data-bs-toggle="tooltip" data-bs-title="解除は「配信停止した日」を基準に集計します。ごく古い読者は停止日の記録が残っていない場合があり、その際は近い値で表示されることがあります。" aria-hidden="true"></i>
    </p>

    @if($rangeError)
      <div class="alert alert-warning py-2 small mb-3">{{ $rangeError }}</div>
    @endif

    <div class="border rounded p-3 mb-4 bg-light">
      <div class="small text-muted fw-semibold mb-2">表示条件</div>
      <form method="get" action="{{ $actionUrl }}" class="row g-2 align-items-end">
        <div class="col-auto">
          <label class="form-label small mb-0">期間（開始）</label>
          <input type="date" name="from" value="{{ $fromStr }}" class="form-control form-control-sm" autocomplete="off">
        </div>
        <div class="col-auto">
          <label class="form-label small mb-0">期間（終了）</label>
          <input type="date" name="to" value="{{ $toStr }}" class="form-control form-control-sm" autocomplete="off">
        </div>
        <div class="col-auto">
          <button type="submit" class="btn btn-success btn-sm">表示</button>
        </div>
      </form>
    </div>

    <div class="table-responsive">
      <table class="table table-sm table-bordered mb-0 align-middle">
        <thead class="table-light">
          <tr>
            <th scope="col">日付</th>
            <th scope="col" class="text-end">新規登録数</th>
            <th scope="col" class="text-end">解除数</th>
            <th scope="col" class="text-end">当日増減<br><span class="fw-normal small text-muted">（新規−解除）</span></th>
            <th scope="col" class="text-end">有効読者数<br><span class="fw-normal small text-muted">（日末）</span></th>
            <th scope="col" class="text-end">総読者数<br><span class="fw-normal small text-muted">（日末・削除除く）</span></th>
          </tr>
        </thead>
        <tbody>
          @forelse($rows as $row)
            <tr>
              <td>{{ $row['date_label'] }}</td>
              <td class="text-end">{{ number_format($row['new_registrations']) }}</td>
              <td class="text-end">{{ number_format($row['cancellations']) }}</td>
              <td class="text-end @if($row['net_day'] > 0) text-success @elseif($row['net_day'] < 0) text-danger @endif">
                @if($row['net_day'] > 0)+@endif{{ number_format($row['net_day']) }}
              </td>
              <td class="text-end">{{ number_format($row['active_readers']) }}</td>
              <td class="text-end">{{ number_format($row['total_readers']) }}</td>
            </tr>
          @empty
            <tr>
              <td colspan="6" class="text-muted text-center py-4">この期間に表示する行がありません。</td>
            </tr>
          @endforelse
        </tbody>
        @if(count($rows) > 0)
          <tfoot class="table-secondary">
            <tr>
              <th scope="row">合計</th>
              <th class="text-end">{{ number_format($totals['new_registrations']) }}</th>
              <th class="text-end">{{ number_format($totals['cancellations']) }}</th>
              <th class="text-end">{{ number_format($totals['net_day']) }}</th>
              <th class="text-end text-muted small fw-normal" colspan="2">—</th>
            </tr>
          </tfoot>
        @endif
      </table>
    </div>

    <div class="mt-3">
      <a href="{{ route('scenario.workspace.show', [$account, $scenario]) }}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-house-door me-1"></i>シナリオ概要へ戻る</a>
      <a href="{{ route('subscriber.index', [$account, $scenario]) }}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-people me-1"></i>読者一覧</a>
    </div>
  </div>
</div>