{% extends "base.html" %}

{% block title %}Buat Setoran Hafalan{% endblock %}
{% block page_title %}Buat Setoran Hafalan{% endblock %}

{% block content %}
<div class="max-w-4xl bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
    <div class="islamic-pattern-bg px-6 py-5 text-white">
        <h3 class="text-xl font-bold">Sesi Setoran Baru</h3>
        <p class="text-sm text-emerald-100 mt-1">Pilih murid, surah, dan rentang ayat yang akan disetorkan.</p>
    </div>

    <form method="POST" class="p-6 space-y-6">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

        <div>
            <label class="block text-base font-medium text-gray-700 mb-2">Murid</label>
            <input type="hidden" name="murid_id" id="muridIdInput" required>
            <input type="search" id="muridSearch" inputmode="search" autocomplete="off"
                   placeholder="Cari nama murid..."
                   class="w-full min-h-[56px] px-4 py-3 rounded-xl border border-gray-200 text-base focus:border-primary-400 focus:ring-2 focus:ring-primary-100 outline-none mb-3">
            <div id="muridOptions" class="min-h-[220px] max-h-[320px] overflow-y-auto rounded-xl border border-gray-200 bg-white p-2 space-y-2">
                {% for murid in murid_list %}
                <button type="button" data-murid-id="{{ murid.id }}" data-murid-name="{{ murid.name|lower }}"
                        class="murid-option w-full min-h-[52px] px-4 py-3 text-left rounded-lg text-base hover:bg-gray-50 border border-transparent">
                    {{ murid.name }}
                </button>
                {% endfor %}
                <p id="muridNoResults" class="hidden px-4 py-6 text-center text-sm text-gray-400">Murid tidak ditemukan</p>
            </div>
            <p id="muridSelectedText" class="mt-2 text-sm text-gray-500">Belum ada murid dipilih.</p>
        </div>

        <div>
            <label class="block text-base font-medium text-gray-700 mb-2">Surah</label>
            <select name="surah_number" required class="w-full min-h-[52px] px-4 py-3 rounded-xl border border-gray-200 text-base focus:border-primary-400 focus:ring-2 focus:ring-primary-100 outline-none">
                <option value="">Pilih surah</option>
                {% for ch in chapters %}
                <option value="{{ ch.id }}">{{ ch.id }}. {{ ch.translated_name.name if ch.translated_name else ch.name_complex }} ({{ ch.verses_count }} ayat)</option>
                {% endfor %}
            </select>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
                <label class="block text-base font-medium text-gray-700 mb-2">Ayat Awal</label>
                <input type="number" name="start_verse" min="1" required class="w-full min-h-[52px] px-4 py-3 rounded-xl border border-gray-200 text-base focus:border-primary-400 focus:ring-2 focus:ring-primary-100 outline-none">
            </div>
            <div>
                <label class="block text-base font-medium text-gray-700 mb-2">Ayat Akhir</label>
                <input type="number" name="end_verse" min="1" required class="w-full min-h-[52px] px-4 py-3 rounded-xl border border-gray-200 text-base focus:border-primary-400 focus:ring-2 focus:ring-primary-100 outline-none">
            </div>
        </div>

        <div class="flex gap-3 pt-4 border-t border-gray-100">
            <button type="submit" class="flex-1 min-h-[52px] px-5 py-3 bg-primary-600 text-white rounded-xl text-base font-semibold hover:bg-primary-700">Buat Sesi</button>
            <a href="{{ url_for('guru.setoran_hafalan_list') }}" class="min-h-[52px] px-5 py-3 bg-white border border-gray-200 text-gray-600 rounded-xl text-base font-semibold hover:bg-gray-50">Batal</a>
        </div>
    </form>
</div>

<script>
const muridSearch = document.getElementById('muridSearch');
const muridIdInput = document.getElementById('muridIdInput');
const muridOptions = document.getElementById('muridOptions');
const muridNoResults = document.getElementById('muridNoResults');
const muridSelectedText = document.getElementById('muridSelectedText');

function filterMuridOptions() {
    const query = muridSearch.value.trim().toLowerCase();
    let visibleCount = 0;
    muridOptions.querySelectorAll('.murid-option').forEach(option => {
        const visible = !query || option.dataset.muridName.includes(query);
        option.classList.toggle('hidden', !visible);
        if (visible) visibleCount += 1;
    });
    muridNoResults.classList.toggle('hidden', !query || visibleCount > 0);
}

function selectMuridOption(option) {
    muridIdInput.value = option.dataset.muridId;
    muridSearch.value = option.textContent.trim();
    muridSelectedText.textContent = `Dipilih: ${option.textContent.trim()}`;
    muridSelectedText.classList.remove('text-gray-500');
    muridSelectedText.classList.add('text-primary-700', 'font-semibold');
    muridOptions.querySelectorAll('.murid-option').forEach(item => {
        item.classList.remove('bg-primary-50', 'text-primary-700', 'font-semibold', 'border-primary-100');
        item.classList.add('border-transparent');
    });
    option.classList.add('bg-primary-50', 'text-primary-700', 'font-semibold', 'border-primary-100');
    option.classList.remove('border-transparent');
    filterMuridOptions();
}

muridSearch.addEventListener('input', () => {
    muridIdInput.value = '';
    muridSelectedText.textContent = 'Belum ada murid dipilih.';
    muridSelectedText.classList.add('text-gray-500');
    muridSelectedText.classList.remove('text-primary-700', 'font-semibold');
    filterMuridOptions();
});
muridSearch.addEventListener('focus', () => muridSearch.select());
muridOptions.querySelectorAll('.murid-option').forEach(option => {
    option.addEventListener('click', () => selectMuridOption(option));
});
</script>
{% endblock %}