{% extends "base.html" %}
{% load static %}
{% load bengkel_tags %}
{% load i18n %}

{% block title %}{% trans "Dashboard Peserta" %} — {{ user.get_full_name|default:user.username }}{% endblock %}

{% block breadcrumb %}
    <span class="text-slate-500 font-bold text-xs">{% trans "Laman Utama Peserta (SME)" %}</span>
{% endblock %}

{% block center_nav %}
<div class="hidden lg:flex flex-1 justify-center items-center">
    <nav class="flex items-center gap-1 bg-black/20 p-1.5 rounded-full border border-white/10 z-20 backdrop-blur-sm shadow-inner">
        <button onclick="goPage('home', this)" class="nav-tab active px-4 py-2 rounded-full text-[10px] font-black uppercase tracking-widest text-slate-300 hover:bg-white/10 hover:text-white transition-all flex items-center gap-2">
            <i class="fas fa-home text-blue-400"></i> {% trans "Utama" %}
        </button>
        <button onclick="goPage('bengkel', this)" class="nav-tab px-4 py-2 rounded-full text-[10px] font-black uppercase tracking-widest text-slate-300 hover:bg-white/10 hover:text-white transition-all flex items-center gap-2">
            <i class="fas fa-layer-group text-amber-400"></i> {% trans "Program Saya" %}
            {% if akan_datang %}<span class="bg-blue-500 text-white w-4 h-4 rounded-full flex items-center justify-center text-[9px]">{{ akan_datang|length }}</span>{% endif %}
        </button>
        <button onclick="goPage('situational', this)" class="nav-tab px-4 py-2 rounded-full text-[10px] font-black uppercase tracking-widest text-slate-300 hover:bg-white/10 hover:text-white transition-all flex items-center gap-2">
            <i class="fas fa-history text-emerald-400"></i> {% trans "Rekod" %}
        </button>
    </nav>
</div>
{% endblock %}

{% block content %}
<style>
    .page { display: none; animation: fadeUp 0.4s ease-out forwards; }
    .page.active { display: block; }
    .nav-tab.active { background: rgba(255,255,255,0.2) !important; color: white !important; box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); }
    @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
</style>

<div id="js-translations" class="hidden" 
     data-utama="{% trans 'Laman Utama Peserta' %}"
     data-program="{% trans 'Program & Acara Semasa' %}"
     data-rekod="{% trans 'Sejarah & Rekod' %}">
