{% 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-primary text-white">
                <h2 class="mb-0">{% if object %}编辑{% else %}添加{% endif %}UPS主机</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.ip_address.id_for_label }}" class="form-label font-weight-semibold">
                                    {{ form.ip_address.label }}
                                </label>
                                {{ form.ip_address }}
                                {% if form.ip_address.errors %}
                                    {% for error in form.ip_address.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.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-6">
                            <div class="form-group">
                                <label for="{{ form.contact.id_for_label }}" class="form-label font-weight-semibold">
                                    {{ form.contact.label }}
                                </label>
                                {{ form.contact }}
                                {% if form.contact.errors %}
                                    {% for error in form.contact.errors %}
                                        <div class="invalid-feedback d-block">{{ error }}</div>
                                    {% endfor %}
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    
                    {% if object and battery_formset %}
                    <hr class="my-5">
                    <div class="card">
                        <div class="card-header bg-success text-white">
                            <h5 class="mb-0">下挂电池管理</h5>
                        </div>
                        <div class="card-body">
                            {{ battery_formset.management_form }}
                            <div class="table-responsive">
                                <table class="table table-striped table-sm">
                                    <thead>
                                        <tr>
                                            <th>电池品牌</th>
                                            <th>电池型号</th>
                                            <th>重量(kg)</th>
                                            <th>数量</th>
                                            <th>存放位置</th>
                                            <th>安装日期</th>
                                            <th>上次维保</th>
                                            <th>删除</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for battery_form in battery_formset %}
                                        <tr>
                                            <td>
                                                {{ battery_form.id }}
                                                {{ battery_form.brand }}
                                                {% if battery_form.brand.errors %}
                                                    {% for error in battery_form.brand.errors %}
                                                        <div class="text-danger small">{{ error }}</div>
                                                    {% endfor %}
                                                {% endif %}
                                            </td>
                                            <td>
                                                {{ battery_form.model }}
                                                {% if battery_form.model.errors %}
                                                    {% for error in battery_form.model.errors %}
                                                        <div class="text-danger small">{{ error }}</div>
                                                    {% endfor %}
                                                {% endif %}
                                            </td>
                                            <td>
                                                {{ battery_form.weight }}
                                                {% if battery_form.weight.errors %}
                                                    {% for error in battery_form.weight.errors %}
                                                        <div class="text-danger small">{{ error }}</div>
                                                    {% endfor %}
                                                {% endif %}
                                            </td>
                                            <td>
                                                {{ battery_form.quantity }}
                                                {% if battery_form.quantity.errors %}
                                                    {% for error in battery_form.quantity.errors %}
                                                        <div class="text-danger small">{{ error }}</div>
                                                    {% endfor %}
                                                {% endif %}
                                            </td>
                                            <td>
                                                {{ battery_form.location }}
                                                {% if battery_form.location.errors %}
                                                    {% for error in battery_form.location.errors %}
                                                        <div class="text-danger small">{{ error }}</div>
                                                    {% endfor %}
                                                {% endif %}
                                            </td>
                                            <td>
                                                <input type="text" 
                                                       class="form-control form-control-sm datepicker-battery"
                                                       id="{{ battery_form.install_date.id_for_label }}" 
                                                       name="{{ battery_form.install_date.name }}" 
                                                       value="{{ battery_form.install_date.value|date:'Y-m-d' }}"
                                                       placeholder="选择日期">
                                                {% if battery_form.install_date.errors %}
                                                    {% for error in battery_form.install_date.errors %}
                                                        <div class="text-danger small">{{ error }}</div>
                                                    {% endfor %}
                                                {% endif %}
                                            </td>
                                            <td>
                                                <input type="text" 
                                                       class="form-control form-control-sm datepicker-battery"
                                                       id="{{ battery_form.last_maintenance_date.id_for_label }}" 
                                                       name="{{ battery_form.last_maintenance_date.name }}" 
                                                       value="{{ battery_form.last_maintenance_date.value|date:'Y-m-d' }}"
                                                       placeholder="选择日期">
                                                {% if battery_form.last_maintenance_date.errors %}
                                                    {% for error in battery_form.last_maintenance_date.errors %}
                                                        <div class="text-danger small">{{ error }}</div>
                                                    {% endfor %}
                                                {% endif %}
                                            </td>
                                            <td>
                                                {{ battery_form.DELETE }}
                                            </td>
                                        </tr>
                                        {% empty %}
                                        <tr>
                                            <td colspan="8" class="text-center text-muted">暂未下挂电池</td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    {% endif %}
                    
                    <div class="mt-5 d-flex justify-content-end gap-3">
                        <a href="{% url 'ups_list' %}" class="btn btn-secondary px-6">
                            <i class="fas fa-arrow-left mr-2"></i>取消
                        </a>
                        <button type="submit" class="btn btn-primary 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()
        });
        
        flatpickr('.datepicker-battery', {
            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: #0d6efd;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 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);
    }
    .table-responsive {
        overflow-x: auto;
    }
    .form-control-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
    }
    .table th {
        font-size: 0.875rem;
        white-space: nowrap;
    }
</style>

{% endblock %}