{% extends "superadmin/base.html" %}
{% block title %}Tambah Penganjur — Superadmin{% endblock %}
{% block nav_pengguna %}active{% endblock %}
{% block page_title %}Tambah Akaun Penganjur{% endblock %}

{% block content %}
<div class="max-w-lg">

  <!-- Back link -->
  <a href="{% url 'superadmin:semua_pengguna' %}" class="inline-flex items-center gap-1.5 text-[12px] text-slate-500 font-semibold hover:text-slate-700 mb-5 transition-colors">
    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg>
    Kembali ke Senarai Pengguna
  </a>

  <div class="card overflow-hidden">
    <!-- Header -->
    <div class="px-6 py-5 border-b border-slate-100">
      <div class="flex items-center gap-3">
        <div class="w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0" style="background:#eff6ff">
          <svg class="w-5 h-5" style="color:#2563eb" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/></svg>
        </div>
        <div>
          <h2 class="font-extrabold text-[14px] text-slate-800">Akaun Penganjur Baharu</h2>
          <p class="text-[11.5px] text-slate-400 mt-0.5">Akaun ini akan dapat mencipta dan mengurus bengkel sendiri.</p>
        </div>
      </div>
    </div>

    <!-- Form -->
    <div class="px-6 py-6">

      {% if error %}
      <div class="flex items-start gap-3 bg-red-50 border border-red-200 rounded-xl px-4 py-3 mb-5 text-[12.5px] text-red-700 font-semibold">
        <svg class="w-4 h-4 mt-px flex-shrink-0 text-red-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        {{ error }}
      </div>
      {% endif %}

      <form method="post">
        {% csrf_token %}

        <div class="space-y-4">
          <!-- Username -->
          <div>
            <label class="block text-[11.5px] font-bold text-slate-600 uppercase tracking-wider mb-1.5">
              Nama Pengguna <span class="text-red-500">*</span>
            </label>
            <input type="text" name="username" required minlength="3" maxlength="30"
                   value="{{ form_data.username|default:'' }}" placeholder="cth: ali_penganjur"
                   class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-[13px] text-slate-800 focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-100 transition-all"/>
          </div>

          <!-- Email -->
          <div>
            <label class="block text-[11.5px] font-bold text-slate-600 uppercase tracking-wider mb-1.5">
              Alamat E-mel <span class="text-red-500">*</span>
            </label>
            <input type="email" name="email" required
                   value="{{ form_data.email|default:'' }}" placeholder="penganjur@kkm.gov.my"
                   class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-[13px] text-slate-800 focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-100 transition-all"/>
          </div>

          <!-- Full name -->
          <div>
            <label class="block text-[11.5px] font-bold text-slate-600 uppercase tracking-wider mb-1.5">
              Nama Penuh <span class="text-slate-400 font-normal">(Pilihan)</span>
            </label>
            <div class="grid grid-cols-2 gap-2">
              <input type="text" name="first_name" placeholder="Nama pertama"
                     value="{{ form_data.first_name|default:'' }}"
                     class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-[13px] text-slate-800 focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-100 transition-all"/>
              <input type="text" name="last_name" placeholder="Nama akhir"
                     value="{{ form_data.last_name|default:'' }}"
                     class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-[13px] text-slate-800 focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-100 transition-all"/>
            </div>
          </div>

          <!-- Divider -->
          <div class="border-t border-slate-100 pt-1">
            <p class="text-[10.5px] text-slate-400 font-bold uppercase tracking-widest mb-3">Maklumat Organisasi</p>
          </div>

          <!-- Nama Organisasi -->
          <div>
            <label class="block text-[11.5px] font-bold text-slate-600 uppercase tracking-wider mb-1.5">
              Nama Organisasi <span class="text-red-500">*</span>
            </label>
            <input type="text" name="organisasi" required maxlength="200"
                   value="{{ form_data.organisasi|default:'' }}" placeholder="cth: Kementerian Kesihatan Malaysia"
                   class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-[13px] text-slate-800 focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-100 transition-all"/>
          </div>

          <!-- Jabatan -->
          <div>
            <label class="block text-[11.5px] font-bold text-slate-600 uppercase tracking-wider mb-1.5">
              Jawatan / Jabatan <span class="text-slate-400 font-normal">(Pilihan)</span>
            </label>
            <input type="text" name="jabatan" maxlength="200"
                   value="{{ form_data.jabatan|default:'' }}" placeholder="cth: Pegawai Tadbir, Ketua Unit HR"
                   class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-[13px] text-slate-800 focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-100 transition-all"/>
          </div>

          <!-- Telefon -->
          <div>
            <label class="block text-[11.5px] font-bold text-slate-600 uppercase tracking-wider mb-1.5">
              No. Telefon <span class="text-slate-400 font-normal">(Pilihan)</span>
            </label>
            <input type="tel" name="telefon" maxlength="30"
                   value="{{ form_data.telefon|default:'' }}" placeholder="cth: 0123456789"
                   class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-[13px] text-slate-800 focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-100 transition-all"/>
          </div>

          <!-- Divider -->
          <div class="border-t border-slate-100 pt-1">
            <p class="text-[10.5px] text-slate-400 font-bold uppercase tracking-widest mb-3">Kata Laluan Akaun</p>
          </div>

          <!-- Password -->
          <div>
            <label class="block text-[11.5px] font-bold text-slate-600 uppercase tracking-wider mb-1.5">
              Kata Laluan <span class="text-red-500">*</span>
            </label>
            <input type="password" name="password1" required minlength="8"
                   placeholder="Minimum 8 aksara"
                   class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-[13px] text-slate-800 focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-100 transition-all"/>
          </div>

          <!-- Confirm password -->
          <div>
            <label class="block text-[11.5px] font-bold text-slate-600 uppercase tracking-wider mb-1.5">
              Sahkan Kata Laluan <span class="text-red-500">*</span>
            </label>
            <input type="password" name="password2" required
                   placeholder="Ulang kata laluan"
                   class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-[13px] text-slate-800 focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-100 transition-all"/>
          </div>
        </div>

        <!-- Info note -->
        <div class="flex items-start gap-2.5 mt-5 p-3.5 rounded-xl" style="background:#f0fdf4;border:1px solid #bbf7d0">
          <svg class="w-4 h-4 mt-px flex-shrink-0" style="color:#059669" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
          <p class="text-[11.5px] text-emerald-700 leading-relaxed">
            Akaun ini akan ditetapkan sebagai <strong>Penganjur</strong> secara automatik.
            Penganjur boleh log masuk, mencipta bengkel, dan mengurus jemputan sendiri.
          </p>
        </div>

        <div class="flex gap-3 mt-6">
          <button type="submit"
            class="flex-1 py-3 rounded-xl text-white text-[13.5px] font-extrabold shadow transition-all hover:opacity-90"
            style="background:linear-gradient(135deg,#1e40af,#2563eb)">
            Cipta Akaun Penganjur
          </button>
          <a href="{% url 'superadmin:semua_pengguna' %}"
             class="px-5 py-3 rounded-xl text-[13px] font-semibold text-slate-600 bg-slate-100 hover:bg-slate-200 transition-all">
            Batal
          </a>
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock %}