{% 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 justify-content-between align-items-center">
                    <div>
                        <h2 class="card-title mb-0">会员详情</h2>
                        <p class="text-muted">查看会员详细信息、消费记录和充值记录</p>
                    </div>
                    <div class="d-flex gap-2">
                        <a href="{% url 'member_recharge' member.id %}" class="btn btn-success">
                            <i class="bi bi-cash-coin me-1"></i> 充值
                        </a>
                        <a href="{% url 'member_edit' member.id %}" class="btn btn-primary">
                            <i class="bi bi-pencil me-1"></i> 编辑
                        </a>
                        <a href="{% url 'member_list' %}" class="btn btn-outline-secondary">
                            <i class="bi bi-arrow-left me-1"></i> 返回列表
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-4 mb-4">
        <div class="card h-100">
            <div class="card-header bg-primary text-white">
                <h5 class="card-title mb-0"><i class="bi bi-person-fill me-2"></i>会员信息</h5>
            </div>
            <div class="card-body">
                <div class="d-flex align-items-center mb-4">
                    <div class="avatar bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 80px; height: 80px; font-size: 1.75rem; font-weight: 500;">
                        {{ member.name|slice:"0:1"|default:"-" }}
                    </div>
                    <div>
                        <h4 class="mb-1">{{ member.name }}
                            {% if member.is_recharged %}
                            <span class="badge bg-success ms-1"><i class="bi bi-wallet2"></i> 充值会员</span>
                            {% endif %}
                        </h4>
                        <p class="text-muted mb-0">{{ member.phone }}</p>
                    </div>
                </div>
                
                <hr>
                
                <div class="row g-3">
                    <div class="col-6">
                        <div class="card bg-light">
                            <div class="card-body p-3">
                                <h6 class="card-subtitle mb-1 text-muted">会员等级</h6>
                                <span class="badge bg-info text-dark">{{ member.level.name }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="card bg-light">
                            <div class="card-body p-3">
                                <h6 class="card-subtitle mb-1 text-muted">当前积分</h6>
                                <span class="fw-bold">{{ member.points }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="card bg-light">
                            <div class="card-body p-3">
                                <h6 class="card-subtitle mb-1 text-muted">账户余额</h6>
                                <span class="fw-bold text-success">¥{{ member.balance }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="card bg-light">
                            <div class="card-body p-3">
                                <h6 class="card-subtitle mb-1 text-muted">累计消费</h6>
                                <span class="fw-bold text-success">¥{{ member.total_spend }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="card bg-light">
                            <div class="card-body p-3">
                                <h6 class="card-subtitle mb-1 text-muted">消费次数</h6>
                                <span class="badge bg-secondary">{{ member.purchase_count }} 次</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="card bg-light">
                            <div class="card-body p-3">
                                <h6 class="card-subtitle mb-1 text-muted">注册日期</h6>
                                <small>{{ member.created_at|date:"Y-m-d" }}</small>
                            </div>
                        </div>
                    </div>
                    
                    {% if member.birthday %}
                    <div class="col-6">
                        <div class="card bg-light">
                            <div class="card-body p-3">
                                <h6 class="card-subtitle mb-1 text-muted">生日</h6>
                                <span>{{ member.birthday|date:"m-d" }}</span>
                                {% if member.birthday.month == current_month %}
                                <span class="badge bg-danger ms-1">本月</span>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-lg-8">
        <ul class="nav nav-tabs mb-3" id="memberTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="consumption-tab" data-bs-toggle="tab" data-bs-target="#consumption" type="button" role="tab" aria-controls="consumption" aria-selected="true">
                    <i class="bi bi-bag me-1"></i> 消费记录
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="recharge-tab" data-bs-toggle="tab" data-bs-target="#recharge" type="button" role="tab" aria-controls="recharge" aria-selected="false">
                    <i class="bi bi-cash-coin me-1"></i> 充值记录
                </button>
            </li>
        </ul>
        
        <div class="tab-content" id="memberTabsContent">
            <!-- 消费记录 Tab -->
            <div class="tab-pane fade show active" id="consumption" role="tabpanel" aria-labelledby="consumption-tab">
                <div class="card">
                    <div class="card-body">
                        {% if sales %}
                        <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>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for sale in sales %}
                                    <tr>
                                        <td>#{{ sale.id }}</td>
                                        <td>{{ sale.created_at|date:"Y-m-d H:i" }}</td>
                                        <td>
                                            <div class="d-flex flex-column">
                                                <span class="fw-bold text-success">¥{{ sale.final_amount }}</span>
                                                {% if sale.discount_amount > 0 %}
                                                <small class="text-muted">原价: ¥{{ sale.total_amount }}</small>
                                                {% endif %}
                                            </div>
                                        </td>
                                        <td>
                                            <span class="badge {% if sale.payment_method == 'balance' %}bg-primary{% else %}bg-secondary{% endif %}">
                                                {{ sale.get_payment_method_display }}
                                            </span>
                                        </td>
                                        <td>
                                            {% if sale.balance_paid > 0 %}
                                            <span class="text-primary">¥{{ sale.balance_paid }}</span>
                                            {% else %}
                                            <span class="text-muted">-</span>
                                            {% endif %}
                                        </td>
                                        <td>{{ sale.points_earned }}</td>
                                        <td>{{ sale.operator.username }}</td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                        {% else %}
                        <div class="text-center py-5">
                            <i class="bi bi-cart-x text-muted" style="font-size: 2.5rem;"></i>
                            <p class="mt-3 mb-0">暂无消费记录</p>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
            
            <!-- 充值记录 Tab -->
            <div class="tab-pane fade" id="recharge" role="tabpanel" aria-labelledby="recharge-tab">
                <div class="card">
                    <div class="card-body">
                        {% if recharge_records %}
                        <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>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for record in recharge_records %}
                                    <tr>
                                        <td>#{{ record.id }}</td>
                                        <td>{{ record.created_at|date:"Y-m-d H:i" }}</td>
                                        <td>
                                            <span class="fw-bold text-success">¥{{ record.amount }}</span>
                                        </td>
                                        <td>
                                            <span class="text-muted">¥{{ record.actual_amount }}</span>
                                        </td>
                                        <td>
                                            <span class="badge bg-secondary">{{ record.get_payment_method_display }}</span>
                                        </td>
                                        <td>{{ record.operator.username }}</td>
                                        <td>
                                            <small class="text-muted">{{ record.remark|default:"-" }}</small>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                        {% else %}
                        <div class="text-center py-5">
                            <i class="bi bi-wallet text-muted" style="font-size: 2.5rem;"></i>
                            <p class="mt-3 mb-0">暂无充值记录</p>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}