{% extends "base.html" %}

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

{% block content %}
<div class="space-y-6">
    <a href="{{ url_for('guru.setoran_hafalan_list') }}" 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
    </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">{{ setoran.murid.name }}</h3>
                <p class="text-gray-500 mt-1">{{ setoran.surah_name }} ayat {{ setoran.start_verse }}-{{ setoran.end_verse }}</p>
                <p class="text-xs text-gray-400 mt-2">Dibuat: {{ setoran.created_at.strftime('%d/%m/%Y %H:%M') }}</p>
            </div>
            <div class="flex flex-wrap gap-2">
                {% if setoran.five_ayat_completed_at %}
                <span class="px-3 py-1 rounded-full bg-primary-50 text-primary-700 text-xs font-bold">
                    5 ayat tuntas: {{ setoran.five_ayat_completed_at.strftime('%d/%m/%Y %H:%M') }}
                </span>
                {% endif %}
                {% if setoran.completed_at %}
                <span class="px-3 py-1 rounded-full bg-green-50 text-green-700 text-xs font-bold">
                    Selesai: {{ setoran.completed_at.strftime('%d/%m/%Y %H:%M') }}
                </span>
                {% endif %}
            </div>
        </div>
    </div>

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

        {% for item in items %}
        <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-5"
             {% if item.hukum_bacaan %}style="border-left: 6px solid {{ item.hukum_bacaan.color }}"{% endif %}>
            <div class="flex flex-col lg:flex-row gap-5">
                <div class="lg:w-1/2">
                    <div class="flex items-center justify-between mb-3">
                        <span class="px-3 py-1 rounded-lg bg-primary-50 text-primary-700 text-sm font-bold">{{ item.verse_key }}</span>
                        {% if item.completed_at %}
                        <span class="text-xs text-gray-400">Tuntas: {{ item.completed_at.strftime('%d/%m/%Y %H:%M') }}</span>
                        {% endif %}
                    </div>
                    {% if item.hukum_bacaan %}
                    <p class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold text-white mb-3" style="background-color: {{ item.hukum_bacaan.color }}">
                        {{ item.hukum_bacaan.name }}
                    </p>
                    {% endif %}
                    <p class="font-arabic text-2xl text-right leading-[2.4] text-gray-800">{{ item.verse_text or item.verse_key }}</p>
                </div>

                <div class="lg:w-1/2 space-y-4">
                    <label class="flex items-center gap-3 min-h-[52px] px-4 py-3 rounded-xl border border-gray-200 cursor-pointer">
                        <input type="checkbox" name="completed_{{ item.id }}" class="w-6 h-6 text-primary-600 rounded" {% if item.is_completed %}checked{% endif %}>
                        <span class="text-base font-semibold text-gray-700">Ayat ini tuntas</span>
                    </label>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Hukum Bacaan</label>
                        <select name="hukum_{{ item.id }}" 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="">Tanpa tanda</option>
                            {% for hukum in hukum_list %}
                            <option value="{{ hukum.id }}" {% if item.hukum_bacaan_id == hukum.id %}selected{% endif %}>{{ hukum.name }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Komentar</label>
                        <textarea name="comment_{{ item.id }}" rows="3" placeholder="Catatan tajwid, koreksi, atau arahan..."
                                  class="w-full 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 resize-y">{{ item.comment or '' }}</textarea>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}

        <div class="sticky bottom-4 bg-white rounded-xl border border-gray-100 shadow-lg p-4">
            <button type="submit" class="w-full min-h-[56px] px-5 py-3 bg-primary-600 text-white rounded-xl text-base font-bold hover:bg-primary-700">
                Simpan Setoran Hafalan
            </button>
        </div>
    </form>
</div>
{% endblock %}