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

{% block title %}{% trans "Edit Profil Saya" %} — IPES{% endblock %}

{% block breadcrumb %}
    <a href="{% url 'bengkel:dashboard' %}?tab=bengkel" class="text-blue-600 hover:underline text-xs font-bold">Laman Utama Peserta</a> <span class="mx-2 text-slate-400">/</span>
    <a href="{{ back_url }}" class="text-blue-600 hover:underline text-xs font-bold">Profil Kognitif AI</a> <span class="mx-2 text-slate-400">/</span>
    <span class="text-slate-500 font-medium text-xs">Edit Profil</span>
{% endblock %}

{% block content %}
<div class="animate-fade-up pb-12">

    <div class="w-full max-w-5xl mx-auto mt-4">
        
        <div class="bg-white rounded-3xl shadow-sm border border-slate-200 overflow-hidden mb-8 relative">
            
            <div class="h-28 md:h-36 bg-gradient-to-br from-[#0f172a] via-[#1e3a8a] to-[#134e4a] relative p-6 md:p-8 flex items-start">
                <div class="absolute inset-0 opacity-20" style="background-image:radial-gradient(rgba(255,255,255,.15) 1px,transparent 1px);background-size:20px 20px;"></div>
                
                <a href="{{ back_url }}" class="relative z-10 inline-flex items-center justify-center w-10 h-10 bg-black/20 hover:bg-black/40 text-white/80 hover:text-white rounded-full transition-all backdrop-blur-sm border border-white/20 shadow-sm" title="Kembali">
                    <i class="fas fa-arrow-left"></i>
                </a>
                
                <div class="relative z-10 ml-5 pt-1">
                    <h1 class="text-2xl md:text-3xl font-black text-white tracking-tight">Edit Profil Saya</h1>
                    <p class="text-xs text-blue-200 font-medium mt-1 uppercase tracking-widest">Kemaskini Maklumat Peribadi & Agensi</p>
                </div>
            </div>

            <div class="p-6 md:p-10">
                
                {% if status_penganjur %}
                <div class="bg-slate-50 rounded-2xl p-6 mb-8 border border-slate-200 flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
                    <div>
                        <div class="inline-block px-3 py-1 bg-teal-100 text-teal-700 text-[10px] font-black uppercase tracking-widest rounded-full mb-2">Jemputan Agensi</div>
                        <h2 class="text-lg font-black text-slate-800 tracking-tight">Permohonan Penganjur</h2>
                        <p class="text-xs text-slate-500 mt-1 max-w-lg leading-relaxed">Status terkini permohonan anda untuk menjadi Penganjur bengkel.</p>
                    </div>
                    <div class="flex flex-col items-center gap-1 p-4 rounded-xl border border-amber-200 bg-white shadow-sm min-w-[160px] text-center">
                        <div class="text-[9px] font-bold text-slate-400 uppercase tracking-widest">Status Terkini</div>
                        {% if status_penganjur == 'Menunggu Kelulusan' %}
                            <span class="bg-amber-100 text-amber-700 px-3 py-1.5 rounded-lg text-xs font-black shadow-sm w-full">{{ status_penganjur }}</span>
                        {% elif status_penganjur == 'Lulus' %}
                            <span class="bg-emerald-100 text-emerald-700 px-3 py-1.5 rounded-lg text-xs font-black shadow-sm w-full">{{ status_penganjur }}</span>
                        {% elif status_penganjur == 'Ditolak' %}
                            <span class="bg-rose-100 text-rose-700 px-3 py-1.5 rounded-lg text-xs font-black shadow-sm w-full">{{ status_penganjur }}</span>
                        {% else %}
                            <span class="bg-slate-100 text-slate-600 px-3 py-1.5 rounded-lg text-xs font-black shadow-sm w-full">{{ status_penganjur }}</span>
                        {% endif %}
                    </div>
                </div>
                {% endif %}

                <form method="post" class="space-y-6">
                    {% csrf_token %}
                    
                    {% if errors %}
                    <div class="p-4 bg-rose-50 border border-rose-200 text-rose-700 rounded-xl text-xs font-bold shadow-sm">
                        <div class="flex items-center mb-2"><i class="fas fa-exclamation-triangle text-rose-500 mr-2 text-sm"></i> Sila semak semula ralat di bawah:</div>
                        <ul class="list-disc pl-8 font-medium">
                            {% for key, err in errors.items %}
                                <li>{{ err }}</li>
                            {% endfor %}
                        </ul>
                    </div>
                    {% endif %}

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="id_first_name" class="block text-[10px] font-black text-slate-500 uppercase tracking-widest mb-2">Nama Penuh <span class="text-rose-500">*</span></label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none"><i class="fas fa-user text-slate-400"></i></div>
                                <input type="text" name="first_name" id="id_first_name" value="{% if form_data.first_name %}{{ form_data.first_name }}{% else %}{{ user.first_name }} {{ user.last_name }}{% endif %}" class="w-full pl-11 pr-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition font-medium text-slate-700" placeholder="SILA MASUKKAN NAMA PENUH MENGIKUT IC" style="text-transform: uppercase;" required>
                            </div>
                        </div>

                        <div>
                            <label for="id_email" class="block text-[10px] font-black text-slate-500 uppercase tracking-widest mb-2">Alamat E-mel <span class="text-rose-500">*</span></label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none"><i class="fas fa-envelope text-slate-400"></i></div>
                                <input type="email" name="email" id="id_email" value="{{ form_data.email|default:user.email }}" class="w-full pl-11 pr-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition font-medium text-slate-700" placeholder="Contoh: nama@kkm.gov.my" required>
                            </div>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="id_telefon" class="block text-[10px] font-black text-slate-500 uppercase tracking-widest mb-2">No Telefon Agensi / SME</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none"><i class="fas fa-phone-alt text-slate-400"></i></div>
                                <input type="tel" name="telefon" id="id_telefon" value="{{ form_data.telefon|default:profile.telefon|default:'' }}" class="w-full pl-11 pr-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition font-medium text-slate-700" placeholder="Contoh: 012-3456789">
                            </div>
                        </div>
                        
                        <div>
                            <label for="id_jabatan" class="block text-[10px] font-black text-slate-500 uppercase tracking-widest mb-2">Jawatan / Kepakaran</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none z-10"><i class="fas fa-user-tag text-slate-400"></i></div>
                                {% with curr_jawatan=form_data.jabatan|default:profile.jabatan %}
                                <select name="jabatan" id="id_jabatan" class="w-full pl-11 pr-10 py-3 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition font-medium text-slate-700 appearance-none bg-[url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%236b7280%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E')] bg-[length:12px_12px] bg-[right_1rem_center] bg-no-repeat">
                                    <option value="">-- Pilih Jawatan / Gred --</option>
                                    <option value="Pegawai Teknologi Maklumat (IT Officer)" {% if curr_jawatan == 'Pegawai Teknologi Maklumat (IT Officer)' %}selected{% endif %}>Pegawai Teknologi Maklumat (IT Officer)</option>
                                    <option value="Ketua Penolong Pengarah Kanan (KPPK)" {% if curr_jawatan == 'Ketua Penolong Pengarah Kanan (KPPK)' %}selected{% endif %}>Ketua Penolong Pengarah Kanan (KPPK)</option>
                                    <option value="Ketua Penolong Pengarah (KPP)" {% if curr_jawatan == 'Ketua Penolong Pengarah (KPP)' %}selected{% endif %}>Ketua Penolong Pengarah (KPP)</option>
                                    <option value="Penolong Pengarah Kanan (PPK)" {% if curr_jawatan == 'Penolong Pengarah Kanan (PPK)' %}selected{% endif %}>Penolong Pengarah Kanan (PPK)</option>
                                    <option value="Pegawai Perubatan (Medical Officer)" {% if curr_jawatan == 'Pegawai Perubatan (Medical Officer)' %}selected{% endif %}>Pegawai Perubatan (Medical Officer)</option>
                                    <option value="Pegawai Farmasi (Pharmacist)" {% if curr_jawatan == 'Pegawai Farmasi (Pharmacist)' %}selected{% endif %}>Pegawai Farmasi (Pharmacist)</option>
                                    <option value="Akauntan / Pegawai Kewangan" {% if curr_jawatan == 'Akauntan / Pegawai Kewangan' %}selected{% endif %}>Akauntan / Pegawai Kewangan</option>
                                    <option value="Juruaudit" {% if curr_jawatan == 'Juruaudit' %}selected{% endif %}>Juruaudit</option>
                                    <option value="Pengurusan Eksekutif (VP / AVP)" {% if curr_jawatan == 'Pengurusan Eksekutif (VP / AVP)' %}selected{% endif %}>Pengurusan Eksekutif (VP / AVP)</option>
                                    <option value="Ketua Pegawai Teknologi (CTO / CIO)" {% if curr_jawatan == 'Ketua Pegawai Teknologi (CTO / CIO)' %}selected{% endif %}>Ketua Pegawai Teknologi (CTO / CIO)</option>
                                    <option value="Ketua Penolong Setiausaha (KPSU)" {% if curr_jawatan == 'Ketua Penolong Setiausaha (KPSU)' %}selected{% endif %}>Ketua Penolong Setiausaha (KPSU)</option>
                                    <option value="Setiausaha Bahagian / Timbalan SUB" {% if curr_jawatan == 'Setiausaha Bahagian / Timbalan SUB' %}selected{% endif %}>Setiausaha Bahagian / Timbalan SUB</option>
                                    <option value="Pengarah / Timbalan Pengarah (Director)" {% if curr_jawatan == 'Pengarah / Timbalan Pengarah (Director)' %}selected{% endif %}>Pengarah / Timbalan Pengarah (Director)</option>
                                    <option value="Ketua Pegawai Eksekutif (CEO / MD / Presiden)" {% if curr_jawatan == 'Ketua Pegawai Eksekutif (CEO / MD / Presiden)' %}selected{% endif %}>Ketua Pegawai Eksekutif (CEO / MD / Presiden)</option>
                                    <option value="Pakar Perubatan (Specialist / Consultant)" {% if curr_jawatan == 'Pakar Perubatan (Specialist / Consultant)' %}selected{% endif %}>Pakar Perubatan (Specialist / Consultant)</option>
                                    <option value="Ketua Bahagian / Pengurus (Manager / Head)" {% if curr_jawatan == 'Ketua Bahagian / Pengurus (Manager / Head)' %}selected{% endif %}>Ketua Bahagian / Pengurus (Manager / Head)</option>
                                    <option value="Pegawai / Eksekutif Kanan" {% if curr_jawatan == 'Pegawai / Eksekutif Kanan' %}selected{% endif %}>Pegawai / Eksekutif Kanan</option>
                                    <option value="Perunding Gred Khas (JUSA)" {% if curr_jawatan == 'Perunding Gred Khas (JUSA)' %}selected{% endif %}>Perunding Gred Khas (JUSA)</option>
                                </select>
                                {% endwith %}
                            </div>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 pt-6 mt-4 border-t border-slate-100">
                        <div>
                            <label for="id_organisasi" class="block text-[10px] font-black text-slate-500 uppercase tracking-widest mb-2">Agensi / Organisasi</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none z-10"><i class="fas fa-building text-slate-400"></i></div>
                                {% with curr_org=form_data.organisasi|default:profile.organisasi %}
                                <select name="organisasi" id="id_organisasi" class="w-full pl-11 pr-10 py-3 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition font-medium text-slate-700 appearance-none bg-[url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%236b7280%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E')] bg-[length:12px_12px] bg-[right_1rem_center] bg-no-repeat">
                                    <option value="">-- Pilih Organisasi --</option>
                                    <option value="Kementerian Kesihatan Malaysia (KKM)" {% if curr_org == 'Kementerian Kesihatan Malaysia (KKM)' %}selected{% endif %}>Kementerian Kesihatan Malaysia (KKM)</option>
                                    <option value="Amazon Web Services (AWS)" {% if curr_org == 'Amazon Web Services (AWS)' %}selected{% endif %}>Amazon Web Services (AWS)</option>
                                    <option value="Asia OneHealthcare" {% if curr_org == 'Asia OneHealthcare' %}selected{% endif %}>Asia OneHealthcare</option>
                                    <option value="Asia Pacific University (APU)" {% if curr_org == 'Asia Pacific University (APU)' %}selected{% endif %}>Asia Pacific University (APU)</option>
                                    <option value="Jabatan Digital Negara (JDN)" {% if curr_org == 'Jabatan Digital Negara (JDN)' %}selected{% endif %}>Jabatan Digital Negara (JDN)</option>
                                    <option value="JKN Perlis" {% if curr_org == 'JKN Perlis' %}selected{% endif %}>JKN Perlis</option>
                                    <option value="JKN Pulau Pinang" {% if curr_org == 'JKN Pulau Pinang' %}selected{% endif %}>JKN Pulau Pinang</option>
                                    <option value="JKN Terengganu" {% if curr_org == 'JKN Terengganu' %}selected{% endif %}>JKN Terengganu</option>
                                    <option value="JKN Kedah" {% if curr_org == 'JKN Kedah' %}selected{% endif %}>JKN Kedah</option>
                                    <option value="JKN Sarawak" {% if curr_org == 'JKN Sarawak' %}selected{% endif %}>JKN Sarawak</option>
                                    <option value="JKN Pahang" {% if curr_org == 'JKN Pahang' %}selected{% endif %}>JKN Pahang</option>
                                    <option value="JKN Selangor" {% if curr_org == 'JKN Selangor' %}selected{% endif %}>JKN Selangor</option>
                                    <option value="JKN WP Kuala Lumpur & Putrajaya" {% if curr_org == 'JKN WP Kuala Lumpur & Putrajaya' %}selected{% endif %}>JKN WP Kuala Lumpur & Putrajaya</option>
                                    <option value="Kementerian Pertahanan (MINDEF)" {% if curr_org == 'Kementerian Pertahanan (MINDEF)' %}selected{% endif %}>Kementerian Pertahanan (MINDEF)</option>
                                    <option value="Kementerian Sumber Manusia (KESUMA)" {% if curr_org == 'Kementerian Sumber Manusia (KESUMA)' %}selected{% endif %}>Kementerian Sumber Manusia (KESUMA)</option>
                                    <option value="Kementerian Kewangan (MOF)" {% if curr_org == 'Kementerian Kewangan (MOF)' %}selected{% endif %}>Kementerian Kewangan (MOF)</option>
                                    <option value="Malaysian Medical Association (MMA)" {% if curr_org == 'Malaysian Medical Association (MMA)' %}selected{% endif %}>Malaysian Medical Association (MMA)</option>
                                    <option value="Sunway Healthcare Group" {% if curr_org == 'Sunway Healthcare Group' %}selected{% endif %}>Sunway Healthcare Group</option>
                                    <option value="Kumpulan Wang Persaraan (KWAP)" {% if curr_org == 'Kumpulan Wang Persaraan (KWAP)' %}selected{% endif %}>Kumpulan Wang Persaraan (KWAP)</option>
                                    <option value="Malaysia Healthcare Travel Council (MHTC)" {% if curr_org == 'Malaysia Healthcare Travel Council (MHTC)' %}selected{% endif %}>Malaysia Healthcare Travel Council (MHTC)</option>
                                    <option value="Bahagian Regulatori Farmasi Negara (NPRA)" {% if curr_org == 'Bahagian Regulatori Farmasi Negara (NPRA)' %}selected{% endif %}>Bahagian Regulatori Farmasi Negara (NPRA)</option>
                                    <option value="Clinical Research Malaysia (CRM)" {% if curr_org == 'Clinical Research Malaysia (CRM)' %}selected{% endif %}>Clinical Research Malaysia (CRM)</option>
                                    <option value="Makmal Kesihatan Awam Kebangsaan (MKAK)" {% if curr_org == 'Makmal Kesihatan Awam Kebangsaan (MKAK)' %}selected{% endif %}>Makmal Kesihatan Awam Kebangsaan (MKAK)</option>
                                    <option value="National Institutes of Health (NIH)" {% if curr_org == 'National Institutes of Health (NIH)' %}selected{% endif %}>National Institutes of Health (NIH)</option>
                                    <option value="Majlis Perubatan Malaysia (MMC)" {% if curr_org == 'Majlis Perubatan Malaysia (MMC)' %}selected{% endif %}>Majlis Perubatan Malaysia (MMC)</option>
                                    <option value="Institut Kanser Negara (IKN)" {% if curr_org == 'Institut Kanser Negara (IKN)' %}selected{% endif %}>Institut Kanser Negara (IKN)</option>
                                    <option value="World Bank Group" {% if curr_org == 'World Bank Group' %}selected{% endif %}>World Bank Group</option>
                                    <option value="UNDP" {% if curr_org == 'UNDP' %}selected{% endif %}>UNDP</option>
                                    <option value="United Nations University" {% if curr_org == 'United Nations University' %}selected{% endif %}>United Nations University</option>
                                    <option value="Universiti Tempatan (IPT)" {% if curr_org == 'Universiti Tempatan (IPT)' %}selected{% endif %}>Universiti Tempatan (IPT)</option>
                                    <option value="Hospital KKM" {% if curr_org == 'Hospital KKM' %}selected{% endif %}>Hospital KKM</option>
                                </select>
                                {% endwith %}
                            </div>
                        </div>
                        <div>
                            <label for="id_unit" class="block text-[10px] font-black text-slate-500 uppercase tracking-widest mb-2">Unit / Bahagian</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none z-10"><i class="fas fa-sitemap text-slate-400"></i></div>
                                {% with curr_unit=form_data.unit|default:profile.unit %}
                                <select name="unit" id="id_unit" class="w-full pl-11 pr-10 py-3 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition font-medium text-slate-700 appearance-none bg-[url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%236b7280%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E')] bg-[length:12px_12px] bg-[right_1rem_center] bg-no-repeat">
                                    <option value="">-- Pilih Unit / Bahagian --</option>
                                    <option value="Bahagian / Unit Teknologi Maklumat (ICT & Digital)" {% if curr_unit == 'Bahagian / Unit Teknologi Maklumat (ICT & Digital)' %}selected{% endif %}>Bahagian / Unit Teknologi Maklumat (ICT & Digital)</option>
                                    <option value="Bahagian Perancangan Perkhidmatan Digital (BPPD)" {% if curr_unit == 'Bahagian Perancangan Perkhidmatan Digital (BPPD)' %}selected{% endif %}>Bahagian Perancangan Perkhidmatan Digital (BPPD)</option>
                                    <option value="Bahagian / Unit Keperawatan (Nursing)" {% if curr_unit == 'Bahagian / Unit Keperawatan (Nursing)' %}selected{% endif %}>Bahagian / Unit Keperawatan (Nursing)</option>
                                    <option value="Bahagian Pengurusan Maklumat (BPM)" {% if curr_unit == 'Bahagian Pengurusan Maklumat (BPM)' %}selected{% endif %}>Bahagian Pengurusan Maklumat (BPM)</option>
                                    <option value="Bahagian Akaun & Kewangan" {% if curr_unit == 'Bahagian Akaun & Kewangan' %}selected{% endif %}>Bahagian Akaun & Kewangan</option>
                                    <option value="Bahagian / Program Kesihatan Pergigian" {% if curr_unit == 'Bahagian / Program Kesihatan Pergigian' %}selected{% endif %}>Bahagian / Program Kesihatan Pergigian</option>
                                    <option value="Bahagian / Program Perkhidmatan Farmasi" {% if curr_unit == 'Bahagian / Program Perkhidmatan Farmasi' %}selected{% endif %}>Bahagian / Program Perkhidmatan Farmasi</option>
                                    <option value="Cawangan Audit Dalam" {% if curr_unit == 'Cawangan Audit Dalam' %}selected{% endif %}>Cawangan Audit Dalam</option>
                                    <option value="Bahagian Sains Kesihatan Bersekutu" {% if curr_unit == 'Bahagian Sains Kesihatan Bersekutu' %}selected{% endif %}>Bahagian Sains Kesihatan Bersekutu</option>
                                    <option value="Bahagian Pendidikan Kesihatan" {% if curr_unit == 'Bahagian Pendidikan Kesihatan' %}selected{% endif %}>Bahagian Pendidikan Kesihatan</option>
                                    <option value="Bahagian Kesihatan Awam" {% if curr_unit == 'Bahagian Kesihatan Awam' %}selected{% endif %}>Bahagian Kesihatan Awam</option>
                                    <option value="Bahagian Perubatan / Amalan Perubatan" {% if curr_unit == 'Bahagian Perubatan / Amalan Perubatan' %}selected{% endif %}>Bahagian Perubatan / Amalan Perubatan</option>
                                    <option value="PUSAT DARAH NEGARA (PDN)" {% if curr_unit == 'PUSAT DARAH NEGARA (PDN)' %}selected{% endif %}>PUSAT DARAH NEGARA (PDN)</option>
                                    <option value="Pusat Informatik Kesihatan (PIK)" {% if curr_unit == 'Pusat Informatik Kesihatan (PIK)' %}selected{% endif %}>Pusat Informatik Kesihatan (PIK)</option>
                                    <option value="Unit Perkembangan Profesion Perubatan" {% if curr_unit == 'Unit Perkembangan Profesion Perubatan' %}selected{% endif %}>Unit Perkembangan Profesion Perubatan</option>
                                    <option value="Bahagian Dasar & Hubungan Antarabangsa" {% if curr_unit == 'Bahagian Dasar & Hubungan Antarabangsa' %}selected{% endif %}>Bahagian Dasar & Hubungan Antarabangsa</option>
                                    <option value="Unit Integriti" {% if curr_unit == 'Unit Integriti' %}selected{% endif %}>Unit Integriti</option>
                                    <option value="Unit Komunikasi Korporat" {% if curr_unit == 'Unit Komunikasi Korporat' %}selected{% endif %}>Unit Komunikasi Korporat</option>
                                    <option value="Bahagian / Unit Perancangan Strategik & Data" {% if curr_unit == 'Bahagian / Unit Perancangan Strategik & Data' %}selected{% endif %}>Bahagian / Unit Perancangan Strategik & Data</option>
                                    <option value="Institut Di Bawah NIH (IMR / IHSR / IKU / CRM)" {% if curr_unit == 'Institut Di Bawah NIH (IMR / IHSR / IKU / CRM)' %}selected{% endif %}>Institut Di Bawah NIH (IMR / IHSR / IKU / CRM)</option>
                                    <option value="Bahagian Pengurusan / Pentadbiran Umum" {% if curr_unit == 'Bahagian Pengurusan / Pentadbiran Umum' %}selected{% endif %}>Bahagian Pengurusan / Pentadbiran Umum</option>
                                </select>
                                {% endwith %}
                            </div>
                        </div>
                    </div>

                    <div>
                        <label for="id_alamat" class="block text-[10px] font-black text-slate-500 uppercase tracking-widest mb-2">Alamat Lengkap</label>
                        <div class="relative">
                            <div class="absolute top-4 left-4 flex items-center pointer-events-none"><i class="fas fa-map-marked-alt text-slate-400"></i></div>
                            <textarea name="alamat" id="id_alamat" rows="3" class="w-full pl-11 pr-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition font-medium text-slate-700 resize-none" placeholder="Masukkan alamat lengkap operasi KKM/Agensi anda">{{ form_data.alamat|default:profile.alamat|default:'' }}</textarea>
                        </div>
                    </div>

                    <div class="pt-8 mt-4 border-t border-slate-100 flex flex-col sm:flex-row items-center justify-between gap-4">
                        <a href="{% url 'bengkel:change_password' %}" class="w-full sm:w-auto flex items-center justify-center gap-2 bg-slate-100 hover:bg-slate-200 text-slate-600 font-bold px-6 py-3.5 rounded-xl transition-colors border border-slate-200">
                            <i class="fas fa-lock"></i> Tukar Kata Laluan
                        </a>

                        <button type="submit" class="w-full sm:w-auto flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 text-white font-bold px-8 py-3.5 rounded-xl shadow-lg shadow-blue-500/30 transition-all active:scale-[0.98]">
                             <i class="fas fa-save"></i> Simpan Perubahan
                        </button>
                    </div>
                </form>
            </div>
        </div>
        
    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const first_name_input = document.getElementById("id_first_name");
        if(first_name_input) {
            first_name_input.addEventListener('input', function() {
                this.value = this.value.toUpperCase();
            });
        }

        const perananElement = document.getElementById("id_peranan");
        const penganjurFields = document.getElementById("medan_penganjur");
        const organisasiInput = document.getElementById("id_organisasi");
        const jabatanInput = document.getElementById("id_jabatan");

        function toggleFields() {
            if (!perananElement) return;
            const perananValue = perananElement.value.toLowerCase();
            
            // Semak jika perkataan "penganjur" ada dalam jawatan/peranan
            if (perananValue.includes("penganjur")) {
                penganjurFields.classList.remove("hidden");
                organisasiInput.required = true;
                jabatanInput.required = true;
            } else {
                penganjurFields.classList.add("hidden");
                organisasiInput.required = false;
                jabatanInput.required = false;
            }
        }

        toggleFields();
        if (perananElement) {
            perananElement.addEventListener("change", toggleFields);
        }
    });
</script>
{% endblock %}