</div>

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

    <div class="lg:hidden flex overflow-x-auto gap-2 p-1.5 mb-6 bg-slate-200/50 rounded-xl shadow-inner no-scrollbar">
        <button onclick="goPage('home', this)" class="nav-tab-mobile active shrink-0 flex-1 px-4 py-3 rounded-lg text-[10px] font-black uppercase tracking-widest text-slate-500 hover:bg-white hover:shadow-sm transition-all flex items-center justify-center gap-2">{% trans "Utama" %}</button>
        <button onclick="goPage('bengkel', this)" class="nav-tab-mobile shrink-0 flex-1 px-4 py-3 rounded-lg text-[10px] font-black uppercase tracking-widest text-slate-500 hover:bg-white hover:shadow-sm transition-all flex items-center justify-center gap-2">{% trans "Program Saya" %}</button>
        <button onclick="goPage('situational', this)" class="nav-tab-mobile shrink-0 flex-1 px-4 py-3 rounded-lg text-[10px] font-black uppercase tracking-widest text-slate-500 hover:bg-white hover:shadow-sm transition-all flex items-center justify-center gap-2">{% trans "Rekod" %}</button>
    </div>

    <div id="page-home" class="page active space-y-8">
        
        <div class="bg-gradient-to-br from-slate-900 via-[#1e3a8a] to-[#0f172a] rounded-3xl p-8 md:p-10 shadow-lg border border-slate-800 flex flex-col md:flex-row md:items-center justify-between gap-8 relative overflow-hidden">
            <div class="absolute right-0 top-0 opacity-10 transform translate-x-1/4 -translate-y-1/4 pointer-events-none">
                <i class="fas fa-fingerprint text-[200px] text-blue-400"></i>
            </div>
            <div class="absolute inset-0 opacity-10" style="background-image:radial-gradient(rgba(255,255,255,0.5) 1px,transparent 1px);background-size:24px 24px;"></div>
            
            <div class="relative z-10">
                <div class="inline-flex items-center gap-2 px-3 py-1 bg-amber-500/20 border border-amber-400/30 text-amber-300 text-[10px] font-black uppercase tracking-widest rounded-full mb-4 shadow-sm">
                    {% trans "Pakar Rujuk (SME) KKM" %}
                </div>
                <h1 class="text-3xl md:text-4xl font-black text-white leading-tight mb-2 tracking-tight">
                    {% trans "Selamat datang," %} <span class="text-transparent bg-clip-text bg-gradient-to-r from-amber-200 to-amber-500">{{ user.username }}</span> 👋
                </h1>
                <p class="text-blue-100/70 text-sm font-medium max-w-xl leading-relaxed">
                    {% trans "Sumbangkan perspektif pakar anda, dapatkan pas masuk QR, dan jana dokumen strategik bersama kecerdasan buatan (AI) secara berpusat." %}
                </p>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
            
            <div class="lg:col-span-8 flex flex-col gap-6">
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                    <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-5 text-center group hover:border-slate-300 transition-colors">
                        <div class="w-10 h-10 rounded-full bg-slate-100 text-slate-500 flex items-center justify-center mx-auto mb-2 group-hover:scale-110 transition-transform"><i class="fas fa-folder-open text-sm"></i></div>
                        <div class="text-2xl font-black text-slate-800">{{ stats.total_jemputan }}</div>
                        <div class="text-[9px] font-black text-slate-400 uppercase tracking-widest mt-1">{% trans "Acara Disertai" %}</div>
                    </div>
                    <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-5 text-center group hover:border-emerald-300 transition-colors">
                        <div class="w-10 h-10 rounded-full bg-emerald-50 text-emerald-500 flex items-center justify-center mx-auto mb-2 group-hover:scale-110 transition-transform"><i class="fas fa-user-check text-sm"></i></div>
                        <div class="text-2xl font-black text-emerald-600">{{ stats.total_hadir }}</div>
                        <div class="text-[9px] font-black text-emerald-500 uppercase tracking-widest mt-1">{% trans "Kehadiran Sah" %}</div>
                    </div>
                    <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-4 text-center group hover:border-amber-300 transition-colors col-span-2 relative overflow-visible flex flex-col justify-center cursor-help z-20">
                        
                        <div class="absolute inset-0 overflow-hidden rounded-2xl pointer-events-none">
                            <div class="absolute -right-4 -bottom-4 opacity-5 group-hover:opacity-10 transition-opacity"><i class="fas fa-medal text-7xl text-amber-500"></i></div>
                        </div>
                        
                        <div class="text-[9px] font-black text-amber-500 uppercase tracking-widest mb-0.5 relative z-10"><i class="fas fa-trophy mr-1"></i> {% trans "Skor Sepanjang Zaman" %}</div>
                        <div class="text-4xl font-black text-amber-500 relative z-10">{{ stats.skor_keseluruhan }} <span class="text-sm text-slate-400">pts</span></div>
                        
                        <div class="mt-2 relative z-10 flex justify-center">
                            {% if stats.skor_keseluruhan <= 100 %}
                                <span class="inline-flex items-center gap-1 bg-slate-100 text-slate-600 border border-slate-200 px-3 py-1 rounded-full text-[9px] font-black uppercase tracking-wider shadow-sm">
                                    🌱 {% trans "Penyumbang Baru" %}
                                </span>
                            {% elif stats.skor_keseluruhan <= 300 %}
                                <span class="inline-flex items-center gap-1 bg-blue-50 text-blue-600 border border-blue-200 px-3 py-1 rounded-full text-[9px] font-black uppercase tracking-wider shadow-sm">
                                    🚀 {% trans "Pakar Rujuk Aktif" %}
                                </span>
                            {% elif stats.skor_keseluruhan <= 600 %}
                                <span class="inline-flex items-center gap-1 bg-purple-50 text-purple-600 border border-purple-200 px-3 py-1 rounded-full text-[9px] font-black uppercase tracking-wider shadow-sm">
                                    💎 {% trans "Pemikir Senior" %}
                                </span>
                            {% elif stats.skor_keseluruhan <= 1000 %}
                                <span class="inline-flex items-center gap-1 bg-rose-50 text-rose-600 border border-rose-200 px-3 py-1 rounded-full text-[9px] font-black uppercase tracking-wider shadow-sm">
                                    🌟 {% trans "Pakar Strategi" %}
                                </span>
                            {% else %}
                                <span class="inline-flex items-center gap-1 bg-gradient-to-r from-amber-400 to-amber-600 text-white border border-amber-500 px-3 py-1 rounded-full text-[9px] font-black uppercase tracking-wider shadow-sm">
                                    👑 {% trans "Arkitek" %}
                                </span>
                            {% endif %}
                        </div>

                        <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-3 w-64 bg-slate-900 rounded-xl shadow-2xl border border-slate-700 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50 pointer-events-none">
                            <div class="absolute top-full left-1/2 transform -translate-x-1/2 border-8 border-transparent border-t-slate-900"></div>
                            
                            <div class="p-4 text-left">
                                <h4 class="text-[10px] font-black text-amber-400 uppercase tracking-widest mb-3 border-b border-slate-700 pb-2 text-center">{% trans "Sistem Pangkat (Tiers)" %}</h4>
                                <ul class="space-y-1.5">
                                    <li class="flex justify-between items-center text-[10px] transition-colors {% if stats.skor_keseluruhan <= 100 %}text-amber-400 font-bold bg-slate-800 p-1.5 rounded-lg border border-amber-500/30{% else %}text-slate-400 p-1.5{% endif %}">
                                        <span><i class="fas fa-seedling w-5 text-center mr-1"></i> {% trans "Penyumbang Baru" %}</span>
                                        <span class="font-mono">0 - 100</span>
                                    </li>
                                    <li class="flex justify-between items-center text-[10px] transition-colors {% if stats.skor_keseluruhan > 100 and stats.skor_keseluruhan <= 300 %}text-amber-400 font-bold bg-slate-800 p-1.5 rounded-lg border border-amber-500/30{% else %}text-slate-400 p-1.5{% endif %}">
                                        <span><i class="fas fa-rocket w-5 text-center mr-1"></i> {% trans "Pakar Rujuk Aktif" %}</span>
                                        <span class="font-mono">101 - 300</span>
                                    </li>
                                    <li class="flex justify-between items-center text-[10px] transition-colors {% if stats.skor_keseluruhan > 300 and stats.skor_keseluruhan <= 600 %}text-amber-400 font-bold bg-slate-800 p-1.5 rounded-lg border border-amber-500/30{% else %}text-slate-400 p-1.5{% endif %}">
                                        <span><i class="fas fa-gem w-5 text-center mr-1"></i> {% trans "Pemikir Senior" %}</span>
                                        <span class="font-mono">301 - 600</span>
                                    </li>
                                    <li class="flex justify-between items-center text-[10px] transition-colors {% if stats.skor_keseluruhan > 600 and stats.skor_keseluruhan <= 1000 %}text-amber-400 font-bold bg-slate-800 p-1.5 rounded-lg border border-amber-500/30{% else %}text-slate-400 p-1.5{% endif %}">
                                        <span><i class="fas fa-star w-5 text-center mr-1"></i> {% trans "Pakar Strategi" %}</span>
                                        <span class="font-mono">601 - 1000</span>
                                    </li>
                                    <li class="flex justify-between items-center text-[10px] transition-colors {% if stats.skor_keseluruhan > 1000 %}text-amber-400 font-bold bg-slate-800 p-1.5 rounded-lg border border-amber-500/30{% else %}text-slate-400 p-1.5{% endif %}">
                                        <span><i class="fas fa-crown w-5 text-center mr-1"></i> {% trans "Arkitek" %}</span>
                                        <span class="font-mono">1001+</span>
                                    </li>
                                </ul>
                                <div class="mt-3 pt-2 border-t border-slate-700 text-center">
                                    <p class="text-[8px] text-slate-500 leading-tight">{% trans "Terus menyumbang idea dalam bengkel untuk naik ke pangkat seterusnya!" %}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-3xl border border-slate-200 shadow-sm p-10 text-center">
                    <div class="w-16 h-16 bg-blue-50 text-blue-500 rounded-full flex items-center justify-center mx-auto mb-4"><i class="fas fa-rocket text-2xl"></i></div>
                    <h2 class="text-xl font-black text-slate-800 mb-2">{% trans "Sedia Untuk Menyumbang Idea?" %}</h2>
                    <p class="text-sm text-slate-500 mb-6 max-w-lg mx-auto">
                        {% blocktrans with total=akan_datang|length %}
                        Terdapat {{ total }} bengkel aktif yang memerlukan kepakaran anda. Klik butang di bawah untuk mula menyumbang.
                        {% endblocktrans %}
                    </p>
                    <button onclick="goPage('bengkel', document.querySelector('.nav-tab[onclick*=\'bengkel\']'))" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-xl shadow-md transition inline-flex items-center gap-2">
                        {% trans "Lihat Program Saya" %} <i class="fas fa-arrow-right"></i>
                    </button>
                </div>
            </div>

            <div class="lg:col-span-4 flex flex-col gap-6">
                <div class="bg-white rounded-3xl shadow-sm border border-slate-200 overflow-hidden relative">
                    <div class="h-24 bg-gradient-to-r from-slate-800 to-slate-900"></div>
                    <div class="px-6 pb-6 relative text-center">
                        <div class="w-20 h-20 bg-blue-100 border-4 border-white text-blue-600 rounded-full flex items-center justify-center font-black text-3xl mx-auto -mt-10 shadow-md">
                            {{ user.username|first|upper }}
                        </div>
                        <h3 class="font-black text-slate-800 text-lg mt-3">{{ user.get_full_name|default:user.username }}</h3>
                        <p class="text-xs text-slate-500 mb-4">{{ user.email }}</p>
                        
                        <div class="bg-slate-50 border border-slate-100 rounded-xl p-3 mb-4 text-left">
                            <div class="text-[9px] font-bold text-slate-400 uppercase tracking-widest mb-2 border-b border-slate-200 pb-1">{% trans "Identiti Peserta" %}</div>
                            <div class="text-xs text-slate-700 font-medium mb-1"><i class="fas fa-building text-blue-400 w-4"></i> {% if user.profile.organisasi %}{{ user.profile.organisasi }}{% else %}{% trans "Agensi Tidak Dinyatakan" %}{% endif %}</div>
                            <div class="text-xs text-slate-700 font-medium"><i class="fas fa-id-card-alt text-amber-400 w-4"></i> {% if user.profile.jabatan %}{{ user.profile.jabatan }}{% else %}{% trans "Peserta" %}{% endif %}</div>
                        </div>

                        <div class="bg-indigo-50 border border-indigo-100 rounded-xl p-3 mb-4">
                            <div class="text-[9px] font-bold text-indigo-400 uppercase tracking-widest mb-1">{% trans "Kecenderungan AI (Persona)" %}</div>
                            <div class="text-sm font-black text-indigo-700"><i class="fas fa-brain mr-1"></i> {{ stats.persona }}</div>
                        </div>
                        {% if penganjur_req and penganjur_req.status == 'pending' %}
                        <div class="w-full bg-amber-50 border border-amber-200 text-amber-700 font-bold py-2 rounded-lg text-xs shadow-sm flex items-center justify-center">
                            <i class="fas fa-clock mr-1.5"></i> {% trans "Permohonan Status: Semakan" %}
                        </div>
                        {% else %}
                        <form id="form-naiktaraf" method="post" action="{% url 'bengkel:mohon_penganjur' %}" class="m-0 mt-2 bg-slate-50 border border-slate-200 rounded-xl p-3" data-msg-confirm="{% trans 'Adakah anda pasti mahu menghantar permohonan status Penganjur?' %}">
                            {% csrf_token %}
                            <div class="text-[9px] font-bold text-slate-500 uppercase tracking-widest mb-2 border-b border-slate-200 pb-1">{% trans "Mohon Naik Taraf" %}</div>
                            <textarea name="sebab" required placeholder="{% trans 'Nyatakan sebab / jabatan anda memerlukan akses Penganjur...' %}" class="w-full bg-white border border-slate-200 rounded-lg text-xs p-2 mb-2 focus:outline-none focus:border-amber-400 resize-none" rows="2"></textarea>
                            <button type="submit" class="w-full bg-amber-500 border border-amber-600 text-white hover:bg-amber-600 font-bold py-2 rounded-lg text-xs transition shadow-sm flex items-center justify-center">
                                <i class="fas fa-paper-plane mr-1.5"></i> {% trans "Hantar Permohonan" %}
                            </button>
                        </form>
                        {% endif %}
                        
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div id="page-bengkel" class="page space-y-6">
        
        <div class="flex flex-col sm:flex-row sm:items-center justify-between border-b border-slate-200 pb-4 gap-4">
            <div class="flex flex-col">
                <h3 class="font-black text-slate-800 text-xl flex items-center gap-2"><i class="fas fa-calendar-alt text-blue-500"></i> {% trans "Program & Acara Semasa" %}</h3>
                <div class="flex items-center gap-2 mt-3">
                    <button onclick="filterEvents('all')" id="btn-filter-all" class="px-4 py-1.5 rounded-full text-[10px] font-black uppercase tracking-widest transition-all bg-slate-800 text-white shadow-sm border border-slate-700">{% trans "Semua" %}</button>
                    <button onclick="filterEvents('ongoing')" id="btn-filter-ongoing" class="px-4 py-1.5 rounded-full text-[10px] font-bold uppercase tracking-widest transition-all bg-white text-slate-500 hover:bg-slate-100 border border-slate-200 flex items-center gap-1.5">
                        <span class="relative flex h-2 w-2"><span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span><span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span></span> {% trans "Sedang Berlangsung" %}
                    </button>
                    <button onclick="filterEvents('incoming')" id="btn-filter-incoming" class="px-4 py-1.5 rounded-full text-[10px] font-bold uppercase tracking-widest transition-all bg-white text-slate-500 hover:bg-slate-100 border border-slate-200 flex items-center gap-1.5">
                        <i class="far fa-clock text-blue-500"></i> {% trans "Akan Datang" %}
                    </button>
                </div>
            </div>
            
            <a href="{% url 'bengkel:portal_list' %}" class="bg-blue-50 text-blue-600 border border-blue-200 hover:bg-blue-600 hover:text-white text-xs font-bold px-5 py-2.5 rounded-xl transition shadow-sm flex items-center justify-center gap-2 w-full sm:w-auto shrink-0">
                <i class="fas fa-globe"></i> {% trans "Teroka Acara Terbuka" %}
            </a>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start pt-2">
            <div class="lg:col-span-8 space-y-6">
                {% if akan_datang %}
                    {% for j in akan_datang %}
                        <div class="event-card bg-white rounded-3xl border border-slate-200 overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300 flex flex-col group {% if j.sudah_hadir %}border-emerald-200 ring-1 ring-emerald-500/10{% endif %}" data-status="{% if j.sudah_hadir %}ongoing{% else %}incoming{% endif %}">
                            <div class="{% if j.sudah_hadir %}bg-gradient-to-r from-emerald-600 to-teal-700{% else %}bg-gradient-to-r from-blue-600 to-indigo-700{% endif %} p-6 relative overflow-hidden flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                                <div class="absolute inset-0 opacity-20" style="background-image:radial-gradient(rgba(255,255,255,.5) 1px,transparent 1px);background-size:10px 10px;"></div>
                                
                                {% if j.sudah_hadir %}
                                    <i class="fas fa-door-open absolute -right-4 -bottom-4 text-6xl text-white/10 transform rotate-12 group-hover:scale-110 transition-transform"></i>
                                {% else %}
                                    <i class="fas fa-project-diagram absolute -right-4 -bottom-4 text-6xl text-white/10 transform rotate-12 group-hover:scale-110 transition-transform"></i>
                                {% endif %}
                                
                                <div class="relative z-10">
                                    <div class="flex items-center gap-2 mb-2">
                                        <span class="bg-white/20 backdrop-blur-sm text-white border border-white/30 px-2 py-0.5 rounded text-[9px] font-bold uppercase tracking-widest"><i class="far fa-calendar mr-1"></i> {{ j.bengkel.tarikh|date:"d M Y" }}</span>
                                        
                                        {% if j.sudah_hadir %}
                                            <span class="bg-emerald-400/20 text-emerald-100 border border-emerald-400/30 px-2 py-0.5 rounded text-[9px] font-bold uppercase tracking-widest"><i class="fas fa-check-double"></i> {% trans "Lobi Terbuka" %}</span>
                                        {% else %}
                                            {% if j.status == 'accepted' %}
                                                <span class="bg-blue-400/20 text-blue-100 border border-blue-400/30 px-2 py-0.5 rounded text-[9px] font-bold uppercase tracking-widest"><i class="fas fa-ticket-alt"></i> {% trans "RSVP Diterima" %}</span>
                                            {% elif j.status == 'pending' %}
                                                <span class="bg-amber-400/20 text-amber-100 border border-amber-400/30 px-2 py-0.5 rounded text-[9px] font-bold uppercase tracking-widest">{% trans "Menunggu" %}</span>
                                            {% endif %}
                                        {% endif %}
                                    </div>
                                    <h3 class="text-xl font-black text-white leading-tight">{{ j.bengkel.title }}</h3>
                                    <p class="{% if j.sudah_hadir %}text-emerald-100{% else %}text-blue-200{% endif %} text-xs font-medium mt-1"><i class="fas fa-map-marker-alt {% if j.sudah_hadir %}text-amber-300{% else %}text-rose-300{% endif %} mr-1"></i> {{ j.bengkel.lokasi_nama }}</p>
                                </div>
                                
                                <div class="relative z-10 shrink-0 w-full md:w-auto flex flex-col gap-2">
                                    {% if j.sudah_hadir %}
                                        <a href="{% url 'bengkel:peserta_lobi' pk=j.bengkel.pk %}" class="w-full md:w-auto bg-slate-900 hover:bg-black text-white text-xs font-bold px-6 py-3 rounded-xl shadow-md transition flex items-center justify-center gap-2 active:scale-95 border border-slate-700">
                                            <i class="fas fa-door-open text-amber-400"></i> {% trans "Masuk Ruang Kerja" %}
                                        </a>
                                    {% else %}
                                        {% if j.status == 'accepted' %}
                                            <a href="{% url 'bengkel:peserta_scan_kamera' pk=j.bengkel.pk %}" class="w-full md:w-auto bg-white hover:bg-slate-100 text-slate-800 text-xs font-bold px-5 py-2.5 rounded-xl shadow-sm transition flex items-center justify-center gap-2">
                                                <i class="fas fa-camera text-blue-600"></i> {% trans "Imbas Kehadiran" %}
                                            </a>
                                            <a href="{% url 'bengkel:tiket' token=j.token %}" class="w-full md:w-auto text-white/80 hover:text-white text-[10px] font-bold px-3 py-1.5 rounded-lg border border-white/20 bg-white/10 hover:bg-white/20 transition-colors flex items-center justify-center gap-1.5 backdrop-blur-sm shadow-sm">
                                                <i class="fas fa-ticket-alt"></i> {% trans "Lihat Tiket" %}
                                            </a>
                                        {% else %}
                                            <a href="{% url 'bengkel:response' token=j.token %}" class="w-full md:w-auto bg-white hover:bg-slate-100 text-slate-800 text-xs font-bold px-5 py-2.5 rounded-xl shadow-sm transition flex items-center justify-center gap-2">
                                                <i class="fas fa-envelope-open text-amber-500"></i> {% trans "Buka Jemputan" %}
                                            </a>
                                        {% endif %}
                                    {% endif %}
                                </div>
                            </div>
                            
                            {% if not j.sudah_hadir %}
                            <div class="p-6">
                                {% if j.status == 'accepted' %}
                                    <div class="flex flex-col sm:flex-row justify-between items-center gap-4 bg-slate-50 p-5 rounded-2xl border border-slate-100">
                                        <div class="text-xs text-slate-600 font-medium">
                                            <span class="font-bold text-slate-800 text-sm block mb-1">{% trans "Tempat Anda Telah Ditempah (RSVP)" %}</span>
                                            {% blocktrans %}Sila gunakan butang <strong>"Imbas Kehadiran"</strong> apabila anda tiba di lokasi acara untuk membuka pintu masuk digital (Lobi Acara).{% endblocktrans %}
                                        </div>
                                        <button disabled class="w-full sm:w-auto bg-slate-200 text-slate-400 text-xs font-bold px-6 py-3 rounded-xl flex items-center justify-center gap-2 cursor-not-allowed shrink-0 border border-slate-300">
                                            <i class="fas fa-lock"></i> {% trans "Lobi Dikunci" %}
                                        </button>
                                    </div>
                                {% else %}
                                    <div class="text-xs text-amber-600 font-medium bg-amber-50 p-4 rounded-xl border border-amber-200">
                                        {% trans "Sila sahkan kehadiran anda melalui pautan 'Buka Jemputan' untuk menempah slot. Pada hari kejadian, gunakan fungsi 'Imbas Kehadiran' di sini." %}
                                    </div>
                                {% endif %}
                            </div>
                            {% endif %}

                        </div>
                    {% endfor %}
                    
                    <div id="empty-filter-msg" class="hidden bg-slate-50 border border-dashed border-slate-200 rounded-xl p-8 text-center mt-4">
                        <i class="fas fa-filter text-2xl text-slate-300 mb-2 block"></i>
                        <p class="text-xs font-bold text-slate-400 uppercase tracking-widest">{% trans "Tiada acara dalam kategori ini" %}</p>
                    </div>

                {% else %}
                    <div class="bg-white border-2 border-dashed border-slate-200 rounded-3xl p-16 text-center">
                        <i class="fas fa-calendar-times text-4xl text-slate-300 mb-4 block"></i>
                        <h4 class="text-lg font-black text-slate-700 mb-2">{% trans "Tiada Acara Aktif" %}</h4>
                        <p class="text-sm text-slate-500 mb-6">{% trans "Anda tiada bengkel yang akan datang atau sedang berlangsung pada masa ini." %}</p>
                        <a href="{% url 'bengkel:portal_list' %}" class="inline-flex items-center gap-2 bg-blue-600 text-white font-bold px-6 py-3.5 rounded-xl shadow-sm hover:bg-blue-700 transition">
                            <i class="fas fa-globe"></i> {% trans "Teroka Portal Awam" %}
                        </a>
                    </div>
                {% endif %}
            </div>

            <div class="lg:col-span-4">
                <div class="bg-white rounded-3xl border border-slate-200 shadow-sm overflow-hidden">
                    <div class="px-6 py-5 border-b border-slate-100 bg-slate-50/50">
                        <h2 class="text-sm font-black text-slate-800 uppercase tracking-widest flex items-center gap-2"><i class="fas fa-list-ol text-blue-500"></i> {% trans "Aturcara Program" %}</h2>
                    </div>
                    <div class="p-4 space-y-4">
                        {% if akan_datang %}
                            {% for j in akan_datang %}
                            {% with items=j.bengkel.tentative.all %}
                                {% if items %}
                                <div class="border border-slate-100 rounded-2xl overflow-hidden shadow-sm">
                                    <button type="button" onclick="toggleTent('t{{ j.pk }}', this)" class="w-full text-left p-5 flex items-center justify-between bg-white hover:bg-slate-50 transition-colors">
                                        <div class="flex-1 min-w-0 pr-4">
                                            <div class="text-[10px] font-bold text-blue-500 uppercase tracking-widest mb-1">{{ j.bengkel.tarikh|date:"d M" }}</div>
                                            <h4 class="font-bold text-slate-800 text-sm truncate">{{ j.bengkel.title }}</h4>
                                        </div>
                                        <i class="fas fa-chevron-down text-slate-400 text-sm transition-transform duration-300" id="arr-t{{ j.pk }}"></i>
                                    </button>
            
                                    <div id="t{{ j.pk }}" class="hidden border-t border-slate-100 bg-slate-50/50">
                                        <div class="p-6">
                                            <div class="relative border-l-2 border-blue-200 ml-2 space-y-6">
                                                {% for item in items %}
                                                <div class="relative pl-6">
                                                    <div class="absolute -left-[9px] top-1 w-4 h-4 rounded-full border-2 border-white {% if forloop.first %}bg-blue-500 shadow-sm{% else %}bg-slate-300{% endif %}"></div>
                                                    <div class="font-bold text-blue-600 text-[10px] mb-1 font-mono bg-blue-50 inline-block px-2 py-0.5 rounded border border-blue-100">{{ item.masa }}</div>
                                                    <h5 class="font-bold text-slate-800 text-sm">{{ item.aktiviti }}</h5>
                                                    {% if item.penerangan %}<p class="text-xs text-slate-500 mt-1.5 leading-relaxed">{{ item.penerangan }}</p>{% endif %}
                                                </div>
                                                {% endfor %}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {% endif %}
                            {% endwith %}
                            {% endfor %}
                        {% else %}
                            <div class="p-8 text-center">
                                <p class="text-sm text-slate-500 font-medium">{% trans "Tiada aturcara tersedia buat masa ini." %}</p>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="page-situational" class="page space-y-8">
        
        <div class="bg-white rounded-3xl border border-slate-200 shadow-sm overflow-hidden">
            <div class="px-6 py-6 border-b border-slate-100 bg-slate-50/50 flex items-center justify-between">
                <h2 class="text-sm font-black text-slate-800 uppercase tracking-widest flex items-center gap-2"><i class="fas fa-history text-slate-500"></i> {% trans "Sejarah Penyertaan & Rekod" %}</h2>
            </div>
            
            {% if sudah_lepas %}
            <div class="overflow-x-auto">
                <table class="w-full text-left border-collapse whitespace-nowrap">
                    <thead>
                        <tr class="bg-white text-slate-400 text-[9px] uppercase tracking-widest border-b border-slate-200">
                            <th class="p-6 font-bold">{% trans "Bengkel & Tarikh" %}</th>
                            <th class="p-6 font-bold text-center">{% trans "Status" %}</th>
                            <th class="p-6 font-bold text-center">{% trans "Sumbangan (Skor)" %}</th>
                            <th class="p-6 font-bold text-center">{% trans "Penilaian 360°" %}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        {% for j in sudah_lepas %}
                        <tr class="hover:bg-slate-50/60 transition-colors group cursor-pointer route-row" data-url="{% url 'bengkel:peserta_lobi' pk=j.bengkel.pk %}">
                            <td class="p-6">
                                <div class="font-bold text-slate-800 text-base mb-1 group-hover:text-blue-600 transition-colors">{{ j.bengkel.title }}</div>
                                <div class="text-[11px] font-semibold text-slate-500 flex items-center gap-2">
                                    <i class="far fa-calendar text-slate-400"></i> {{ j.bengkel.tarikh|date:"d M Y" }}
                                </div>
                            </td>
                            <td class="p-6 text-center">
                                {% if j.sudah_hadir %}
                                    <span class="bg-emerald-50 text-emerald-600 border border-emerald-200 px-3 py-1.5 rounded-lg text-[10px] font-black uppercase tracking-widest"><i class="fas fa-check mr-1"></i> {% trans "Telah Hadir" %}</span>
                                {% elif j.status == 'accepted' %}
                                    <span class="bg-slate-100 text-slate-500 border border-slate-200 px-3 py-1.5 rounded-lg text-[10px] font-black uppercase tracking-widest">{% trans "Tidak Hadir" %}</span>
                                {% else %}
                                    <span class="bg-rose-50 text-rose-600 border border-rose-200 px-3 py-1.5 rounded-lg text-[10px] font-black uppercase tracking-widest">{% trans "Ditolak/Batal" %}</span>
                                {% endif %}
                            </td>
                            <td class="p-6 text-center">
                                <span class="font-black text-amber-500 text-lg">{% kira_skor_peserta request.user j.bengkel %} <span class="text-[10px] text-slate-400">pts</span></span>
                            </td>
                            <td class="p-6 text-center">
                                {% if j.sudah_hadir %}
                                    <button type="button" class="bg-gradient-to-r from-amber-500 to-amber-600 hover:from-amber-600 hover:to-amber-700 text-white font-bold text-[10px] px-3 py-1.5 rounded-xl shadow-sm transition flex items-center justify-center gap-1 mx-auto border border-amber-400/40 btn-rate" data-bengkel-id="{{ j.bengkel.pk }}" data-bengkel-title="{{ j.bengkel.title|escapejs }}">
                                        <i class="fas fa-star"></i> {% trans "Beri Nilai" %}
                                    </button>
                                {% else %}
                                    <span class="text-slate-400 text-[10px] italic">-</span>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <div class="p-16 text-center bg-slate-50/50">
                <i class="fas fa-folder-open text-4xl text-slate-300 mb-4 block"></i>
                <h4 class="text-lg font-black text-slate-700 mb-1">{% trans "Tiada Rekod Dijumpai" %}</h4>
                <p class="text-sm text-slate-500">{% trans "Anda belum mempunyai sejarah penyertaan dalam sistem ini." %}</p>
            </div>
            {% endif %}
        </div>

    </div>

