{% extends 'inventory/base.html' %}

{% block title %}会员消费记录 - {{ block.super }}{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3">
                    <div>
                        <h2 class="card-title mb-0">会员消费记录查询</h2>
                        <p class="text-muted mb-md-0">根据会员手机号或姓名查询消费记录</p>
                    </div>
                    <div class="d-flex flex-wrap gap-2">
                        <a href="{% url 'member_list' %}" class="btn btn-outline-secondary">
                            <i class="bi bi-people me-1"></i> 会员管理
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <form method="get" action="{% url 'member_purchases' %}" class="mb-4">
                    <div class="row g-3">
                        <div class="col-md-8">
                            <div class="input-group">
                                <span class="input-group-text bg-light"><i class="bi bi-search"></i></span>
                                <input type="text" name="search" class="form-control" value="{{ search_term }}" placeholder="输入会员手机号或姓名..." required>
                                <button type="submit" class="btn btn-primary">查询</button>
                            </div>
                        </div>
                    </div>
                </form>
                
                {% if search_term %}
                    {% if member %}
                        <div class="alert alert-info mb-4">
                            <div class="d-flex align-items-center">
                                <div class="avatar bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 48px; height: 48px; font-weight: 500;">
                                    {{ member.name|slice:"0:1"|default:"-" }}
                                </div>
                                <div>
                                    <h5 class="mb-1">{{ member.name }}</h5>
                                    <p class="mb-0">手机号: {{ member.phone }} | 会员等级: {{ member.level.name }} | 消费次数: {{ member.purchase_count }} | 累计消费: ¥{{ member.total_spend }}</p>
                                </div>
                            </div>
                        </div>
                        
                        {% if sales %}
                            <h5 class="mb-3">消费记录 (共{{ sales|length }}条)</h5>
                            <div class="table-responsive">
                                <table class="table table-striped table-hover align-middle">
                                    <thead class="table-light">
                                        <tr>
                                            <th>订单编号</th>
                                            <th>消费日期</th>
                                            <th>消费金额</th>
                                            <th>折扣金额</th>
                                            <th>实付金额</th>
                                            <th>获得积分</th>
                                            <th>销售员</th>
                                            <th>备注</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for sale in sales %}
                                        <tr>
                                            <td>
                                                <a href="#" class="fw-bold text-primary">#{{ sale.id }}</a>
                                            </td>
                                            <td>{{ sale.created_at|date:"Y-m-d H:i" }}</td>
                                            <td>¥{{ sale.total_amount|floatformat:2 }}</td>
                                            <td>¥{{ sale.discount_amount|floatformat:2 }}</td>
                                            <td class="fw-bold text-success">¥{{ sale.final_amount|floatformat:2 }}</td>
                                            <td>{{ sale.points_earned }}</td>
                                            <td>{{ sale.operator.username }}</td>
                                            <td>{{ sale.notes|default:"-" }}</td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        {% else %}
                            <div class="alert alert-warning">
                                <i class="bi bi-exclamation-triangle me-2"></i> 该会员暂无消费记录
                            </div>
                        {% endif %}
                    {% else %}
                        <div class="alert alert-danger">
                            <i class="bi bi-x-circle me-2"></i> 未找到手机号或姓名为 "{{ search_term }}" 的会员
                        </div>
                    {% endif %}
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}