{% extends "Profile/show/layout.html.twig" %}

{% block schemaBlock %}
    {% if user.publicProfile %}
        <script type="application/ld+json">
            {
                "@context": "https://schema.org",
                "@type": "ProfilePage",
                "dateCreated": "{{ user.createdAt | date() }}",
                "mainEntity": {
                    "@type": "Person",
                    "name": "{{ user.firstName ~ ' ' ~ user.lastName }}",
                    "email": "{{ user.email }}",
                    "identifier": "{{ user.email }}",
                    "interactionStatistic": [{
                        "@type": "InteractionCounter",
                        "interactionType": "https://schema.org/FollowAction",
                        "userInteractionCount": {{ user.visitors }}
                        },{
                        "@type": "InteractionCounter",
                        "interactionType": "https://schema.org/LikeAction",
                        "userInteractionCount": {{ user.favouriteResearches | length}}
                    }],
                    "agentInteractionStatistic": {
                        "@type": "InteractionCounter",
                        "interactionType": "https://schema.org/WriteAction",
                        "userInteractionCount": {{ user.communityQuestions | length + user.communityQuestionDiscussions | length + matchedResearches | length }}
                    },
                    "description": "{% if user.bio is not null %}{{ user.bio | e }}{% else %}{{ user.firstname ~ ' ' ~ user.lastname }}{% endif %}",
                    "image": "{{ asset(user.uploadPath ~ '/' ~ user.image) }}",
                    "sameAs": [
                    "{{user.facebookUrl}}",
                    "{{user.linkedinUrl}}"
                    ]
                }
            }
        </script>
    {% endif %}
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        .editable-field {
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        .select2-container--open { z-index: 200000 !important; }
        .edit-btn {
            background: none;
            border: none;
            color: #007bff;
            cursor: pointer;
            padding: 2px 6px;
            font-size: 14px;
            opacity: 0.6;
            transition: opacity 0.2s;
        }
        .edit-btn:hover {
            opacity: 1;
        }
        .profile-image-container {
            position: relative;
            display: inline-block;
        }
        .profile-image-edit {
            position: absolute;
            bottom: 10px;
            right: 10px;
            background: rgba(0,0,0,0.7);
            color: white;
            border: none;
            border-radius: 50%;
            width: 36px;
            height: 36px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .profile-image-edit:hover {
            background: rgba(0,0,0,0.9);
        }
        .edit-modal .modal-body {
            padding: 20px;
        }
        .edit-modal .form-group {
            margin-bottom: 15px;
        }
        .edit-modal label {
            font-weight: bold;
            margin-bottom: 5px;
            display: block;
        }
        .edit-modal input, .edit-modal textarea, .edit-modal select {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .edit-modal textarea {
            min-height: 100px;
            resize: vertical;
        }
        .privacy-toggle {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 0;
        }
        .privacy-toggle .switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 26px;
        }
        .privacy-toggle .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .privacy-toggle .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 26px;
        }
        .privacy-toggle .slider:before {
            position: absolute;
            content: "";
            height: 20px;
            width: 20px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        .privacy-toggle input:checked + .slider {
            background-color: #28a745;
        }
        .privacy-toggle input:checked + .slider:before {
            transform: translateX(24px);
        }
        .alert-inline {
            padding: 8px 12px;
            margin-top: 10px;
            border-radius: 4px;
            font-size: 14px;
        }
        .const-height {
            position: relative;
        }

        /* Follow Button & Social Stats on Profile */
        .profile-social-bar {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-top: 16px;
            padding: 12px 0;
            flex-wrap: wrap;
        }
        .profile-follow-btn {
            padding: 8px 24px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 500;
            border: 2px solid #00A550;
            cursor: pointer;
            transition: all 0.3s;
        }
        .profile-follow-btn.follow {
            background: #00A550;
            color: white;
        }
        .profile-follow-btn.follow:hover {
            background: #008844;
            border-color: #008844;
        }
        .profile-follow-btn.following {
            background: white;
            color: #00A550;
        }
        .profile-follow-btn.following:hover {
            background: #ffe0e0;
            color: #dc3545;
            border-color: #dc3545;
        }
        .profile-social-stats {
            display: flex;
            gap: 16px;
        }
        .profile-social-stats a {
            color: #333;
            text-decoration: none;
            font-size: 14px;
            transition: color 0.3s;
        }
        .profile-social-stats a:hover {
            color: #00A550;
        }
        .profile-social-stats a strong {
            font-size: 16px;
            margin-right: 4px;
        }
    </style>
{% endblock %}

{% block page %}

    <h1> {{ 'profile.profile3'|trans({}, 'FOSUserBundle') }} {{ user.firstName ~ ' ' ~ user.lastName }}</h1>
    <hr/>

    <div class="row">
        <div class="col-md-4 col-xs-12">
            <div class="const-height profile-image-container">
                <img src='{{ asset(user.uploadPath ~ '/' ~ user.image) }}' alt='Profile Picture' class='img-rounded img-responsive full-width-image' id="profile-image">
                {% if app.user is not null and app.user.id == user.id %}
                    <button type="button" class="profile-image-edit" data-toggle="modal" data-target="#imageEditModal" title="{{ 'profile.inline_edit.edit_image'|trans({}, 'FOSUserBundle') }}">
                        <i class="fa fa-camera"></i>
                    </button>
                {% endif %}
            </div>
        </div>

        <div class="col-md-8 col-xs-12">
            <div class="shadow bio mx-5">        
                <blockquote>
                    <h3 class="editable-field">
                        <span id="display-name">{{ user.firstname ~ " " ~ user.lastname }}</span>
                        {% if app.user is not null and app.user.id == user.id %}
                            <button type="button" class="edit-btn" data-toggle="modal" data-target="#nameEditModal" title="{{ 'profile.inline_edit.edit'|trans({}, 'FOSUserBundle') }}">
                                <i class="fa fa-pencil"></i>
                            </button>
                        {% endif %}
                    </h3>
                    {% if user.bio is not null or (app.user is not null and app.user.id == user.id) %}
                    <div class="editable-field">
                        {% if user.bio is not null %}
                            <p id="display-bio">{{ user.bio }}</p>
                        {% endif %}
                        {% if app.user is not null and app.user.id == user.id %}
                            <button type="button" class="edit-btn" data-toggle="modal" data-target="#bioEditModal" title="{{ 'profile.inline_edit.edit'|trans({}, 'FOSUserBundle') }}">
                                <i class="fa fa-pencil"></i>
                            </button>
                        {% endif %}
                    </div>
                    {% endif %}
                </blockquote>
            </div>

            {# Follow Button & Social Stats #}
            <div class="profile-social-bar" style="margin: 12px 15px 0;">
                {% if app.user is not null and app.user.id != user.id %}
                    <button class="profile-follow-btn {{ app.user.isFollowing(user) ? 'following' : 'follow' }}"
                            id="profileFollowBtn"
                            data-user-id="{{ user.id }}"
                            onclick="toggleProfileFollow(this)">
                        {% if app.user.isFollowing(user) %}
                            <i class="fa fa-check"></i> {{ 'social.following'|trans({}, 'Social') }}
                        {% else %}
                            <i class="fa fa-plus"></i> {{ 'social.follow'|trans({}, 'Social') }}
                        {% endif %}
                    </button>
                {% endif %}
                <div class="profile-social-stats">
                    <a href="{{ path('user_followers', {'username': user.username}) }}">
                        <strong id="followersCountDisplay">{{ user.followersCount }}</strong> {{ 'social.followers'|trans({}, 'Social') }}
                    </a>
                    <a href="{{ path('user_following', {'username': user.username}) }}">
                        <strong>{{ user.followingCount }}</strong> {{ 'social.following_list'|trans({}, 'Social') }}
                    </a>
                </div>
            </div>
            
            {# Language Preference - Only visible to profile owner #}
            {% if app.user is not null and app.user.id == user.id %}
                <div class="shadow mx-5" style="margin-top: 20px; padding: 15px;">
                    <h4><i class="fa fa-globe"></i> {{ 'profile.inline_edit.language_preference'|trans({}, 'FOSUserBundle') }}</h4>
                    <p style="font-size:13px;color:#666;margin-bottom:10px;">{{ 'profile.inline_edit.language_preference_desc'|trans({}, 'FOSUserBundle') }}</p>
                    <div style="display:flex;gap:10px;align-items:center;">
                        <select id="preferredLocaleSelect" style="padding:8px 16px;border:1px solid #ddd;border-radius:4px;font-size:14px;min-width:160px;">
                            <option value="ar" {{ user.preferredLocale == 'ar' ? 'selected' : '' }}>العربية (Arabic)</option>
                            <option value="en" {{ user.preferredLocale == 'en' ? 'selected' : '' }}>English</option>
                        </select>
                        <span id="locale-save-status" style="font-size:13px;color:#28a745;display:none;">✓</span>
                    </div>
                </div>
            {% endif %}

            {# Newsletter Recommendations - Only visible to profile owner #}
            {% if app.user is not null and app.user.id == user.id %}
                <div class="shadow mx-5" style="margin-top: 20px; padding: 15px;">
                    <h4><i class="fa fa-envelope-o"></i> {{ 'profile.inline_edit.newsletter_settings'|trans({}, 'FOSUserBundle') }}</h4>
                    <p style="font-size:13px;color:#666;margin-bottom:10px;">{{ 'profile.inline_edit.newsletter_desc'|trans({}, 'FOSUserBundle') }}</p>
                    <div class="privacy-toggle">
                        <label class="switch">
                            <input type="checkbox" id="newsletterToggle" {{ user.recommendationNewsletterEnabled ? 'checked' : '' }}>
                            <span class="slider"></span>
                        </label>
                        <span id="newsletter-status">
                            {% if user.recommendationNewsletterEnabled %}
                                {{ 'profile.inline_edit.newsletter_enabled'|trans({}, 'FOSUserBundle') }}
                            {% else %}
                                {{ 'profile.inline_edit.newsletter_disabled'|trans({}, 'FOSUserBundle') }}
                            {% endif %}
                        </span>
                    </div>
                </div>
            {% endif %}

            {# Privacy Settings - Only visible to profile owner #}
            {% if app.user is not null and app.user.id == user.id %}
                <div class="shadow mx-5" style="margin-top: 20px; padding: 15px;">
                    <h4><i class="fa fa-lock"></i> {{ 'profile.inline_edit.privacy_settings'|trans({}, 'FOSUserBundle') }}</h4>
                    <div class="privacy-toggle">
                        <label class="switch">
                            <input type="checkbox" id="publicProfileToggle" {{ user.publicProfile ? 'checked' : '' }}>
                            <span class="slider"></span>
                        </label>
                        <span id="privacy-status">
                            {% if user.publicProfile %}
                                {{ 'profile.inline_edit.profile_public'|trans({}, 'FOSUserBundle') }}
                            {% else %}
                                {{ 'profile.inline_edit.profile_private'|trans({}, 'FOSUserBundle') }}
                            {% endif %}
                        </span>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>

    {% set isOwner = app.user is not null and app.user.id == user.id %}
    {% set hasSocialLinks = user.facebookUrl is not null or user.linkedinUrl is not null %}
    <div class="row">
        {% if isOwner or hasSocialLinks %}
        <div class="col-md-4 col-xs-12 section">
            <h3>{{ 'profile.social_account'|trans({}, 'FOSUserBundle') }}
                {% if isOwner %}
                    <button type="button" class="edit-btn" data-toggle="modal" data-target="#socialEditModal" title="{{ 'profile.inline_edit.edit'|trans({}, 'FOSUserBundle') }}">
                        <i class="fa fa-pencil"></i>
                    </button>
                {% endif %}
            </h3>
            
            {% if isOwner %}
            <div class="research-card">
                <i class="fa fa-envelope fa-lg"></i> <a  href="mailto:{{ user.email}}" style="flex-grow:1"> {{ user.email}} </a> <br/>
            </div>
            {% endif %}

            {% if user.facebookUrl is not null %}
                <div class="research-card">
                    <i class="fa fa-facebook fa-lg"></i> <a href="{{user.facebookUrl}}" style="flex-grow:1"> {{ user.facebookUrl }} </a> <br/>
                </div>
            {% endif %}   

            {% if user.linkedinUrl is not null %}
                <div class="research-card">
                    <i class="fa fa-linkedin fa-lg"></i> <a  href="{{user.linkedinUrl}}" style="flex-grow:1"> {{ user.linkedinUrl }} </a> <br/>
                </div>
            {% endif %}  
        </div>
        {% endif %}
        <div class="col-md-8 col-xs-12 section">
            <h3>{{ 'profile.interests'|trans({}, 'FOSUserBundle') }}
                {% if app.user is not null and app.user.id == user.id %}
                    <button type="button" class="edit-btn" data-toggle="modal" data-target="#interestsEditModal" title="{{ 'profile.inline_edit.edit'|trans({}, 'FOSUserBundle') }}">
                        <i class="fa fa-pencil"></i>
                    </button>
                {% endif %}
            </h3>
            
            <div id="interests-display">
            {% if user.interests|length > 0 %}
                {% for interest in user.interests %}
                    <span class="tm-tag"> {{ interest}}</span> 
                {% endfor %}
            {% else %}
                <h3>{{ 'profile.notFound'|trans({}, 'FOSUserBundle') }}</h3>
            {% endif %} 
            </div>

            {# Activity-based interests from research views - only visible to profile owner #}
            {% if app.user and app.user.id == user.id and user.tagsInterestsUser|length > 0 %}
                <h3 style="margin-top: 20px;">{{ 'profile.activityInterests'|trans({}, 'FOSUserBundle') }}</h3>
                <div id="activity-interests-container">
                    {% for tagInterest in user.tagsInterestsUser %}
                        <span class="activity-interest-tag" data-id="{{ tagInterest.id }}" style="display: inline-block; margin: 2px; position: relative;">
                            <a href="{{ path('shamra_academia_filter', {'tags': tagInterest.tag.context}) }}" 
                               class="tm-tag" style="background-color: #17a2b8; color: white; padding: 5px 10px; border-radius: 3px; text-decoration: none; display: inline-block;">
                                {{ tagInterest.tag.context }}
                            </a>
                            <button type="button" class="delete-activity-interest" data-id="{{ tagInterest.id }}" 
                                    style="background: #dc3545; color: white; border: none; border-radius: 50%; width: 18px; height: 18px; font-size: 12px; cursor: pointer; position: absolute; top: -5px; right: -5px; line-height: 1; padding: 0;"
                                    title="{{ 'profile.deleteInterest'|trans({}, 'FOSUserBundle') }}">×</button>
                        </span>
                    {% endfor %}
                </div>
            {% endif %}

        </div>
    </div>

    {% if matchedResearches is defined and matchedResearches is not empty %}
    <div class="section">
        <h3> {{ 'profile.my_published_research'|trans({}, 'FOSUserBundle') }} {{ user.firstname ~ " " ~ user.lastname }}</h3>
            <div>
                {{ include('@syndexAcademic/Default/research_brief.html.twig') }}
                <center><a href="{{ path('shamra_academia_filter',{'createdBy':user.username}) }}"> {{'research.all'|trans({},'Academia') }}</a></center>
            </div>
    </div>
    {% endif %}

    {# Edit Modals - Only render for profile owner #}
    {% if app.user is not null and app.user.id == user.id %}
        {# Profile Image Edit Modal #}
        <div class="modal fade edit-modal" id="imageEditModal" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">{{ 'profile.inline_edit.edit_image'|trans({}, 'FOSUserBundle') }}</h4>
                    </div>
                    <div class="modal-body">
                        <form id="imageEditForm" enctype="multipart/form-data">
                            <div class="form-group">
                                <label for="profileImage">{{ 'profile.edit.pic_file'|trans({}, 'FOSUserBundle') }}</label>
                                <input type="file" id="profileImage" name="image" accept="image/jpeg,image/png,image/gif" required>
                                <p class="help-block">Max 5MB. JPG, PNG, GIF only.</p>
                            </div>
                            <div id="imagePreview" style="display:none; margin-top: 10px;">
                                <img src="" id="previewImg" style="max-width: 200px; max-height: 200px;">
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'profile.inline_edit.cancel'|trans({}, 'FOSUserBundle') }}</button>
                        <button type="button" class="btn btn-primary" id="saveImage">{{ 'profile.inline_edit.save'|trans({}, 'FOSUserBundle') }}</button>
                    </div>
                </div>
            </div>
        </div>

        {# Name Edit Modal #}
        <div class="modal fade edit-modal" id="nameEditModal" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">{{ 'profile.inline_edit.edit_field'|trans({'%field%': 'profile.inline_edit.first_name'|trans({}, 'FOSUserBundle')}, 'FOSUserBundle') }}</h4>
                    </div>
                    <div class="modal-body">
                        <form id="nameEditForm">
                            <div class="form-group">
                                <label for="editFirstName">{{ 'profile.inline_edit.first_name'|trans({}, 'FOSUserBundle') }}</label>
                                <input type="text" id="editFirstName" value="{{ user.firstName }}" required>
                            </div>
                            <div class="form-group">
                                <label for="editLastName">{{ 'profile.inline_edit.last_name'|trans({}, 'FOSUserBundle') }}</label>
                                <input type="text" id="editLastName" value="{{ user.lastName }}" required>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'profile.inline_edit.cancel'|trans({}, 'FOSUserBundle') }}</button>
                        <button type="button" class="btn btn-primary" id="saveName">{{ 'profile.inline_edit.save'|trans({}, 'FOSUserBundle') }}</button>
                    </div>
                </div>
            </div>
        </div>

        {# Bio Edit Modal #}
        <div class="modal fade edit-modal" id="bioEditModal" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">{{ 'profile.inline_edit.edit_field'|trans({'%field%': 'profile.inline_edit.bio'|trans({}, 'FOSUserBundle')}, 'FOSUserBundle') }}</h4>
                    </div>
                    <div class="modal-body">
                        <form id="bioEditForm">
                            <div class="form-group">
                                <label for="editBio">{{ 'profile.inline_edit.bio'|trans({}, 'FOSUserBundle') }}</label>
                                <textarea id="editBio" rows="5">{{ user.bio }}</textarea>
                            </div>
                            <hr>
                            <h5>{{ 'profile.additional_info'|trans({}, 'FOSUserBundle') }}</h5>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="editBirthdate">{{ 'profile.inline_edit.birthdate'|trans({}, 'FOSUserBundle') }}</label>
                                        <input type="date" id="editBirthdate" value="{{ user.birthdate ? user.birthdate|date('Y-m-d') : '' }}">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="editCountry">{{ 'profile.inline_edit.country'|trans({}, 'FOSUserBundle') }}</label>
                                        <input type="text" id="editCountry" value="{{ user.country }}">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="editAddress">{{ 'profile.inline_edit.address'|trans({}, 'FOSUserBundle') }}</label>
                                        <input type="text" id="editAddress" value="{{ user.address }}">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="editWork">{{ 'profile.inline_edit.work'|trans({}, 'FOSUserBundle') }}</label>
                                        <input type="text" id="editWork" value="{{ user.work }}">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="editStudyDegree">{{ 'profile.inline_edit.study_degree'|trans({}, 'FOSUserBundle') }}</label>
                                <select id="editStudyDegree">
                                    <option value="">{{ 'profile.inline_edit.select_degree'|trans({}, 'FOSUserBundle') }}</option>
                                    <option value="student" {{ user.studyDegree == 'student' ? 'selected' : '' }}>{{ 'student'|trans({}, 'FOSUserBundle') }}</option>
                                    <option value="bachelor" {{ user.studyDegree == 'bachelor' ? 'selected' : '' }}>{{ 'bachelor'|trans({}, 'FOSUserBundle') }}</option>
                                    <option value="master" {{ user.studyDegree == 'master' ? 'selected' : '' }}>{{ 'master'|trans({}, 'FOSUserBundle') }}</option>
                                    <option value="phd" {{ user.studyDegree == 'phd' ? 'selected' : '' }}>{{ 'phd'|trans({}, 'FOSUserBundle') }}</option>
                                    <option value="professor" {{ user.studyDegree == 'professor' ? 'selected' : '' }}>{{ 'professor'|trans({}, 'FOSUserBundle') }}</option>
                                </select>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'profile.inline_edit.cancel'|trans({}, 'FOSUserBundle') }}</button>
                        <button type="button" class="btn btn-primary" id="saveBio">{{ 'profile.inline_edit.save'|trans({}, 'FOSUserBundle') }}</button>
                    </div>
                </div>
            </div>
        </div>

        {# Academic Interests Edit Modal #}
        <div class="modal fade edit-modal" id="interestsEditModal" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">{{ 'profile.interests'|trans({}, 'FOSUserBundle') }}</h4>
                    </div>
                    <div class="modal-body">
                        <select id="interestsEditSelect" class="form-control" multiple="multiple" style="width:100%;">
                            {% for interest in user.interests %}
                                <option value="{{ interest }}" selected>{{ interest }}</option>
                            {% endfor %}
                        </select>
                        <small style="color:#666;margin-top:8px;display:block;">
                            {% if app.request.locale == 'ar' %}
                                اكتب للبحث عن اهتماماتك. يمكنك اختيار حتى 10 اهتمامات.
                            {% else %}
                                Type to search interests. You can select up to 10.
                            {% endif %}
                        </small>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'profile.inline_edit.cancel'|trans({}, 'FOSUserBundle') }}</button>
                        <button type="button" class="btn btn-primary" id="saveInterests">{{ 'profile.inline_edit.save'|trans({}, 'FOSUserBundle') }}</button>
                    </div>
                </div>
            </div>
        </div>

        {# Social Links Edit Modal #}
        <div class="modal fade edit-modal" id="socialEditModal" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">{{ 'profile.social_account'|trans({}, 'FOSUserBundle') }}</h4>
                    </div>
                    <div class="modal-body">
                        <form id="socialEditForm">
                            <div class="form-group">
                                <label for="editFacebookUrl"><i class="fa fa-facebook"></i> {{ 'profile.inline_edit.facebook_url'|trans({}, 'FOSUserBundle') }}</label>
                                <input type="url" id="editFacebookUrl" value="{{ user.facebookUrl }}" placeholder="https://facebook.com/...">
                            </div>
                            <div class="form-group">
                                <label for="editLinkedinUrl"><i class="fa fa-linkedin"></i> {{ 'profile.inline_edit.linkedin_url'|trans({}, 'FOSUserBundle') }}</label>
                                <input type="url" id="editLinkedinUrl" value="{{ user.linkedinUrl }}" placeholder="https://linkedin.com/in/...">
                            </div>
                            <div class="form-group">
                                <label for="editCell"><i class="fa fa-phone"></i> {{ 'profile.inline_edit.cell'|trans({}, 'FOSUserBundle') }}</label>
                                <input type="tel" id="editCell" value="{{ user.cell }}" placeholder="+1234567890">
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'profile.inline_edit.cancel'|trans({}, 'FOSUserBundle') }}</button>
                        <button type="button" class="btn btn-primary" id="saveSocial">{{ 'profile.inline_edit.save'|trans({}, 'FOSUserBundle') }}</button>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}

{% endblock %}

{% block javascripts %}
    {{ parent() }}

    {# Follow toggle for profile page #}
    <script>
    function toggleProfileFollow(btn) {
        var userId = btn.getAttribute('data-user-id');
        var isFollowing = btn.classList.contains('following');
        var url = isFollowing ? '/api/unfollow/' + userId : '/api/follow/' + userId;

        fetch(url, { method: 'POST', headers: { 'X-Requested-With': 'XMLHttpRequest' } })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                if (data.status === 'followed') {
                    btn.classList.remove('follow');
                    btn.classList.add('following');
                    btn.innerHTML = '<i class="fa fa-check"></i> {{ "social.following"|trans({}, "Social") }}';
                    var countEl = document.getElementById('followersCountDisplay');
                    if (countEl) countEl.textContent = data.followersCount;
                } else if (data.status === 'unfollowed') {
                    btn.classList.remove('following');
                    btn.classList.add('follow');
                    btn.innerHTML = '<i class="fa fa-plus"></i> {{ "social.follow"|trans({}, "Social") }}';
                    var countEl = document.getElementById('followersCountDisplay');
                    if (countEl) countEl.textContent = data.followersCount;
                }
            })
            .catch(function(err) { console.error('Follow error:', err); });
    }
    </script>
    
    {% if app.user is not null and app.user.id == user.id %}
    <script>
    $(document).ready(function() {
        var translations = {
            saving: "{{ 'profile.inline_edit.saving'|trans({}, 'FOSUserBundle')|e('js') }}",
            success: "{{ 'profile.inline_edit.success'|trans({}, 'FOSUserBundle')|e('js') }}",
            error: "{{ 'profile.inline_edit.error'|trans({}, 'FOSUserBundle')|e('js') }}",
            save: "{{ 'profile.inline_edit.save'|trans({}, 'FOSUserBundle')|e('js') }}",
            profilePublic: "{{ 'profile.inline_edit.profile_public'|trans({}, 'FOSUserBundle')|e('js') }}",
            profilePrivate: "{{ 'profile.inline_edit.profile_private'|trans({}, 'FOSUserBundle')|e('js') }}"
        };

        // Helper function to update a field
        function updateField(field, value, callback) {
            $.ajax({
                url: '/api/user/profile/update',
                method: 'POST',
                data: { field: field, value: value },
                success: function(response) {
                    if (response.success) {
                        if (callback) callback(response);
                        showNotification(translations.success, 'success');
                    } else {
                        showNotification(response.message || translations.error, 'error');
                    }
                },
                error: function(xhr) {
                    var msg = translations.error;
                    try {
                        var resp = JSON.parse(xhr.responseText);
                        if (resp.message) msg = resp.message;
                    } catch(e) {}
                    showNotification(msg, 'error');
                }
            });
        }

        // Notification helper
        function showNotification(message, type) {
            var alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
            var $notification = $('<div class="alert ' + alertClass + ' alert-inline" style="position:fixed;top:80px;right:20px;z-index:9999;min-width:200px;">' + message + '</div>');
            $('body').append($notification);
            setTimeout(function() {
                $notification.fadeOut(function() { $(this).remove(); });
            }, 3000);
        }

        // Profile Image Upload
        $('#profileImage').on('change', function() {
            var file = this.files[0];
            if (file) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('#previewImg').attr('src', e.target.result);
                    $('#imagePreview').show();
                };
                reader.readAsDataURL(file);
            }
        });

        $('#saveImage').on('click', function() {
            var $btn = $(this);
            var file = $('#profileImage')[0].files[0];
            if (!file) {
                showNotification('Please select an image', 'error');
                return;
            }

            var formData = new FormData();
            formData.append('image', file);

            $btn.prop('disabled', true).text(translations.saving);

            $.ajax({
                url: '/api/user/profile/update-image',
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    $btn.prop('disabled', false).text(translations.save);
                    if (response.success) {
                        $('#profile-image').attr('src', response.imagePath + '?t=' + new Date().getTime());
                        $('#imageEditModal').modal('hide');
                        $('#imageEditForm')[0].reset();
                        $('#imagePreview').hide();
                        showNotification(translations.success, 'success');
                    } else {
                        showNotification(response.message || translations.error, 'error');
                    }
                },
                error: function(xhr) {
                    $btn.prop('disabled', false).text(translations.save);
                    var msg = translations.error;
                    try {
                        var resp = JSON.parse(xhr.responseText);
                        if (resp.message) msg = resp.message;
                    } catch(e) {}
                    showNotification(msg, 'error');
                }
            });
        });

        // Save Name
        $('#saveName').on('click', function() {
            var $btn = $(this);
            var firstName = $('#editFirstName').val().trim();
            var lastName = $('#editLastName').val().trim();

            if (!firstName || !lastName) {
                showNotification('Please enter both first and last name', 'error');
                return;
            }

            $btn.prop('disabled', true).text(translations.saving);

            // Update first name then last name
            updateField('firstName', firstName, function() {
                updateField('lastName', lastName, function() {
                    $('#display-name').text(firstName + ' ' + lastName);
                    $('#nameEditModal').modal('hide');
                    $btn.prop('disabled', false).text(translations.save);
                });
            });
        });

        // Save Bio and additional info
        $('#saveBio').on('click', function() {
            var $btn = $(this);
            var bio = $('#editBio').val().trim();
            var birthdate = $('#editBirthdate').val();
            var country = $('#editCountry').val().trim();
            var address = $('#editAddress').val().trim();
            var work = $('#editWork').val().trim();
            var studyDegree = $('#editStudyDegree').val();

            $btn.prop('disabled', true).text(translations.saving);

            var updates = [
                { field: 'bio', value: bio },
                { field: 'birthdate', value: birthdate },
                { field: 'country', value: country },
                { field: 'address', value: address },
                { field: 'work', value: work },
                { field: 'studyDegree', value: studyDegree }
            ];

            var completed = 0;
            var errors = 0;

            updates.forEach(function(update) {
                $.ajax({
                    url: '/api/user/profile/update',
                    method: 'POST',
                    data: update,
                    success: function(response) {
                        completed++;
                        if (!response.success) errors++;
                        if (completed === updates.length) {
                            $btn.prop('disabled', false).text(translations.save);
                            if (errors === 0) {
                                $('#bioEditModal').modal('hide');
                                showNotification(translations.success, 'success');
                                // Refresh page to show updated bio
                                setTimeout(function() {
                                    location.reload();
                                }, 1000);
                            } else {
                                showNotification(translations.error, 'error');
                            }
                        }
                    },
                    error: function() {
                        completed++;
                        errors++;
                        if (completed === updates.length) {
                            $btn.prop('disabled', false).text(translations.save);
                            showNotification(translations.error, 'error');
                        }
                    }
                });
            });
        });

        // Academic Interests Edit
        (function() {
            var $select = $('#interestsEditSelect');
            
            // Initialize Select2 when modal opens
            $('#interestsEditModal').on('shown.bs.modal', function() {
                if (!$select.data('select2')) {
                    $select.select2({
                        tags: true,
                        width: '100%',
                        minimumInputLength: 2,
                        dir: '{{ (app.request.locale == "ar") ? "rtl" : "ltr" }}',
                        placeholder: {% if app.request.locale == 'ar' %} "اكتب للبحث عن اهتماماتك..." {% else %} "Type to search interests..." {% endif %},
                        ajax: {
                            url: Routing.generate('shamra_academia_get_tag_suggestions'),
                            dataType: 'json',
                            type: 'GET',
                            quietMillis: 50,
                            data: function(params) { return { term: params.term }; },
                            processResults: function(data) {
                                return { results: $.map(data, function(item) { return { text: item.context, id: item.context }; }) };
                            },
                            cache: true
                        },
                        tokenSeparators: [','],
                        maximumSelectionLength: 10
                    });
                }
            });

            $('#saveInterests').on('click', function() {
                var $btn = $(this);
                var selected = $select.val();
                if (!selected || selected.length === 0) {
                    showNotification(translations.error, 'error');
                    return;
                }
                $btn.prop('disabled', true).text(translations.saving);
                $.ajax({
                    url: '/api/update-academic-interests',
                    method: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({ interests: selected }),
                    success: function(response) {
                        if (response.success) {
                            // Rebuild interests display
                            var html = '';
                            selected.forEach(function(tag) {
                                html += '<span class="tm-tag"> ' + $('<span>').text(tag).html() + '</span> ';
                            });
                            $('#interests-display').html(html);
                            $('#interestsEditModal').modal('hide');
                            showNotification(translations.success, 'success');
                        } else {
                            showNotification(response.message || translations.error, 'error');
                        }
                    },
                    error: function(xhr) {
                        var msg = translations.error;
                        try { var r = JSON.parse(xhr.responseText); if (r.message) msg = r.message; } catch(e) {}
                        showNotification(msg, 'error');
                    },
                    complete: function() {
                        $btn.prop('disabled', false).text(translations.save);
                    }
                });
            });
        })();

        // Save Social Links
        $('#saveSocial').on('click', function() {
            var $btn = $(this);
            var facebookUrl = $('#editFacebookUrl').val().trim();
            var linkedinUrl = $('#editLinkedinUrl').val().trim();
            var cell = $('#editCell').val().trim();

            $btn.prop('disabled', true).text(translations.saving);

            var updates = [
                { field: 'facebookUrl', value: facebookUrl },
                { field: 'linkedinUrl', value: linkedinUrl },
                { field: 'cell', value: cell }
            ];

            var completed = 0;
            var errors = 0;

            updates.forEach(function(update) {
                $.ajax({
                    url: '/api/user/profile/update',
                    method: 'POST',
                    data: update,
                    success: function(response) {
                        completed++;
                        if (!response.success) errors++;
                        if (completed === updates.length) {
                            $btn.prop('disabled', false).text(translations.save);
                            if (errors === 0) {
                                $('#socialEditModal').modal('hide');
                                showNotification(translations.success, 'success');
                                setTimeout(function() {
                                    location.reload();
                                }, 1000);
                            } else {
                                showNotification(translations.error, 'error');
                            }
                        }
                    },
                    error: function() {
                        completed++;
                        errors++;
                        if (completed === updates.length) {
                            $btn.prop('disabled', false).text(translations.save);
                            showNotification(translations.error, 'error');
                        }
                    }
                });
            });
        });

        // Privacy Toggle
        $('#publicProfileToggle').on('change', function() {
            var isPublic = $(this).is(':checked');
            updateField('publicProfile', isPublic ? '1' : '0', function() {
                $('#privacy-status').text(isPublic ? translations.profilePublic : translations.profilePrivate);
            });
        });

        // Language Preference
        $('#preferredLocaleSelect').on('change', function() {
            var locale = $(this).val();
            $.ajax({
                url: '/api/user/profile/update-locale',
                method: 'POST',
                data: { locale: locale },
                success: function(response) {
                    if (response.success) {
                        $('#locale-save-status').show().delay(2000).fadeOut();
                        showNotification(translations.success, 'success');
                    } else {
                        showNotification(response.message || translations.error, 'error');
                    }
                },
                error: function() {
                    showNotification(translations.error, 'error');
                }
            });
        });

        // Newsletter Toggle
        var newsletterEnabledText = "{{ 'profile.inline_edit.newsletter_enabled'|trans({}, 'FOSUserBundle')|e('js') }}";
        var newsletterDisabledText = "{{ 'profile.inline_edit.newsletter_disabled'|trans({}, 'FOSUserBundle')|e('js') }}";

        $('#newsletterToggle').on('change', function() {
            var enabled = $(this).is(':checked');
            $.ajax({
                url: '/api/user/profile/update-newsletter',
                method: 'POST',
                data: { enabled: enabled ? '1' : '0' },
                success: function(response) {
                    if (response.success) {
                        $('#newsletter-status').text(enabled ? newsletterEnabledText : newsletterDisabledText);
                        showNotification(translations.success, 'success');
                    } else {
                        showNotification(response.message || translations.error, 'error');
                    }
                },
                error: function() {
                    showNotification(translations.error, 'error');
                }
            });
        });

        // Delete activity interest
        $(document).on('click', '.delete-activity-interest', function(e) {
            e.preventDefault();
            var $btn = $(this);
            var id = $btn.data('id');
            
            if (confirm("{{ 'profile.confirmDeleteInterest'|trans({}, 'FOSUserBundle')|e('js') }}")) {
                $.ajax({
                    url: '/api/user/activity-interest/delete',
                    method: 'POST',
                    data: { id: id },
                    success: function(response) {
                        if (response.success) {
                            $btn.closest('.activity-interest-tag').fadeOut(function() {
                                $(this).remove();
                            });
                            showNotification(translations.success, 'success');
                        } else {
                            showNotification(response.message || translations.error, 'error');
                        }
                    },
                    error: function() {
                        showNotification(translations.error, 'error');
                    }
                });
            }
        });
    });
    </script>
    {% endif %}
{% endblock %}