{% extends "organization/organization_dashboard_base.html" %}
{% load static %}
{% block title %}
    Team Overview & Daily Status Reports
{% endblock title %}
{% block description %}
    Get a comprehensive view of your team members and their daily progress. Manage team members, view their details, and keep track of their daily status reports to ensure smooth collaboration and effective teamwork.
{% endblock description %}
{% block keywords %}
    Team Overview, Team Management, Manage Members, View Team, Team Roles, Team Status, Daily Status Reports, Status Reports, Daily Updates, Team Progress, Task Management, Goal Accomplishments
{% endblock keywords %}
{% block og_title %}
    Team Overview & Daily Status Reports - Comprehensive Team and Progress Management
{% endblock og_title %}
{% block og_description %}
    Get a detailed view of your team members and their daily progress. Easily manage roles, statuses, and daily status reports to maintain efficient operations and improve team performance.
{% endblock og_description %}
{% block body %}
    <div class="fixed bottom-2.5 right-3.75">
        <a href="https://github.com/OWASP-BLT/BLT/blob/main/website/templates/organization/organization_manage_bugs.html">
            <i class="fab fa-github"></i>
        </a>
        <a href="https://www.figma.com/file/s0xuxeU6O2guoWEfA9OElZ/Design?node-id=3%3A76&t=pqxWpF3hcYxjEDrs-1">
            <i class="fab fa-figma"></i>
        </a>
    </div>
    <div class="bg-[#F3F5F7] w-full h-full flex flex-col items-center">
        <div class="flex items-center md:justify-between w-full md:h-max mt-5 flex-col md:flex-row">
            <p class="text-red-700 font-satoshi font-bold text-[35px] px-8">Team Members</p>
            <div class="w-full md:w-[15%] flex justify-center md:justify-end mr-10">
                <a href="/teams/overview"
                   class="flex items-center justify-center md:justify-center px-16 py-7 bg-red-600 rounded-xl hover:bg-red-600 transition-all">
                    <i class="fa-sharp fa-solid fa-plus fa-xl text-white"></i>
                </a>
            </div>
        </div>
        <div class="w-[96%] overflow-y-scroll flow-root my-10">
            <div class="relative overflow-x-auto shadow-md sm:rounded-lg h-full bg-white">
                <table class="w-full text-sm text-left text-gray-500">
                    <caption class="p-5 text-xl font-semibold text-left text-gray-900 bg-white">
                        <div class="flex w-full justify-between">
                            <h2 class="mt-1 text-xl font-extrabold text-gray-500">Members</h2>
                        </div>
                    </caption>
                    <thead class="text-gray-700 uppercase bg-gray-50">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-[1rem]">Member</th>
                            <th scope="col" class="px-6 py-3 text-[1rem]">Email</th>
                            <th scope="col" class="px-6 py-3 text-[1rem]">Role</th>
                            <th scope="col" class="px-6 py-3 text-[1rem]">Status</th>
                            <th scope="col" class="px-6 py-3 text-[1rem]">
                                <span class="sr-only">View</span>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        {% if team_members %}
                            {% for member in team_members %}
                                <tr class="bg-white border-b hover:bg-gray-50 transition-colors">
                                    <th scope="row"
                                        class="px-6 py-4 text-gray-900 whitespace-nowrap text-lg flex items-center">
                                        {% if member.user_avatar %}
                                            <img src="{{ member.user_avatar.url }}"
                                                 alt="User Avatar"
                                                 class="rounded-full mr-3"
                                                 width="40"
                                                 height="40">
                                        {% else %}
                                            <img src="{% static 'images/dummy-user.png' %}"
                                                 alt="Default Avatar"
                                                 class="rounded-full mr-3"
                                                 width="40"
                                                 height="40">
                                        {% endif %}
                                        {{ member.user.username }}
                                    </th>
                                    <td class="px-6 py-4">{{ member.user.email }}</td>
                                    <td class="px-6 py-4">{{ member.role }}</td>
                                    <td class="px-6 py-4">
                                        {% if member.user.is_active %}
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span>
                                        {% else %}
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Inactive</span>
                                        {% endif %}
                                    </td>
                                    <td class="px-6 py-4 text-right">
                                        <a href="/profile/{{ member.user.username }}"
                                           class="md:justify-center px-5 py-3 bg-red-600 rounded-xl hover:bg-purple-600 transition-all text-white">
                                            View
                                        </a>
                                    </td>
                                </tr>
                            {% endfor %}
                        {% else %}
                            <tr class="bg-white border-b">
                                <th scope="row"
                                    class="px-6 py-4 font-medium text-red-500 whitespace-nowrap">No Members Found</th>
                            </tr>
                        {% endif %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="bg-[#F3F5F7] w-full h-full flex flex-col items-center">
        <div class="flex items-center md:justify-between w-full md:h-max mt-5 flex-col md:flex-row">
            <p class="text-red-700 font-satoshi font-bold text-[35px] px-8">Daily Status Reports</p>
        </div>
        <div class="mb-3">
            <div class="border-b border-gray-200">
                <nav class="flex -mb-px" aria-label="Tabs">
                    <button class="tab-button px-4 py-2 font-medium text-sm border-b-2 border-transparent hover:border-gray-300 hover:text-gray-700 whitespace-nowrap"
                            data-tab="user">By User</button>
                    <button class="tab-button px-4 py-2 font-medium text-sm border-b-2 border-transparent hover:border-gray-300 hover:text-gray-700 whitespace-nowrap"
                            data-tab="date">By Date</button>
                    <button class="tab-button px-4 py-2 font-medium text-sm border-b-2 border-transparent hover:border-gray-300 hover:text-gray-700 whitespace-nowrap"
                            data-tab="goal">By Goal</button>
                    <button class="tab-button px-4 py-2 font-medium text-sm border-b-2 border-transparent hover:border-gray-300 hover:text-gray-700 whitespace-nowrap"
                            data-tab="task">By Task</button>
                </nav>
            </div>
            <div class="mt-4 text-center">
                <div id="user-panel" class="filter-panel hidden">
                    <select id="user-filter"
                            class="rounded-md border-gray-300 bg-red-500 p-4 text-white shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                        <option value="">Select User</option>
                        {% for member in team_members %}<option value="{{ member.user.id }}">{{ member.user.username }}</option>{% endfor %}
                    </select>
                </div>
                <div id="date-panel" class="filter-panel hidden">
                    <input type="date"
                           id="date-filter"
                           class="rounded-md p-4 bg-red-500 text-white border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                </div>
                <div id="goal-panel" class="filter-panel hidden">
                    <select id="goal-filter"
                            class="rounded-md p-4 border-gray-300 bg-red-500 text-white shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                        <option value="">Select Status</option>
                        <option value="true">Accomplished</option>
                        <option value="false">Not Accomplished</option>
                    </select>
                </div>
                <div id="task-panel" class="filter-panel hidden">
                    <input type="text"
                           id="task-filter"
                           placeholder="Search in previous work..."
                           class="rounded-md p-4 border-gray-300 bg-red-500 text-white shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 w-full">
                </div>
            </div>
        </div>
        <div class="w-[96%] h-[70vh] overflow-y-scroll flow-root my-5">
            <div class="relative overflow-x-auto shadow-md sm:rounded-lg h-full bg-white">
                <table class="w-full text-sm text-left text-gray-500">
                    <caption class="p-5 text-xl font-semibold text-left text-gray-900 bg-white">
                        <div class="flex w-full justify-between">
                            <h2 class="mt-1 text-xl font-extrabold text-gray-500">Reports</h2>
                        </div>
                    </caption>
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col"
                                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                User
                            </th>
                            <th scope="col"
                                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Date
                            </th>
                            <th scope="col"
                                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Previous Work
                            </th>
                            <th scope="col"
                                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Next Plan
                            </th>
                            <th scope="col"
                                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Blockers
                            </th>
                            <th scope="col"
                                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Goal Accomplished
                            </th>
                            <th scope="col"
                                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Mood
                            </th>
                        </tr>
                    </thead>
                    <tbody id="statusTableBody">
                        {% if daily_status_reports %}
                            {% for report in daily_status_reports %}
                                <tr class="bg-white border-b hover:bg-gray-50 transition-colors cursor-pointer"
                                    onclick="toggleRow(this)">
                                    <th scope="row"
                                        class="px-6 py-4 text-gray-900 whitespace-nowrap text-lg flex items-center">
                                        {% if report.user.userprofile.user_avatar %}
                                            <img src="{{ report.user.userprofile.user_avatar.url }}"
                                                 alt="User Avatar"
                                                 class="rounded-full mr-3"
                                                 width="40"
                                                 height="40">
                                        {% else %}
                                            <img src="{% static 'images/dummy-user.png' %}"
                                                 alt="Default Avatar"
                                                 class="rounded-full mr-3"
                                                 width="40"
                                                 height="40">
                                        {% endif %}
                                        {{ report.user.username }}
                                    </th>
                                    <td class="px-6 py-4">{{ report.date|date:"F j, Y" }}</td>
                                    <td class="px-6 py-4 expandable-content">
                                        <span class="short-text">{{ report.previous_work|slice:":25" }}...</span>
                                        <span class="full-text hidden">{{ report.previous_work }}</span>
                                    </td>
                                    <td class="px-6 py-4 expandable-content">
                                        <span class="short-text">{{ report.next_plan|slice:":25" }}...</span>
                                        <span class="full-text hidden">{{ report.next_plan }}</span>
                                    </td>
                                    <td class="px-6 py-4 expandable-content">
                                        <span class="short-text">{{ report.blockers|slice:":25" }}...</span>
                                        <span class="full-text hidden">{{ report.blockers }}</span>
                                    </td>
                                    <td class="px-6 py-4">
                                        {% if report.goal_accomplished %}
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Yes</span>
                                        {% else %}
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">No</span>
                                        {% endif %}
                                    </td>
                                    <td class="px-6 py-4">{{ report.current_mood }}</td>
                                </tr>
                            {% endfor %}
                        {% else %}
                            <tr class="bg-white border-b">
                                <th scope="row"
                                    class="px-6 py-4 font-medium text-red-500 whitespace-nowrap">No Reports Found</th>
                            </tr>
                        {% endif %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <script>
        function toggleRow(row) {
            const expandableContents = row.getElementsByClassName('expandable-content');
            for (let content of expandableContents) {
                const shortText = content.querySelector('.short-text');
                const fullText = content.querySelector('.full-text');
                
                if (shortText.classList.contains('hidden')) {
                    shortText.classList.remove('hidden');
                    fullText.classList.add('hidden');
                } else {
                    shortText.classList.add('hidden');
                    fullText.classList.remove('hidden');
                }
            }
        }
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const tableBody = document.getElementById('statusTableBody');
            const tabButtons = document.querySelectorAll('.tab-button');
            const filterPanels = document.querySelectorAll('.filter-panel');
            let currentTab = null;
            let taskSearchTimeout = null;

            function updateTable(data) {
                tableBody.innerHTML = '';
                data.forEach(report => {
                    const row = document.createElement('tr');
                    row.className = 'bg-white border-b hover:bg-gray-50 transition-colors cursor-pointer';
                    row.onclick = () => toggleRow(row);
                    
                    row.innerHTML = `
                        <th scope="row" class="px-6 py-4 text-gray-900 whitespace-nowrap text-lg flex items-center">
                            <img src="${report.avatar_url || '/static/images/dummy-user.png'}" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
                            ${report.username}
                        </th>
                        <td class="px-6 py-4">${report.date}</td>
                        <td class="px-6 py-4 expandable-content">
                            <span class="short-text">${report.previous_work.slice(0, 25)}...</span>
                            <span class="full-text hidden">${report.previous_work}</span>
                        </td>
                        <td class="px-6 py-4 expandable-content">
                            <span class="short-text">${report.next_plan.slice(0, 25)}...</span>
                            <span class="full-text hidden">${report.next_plan}</span>
                        </td>
                        <td class="px-6 py-4 expandable-content">
                            <span class="short-text">${report.blockers.slice(0, 25)}...</span>
                            <span class="full-text hidden">${report.blockers}</span>
                        </td>
                        <td class="px-6 py-4">
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${report.goal_accomplished ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}">
                                ${report.goal_accomplished ? 'Yes' : 'No'}
                            </span>
                        </td>
                        <td class="px-6 py-4">${report.current_mood}</td>
                    `;
                    tableBody.appendChild(row);
                });
            }

            function fetchFilteredData(filterType, filterValue) {
                const url = new URL(window.location.href);
                url.searchParams.set('filter_type', filterType);
                url.searchParams.set('filter_value', filterValue);

                fetch(url, {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    updateTable(data.data);
                    if (data.data.length === 0) {
                        tableBody.innerHTML = `
                            <tr>
                                <td colspan="7" class="px-6 py-4 text-center text-gray-500">
                                    No reports found for the selected filter.
                                </td>
                            </tr>
                        `;
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    tableBody.innerHTML = `
                            <tr>
                                <td colspan="7" class="px-6 py-4 text-center text-red-500">
                                    Error fetching data. Please try again.
                                </td>
                            </tr>
                        `;
                });
            }

            function switchTab(tabName) {
                tabButtons.forEach(button => {
                    if (button.dataset.tab === tabName) {
                        button.classList.add('border-indigo-500', 'text-indigo-600');
                        button.classList.remove('border-transparent', 'text-gray-500');
                    } else {
                        button.classList.remove('border-indigo-500', 'text-indigo-600');
                        button.classList.add('border-transparent', 'text-gray-500');
                    }
                });

                filterPanels.forEach(panel => {
                    panel.classList.add('hidden');
                });
                document.getElementById(`${tabName}-panel`).classList.remove('hidden');
                
                if (currentTab !== tabName) {
                    document.getElementById('user-filter').value = '';
                    document.getElementById('date-filter').value = '';
                    document.getElementById('goal-filter').value = '';
                    document.getElementById('task-filter').value = '';
                    fetchFilteredData('none', '');
                }
                
                currentTab = tabName;
            }

            tabButtons.forEach(button => {
                button.addEventListener('click', () => {
                    switchTab(button.dataset.tab);
                });
            });

            document.getElementById('user-filter').addEventListener('change', function() {
                if (this.value) {
                    fetchFilteredData('user', this.value);
                } else {
                    fetchFilteredData('none', '');
                }
            });

            document.getElementById('date-filter').addEventListener('change', function() {
                if (this.value) {
                    fetchFilteredData('date', this.value);
                } else {
                    fetchFilteredData('none', '');
                }
            });

            document.getElementById('goal-filter').addEventListener('change', function() {
                if (this.value) {
                    fetchFilteredData('goal', this.value);
                } else {
                    fetchFilteredData('none', '');
                }
            });

            document.getElementById('task-filter').addEventListener('input', function() {
                clearTimeout(taskSearchTimeout);
                const searchValue = this.value.trim();
                
                taskSearchTimeout = setTimeout(() => {
                    if (searchValue) {
                        fetchFilteredData('task', searchValue);
                    } else {
                        fetchFilteredData('none', '');
                    }
                }, 300);
            });

            switchTab('user');
        });
    </script>
{% endblock body %}