<!-- 中間：分成左右 -->
<div class="middle-section">
<!-- 左：成員列表 -->
<div class="member-list" ref="memberListRef">
<h2>分帳成員</h2>
<ul>
<li v-for="(member, index) in members"
:key="index" @click="selectMember(index)"
:class="{ selected: selectedMemberIndex === index }">
{{ member.name }}
<span v-if="selectedMemberIndex !== index" :class="balanceClass(member.name)">
{{ balanceText(member.name) }}
</span>
<div v-if="selectedMemberIndex === index" class="add-expense-section">
<button class="btn small-btn" @click.stop="showAddExpense = true">➕ 支出</button>
</div>
</li>
</ul>
</div>
<!-- 右：帳款列表 -->
<div class="expense-list">
<h2>支出清單</h2>
<div v-if="expenses.length === 0">尚無支出紀錄</div>
<ul v-else>
<li v-for="(expense, index) in expenses" :key="index" class="expense-row">
<span class="label">
<strong>{{ expense.member }}</strong> 支出 - {{ expense.category }}
</span>
<span class="amount">${{ Math.round(expense.amount) }}</span>
<button class="btn delete-btn" @click="deleteExpense(index)">❌</button>
</li>
</ul>
<!-- 總計 -->
<div class="expense-row total-row">
<span class="label">總計</span>
<span class="amount">${{ totalAmount }}</span>
<span style="width: 32px;"></span> <!-- 空白欄對齊刪除按鈕 -->
</div>
<!-- 旅程結束 -->
<div style="margin-top: 20px;">
<button class="btn danger" @click="endTrip">🚨 旅程結束（清空所有資料）</button>
</div>
</div>
</div>
<!-- 底部：新增成員 -->
<div class="bottom-section">
<input
v-model="newMemberName"
class="member-input"
placeholder="輸入成員姓名"
@keyup.enter="addMember"
/>
<button class="btn add-btn" @click="addMember">➕ 新增成員</button>
</div>
<!-- Modal: 新增支出款項 -->
<div v-if="showAddExpense" class="modal-backdrop">
<div class="modal">
<h3>新增支出</h3>
<label>支出項目：</label>
<input
list="category-options"
v-model="selectedCategory"
placeholder="輸入或選擇項目"
/>
<datalist id="category-options">
<option v-for="cat in expenseCategories" :key="cat" :value="cat" />
</datalist>
<label>金額：</label>
<input
v-model.number="expenseAmount"
type="number"
placeholder="輸入金額"
/>
<div class="modal-buttons">
<button class="btn confirm" @click="addExpense">確認</button>
<button class="btn cancel" @click="showAddExpense = false">取消</button>
</div>
</div>
</div>