{% extends 'main/base.html' %}
{% load i18n %}

{% block title %}{% trans "Change Login Password" %} - ODEON{% endblock %}

{% block top_icon %}
    <a href="/personal/" class="top-icon-btn">👤</a>
{% endblock %}

{% block content %}
    <div class="content-card section-inner" style="max-width: 520px; margin: 0 auto; position: relative;">
        {% include 'main/_subheader.html' with title=_("Change Login Password") back="/personal/" %}

        {% if success %}
        <div style="text-align: center;">
            <div style="width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 1.5rem; display: grid; place-items: center; background: rgba(34, 197, 94, 0.12); border: 2px solid rgba(34, 197, 94, 0.3); color: #34d399; font-size: 2rem;">✓</div>
            <h3 style="margin: 0 0 0.5rem; color: var(--text-main);">{% trans "Password Updated" %}</h3>
            <p style="margin: 0 0 2rem; color: var(--text-muted);">{% trans "Your login password has been changed successfully." %}</p>
            <a href="/personal/" class="button primary" style="display: inline-flex;">{% trans "Back to Personal Center" %}</a>
        </div>
        {% else %}
        {% if error %}
        <div style="padding: 0.85rem 1rem; border-radius: 12px; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); color: #f87171; font-size: 0.9rem; margin-bottom: 1.25rem;">{{ error }}</div>
        {% endif %}

        <form method="post" action="{% url 'change_password' %}">
            {% csrf_token %}

            <!-- Phone number (read-only) -->
            <div style="display: flex; align-items: center; gap: 1rem; padding: 1rem 0.25rem; border-bottom: 1px solid rgba(255,255,255,0.08);">
                <span style="min-width: 120px; color: var(--text-main); font-weight: 700; font-size: 0.95rem;">{% trans "Phone Number" %}</span>
                <span style="color: var(--text-muted); font-size: 0.95rem;">{{ masked_phone }}</span>
            </div>

            <!-- Graphic verification code -->
            <div style="display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem; margin-top: 1rem; border-radius: 12px; background: var(--bg-elev); border: var(--border-soft);">
                <input name="captcha" type="text" required autocomplete="off" placeholder="{% trans 'Please enter the graphic verification code' %}"
                       style="flex: 1; min-width: 0; padding: 0.5rem 0; border: none; background: transparent; color: var(--text-main); font-size: 0.9rem; outline: none;" />
                <div aria-label="{% trans 'Graphic verification code' %}" title="{% trans 'Graphic verification code' %}"
                     style="display: grid; place-items: center; padding: 0.4rem 1rem; border-radius: 8px; background: #0b1220; border: 1px solid rgba(148,163,184,0.2); color: #fbbf24; font-weight: 800; letter-spacing: 0.3em; font-style: italic; font-size: 1.2rem; user-select: none;">{{ captcha }}</div>
            </div>

            <!-- Sms code + Send out -->
            <div style="display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem; margin-top: 0.75rem; border-radius: 12px; background: var(--bg-elev); border: var(--border-soft);">
                <span style="min-width: 90px; color: var(--text-main); font-weight: 700; font-size: 0.95rem;">{% trans "Sms Code" %}</span>
                <input id="sms_code" name="sms_code" type="text" inputmode="numeric" required autocomplete="one-time-code" placeholder="{% trans 'Enter the 6-digit code' %}"
                       style="flex: 1; min-width: 0; padding: 0.5rem 0; border: none; background: transparent; color: var(--text-main); font-size: 0.95rem; outline: none;" />
                <button id="send-code" type="button" onclick="sendCode()"
                        style="white-space: nowrap; padding: 0.5rem 0.9rem; border-radius: 8px; border: none; background: #22c55e; color: #04210f; font-weight: 700; font-size: 0.85rem; cursor: pointer;">{% trans "Send out" %}</button>
            </div>
            <p id="code-hint" style="margin: 0.4rem 1rem 0; color: var(--text-muted); font-size: 0.8rem; min-height: 1rem;"></p>

            <!-- Old password -->
            <div style="display: flex; align-items: center; gap: 1rem; padding: 1rem 0.25rem; margin-top: 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.08);">
                <label for="current_password" style="min-width: 120px; color: var(--text-main); font-weight: 700; font-size: 0.95rem;">{% trans "Old Password" %}</label>
                <input type="password" id="current_password" name="current_password" required placeholder="{% trans 'Please enter old password' %}"
                       style="flex: 1; min-width: 0; padding: 0.5rem 0; border: none; background: transparent; color: var(--text-main); font-size: 0.95rem; outline: none;" />
            </div>

            <!-- New password -->
            <div style="display: flex; align-items: center; gap: 1rem; padding: 1rem 0.25rem; border-bottom: 1px solid rgba(255,255,255,0.08);">
                <label for="new_password" style="min-width: 120px; color: var(--text-main); font-weight: 700; font-size: 0.95rem;">{% trans "New Password" %}</label>
                <input type="password" id="new_password" name="new_password" required placeholder="{% trans 'Please enter a new password' %}"
                       style="flex: 1; min-width: 0; padding: 0.5rem 0; border: none; background: transparent; color: var(--text-main); font-size: 0.95rem; outline: none;" />
            </div>

            <!-- Confirm password -->
            <div style="display: flex; align-items: center; gap: 1rem; padding: 1rem 0.25rem; border-bottom: 1px solid rgba(255,255,255,0.08);">
                <label for="confirm_password" style="min-width: 120px; color: var(--text-main); font-weight: 700; font-size: 0.95rem;">{% trans "Confirm Password" %}</label>
                <input type="password" id="confirm_password" name="confirm_password" required placeholder="{% trans 'Please confirm new password' %}"
                       style="flex: 1; min-width: 0; padding: 0.5rem 0; border: none; background: transparent; color: var(--text-main); font-size: 0.95rem; outline: none;" />
            </div>

            <button type="submit"
                    style="width: 100%; padding: 1rem; margin-top: 2rem; border-radius: 999px; background: #38bdf8; border: none; color: #fff; font-weight: 700; font-size: 1rem; cursor: pointer;">{% trans "Confirm The Changes" %}</button>
        </form>
        {% endif %}
    </div>

    <script>
        function getCookie(name) {
            const v = document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)');
            return v ? v.pop() : '';
        }
        function sendCode() {
            const btn = document.getElementById('send-code');
            const hint = document.getElementById('code-hint');
            btn.disabled = true;
            fetch('/api/send-code/', {
                method: 'POST',
                headers: { 'X-CSRFToken': getCookie('csrftoken') },
                credentials: 'same-origin'
            }).then(function (r) { return r.json(); }).then(function (data) {
                if (data.debug_code) {
                    hint.style.color = '#34d399';
                    hint.textContent = 'Verification code sent (dev): ' + data.debug_code;
                    document.getElementById('sms_code').value = data.debug_code;
                } else {
                    hint.style.color = 'var(--text-muted)';
                    hint.textContent = 'A verification code has been sent to your phone.';
                }
            }).catch(function () {
                hint.style.color = '#f87171';
                hint.textContent = 'Unable to send code. Please try again.';
            }).finally(function () {
                setTimeout(function () { btn.disabled = false; }, 1500);
            });
        }
    </script>
{% endblock %}