{% extends "base.html" %}

{% block title %}Reset Password Pengguna{% endblock %}
{% block page_title %}Reset Password{% endblock %}

{% block content %}
<a href="{{ url_for('superadmin.users') }}" class="inline-flex items-center gap-1 text-sm text-gray-500 hover:text-primary-600 mb-6">
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
    Kembali ke daftar pengguna
</a>

<div class="max-w-2xl bg-white rounded-xl shadow-sm border border-gray-100 p-6">
    <!-- User Info -->
    <div class="flex items-center gap-4 mb-6 p-4 bg-gray-50 rounded-lg border border-gray-100">
        <div class="w-14 h-14 bg-primary-100 rounded-full flex items-center justify-center">
            <span class="text-primary-700 font-bold text-lg">{{ user.name[0]|upper }}</span>
        </div>
        <div>
            <p class="text-base font-semibold text-gray-800">{{ user.name }}</p>
            <p class="text-sm text-gray-500">{{ user.email }}</p>
            <p class="text-xs text-gray-400 mt-0.5">
                {% if user.role == 'admin' %}
                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">Admin</span>
                {% elif user.role == 'guru' %}
                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">Guru</span>
                {% elif user.role == 'murid' %}
                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Murid</span>
                {% endif %}
                {% if user.school %}• {{ user.school.name }}{% endif %}
            </p>
        </div>
    </div>

    <!-- Reset Password Form -->
    <form method="POST">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        
        <div class="space-y-5">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Password Baru <span class="text-red-500">*</span></label>
                <input type="password" name="new_password" id="new_password" required minlength="6"
                       class="w-full px-3 py-2 rounded-lg border border-gray-200 text-sm focus:border-primary-400 focus:ring-1 focus:ring-primary-200 outline-none">
                <p class="text-xs text-gray-500 mt-1">Minimal 6 karakter</p>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Konfirmasi Password <span class="text-red-500">*</span></label>
                <input type="password" name="confirm_password" id="confirm_password" required minlength="6"
                       class="w-full px-3 py-2 rounded-lg border border-gray-200 text-sm focus:border-primary-400 focus:ring-1 focus:ring-primary-200 outline-none">
            </div>
        </div>

        <!-- Password Match Indicator -->
        <div id="matchIndicator" class="mt-4 hidden">
            <p class="text-sm font-medium" id="matchText"></p>
        </div>

        <!-- Actions -->
        <div class="mt-6 flex gap-3">
            <button type="submit" class="flex-1 px-4 py-2.5 bg-primary-600 text-white rounded-lg text-sm font-medium hover:bg-primary-700 transition-colors">
                Reset Password
            </button>
            <a href="{{ url_for('superadmin.users') }}" 
               class="px-4 py-2.5 bg-white border border-gray-200 text-gray-600 rounded-lg text-sm font-medium hover:bg-gray-50 transition-colors text-center">
                Batal
            </a>
        </div>
    </form>

    <!-- Warning -->
    <div class="mt-6 p-4 bg-yellow-50 rounded-lg border border-yellow-100">
        <div class="flex gap-2">
            <svg class="w-5 h-5 text-yellow-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
            </svg>
            <div>
                <p class="text-sm font-medium text-yellow-800">Perhatian</p>
                <p class="text-xs text-yellow-700 mt-1">
                    Setelah password direset, pengguna harus menggunakan password baru untuk login. 
                    Pastikan untuk memberikan password baru kepada pengguna secara aman.
                </p>
            </div>
        </div>
    </div>
</div>

<script>
const newPassword = document.getElementById('new_password');
const confirmPassword = document.getElementById('confirm_password');
const indicator = document.getElementById('matchIndicator');
const matchText = document.getElementById('matchText');

function checkPasswordMatch() {
    if (confirmPassword.value === '') {
        indicator.classList.add('hidden');
        return;
    }
    
    indicator.classList.remove('hidden');
    if (newPassword.value === confirmPassword.value) {
        matchText.innerHTML = '<span class="text-green-600">✓ Password cocok</span>';
    } else {
        matchText.innerHTML = '<span class="text-red-600">✗ Password tidak cocok</span>';
    }
}

newPassword.addEventListener('input', checkPasswordMatch);
confirmPassword.addEventListener('input', checkPasswordMatch);
</script>
{% endblock %}