{% extends "base.html" %}
{% block title %}{{ '编辑' if postcard else '新建' }}明信片 - 明信片管理器{% endblock %}
{% block content %}
<div class="section-header">
    <h1>{{ '编辑' if postcard else '新建' }}明信片</h1>
</div>
<form method="post" action="{{ '/postcards/%d/edit' % postcard.id if postcard else '/profiles/%d/postcards' % profile.id }}" class="form-card">
    <label>编号 * <span style="font-weight:400;color:var(--text-muted);font-size:.8rem">格式：AB-1234567</span></label>
    <input type="text" name="card_number" value="{{ postcard.card_number if postcard else '' }}" required placeholder="AB-1234567">

    <label>状态 *</label>
    <select name="status" id="status-select" onchange="toggleFields()" required>
        <option value="sent" {% if postcard and postcard.status=='sent' %}selected{% endif %}>已寄出</option>
        <option value="delivered" {% if postcard and postcard.status=='delivered' %}selected{% endif %}>已送达</option>
        <option value="received" {% if postcard and postcard.status=='received' %}selected{% endif %}>已收到</option>
    </select>

    <div id="fields-sent-delivered">
        <label>收件人 *</label>
        <input type="text" name="recipient_name" id="input-recipient" value="{{ postcard.recipient_name if postcard else '' }}">
        <label>国家/地区 *</label>
        <input type="text" name="country" id="input-country" value="{{ postcard.country if postcard else '' }}" maxlength="2" placeholder="JP" style="width:80px;text-transform:uppercase" oninput="this.value=this.value.toUpperCase()">
        <label>寄出时间 *</label>
        <input type="date" name="send_time" id="input-send-time" value="{{ postcard.send_time.strftime('%Y-%m-%d') if postcard and postcard.send_time else '' }}">
        <label id="label-arrival">到达时间</label>
        <input type="date" name="arrival_time" id="input-arrival" value="{{ postcard.arrival_time.strftime('%Y-%m-%d') if postcard and postcard.arrival_time else '' }}">
    </div>

    <div id="fields-received" style="display:none">
        <label>发件人 *</label>
        <input type="text" name="sender_name" id="input-sender" value="{{ postcard.sender_name if postcard else '' }}">
        <label>收到时间 *</label>
        <input type="date" name="receive_time" id="input-receive" value="{{ postcard.receive_time.strftime('%Y-%m-%d') if postcard and postcard.receive_time else '' }}">
    </div>

    <div class="form-actions">
        <button type="submit" class="btn btn-primary">保存</button>
        <a href="/profiles/{{ profile.id }}/postcards" class="btn">取消</a>
    </div>
</form>
<script>
function toggleFields() {
    var s = document.getElementById('status-select').value;
    var sd = document.getElementById('fields-sent-delivered');
    var rc = document.getElementById('fields-received');
    var recipient = document.getElementById('input-recipient');
    var country = document.getElementById('input-country');
    var sendTime = document.getElementById('input-send-time');
    var arrival = document.getElementById('input-arrival');
    var labelArrival = document.getElementById('label-arrival');
    var sender = document.getElementById('input-sender');
    var receive = document.getElementById('input-receive');
    if (s === 'received') {
        sd.style.display = 'none';
        rc.style.display = '';
        recipient.required = false;
        country.required = false;
        sendTime.required = false;
        arrival.required = false;
        arrival.disabled = false;
        sender.required = true;
        receive.required = true;
    } else if (s === 'sent') {
        sd.style.display = '';
        rc.style.display = 'none';
        recipient.required = true;
        country.required = true;
        sendTime.required = true;
        arrival.required = false;
        arrival.disabled = true;
        arrival.value = '';
        labelArrival.textContent = '到达时间';
        sender.required = false;
        receive.required = false;
    } else {
        sd.style.display = '';
        rc.style.display = 'none';
        recipient.required = true;
        country.required = true;
        sendTime.required = true;
        arrival.disabled = false;
        arrival.required = true;
        labelArrival.textContent = '到达时间 *';
        sender.required = false;
        receive.required = false;
    }
}
toggleFields();
</script>
{% endblock %}