{% extends "base.html" %}
{% load static %}
{% block content %}
    {% include "includes/sidenav.html" %}
    <aside id="toast-container" class="fixed top-5 right-5 z-50">
    </aside>
    <div class="container mx-auto px-4 py-8">
        {% if user.is_authenticated %}
            {% if user.userprofile.team %}
                <!-- Team Header Section -->
                <div class="bg-white rounded-2xl shadow-lg p-8 mb-8">
                    <div class="flex items-center gap-6">
                        <div class="relative">
                            {% if user.userprofile.team.logo %}
                                <img src="{{ user.userprofile.team.logo.url }}"
                                     alt="{{ user.userprofile.team.name }}"
                                     width="96"
                                     height="96"
                                     class="w-24 h-24 rounded-full border-4 border-[#e74c3c] object-cover shadow-lg">
                            {% else %}
                                <div class="w-24 h-24 rounded-full border-4 border-[#e74c3c] bg-gray-100 flex items-center justify-center shadow-lg">
                                    <i class="fas fa-users text-2xl text-gray-400"></i>
                                </div>
                            {% endif %}
                            <div class="absolute -bottom-2 -right-2 bg-[#e74c3c] text-white p-2 rounded-full">
                                <i class="fas fa-users text-xl"></i>
                            </div>
                        </div>
                        <div class="flex-1">
                            <h1 class="text-4xl font-bold text-gray-800 mb-2">{{ user.userprofile.team.name }}</h1>
                            <div class="flex items-center gap-3 text-gray-600">
                                <div class="flex items-center gap-2">
                                    <i class="fas fa-crown text-[#e74c3c]"></i>
                                    <span class="font-medium">Team Leader:</span>
                                    <span>{{ user.userprofile.team.admin.username }}</span>
                                    {% if user.userprofile.team.admin.kudos_count %}
                                        <span class="bg-[#e74c3c] text-white px-3 py-1 rounded-full text-sm">
                                            {{ user.userprofile.team.admin.kudos_count }} kudos
                                        </span>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Team Members Section -->
                <div class="bg-white rounded-2xl shadow-lg p-8 mb-8">
                    <div class="flex justify-between items-center mb-6">
                        <h2 class="text-2xl font-bold text-gray-800">Team Members</h2>
                        {% if user.userprofile.team.admin == user %}
                            <button onclick="openAddMemberModal()"
                                    class="flex items-center gap-2 px-4 py-2 bg-[#e74c3c] text-white rounded-lg hover:bg-[#c0392b] transition-colors duration-300">
                                <i class="fas fa-plus"></i>
                                Add Member
                            </button>
                        {% endif %}
                    </div>
                    <!-- Members Slider -->
                    <div class="relative h-[280px]">
                        <button class="absolute left-0 top-1/2 -translate-y-1/2 z-10 bg-white rounded-full p-3 shadow-lg hover:bg-gray-50 transition-colors duration-300"
                                onclick="prevMember()">
                            <i class="fas fa-chevron-left text-[#e74c3c]"></i>
                        </button>
                        <div class="overflow-hidden px-12 h-full">
                            <div class="flex gap-4 transition-transform duration-300 ease-in-out h-full items-center">
                                {% for member in team_members %}
                                    <div class="member-card flex-shrink-0 w-48 bg-gray-50 rounded-xl p-4 text-center transform transition-all duration-300 hover:shadow-lg {% if member.username == user.userprofile.team.admin.username %}border-2 border-[#e74c3c]{% endif %}"
                                         id="member-{{ member.username }}">
                                        <div class="relative inline-block">
                                            <div class="w-16 h-16 mx-auto mb-3 bg-gray-200 rounded-full flex items-center justify-center">
                                                <i class="fas fa-user text-xl text-gray-400"></i>
                                            </div>
                                            {% if member.username == user.userprofile.team.admin.username %}
                                                <div class="absolute -top-1 -right-1 bg-[#e74c3c] text-white p-1 rounded-full">
                                                    <i class="fas fa-crown text-xs"></i>
                                                </div>
                                            {% endif %}
                                        </div>
                                        <h3 class="text-base font-semibold text-gray-800 mb-2 truncate">{{ member.username }}</h3>
                                        <div class="flex flex-col gap-2">
                                            {% if member != user %}
                                                <button onclick="openKudosModal('{{ member.username }}')"
                                                        class="px-2 py-1 text-sm bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors duration-300 w-full">
                                                    <i class="fas fa-star mr-1"></i> Give Kudos
                                                </button>
                                            {% endif %}
                                            {% if user.userprofile.team.admin == user and user.userprofile.team.admin != member %}
                                                <button onclick="kickMember('{{ member.username }}')"
                                                        class="px-2 py-1 text-sm bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors duration-300 w-full">
                                                    <i class="fas fa-times mr-1"></i> Remove
                                                </button>
                                            {% endif %}
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                        <button class="absolute right-0 top-1/2 -translate-y-1/2 z-10 bg-white rounded-full p-3 shadow-lg hover:bg-gray-50 transition-colors duration-300"
                                onclick="nextMember()">
                            <i class="fas fa-chevron-right text-[#e74c3c]"></i>
                        </button>
                    </div>
                </div>
                <!-- Team Actions Section -->
                <div class="bg-white rounded-2xl shadow-lg p-8">
                    <h2 class="text-2xl font-bold text-gray-800 mb-6">Team Actions</h2>
                    <div class="flex gap-4">
                        <a href="{% url 'join_requests' %}"
                           class="flex items-center gap-2 px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors duration-300">
                            <i class="fas fa-bell"></i>
                            View Join Requests
                        </a>
                        {% if user.userprofile.team.admin == user %}
                            <form method="post" action="{% url 'delete_team' %}" class="inline">
                                {% csrf_token %}
                                <button type="submit"
                                        class="flex items-center gap-2 px-6 py-3 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors duration-300">
                                    <i class="fas fa-trash"></i>
                                    Delete Team
                                </button>
                            </form>
                        {% endif %}
                        <form method="post" action="{% url 'leave_team' %}" class="inline">
                            {% csrf_token %}
                            <button type="submit"
                                    class="flex items-center gap-2 px-6 py-3 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 transition-colors duration-300">
                                <i class="fas fa-sign-out-alt"></i>
                                Leave Team
                            </button>
                        </form>
                    </div>
                </div>
            {% else %}
                {% if join_requests %}
                    <!-- Join Requests Section -->
                    <div class="max-w-2xl mx-auto mb-8">
                        <div class="bg-white rounded-2xl shadow-lg p-8">
                            <div class="flex items-center justify-between mb-6">
                                <div class="flex items-center gap-6">
                                    <div class="w-16 h-16 bg-[#e74c3c] rounded-full flex items-center justify-center">
                                        <i class="fas fa-bell text-2xl text-white"></i>
                                    </div>
                                    <div>
                                        <h2 class="text-3xl font-bold text-gray-800">Team Invitations</h2>
                                        <p class="text-gray-600 mt-2">You have pending team invitations</p>
                                    </div>
                                </div>
                                <a href="{% url 'join_requests' %}"
                                   class="flex items-center gap-2 px-4 py-2 bg-[#e74c3c] text-white rounded-lg hover:bg-[#c0392b] transition-colors duration-300">
                                    <i class="fas fa-external-link-alt"></i>
                                    View All Invitations
                                </a>
                            </div>
                            <div class="space-y-4">
                                {% for request in join_requests|slice:":2" %}
                                    <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors duration-300">
                                        <div class="flex items-center gap-4">
                                            {% if request.team.logo %}
                                                <img src="{{ request.team.logo.url }}"
                                                     alt="{{ request.team.name }}"
                                                     width="48"
                                                     height="48"
                                                     class="w-12 h-12 rounded-full object-cover border-2 border-[#e74c3c]">
                                            {% else %}
                                                <div class="w-12 h-12 bg-gray-200 rounded-full flex items-center justify-center border-2 border-[#e74c3c]">
                                                    <i class="fas fa-users text-gray-400"></i>
                                                </div>
                                            {% endif %}
                                            <div>
                                                <h3 class="font-semibold text-gray-800">{{ request.team.name }}</h3>
                                                <p class="text-sm text-gray-600">Invited by {{ request.team.admin.username }}</p>
                                            </div>
                                        </div>
                                        <form method="post" action="{% url 'join_requests' %}" class="flex gap-2">
                                            {% csrf_token %}
                                            <input type="hidden" name="team_id" value="{{ request.team.id }}">
                                            <button type="submit"
                                                    class="px-4 py-2 bg-[#e74c3c] text-white rounded-lg hover:bg-[#c0392b] transition-colors duration-300">
                                                Accept Invitation
                                            </button>
                                        </form>
                                    </div>
                                {% endfor %}
                                {% if join_requests|length > 2 %}
                                    <div class="text-center mt-4">
                                        <a href="{% url 'join_requests' %}"
                                           class="text-[#e74c3c] hover:underline">
                                            View {{ join_requests|length|add:"-2" }} more invitation{{ join_requests|length|add:"-2"|pluralize }}
                                        </a>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                {% else %}
                    <div class="max-w-2xl mx-auto mb-8">
                        <div class="bg-white rounded-2xl shadow-lg p-8">
                            <div class="flex items-center justify-between mb-6">
                                <div class="flex items-center gap-6">
                                    <div class="w-16 h-16 bg-[#e74c3c] rounded-full flex items-center justify-center">
                                        <i class="fas fa-bell text-2xl text-white"></i>
                                    </div>
                                    <div>
                                        <h2 class="text-3xl font-bold text-gray-800">Team Invitations</h2>
                                        <p class="text-gray-600 mt-2">Check your pending team invitations</p>
                                    </div>
                                </div>
                                <a href="{% url 'join_requests' %}"
                                   class="flex items-center gap-2 px-4 py-2 bg-[#e74c3c] text-white rounded-lg hover:bg-[#c0392b] transition-colors duration-300">
                                    <i class="fas fa-external-link-alt"></i>
                                    View All Invitations
                                </a>
                            </div>
                        </div>
                    </div>
                {% endif %}
                <!-- Create Team Section -->
                <div class="max-w-2xl mx-auto text-center">
                    <div class="bg-white rounded-2xl shadow-lg p-12">
                        <div class="w-20 h-20 mx-auto mb-6 bg-[#e74c3c] rounded-full flex items-center justify-center">
                            <i class="fas fa-users text-3xl text-white"></i>
                        </div>
                        <h1 class="text-3xl font-bold text-gray-800 mb-4">Create Your Team</h1>
                        <p class="text-gray-600 mb-8">
                            Join forces with other security enthusiasts! Create a team to collaborate, share knowledge, and tackle security challenges together.
                        </p>
                        <button onclick="openModal()"
                                class="inline-flex items-center gap-2 px-8 py-4 bg-[#e74c3c] text-white text-lg font-semibold rounded-lg hover:bg-[#c0392b] transition-colors duration-300">
                            <i class="fas fa-plus"></i>
                            Create a New Team
                        </button>
                    </div>
                </div>
            {% endif %}
        {% else %}
            <!-- Login Required Section -->
            <div class="max-w-2xl mx-auto text-center">
                <div class="bg-white rounded-2xl shadow-lg p-12">
                    <div class="w-20 h-20 mx-auto mb-6 bg-gray-200 rounded-full flex items-center justify-center">
                        <i class="fas fa-lock text-3xl text-gray-400"></i>
                    </div>
                    <h1 class="text-3xl font-bold text-gray-800 mb-4">Login Required</h1>
                    <p class="text-gray-600 mb-8">Please login to create or join a team. Join our community of security enthusiasts!</p>
                </div>
            </div>
        {% endif %}
    </div>
    <!-- Create Team Modal -->
    <div id="teamModal"
         class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 p-4">
        <div class="bg-white rounded-2xl max-w-2xl mx-auto mt-20 p-8">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-2xl font-bold text-gray-800">Create New Team</h2>
                <button onclick="closeModal()"
                        class="text-gray-500 hover:text-gray-700 text-2xl">×</button>
            </div>
            <form id="createTeamForm"
                  method="post"
                  action="{% url 'create_team' %}"
                  enctype="multipart/form-data">
                {% csrf_token %}
                <div class="space-y-4">
                    <div>
                        <label for="teamName" class="block text-sm font-medium text-gray-700">Team Name</label>
                        <input type="text"
                               id="teamName"
                               name="teamName"
                               required
                               class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-[#e74c3c] focus:ring-[#e74c3c]">
                    </div>
                    <div>
                        <label for="teamAvatar" class="block text-sm font-medium text-gray-700">Team Avatar</label>
                        <input type="file"
                               id="teamAvatar"
                               name="teamAvatar"
                               accept="image/*"
                               required
                               class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-[#e74c3c] file:text-white hover:file:bg-[#c0392b]">
                    </div>
                    <div>
                        <label for="teamMembers" class="block text-sm font-medium text-gray-700">Add Members (Optional)</label>
                        <div class="relative">
                            <input type="text"
                                   id="teamMembers"
                                   name="teamMembers"
                                   placeholder="Search usernames..."
                                   onkeyup="searchUsers(this.value)"
                                   class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-[#e74c3c] focus:ring-[#e74c3c]">
                            <input type="hidden" id="selectedMembers" name="selectedMembers">
                            <div id="userDropdown"
                                 class="absolute left-0 right-0 bg-white mt-1 max-h-48 overflow-y-auto shadow-lg rounded-md z-50">
                            </div>
                            <div id="selectedUsers" class="flex flex-wrap gap-2 mt-2"></div>
                        </div>
                    </div>
                    <div class="flex justify-end gap-4">
                        <button type="button"
                                onclick="closeModal()"
                                class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
                            Cancel
                        </button>
                        <button type="submit"
                                class="px-4 py-2 text-sm font-medium text-white bg-[#e74c3c] rounded-md hover:bg-[#c0392b] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#e74c3c]">
                            Create Team
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- Add Member Modal -->
    <div id="addMemberModal"
         class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 p-4">
        <div class="bg-white rounded-2xl max-w-2xl mx-auto mt-20 p-8">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-2xl font-bold text-gray-800">Add New Member</h2>
                <button onclick="closeAddMemberModal()"
                        class="text-gray-500 hover:text-gray-700 text-2xl">×</button>
            </div>
            <form id="addMemberForm" method="post" action="{% url 'add_member' %}">
                {% csrf_token %}
                <div class="space-y-4">
                    <div>
                        <label for="newMember" class="block text-sm font-medium text-gray-700">Username</label>
                        <div class="relative">
                            <input type="text"
                                   id="newMember"
                                   name="newMember"
                                   placeholder="Enter username"
                                   onkeyup="searchNewMember(this.value)"
                                   required
                                   class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-[#e74c3c] focus:ring-[#e74c3c]">
                            <div id="newMemberDropdown"
                                 class="absolute left-0 right-0 bg-white mt-1 max-h-48 overflow-y-auto shadow-lg rounded-md z-50">
                            </div>
                        </div>
                    </div>
                    <div class="flex justify-end gap-4">
                        <button type="button"
                                onclick="closeAddMemberModal()"
                                class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200">
                            Cancel
                        </button>
                        <button type="submit"
                                class="px-4 py-2 text-sm font-medium text-white bg-[#e74c3c] rounded-md hover:bg-[#c0392b]">
                            Send Join Request
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- Kudos Modal -->
    <div id="kudosModal"
         class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 p-4">
        <div class="bg-white rounded-2xl max-w-2xl mx-auto mt-20 p-8">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-2xl font-bold text-gray-800">Send Kudos</h2>
                <button onclick="closeKudosModal()"
                        class="text-gray-500 hover:text-gray-700 text-2xl">×</button>
            </div>
            <form method="post" onsubmit="sendKudos(event)" class="space-y-4">
                {% csrf_token %}
                <input type="hidden" id="kudosReceiver" name="kudosReceiver">
                <div>
                    <label for="kudosLink" class="block text-sm font-medium text-gray-700">Link (optional)</label>
                    <input type="url"
                           id="kudosLink"
                           name="kudosLink"
                           placeholder="Enter an optional link"
                           class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-[#e74c3c] focus:ring-[#e74c3c]" />
                </div>
                <div>
                    <label for="kudosComment" class="block text-sm font-medium text-gray-700">Comment (optional)</label>
                    <textarea id="kudosComment"
                              name="kudosComment"
                              rows="3"
                              placeholder="Add an optional note"
                              class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-[#e74c3c] focus:ring-[#e74c3c]"></textarea>
                </div>
                <div class="flex justify-end gap-4">
                    <button type="button"
                            onclick="closeKudosModal()"
                            class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200">
                        Cancel
                    </button>
                    <button type="submit"
                            class="px-4 py-2 text-sm font-medium text-white bg-green-500 rounded-md hover:bg-green-600">
                        Send Kudos
                    </button>
                </div>
            </form>
        </div>
    </div>
    <script>
        // JavaScript for Slider Navigation
        let currentIndex = 0;
        function updateSlider() {
            const members = document.querySelectorAll('.member-card');
            members.forEach((member, index) => {
                member.classList.remove('active');
                if (index === currentIndex) {
                    member.classList.add('active');
                    // Show the "Kick" button for active member only
                    const kickButton = member.querySelector('.kick-button');
                    if (kickButton) {
                        kickButton.style.display = 'block';
                    }
                } else {
                    // Hide the "Kick" button for non-active members
                    const kickButton = member.querySelector('.kick-button');
                    if (kickButton) {
                        kickButton.style.display = 'none';
                    }
                }
            });
        }

        function prevMember() {
            const members = document.querySelectorAll('.member-card');
            currentIndex = (currentIndex - 1 + members.length) % members.length;
            updateSlider();
        }

        function nextMember() {
            const members = document.querySelectorAll('.member-card');
            currentIndex = (currentIndex + 1) % members.length;
            updateSlider();
        }

        // Initialize slider
        updateSlider();

        // Kick member function
        function kickMember(username) {
            fetch('/teams/kick-member/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': '{{ csrf_token }}'
                },
                body: JSON.stringify({ member: username })
            }).then(response => response.json())
            .then(data => {
                if (data.success) {
                    window.location.reload();
                } else {
                    alert(data.error);
                }
            }).catch(error => {
                console.error('Error:', error);
                alert('Failed to kick member. Please try again.');
            });
        }

        // Function to set the active member and show the "Kick" button
        function setActiveMember(username) {
            // First, hide all kick buttons
            const kickButtons = document.querySelectorAll('.kick-button');
            kickButtons.forEach(button => button.style.display = 'none');

            // Remove "active" class from all member cards
            const memberCards = document.querySelectorAll('.member-card');
            memberCards.forEach(card => card.classList.remove('active'));

            // Add "active" class to the clicked member
            const activeCard = document.getElementById('member-' + username);
            activeCard.classList.add('active');

            // Only show the "Kick" button if the current user is not the admin
            if (username !== '{{ user.userprofile.team.admin.username }}') {
                const kickButton = document.getElementById('kick-' + username);
                if (kickButton) {
                    kickButton.style.display = 'inline';
                }
            }
        }

        // Update the modal functions
        function openModal() {
            const modal = document.getElementById('teamModal');
            if (modal) {
                modal.style.display = "block";
            } else {
                console.error("Team modal element not found");
            }
        }

        function closeModal() {
            const modal = document.getElementById('teamModal');
            if (modal) {
                modal.style.display = "none";
            }
        }

        // Update the window click handler to handle multiple modals
        window.onclick = function(event) {
            const teamModal = document.getElementById('teamModal');
            const addMemberModal = document.getElementById('addMemberModal');
            const kudosModal = document.getElementById('kudosModal');

            if (event.target === teamModal) {
                teamModal.style.display = "none";
            }
            if (event.target === addMemberModal) {
                addMemberModal.style.display = "none";
            }
            if (event.target === kudosModal) {
                kudosModal.style.display = "none";
            }
        }

        // Make sure the createTeamForm event listener only runs if the form exists
        const createTeamForm = document.getElementById('createTeamForm');
        if (createTeamForm) {
            createTeamForm.onsubmit = function(event) {
            event.preventDefault();
            const formData = new FormData(this);
            fetch(this.action, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRFToken': formData.get('csrfmiddlewaretoken')
                }
            }).then(response => {
                if (response.ok) {
                    closeModal();
                    window.location.reload();
                } else {
                    alert('Failed to create team. Please try again.');
                }
            }).catch(error => {
                console.error('Error:', error);
                alert('Failed to create team. Please try again.');
            });
            }
        }

        // Search users and display in dropdown
        function searchUsers(query) {
            if (query.length < 2) {
                document.getElementById('userDropdown').innerHTML = "";
                return;
            }

            fetch(`/teams/search-users/?query=${query}`)
                .then(response => response.json())
                .then(data => {
                    let dropdownContent = "";
                    data.forEach(user => {
                        dropdownContent += `
                            <div class="px-4 py-2 hover:bg-gray-50 cursor-pointer text-sm text-gray-700 border-b border-gray-100 last:border-b-0" onclick="selectUser('${user.username}')">
                                ${user.username} ${user.team ? ' - ' + user.team : ''}
                            </div>`;
                    });
                    document.getElementById('userDropdown').innerHTML = dropdownContent;
                });
        }

        function selectUser(username) {
            const selectedUsersContainer = document.getElementById('selectedUsers');
            const currentMembers = Array.from(selectedUsersContainer.children).map(child => child.dataset.username);

            if (!currentMembers.includes(username)) {
                const userDiv = document.createElement('div');
                userDiv.className = 'inline-flex items-center gap-2 px-3 py-1 bg-gray-100 rounded-full text-sm';
                userDiv.dataset.username = username;
                userDiv.innerHTML = `
                    <span class="text-gray-700">${username}</span>
                    <button type="button" onclick="removeUser(this)" class="text-gray-500 hover:text-gray-700">
                        <i class="fas fa-times"></i>
                    </button>`;
                selectedUsersContainer.appendChild(userDiv);
            }

            document.getElementById('teamMembers').value = "";
            document.getElementById('selectedMembers').value = Array.from(selectedUsersContainer.children)
                .map(child => child.dataset.username)
                .join(',');
            document.getElementById('userDropdown').innerHTML = "";
        }

        // Remove user from selected list
        function removeUser(element) {
            const userDiv = element.parentElement;
            userDiv.remove();
        }

        // Modal functions for adding a new member
        function openAddMemberModal() {
            document.getElementById('addMemberModal').style.display = "block";
        }

        function closeAddMemberModal() {
            document.getElementById('addMemberModal').style.display = "none";
        }

        // Close the modal when clicking outside of it
        window.onclick = function(event) {
            const modal = document.getElementById('addMemberModal');
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }

        // Update the addMemberForm submission handler
        document.getElementById('addMemberForm').onsubmit = function(event) {
            event.preventDefault();
            const formData = new FormData(this);
            fetch(this.action, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRFToken': formData.get('csrfmiddlewaretoken')
                }
            })
            .then(response => response.json())
            .then(data => {
                    closeAddMemberModal();
                if (data.success) {
                    showMessage("Join request sent successfully!", false);
                } else {
                    showMessage(data.error || "Failed to send join request.", true);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showMessage("Failed to send join request. Please try again.", true);
            });
        }

        // Search users and display in dropdown for adding a new member
        function searchNewMember(query) {
            if (query.length < 2) {
                document.getElementById('newMemberDropdown').innerHTML = "";
                return;
            }

            fetch(`/teams/search-users/?query=${query}`)
                .then(response => response.json())
                .then(data => {
                    let dropdownContent = "";
                    data.forEach(user => {
                        dropdownContent += `
                            <div class="px-4 py-2 hover:bg-gray-50 cursor-pointer text-sm text-gray-700 border-b border-gray-100 last:border-b-0" onclick="selectNewMember('${user.username}')">
                                ${user.username} ${user.team ? ' - ' + user.team : ''}
                            </div>`;
                    });
                    document.getElementById('newMemberDropdown').innerHTML = dropdownContent;
                });
        }

        // Select user from dropdown for adding a new member
        function selectNewMember(username) {
            document.getElementById('newMember').value = username;
            document.getElementById('newMemberDropdown').innerHTML = "";
        }

        // Kudos Modal functions
        function openKudosModal(username) {
            document.getElementById('kudosReceiver').value = username;
            document.getElementById('kudosModal').style.display = 'block';
        }

        function closeKudosModal() {
            document.getElementById('kudosModal').style.display = 'none';
        }

        function sendKudos(e) {
            e.preventDefault();
            const receiver = document.getElementById('kudosReceiver').value;
            const linkUrl = document.getElementById('kudosLink').value.trim();
            const commentText = document.getElementById('kudosComment').value.trim();
            fetch("/teams/give-kudos/", { 
                method: "POST",
                headers: {
                    "X-CSRFToken": document.querySelector("#kudosModal [name=csrfmiddlewaretoken]").value,
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    kudosReceiver: receiver,
                    link: linkUrl,
                    comment: commentText
                })
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error("Network response was not ok");
                }
                return response.json();
            })
            .then(data => {
                if (data.success) {
                    closeKudosModal();
                    updateKudosCount(receiver);
                    showMessage("Kudos sent successfully!", false);
                } else {
                    throw new Error(data.error || "Failed to send kudos.");
                }
            })
            .catch(error => {
                console.error("Error:", error);
                showMessage(error.message, true);
            });
        }

        function updateKudosCount(username) {
            const kudosMemberCard = document.getElementById(`member-${username}`);
            if (!kudosMemberCard) {
                console.error(`Member card not found for ${username}`);
                return;
            } 
            let memberInfo = kudosMemberCard.querySelector('.member-info');
            if (!memberInfo) {
                memberInfo = document.createElement('div');
                memberInfo.className = 'member-info';
            }
            let countBadge = memberInfo.querySelector('.kudos-count-badge');
            const currentCount = countBadge ? 
                parseInt(countBadge.textContent.split(' ')[0]) : 0;

            if (countBadge) {
                countBadge.textContent = `${currentCount + 1} kudos`;
                countBadge.style.display = 'inline-block';
            } else {
                countBadge = document.createElement('span');
                countBadge.className = 'kudos-count-badge';
                countBadge.textContent = '1 kudos';
                memberInfo.appendChild(countBadge);
            }
        }

        // Update the showMessage function to make toasts more visible
        function showMessage(message, isError = false) {
            const container = document.getElementById('toast-container');
            container.innerHTML = '';

            const toast = document.createElement('div');
            toast.className = `flex items-center gap-3 p-4 rounded-lg shadow-lg ${isError ? 'bg-red-500' : 'bg-green-500'} text-white transform transition-all duration-300`;
            
            // Add icon based on message type
            const icon = document.createElement('i');
            icon.className = `fas ${isError ? 'fa-exclamation-circle' : 'fa-check-circle'} text-xl`;
            toast.appendChild(icon);
            
            // Add message text
            const text = document.createElement('span');
            text.className = 'font-medium';
            text.textContent = message;
            toast.appendChild(text);
            
            container.appendChild(toast);

            // Animate the toast
            setTimeout(() => {
                     toast.style.opacity = '0';
                toast.style.transform = 'translateY(-100%)';
                setTimeout(() => toast.remove(), 300);
            }, 3000);
        }
    </script>
{% endblock content %}