{% extends "base.html" %}

{% block title %}Input Nilai{% endblock %}
{% block page_title %}Input Nilai{% endblock %}

{% block content %}
<div class="space-y-6">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-5">
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            <h3 class="text-xl font-bold text-gray-800">Input Manual</h3>
            <p class="text-sm text-gray-500 mt-1">Pilih kelas dan mapel untuk mengisi nilai langsung.</p>
            <form method="GET" class="grid grid-cols-1 gap-4 mt-5">
                <div>
                    <label class="block text-base font-medium text-gray-700 mb-2">Kelas</label>
                    <select name="kelas_id" onchange="this.form.submit()" class="w-full">
                        <option value="">Pilih kelas</option>
                        {% for kelas in kelas_list %}
                        <option value="{{ kelas.id }}" {% if selected_kelas == kelas.id %}selected{% endif %}>{{ kelas.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label class="block text-base font-medium text-gray-700 mb-2">Mata Pelajaran</label>
                    <select name="mapel_id" onchange="this.form.submit()" class="w-full">
                        <option value="">Pilih mapel</option>
                        {% for mapel in mapel_list %}
                        <option value="{{ mapel.id }}" {% if selected_mapel == mapel.id %}selected{% endif %}>{{ mapel.name }}</option>
                        {% endfor %}
                    </select>
                </div>
            </form>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-primary-100 p-6">
            <h3 class="text-xl font-bold text-gray-800">Import Excel Fleksibel</h3>
            <p class="text-sm text-gray-500 mt-1">Upload .xlsx atau .xls berisi nama murid, kelas, surat, ayat, nilai, dan kolom lain.</p>
            <a href="{{ url_for('guru.nilai_import') }}" class="mt-5 inline-flex items-center justify-center w-full min-h-[56px] px-5 py-3 bg-primary-600 text-white rounded-xl font-semibold hover:bg-primary-700">
                Buka Import Excel
            </a>
        </div>
    </div>

    {% if murid_list %}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
        <form method="POST">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <input type="hidden" name="kelas_id" value="{{ selected_kelas }}">
            <input type="hidden" name="mapel_id" value="{{ selected_mapel }}">

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6">
                <div>
                    <label class="block text-base font-medium text-gray-700 mb-2">Jenis Nilai</label>
                    <select name="type" required 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>
                    <label class="block text-base font-medium text-gray-700 mb-2">Keterangan</label>
                    <input type="text" name="description" placeholder="Contoh: Hafalan Al-Baqarah 1-5" class="w-full">
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
                {% for murid in murid_list %}
                <div class="rounded-xl border border-gray-100 p-4 bg-gray-50">
                    <p class="font-semibold text-gray-800">{{ murid.name }}</p>
                    <div class="min-h-[28px] mt-2">
                        {% if murid.id in existing_nilai %}
                            {% for n in existing_nilai[murid.id][-2:] %}
                            <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-blue-50 text-blue-700 mr-1 mb-1">
                                {{ n.type }}: {{ n.score }}
                            </span>
                            {% endfor %}
                        {% else %}
                            <span class="text-sm text-gray-400">Belum ada nilai</span>
                        {% endif %}
                    </div>
                    <input type="number" name="score_{{ murid.id }}" min="0" max="100" step="0.01" placeholder="Nilai 0-100" class="w-full mt-3">
                </div>
                {% endfor %}
            </div>

            <div class="mt-6">
                <button type="submit" class="w-full min-h-[56px] px-6 py-3 bg-primary-600 text-white rounded-xl text-base font-semibold hover:bg-primary-700">
                    Simpan Nilai Manual
                </button>
            </div>
        </form>
    </div>
    {% elif selected_kelas and selected_mapel %}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-8 text-center text-gray-500">
        Tidak ada murid di kelas ini.
    </div>
    {% endif %}
</div>
{% endblock %}