{% extends 'base.html' %}

{% block title %}CSV取込{% endblock %}

{% block content %}
  <section>
    <h2>CSV取込</h2>
    {% if error_message %}
      <p style="color: #b00020;">{{ error_message }}</p>
    {% endif %}
    <style>
      .drop-zone {
        border: 2px dashed #888;
        padding: 24px;
        text-align: center;
        background: #fafafa;
        transition: background 0.2s ease;
      }
      .drop-zone.is-dragover {
        background: #e9f2ff;
      }
      .drop-zone input[type="file"] {
        display: none;
      }
      .drop-zone .file-name {
        margin-top: 8px;
        color: #555;
        font-size: 0.9em;
      }
    </style>
    <div>
      <form method="post" enctype="multipart/form-data" id="js-csv-form">
        {% csrf_token %}
        <label class="drop-zone" id="js-drop-zone">
          <strong>ここにCSVをドラッグ＆ドロップ</strong>
          <div>またはクリックして選択</div>
          <input type="file" name="csv_file" id="js-csv-input" accept=".csv">
          <div class="file-name" id="js-file-name">ファイル未選択</div>
        </label>
        <button type="submit">アップロード</button>
      </form>
    </div>
    <script>
      const dropZone = document.querySelector('#js-drop-zone');
      const fileInput = document.querySelector('#js-csv-input');
      const fileName = document.querySelector('#js-file-name');

      function updateFileName(files) {
        if (!files || files.length === 0) {
          fileName.textContent = 'ファイル未選択';
          return;
        }
        fileName.textContent = files[0].name;
      }

      dropZone.addEventListener('dragover', (event) => {
        event.preventDefault();
        dropZone.classList.add('is-dragover');
      });

      dropZone.addEventListener('dragleave', () => {
        dropZone.classList.remove('is-dragover');
      });

      dropZone.addEventListener('drop', (event) => {
        event.preventDefault();
        dropZone.classList.remove('is-dragover');
        if (!event.dataTransfer?.files?.length) {
          return;
        }
        fileInput.files = event.dataTransfer.files;
        updateFileName(fileInput.files);
      });

      fileInput.addEventListener('change', (event) => {
        updateFileName(event.target.files);
      });
    </script>
  </section>
{% endblock %}