{% 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">添加主机维修记录</h2>
            </div>
            <div class="card-body">
                <form method="post" class="needs-validation" novalidate>
                    {% csrf_token %}
                    
                    <div class="row g-4">
                        <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 }} <span class="text-danger">*</span>
                                </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 class="col-md-6">
                            <div class="form-group">
                                <label for="{{ form.supplier.id_for_label }}" class="form-label font-weight-semibold">
                                    {{ form.supplier.label }}
                                </label>
                                {{ form.supplier }}
                                {% if form.supplier.errors %}
                                    {% for error in form.supplier.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.maintenance_date.id_for_label }}" class="form-label font-weight-semibold">
                                    {{ form.maintenance_date.label }} <span class="text-danger">*</span>
                                </label>
                                <input type="text" 
                                       id="{{ form.maintenance_date.id_for_label }}" 
                                       name="{{ form.maintenance_date.name }}" 
                                       class="form-control datepicker"
                                       value="{{ form.maintenance_date.value|date:'Y-m-d' }}"
                                       placeholder="选择日期">
                                {% if form.maintenance_date.errors %}
                                    {% for error in form.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.technician.id_for_label }}" class="form-label font-weight-semibold">
                                    {{ form.technician.label }} <span class="text-danger">*</span>
                                </label>
                                {{ form.technician }}
                                {% if form.technician.errors %}
                                    {% for error in form.technician.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.content.id_for_label }}" class="form-label font-weight-semibold">
                                    {{ form.content.label }} <span class="text-danger">*</span>
                                </label>
                                {{ form.content }}
                                {% if form.content.errors %}
                                    {% for error in form.content.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 'maintenance_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()
        });
    });
</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);
    }
</style>

{% endblock %}