{% extends "base.html" %}

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

{% block content %}
<div class="space-y-6">
    <a href="{{ url_for('guru.nilai_import') }}" class="inline-flex items-center gap-1 text-sm text-gray-500 hover:text-primary-600">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
        Kembali ke Import
    </a>

    <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-6">
        <div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4">
            <div>
                <h3 class="text-xl font-bold text-gray-800">{{ batch.filename }}</h3>
                <p class="text-sm text-gray-500 mt-1">{{ batch.created_at.strftime('%d/%m/%Y %H:%M') }}</p>
            </div>
            {% if not batch.is_rolled_back %}
            <form method="POST" action="{{ url_for('guru.nilai_import_rollback', batch_id=batch.id) }}" onsubmit="return confirm('Rollback import ini? Data baru akan dihapus dan data update akan dikembalikan.')">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <button type="submit" class="min-h-[52px] px-5 py-3 bg-red-600 text-white rounded-xl font-semibold hover:bg-red-700">Rollback Batch</button>
            </form>
            {% else %}
            <span class="px-3 py-2 rounded-lg bg-red-50 text-red-700 text-sm font-bold">Sudah rollback {{ batch.rolled_back_at.strftime('%d/%m/%Y %H:%M') if batch.rolled_back_at else '' }}</span>
            {% endif %}
        </div>
        <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 mt-6">
            <div class="rounded-xl bg-gray-50 p-4"><p class="text-sm text-gray-500">Total</p><p class="text-2xl font-bold">{{ batch.total_rows }}</p></div>
            <div class="rounded-xl bg-green-50 p-4"><p class="text-sm text-green-700">Baru</p><p class="text-2xl font-bold text-green-800">{{ batch.created_count }}</p></div>
            <div class="rounded-xl bg-blue-50 p-4"><p class="text-sm text-blue-700">Update</p><p class="text-2xl font-bold text-blue-800">{{ batch.updated_count }}</p></div>
            <div class="rounded-xl bg-yellow-50 p-4"><p class="text-sm text-yellow-700">Skip</p><p class="text-2xl font-bold text-yellow-800">{{ batch.skipped_count }}</p></div>
        </div>
    </div>

    <div class="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="text-left text-xs font-bold text-gray-500 uppercase px-4 py-3">Baris</th>
                        <th class="text-left text-xs font-bold text-gray-500 uppercase px-4 py-3">Status</th>
                        <th class="text-left text-xs font-bold text-gray-500 uppercase px-4 py-3">Murid</th>
                        <th class="text-left text-xs font-bold text-gray-500 uppercase px-4 py-3">Kelas/Mapel</th>
                        <th class="text-left text-xs font-bold text-gray-500 uppercase px-4 py-3">Surat/Ayat</th>
                        <th class="text-left text-xs font-bold text-gray-500 uppercase px-4 py-3">Nilai</th>
                        <th class="text-left text-xs font-bold text-gray-500 uppercase px-4 py-3">Keterangan</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    {% for row in rows %}
                    <tr>
                        <td class="px-4 py-3 text-sm text-gray-500">{{ row.row_number }}</td>
                        <td class="px-4 py-3">
                            {% if row.status == 'success' %}
                            <span class="px-2 py-1 rounded bg-green-50 text-green-700 text-xs font-bold">{{ row.action }}</span>
                            {% else %}
                            <span class="px-2 py-1 rounded bg-yellow-50 text-yellow-700 text-xs font-bold">skip</span>
                            {% endif %}
                        </td>
                        <td class="px-4 py-3 text-sm font-medium text-gray-800">{{ row.murid_name or '-' }}</td>
                        <td class="px-4 py-3 text-sm text-gray-600">{{ row.kelas_name or '-' }}<br>{{ row.mapel_name or '-' }}</td>
                        <td class="px-4 py-3 text-sm text-gray-600">{{ row.surah_name or '-' }}<br>{{ row.ayat or '-' }}</td>
                        <td class="px-4 py-3 text-sm font-semibold text-gray-800">{{ row.score if row.score is not none else '-' }}</td>
                        <td class="px-4 py-3 text-sm text-gray-600">{{ row.message or row.description or '-' }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}