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

{% block title %}{% trans "Tukar Kata Laluan" %} — 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">Edit Profil</a> <span class="mx-2 text-slate-400">/</span>
    <span class="text-slate-500 font-medium text-xs">Tukar Kata Laluan</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 ke Edit Profil">
                    <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">Tukar Kata Laluan</h1>
                    <p class="text-xs text-blue-200 font-medium mt-1 uppercase tracking-widest">Urus Keselamatan & Akses Akaun Anda</p>
                </div>
            </div>

            <div class="p-6 md:p-10">
                <div class="max-w-2xl mx-auto">
                    
                    <div class="text-center mb-8">
                        <div class="w-16 h-16 bg-blue-50 text-blue-600 rounded-full flex items-center justify-center text-3xl mx-auto mb-4 border border-blue-100"><i class="fas fa-shield-alt"></i></div>
                        <p class="text-sm text-slate-500 font-medium">Lindungi akaun anda dengan menggunakan kata laluan yang unik dan mengandungi sekurang-kurangnya 8 aksara.</p>
                    </div>

                    {% if messages %}
                    <div class="mb-6 space-y-2">
                        {% for m in messages %}
                        <div class="flex items-start gap-3 px-5 py-4 rounded-xl text-xs font-bold shadow-sm border 
                            {% if m.tags == 'success' %}bg-emerald-50 text-emerald-700 border-emerald-200
                            {% else %}bg-rose-50 text-rose-700 border-rose-200{% endif %}">
                            <i class="fas {% if m.tags == 'success' %}fa-check-circle text-emerald-500{% else %}fa-exclamation-triangle text-rose-500{% endif %} mt-0.5 text-base"></i>
                            <span class="leading-relaxed">{{ m }}</span>
                        </div>
                        {% endfor %}
                    </div>
                    {% endif %}

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

                        <div>
                            <label class="block text-[10px] font-black text-slate-500 uppercase tracking-widest mb-2">Kata Laluan Semasa <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-unlock-alt text-slate-400"></i></div>
                                <input type="password" name="current_password" id="cur_pw" autocomplete="current-password" 
                                       class="w-full pl-11 pr-10 py-3 bg-slate-50 border {% if errors.current_password %}border-rose-300 ring-4 ring-rose-50 bg-rose-50{% else %}border-slate-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-200{% endif %} rounded-xl text-sm focus:outline-none transition font-medium text-slate-700" 
                                       placeholder="Masukkan kata laluan sekarang..." />
                                <button type="button" class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-blue-600 p-1 transition-colors" onclick="togglePw('cur_pw', 'eye1')"><i id="eye1" class="fas fa-eye"></i></button>
                            </div>
                            {% if errors.current_password %}<div class="text-[10px] text-rose-500 mt-1.5 font-bold"><i class="fas fa-times-circle mr-1"></i> {{ errors.current_password }}</div>{% endif %}
                        </div>

                        <div class="border-t border-slate-100 my-4"></div>

                        <div>
                            <label class="block text-[10px] font-black text-slate-500 uppercase tracking-widest mb-2">Kata Laluan Baharu <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-key text-blue-400"></i></div>
                                <input type="password" name="new_password" id="new_pw" autocomplete="new-password" 
                                       class="w-full pl-11 pr-10 py-3 bg-slate-50 border {% if errors.new_password %}border-rose-300 ring-4 ring-rose-50 bg-rose-50{% else %}border-slate-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-200{% endif %} rounded-xl text-sm focus:outline-none transition font-medium text-slate-700" 
                                       placeholder="Minimum 8 aksara..." />
                                <button type="button" class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-blue-600 p-1 transition-colors" onclick="togglePw('new_pw', 'eye2')"><i id="eye2" class="fas fa-eye"></i></button>
                            </div>
                            <div class="mt-2 h-1 bg-slate-100 rounded-full overflow-hidden flex">
                                <div id="str-bar" class="h-full w-0 bg-slate-300 transition-all duration-300"></div>
                            </div>
                            {% if errors.new_password %}<div class="text-[10px] text-rose-500 mt-1.5 font-bold"><i class="fas fa-times-circle mr-1"></i> {{ errors.new_password }}</div>{% endif %}
                        </div>

                        <div>
                            <label class="block text-[10px] font-black text-slate-500 uppercase tracking-widest mb-2">Sahkan Kata Laluan Baharu <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-check-double text-blue-400"></i></div>
                                <input type="password" name="confirm_password" id="conf_pw" autocomplete="new-password" 
                                       class="w-full pl-11 pr-10 py-3 bg-slate-50 border {% if errors.confirm_password %}border-rose-300 ring-4 ring-rose-50 bg-rose-50{% else %}border-slate-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-200{% endif %} rounded-xl text-sm focus:outline-none transition font-medium text-slate-700" 
                                       placeholder="Ulang semula kata laluan baharu..." />
                                <button type="button" class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-blue-600 p-1 transition-colors" onclick="togglePw('conf_pw', 'eye3')"><i id="eye3" class="fas fa-eye"></i></button>
                            </div>
                            <div id="match-msg" class="text-[10px] mt-1.5 font-bold hidden"></div>
                            {% if errors.confirm_password %}<div class="text-[10px] text-rose-500 mt-1.5 font-bold"><i class="fas fa-times-circle mr-1"></i> {{ errors.confirm_password }}</div>{% endif %}
                        </div>

                        <div class="pt-6 mt-4 border-t border-slate-100 flex justify-end">
                            <button type="submit" class="w-full md: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> Kemaskini Kata Laluan
                            </button>
                        </div>
                    </form>
                    
                </div>
            </div>
        </div>
        
    </div>
