{% extends "base.html" %}
{% set page = "product" %}
{% block content %}
<div class="card">
  <div class="card-title">🔍 品種別レポート / Product Report</div>
  {% if items %}
  <div class="grid-2">
    <div>
      <div class="form-group">
        <label class="form-label">品種選択 / Select Product</label>
        <div class="table-wrap" style="max-height:260px; overflow-y:auto;">
          <table>
            <thead><tr><th style="width:40px;"></th><th>品種No.</th><th>製品名 / Product Name</th></tr></thead>
            <tbody>
              {% for item in items %}
              <tr onclick="selectProduct(this,'{{ item.no }}')" style="cursor:pointer;">
                <td><input type="radio" name="psel" class="cb"></td>
                <td>{{ item.no }}</td><td>{{ item.name or "-" }}</td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div>
      <div class="form-group">
        <label class="form-label">開始日 / Date From</label>
        <input type="date" class="form-control" id="date-from" value="{{ date_from or '' }}">
      </div>
      <div class="form-group">
        <label class="form-label">終了日 / Date To</label>
        <input type="date" class="form-control" id="date-to" value="{{ date_to or '' }}">
      </div>
    </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 selProduct = '';
function selectProduct(tr, no) {
  document.querySelectorAll('tr.row-selected').forEach(r=>r.classList.remove('row-selected'));
  tr.classList.add('row-selected');
  tr.querySelector('input').checked=true;
  selProduct=no;
  document.getElementById('btn-gen').disabled=false;
}
async function generate() {
  if (!selProduct) return;
  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/product',{
    product_no: selProduct,
    date_from: document.getElementById('date-from').value,
    date_to: document.getElementById('date-to').value,
  });
  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 %}