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

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

{% block content %}
<div class="max-w-3xl mx-auto mt-10 mb-10">
    <div class="bg-white shadow-lg rounded-lg p-6">
        <h3 class="text-2xl font-bold mb-6 text-gray-800">Upload Data Billing via Excel</h3>

        <form method="post" enctype="multipart/form-data" class="space-y-5">
            {% csrf_token %}
            
            <!-- Pilih Kategori -->
            <div>
                <label for="kategori" class="block font-semibold text-gray-700 mb-2">Pilih Kategori Billing:</label>
                <select name="kategori" id="kategori" required
                    class="block w-full rounded-md border border-gray-300 shadow-sm px-3 py-2 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-red-500">
                    <option value="" disabled selected>-- Pilih Kategori --</option>
                    <option value="Billing Pertama">Billing Pertama</option>
                    <option value="Billing Kedua">Billing Kedua</option>
                    <option value="Billing Ketiga">Billing Ketiga</option>
                    <option value="Billing Keempat">Billing Keempat</option>
                    <option value="Billing Kelima">Billing Kelima</option>
                    <option value="Billing Keenam">Billing Keenam</option>
                </select>
            </div>

            <!-- Upload File -->
            <div>
                <label for="file" class="block font-semibold text-gray-700 mb-2">Upload File Excel (.xls / .xlsx):</label>
                <input type="file" name="file" id="file" accept=".xls,.xlsx" required
                    class="block w-full text-sm text-gray-700 border border-gray-300 rounded-md shadow-sm cursor-pointer focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-red-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-red-600 file:text-white hover:file:bg-red-700" />
            </div>

            <button type="submit"
                class="w-full bg-red-600 hover:bg-red-700 text-white font-semibold py-2 px-4 rounded-lg shadow-md transition duration-150">
                Upload
            </button>
        </form>

        {% if failed %}
            <div class="mt-6 bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 rounded-md">
                <strong class="block mb-2">{{ failed|length }} baris gagal:</strong>
                <ul class="list-disc pl-6 space-y-1 text-sm">
                    {% for row_num, error in failed %}
                        <li>Baris {{ row_num }}: {{ error }}</li>
                    {% endfor %}
                </ul>
            </div>
        {% endif %}

        <hr class="my-6 border-gray-300">
    </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',
    confirmButtonColor: '#dc2626'
});
</script>
{% else %}
<script>
Swal.fire({
    icon: 'warning',
    title: 'Tidak ada data dimasukkan',
    text: '{{ failed|length }} baris gagal diproses.',
    confirmButtonText: 'OK',
    confirmButtonColor: '#f59e0b'
});
</script>
{% endif %}
{% endblock %}