{% extends "assetapp/base.html" %}

{% block title %}导入Excel{% endblock %}

{% block content %}
<div class="d-flex align-items-center mb-4">
    <a href="{% url 'asset_list' %}" class="btn btn-outline-secondary btn-sm me-3">
        <i class="bi bi-arrow-left"></i> 返回
    </a>
    <h4 class="mb-0"><i class="bi bi-upload me-2"></i>导入Excel</h4>
</div>

<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card card-dark">
            <div class="card-header"><i class="bi bi-file-earmark-spreadsheet me-2"></i>上传文件</div>
            <div class="card-body">
                <div class="alert alert-info">
                    <i class="bi bi-info-circle me-2"></i>
                    <strong>使用说明：</strong>
                    <ol class="mb-0 mt-2">
                        <li>先 <a href="{% url 'download_template' %}" class="text-info">下载导入模板</a></li>
                        <li>按模板格式填写资产数据</li>
                        <li>上传填写好的Excel文件（.xlsx）</li>
                        <li>资产编号重复的记录会被自动跳过</li>
                        <li>分类不存在时会自动创建</li>
                    </ol>
                </div>
                
                <form method="post" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="mb-3">
                        <label class="form-label">选择Excel文件</label>
                        <div class="file-upload-wrapper">
                            <input type="file" name="excel_file" id="id_excel_file" accept=".xlsx,.xls" class="d-none" onchange="updateFileName(this)">
                            <button type="button" class="btn btn-outline-info" onclick="document.getElementById('id_excel_file').click()">
                                <i class="bi bi-folder2-open me-1"></i>浏览文件
                            </button>
                            <span id="file-name" class="ms-3 file-name-text">未选择文件</span>
                        </div>
                        {% if form.excel_file.errors %}
                        <div class="text-danger small mt-1">{{ form.excel_file.errors.0 }}</div>
                        {% endif %}
                    </div>
                    <div class="d-flex">
                        <button type="submit" class="btn btn-primary me-2">
                            <i class="bi bi-upload me-1"></i>开始导入
                        </button>
                        <a href="{% url 'download_template' %}" class="btn btn-outline-info">
                            <i class="bi bi-file-earmark-arrow-down me-1"></i>下载模板
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
function updateFileName(input) {
    var nameSpan = document.getElementById('file-name');
    if (input.files && input.files.length > 0) {
        nameSpan.textContent = input.files[0].name;
        nameSpan.style.color = '#4A9EFF';
    } else {
        nameSpan.textContent = '未选择文件';
        nameSpan.style.color = '#8b949e';
    }
}
</script>
{% endblock %}