{% extends "layout.html" %}

{% block content %}
<div class="container">
  <h1>Import {{ model_name|capitalize }} Data</h1>

  <div class="card">
    <div class="card-body">
      <form method="post" enctype="multipart/form-data" id="import-form">
        <div class="mb-3">
          <label class="form-label">CSV File</label>
          <input type="file" name="file" class="form-control" accept=".csv" required>
        </div>
        <div class="mb-3">
          <button type="submit" class="btn btn-primary">Import</button>
          <a href="/import-export/template/{{ model_name }}" class="btn btn-outline-secondary">
            Download Template
          </a>
        </div>
      </form>

      <div id="import-result" class="mt-3" style="display: none;"></div>
    </div>
  </div>
</div>

<script>
  document.getElementById('import-form').addEventListener('submit', function (e) {
    e.preventDefault();

    const formData = new FormData(this);

    fetch('/import-export/import/{{ model_name }}', {
      method: 'POST',
      body: formData
    })
      .then(response => response.json())
      .then(data => {
        const resultDiv = document.getElementById('import-result');
        resultDiv.style.display = 'block';

        if (data.error) {
          resultDiv.innerHTML = `<div class="alert alert-danger">${data.error}</div>`;
        } else {
          resultDiv.innerHTML = `<div class="alert alert-success">${data.success}</div>`;
        }
      })
      .catch(error => {
        console.error('Error:', error);
        document.getElementById('import-result').innerHTML =
          '<div class="alert alert-danger">An error occurred during import</div>';
        document.getElementById('import-result').style.display = 'block';
      });
  });
</script>
{% endblock %}