{% extends "base.html" %}
{% block title %}チケット — 保守デスク{% endblock %}
{% block content %}
<div class="head">
  <h1>チケット</h1>
  <div class="sub">受付から帳票まで、対応の流れをここで。</div>
</div>

<div class="stats">
  <div class="stat {{ 'alert' if stats.open else '' }}"><span class="num">{{ stats.open }}</span><span class="label">対応中</span></div>
  <div class="stat"><span class="num">{{ stats.today }}</span><span class="label">今日の新規</span></div>
  <div class="stat"><span class="num">{{ stats.month_resolved }}</span><span class="label">今月解決</span></div>
</div>

<div class="grid">
  <section class="card">
    <h2>新しいチケット</h2>
    <form method="post" action="/tickets">
      <label>顧客</label>
      <select name="customer_id">
        <option value="">（未選択）</option>
        {% for c in customers %}
        <option value="{{ c.id }}">{{ c.name }}{% if c.system_name %}（{{ c.system_name }}）{% endif %}</option>
        {% endfor %}
      </select>
      <label>タイトル</label>
      <input type="text" name="title" placeholder="件名を入力" required>
      <label>内容（メール本文の貼り付けでOK）</label>
      <textarea name="body" placeholder="メール本文や電話メモの貼り付けでOK"></textarea>
      <div class="form-foot"><button class="btn" type="submit">起票する</button></div>
    </form>
  </section>

  <section class="card">
    <h2>チケット一覧</h2>
    <form method="get" action="/" class="filters">
      <select name="status" onchange="this.form.submit()">
        <option value="">すべての状態</option>
        {% for key, ja in STATUS_JA.items() %}
        <option value="{{ key }}" {{ 'selected' if f_status == key else '' }}>{{ ja }}</option>
        {% endfor %}
      </select>
      <select name="customer_id" onchange="this.form.submit()">
        <option value="">すべての顧客</option>
        {% for c in customers %}
        <option value="{{ c.id }}" {{ 'selected' if f_customer == c.id|string else '' }}>{{ c.name }}</option>
        {% endfor %}
      </select>
      <input type="text" name="q" value="{{ f_q }}" placeholder="キーワード検索">
      <span class="count">{{ tickets|length }}件</span>
    </form>
    {% if tickets %}
    <div class="tablewrap">
      <table>
        <thead><tr><th>#</th><th>状態</th><th>タイトル</th><th>分類</th><th>緊急度</th><th>更新</th></tr></thead>
        <tbody>
          {% for t in tickets %}
          <tr>
            <td class="mono">{{ t.id }}</td>
            <td><span class="badge b-{{ t.status }}">{{ STATUS_JA[t.status] }}</span></td>
            <td class="title"><a href="/tickets/{{ t.id }}">{{ t.title }}</a>
              {% if t.customer_name %}<span class="cust">{{ t.customer_name }}{% if t.customer_system %} / {{ t.customer_system }}{% endif %}</span>{% endif %}
            </td>
            <td>{{ t.category }}</td>
            <td class="urg-{{ t.urgency }}">{{ t.urgency }}</td>
            <td class="mono">{{ t.updated_at[5:] }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% elif f_status or f_customer or f_q %}
    <div class="empty"><div class="emoji">🔍</div><p class="lead">該当するチケットがありません。</p><p>条件を変えて探してみてください。</p></div>
    {% else %}
    <div class="empty"><div class="emoji">🌱</div><p class="lead">まだチケットがありません。</p><p>最初の1件を左のフォームから起票すると、ここに一覧が育っていきます。</p></div>
    {% endif %}
  </section>
</div>
{% endblock %}