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

{% block title %}Pusat Bantuan | Superadmin{% endblock %}
{% block page_title %}Tiket Maklum Balas Sistem{% endblock %}
{% block nav_pernyataan %}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-3xl 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-headset text-indigo-500"></i> Senarai Tiket Bantuan & Aduan
            </h3>
            <p class="text-[10px] font-medium text-slate-400 mt-0.5">Pantau laporan ralat (bug), cadangan, dan pertanyaan (enquiry) daripada pengguna.</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-indigo-600">{{ pernyataan_list|length|default:"0" }} Tiket</span>
        </div>
    </div>

    <div class="p-0">
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse whitespace-nowrap">
                <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">Tiket #</th>
                        <th class="p-4 font-bold">Kategori</th>
                        <th class="p-4 font-bold">Tajuk & Ringkasan</th>
                        <th class="p-4 font-bold">Pengadu</th>
                        <th class="p-4 font-bold">Tarikh</th>
                        <th class="p-4 font-bold text-center">Status</th>
                    </tr>
                </thead>
                <tbody class="text-sm">
                    {% for item in pernyataan_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-mono font-bold">#{{ item.id|stringformat:"04d" }}</td>
                        <td class="p-4">
                            <span class="px-2.5 py-1 rounded-md text-[9px] font-black uppercase tracking-wider border 
                                {% if item.kategori == 'bug' %}bg-rose-50 text-rose-600 border-rose-200
                                {% elif item.kategori == 'cadangan' %}bg-emerald-50 text-emerald-600 border-emerald-200
                                {% else %}bg-blue-50 text-blue-600 border-blue-200{% endif %}">
                                {% if item.kategori == 'bug' %}<i class="fas fa-bug mr-1"></i>
                                {% elif item.kategori == 'cadangan' %}<i class="fas fa-lightbulb mr-1"></i>
                                {% else %}<i class="fas fa-question-circle mr-1"></i>{% endif %}
                                {{ item.get_kategori_display }}
                            </span>
                        </td>
                        <td class="p-4">
                            <div class="font-bold text-slate-800 group-hover:text-indigo-600 transition truncate max-w-[250px]">{{ item.tajuk }}</div>
                            <div class="text-[10px] text-slate-500 truncate max-w-[250px] mt-0.5">{{ item.mesej }}</div>
                        </td>
                        <td class="p-4 text-slate-600 text-xs font-medium">
                            <i class="fas fa-user-circle mr-1 text-slate-300 text-lg align-middle"></i> {{ item.submitted_by.username|default:"Pelawat Awam" }}
                        </td>
                        <td class="p-4 text-slate-500 text-[11px]">{{ item.created_at|date:"d M Y, h:i A" }}</td>
                        <td class="p-4 text-center">
                            {% if item.status == 'resolved' %}
                                <span class="text-emerald-500 text-[10px] uppercase font-black tracking-widest"><i class="fas fa-check-circle mr-1"></i> Selesai</span>
                            {% else %}
                                <span class="text-amber-500 text-[10px] uppercase font-black tracking-widest"><i class="fas fa-clock mr-1"></i> Pending</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-check-double text-emerald-400 opacity-50"></i>
                                </div>
                                <h4 class="font-bold text-slate-700 text-sm">Sistem Dalam Keadaan Sempurna</h4>
                                <p class="text-xs text-slate-500 mt-1 max-w-sm">Tiada laporan bug, cadangan, atau pertanyaan (enquiry) baru diterima setakat ini.</p>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}