{% extends "base.html" %}

{% block title %}파일 업로드 - First Garden POS{% endblock %}

{% block extra_css %}
<link href="{{ url_for('static', filename='css/upload.css') }}" rel="stylesheet">
{% endblock %}

{% block content %}
<div class="tab-pane fade show active" id="upload-panel" role="tabpanel">
    <!-- 시스템 상태 -->
    <div class="alert alert-info" role="alert">
        <i class="bi bi-info-circle"></i>
        <strong>시스템 상태:</strong>
        데이터베이스: <span id="db-status" class="badge bg-danger">연결 중...</span>
        업로드 폴더: <span id="upload-folder-status" class="badge bg-danger">확인 중...</span>
    </div>
    
    <!-- 드래그 앤 드롭 영역 -->
    <div class="drop-zone" id="drop-zone">
        <i class="bi bi-cloud-upload" style="font-size: 48px; color: var(--primary-color); margin-bottom: 15px;"></i>
        <h5 style="color: #333; margin: 10px 0;">파일을 여기에 드래그하세요</h5>
        <p style="color: #666; margin: 0;">또는</p>
        <button class="btn btn-primary btn-custom" id="file-select-btn" style="margin-top: 10px;">
            파일 선택
        </button>
        <p style="color: #999; font-size: 12px; margin-top: 15px;">
            지원 형식: OKPOS (일자별 상품별, 영수증별매출상세현황), UPSOLUTION<br>
            최대 파일 크기: 100MB
        </p>
    </div>
    
    <!-- 선택된 파일 목록 -->
    <div class="file-list" id="file-list"></div>
    
    <!-- 액션 버튼 -->
    <div style="display: flex; gap: 10px; margin-top: 20px;">
        <button class="btn btn-success btn-custom" id="upload-btn" onclick="uploadFiles()">
            <i class="bi bi-check-circle"></i> 업로드
        </button>
        <button class="btn btn-secondary btn-custom" id="clear-btn" onclick="clearFileList()">
            <i class="bi bi-x-circle"></i> 초기화
        </button>
    </div>
    
    <!-- 업로드 진행 표시 -->
    <div id="upload-progress" style="margin-top: 20px; display: none;">
        <div class="progress" style="height: 25px;">
            <div class="progress-bar bg-success" id="progress-bar" style="width: 0%;">
                <span id="progress-text">0%</span>
            </div>
        </div>
        <p id="progress-message" style="margin-top: 10px; color: #666;"></p>
    </div>
    
    <!-- 업로드 결과 -->
    <div id="upload-result" style="margin-top: 20px;"></div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{{ url_for('static', filename='js/upload.js') }}"></script>
<script>
    // 파일 업로드 UI 초기화
    document.addEventListener('DOMContentLoaded', function() {
        initializeUploadUI();
    });
</script>
{% endblock %}