{% extends 'base.html' %}

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

{% block mystyle %}
<style>
    /* Profile Card Styling */
    .profile-photo {
        width: 150px;
        height: 150px;
        border-radius: 50%;
    }

    /* Styling for form */
    .table th, .table td {
        vertical-align: middle;
    }

    /* Styling for readonly input fields */
    form#profileForm input:read-only {
        background-color: #f8f9fa;  /* Light gray background for readonly fields */
        cursor: not-allowed;  /* Change cursor to indicate it's non-editable */
    }

    /* Custom alert styling */
    .alert {
        margin-top: 20px;
        display: none;
    }
</style>
{% endblock %}

{% block content %}

<div class="container2">

    <!-- Breadcrumb Navigation -->
    <div class="breadcrumb-container">
        <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Profile</li>
        </ol>
        </nav>
    </div>

    <div class="row">
        <!-- Profile Photo -->
        <div class="col-md-4 text-center">
            <img src="{{ user_info['picture'] }}" alt="Profile Photo" class="img-fluid rounded-circle mb-3" style="width: 150px; height: 150px;">
            <h4>{{ user_info['name'] }}</h4>
            <p>{{ user_info['given_name'] }} {{ user_info['family_name'] }}</p>
        </div>

        <!-- Profile Form -->
        <div class="col-md-8">
            <form id="profileForm" class="table-responsive">
                <table class="table table-striped">
                    <tbody>
                        {% 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 }}" class="form-control" 
                            readonly data-original-value="{{ value }}">
                            </td>
                        </tr>
                        {% endfor %}
                        <tr>
                            <td colspan="2">
                                <button type="button" id="edit-btn" class="btn btn-primary" onclick="toggleEdit()">Edit</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </form>

            <!-- Success/Failure Message -->
            <div id="message-container" class="alert" role="alert"></div>
        </div>
    </div>
</div>

<div class="breaker41"></div>

{% endblock %}

{% block myscript %}

<script>
    
    // List of fields that should be editable when "Edit" is clicked
    const editableFields = ['name', 'given_name', 'family_name'];

    function toggleEdit() {
        const inputs = document.querySelectorAll('form#profileForm input');
        const editBtn = document.getElementById('edit-btn');

        // Check the readOnly state of the first editable field in the editableFields array
        const isReadOnly = document.getElementById(editableFields[0]).readOnly;

        if (isReadOnly) {
            // Enable only editable fields for editing and store original values
            inputs.forEach(input => {
                if (editableFields.includes(input.name)) {
                    input.readOnly = false;  // Enable input field for editing
                    input.addEventListener('input', checkForChanges);  // Attach change detection
                    input.dataset.originalValue = input.value;  // Store original value when editing starts
                }
            });

            // Change button to "Update" and disable it initially
            editBtn.innerText = 'Update';
            editBtn.disabled = true;
        } else {
            // Collect data to send
            const data = {};
            inputs.forEach(input => {
                if (editableFields.includes(input.name) && input.value !== input.dataset.originalValue) {
                    data[input.name] = input.value;
                }
            });

            // Get CSRF token
            const csrfTokenMeta = document.querySelector('meta[name="csrf-token"]');
            const csrfToken = csrfTokenMeta ? csrfTokenMeta.getAttribute('content') : '';

            // Send update request
            if (Object.keys(data).length > 0) {
                fetch('/update_profile', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': csrfToken
                    },
                    body: JSON.stringify(data)
                }).then(response => response.json())
                    .then(data => {
                        // Show success or error message based on the response
                        showMessage(data.status === 'success', data.message);

                        // After successful update, return to read-only mode
                        inputs.forEach(input => {
                            if (editableFields.includes(input.name)) {
                                input.readOnly = true;
                                input.removeEventListener('input', checkForChanges);  // Remove change detection
                                input.dataset.originalValue = input.value;  // Update original value after saving
                            }
                        });
                        editBtn.innerText = 'Edit';
                        editBtn.disabled = false;
                    }).catch(error => {
                        showMessage(false, 'Error: ' + error);
                    });
            }
        }
    }

    // Show success/error message with Bootstrap alert
    function showMessage(isSuccess, message) {
        const messageContainer = document.getElementById('message-container');
        messageContainer.innerText = message;
        messageContainer.className = isSuccess ? 'alert alert-success' : 'alert alert-danger';
        messageContainer.style.display = 'block';  // Show the message
        setTimeout(() => {
            messageContainer.style.display = 'none';  // Hide after 5 seconds
        }, 5000);
    }

    // Detect changes to enable the "Update" button
    function checkForChanges() {
        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;
            }
        });

        // Enable the "Update" button if any changes are detected
        editBtn.disabled = !hasChanges;
    }

</script>
{% endblock %}