{% extends "base.html" %}
{% load i18n %}
{% block title %}{% trans "Jemputan Dijana" %} — {{ 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">Jemputan Berjaya</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-emerald-50 border border-emerald-200 rounded-3xl p-6 md:p-8 mb-6 flex flex-col sm:flex-row items-center sm:items-start gap-5 shadow-sm">
        <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-emerald-400 to-emerald-600 flex items-center justify-center text-3xl text-white shadow-lg shadow-emerald-500/30 shrink-0">
            <i class="fas fa-check-circle"></i>
        </div>
        <div class="text-center sm:text-left">
            <h1 class="font-black text-emerald-800 text-2xl tracking-tight mb-1">Jemputan Berjaya Dijana!</h1>
            <p class="text-emerald-600 text-sm font-medium">Tiket akses untuk <strong class="text-emerald-800">{{ jemputan.nama }}</strong> telah sedia. Sila kongsi pautan atau Kod QR di bawah, atau hantar terus ke e-mel beliau.</p>
        </div>
    </div>

    <div class="bg-white rounded-3xl border border-slate-200 shadow-sm p-6 mb-8 flex items-center gap-4">
        <div class="w-12 h-12 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-lg font-black text-white shrink-0 shadow-inner">
            {{ jemputan.nama|first|upper }}
        </div>
        <div class="flex-1 min-w-0">
            <div class="font-black text-slate-800 text-base truncate">{{ jemputan.nama }}</div>
            <div class="text-slate-500 text-xs mt-0.5 truncate">{{ jemputan.email }} {% if jemputan.organisasi %}<span class="mx-1 text-slate-300">|</span> <i class="fas fa-building text-slate-400 mr-1"></i> {{ jemputan.organisasi }}{% endif %}</div>
        </div>
        <div class="shrink-0">
            <span class="bg-amber-50 text-amber-600 border border-amber-200 px-3 py-1.5 rounded-full text-[10px] font-black uppercase tracking-widest shadow-sm"><i class="fas fa-clock mr-1"></i> Menunggu</span>
        </div>
    </div>

    <div class="bg-white rounded-3xl border border-slate-200 shadow-sm p-8 mb-6">
        
        <div class="mb-8">
            <label class="block text-[11px] font-black uppercase tracking-widest text-slate-400 mb-2"><i class="fas fa-link text-blue-500 mr-1"></i> Pautan Jemputan Rasmi</label>
            <div class="flex flex-col sm:flex-row gap-3">
                <input id="invLink" type="text" value="{{ inv_url }}" readonly class="flex-1 px-4 py-3.5 rounded-xl border border-slate-200 text-sm font-mono text-slate-600 bg-slate-50 focus:outline-none focus:border-blue-400 focus:bg-white transition-colors cursor-pointer" onclick="this.select()" />
                <button onclick="copyText('invLink', this)" class="bg-blue-50 hover:bg-blue-600 text-blue-600 hover:text-white px-6 py-3.5 rounded-xl font-bold 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> <span>Salin Pautan</span>
                </button>
            </div>
        </div>

        <div class="border-t border-slate-100 mb-8"></div>

        <div class="border-t border-slate-100 mb-6"></div>

        <div class="flex flex-col sm:flex-row gap-3 justify-center">
            <a href="{% if user.is_authenticated %}{% if user.is_superuser %}{% url 'superadmin:dashboard' %}{% elif user.is_staff %}{% url 'bengkel:penganjur_home' %}{% else %}{% url 'bengkel:dashboard' %}{% endif %}{% else %}{% url 'home' %}{% endif %}" 
               class="inline-flex items-center justify-center gap-2 w-full sm:w-auto px-8 py-3.5 bg-slate-100 hover:bg-slate-200 text-slate-600 hover:text-slate-900 font-bold text-sm rounded-xl transition-all active:scale-95">
                <i class="fas fa-arrow-left"></i> Kembali ke Dashboard
            </a>
            
            {% if jemputan.email %}
            <!-- Kita simpan butang hantar e-mel untuk mudahkan penganjur jika pautan terlalu panjang -->
            <form method="post" action="{% url 'bengkel:jemputan_send_email' jid=jemputan.pk %}" onsubmit="return confirm('{% trans "Hantar e-mel pengesahan jemputan kepada" %} {{ jemputan.email }}?')" class="w-full sm:w-auto">
                {% csrf_token %}
                <button type="submit" class="w-full inline-flex items-center justify-center gap-2 bg-gradient-to-r from-teal-600 to-emerald-600 hover:from-teal-700 hover:to-emerald-700 text-white px-8 py-3.5 rounded-xl font-bold transition-all shadow-lg shadow-teal-500/30 active:scale-[0.98]">
                    <i class="fas fa-envelope-open-text"></i> Hantar E-mel Jemputan
                </button>
            </form>
            {% endif %}
        </div>

    </div>

    <div class="bg-amber-50 border border-amber-200 rounded-2xl px-5 py-4 mb-8 flex items-start gap-3 shadow-sm">
        <i class="fas fa-shield-alt text-amber-500 mt-0.5"></i>
        <p class="text-xs text-amber-800 font-medium leading-relaxed">
            <strong>AKSES UNIK:</strong> Pautan jemputan ini disulitkan (encrypted) khusus untuk <strong>{{ jemputan.nama }}</strong> sahaja. Proses pendaftaran masuk (Check-In) akan dilakukan oleh peserta sendiri dengan mengimbas <strong>Master QR</strong> yang akan dipancarkan di skrin dewan nanti.
        </p>
    </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">
            <i class="fas fa-list-ul"></i> Lihat Senarai Keseluruhan
        </a>
        <a href="{% url 'bengkel:jemput' pk=bengkel.pk %}" class="w-full sm:w-auto bg-blue-600 hover:bg-blue-700 text-white px-8 py-3.5 rounded-xl font-bold transition-all shadow-lg shadow-blue-500/30 flex items-center justify-center gap-2 active:scale-[0.98]">
            <i class="fas fa-user-plus"></i> Jana Jemputan Lain
        </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 berjaya disalin!
</div>

<script>
function copyText(inputId, btn) {
    var inp = document.getElementById(inputId);
    navigator.clipboard.writeText(inp.value).then(function () {
        var toast = document.getElementById('copyToast');
        // Paparkan Toast
        toast.classList.remove('translate-y-20', 'opacity-0');
        
        // Ubah butang sementara
        var origHtml = btn.innerHTML;
        btn.innerHTML = '<i class="fas fa-check"></i> <span>Disalin!</span>';
        btn.classList.add('bg-emerald-500', 'text-white', 'border-emerald-500');
        btn.classList.remove('bg-blue-50', 'text-blue-600', 'hover:bg-blue-600');
        
        setTimeout(function () { 
            // Sembunyikan Toast
            toast.classList.add('translate-y-20', 'opacity-0');
            // Kembalikan butang asal
            btn.innerHTML = origHtml; 
            btn.classList.remove('bg-emerald-500', 'text-white', 'border-emerald-500');
            btn.classList.add('bg-blue-50', 'text-blue-600', 'hover:bg-blue-600');
        }, 2500);
    });
}
</script>
{% endblock %}