{% extends 'layouts/main.html' %}

{% block content %}

<div class="container mt-5">
    <h1 class="mb-4">Account Einstellungen👤</h1>

    <div class="card mb-4">
        <div class="card-body">
            <h5 class="card-title">Profilbild</h5>
            <div class="mb-3 profile-image-container" id="profileImageContainer">
                <img src="{{ profile_image_url }}" alt="Profile Image" class="profile-image" id="profileImage">
                <div class="profile-image-overlay" id="profileImageOverlay">
                    <span>Profilbild bearbeiten</span>
                </div>
            </div>
            <div class="mb-3">
                <form id="uploadForm" action="/upload" method="POST" enctype="multipart/form-data">
                    <input type="file" class="form-control-file" id="profileImageInput" name="file" style="display: none;">
                </form>
            </div>
        </div>
    </div>

    <form action="/profile" method="POST">
        <div class="form-group mb-3">
            <label for="newName">Neuer Name:</label>
            <input type="text" class="form-control {% if errors.get('newName') %} is-invalid {% endif %}" id="newName" name="newName" value="{{name}}">
            <div class="invalid-feedback">
                {{ errors.get('newName', '') }}
            </div>
        </div>

        <div class="form-group mb-3">
            <label for="newEmail">Neue E-Mail:</label>
            <input type="email" class="form-control {% if errors.get('newEmail') %} is-invalid {% endif %}" id="newEmail" name="newEmail" value="{{email}}">
            <div class="invalid-feedback">
                {{ errors.get('newEmail', '') }}
            </div>
        </div>

        <div class="form-group mb-5">
            <label for="newPassword">Neues Passwort:</label>
            <input type="text" class="form-control {% if errors.get('newPassword') %} is-invalid {% endif %}" id="newPassword" name="newPassword">
            <div class="invalid-feedback">
                {{ errors.get('newPassword', '') }}
            </div>
        </div>

        <div class="form-group mb-3">
            <label for="oldPassword">Altes Passwort:</label>
            <input type="password" class="form-control {% if errors.get('oldPassword') %} is-invalid {% endif %}" id="oldPassword" name="oldPassword">
            <div class="invalid-feedback">
                {{ errors.get('oldPassword', '') }}
            </div>
        </div>

        <button type="submit" class="btn btn-primary">Änderungen speichern</button>
    </form>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        // Get elements
        const profileImage = document.getElementById("profileImage");
        const profileImageOverlay = document.getElementById("profileImageOverlay");
        const profileImageInput = document.getElementById("profileImageInput");
        const uploadForm = document.getElementById("uploadForm");

        // Open file input when profile image is clicked
        profileImageOverlay.addEventListener("click", function() {
            profileImageInput.click();
        });

        // Change profile image when a new file is selected
        profileImageInput.addEventListener("change", function() {
            const file = this.files[0];
            const reader = new FileReader();

            reader.onload = function(e) {
                profileImage.src = e.target.result;
            };

            reader.readAsDataURL(file);

            // Submit the form
            uploadForm.submit();
        });
    });
</script>

{% endblock %}