{% extends "base.html" %}
{% load i18n %}
{% block title %}{% trans "QR Pendaftaran Terbuka" %} — {{ bengkel.title }}{% endblock %}
{% block breadcrumb %}
  <a href="{% url 'bengkel:list' %}" class="text-blue-600 hover:underline text-xs font-bold">Pustaka Bengkel</a> <span class="mx-2 text-slate-400">/</span>
  <a href="{% url 'bengkel:detail' pk=bengkel.pk %}" class="text-blue-600 hover:underline text-xs font-bold">{{ bengkel.title|truncatechars:30 }}</a> <span class="mx-2 text-slate-400">/</span>
  <a href="{% url 'bengkel:jemputan_list' pk=bengkel.pk %}" class="text-blue-600 hover:underline text-xs font-bold">Senarai Jemputan</a> <span class="mx-2 text-slate-400">/</span>
  <span class="text-slate-500 font-medium text-xs">Pusat QR Terbuka</span>
{% endblock %}

{% block content %}
<style>
    @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
    .animate-fade-up { animation: fadeUp 0.5s ease-out forwards; }
</style>

<div class="animate-fade-up max-w-[800px] mx-auto pb-12">

    <div class="bg-gradient-to-br from-slate-900 via-teal-900 to-slate-900 rounded-3xl p-8 mb-6 shadow-sm border border-slate-800 flex flex-col sm:flex-row items-center sm:items-start gap-6 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-qrcode text-[150px] text-teal-400"></i>
        </div>
        
        <div class="w-16 h-16 rounded-2xl bg-teal-500/20 backdrop-blur-sm border border-teal-400/30 flex items-center justify-center text-3xl text-teal-300 shadow-inner shrink-0 relative z-10">
            <i class="fas fa-share-alt"></i>
        </div>
        <div class="text-center sm:text-left relative z-10">
            <div class="inline-flex items-center gap-1.5 px-3 py-1 bg-teal-500/20 border border-teal-400/30 text-teal-200 text-[10px] font-black uppercase tracking-widest rounded-full mb-3">
                Modul Pendaftaran Awam
            </div>
            <h1 class="font-black text-white text-2xl md:text-3xl tracking-tight mb-1">Pusat Pautan & Kod QR</h1>
            <p class="text-teal-100/70 text-sm font-medium">{{ bengkel.title }}</p>
        </div>
    </div>

    {% if messages %}
        <div class="mb-6 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
                {% else %}bg-rose-50 text-rose-700 border-rose-200{% endif %}">
                <i class="fas {% if msg.tags == 'success' %}fa-check-circle text-emerald-500{% else %}fa-times-circle text-rose-500{% endif %} mt-0.5"></i>
                <div class="break-all">{{ msg }}</div>
            </div>
            {% endfor %}
        </div>
    {% endif %}

    <div class="bg-emerald-50 border border-emerald-200 rounded-2xl px-5 py-4 mb-8 flex items-center justify-between gap-4 shadow-sm">
        <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-full bg-emerald-100 flex items-center justify-center text-emerald-600 shrink-0">
                <i class="fas fa-broadcast-tower animate-pulse"></i>
            </div>
            <div>
                <div class="text-sm font-black text-emerald-800">Saluran Pendaftaran Aktif</div>
                <div class="text-xs text-emerald-600 font-medium">Sesiapa sahaja yang mempunyai pautan atau Kod QR ini boleh mendaftar.</div>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-3xl border border-slate-200 shadow-sm p-8 mb-8">
        
        <div class="flex flex-col md:flex-row gap-8 items-center md:items-start">
            
            <div class="shrink-0 flex flex-col items-center">
                <div class="p-3 bg-white rounded-3xl border-2 border-dashed border-slate-300 shadow-sm mb-4">
                    <img id="qrImg" src="{% url 'bengkel:open_reg_qr' pk=bengkel.pk %}" alt="QR Pendaftaran" class="w-48 h-48 md:w-56 md:h-56 object-contain rounded-xl" />
                </div>
                <a href="{% url 'bengkel:open_reg_qr' pk=bengkel.pk %}" download="Poster_QR_{{ bengkel.title|slugify }}.png" class="w-full bg-slate-800 hover:bg-slate-900 text-white font-bold py-3 px-4 rounded-xl text-xs flex items-center justify-center gap-2 transition-colors shadow-md">
                    <i class="fas fa-download"></i> Muat Turun (PNG)
                </a>
            </div>

            <div class="flex-1 w-full space-y-6">
                <div>
                    <h3 class="text-lg font-black text-slate-800 mb-2">Sebarkan kepada umum</h3>
                    <p class="text-sm text-slate-500 leading-relaxed">Cetak Kod QR ini dan tampalkan pada papan notis pintu masuk dewan, atau salin pautan di bawah untuk dihantar melalui mesej jemputan (WhatsApp / E-mel Rasmi).</p>
                </div>

                <div class="bg-slate-50 rounded-2xl p-5 border border-slate-200">
                    <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400 mb-2"><i class="fas fa-link text-blue-500 mr-1"></i> Pautan Rasmi Pendaftaran</label>
                    <div class="flex flex-col sm:flex-row gap-2">
                        <input id="regLinkInput" type="text" readonly value="{{ reg_url }}" class="flex-1 px-4 py-3 rounded-xl border border-slate-200 text-xs font-mono text-slate-600 bg-white focus:outline-none focus:border-blue-400 transition-colors cursor-pointer select-all" onclick="this.select()" />
                        <button onclick="copyLink()" class="bg-blue-50 hover:bg-blue-600 text-blue-600 hover:text-white px-6 py-3 rounded-xl font-bold text-sm transition-all flex items-center justify-center gap-2 border border-blue-100 hover:border-blue-600 shadow-sm shrink-0">
                            <i class="fas fa-copy"></i> Salin
                        </button>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="bg-rose-50/50 border border-rose-100 rounded-3xl p-6 md:p-8 mb-8">
        <div class="flex items-start gap-3 mb-5">
            <i class="fas fa-shield-alt text-rose-500 text-lg mt-0.5"></i>
            <div>
                <h3 class="font-black text-slate-800 text-sm">Kawalan Keselamatan Pautan</h3>
                <p class="text-xs text-slate-500 mt-1">Gunakan fungsi di bawah jika pautan anda telah bocor kepada pihak luar atau jika anda ingin menutup pendaftaran sertamerta.</p>
            </div>
        </div>

        <div class="flex flex-col sm:flex-row gap-4">
            <form method="post" action="{% url 'bengkel:reg_toggle' pk=bengkel.pk %}" class="flex-1">
                {% csrf_token %}
                <input type="hidden" name="reg_had" value="{{ bengkel.reg_had }}" />
                <button type="submit" class="w-full bg-white border border-rose-200 text-rose-600 hover:bg-rose-50 px-5 py-3.5 rounded-xl text-xs font-bold transition-all shadow-sm flex items-center justify-center gap-2">
                    <i class="fas fa-power-off"></i> Nyahaktifkan Pautan
                </button>
            </form>

            <form method="post" action="{% url 'bengkel:reg_reset' pk=bengkel.pk %}" onsubmit="return confirm('{% trans "AMARAN KESELAMATAN: Adakah anda pasti untuk reset pautan ini? Kod QR dan pautan lama tidak lagi boleh digunakan. Anda perlu edarkan Kod QR yang baharu kepada peserta." %}')" class="flex-1">
                {% csrf_token %}
                <button type="submit" class="w-full bg-white border border-amber-200 text-amber-600 hover:bg-amber-50 px-5 py-3.5 rounded-xl text-xs font-bold transition-all shadow-sm flex items-center justify-center gap-2">
                    <i class="fas fa-sync-alt"></i> Reset (Jana Pautan Baharu)
                </button>
            </form>
        </div>
    </div>

    <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
        <a href="{% url 'bengkel:jemputan_list' pk=bengkel.pk %}" class="w-full sm:w-auto bg-white border border-slate-300 hover:bg-slate-50 text-slate-600 px-8 py-3.5 rounded-xl font-bold transition-colors flex items-center justify-center gap-2 shadow-sm text-sm">
            <i class="fas fa-list-ul"></i> Kembali ke Senarai
        </a>
        <a href="{% url 'bengkel:jemput' pk=bengkel.pk %}" class="w-full sm:w-auto bg-blue-50 hover:bg-blue-100 text-blue-700 px-8 py-3.5 rounded-xl font-bold transition-colors flex items-center justify-center gap-2 shadow-sm text-sm">
            <i class="fas fa-envelope"></i> Jana Jemputan E-mel
        </a>
    </div>

</div>

<div id="copyToast" class="fixed bottom-8 right-8 bg-slate-900/90 backdrop-blur-sm border border-slate-700 text-white text-sm font-bold px-5 py-3 rounded-xl shadow-2xl transition-all duration-300 transform translate-y-20 opacity-0 z-50 flex items-center gap-2">
    <i class="fas fa-check-circle text-emerald-400"></i> Pautan rasmi berjaya disalin!
</div>

<script>
function copyLink() {
    var inp = document.getElementById('regLinkInput');
    if (!inp) return;
    navigator.clipboard.writeText(inp.value).then(function() {
        var toast = document.getElementById('copyToast');
        toast.classList.remove('translate-y-20', 'opacity-0');
        setTimeout(function() { 
            toast.classList.add('translate-y-20', 'opacity-0'); 
        }, 2500);
    });
}
</script>
{% endblock %}