{% extends "base.html" %}

{% block title %}Import Murid Massal{% endblock %}
{% block page_title %}Import Data Murid Massal{% endblock %}

{% block content %}
<div class="mb-6">
    <a href="{{ url_for('admin.murid_list') }}" class="inline-flex items-center gap-1 text-sm text-gray-600 hover:text-gray-800 transition-colors">
        <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 Data Murid
    </a>
</div>

<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
    <div class="mb-6">
        <h3 class="text-lg font-semibold text-gray-800 mb-2">Petunjuk Penggunaan</h3>
        <div class="bg-blue-50 border border-blue-100 rounded-lg p-4 text-sm text-blue-800">
            <ol class="list-decimal list-inside space-y-1">
                <li>Copy data dari Excel dengan format: <strong>Nama</strong> dan <strong>Kelas</strong> (dipisahkan tab)</li>
                <li>Paste ke textarea di bawah</li>
                <li>Sistem akan otomatis mencocokkan nama kelas dengan data kelas yang sudah ada</li>
                <li>Klik <strong>Preview</strong> untuk melihat hasil sebelum import</li>
                <li>Klik <strong>Import</strong> untuk membuat semua akun murid</li>
            </ol>
            <p class="mt-3 font-medium">Format yang didukung:</p>
            <ul class="list-disc list-inside space-y-1 text-blue-700">
                <li>Tab-separated (copy dari Excel): <code class="bg-blue-100 px-1 rounded">Abdullah Rahman\t7A</code></li>
                <li>Comma-separated: <code class="bg-blue-100 px-1 rounded">Abdullah Rahman, 7A</code></li>
                <li>Nama saja (tanpa kelas): <code class="bg-blue-100 px-1 rounded">Abdullah Rahman</code></li>
            </ul>
            <p class="mt-3 font-medium">Password default: <code class="bg-blue-100 px-2 py-0.5 rounded font-mono">passwd</code></p>
            <p class="mt-1 text-blue-700">Email akan di-generate otomatis dari nama murid.</p>
        </div>
    </div>

    <form method="POST" id="bulkForm">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <input type="hidden" name="preview_data" id="previewData" value="">

        <div class="mb-6">
            <label for="bulk_text" class="block text-sm font-medium text-gray-700 mb-2">
                Data Murid (satu baris per murid)
            </label>
            <textarea
                id="bulk_text"
                name="bulk_text"
                rows="12"
                class="w-full px-4 py-3 border border-gray-300 rounded-lg text-sm font-mono focus:ring-2 focus:ring-primary-500 focus:border-primary-500 resize-y"
                placeholder="Contoh:&#10;Abdullah Rahman	7A&#10;Aisyah Putri	7A&#10;Muhammad Rizki	7B&#10;Khadijah Sari	7B&#10;Umar Fadhil	8A"
            ></textarea>
            <p class="mt-1 text-xs text-gray-500">Tip: Anda bisa langsung paste dari Excel (Ctrl+V / Cmd+V). Kolom Nama dan Kelas akan otomatis terbaca.</p>
        </div>

        <div class="flex items-center gap-3">
            <button type="submit" name="action" value="preview" class="inline-flex items-center gap-2 px-5 py-2.5 bg-gray-600 text-white rounded-lg text-sm font-medium hover:bg-gray-700 transition-colors">
                <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 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                Preview
            </button>
            <button type="button" onclick="document.getElementById('bulk_text').value=''; document.getElementById('bulk_text').focus();" class="inline-flex items-center gap-2 px-5 py-2.5 bg-white border border-gray-300 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-50 transition-colors">
                <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                Bersihkan
            </button>
        </div>
    </form>
</div>