</div>

<script>
    // Fungsi Mata (Toggle Password Visibility)
    function togglePw(inputId, iconId) {
        const inp = document.getElementById(inputId);
        const icon = document.getElementById(iconId);
        if (inp.type === 'password') {
            inp.type = 'text';
            icon.className = 'fas fa-eye-slash text-blue-500';
        } else {
            inp.type = 'password';
            icon.className = 'fas fa-eye text-slate-400';
        }
    }

    // Skrip tambahan (Kosmetik) untuk periksa kekuatan kata laluan baru
    const newPw = document.getElementById('new_pw');
    const confPw = document.getElementById('conf_pw');
    const strBar = document.getElementById('str-bar');
    const matchMsg = document.getElementById('match-msg');

    if(newPw && confPw) {
        newPw.addEventListener('input', function() {
            const val = this.value;
            let score = 0;
            if(val.length > 0) score += 25;
            if(val.length >= 8) score += 25;
            if(/[A-Z]/.test(val) && /[a-z]/.test(val)) score += 25;
            if(/[0-9!@#$%^&*]/.test(val)) score += 25;

            strBar.style.width = score + '%';
            if(score <= 25) strBar.className = 'h-full bg-rose-500 transition-all duration-300';
            else if(score <= 50) strBar.className = 'h-full bg-amber-400 transition-all duration-300';
            else if(score <= 75) strBar.className = 'h-full bg-blue-400 transition-all duration-300';
            else strBar.className = 'h-full bg-emerald-500 transition-all duration-300';
            
            checkMatch();
        });

        confPw.addEventListener('input', checkMatch);

        function checkMatch() {
            if(!confPw.value) { matchMsg.classList.add('hidden'); return; }
            matchMsg.classList.remove('hidden');
            if(newPw.value === confPw.value) {
                matchMsg.className = 'text-[10px] mt-1.5 font-bold text-emerald-600 block';
                matchMsg.innerHTML = '<i class="fas fa-check-circle mr-1"></i> Kata laluan sepadan';
            } else {
                matchMsg.className = 'text-[10px] mt-1.5 font-bold text-rose-500 block';
                matchMsg.innerHTML = '<i class="fas fa-times-circle mr-1"></i> Kata laluan tidak sepadan';
            }
        }
    }
</script>
{% endblock %}