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

{% block title %}Pusat Bantuan & Pertanyaan Sistem{% endblock %}

{% block content %}
<style>
    @keyframes blobBounce { 0% { transform: scale(1) translate(0, 0); } 33% { transform: scale(1.1) translate(30px, -50px); } 66% { transform: scale(0.9) translate(-20px, 20px); } 100% { transform: scale(1) translate(0, 0); } }
    .blob { animation: blobBounce 15s infinite alternate; }
    .glass-panel { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.5); }
</style>

<div class="relative -mt-8 -mx-4 sm:-mx-8 overflow-hidden bg-[#0a0f1d] min-h-screen pb-24 pt-16 border-b-[6px] border-indigo-500">
    <div class="absolute top-[-10%] left-[-10%] w-[500px] h-[500px] rounded-full bg-blue-600/20 blur-[100px] mix-blend-screen blob pointer-events-none"></div>
    <div class="absolute bottom-[-10%] right-[-10%] w-[600px] h-[600px] rounded-full bg-indigo-500/20 blur-[120px] mix-blend-screen blob pointer-events-none" style="animation-delay: 2s;"></div>
    <div class="absolute inset-0 opacity-10" style="background-image:radial-gradient(rgba(255,255,255,0.6) 1px,transparent 1px);background-size:30px 30px;"></div>

    <div class="relative max-w-[800px] mx-auto px-4 sm:px-6 z-10">
        
        <div class="text-center mb-10 mt-8">
            <div class="inline-flex items-center justify-center w-20 h-20 bg-white/10 text-indigo-400 rounded-3xl text-4xl mb-6 shadow-[0_0_30px_rgba(99,102,241,0.2)] border border-white/10 backdrop-blur-md transform rotate-3">
                <i class="fas fa-headset"></i>
            </div>
            <h1 class="text-4xl md:text-5xl font-black text-white tracking-tight drop-shadow-lg mb-4" style="font-family:'Noto Serif', Georgia, serif;">Pusat Bantuan & <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-indigo-400">Pertanyaan</span></h1>
            <p class="text-slate-300 text-base md:text-lg font-medium max-w-xl mx-auto">Sama ada anda ingin melaporkan ralat (bug), mengemukakan cadangan, atau membuat pertanyaan (enquiry), pasukan kami sedia membantu.</p>
        </div>

        {% if messages %}
        <div class="mb-8">
            {% for msg in messages %}
            <div class="bg-emerald-500/20 border border-emerald-400/50 text-emerald-100 px-6 py-4 rounded-2xl flex items-start gap-4 shadow-lg backdrop-blur-md">
                <i class="fas fa-check-circle mt-1 text-emerald-400 text-xl"></i>
                <div>
                    <strong class="block mb-1 font-bold text-white">Tiket Berjaya Dihantar!</strong>
                    <p class="text-sm font-medium">{{ msg }}</p>
                </div>
            </div>
            {% endfor %}
        </div>
        {% endif %}

        <div class="glass-panel rounded-[2.5rem] shadow-2xl p-8 md:p-12 relative">
            
            <form method="post" action="{% url 'bengkel:portal_list' %}" class="space-y-8">
                {% csrf_token %}
                
                <div>
                    <label class="block text-[11px] font-black text-slate-500 uppercase tracking-widest mb-3">Pilih Kategori Tiket <span class="text-rose-500">*</span></label>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        {% for key, label in kategori_choices %}
                        <label class="cursor-pointer group">
                            <input type="radio" name="kategori" value="{{ key }}" class="peer sr-only" {% if forloop.last %}checked{% endif %}>
                            <div class="border-2 border-slate-200 bg-slate-50 rounded-2xl p-5 text-center peer-checked:border-indigo-500 peer-checked:bg-indigo-50 peer-checked:text-indigo-700 peer-checked:shadow-md transition-all font-bold text-sm text-slate-500 group-hover:border-indigo-300">
                                {% if key == 'bug' %}<i class="fas fa-bug block text-3xl mb-3 text-rose-400 peer-checked:text-indigo-600 transition-colors"></i>
                                {% elif key == 'cadangan' %}<i class="fas fa-lightbulb block text-3xl mb-3 text-amber-400 peer-checked:text-indigo-600 transition-colors"></i>
                                {% else %}<i class="fas fa-question-circle block text-3xl mb-3 text-blue-400 peer-checked:text-indigo-600 transition-colors"></i>{% endif %}
                                {{ label }}
                            </div>
                        </label>
                        {% endfor %}
                    </div>
                </div>

                <div>
                    <label class="block text-[11px] font-black text-slate-500 uppercase tracking-widest mb-3">Tajuk / Subjek <span class="text-rose-500">*</span></label>
                    <input type="text" name="tajuk" required placeholder="Contoh: Pertanyaan mengenai fungsi cetakan PDF..." class="w-full bg-white border-2 border-slate-200 rounded-2xl px-5 py-4 text-slate-800 font-bold text-sm focus:outline-none focus:border-indigo-500 focus:ring-4 focus:ring-indigo-500/10 transition-all placeholder:font-medium placeholder:text-slate-400">
                </div>

                <div>
                    <label class="block text-[11px] font-black text-slate-500 uppercase tracking-widest mb-3">Penerangan Terperinci <span class="text-rose-500">*</span></label>
                    <textarea name="mesej" rows="6" required placeholder="Sila huraikan masalah atau pertanyaan (enquiry) anda secara terperinci di sini..." class="w-full bg-white border-2 border-slate-200 rounded-2xl px-5 py-4 text-slate-800 font-medium text-sm focus:outline-none focus:border-indigo-500 focus:ring-4 focus:ring-indigo-500/10 transition-all resize-none placeholder:text-slate-400"></textarea>
                </div>

                <div class="pt-6 mt-6 border-t border-slate-100 flex flex-col-reverse md:flex-row justify-between items-center gap-4">
                    <a href="{% url 'home' %}" class="text-sm font-bold text-slate-400 hover:text-slate-700 transition flex items-center w-full md:w-auto justify-center">
                        <i class="fas fa-arrow-left mr-2"></i> Kembali ke Laman Utama
                    </a>
                    <button type="submit" class="w-full md:w-auto bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-black px-10 py-4 rounded-2xl shadow-[0_10px_25px_rgba(79,70,229,0.4)] transition-all active:scale-95 flex items-center justify-center gap-3">
                        Hantar Tiket Bantuan <i class="fas fa-paper-plane text-lg"></i>
                    </button>
                </div>
            </form>

        </div>
    </div>
</div>
{% endblock %}