</div>

<script>
    // PENYELESAIAN LINTER UNTUK FORM UPGRADE
    document.addEventListener("DOMContentLoaded", function() {
        const upgradeForm = document.getElementById('form-naiktaraf');
        if (upgradeForm) {
            upgradeForm.addEventListener('submit', function(e) {
                const msg = this.getAttribute('data-msg-confirm');
                if (!confirm(msg)) {
                    e.preventDefault();
                }
            });
        }

        // PENYELESAIAN LINTER UNTUK KLIK BARIS JADUAL
        document.querySelectorAll('.route-row').forEach(row => {
            row.addEventListener('click', function() {
                window.location.href = this.getAttribute('data-url');
            });
        });

        // BUANG ERROR LINER DEKAT FILE NI
        document.querySelectorAll('.btn-rate').forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.stopPropagation(); // Halang klik baris jadual dari terpicu
                const bId = this.getAttribute('data-bengkel-id');
                const bTitle = this.getAttribute('data-bengkel-title');
                bukaModalRating(bId, bTitle);
            });
        });
    });

    function goPage(pageId, btn) {
        document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
        document.getElementById('page-' + pageId).classList.add('active');
        
        // Ambil data terjemahan dinamik
        const tData = document.getElementById('js-translations');
        const txtUtama = tData.getAttribute('data-utama');
        const txtProgram = tData.getAttribute('data-program');
        const txtRekod = tData.getAttribute('data-rekod');

        const breadcrumbZone = document.querySelector('[block="breadcrumb"]') || document.querySelector('.max-w-\\[1400px\\]').previousElementSibling;
        if (breadcrumbZone) {
            if (pageId === 'bengkel') {
                breadcrumbZone.innerHTML = `<a href="/bengkel/dashboard/" class="text-blue-600 hover:underline text-xs font-bold">${txtUtama}</a> <span class="mx-2 text-slate-400">/</span> <span class="text-slate-500 font-medium text-xs">${txtProgram}</span>`;
            } else if (pageId === 'situational') {
                breadcrumbZone.innerHTML = `<a href="/bengkel/dashboard/" class="text-blue-600 hover:underline text-xs font-bold">${txtUtama}</a> <span class="mx-2 text-slate-400">/</span> <span class="text-slate-500 font-medium text-xs">${txtRekod}</span>`;
            } else {
                breadcrumbZone.innerHTML = `<span class="text-slate-500 font-bold text-xs">${txtUtama}</span>`;
            }
        }
        
        document.querySelectorAll('.nav-tab').forEach(b => {
            if(b.getAttribute('onclick').includes(pageId)) {
                b.classList.add('active');
            } else {
                b.classList.remove('active');
            }
        });

        document.querySelectorAll('.nav-tab-mobile').forEach(b => {
            if(b.getAttribute('onclick').includes(pageId)) {
                b.classList.add('active', 'bg-white', 'shadow-sm', 'text-blue-600');
                b.classList.remove('text-slate-500');
            } else {
                b.classList.remove('active', 'bg-white', 'shadow-sm', 'text-blue-600');
                b.classList.add('text-slate-500');
            }
        });
    }

    document.addEventListener("DOMContentLoaded", function() {
        const urlParams = new URLSearchParams(window.location.search);
        const activeTabParam = urlParams.get('tab');
        
        if (activeTabParam === 'bengkel') {
            const targetBtn = document.querySelector(".nav-tab[onclick*='bengkel']");
            if(targetBtn) goPage('bengkel', targetBtn);
        } else if (activeTabParam === 'situational') {
            const targetBtn = document.querySelector(".nav-tab[onclick*='situational']");
            if(targetBtn) goPage('situational', targetBtn);
        } else {
            let mobileActive = document.querySelector('.nav-tab-mobile.active');
            if (mobileActive) {
                mobileActive.classList.add('bg-white', 'shadow-sm', 'text-blue-600');
                mobileActive.classList.remove('text-slate-500');
            }
        }
    });

    function toggleTent(id, btn) {
        const content = document.getElementById(id);
        const icon = btn.querySelector('.fa-chevron-down');
        
        if (content.classList.contains('hidden')) {
            content.classList.remove('hidden');
            icon.style.transform = "rotate(180deg)";
        } else {
            content.classList.add('hidden');
            icon.style.transform = "rotate(0deg)";
        }
    }
