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

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card shadow-lg">
            <div class="card-header bg-success text-white">
                <h2 class="mb-0">{% if object %}编辑{% else %}添加{% endif %}电池</h2>
            </div>
            <div class="card-body">
                <form method="post" class="needs-validation" novalidate>
                    {% csrf_token %}
                    
                    <div class="row g-4">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="{{ form.brand.id_for_label }}" class="form-label font-weight-semibold">
                                    {{ form.brand.label }} <span class="text-danger">*</span>
                                </label>
                                {{ form.brand }}
                                {% if form.brand.errors %}
                                    {% for error in form.brand.errors %}
                                        <div class="invalid-feedback d-block">{{ error }}</div>
                                    {% endfor %}
                                {% endif %}
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="{{ form.model.id_for_label }}" class="form-label font-weight-semibold">
                                    {{ form.model.label }} <span class="text-danger">*</span>
                                </label>
                                {{ form.model }}
                                {% if form.model.errors %}
                                    {% for error in form.model.errors %}
                                        <div class="invalid-feedback d-block">{{ error }}</div>
                                    {% endfor %}
                                {% endif %}
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="{{ form.weight.id_for_label }}" class="form-label font-weight-semibold">
                                    {{ form.weight.label }} <span class="text-danger">*</span>
                                </label>
                                {{ form.weight }}
                                {% if form.weight.errors %}
                                    {% for error in form.weight.errors %}
                                        <div class="invalid-feedback d-block">{{ error }}</div>
                                    {% endfor %}
                                {% endif %}
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="{{ form.quantity.id_for_label }}" class="form-label font-weight-semibold">
                                    {{ form.quantity.label }} <span class="text-danger">*</span>
                                </label>
                                {{ form.quantity }}
                                {% if form.quantity.errors %}
                                    {% for error in form.quantity.errors %}
                                        <div class="invalid-feedback d-block">{{ error }}</div>
                                    {% endfor %}
                                {% endif %}
                            </div>
                        </div>
                        
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="{{ form.location.id_for_label }}" class="form-label font-weight-semibold">
                                    {{ form.location.label }} <span class="text-danger">*</span>
                                </label>
                                {{ form.location }}
                                {% if form.location.errors %}
                                    {% for error in form.location.errors %}
                                        <div class="invalid-feedback d-block">{{ error }}</div>
                                    {% endfor %}
                                {% endif %}
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="{{ form.install_date.id_for_label }}" class="form-label font-weight-semibold">
                                    {{ form.install_date.label }}
                                </label>
                                <input type="text" 
                                       id="{{ form.install_date.id_for_label }}" 
                                       name="{{ form.install_date.name }}" 
                                       class="form-control datepicker"
                                       value="{{ form.install_date.value|date:'Y-m-d' }}"
                                       placeholder="选择日期">
                                {% if form.install_date.errors %}
                                    {% for error in form.install_date.errors %}
                                        <div class="invalid-feedback d-block">{{ error }}</div>
                                    {% endfor %}
                                {% endif %}
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="{{ form.last_maintenance_date.id_for_label }}" class="form-label font-weight-semibold">
                                    {{ form.last_maintenance_date.label }}
                                </label>
                                <input type="text" 
                                       id="{{ form.last_maintenance_date.id_for_label }}" 
                                       name="{{ form.last_maintenance_date.name }}" 
                                       class="form-control datepicker"
                                       value="{{ form.last_maintenance_date.value|date:'Y-m-d' }}"
                                       placeholder="选择日期">
                                {% if form.last_maintenance_date.errors %}
                                    {% for error in form.last_maintenance_date.errors %}
                                        <div class="invalid-feedback d-block">{{ error }}</div>
                                    {% endfor %}
                                {% endif %}
                            </div>
                        </div>
                        
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="{{ form.ups_host.id_for_label }}" class="form-label font-weight-semibold">
                                    {{ form.ups_host.label }}
                                </label>
                                {{ form.ups_host }}
                                {% if form.ups_host.errors %}
                                    {% for error in form.ups_host.errors %}
                                        <div class="invalid-feedback d-block">{{ error }}</div>
                                    {% endfor %}
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    
                    <div class="mt-5 d-flex justify-content-end gap-3">
                        <a href="{% url 'battery_list' %}" class="btn btn-secondary px-6">
                            <i class="fas fa-arrow-left mr-2"></i>取消
                        </a>
                        <button type="submit" class="btn btn-success px-6">
                            <i class="fas fa-save mr-2"></i>保存
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        flatpickr('.datepicker', {
            dateFormat: 'Y-m-d',
            locale: 'zh',
            allowInput: true,
            todayButton: true,
            clearButton: true,
            minDate: '1900-01-01',
            maxDate: new Date()
        });
    });
</script>

<style>
    .form-control:focus {
        border-color: #198754;
        box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
    }
    .card {
        border-radius: 12px;
    }
    .card-header {
        border-radius: 12px 12px 0 0 !important;
    }
    .font-weight-semibold {
        font-weight: 600;
    }
    .flatpickr-calendar {
        border-radius: 8px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    }
</style>

{% endblock %}