{% extends "base.html" %}
{% set page = "monthly" %}
{% block content %}
<div class="card">
  <div class="card-title">📅 月次レポート / Monthly Report</div>
  {% if months %}
  <div class="form-group">
    <label class="form-label">対象月・ライン / Select Month & Line</label>
    <div class="table-wrap" style="max-height:320px; overflow-y:auto;">
      <table>
        <thead><tr><th style="width:40px;"></th><th>月 / Month</th><th>ライン / Line</th><th>件数 / Records</th></tr></thead>
        <tbody>
          {% for m in months %}
          <tr onclick="selectRow(this,'{{ m.month }}','{{ m.line_no }}')" style="cursor:pointer;">
            <td><input type="radio" name="sel" class="cb"></td>
            <td>{{ m.month }}</td><td>{{ m.line_no }}</td><td>{{ "{:,}".format(m.total) }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  <div id="status-area" style="display:none; margin-bottom:12px;"></div>
  <button class="btn btn-primary" id="btn-gen" onclick="generate()" disabled>
    <span id="btn-icon">📅</span>
    <span id="btn-text">レポート生成 / Generate</span>
  </button>
  {% else %}
  <div style="color:var(--text-sub); font-size:13px; padding:16px; background:#f5f5f5; border-radius:8px;">⚠️ データがありません。</div>
  {% endif %}
</div>
<div class="card" id="log-card" style="display:none;">
  <div class="card-title">📋 進捗ログ / Progress</div>
  <div class="log-box" id="log-box"></div>
  <div style="margin-top:12px;"><a href="/reports" class="btn btn-outline btn-sm">📁 レポート一覧へ</a></div>
</div>
{% endblock %}
{% block scripts %}
<script>
let sel = {month:'', line:''};
function selectRow(tr, month, line) {
  document.querySelectorAll('tr.row-selected').forEach(r=>r.classList.remove('row-selected'));
  tr.classList.add('row-selected');
  tr.querySelector('input').checked=true;
  sel={month,line};
  document.getElementById('btn-gen').disabled=false;
}
async function generate() {
  const btn=document.getElementById('btn-gen');
  btn.disabled=true;
  document.getElementById('btn-icon').innerHTML='<span class="spinner"></span>';
  document.getElementById('btn-text').textContent='生成中...';
  const sa=document.getElementById('status-area');
  sa.style.display='block';
  sa.innerHTML='<div class="status-bar running">⏳ 生成中...</div>';
  document.getElementById('log-card').style.display='block';
  const res=await post('/api/report/monthly',{month:sel.month,line_no:sel.line});
  startJob(res.job_id,'log-box',(err)=>{
    btn.disabled=false;
    document.getElementById('btn-icon').textContent=err?'❌':'✅';
    document.getElementById('btn-text').textContent=err?'エラー':'完了！';
    sa.innerHTML=err?'<div class="status-bar error">❌ エラー</div>':'<div class="status-bar">✅ 完了！</div>';
  });
}
</script>
{% endblock %}