{% extends "layout/ver_baru/base_admin.html" %}
{% load humanize %}
{% load static %}

{% block title %}Upload Excel Transaksi{% endblock %}

{% block content %}
<div class="max-w-3xl mx-auto my-10">
  <!-- Heading -->
  <h2 class="text-center text-xl md:text-2xl font-bold text-white p-4 rounded-lg mb-6 bg-gradient-to-r from-red-600 to-red-700">
    Upload Data Transaksi via Excel
  </h2>

  <!-- Card -->
  <div class="bg-white shadow-lg rounded-2xl p-6">
    <form method="post" enctype="multipart/form-data" class="space-y-6">
      {% csrf_token %}
      
      <!-- File Input -->
      <div>
        <label for="file_excel" class="block font-semibold mb-2">Upload File Excel (.xls / .xlsx):</label>
        <input type="file" name="file_excel" id="file_excel" 
               class="block w-full rounded-lg border border-gray-300 shadow-sm focus:ring-red-500 focus:border-red-500 text-sm p-2"
               accept=".xls,.xlsx" required>
        <a target="_blank" href="https://docs.google.com/spreadsheets/d/125Lf0h5VCXBEnnMSII3LRBiOj14DKmyE/edit?usp=sharing&ouid=113827974921353843070&rtpof=true&sd=true"
           class="text-blue-600 text-sm mt-2 inline-block hover:underline">
          Lihat Format Excel!
        </a>
      </div>

      <!-- Submit -->
      <div>
        <button type="submit" 
                class="w-full md:w-auto inline-flex items-center px-5 py-2.5 bg-red-600 text-white rounded-lg shadow hover:bg-red-700 transition">
          Upload
        </button>
      </div>
    </form>

    <!-- Error Messages -->
    {% if failed %}
      <div class="mt-6 p-4 rounded-lg bg-yellow-50 border border-yellow-300 text-yellow-800">
        <strong class="block mb-2">{{ failed|length }} baris gagal diproses:</strong>
        <ul class="list-disc pl-5 space-y-1 text-sm">
          {% for row_num, error in failed %}
            <li>Baris {{ row_num }}: {{ error }}</li>
          {% endfor %}
        </ul>
      </div>
    {% endif %}
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

{% if inserted > 0 %}
<script>
Swal.fire({
  icon: 'success',
  title: '{{ inserted }} data berhasil dimasukkan!',
  text: '{{ failed|length }} baris gagal diproses.',
  confirmButtonText: 'OK'
});
</script>
{% elif inserted == 0 and failed %}
<script>
Swal.fire({
  icon: 'warning',
  title: 'Tidak ada data dimasukkan!',
  text: '{{ failed|length }} baris gagal diproses.',
  confirmButtonText: 'OK'
});
</script>
{% endif %}
{% endblock %}