</script>

<div id="modal-rating" class="fixed inset-0 bg-slate-900 bg-opacity-80 z-[1300] flex justify-center items-center backdrop-blur-sm p-4 opacity-0 pointer-events-none transition-opacity duration-300">
    <div class="bg-white rounded-3xl shadow-2xl w-full max-w-md transform scale-95 transition-transform duration-300 overflow-hidden border border-slate-100" id="rating-box">
        <div class="bg-gradient-to-r from-slate-900 via-slate-800 to-amber-900 p-5 flex justify-between items-center text-white font-bold border-b-4 border-amber-500">
            <h3 class="text-sm uppercase tracking-wider flex items-center gap-2"><i class="fas fa-medal text-amber-400"></i> {% trans "Penilaian Kelancaran Acara" %}</h3>
            <button onclick="tutupModalRating()" class="bg-white/10 hover:bg-red-500 w-8 h-8 rounded-full transition flex items-center justify-center"><i class="fas fa-times"></i></button>
        </div>
        <div class="p-6 space-y-4">
            <div>
                <h4 id="rating-bengkel-title" class="font-black text-slate-800 text-sm mb-1">{% trans "Nama Bengkel" %}</h4>
                <p class="text-[11px] text-slate-500 leading-relaxed">{% trans "Sila berikan penarafan bintang dan ulasan maklum balas anda terhadap kualiti pengurusan pegawai penganjur." %}</p>
            </div>
            
            <div class="flex justify-center gap-3 py-3 text-3xl">
                <i class="far fa-star text-slate-300 hover:scale-110 cursor-pointer star-btn transition-transform" data-value="1" onclick="setStarRating(1)"></i>
                <i class="far fa-star text-slate-300 hover:scale-110 cursor-pointer star-btn transition-transform" data-value="2" onclick="setStarRating(2)"></i>
                <i class="far fa-star text-slate-300 hover:scale-110 cursor-pointer star-btn transition-transform" data-value="3" onclick="setStarRating(3)"></i>
                <i class="far fa-star text-slate-300 hover:scale-110 cursor-pointer star-btn transition-transform" data-value="4" onclick="setStarRating(4)"></i>
                <i class="far fa-star text-slate-300 hover:scale-110 cursor-pointer star-btn transition-transform" data-value="5" onclick="setStarRating(5)"></i>
            </div>
            
            <div>
                <label class="block text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-1">{% trans "Ulasan / Komen Tambahan" %}</label>
                <textarea id="rating-komen" rows="3" placeholder="{% trans 'Contoh: Penyediaan pelan lantai AI sangat mantap, dewan selesa, dan penyelarasan masa cemerlang...' %}" class="w-full bg-slate-50 border border-slate-200 rounded-xl p-3 text-xs focus:outline-none focus:border-amber-500 resize-none font-medium text-slate-700"></textarea>
            </div>
            
            <button id="btn-submit-rating" onclick="hantarRatingPenganjur()" class="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold text-xs py-3 rounded-xl shadow-md transition-colors flex items-center justify-center gap-1">
                <i class="fas fa-paper-plane"></i> {% trans "Hantar Penilaian Resmi" %}
            </button>
        </div>
    </div>
