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

{% block title %}Semua Bengkel | Superadmin{% endblock %}
{% block page_title %}Pengurusan Bengkel{% endblock %}
{% block nav_bengkel %}active{% endblock %}

{% block content %}
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden animate-fade-up">
    <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-layer-group text-blue-500"></i> Senarai Bengkel
            </h3>
            <p class="text-[10px] text-slate-500 mt-1 uppercase tracking-widest">Semua program dan bengkel yang didaftarkan</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-blue-600">{{ bengkels.count }} bengkel</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="py-4 px-6 font-bold w-12 text-center">#</th>
                        <th class="py-4 px-6 font-bold">Tajuk Bengkel</th>
                        <th class="py-4 px-6 font-bold">Penganjur</th>
                        <th class="py-4 px-6 font-bold">Tarikh</th>
                        <th class="py-4 px-6 font-bold">Lokasi</th>
                        <th class="py-4 px-6 font-bold text-center">Jemputan</th>
                        <th class="py-4 px-6 font-bold text-center">Tindakan</th>
                    </tr>
                </thead>
                <tbody class="text-sm divide-y divide-slate-100">
                    {% for b in bengkels %}
                    <tr class="hover:bg-slate-50 transition-colors">
                        <td class="py-4 px-6 text-center font-bold text-slate-400 text-xs">{{ forloop.counter }}</td>
                        <td class="py-4 px-6 font-bold text-slate-800">{{ b.title|truncatechars:40 }}</td>
                        <td class="py-4 px-6 text-slate-600 text-xs">
                            <span class="bg-slate-100 px-2 py-1 rounded-md border border-slate-200 font-semibold">
                                <i class="fas fa-user-tie text-slate-400 mr-1"></i> {{ b.created_by.username|default:"Sistem" }}
                            </span>
                        </td>
                        <td class="py-4 px-6 text-slate-500 text-xs"><i class="far fa-calendar-alt mr-1"></i> {{ b.tarikh|date:"d M Y" }}</td>
                        <td class="py-4 px-6 text-slate-500 text-xs truncate max-w-[150px]" title="{{ b.lokasi_nama }}">{{ b.lokasi_nama }}</td>
                        <td class="py-4 px-6 text-center">
                            <span class="bg-blue-50 text-blue-600 font-black px-2.5 py-1 rounded text-xs">{{ b.jumlah_jemputan }}</span>
                        </td>
                        <td class="py-4 px-6 text-center">
                            <div class="flex items-center justify-center gap-2">
                                <a href="{% url 'superadmin:detail_bengkel' bid=b.pk %}" class="w-8 h-8 rounded-lg bg-white border border-slate-200 text-slate-400 hover:text-blue-600 hover:border-blue-300 hover:bg-blue-50 flex items-center justify-center transition-all shadow-sm" title="Lihat Butiran">
                                    <i class="fas fa-eye text-xs"></i>
                                </a>
                                <a href="{% url 'superadmin:edit_bengkel' bid=b.pk %}" class="w-8 h-8 rounded-lg bg-white border border-slate-200 text-slate-400 hover:text-amber-600 hover:border-amber-300 hover:bg-amber-50 flex items-center justify-center transition-all shadow-sm" title="Edit Bengkel">
                                    <i class="fas fa-edit text-xs"></i>
                                </a>
                                <form method="post" action="{% url 'superadmin:delete_bengkel' bid=b.pk %}" class="inline" onsubmit="return confirm('Anda pasti mahu memadam bengkel ini secara kekal?');">
                                    {% csrf_token %}
                                    <button type="submit" class="w-8 h-8 rounded-lg bg-white border border-slate-200 text-slate-400 hover:text-rose-600 hover:border-rose-300 hover:bg-rose-50 flex items-center justify-center transition-all shadow-sm" title="Padam">
                                        <i class="fas fa-trash-alt text-xs"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="7" class="py-16 text-center">
                            <div class="w-20 h-20 bg-slate-50 rounded-full flex items-center justify-center mx-auto mb-4 border border-slate-100 shadow-inner">
                                <i class="fas fa-box-open text-3xl text-slate-300"></i>
                            </div>
                            <h4 class="font-bold text-slate-700 text-base mb-1">Tiada bengkel dijumpai</h4>
                            <p class="text-xs text-slate-500">Sistem belum merekodkan sebarang bengkel atau program buat masa ini.</p>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}