document.addEventListener('DOMContentLoaded', function() {
    // Tab switching functionality
    const tabButtons = document.querySelectorAll('.tab-btn');
    const tabContents = document.querySelectorAll('.tab-content');
    
    tabButtons.forEach(button => {
        button.addEventListener('click', () => {
            tabButtons.forEach(btn => btn.classList.remove('active'));
            tabContents.forEach(content => content.classList.remove('active'));
            
            button.classList.add('active');
            const tabId = button.getAttribute('data-tab');
            document.getElementById(tabId).classList.add('active');
        });
    });

    // Mock data - in a real app, this would come from an API
    const playersData = [
        {
            id: 1,
            name: "Sipho Mthembu",
            position: "Flyhalf",
            years: "2016-2019",
            varsityShield: true,
            clubsAfter: ["Border Bulldogs", "EP Elephants"],
            graduated: true,
            qualifications: "BSc Computer Science",
            photo: "http://static.photos/sport/200x200/1"
        },
        {
            id: 2,
            name: "Lungelo Ndlovu",
            position: "Prop",
            years: "2014-2018",
            varsityShield: true,
            clubsAfter: ["Sharks Academy", "Pumas"],
            graduated: true,
            qualifications: "BA Education",
            photo: "http://static.photos/sport/200x200/2"
        },
        {
            id: 3,
            name: "Thando Dlamini",
            position: "Center",
            years: "2019-Present",
            varsityShield: true,
            clubsAfter: [],
            graduated: false,
            qualifications: "In Progress: BCom",
            photo: "http://static.photos/sport/200x200/3"
        }
    ];

    const coachesData = [
        {
            id: 1,
            name: "Mike Venter",
            role: "Head Coach",
            years: "2016-2020",
            achievements: "Varsity Shield Qualification 2016",
            photo: "http://static.photos/people/200x200/1"
        },
        {
            id: 2,
            name: "Nomvula Khumalo",
            role: "Skills Coach",
            years: "2018-Present",
            achievements: "Developed backline play system",
            photo: "http://static.photos/people/200x200/2"
        }
    ];

    // Render players table
    function renderPlayersTable(players) {
        const tableBody = document.getElementById('players-data');
        tableBody.innerHTML = '';
        
        players.forEach(player => {
            const row = document.createElement('tr');
            
            row.innerHTML = `
                <td><img src="${player.photo}" alt="${player.name}" class="player-photo"></td>
                <td>${player.name}</td>
                <td>${player.position}</td>
                <td>${player.years}</td>
                <td class="${player.varsityShield ? 'varsity-shield' : ''}">
                    ${player.varsityShield ? 'Yes' : 'No'}
                </td>
                <td>${player.clubsAfter.join(', ') || 'N/A'}</td>
                <td class="${player.graduated ? 'graduated' : 'not-graduated'}">
                    ${player.graduated ? 'Graduated' : 'Current Student'}
                </td>
                <td>${player.qualifications}</td>
            `;
            
            tableBody.appendChild(row);
        });
    }

    // Render coaches table
    function renderCoachesTable(coaches) {
        const tableBody = document.getElementById('coaches-data');
        tableBody.innerHTML = '';
        
        coaches.forEach(coach => {
            const row = document.createElement('tr');
            
            row.innerHTML = `
                <td><img src="${coach.photo}" alt="${coach.name}" class="player-photo"></td>
                <td>${coach.name}</td>
                <td>${coach.role}</td>
                <td>${coach.years}</td>
                <td>${coach.achievements}</td>
            `;
            
            tableBody.appendChild(row);
        });
    }

    // Filter functionality
    document.getElementById('search-btn').addEventListener('click', function() {
        const yearFilter = document.getElementById('year-filter').value;
        const statusFilter = document.getElementById('status-filter').value;
        
        let filteredPlayers = [...playersData];
        
        if (yearFilter === '2016') {
            filteredPlayers = filteredPlayers.filter(player => player.years.split('-').some(year => parseInt(year) >= 2016));
        } else if (yearFilter === '2010') {
            filteredPlayers = filteredPlayers.filter(player => player.years.split('-').every(year => parseInt(year) <= 2015));
        }
        
        if (statusFilter === 'graduated') {
            filteredPlayers = filteredPlayers.filter(player => player.graduated);
        } else if (statusFilter === 'current') {
            filteredPlayers = filteredPlayers.filter(player => !player.graduated);
        }
        
        renderPlayersTable(filteredPlayers);
    });

    // Initial render
    renderPlayersTable(playersData);
    renderCoachesTable(coachesData);
});