{% extends "base.html" %}
{% block title %}病人與起病{% endblock %}

{% block content %}
<div class="step-progress">
  <a href="{{ url_for('home') }}">← Dashboard</a>
  <span style="margin-left: var(--space-3);">病人與起病 · Step {{ step_num }} of {{ total_steps }}</span>
  <span class="muted" style="margin-left: auto;">v0.2.2 · 寫 session['patient']</span>
</div>

<h1>病人與起病</h1>
<p class="muted">基本資料會自動套用到推論引擎 (孕/幼/老/體型 confidence 修正)</p>

<form method="POST" action="{{ url_for('intake_basic') }}" id="basic-form">
<div class="inquiry-layout">
<div class="inquiry-main">

  <div class="card">
    <div class="card-title">基本資料</div>

    <div class="symptom-section">
      <div class="head">① 姓名</div>
      <input type="text" name="name" value="{{ patient.get('name', '') }}" placeholder="張大明" style="width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 14px; font-family: inherit;">
    </div>

    <div class="symptom-section">
      <div class="head">② 性別 & 年齡</div>
      <div style="display: flex; gap: var(--space-3); align-items: center;">
        <label style="display: flex; align-items: center; gap: 4px;">
          <input type="radio" name="gender" value="M" {% if patient.get('gender') == 'M' %}checked{% endif %}> 男
        </label>
        <label style="display: flex; align-items: center; gap: 4px;">
          <input type="radio" name="gender" value="F" {% if patient.get('gender') == 'F' %}checked{% endif %}> 女
        </label>
        <label style="display: flex; align-items: center; gap: 4px;">
          <input type="radio" name="gender" value="O" {% if patient.get('gender') == 'O' %}checked{% endif %}> 其他
        </label>
        <span style="margin-left: auto; color: var(--text-muted); font-size: 13px;">年齡</span>
        <input type="number" name="age" min="0" max="120" value="{{ patient.get('age', 40) }}" style="width: 80px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 14px;"> 歲
      </div>
    </div>

    <div class="symptom-section" id="pregnancy-section" style="{% if patient.get('gender') == 'F' %}display: block;{% else %}display: none;{% endif %}">
      <div class="head">②.b 孕否 (F 才問)</div>
      <div style="display: flex; gap: var(--space-3);">
        <label style="display: flex; align-items: center; gap: 4px;">
          <input type="radio" name="pregnancy" value="no" {% if patient.get('pregnancy', 'no') == 'no' %}checked{% endif %}> 否
        </label>
        <label style="display: flex; align-items: center; gap: 4px;">
          <input type="radio" name="pregnancy" value="yes" {% if patient.get('pregnancy') == 'yes' %}checked{% endif %}> 是 (慎用峻下/有毒方)
        </label>
      </div>
    </div>

    <div class="symptom-section">
      <div class="head">③ 體型 (中醫臨床分類)</div>
      <div style="display: flex; gap: var(--space-2); flex-wrap: wrap;">
        {% set body_options = ['中等', '偏胖', '偏瘦', '體實', '體虛'] %}
        {% for b in body_options %}
        <label style="display: flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer;">
          <input type="radio" name="body_type" value="{{ b }}" {% if patient.get('body_type') == b %}checked{% endif %}> {{ b }}
        </label>
        {% endfor %}
      </div>
    </div>

    <div class="symptom-section">
      <div class="head">④ 習慣 (多選)</div>
      <div style="display: flex; gap: var(--space-2); flex-wrap: wrap;">
        {% for h in ['抽菸', '喝酒', '咖啡', '熬夜', '素食', '運動'] %}
        <label style="display: flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer;">
          <input type="checkbox" name="habits" value="{{ h }}" {% if h in (patient.get('habits') or []) %}checked{% endif %}> {{ h }}
        </label>
        {% endfor %}
      </div>
    </div>

    <div class="symptom-section">
      <div class="head">⑤ 既往病史</div>
      <textarea name="history" rows="3" placeholder="例: 高血壓 5 年、糖尿病 2 年、慢性胃炎..." style="width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 14px; font-family: inherit;">{{ patient.get('history', '') }}</textarea>
    </div>

    <div class="symptom-section">
      <div class="head">⑥ 目前用藥 (選填)</div>
      <textarea name="medication" rows="2" placeholder="例: Amlodipine 5mg qd, Metformin 500mg bid..." style="width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 14px; font-family: inherit;">{{ patient.get('medication', '') }}</textarea>
    </div>

    <div class="symptom-section">
      <div class="head">⑦ 過敏史</div>
      <input type="text" name="allergy" value="{{ patient.get('allergy', '') }}" placeholder="例: 對盤尼西林過敏" style="width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 14px; font-family: inherit;">
    </div>
  </div>

  <div class="card">
    <div class="card-title"><img src="{{ url_for('static', filename='img/icons/P21_onset_time.png') }}" style="height: 22px; vertical-align: -5px; margin-right: 6px; border-radius: 4px;">起病與主訴</div>

    <div class="symptom-section">
      <div class="head">⑧ 主訴</div>
      <textarea name="chief_complaint" rows="2" placeholder="例: 頭痛 3 天 + 發燒 1 天" style="width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 14px; font-family: inherit;">{{ onset.get('chief_complaint', '') }}</textarea>
    </div>

    <div class="symptom-section">
      <div class="head">⑨ 發病時間 & 速度</div>
      <div style="display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap;">
        <input type="date" name="onset_date" value="{{ onset.get('onset_date', '') }}" style="padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 14px;">
        <select name="onset_speed" style="padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 14px;">
          <option value="">速度?</option>
          {% for s in ['急性 (數小時內)', '亞急性 (1-3 天)', '慢性 (數天以上)', '緩慢 (數週以上)'] %}
          <option value="{{ s }}" {% if onset.get('onset_speed') == s %}selected{% endif %}>{{ s }}</option>
          {% endfor %}
        </select>
      </div>
    </div>

    <div class="symptom-section">
      <div class="head">⑩ 誘因</div>
      <div style="display: flex; gap: var(--space-2); flex-wrap: wrap;">
        {% for t in ['受寒 / 淋雨', '過勞 / 熬夜', '情緒波動', '飲食不節', '外感風寒', '誤治 / 服錯藥', '不明'] %}
        <label style="display: flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer;">
          <input type="checkbox" name="trigger" value="{{ t }}"> {{ t }}
        </label>
        {% endfor %}
      </div>
    </div>

    <div class="symptom-section">
      <div class="head">⑪ 加重 / 緩解因素</div>
      <input type="text" name="aggravating" value="{{ onset.get('aggravating', '') }}" placeholder="加重: 例 午後加重" style="width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 14px; font-family: inherit; margin-bottom: 6px;">
      <input type="text" name="relieving" value="{{ onset.get('relieving', '') }}" placeholder="緩解: 例 熱敷後緩解" style="width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 14px; font-family: inherit;">
    </div>

    <div class="symptom-section">
      <div class="head">⑫ 已用過治療</div>
      <input type="text" name="previous_treatment" value="{{ onset.get('previous_treatment', '') }}" placeholder="例: 自行服普拿疼 / 已服桂枝湯 2 帖" style="width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 14px; font-family: inherit;">
      <div class="muted" style="font-size: 12px; margin-top: 4px;">⚠ 已服某方 → 推論自動加「錯誤注入/救逆」標籤</div>
    </div>
  </div>

  <div style="display: flex; justify-content: space-between; margin-top: var(--space-4);">
    <a href="{{ url_for('home') }}" class="btn btn-secondary">← Dashboard</a>
    <button type="submit" class="btn btn-primary btn-lg">Continue → 四診檢查</button>
  </div>

