{% extends "base.html" %} {% block content %}
<div class="container mt-5">
  <div class="row">
    <div class="col-md-8 offset-md-2">
      <!-- 파일 업로드 섹션 -->
      <div class="card shadow-sm mb-4">
        <div class="card-header bg-primary text-white">
          <h5 class="mb-0">Excel 파일 업로드</h5>
        </div>
        <div class="card-body">
          <form
            action="{{ url_for('main.index') }}"
            method="post"
            enctype="multipart/form-data"
            class="mb-4"
          >
            <div class="input-group">
              <input
                type="file"
                class="form-control"
                name="file"
                accept=".xlsx"
                required
              />
              <button class="btn btn-primary" type="submit">업로드</button>
            </div>
          </form>
        </div>
      </div>

      <!-- 업로드된 파일 목록 섹션 -->
      <div class="card shadow-sm">
        <div class="card-header bg-info text-white">
          <h5 class="mb-0">업로드된 파일 목록</h5>
        </div>
        <div class="card-body">
          {% if files %}
          <div class="list-group" id="file-list">
            {% for file in files %}
            <div
              class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
              data-filename="{{ file.filename }}"
            >
              <div>
                <h6 class="mb-1">{{ file.original_filename }}</h6>
                <small class="text-muted"
                  >업로드일: {{ file.upload_date.strftime('%Y-%m-%d %H:%M')
                  }}</small
                >
              </div>
              <div>
                <button
                  type="button"
                  class="btn btn-danger btn-sm me-2 delete-file-btn"
                  data-filename="{{ file.filename }}"
                >
                  <i class="fas fa-trash"></i> 삭제
                </button>
                <span
                  class="badge bg-primary"
                  style="font-size: 1em; line-height: 1.6"
                >
                  <i class="fas fa-eye"></i> 보기
                </span>
              </div>
            </div>
            {% endfor %}
          </div>
          {% else %}
          <div class="text-center py-4">
            <i class="fas fa-folder-open fa-3x text-muted mb-3"></i>
            <p class="text-muted">업로드된 파일이 없습니다.</p>
          </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll(".delete-file-btn").forEach(function (btn) {
      btn.addEventListener("click", function () {
        if (!confirm("정말로 이 파일을 삭제하시겠습니까?")) return;
        const filename = btn.getAttribute("data-filename");
        fetch(`/files/delete_file/${filename}`, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
        })
          .then((res) => res.json())
          .then((data) => {
            if (data.success) {
              // 삭제된 파일 항목 DOM에서 제거
              btn.closest(".list-group-item").remove();
            } else {
              alert("파일 삭제에 실패했습니다.");
            }
          })
          .catch(() => {
            alert("서버 오류로 파일 삭제에 실패했습니다.");
          });
      });
    });
  });
</script>

<style>
  .list-group-item {
    transition: all 0.3s ease;
  }
  .list-group-item:hover {
    transform: translateX(5px);
    background-color: #f8f9fa;
  }
  .card {
    border: none;
    border-radius: 10px;
  }
  .card-header {
    border-radius: 10px 10px 0 0 !important;
  }
</style>
{% endblock %}