{% extends "base.html" %}

{% block title %}Import Nilai Excel{% endblock %}
{% block page_title %}Import Nilai Excel{% endblock %}

{% block content %}
<div class="space-y-6">
    <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-6">
        <h3 class="text-xl font-bold text-gray-800">Import Excel Fleksibel</h3>
        <p class="text-sm text-gray-500 mt-1">Kolom minimal: nama murid dan nilai. Kolom lain seperti kelas, mapel, surat, ayat, jenis, dan keterangan akan dibaca otomatis jika ada.</p>

        <form method="POST" enctype="multipart/form-data" class="mt-6 space-y-5">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

            <div>
                <label class="block text-base font-medium text-gray-700 mb-2">File Excel (.xlsx / .xls)</label>
                <input type="file" name="file" accept=".xlsx,.xls" required class="w-full rounded-xl border border-gray-200 px-4 py-3">
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
                <div>
                    <label class="block text-base font-medium text-gray-700 mb-2">Default Kelas</label>
                    <select name="default_kelas_id" class="w-full">
                        <option value="">Gunakan kolom Excel</option>
                        {% for kelas in kelas_list %}
                        <option value="{{ kelas.id }}">{{ kelas.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label class="block text-base font-medium text-gray-700 mb-2">Default Mapel</label>
                    <select name="default_mapel_id" class="w-full">
                        <option value="">Gunakan kolom Excel</option>
                        {% for mapel in mapel_list %}
                        <option value="{{ mapel.id }}">{{ mapel.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label class="block text-base font-medium text-gray-700 mb-2">Default Jenis</label>
                    <select name="default_type" class="w-full">
                        <option value="tugas">Tugas</option>
                        <option value="kuis">Kuis</option>
                        <option value="uts">UTS</option>
                        <option value="uas">UAS</option>
                        <option value="praktik">Praktik</option>
                    </select>
                </div>
            </div>

            <button type="submit" class="w-full min-h-[56px] px-5 py-3 bg-primary-600 text-white rounded-xl font-semibold hover:bg-primary-700">
                Import dan Update Otomatis
            </button>
        </form>
    </div>

    <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-6">
        <h3 class="text-lg font-bold text-gray-800 mb-4">History Import</h3>
        {% if batches %}
        <div class="space-y-3">
            {% for batch in batches %}
            <a href="{{ url_for('guru.nilai_import_detail', batch_id=batch.id) }}" class="block rounded-xl border border-gray-100 p-4 hover:bg-gray-50">
                <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-3">
                    <div>
                        <p class="font-semibold text-gray-800">{{ batch.filename }}</p>
                        <p class="text-sm text-gray-500">{{ batch.created_at.strftime('%d/%m/%Y %H:%M') }}</p>
                    </div>
                    <div class="flex flex-wrap gap-2 text-xs font-semibold">
                        <span class="px-2 py-1 rounded bg-green-50 text-green-700">{{ batch.created_count }} baru</span>
                        <span class="px-2 py-1 rounded bg-blue-50 text-blue-700">{{ batch.updated_count }} update</span>
                        <span class="px-2 py-1 rounded bg-yellow-50 text-yellow-700">{{ batch.skipped_count }} skip</span>
                        {% if batch.is_rolled_back %}
                        <span class="px-2 py-1 rounded bg-red-50 text-red-700">Rollback</span>
                        {% endif %}
                    </div>
                </div>
            </a>
            {% endfor %}
        </div>
        {% else %}
        <p class="text-sm text-gray-400">Belum ada history import.</p>
        {% endif %}
    </div>
</div>
{% endblock %}