{% extends "base.html" %}
{% block title %}{% if action == 'add' %}添加地址{% else %}编辑地址{% endif %} - 太白购物商城{% endblock %}

{% block head %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/address_form.css') }}">
{% endblock %}

{% block content %}
<div class="row">
    <!-- 侧边栏 -->
    <div class="col-md-3">
        <div class="card">
            <div class="card-header">
                <h5><i class="bi bi-person-circle"></i> 个人中心</h5>
            </div>
            <div class="list-group list-group-flush">
                <a href="{{ url_for('user.profile') }}" class="list-group-item list-group-item-action">
                    <i class="bi bi-person"></i> 基本信息
                </a>
                <a href="{{ url_for('user.orders') }}" class="list-group-item list-group-item-action">
                    <i class="bi bi-bag"></i> 我的订单
                </a>
                <a href="{{ url_for('address.index') }}" class="list-group-item list-group-item-action active">
                    <i class="bi bi-geo-alt"></i> 收货地址
                </a>
                <a href="#" class="list-group-item list-group-item-action">
                    <i class="bi bi-heart"></i> 我的收藏
                </a>
                <a href="#" class="list-group-item list-group-item-action">
                    <i class="bi bi-clock-history"></i> 浏览历史
                </a>
            </div>
        </div>
    </div>

    <!-- 主要内容 -->
    <div class="col-md-9">
        <div class="card">
            <div class="card-header">
                <h5>
                    <i class="bi bi-geo-alt"></i>
                    {% if action == 'add' %}添加地址{% else %}编辑地址{% endif %}
                </h5>
            </div>
            <div class="card-body">
                <!-- 调试信息 -->
                <div class="alert alert-info" id="debugAlert" style="display: none;">
                    <strong>调试信息：</strong>
                    <div id="debugInfo">加载中...</div>
                </div>

                <form method="POST" id="addressForm">
                    {{ form.hidden_tag() }}

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">{{ form.receiver_name.label.text }} <span class="text-danger">*</span></label>
                            {{ form.receiver_name(class="form-control") }}
                            {% if form.receiver_name.errors %}
                                <div class="text-danger">{{ form.receiver_name.errors[0] }}</div>
                            {% endif %}
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label">{{ form.receiver_phone.label.text }} <span class="text-danger">*</span></label>
                            {{ form.receiver_phone(class="form-control") }}
                            {% if form.receiver_phone.errors %}
                                <div class="text-danger">{{ form.receiver_phone.errors[0] }}</div>
                            {% endif %}
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label class="form-label">省份 <span class="text-danger">*</span></label>
                            <select class="form-select" id="province" name="province" required>
                                <option value="">加载中...</option>
                            </select>
                            <input type="hidden" id="provinceValue" value="{% if address %}{{ address.province }}{% endif %}">
                            {% if form.province.errors %}
                                <div class="text-danger">{{ form.province.errors[0] }}</div>
                            {% endif %}
                        </div>

                        <div class="col-md-4 mb-3">
                            <label class="form-label">城市 <span class="text-danger">*</span></label>
                            <select class="form-select" id="city" name="city" required>
                                <option value="">请选择城市</option>
                            </select>
                            <input type="hidden" id="cityValue" value="{% if address %}{{ address.city }}{% endif %}">
                            {% if form.city.errors %}
                                <div class="text-danger">{{ form.city.errors[0] }}</div>
                            {% endif %}
                        </div>

                        <div class="col-md-4 mb-3">
                            <label class="form-label">区县 <span class="text-danger">*</span></label>
                            <select class="form-select" id="district" name="district" required>
                                <option value="">请选择区县</option>
                            </select>
                            <input type="hidden" id="districtValue" value="{% if address %}{{ address.district }}{% endif %}">
                            {% if form.district.errors %}
                                <div class="text-danger">{{ form.district.errors[0] }}</div>
                            {% endif %}
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-8 mb-3">
                            <label class="form-label">{{ form.detail_address.label.text }} <span class="text-danger">*</span></label>
                            {{ form.detail_address(class="form-control", placeholder="街道、门牌号等详细信息") }}
                            {% if form.detail_address.errors %}
                                <div class="text-danger">{{ form.detail_address.errors[0] }}</div>
                            {% endif %}
                        </div>

                        <div class="col-md-4 mb-3">
                            <label class="form-label">{{ form.postal_code.label.text }}</label>
                            {{ form.postal_code(class="form-control", placeholder="选填") }}
                            {% if form.postal_code.errors %}
                                <div class="text-danger">{{ form.postal_code.errors[0] }}</div>
                            {% endif %}
                        </div>
                    </div>

                    <div class="mb-3">
                        <div class="form-check">
                            {{ form.is_default(class="form-check-input") }}
                            <label class="form-check-label" for="{{ form.is_default.id }}">
                                {{ form.is_default.label.text }}
                            </label>
                        </div>
                    </div>

                    <div class="d-flex gap-2">
                        {{ form.submit(class="btn btn-primary") }}
                        <a href="{{ url_for('address.index') }}" class="btn btn-outline-secondary">取消</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<!-- 在scripts块中引入城市数据，确保在base.html的脚本之后加载 -->
<script src="{{ url_for('static', filename='js/city_data.js') }}"></script>
<script src="{{ url_for('static', filename='js/address_form.js') }}"></script>
{% endblock %}