{% extends 'base.html' %}

{% block title %}Profile{% endblock %}

{% block content %}

<h1>User Profile</h1>
    
<!-- Display user's profile photo -->
<div>
    <img src="{{ user_info['picture'] }}" alt="Profile Photo" style="width: 150px; height: 150px; border-radius: 50%;">
</div>

<form id="profileForm">
    <table>
        {% for key, value in user_info.items() %}
        <tr>
            <td><strong>{{ key.replace('_', ' ').title() }}:</strong></td>
            <td><input type="text" id="{{ key }}" name="{{ key }}" value="{{ value }}" readonly></td>
        </tr>
        {% endfor %}
        <tr>
            <td colspan="2">
                <button type="button" id="edit-btn" onclick="toggleEdit()">Edit</button>
            </td>
        </tr>
    </table>
</form>
<p id="message"></p>
    
{% endblock %}

{% block scripts %}
<script>
    function toggleEdit() {
        const editableFields = ['name', 'given_name', 'family_name']; // Define editable fields
        const inputs = document.querySelectorAll('form#profileForm input');
        const editBtn = document.getElementById('edit-btn');
        const isReadOnly = inputs[0].readOnly;

        if (isReadOnly) {
            // Enable only the editable inputs and store original values
            inputs.forEach(input => {
                if (editableFields.includes(input.name)) {
                    input.readOnly = false;
                    input.dataset.originalValue = input.value; // Store original value
                    input.addEventListener('input', checkForChanges); // Attach change detection
                }
            });
            editBtn.innerText = 'Update';
            editBtn.disabled = true; // Disable until change is detected
        } else {
            // Collect data and send update request
            const data = {};
            inputs.forEach(input => {
                if (editableFields.includes(input.name)) {
                    data[input.name] = input.value;
                }
            });

            fetch('/update_profile', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify(data)
            }).then(response => response.json())
                .then(data => {
                    if (data.status === 'success') {
                        document.getElementById('message').innerText = data.message;
                        inputs.forEach(input => {
                            if (editableFields.includes(input.name)) {
                                input.readOnly = true;
                                input.removeEventListener('input', checkForChanges); // Remove event listener
                            }
                        });
                        editBtn.innerText = 'Edit';
                        editBtn.disabled = false;
                    } else {
                        document.getElementById('message').innerText = 'Update failed.';
                    }
                }).catch(error => {
                    document.getElementById('message').innerText = 'Error: ' + error;
                });
        }
    }

    function checkForChanges() {
        const editableFields = ['name', 'given_name', 'family_name'];
        const inputs = document.querySelectorAll('form#profileForm input');
        const editBtn = document.getElementById('edit-btn');
        let hasChanges = false;

        inputs.forEach(input => {
            if (editableFields.includes(input.name) && input.value !== input.dataset.originalValue) {
                hasChanges = true;
            }
        });

        editBtn.disabled = !hasChanges; // Enable button only if a change is detected
    }
</script>
{% endblock %}