{% extends 'superadmin/base.html' %}

{% block title %}Permohonan Penganjur | Superadmin{% endblock %}
{% block page_title %}Permohonan Penganjur{% endblock %}
{% block nav_permohonan %}active{% endblock %}

{% block content %}
<style>
    .fade-up-item { opacity: 0; animation: fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
    @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
</style>

<div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden flex flex-col fade-up-item" style="animation-delay: 0.1s;">
    
    <div class="px-6 py-5 border-b border-slate-100 flex justify-between items-center bg-slate-50/50">
        <div>
            <h3 class="font-black text-slate-800 text-sm flex items-center gap-2">
                <i class="fas fa-file-signature text-teal-500"></i> Senarai Permohonan
            </h3>
            <p class="text-[10px] font-medium text-slate-400 mt-0.5">Semak dan luluskan permohonan pengguna untuk menjadi penganjur bengkel</p>
        </div>
        <div class="text-[11px] font-bold text-slate-500 bg-white border border-slate-200 px-3 py-1.5 rounded-lg shadow-sm">
            Total: <span class="text-teal-600">{{ permohonan_list|length|default:"0" }} jumlah</span>
        </div>
    </div>

    <div class="p-0">
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr class="text-slate-400 text-[10px] uppercase tracking-widest border-b border-slate-200 bg-slate-50">
                        <th class="p-4 font-bold w-12 text-center">#</th>
                        <th class="p-4 font-bold">Pemohon</th>
                        <th class="p-4 font-bold">Sebab Permohonan</th>
                        <th class="p-4 font-bold text-center">Status</th>
                        <th class="p-4 font-bold">Tarikh Mohon</th>
                        <th class="p-4 font-bold text-center">Tindakan</th>
                    </tr>
                </thead>
                <tbody class="text-sm">
                    {% for permohonan in permohonan_list %}
                    <tr class="border-b border-slate-100 hover:bg-slate-50 transition group">
                        <td class="p-4 text-slate-400 text-xs text-center font-bold">{{ forloop.counter }}</td>
                        
                        <td class="p-4">
                            <div class="font-bold text-slate-700 group-hover:text-teal-600 transition">{{ permohonan.user.username }}</div>
                            <div class="text-[10px] text-slate-400 mt-0.5">{{ permohonan.user.email }}</div>
                        </td>
                        
                        <td class="p-4 text-slate-500 text-xs truncate max-w-[200px]" title="{{ permohonan.sebab }}">{{ permohonan.sebab|default:"-" }}</td>
                        
                        <td class="p-4 text-center">
                            {% if permohonan.status == 'pending' %}
                                <span class="bg-amber-50 text-amber-600 border border-amber-200 px-2.5 py-1 rounded-md text-[9px] font-bold uppercase tracking-widest"><i class="fas fa-clock mr-1"></i> Menunggu</span>
                            {% elif permohonan.status == 'approved' %}
                                <span class="bg-emerald-50 text-emerald-600 border border-emerald-200 px-2.5 py-1 rounded-md text-[9px] font-bold uppercase tracking-widest"><i class="fas fa-check-circle mr-1"></i> Lulus</span>
                            {% else %}
                                <span class="bg-rose-50 text-rose-600 border border-rose-200 px-2.5 py-1 rounded-md text-[9px] font-bold uppercase tracking-widest"><i class="fas fa-times-circle mr-1"></i> Ditolak</span>
                            {% endif %}
                        </td>
                        
                        <td class="p-4 text-slate-500 text-xs font-medium">{{ permohonan.created_at|date:"d M Y, h:i A" }}</td>
                        
                        <td class="p-4 text-center flex justify-center gap-2">
                            {% if permohonan.status == 'pending' %}
                                <form method="post" action="{% url 'superadmin:lulus_permohonan' permohonan.id %}" class="m-0" onsubmit="return confirm('Pasti mahu meluluskan permohonan ini? E-mel kelulusan akan dihantar secara automatik.');">
                                    {% csrf_token %}
                                    <button type="submit" class="bg-emerald-50 text-emerald-600 hover:bg-emerald-600 hover:text-white px-3 py-1.5 rounded-lg text-[10px] font-bold transition shadow-sm border border-emerald-200 hover:border-emerald-600" title="Luluskan">
                                        <i class="fas fa-check mr-1"></i> Lulus
                                    </button>
                                </form>
                                <form method="post" action="{% url 'superadmin:tolak_permohonan' permohonan.id %}" class="m-0" onsubmit="return confirm('Pasti mahu menolak permohonan ini?');">
                                    {% csrf_token %}
                                    <button type="submit" class="bg-rose-50 text-rose-600 hover:bg-rose-600 hover:text-white px-3 py-1.5 rounded-lg text-[10px] font-bold transition shadow-sm border border-rose-200 hover:border-rose-600" title="Tolak">
                                        <i class="fas fa-times mr-1"></i> Tolak
                                    </button>
                                </form>
                            {% elif permohonan.status == 'approved' %}
                                <div class="text-center bg-emerald-50 border border-emerald-200 p-2 rounded-lg w-full max-w-[100px] mx-auto">
                                    <div class="text-[9px] text-emerald-600 font-bold uppercase tracking-widest"><i class="fas fa-check-circle mr-1"></i> Diluluskan</div>
                                </div>
                            {% else %}
                                <span class="text-[10px] text-slate-400 font-bold italic mt-2">Selesai (Ditolak)</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="6" class="p-16 text-center">
                            <div class="flex flex-col items-center justify-center">
                                <div class="w-20 h-20 bg-slate-50 rounded-full flex items-center justify-center border-2 border-dashed border-slate-200 mb-4 text-slate-300 text-3xl shadow-inner">
                                    <i class="fas fa-inbox"></i>
                                </div>
                                <h4 class="font-bold text-slate-700 text-sm">Tiada permohonan dijumpai.</h4>
                                <p class="text-xs text-slate-500 mt-1 max-w-sm">Permohonan baharu akan muncul di sini apabila peserta memohon.</p>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}