{% if preview %}
<div class="mt-6 bg-white rounded-xl shadow-sm border border-gray-100 p-6">
    <h3 class="text-lg font-semibold text-gray-800 mb-4">Preview Hasil Import</h3>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
        <div class="bg-blue-50 rounded-lg p-4 border border-blue-100">
            <p class="text-sm text-blue-600">Total Murid</p>
            <p class="text-2xl font-bold text-blue-800">{{ preview.total }}</p>
        </div>
        <div class="bg-green-50 rounded-lg p-4 border border-green-100">
            <p class="text-sm text-green-600">Kelas Cocok</p>
            <p class="text-2xl font-bold text-green-800">{{ preview.matched_kelas }}</p>
        </div>
        {% if preview.unmatched_kelas > 0 %}
        <div class="bg-yellow-50 rounded-lg p-4 border border-yellow-100">
            <p class="text-sm text-yellow-600">Kelas Tidak Cocok</p>
            <p class="text-2xl font-bold text-yellow-800">{{ preview.unmatched_kelas }}</p>
        </div>
        {% endif %}
    </div>

    <div class="overflow-x-auto rounded-lg border border-gray-200">
        <table class="w-full">
            <thead class="bg-gray-50">
                <tr>
                    <th class="text-left text-xs font-medium text-gray-500 uppercase px-4 py-3">#</th>
                    <th class="text-left text-xs font-medium text-gray-500 uppercase px-4 py-3">Nama</th>
                    <th class="text-left text-xs font-medium text-gray-500 uppercase px-4 py-3">Kelas</th>
                    <th class="text-left text-xs font-medium text-gray-500 uppercase px-4 py-3">Status</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                {% for student in preview.students %}
                <tr class="hover:bg-gray-50">
                    <td class="px-4 py-3 text-sm text-gray-500">{{ loop.index }}</td>
                    <td class="px-4 py-3">
                        <span class="text-sm font-medium text-gray-800">{{ student.name }}</span>
                        <p class="text-xs text-gray-400 mt-0.5">murid.{{ student.name|lower|replace(' ', '.') }}@school{{ g.school_id }}.iqrapath.local</p>
                    </td>
                    <td class="px-4 py-3">
                        {% if student.kelas_id %}
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                {{ student.kelas }}
                            </span>
                        {% elif student.kelas %}
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                                {{ student.kelas }} (tidak cocok)
                            </span>
                        {% else %}
                            <span class="text-gray-400 text-sm">-</span>
                        {% endif %}
                    </td>
                    <td class="px-4 py-3">
                        {% if student.kelas_id %}
                            <span class="text-green-600 text-sm">✓ Masuk kelas</span>
                        {% elif student.kelas %}
                            <span class="text-yellow-600 text-sm">⚠ Kelas tidak ditemukan</span>
                        {% else %}
                            <span class="text-blue-600 text-sm">✓ Tanpa kelas</span>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <form method="POST" class="mt-6 flex items-center gap-3" id="importForm">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <input type="hidden" name="preview_data" value="{{ preview.json }}">
        <input type="hidden" name="action" value="import">

        <button type="submit" class="inline-flex items-center gap-2 px-6 py-2.5 bg-primary-600 text-white rounded-lg text-sm font-medium hover:bg-primary-700 transition-colors" onclick="return confirm('Import {{ preview.total }} murid? Pastikan data sudah benar.')">
            <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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/></svg>
            Import {{ preview.total }} Murid
        </button>
        <button type="button" onclick="window.scrollTo({top: 0, behavior: 'smooth'}); document.getElementById('bulk_text').focus();" class="inline-flex items-center gap-2 px-5 py-2.5 bg-white border border-gray-300 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-50 transition-colors">
            Edit Data
        </button>
    </form>
</div>
{% endif %}

<script>
// Auto-detect tab-separated data pasted from Excel
document.getElementById('bulk_text').addEventListener('paste', function(e) {
    // Let the default paste happen, then check
    setTimeout(function() {
        const textarea = document.getElementById('bulk_text');
        const value = textarea.value;
        if (value.includes('\t')) {
            // Data contains tabs, which is fine - the server will parse it
        }
    }, 0);
});
</script>
{% endblock %}