{% extends "base.html" %}
{% load i18n %}
{% block title %}{% trans "Pustaka Bengkel" %} — IPES KKM{% endblock %}
{% block breadcrumb %}<span class="text-slate-500 font-bold text-xs">{% trans "Pustaka Bengkel Utama" %}</span>{% endblock %}

{% block content %}
<style>
  @import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@700;800;900&display=swap');
  @keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
  @keyframes pulseGlow { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); box-shadow: 0 0 15px rgba(245,158,11,0.5); } }
  @keyframes slideInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
  
  .hero-ring-1 { animation: floatY 6s ease-in-out infinite; }
  .hero-ring-2 { animation: floatY 8s ease-in-out infinite 1s; }
  .pulse-dot { animation: pulseGlow 2.5s ease-in-out infinite; }
  
  .stagger-reveal > * { opacity: 0; animation: slideInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
  .stagger-reveal > *:nth-child(1) { animation-delay: 0.1s; }
  .stagger-reveal > *:nth-child(2) { animation-delay: 0.2s; }
  .stagger-reveal > *:nth-child(3) { animation-delay: 0.3s; }
  .stagger-reveal > *:nth-child(4) { animation-delay: 0.4s; }
  .stagger-reveal > *:nth-child(5) { animation-delay: 0.5s; }
  .stagger-reveal > *:nth-child(6) { animation-delay: 0.6s; }
</style>

<div class="max-w-[1400px] mx-auto pb-12">

  <div class="relative rounded-3xl overflow-hidden mb-10 shadow-lg border border-slate-800" style="background:#0f172a">
    <div class="absolute inset-0 opacity-40" style="background-image:radial-gradient(circle at 20% 50%, rgba(37,99,235,0.4) 0%, transparent 50%), radial-gradient(circle at 80% 30%, rgba(16,185,129,0.2) 0%, transparent 40%), radial-gradient(circle at 60% 80%, rgba(197,160,40,0.15) 0%, transparent 50%)"></div>
    <div class="absolute inset-0 opacity-20" style="background-image:url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'1\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'1\'/%3E%3C/g%3E%3C/svg%3E');"></div>
    
    <div class="hero-ring-1 absolute rounded-full border border-white/10" style="width:600px; height:600px; right:-150px; top:-150px;"></div>
    <div class="hero-ring-2 absolute rounded-full border border-white/5" style="width:350px; height:350px; right:50px; top:50px;"></div>

    <div class="relative z-10 px-8 py-14 md:py-16 md:px-12 flex flex-col md:flex-row items-start md:items-center justify-between gap-10">
      
      <div class="max-w-xl">
        <div class="inline-flex items-center gap-2 bg-slate-800/80 border border-slate-600/50 text-amber-400 text-[10px] font-black tracking-widest uppercase px-4 py-1.5 rounded-full mb-6 backdrop-blur-md shadow-sm">
          <span class="pulse-dot w-2 h-2 rounded-full bg-amber-500 inline-block"></span>
          Modul Pengurusan Acara
        </div>
        <h1 class="text-4xl md:text-5xl font-black text-white leading-tight mb-4 tracking-tight" style="font-family:'Noto Serif', Georgia, serif;">
          Pustaka <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-teal-300">Program & Bengkel</span>
        </h1>
        <p class="text-slate-300/80 text-sm md:text-base leading-relaxed font-medium">Urus, pantau, dan analisis kesemua acara strategik serta sumbangan pakar KKM secara berpusat melalui satu platform pintar.</p>
      </div>

      <div class="flex flex-col sm:flex-row md:flex-col items-center sm:items-stretch md:items-end gap-5 shrink-0 w-full md:w-auto">
        <div class="bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-4 text-center shadow-inner w-full md:w-auto">
            <div class="text-4xl font-black text-white leading-none mb-1">{{ bengkel_list|length }}</div>
            <div class="text-blue-200/80 text-[10px] font-bold uppercase tracking-widest">Total Acara Anda</div>
        </div>
        <a href="{% url 'bengkel:create' %}" class="w-full md:w-auto inline-flex justify-center items-center gap-2 px-8 py-4 rounded-xl font-black text-sm text-slate-900 transition-all hover:-translate-y-1 active:scale-[0.98] shadow-lg shadow-amber-500/30" style="background: linear-gradient(135deg, #fcd34d, #f59e0b);">
          <i class="fas fa-plus-circle text-lg"></i> Cipta Bengkel Baharu
        </a>
      </div>

    </div>
  </div>

  {% if messages %}
    <div class="mb-8 space-y-2">
      {% for msg in messages %}
      <div class="flex items-start gap-3 px-5 py-4 rounded-2xl text-sm font-bold shadow-sm border 
        {% if msg.tags == 'success' %}bg-emerald-50 text-emerald-700 border-emerald-200
        {% elif msg.tags == 'warning' %}bg-amber-50 text-amber-700 border-amber-200
        {% else %}bg-rose-50 text-rose-700 border-rose-200{% endif %}">
        <i class="fas {% if msg.tags == 'success' %}fa-check-circle text-emerald-500{% elif msg.tags == 'warning' %}fa-exclamation-triangle text-amber-500{% else %}fa-times-circle text-rose-500{% endif %} mt-0.5"></i>
        <div>{{ msg }}</div>
      </div>
      {% endfor %}
    </div>
  {% endif %}

  {% if not bengkel_list %}
    <div class="bg-white rounded-3xl border-2 border-dashed border-slate-200 px-8 py-20 text-center shadow-sm">
      <div class="w-24 h-24 rounded-full flex items-center justify-center mx-auto mb-5 bg-gradient-to-br from-slate-100 to-slate-200 border border-white shadow-inner">
        <i class="fas fa-box-open text-4xl text-slate-300"></i>
      </div>
      <h2 class="text-slate-800 font-black text-xl mb-2 tracking-tight">Belum Ada Sebarang Acara</h2>
      <p class="text-slate-500 text-sm mb-6 max-w-sm mx-auto leading-relaxed">Ruangan ini kosong. Klik butang di bawah untuk mula mendaftarkan bengkel atau program pertama anda ke dalam sistem.</p>
      <a href="{% url 'bengkel:create' %}" class="inline-flex items-center gap-2 px-6 py-3.5 rounded-xl text-sm font-bold text-white transition-all hover:-translate-y-0.5 shadow-lg shadow-blue-500/30" style="background:linear-gradient(135deg,#1e40af,#3b82f6)">
          <i class="fas fa-plus"></i> Cipta Acara Sekarang
      </a>
    </div>
  {% else %}
    <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 stagger-reveal">
      {% for b in bengkel_list %}
      <div class="bg-white rounded-3xl border border-slate-200 overflow-hidden group hover:border-blue-300 transition-all duration-300 shadow-sm hover:shadow-xl hover:shadow-blue-900/5 flex flex-col relative">
        
        <div class="h-1.5 w-full absolute top-0 left-0 bg-gradient-to-r from-blue-600 via-indigo-500 to-teal-400 opacity-80 group-hover:opacity-100 transition-opacity"></div>

        <div class="p-6 flex-1 flex flex-col">
          <div class="flex flex-wrap items-center gap-2 mb-4">
            <div class="inline-flex items-center gap-1.5 rounded-full bg-slate-50 border border-slate-200 px-3 py-1 shadow-sm">
              <i class="far fa-calendar-alt text-blue-500 text-[10px]"></i>
              <span class="text-[10px] text-slate-600 font-black uppercase tracking-widest">{{ b.tarikh|date:"d M Y" }}</span>
            </div>
            
            {% if b.privasi == 'Terbuka' %}
            <div class="inline-flex items-center gap-1.5 rounded-full bg-emerald-50 border border-emerald-200 px-3 py-1 shadow-sm">
              <i class="fas fa-globe text-emerald-500 text-[10px]"></i>
              <span class="text-[10px] text-emerald-700 font-black uppercase tracking-widest">Terbuka</span>
            </div>
            {% else %}
            <div class="inline-flex items-center gap-1.5 rounded-full bg-slate-50 border border-slate-200 px-3 py-1 shadow-sm">
              <i class="fas fa-lock text-slate-400 text-[10px]"></i>
              <span class="text-[10px] text-slate-500 font-black uppercase tracking-widest">Tertutup</span>
            </div>
            {% endif %}
            
            <div class="inline-flex items-center gap-1.5 rounded-full bg-blue-50 border border-blue-200 px-3 py-1 shadow-sm">
              <span class="text-[10px] text-blue-700 font-black uppercase tracking-widest">{{ b.jenis_acara|default:"Bengkel" }}</span>
            </div>
          </div>

          <h2 class="font-black text-slate-800 text-base leading-snug mb-3 group-hover:text-blue-700 transition-colors line-clamp-2">{{ b.title }}</h2>
          <div class="text-xs mb-6 flex items-start gap-2 text-slate-500 font-medium leading-relaxed">
            <i class="fas fa-map-marker-alt text-rose-400 mt-0.5 shrink-0"></i>
            <span class="line-clamp-2">{{ b.lokasi_nama }}</span>
          </div>

          <div class="grid grid-cols-3 gap-2 mb-6 mt-auto">
            <div class="rounded-xl p-2 text-center bg-slate-50 border border-slate-100 group-hover:bg-white group-hover:border-slate-200 transition-colors">
              <div class="text-lg font-black text-slate-700">{{ b.jumlah_jemputan }}</div>
              <div class="text-[8px] font-black uppercase tracking-widest text-slate-400 mt-0.5">Jemputan</div>
            </div>
            <div class="rounded-xl p-2 text-center bg-emerald-50/50 border border-emerald-100/50 group-hover:bg-emerald-50 group-hover:border-emerald-200 transition-colors">
              <div class="text-lg font-black text-emerald-600">{{ b.jumlah_diterima }}</div>
              <div class="text-[8px] font-black uppercase tracking-widest text-emerald-500 mt-0.5">Diterima</div>
            </div>
            <div class="rounded-xl p-2 text-center bg-blue-50/50 border border-blue-100/50 group-hover:bg-blue-50 group-hover:border-blue-200 transition-colors">
              <div class="text-lg font-black text-blue-600">{{ b.jumlah_hadir }}</div>
              <div class="text-[8px] font-black uppercase tracking-widest text-blue-500 mt-0.5">Hadir</div>
            </div>
          </div>

          <div class="grid grid-cols-[1fr_auto] gap-3 pt-4 border-t border-slate-100">
            <a href="{% url 'bengkel:detail' pk=b.pk %}" class="flex items-center justify-center gap-2 py-3 rounded-xl text-xs font-bold text-white transition-all shadow-sm hover:shadow-md bg-slate-800 hover:bg-blue-600 active:scale-[0.98]">
                <span>Buka Panel</span> <i class="fas fa-arrow-right text-[10px] opacity-70"></i>
            </a>
            <a href="{% url 'bengkel:jemputan_list' pk=b.pk %}" class="flex items-center justify-center w-11 rounded-xl bg-slate-50 border border-slate-200 text-slate-600 hover:bg-white hover:text-blue-600 hover:border-blue-300 transition-all shadow-sm active:scale-[0.95]" title="Senarai Jemputan">
                <i class="fas fa-users text-sm"></i>
            </a>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
  {% endif %}

</div>
{% endblock %}