{% extends "base.html" %}
{% load i18n %}
{% block title %}{% trans "Jana Jemputan" %} — {{ 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">Jana Jemputan Baru</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-[1000px] mx-auto pb-12">

    <div class="rounded-3xl p-8 mb-8 relative overflow-hidden shadow-sm border border-slate-800" style="background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);">
        <div class="absolute inset-0 opacity-10" style="background-image:radial-gradient(rgba(255,255,255,.3) 1px,transparent 1px);background-size:20px 20px;"></div>
        <div class="relative z-10 flex items-center gap-5">
            <div class="w-14 h-14 rounded-2xl bg-white/10 backdrop-blur-sm border border-white/20 flex items-center justify-center text-2xl text-blue-300 shadow-inner">
                <i class="fas fa-paper-plane"></i>
            </div>
            <div>
                <div class="text-[10px] text-blue-300 font-black uppercase tracking-widest mb-1">{{ bengkel.title|truncatechars:50 }}</div>
                <h1 class="text-white text-3xl font-black tracking-tight">Jana Jemputan Peserta</h1>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

        <div class="bg-white rounded-3xl border border-slate-200 shadow-sm p-8 flex flex-col group hover:border-teal-400 transition-all duration-300">
            <div class="flex items-start justify-between mb-6">
                <div class="w-14 h-14 rounded-2xl flex items-center justify-center text-2xl text-white shadow-lg shadow-teal-500/30" style="background: linear-gradient(135deg, #0d9488, #0f766e);">
                    <i class="fas fa-qrcode"></i>
                </div>
                <span class="bg-teal-50 text-teal-600 border border-teal-200 px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest">Paling Mudah</span>
            </div>
            
            <h3 class="text-xl font-black text-slate-800 mb-2">1 QR untuk Semua</h3>
            <p class="text-sm text-slate-500 leading-relaxed mb-8 flex-1">
                Sistem akan menjana <strong>satu pautan & kod QR utama</strong>. Boleh dikongsi terus ke dalam kumpulan WhatsApp atau diletakkan pada poster. Setiap pendaftar akan mendapat tiket unik mereka sendiri secara automatik.
            </p>

            <a href="{% url 'bengkel:open_reg_info' pk=bengkel.pk %}" class="w-full bg-slate-50 hover:bg-teal-50 border border-slate-200 hover:border-teal-300 text-teal-700 font-bold py-4 rounded-xl transition-all flex items-center justify-center gap-2 group-hover:bg-teal-600 group-hover:text-white shadow-sm">
                <span>Jana QR Keseluruhan</span>
                <i class="fas fa-arrow-right text-sm"></i>
            </a>
        </div>

        <div class="bg-white rounded-3xl border {% if individu_error %}border-rose-400{% else %}border-slate-200{% endif %} shadow-sm p-8 flex flex-col group hover:border-blue-400 transition-all duration-300">
            <div class="flex items-start justify-between mb-6">
                <div class="w-14 h-14 rounded-2xl flex items-center justify-center text-2xl text-white shadow-lg shadow-blue-500/30" style="background: linear-gradient(135deg, #1e40af, #2563eb);">
                    <i class="fas fa-envelope-open-text"></i>
                </div>
                <span class="bg-blue-50 text-blue-600 border border-blue-200 px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest">Eksklusif</span>
            </div>

            <h3 class="text-xl font-black text-slate-800 mb-2">Jemputan Individu Terus</h3>
            <p class="text-sm text-slate-500 leading-relaxed mb-6">
                Masukkan e-mel peserta. Sistem akan menghantar jemputan rasmi secara terus ke peti masuk (Inbox) mereka.
            </p>

            {% if individu_error %}
            <div class="bg-rose-50 border border-rose-200 text-rose-700 px-4 py-3 rounded-xl mb-4 text-xs font-bold flex items-start gap-2 shadow-sm">
                <i class="fas fa-exclamation-circle mt-0.5 text-rose-500"></i>
                <span>{{ individu_error }}</span>
            </div>
            {% endif %}

            <form method="post" class="mt-auto">
                {% csrf_token %}
                <input type="hidden" name="action" value="individu" />
                <div class="space-y-4">
                    <div>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none"><i class="fas fa-at text-slate-400"></i></div>
                            <input type="email" name="email" value="{{ individu_email|default:'' }}" required placeholder="Contoh: ahmad@moh.gov.my" class="w-full pl-11 pr-4 py-3.5 bg-slate-50 border {% if individu_error %}border-rose-300 bg-rose-50{% else %}border-slate-200{% endif %} rounded-xl text-sm text-slate-800 focus:outline-none focus:border-blue-500 focus:bg-white transition-all" />
                        </div>
                        <p class="text-[10px] text-slate-400 font-semibold mt-2"><i class="fas fa-info-circle text-blue-400"></i> Nota: E-mel mesti telah didaftarkan di portal.</p>
                    </div>
                    
                    <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 rounded-xl shadow-lg shadow-blue-500/30 transition-all active:scale-[0.98] flex items-center justify-center gap-2">
                        <i class="fas fa-paper-plane"></i> Tembak Jemputan
                    </button>
                </div>
            </form>
        </div>

    </div>
    
    <div class="mt-8 text-center">
        <a href="{% url 'bengkel:jemputan_list' pk=bengkel.pk %}" class="inline-flex items-center gap-2 text-sm font-bold text-slate-500 hover:text-slate-700 transition-colors bg-white border border-slate-200 px-6 py-3 rounded-xl hover:bg-slate-50 shadow-sm">
            <i class="fas fa-arrow-left"></i> Kembali ke Senarai Jemputan
        </a>
    </div>
</div>
{% endblock %}