🚀 Day 9：使用者互動與表單提交（Form & POST）

from django.urls import path
from . import views

urlpatterns = [
    path('', views.home, name='home'),
    path('add/', views.add_expense, name='add_expense'),         # 新增消費路由
    path('delete/<int:pk>/', views.delete_expense, name='delete_expense'), # 動態刪除路由
]

from django.shortcuts import render, redirect, get_object_or_404
from django.contrib import messages
from .models import Expense
from django.db.models import Sum

def home(request):
    """ 首頁：支援分類過濾與總額統計 """
    category_query = request.GET.get('category', '').strip()
    
    if category_query:
        records = Expense.objects.filter(category=category_query).order_by('-date')
    else:
        records = Expense.objects.all().order_by('-date')
        
    total_cost = records.aggregate(Sum('price'))['price__sum'] or 0

    context = {
        'records': records,
        'total_cost': total_cost,
        'category_query': category_query,
    }
    return render(request, 'expenses/home.html', context)

def add_expense(request):
    """ 處理 POST 表單提交與新增消費 """
    if request.method == 'POST':
        item = request.POST.get('item', '').strip()
        price = request.POST.get('price', '').strip()
        category = request.POST.get('category', '').strip() or '一般'

        # 表單防呆驗證
        if not item or not price:
            messages.error(request, '❌ 請填寫完整的品項名稱與金額！')
            return redirect('home')

        try:
            Expense.objects.create(
                item=item,
                price=int(price),
                category=category
            )
            messages.success(request, f'✅ 成功新增消費：{item} ${price} 元！')
        except ValueError:
            messages.error(request, '❌ 金額必須為純數字！')

        return redirect('home')
    return redirect('home')

def delete_expense(request, pk):
    """ 依 ID 刪除特定消費紀錄 """
    expense = get_object_or_404(Expense, pk=pk)
    item_name = expense.item
    expense.delete()
    messages.warning(request, f'🗑️ 已刪除紀錄：{item_name}')
    return redirect('home')

{% extends 'base.html' %}

{% block content %}
<!-- Flash 提醒訊息彈窗 -->
{% if messages %}
    {% for message in messages %}
        <div class="alert alert-{{ message.tags }} alert-dismissible fade show shadow-sm" role="alert">
            {{ message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    {% endfor %}
{% endif %}

<!-- 新增消費表單卡片 -->
<div class="card shadow-sm border-0 mb-4">
    <div class="card-header bg-primary text-white fw-bold">➕ 新增消費紀錄</div>
    <div class="card-body">
        <form action="{% url 'add_expense' %}" method="POST" class="row g-3">
            {% csrf_token %} <!-- 🛡️ CSRF 安全防偽印章 -->
            <div class="col-md-4">
                <input type="text" name="item" class="form-control" placeholder="品項名稱 (例如: 珍珠奶茶)" required>
            </div>
            <div class="col-md-3">
                <input type="number" name="price" class="form-control" placeholder="金額 (TWD)" required>
            </div>
            <div class="col-md-3">
                <input type="text" name="category" class="form-control" placeholder="分類 (例如: 餐飲)">
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn class-btn btn-success w-100 fw-bold">新增記帳</button>
            </div>
        </form>
    </div>
</div>

<!-- 分類搜尋過濾列與明細表格 -->
<div class="card shadow-sm border-0">
    <div class="card-header bg-white d-flex justify-content-between align-items-center py-3">
        <span class="fw-bold">📊 記帳明細列表</span>
        <form method="GET" action="{% url 'home' %}" class="d-flex gap-2">
            <input type="text" name="category" class="form-control form-control-sm" placeholder="搜尋分類..." value="{{ category_query }}">
            <button type="submit" class="btn btn-sm btn-outline-primary">搜尋</button>
            {% if category_query %}
                <a href="{% url 'home' %}" class="btn btn-sm btn-outline-secondary">清除</a>
            {% endif %}
        </form>
    </div>
    <div class="card-body p-0">
        <table class="table table-hover align-middle mb-0">
            <thead class="table-light">
                <tr>
                    <th>#</th>
                    <th>日期</th>
                    <th>品項名稱</th>
                    <th>分類</th>
                    <th>金額</th>
                    <th class="text-center">操作</th>
                </tr>
            </thead>
            <tbody>
                {% for r in records %}
                <tr>
                    <td>{{ forloop.counter }}</td>
                    <td>{{ r.date|date:"Y-m-d" }}</td>
                    <td class="fw-bold">{{ r.item }}</td>
                    <td><span class="badge bg-secondary">{{ r.category }}</span></td>
                    <td class="text-success fw-bold">${{ r.price }}</td>
                    <td class="text-center">
                        <!-- 動態 URL 垃圾桶刪除按鈕 -->
                        <a href="{% url 'delete_expense' r.pk %}" class="btn btn-sm btn-outline-danger" onclick="return confirm('確定要刪除 [{{ r.item }}] 嗎？');">
                            🗑️ 刪除
                        </a>
                    </td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="6" class="text-center py-4 text-muted">📭 目前尚無任何記帳紀錄！</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}