</div>

<aside class="inquiry-sidebar">
  <h3 style="font-size: 13px; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.05em;">自動套用規則</h3>
  <div style="font-size: 13px; color: var(--text-secondary); line-height: 1.7;">
    推論引擎會根據基本資料自動加 modifier:
    <ul style="margin: 8px 0; padding-left: 18px;">
      <li><strong>孕婦</strong>: 禁用峻下有毒方 (承氣、十棗)</li>
      <li><strong>幼兒 (&lt;6y)</strong>: 劑量按體重折半</li>
      <li><strong>老年 (≥70y)</strong>: 慎用大熱大寒方</li>
      <li><strong>體虛</strong>: 偏好補益方 (理中)</li>
      <li><strong>體實</strong>: 偏好瀉法 (承氣)</li>
    </ul>
  </div>
  <div class="card-title" style="margin-top: var(--space-4);">v0.2.2 進度</div>
  <div class="muted" style="font-size: 12px; line-height: 1.6;">
    基本資料 → session['patient']<br>
    下一步 S2-2 → onset 起病主訴
  </div>
</aside>
</div>
</form>

<script>
// 性別切換 F 時顯示孕否區塊
document.querySelectorAll('input[name="gender"]').forEach((r) => {
  r.addEventListener('change', (e) => {
    const sec = document.getElementById('pregnancy-section');
    sec.style.display = e.target.value === 'F' ? 'block' : 'none';
  });
});
</script>
{% endblock %}