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

{% block title %}{% trans "Blueprint Journey" %} — {{ bengkel.title }}{% endblock %}

{% block breadcrumb %}
    <a href="{% url 'bengkel:dashboard' %}?tab=bengkel" class="text-blue-600 hover:underline text-xs font-bold">Laman Utama Peserta</a> <span class="mx-2 text-slate-400">/</span>
    <a href="{% url 'bengkel:peserta_lobi' pk=bengkel.pk %}" class="text-blue-600 hover:underline text-xs font-bold">Lobi Acara</a> <span class="mx-2 text-slate-400">/</span>
    <span class="text-slate-500 font-medium text-xs">Peta Perjalanan Blueprint</span>
{% endblock %}

{% block content %}
<style>
    /* Kesan Glow Dinamik */
    .nav-card { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
    @keyframes pulse-glow {
        0%, 100% { opacity: 0.6; transform: scale(1); }
        50% { opacity: 1; transform: scale(1.05); }
    }
    .animate-glow { animation: pulse-glow 2s infinite; }
</style>

<div id="blueprint-data-container" data-current-step="{{ bengkel.blueprint_current_step|default:1 }}"></div>

<div class="animate-fade-up">
    <div class="bg-gradient-to-r from-blue-900 via-indigo-900 to-slate-900 shadow-lg relative z-20 rounded-3xl mb-8 overflow-hidden border border-slate-800">
        <div class="absolute inset-0 opacity-10" style="background-image:radial-gradient(rgba(255,255,255,.2) 1px,transparent 1px);background-size:20px 20px;"></div>
        <div class="px-6 py-5 relative flex flex-col sm:flex-row sm:items-center justify-between gap-6">
            <div class="flex items-center gap-4">
                <div class="w-12 h-12 rounded-full bg-white text-blue-900 flex items-center justify-center font-black text-xl shadow-md border-2 border-blue-300 uppercase shrink-0">
                    {{ user.first_name|first|default:user.username|first }}
                </div>
                <div>
                    <h1 class="text-xl font-black text-white tracking-wide">Selamat Datang, {{ user.get_full_name|default:user.username }}</h1>
                    <p class="text-indigo-200 text-xs mt-0.5 font-medium uppercase tracking-widest">SME Workspace • {{ bengkel.title }}</p>
                </div>
            </div>
            <div class="flex items-center gap-6 self-start sm:self-auto">
                <div class="text-left sm:text-right">
                    <div class="text-[10px] text-emerald-300 font-bold uppercase tracking-widest mb-0.5">Skor Sumbangan</div>
                    <div class="text-2xl font-black text-emerald-400 leading-none">{% kira_skor_peserta request.user bengkel %} <span class="text-sm text-white/50">pts</span></div>
                </div>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-3xl shadow-sm border border-slate-200 p-8 md:p-12 relative overflow-hidden">
        <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(#334155 1px, transparent 1px), linear-gradient(90deg, #334155 1px, transparent 1px); background-size: 40px 40px;"></div>
        
        <div class="text-center mb-10 relative z-10">
            <h2 class="text-2xl font-black text-slate-800">Peta Perjalanan Blueprint Anda</h2>
            <p class="text-sm text-slate-500 mt-2">Selesaikan modul aktif di bawah untuk menyalurkan kepakaran anda ke dalam Enjin AI Nasional.</p>
        </div>

        <div class="relative z-10 flex flex-col gap-8 md:gap-12">

            <div class="flex flex-col lg:flex-row gap-6 md:gap-8 justify-between w-full">
                
                <div class="flex-1 relative cursor-pointer group direct-link-card" data-url="{% url 'bengkel:peserta_reference' pk=bengkel.pk %}">
                    <div class="bg-blue-900 h-full rounded-2xl p-6 text-center shadow-lg relative overflow-hidden border-2 border-blue-700 transition transform group-hover:-translate-y-2 hover:shadow-[0_10px_40px_rgba(59,130,246,0.5)] hover:border-blue-400">
                        <div class="mb-4"><span class="text-[8px] font-black text-blue-300 bg-blue-900/50 px-3 py-1 rounded border border-blue-400/30 uppercase tracking-wider animate-pulse">Langkah 1</span></div>
                        <div class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center text-white text-xl font-black mx-auto mb-3 shadow-[0_0_20px_rgba(59,130,246,0.8)]">1</div>
                        <h3 class="text-white font-black text-lg mb-2">Muat Naik Rujukan</h3>
                        <p class="text-[11px] text-blue-200/70 leading-relaxed">Muat naik dokumen dasar atau SOP sebagai asas enjin AI.</p>
                        <div class="mt-4"><i class="fas fa-cloud-upload-alt text-3xl text-blue-400/50 group-hover:text-blue-300 transition"></i></div>
                    </div>
                </div>

                <div class="hidden lg:flex items-center justify-center w-6"><i class="fas fa-arrow-right text-2xl text-slate-300/30"></i></div>

                <div class="flex-1 relative blueprint-card {% if bengkel.blueprint_current_step >= 2 %}cursor-pointer group{% else %}cursor-not-allowed opacity-40 filter grayscale{% endif %}" 
                     data-required-step="2" data-url="{% url 'bengkel:peserta_spaf' pk=bengkel.pk %}">
                    <div class="bg-rose-900 h-full rounded-2xl p-6 text-center shadow-lg relative overflow-hidden border-2 border-rose-700 {% if bengkel.blueprint_current_step >= 2 %}transition transform group-hover:-translate-y-2 hover:shadow-[0_10px_40px_rgba(244,63,94,0.5)] hover:border-rose-400{% endif %}">
                        <div class="mb-4"><span class="text-[8px] font-black text-rose-300 bg-rose-900/50 px-3 py-1 rounded border border-rose-400/30 uppercase tracking-wider {% if bengkel.blueprint_current_step >= 2 %}animate-pulse{% endif %}">Langkah 2</span></div>
                        <div class="w-12 h-12 bg-rose-500 rounded-full flex items-center justify-center text-white text-xl font-black mx-auto mb-3 shadow-[0_0_20px_rgba(244,63,94,0.8)]">
                            {% if bengkel.blueprint_current_step >= 2 %}2{% else %}<i class="fas fa-lock text-sm"></i>{% endif %}
                        </div>
                        <h3 class="text-white font-black text-lg mb-2 leading-tight">Kerangka Analitikal</h3>
                        <p class="text-[11px] text-rose-200/70 leading-relaxed">{% if bengkel.blueprint_current_step >= 2 %}Selesaikan 6 modul SPAF untuk aliran kerja anda.{% else %}Fasa ini dikunci sehingga Penganjur mengaktifkannya.{% endif %}</p>
                        <div class="mt-4"><i class="fas fa-microchip text-3xl text-rose-400/50 {% if bengkel.blueprint_current_step >= 2 %}group-hover:text-rose-300 transition{% endif %}"></i></div>
                    </div>
                </div>

                <div class="hidden lg:flex items-center justify-center w-6"><i class="fas fa-arrow-right text-2xl text-slate-300/30"></i></div>

                <div class="flex-1 relative blueprint-card {% if bengkel.blueprint_current_step >= 3 %}cursor-pointer group{% else %}cursor-not-allowed opacity-40 filter grayscale{% endif %}" 
                     data-required-step="3" data-url="{% url 'bengkel:peserta_theme' pk=bengkel.pk %}">
                    <div class="nav-card bg-indigo-900 h-full rounded-2xl p-6 text-center shadow-lg relative overflow-hidden border-2 border-indigo-700 {% if bengkel.blueprint_current_step >= 3 %}transition transform group-hover:-translate-y-2 hover:shadow-[0_10px_40px_rgba(99,102,241,0.5)] hover:border-indigo-400{% endif %}">
                        <div class="mb-4"><span class="text-[8px] font-black text-indigo-300 bg-indigo-900/50 px-3 py-1 rounded border border-indigo-400/30 uppercase tracking-wider {% if bengkel.blueprint_current_step >= 3 %}animate-pulse{% endif %}">Langkah 3</span></div>
                        <div class="w-12 h-12 bg-indigo-500 rounded-full flex items-center justify-center text-white text-xl font-black mx-auto mb-3 shadow-[0_0_20px_rgba(99,102,241,0.8)]">
                            {% if bengkel.blueprint_current_step >= 3 %}3{% else %}<i class="fas fa-lock text-sm"></i>{% endif %}
                        </div>
                        <h3 class="text-white font-black text-lg mb-2">Undian Tema</h3>
                        <p class="text-[11px] text-indigo-200/70 leading-relaxed">{% if bengkel.blueprint_current_step >= 3 %}Nilai dan undi tema teras yang dijana oleh AI.{% else %}Fasa ini dikunci sehingga Penganjur mengaktifkannya.{% endif %}</p>
                        <div class="mt-4"><i class="fas fa-vote-yea text-3xl text-indigo-400/50 {% if bengkel.blueprint_current_step >= 3 %}group-hover:text-indigo-300 transition{% endif %}"></i></div>
                    </div>
                </div>

                <div class="hidden lg:flex items-center justify-center w-6"><i class="fas fa-arrow-right text-2xl text-slate-300/30"></i></div>

                <div class="flex-1 relative blueprint-card {% if bengkel.blueprint_current_step >= 4 %}cursor-pointer group{% else %}cursor-not-allowed opacity-40 filter grayscale{% endif %}" 
                     data-required-step="4" data-url="{% url 'bengkel:peserta_pillar' pk=bengkel.pk %}">
                    <div class="nav-card bg-emerald-900 h-full rounded-2xl p-6 text-center shadow-lg relative overflow-hidden border-2 border-emerald-700 {% if bengkel.blueprint_current_step >= 4 %}transition transform group-hover:-translate-y-2 hover:shadow-[0_10px_40px_rgba(16,185,129,0.5)] hover:border-emerald-400{% endif %}">
                        <div class="mb-4"><span class="text-[8px] font-black text-emerald-300 bg-emerald-900/50 px-3 py-1 rounded border border-emerald-400/30 uppercase tracking-wider {% if bengkel.blueprint_current_step >= 4 %}animate-pulse{% endif %}">Langkah 4</span></div>
                        <div class="w-12 h-12 bg-emerald-500 rounded-full flex items-center justify-center text-white text-xl font-black mx-auto mb-3 shadow-[0_0_20px_rgba(16,185,129,0.8)]">
                            {% if bengkel.blueprint_current_step >= 4 %}4{% else %}<i class="fas fa-lock text-sm"></i>{% endif %}
                        </div>
                        <h3 class="text-white font-black text-lg mb-2">Pengesahan Teras</h3>
                        <p class="text-[11px] text-emerald-200/70 leading-relaxed">{% if bengkel.blueprint_current_step >= 4 %}Sokong Teras Nasional yang disintesis oleh AI.{% else %}Fasa ini dikunci sehingga Penganjur mengaktifkannya.{% endif %}</p>
                        <div class="mt-4"><i class="fas fa-columns text-3xl text-emerald-400/50 {% if bengkel.blueprint_current_step >= 4 %}group-hover:text-emerald-300 transition{% endif %}"></i></div>
                    </div>
                </div>
            </div>

            <div class="hidden lg:flex justify-end pr-20 -my-8 relative z-0">
                <svg width="60" height="100" viewBox="0 0 60 100" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M 30,0 L 30,60 Q 30,100 0,100" stroke="#cbd5e1" stroke-width="4" stroke-dasharray="8 4" fill="none" /><polygon points="0,93 0,107 -12,100" fill="#94a3b8" /></svg>
            </div>

            <div class="flex flex-col lg:flex-row-reverse gap-6 md:gap-8 justify-between w-full">

                <div class="flex-1 relative blueprint-card {% if bengkel.blueprint_current_step >= 5 %}cursor-pointer group{% else %}cursor-not-allowed opacity-40 filter grayscale{% endif %}" 
                     data-required-step="5" data-url="{% url 'bengkel:peserta_strategi' pk=bengkel.pk %}">
                    <div class="nav-card bg-amber-900 h-full rounded-2xl p-6 text-center shadow-lg relative overflow-hidden border-2 border-amber-700 {% if bengkel.blueprint_current_step >= 5 %}transition transform group-hover:-translate-y-2 hover:shadow-[0_10px_40px_rgba(245,158,11,0.5)] hover:border-amber-400{% endif %}">
                        <div class="mb-4"><span class="text-[8px] font-black text-amber-300 bg-amber-900/50 px-3 py-1 rounded border border-amber-400/30 uppercase tracking-wider {% if bengkel.blueprint_current_step >= 5 %}animate-pulse{% endif %}">Langkah 5</span></div>
                        <div class="w-12 h-12 bg-amber-500 rounded-full flex items-center justify-center text-white text-xl font-black mx-auto mb-3 shadow-[0_0_20px_rgba(245,158,11,0.8)]">
                            {% if bengkel.blueprint_current_step >= 5 %}5{% else %}<i class="fas fa-lock text-sm"></i>{% endif %}
                        </div>
                        <h3 class="text-white font-black text-lg mb-2">Semakan Strategi</h3>
                        <p class="text-[11px] text-amber-200/70 leading-relaxed">{% if bengkel.blueprint_current_step >= 5 %}Semak draf perancangan nasional jangka panjang.{% else %}Fasa ini dikunci sehingga Penganjur mengaktifkannya.{% endif %}</p>
                        <div class="mt-4"><i class="fas fa-chess-knight text-3xl text-amber-400/50 {% if bengkel.blueprint_current_step >= 5 %}group-hover:text-amber-300 transition{% endif %}"></i></div>
                    </div>
                </div>

                <div class="hidden lg:flex items-center justify-center w-6"><i class="fas fa-arrow-left text-2xl text-slate-300/30"></i></div>

                <div class="flex-1 relative blueprint-card {% if bengkel.blueprint_current_step >= 6 %}cursor-pointer group{% else %}cursor-not-allowed opacity-40 filter grayscale{% endif %}" 
                     data-required-step="6" data-url="{% url 'bengkel:peserta_action_plan' pk=bengkel.pk %}">
                    <div class="nav-card bg-cyan-900 h-full rounded-2xl p-6 text-center shadow-lg relative overflow-hidden border-2 border-cyan-700 {% if bengkel.blueprint_current_step >= 6 %}transition transform group-hover:-translate-y-2 hover:shadow-[0_10px_40px_rgba(6,182,212,0.5)] hover:border-cyan-400{% endif %}">
                        <div class="mb-4"><span class="text-[8px] font-black text-cyan-300 bg-cyan-900/50 px-3 py-1 rounded border border-cyan-400/30 uppercase tracking-wider {% if bengkel.blueprint_current_step >= 6 %}animate-pulse{% endif %}">Langkah 6</span></div>
                        <div class="w-12 h-12 bg-cyan-500 rounded-full flex items-center justify-center text-white text-xl font-black mx-auto mb-3 shadow-[0_0_20px_rgba(6,182,212,0.8)]">
                            {% if bengkel.blueprint_current_step >= 6 %}6{% else %}<i class="fas fa-lock text-sm"></i>{% endif %}
                        </div>
                        <h3 class="text-white font-black text-lg mb-2 leading-tight">Pelan Tindakan</h3>
                        <p class="text-[11px] text-cyan-200/70 leading-relaxed">{% if bengkel.blueprint_current_step >= 6 %}Ikrar komitmen agensi anda untuk fasa operasi.{% else %}Fasa ini dikunci sehingga Penganjur mengaktifkannya.{% endif %}</p>
                        <div class="mt-4"><i class="fas fa-tasks text-3xl text-cyan-400/50 {% if bengkel.blueprint_current_step >= 6 %}group-hover:text-cyan-300 transition{% endif %}"></i></div>
                    </div>
                </div>

                <div class="hidden lg:flex items-center justify-center w-6"><i class="fas fa-arrow-left text-2xl text-slate-300/30"></i></div>

                <div class="flex-1 relative blueprint-card {% if bengkel.blueprint_current_step >= 7 %}cursor-pointer group{% else %}cursor-not-allowed opacity-40 filter grayscale{% endif %}" 
                     data-required-step="7" data-url="{% url 'bengkel:peserta_indikator' pk=bengkel.pk %}">
                    <div class="nav-card bg-fuchsia-900 h-full rounded-2xl p-6 text-center shadow-lg relative overflow-hidden border-2 border-fuchsia-700 {% if bengkel.blueprint_current_step >= 7 %}transition transform group-hover:-translate-y-2 hover:shadow-[0_10px_40px_rgba(217,70,239,0.5)] hover:border-fuchsia-400{% endif %}">
                        <div class="mb-4"><span class="text-[8px] font-black text-fuchsia-300 bg-fuchsia-900/50 px-3 py-1 rounded border border-fuchsia-400/30 uppercase tracking-wider {% if bengkel.blueprint_current_step >= 7 %}animate-pulse{% endif %}">Langkah 7</span></div>
                        <div class="w-12 h-12 bg-fuchsia-500 rounded-full flex items-center justify-center text-white text-xl font-black mx-auto mb-3 shadow-[0_0_20px_rgba(217,70,239,0.8)]">
                            {% if bengkel.blueprint_current_step >= 7 %}7{% else %}<i class="fas fa-lock text-sm"></i>{% endif %}
                        </div>
                        <h3 class="text-white font-black text-lg mb-2">Sasaran KPI</h3>
                        <p class="text-[11px] text-fuchsia-200/70 leading-relaxed">{% if bengkel.blueprint_current_step >= 7 %}Tetapkan sasaran logik untuk mengukur kejayaan.{% else %}Fasa ini dikunci sehingga Penganjur mengaktifkannya.{% endif %}</p>
                        <div class="mt-4"><i class="fas fa-chart-line text-3xl text-fuchsia-400/50 {% if bengkel.blueprint_current_step >= 7 %}group-hover:text-fuchsia-300 transition{% endif %}"></i></div>
                    </div>
                </div>

                <div class="hidden lg:flex items-center justify-center w-6"><i class="fas fa-arrow-left text-2xl text-slate-300/30"></i></div>

                <div class="flex-1 relative blueprint-card {% if bengkel.blueprint_current_step >= 8 %}cursor-pointer group{% else %}cursor-not-allowed opacity-40 filter grayscale{% endif %}" 
                     data-required-step="8" data-url="{% url 'bengkel:peserta_peruntukan' pk=bengkel.pk %}">
                    <div class="nav-card bg-slate-800 h-full rounded-2xl p-6 text-center shadow-lg relative overflow-hidden border-2 border-slate-600 {% if bengkel.blueprint_current_step >= 8 %}transition transform group-hover:-translate-y-2 hover:shadow-[0_10px_40px_rgba(148,163,184,0.5)] hover:border-slate-400{% endif %}">
                        <div class="mb-4"><span class="text-[8px] font-black text-slate-300 bg-slate-800/50 px-3 py-1 rounded border border-slate-500/30 uppercase tracking-wider {% if bengkel.blueprint_current_step >= 8 %}animate-pulse{% endif %}">Langkah 8</span></div>
                        <div class="w-12 h-12 bg-slate-600 rounded-full flex items-center justify-center text-white text-xl font-black mx-auto mb-3 shadow-[0_0_20px_rgba(71,85,105,0.8)]">
                            {% if bengkel.blueprint_current_step >= 8 %}8{% else %}<i class="fas fa-lock text-sm"></i>{% endif %}
                        </div>
                        <h3 class="text-white font-black text-lg mb-2">Peruntukan</h3>
                        <p class="text-[11px] text-slate-300/70 leading-relaxed">{% if bengkel.blueprint_current_step >= 8 %}Sahkan unjuran bajet yang diselaraskan AI.{% else %}Fasa ini dikunci sehingga Penganjur mengaktifkannya.{% endif %}</p>
                        <div class="mt-4"><i class="fas fa-coins text-3xl text-slate-400/50 {% if bengkel.blueprint_current_step >= 8 %}group-hover:text-slate-300 transition{% endif %}"></i></div>
                    </div>
                </div>

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

<script>
    // PENDENGAR ACARA (EVENT LISTENER) YANG BERSIH TANPA GANGGUAN LINTER
    document.addEventListener("DOMContentLoaded", function() {
        
        // --- LOGIK UNTUK LANGKAH 1 (Sentiasa Terbuka) ---
        const directCards = document.querySelectorAll('.direct-link-card');
        directCards.forEach(card => {
            card.addEventListener('click', function() {
                window.location.href = this.getAttribute('data-url');
            });
        });

        // --- LOGIK UNTUK LANGKAH 2 HINGGA 8 (Berkunci Berdasarkan SPAF) ---
        const container = document.getElementById('blueprint-data-container');
        const currentStep = parseInt(container.getAttribute('data-current-step'), 10) || 1;

        const cards = document.querySelectorAll('.blueprint-card');
        
        cards.forEach(card => {
            card.addEventListener('click', function() {
                const requiredStep = parseInt(this.getAttribute('data-required-step'), 10);
                const targetUrl = this.getAttribute('data-url');

                if (currentStep >= requiredStep) {
                    window.location.href = targetUrl;
                } else {
                    if (requiredStep === 2) {
                        alert("{% trans 'Kunci Sistem: Sila tunggu Penganjur menyelesaikan pengesahan Data Rujukan terlebih dahulu.' %}");
                    } else {
                        alert("{% trans 'Kunci Sistem: Modul ini belum dibuka oleh Penganjur.' %}");
                    }
                }
            });
        });
    });
</script>
{% endblock %}