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

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

  <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 bg-white shadow-sm border border-slate-200 rounded-2xl">
    <div class="px-6 py-5 border-b border-slate-100 bg-emerald-50/50">
      <div class="flex items-center gap-3">
        <div class="w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0 bg-emerald-100">
          <i class="fas fa-user-plus text-emerald-600 text-lg"></i>
        </div>
        <div>
          <h2 class="font-extrabold text-[14px] text-slate-800">Akaun Peserta Baharu (SME)</h2>
          <p class="text-[11.5px] text-slate-500 mt-0.5">Selaras dengan pendaftaran portal. Akaun akan terus diaktifkan.</p>
        </div>
      </div>
    </div>

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

      {% if messages %}
        {% for message in messages %}
          {% if message.tags == '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">
            <i class="fas fa-exclamation-triangle mt-0.5"></i> {{ message }}
          </div>
          {% endif %}
        {% endfor %}
      {% endif %}

      <form method="post" class="space-y-5">
        {% csrf_token %}

        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
          <div>
            <label class="block text-[10.5px] font-bold text-slate-500 uppercase tracking-widest mb-1.5">
              Nama Pengguna <span class="text-red-500">*</span>
            </label>
            <input type="text" name="username" required minlength="3" maxlength="30" placeholder="cth: abu_sme"
                   class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-sm text-slate-800 focus:ring-2 focus:ring-emerald-100 focus:border-emerald-500 outline-none transition-all"/>
          </div>

          <div>
            <label class="block text-[10.5px] font-bold text-slate-500 uppercase tracking-widest mb-1.5">
              Alamat E-mel <span class="text-red-500">*</span>
            </label>
            <input type="email" name="email" required placeholder="nama@kkm.gov.my"
                   class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-sm text-slate-800 focus:ring-2 focus:ring-emerald-100 focus:border-emerald-500 outline-none transition-all"/>
          </div>
        </div>

        <div>
          <label class="block text-[10.5px] font-bold text-slate-500 uppercase tracking-widest mb-1.5">
            Nama Penuh <span class="text-slate-400 font-medium normal-case">(Mengikut KP)</span> <span class="text-red-500">*</span>
          </label>
          <input type="text" name="nama_penuh" required placeholder="cth: Ahmad Bin Abdullah"
                 class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-sm text-slate-800 focus:ring-2 focus:ring-emerald-100 focus:border-emerald-500 outline-none transition-all"/>
        </div>

        <div class="border-t border-slate-100 pt-3 mt-2">
          <p class="text-[10.5px] text-emerald-600 font-bold uppercase tracking-widest mb-4"><i class="fas fa-briefcase mr-1"></i> Maklumat Kerja Peserta</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
            <div>
              <label class="block text-[10.5px] font-bold text-slate-500 uppercase tracking-widest mb-1.5">Organisasi / Kementerian</label>
              <select name="organisasi" class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-sm text-slate-800 focus:ring-2 focus:ring-emerald-100 focus:border-emerald-500 outline-none transition-all bg-white">
                  <option value="">-- Pilih Organisasi --</option>
                  <option value="Kementerian Kesihatan Malaysia">Kementerian Kesihatan Malaysia</option>
                  <option value="Jabatan Kesihatan Negeri">Jabatan Kesihatan Negeri</option>
                  <option value="Pejabat Kesihatan Daerah">Pejabat Kesihatan Daerah</option>
                  <option value="Hospital">Hospital</option>
                  <option value="Kementerian Pengajian Tinggi">Kementerian Pengajian Tinggi</option>
                  <option value="Kementerian Pertahanan">Kementerian Pertahanan</option>
                  <option value="Jabatan Digital Negara">Jabatan Digital Negara</option>
                  <option value="Pertubuhan Bukan Kerajaan">Pertubuhan Bukan Kerajaan</option>
                  <option value="Badan Akademik">Badan Akademik</option>
                  <option value="Swasta">Swasta</option>
              </select>
            </div>
  
            <div>
              <label class="block text-[10.5px] font-bold text-slate-500 uppercase tracking-widest mb-1.5">Jawatan</label>
              <input type="text" name="jawatan" maxlength="200" placeholder="cth: Pakar Perubatan"
                     class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-sm text-slate-800 focus:ring-2 focus:ring-emerald-100 focus:border-emerald-500 outline-none transition-all"/>
            </div>
        </div>

        <div>
            <label class="block text-[10.5px] font-bold text-slate-500 uppercase tracking-widest mb-1.5">Unit / Bahagian</label>
            <input type="text" name="unit" maxlength="200" placeholder="cth: Unit Perancangan Strategik"
                   class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-sm text-slate-800 focus:ring-2 focus:ring-emerald-100 focus:border-emerald-500 outline-none transition-all"/>
        </div>

        <div>
            <label class="block text-[10.5px] font-bold text-slate-500 uppercase tracking-widest mb-1.5">Alamat Penuh</label>
            <textarea name="alamat" rows="2" maxlength="500" placeholder="Masukkan alamat lengkap"
                      class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-sm text-slate-800 focus:ring-2 focus:ring-emerald-100 focus:border-emerald-500 outline-none transition-all resize-none"></textarea>
        </div>

        <div class="border-t border-slate-100 pt-3 mt-2">
          <p class="text-[10.5px] text-emerald-600 font-bold uppercase tracking-widest mb-4"><i class="fas fa-lock mr-1"></i> Keselamatan Akses</p>
        </div>

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

        <div class="flex gap-3 mt-8 pt-4 border-t border-slate-100">
          <button type="submit" class="flex-1 py-3 rounded-xl text-white text-[13.5px] font-extrabold shadow transition-all hover:opacity-90 bg-emerald-600 hover:bg-emerald-700">
            Cipta Akaun Peserta
          </button>
          <a href="{% url 'superadmin:semua_pengguna' %}" class="px-6 py-3 rounded-xl text-[13px] font-semibold text-slate-600 bg-slate-100 hover:bg-slate-200 transition-all text-center flex items-center justify-center">
            Batal
          </a>
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock %}