{% extends "base.html" %}

{% block title %}Ubah Password | D'Tector.AI{% endblock %}

{% block extra_css %}
<style>
    .password-container {
        min-height: 100vh;
        background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
        padding: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .password-card {
        max-width: 450px;
        width: 100%;
        background: #1e293b;
        border-radius: 2rem;
        border: 1px solid #334155;
        padding: 2rem;
    }
    .password-header { text-align: center; margin-bottom: 2rem; }
    .password-icon { width: 70px; height: 70px; background: linear-gradient(135deg, #f59e0b, #d97706); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }
    .password-icon i { font-size: 2rem; color: white; }
    .btn-change { width: 100%; padding: 0.875rem; background: linear-gradient(135deg, #3b82f6, #2563eb); border: none; border-radius: 0.75rem; color: white; font-weight: 600; cursor: pointer; margin-bottom: 1rem; }
    .btn-change:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -5px #3b82f6; }
    .btn-back { display: inline-flex; align-items: center; gap: 0.5rem; background: #334155; color: white; padding: 0.75rem 1.5rem; border-radius: 0.75rem; text-decoration: none; width: 100%; justify-content: center; }
</style>
{% endblock %}

{% block content %}
<div class="password-container">
    <div class="password-card">
        <div class="password-header">
            <div class="password-icon"><i class="fas fa-key"></i></div>
            <h2>Ubah Password</h2>
            <p>Masukkan password lama dan password baru Anda</p>
        </div>

        <form id="changePasswordForm">
            <div class="form-group"><label>Password Lama</label><input type="password" id="oldPassword" placeholder="Masukkan password lama" required></div>
            <div class="form-group"><label>Password Baru</label><input type="password" id="newPassword" placeholder="Minimal 6 karakter" required></div>
            <div class="form-group"><label>Konfirmasi Password Baru</label><input type="password" id="confirmPassword" placeholder="Ulangi password baru" required></div>
            <button type="submit" class="btn-change"><i class="fas fa-save"></i> Simpan Password</button>
            <a href="/profile" class="btn-back"><i class="fas fa-arrow-left"></i> Kembali ke Profil</a>
        </form>
    </div>
</div>

<script>
    document.getElementById('changePasswordForm').addEventListener('submit', async function(e) {
        e.preventDefault();
        
        const oldPassword = document.getElementById('oldPassword').value;
        const newPassword = document.getElementById('newPassword').value;
        const confirmPassword = document.getElementById('confirmPassword').value;
        
        if (newPassword !== confirmPassword) { alert('Password baru tidak cocok!'); return; }
        if (newPassword.length < 6) { alert('Password minimal 6 karakter'); return; }
        
        const btn = e.target.querySelector('button');
        btn.disabled = true;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Memproses...';
        
        try {
            const response = await fetch('/api/auth/change-password', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ old_password: oldPassword, new_password: newPassword })
            });
            const result = await response.json();
            
            if (result.success) {
                alert('Password berhasil diubah!');
                window.location.href = '/profile';
            } else {
                alert('Error: ' + (result.error || 'Gagal mengubah password'));
                btn.disabled = false;
                btn.innerHTML = '<i class="fas fa-save"></i> Simpan Password';
            }
        } catch (error) {
            alert('Terjadi kesalahan: ' + error.message);
            btn.disabled = false;
            btn.innerHTML = '<i class="fas fa-save"></i> Simpan Password';
        }
    });
</script>
{% endblock %}