</div>

<script>
    let currentRatingBengkelId = null;
    let selectedRatingValue = 5;

    function bukaModalRating(bengkelId, title) {
        currentRatingBengkelId = bengkelId;
        document.getElementById('rating-bengkel-title').innerText = title;
        document.getElementById('rating-komen').value = '';
        setStarRating(5); 
        
        const modal = document.getElementById('modal-rating');
        const box = document.getElementById('rating-box');
        modal.classList.remove('pointer-events-none', 'opacity-0');
        box.classList.remove('scale-95');
    }

    function tutupModalRating() {
        const modal = document.getElementById('modal-rating');
        const box = document.getElementById('rating-box');
        modal.classList.add('opacity-0');
        box.classList.add('scale-95');
        setTimeout(() => modal.classList.add('pointer-events-none'), 300);
    }

    function setStarRating(val) {
        selectedRatingValue = val;
        const stars = document.querySelectorAll('.star-btn');
        stars.forEach(star => {
            const starVal = parseInt(star.getAttribute('data-value'));
            if(starVal <= val) {
                star.classList.remove('far', 'text-slate-300');
                star.classList.add('fas', 'text-amber-400');
            } else {
                star.classList.remove('fas', 'text-amber-400');
                star.classList.add('far', 'text-slate-300');
            }
        });
    }

    function hantarRatingPenganjur() {
        if(!currentRatingBengkelId) return;
        
        const btn = document.getElementById('btn-submit-rating');
        const komen = document.getElementById('rating-komen').value.trim();
        const originalText = btn.innerHTML;
        
        btn.innerHTML = '<i class="fas fa-circle-notch fa-spin"></i> Merekodkan Maklumbalas...';
        btn.disabled = true;
        
        fetch(`/bengkel/simpan-maklumbalas-ajax/${currentRatingBengkelId}/`, {
            method: 'POST',
            headers: {
                'X-CSRFToken': '{{ csrf_token }}',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                rating: selectedRatingValue,
                komen: komen
            })
        })
        .then(res => res.json())
        .then(data => {
            if(data.success) {
                alert(data.mesej);
                tutupModalRating();
                window.location.reload();
            } else {
                alert("{% trans 'Ralat:' %} " + data.error);
                btn.innerHTML = originalText;
                btn.disabled = false;
            }
        })
        .catch(err => {
            alert("{% trans 'Ralat sambungan pelayan komunikasi.' %}");
            btn.innerHTML = originalText;
            btn.disabled = false;
        });
    }
</script>
{% endblock %}