{% extends "base.html" %} 
{% block content %}
{% load static %}
<div class="container2 d-flex justify-content-center align-items-center">
    <div class="justify-content-center" style="width: 48rem;">
        {% if messages %}
            <div class="messages">
                {% for message in messages %}
                    <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                        {{ message }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                {% endfor %}
            </div>
        {% endif %}
        <div class="card-body">
            <!-- 更新個人資料 -->
            <div id="profile-section">
                <h3>Update Profile</h3>
                <form method="post" action="">
                    {% csrf_token %}
                    {{ profile_form.as_p }}
                    <button type="submit" name="update_profile" class="btn btn-primary">Save Changes</button>
                </form>
                <button class="btn btn-warning mt-3" id="change-password-btn">Change Password</button>
            </div>

            <!-- 更改密碼 -->
            <div id="password-section" style="display: none;">
                <h3 class="text-center mb-4">Change Password</h3>
                <form method="post" action="">
                    {% csrf_token %}
                    <div class="mb-3">
                        {{ password_form.old_password.label_tag }}
                        {{ password_form.old_password }}
                    </div>
                    <div class="mb-3">
                        {{ password_form.new_password1.label_tag }}
                        {{ password_form.new_password1 }}
                    </div>
                    <div class="mb-3">
                        {{ password_form.new_password2.label_tag }}
                        {{ password_form.new_password2 }}
                    </div>

                    <!-- 密碼要求 -->
                    <ul class="text-muted small">
                        <li>Your password can’t be too similar to your other personal information.</li>
                        <li>Your password must contain at least 8 characters.</li>
                        <li>Your password can’t be a commonly used password.</li>
                        <li>Your password can’t be entirely numeric.</li>
                    </ul>

                    <!-- 按鈕 -->
                    <div class="d-flex justify-content-center mt-4">
                        <button type="submit" name="change_password" class="btn btn-warning">Change Password</button><br>
                        <button type="button" class="btn btn-secondary" onclick="history.back();">Cancel</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    // 切換視窗的邏輯
    document.addEventListener("DOMContentLoaded", function () {
        const profileSection = document.getElementById("profile-section");
        const passwordSection = document.getElementById("password-section");
        const changePasswordBtn = document.getElementById("change-password-btn");
        const cancelBtn = document.getElementById("cancel-btn");

        // 點擊「更改密碼」按鈕，切換到更改密碼視窗
        changePasswordBtn.addEventListener("click", function () {
            profileSection.style.display = "none";
            passwordSection.style.display = "block";
        });

        // 點擊「取消」按鈕，返回更新個人資料視窗
        cancelBtn.addEventListener("click", function () {
            passwordSection.style.display = "none";
            profileSection.style.display = "block";
        });
    });
</script>
<style>
    .card {
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }
    .card-body h3 {
        font-weight: bold;
    }
    .btn-warning {
        background-color: #ffc107;
        border-color: #ffc107;
    }
    .btn-warning:hover {
        background-color: #e0a800;
        border-color: #d39e00;
    }
</style>
{% endblock %}