<?php
// Redirect naar admin.php
if (function_exists('header')) {
    header('Location: admin.php', true, 301);
    exit;
}
?>
<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="refresh" content="0; url=admin.php">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Portaal - VV Dongen 6</title>
    <script>window.location.replace('admin.php');</script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body { 
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        /* Login Page Styling */
        #loginSection {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 20px;
        }
        
        .login-container {
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            padding: 50px 40px;
            max-width: 450px;
            width: 100%;
            text-align: center;
            animation: slideIn 0.5s ease-out;
        }
        
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .login-logo {
            width: 120px;
            height: 120px;
            margin: 0 auto 20px;
            filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
        }
        
        .login-title {
            color: #333;
            font-size: 28px;
            font-weight: 600;
            margin-bottom: 10px;
        }
        
        .login-subtitle {
            color: #666;
            font-size: 16px;
            margin-bottom: 30px;
        }
        
        .login-form {
            margin-top: 30px;
        }
        
        .form-group {
            margin-bottom: 25px;
            text-align: left;
        }
        
        .form-group label {
            display: block;
            color: #555;
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 8px;
        }
        
        .password-input-wrapper {
            position: relative;
        }
        
        .form-group input {
            width: 100%;
            padding: 14px 45px 14px 16px;
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            font-size: 15px;
            transition: all 0.3s ease;
        }
        
        .form-group input:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        }
        
        .password-toggle {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: #999;
            transition: color 0.3s;
        }
        
        .password-toggle:hover {
            color: #667eea;
        }
        
        .login-btn {
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
        }
        
        .login-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
        }
        
        .login-btn:active {
            transform: translateY(0);
        }
        
        .login-hint {
            margin-top: 20px;
            padding: 12px;
            background: #f0f4ff;
            border-radius: 8px;
            color: #667eea;
            font-size: 13px;
            border-left: 3px solid #667eea;
        }
        
        .login-hint i {
            margin-right: 8px;
        }
        
        /* Dashboard Styling */
        #adminDashboard {
            display: none;
            background: #f5f7fa;
            min-height: 100vh;
        }
        
        .dashboard-header {
            background: white;
            padding: 20px 30px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
        }
        
        .dashboard-title {
            font-size: 24px;
            color: #333;
            font-weight: 600;
        }
        
        .dashboard-actions {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        
        .btn {
            padding: 10px 20px;
            background: #667eea;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
        }
        
        .btn:hover {
            background: #5568d3;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
        }
        
        .btn i {
            margin-right: 6px;
        }
        
        .dashboard-content {
            padding: 30px;
            max-width: 1400px;
            margin: 0 auto;
        }
        
        .section {
            background: white;
            border-radius: 12px;
            padding: 25px;
            margin-bottom: 25px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        }
        
        .section h2 {
            color: #333;
            font-size: 20px;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid #f0f0f0;
        }
        
        .item {
            background: #f9fafb;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 12px;
            border-left: 3px solid #667eea;
            display: flex;
            align-items: center;
            gap: 15px;
            flex-wrap: wrap;
        }
        
        .item > *:last-child {
            margin-left: auto;
        }
        
        input, select, textarea {
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
        }
        
        input:focus, select:focus, textarea:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }
    </style>
</head>
<body>
    <!-- Login Section -->
    <div id="loginSection">
        <div class="login-container">
            <img src="logo.png" alt="VV Dongen 6" class="login-logo">
            <h1 class="login-title">Admin Portaal</h1>
            <p class="login-subtitle">VV Dongen 6 - Beheer Paneel</p>
            
            <form class="login-form" onsubmit="handleLogin(event)">
            <div class="form-group">
                    <label for="username">
                        <i class="fas fa-user"></i> Gebruikersnaam
                    </label>
                    <input type="text" id="username" placeholder="Voer je gebruikersnaam in" required autocomplete="username">
            </div>
                <div class="form-group">
                    <label for="password">
                        <i class="fas fa-lock"></i> Wachtwoord
                    </label>
                    <div class="password-input-wrapper">
                        <input type="password" id="password" placeholder="Voer je wachtwoord in" required autocomplete="current-password">
                        <i class="fas fa-eye password-toggle" onclick="togglePassword()" id="toggleIcon"></i>
                    </div>
                </div>
                <button type="submit" class="login-btn">
                    <i class="fas fa-sign-in-alt"></i> Inloggen
                </button>
        </form>
        </div>
    </div>

    <!-- Admin Dashboard -->
    <div id="adminDashboard">
        <div class="dashboard-header">
            <div class="dashboard-title">
                <i class="fas fa-tachometer-alt"></i> Admin Dashboard - VV Dongen 6
            </div>
            <div class="dashboard-actions">
                <a href="index.html" class="btn" target="_blank">
                    <i class="fas fa-home"></i> Website Bekijken
                </a>
                <button class="btn" onclick="saveAllData()">
                    <i class="fas fa-save"></i> Alles Opslaan
                </button>
                <button class="btn" onclick="showChangePasswordModal()" style="background: #4caf50;">
                    <i class="fas fa-key"></i> Wachtwoord Wijzigen
                </button>
                <button class="btn" onclick="handleLogout()" style="background: #666;">
                    <i class="fas fa-sign-out-alt"></i> Uitloggen
                </button>
            </div>
        </div>
        
        <div class="dashboard-content">
        <div class="section">
                <h2><i class="fas fa-futbol"></i> Wedstrijden Beheren</h2>
                <button class="btn" onclick="addMatch()">
                    <i class="fas fa-plus"></i> Nieuwe Wedstrijd
                </button>
            <div id="matchesList"></div>
        </div>

        <div class="section">
                <h2><i class="fas fa-people-group"></i> Training Opkomst</h2>
                <p style="color: #666; margin-bottom: 20px; font-size: 14px;">
                    Houd de aanwezigheid van de laatste trainingen bij. Deze gegevens verschijnen als statistiekenkaart onder de wedstrijden.
                </p>
                <button class="btn" onclick="addAttendanceEntry()">
                    <i class="fas fa-plus"></i> Nieuwe Registratie
                </button>
            <div id="attendanceList" style="margin-top: 20px;"></div>
        </div>

        <div class="section">
                <h2><i class="fas fa-coins"></i> Teamkas Beheren</h2>
                <div style="display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 20px;">
                    <div style="flex: 1; min-width: 220px; background: linear-gradient(135deg, #1e3c72 0%, #4a90e2 100%); color: white; padding: 18px; border-radius: 12px; box-shadow: 0 6px 16px rgba(30, 60, 114, 0.3);">
                        <h3 style="margin: 0 0 10px 0; font-size: 18px; display: flex; align-items: center; gap: 8px;">
                            <i class="fas fa-wallet"></i> Saldo
                        </h3>
                        <div id="fundBalance" style="font-size: 28px; font-weight: 700;">€ 0,00</div>
                        <small id="fundTotals" style="display: block; margin-top: 8px; opacity: 0.85;">Inkomsten: € 0,00 • Uitgaven: € 0,00</small>
                    </div>
                    <div style="flex: 1; min-width: 220px; background: #f3f6ff; padding: 18px; border-radius: 12px; border: 1px solid #dbe3ff;">
                        <h3 style="margin: 0 0 10px 0; font-size: 16px; color: #1e3c72; display: flex; align-items: center; gap: 8px;">
                            <i class="fas fa-receipt"></i> Laatste uitgaven
                        </h3>
                        <ul id="recentExpensesList" style="list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; color: #333; font-size: 14px;">
                            <li style="opacity: 0.7;">Nog geen uitgaven geregistreerd</li>
                        </ul>
                    </div>
                </div>
                <button class="btn" onclick="addFundTransaction()" style="margin-bottom: 20px;">
                    <i class="fas fa-plus-circle"></i> Nieuwe In/Uitgave
                </button>
            <div id="fundTransactionsList"></div>
        </div>

        <div class="section">
                <h2><i class="fas fa-users"></i> Team Beheren</h2>
                <button class="btn" onclick="addPlayer()">
                    <i class="fas fa-user-plus"></i> Nieuwe Speler/Staf
                </button>
            <div id="teamList"></div>
        </div>

        <div class="section">
                <h2><i class="fas fa-photo-video"></i> Media Beheren</h2>
                <button class="btn" onclick="addMedia()">
                    <i class="fas fa-upload"></i> Nieuwe Media
                </button>
            <div id="mediaList"></div>
        </div>

        <div class="section">
                <h2><i class="fas fa-handshake"></i> Sponsors Beheren</h2>
                <button class="btn" onclick="addSponsor()">
                    <i class="fas fa-building"></i> Nieuwe Sponsor
                </button>
            <div id="sponsorsList"></div>
        </div>
            
            <div class="section">
                <h2><i class="fas fa-users-cog"></i> Gebruikers Beheren</h2>
                <button class="btn" onclick="addUser()">
                    <i class="fas fa-user-plus"></i> Nieuwe Gebruiker
                </button>
                <div id="usersList"></div>
    </div>

            <div class="section">
                <h2><i class="fas fa-share-alt"></i> Social Media Beheren</h2>
                <p style="color: #666; margin-bottom: 20px; font-size: 14px;">
                    Voeg links toe naar jullie social media kanalen. Laat leeg om uit te schakelen.
                </p>
                <div id="socialMediaList"></div>
            </div>

            <div class="section" style="border: 2px solid #ff6b6b; background: #fff5f5;">
                <h2 style="color: #d63031;"><i class="fas fa-calendar-alt"></i> Seizoen Beheer</h2>
                <p style="color: #666; margin-bottom: 20px; font-size: 14px;">
                    Reset alle seizoen-specifieke data voor het nieuwe seizoen 2026-2027. Dit wist alle wedstrijden en statistieken.
                </p>
                
                <div style="background: #ffe8e8; padding: 15px; border-radius: 8px; margin-bottom: 20px; border-left: 4px solid #ff6b6b;">
                    <h4 style="color: #d63031; margin: 0 0 10px 0;"><i class="fas fa-exclamation-triangle"></i> Waarschuwing</h4>
                    <p style="margin: 0; color: #666; font-size: 13px;">
                        Deze actie kan niet ongedaan worden gemaakt. Maak altijd eerst een backup!
                    </p>
                </div>

                <div style="display: flex; gap: 15px; flex-wrap: wrap;">
                    <button class="btn" onclick="showSeasonResetModal()" style="background: #ff6b6b; color: white;">
                        <i class="fas fa-calendar-times"></i> Reset Seizoen
                    </button>
                    <button class="btn" onclick="showBackupModal()" style="background: #74b9ff;">
                        <i class="fas fa-download"></i> Maak Backup
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // API Client voor server communicatie - EMBEDDED
        const API_BASE_URL = './api.php';

        // API Helper functies
        async function apiRequest(endpoint, method = 'GET', data = null) {
            const url = `${API_BASE_URL}${endpoint}`;
            console.log(`API Request: ${method} ${url}`);
            if (data) { console.log('Request data:', data); }
            
            const options = {
                method: method,
                headers: { 'Content-Type': 'application/json' },
            };
            
            if (data && method !== 'GET') {
                options.body = JSON.stringify(data);
                console.log('Request body:', options.body.substring(0, 200) + '...');
            }
            
            try {
                const response = await fetch(url, options);
                console.log(`Response status: ${response.status} ${response.statusText}`);
                
                if (!response.ok) {
                    const errorText = await response.text();
                    console.error('Error response:', errorText);
                    throw new Error(`HTTP error! status: ${response.status}, message: ${errorText}`);
                }
                
                const result = await response.json();
                console.log('Response data:', result);
                return result;
            } catch (error) {
                console.error('API request failed:', error);
                throw error;
            }
        }

        // Data management class
        class DataManager {
            constructor() {
                this.currentData = { matches: [], team: [], media: [], sponsors: [], scorers: [], assists: [], trainingAttendance: [], fundTransactions: [], fundSummary: { balance: 0, totalIncome: 0, totalExpense: 0, recentExpenses: [] } };
            }
            
            async loadAllData() {
                try {
                    this.currentData = await apiRequest('/api/data');
                    return this.currentData;
                } catch (error) {
                    console.error('Failed to load data:', error);
                    return this.loadFromLocalStorage();
                }
            }
            
            async saveAllData() {
                try {
                    const mappedData = {
                        matches: this.currentData.matches ? this.currentData.matches.map(match => ({
                            date: match.date,
                            awayTeam: match.awayTeam || match.away_team || '',
                            homeTeam: match.homeTeam ?? match.home_team ?? 'VV Dongen 6',
                            homeScore: match.homeScore ?? match.home_score ?? 0,
                            awayScore: match.awayScore ?? match.away_score ?? 0,
                            goals: match.goals || '',
                            assists: match.assists || '',
                            opponentLogo: match.opponentLogo || match.opponent_logo || '',
                            matchReport: match.matchReport || match.match_report || null,
                            matchPlayed: match.matchPlayed !== undefined ? match.matchPlayed : true,
                            // Locatie velden - zorg voor standaard waarden
                            location: match.location || '',
                            latitude: match.latitude !== undefined ? match.latitude : null,
                            longitude: match.longitude !== undefined ? match.longitude : null,
                            time: match.time || null,
                            wazeLink: match.wazeLink || match.waze_link || null
                        })) : [],
                        team: this.currentData.team || [], media: this.currentData.media || [],
                        sponsors: this.currentData.sponsors || [],
                        scorers: this.currentData.scorers ? this.currentData.scorers.map(scorer => ({
                            name: scorer.name || scorer.player_name, goals: scorer.goals || 0
                        })) : [],
                        assists: this.currentData.assists ? this.currentData.assists.map(assist => ({
                            name: assist.name || assist.player_name, assists: assist.assists || 0
                        })) : [],
                        trainingAttendance: this.currentData.trainingAttendance ? this.currentData.trainingAttendance.map(entry => ({
                            weekDate: entry.weekDate || entry.week_date || entry.date,
                            weekLabel: entry.weekLabel || entry.week_label || null,
                            playersPresent: entry.playersPresent ?? entry.players_present ?? 0,
                            playersTotal: entry.playersTotal ?? entry.players_total ?? null,
                            notes: entry.notes || entry.comment || null
                        })) : [],
                        fundTransactions: this.currentData.fundTransactions ? this.currentData.fundTransactions.map(tx => ({
                            transactionDate: tx.transactionDate || tx.transaction_date || tx.date,
                            description: tx.description || '',
                            amount: typeof tx.amount === 'number' ? tx.amount : parseFloat(tx.amount || 0),
                            type: tx.type || (tx.amount >= 0 ? 'income' : 'expense')
                        })) : []
                    };
                    await apiRequest('/api/data', 'POST', mappedData);
                    return true;
                } catch (error) {
                    console.error('Failed to save data:', error);
                    this.saveToLocalStorage();
                    return false;
                }
            }
            
            loadFromLocalStorage() {
                const savedData = localStorage.getItem('vvDongen6_data');
                if (savedData) { this.currentData = JSON.parse(savedData); }
                return this.currentData;
            }
            
            saveToLocalStorage() {
                localStorage.setItem('vvDongen6_data', JSON.stringify(this.currentData));
            }
        }

        // Global data manager instance
        const dataManager = new DataManager();
    </script>
    <script>
        // Password toggle functionality
        function togglePassword() {
            const passwordInput = document.getElementById('password');
            const toggleIcon = document.getElementById('toggleIcon');
            
            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                toggleIcon.classList.remove('fa-eye');
                toggleIcon.classList.add('fa-eye-slash');
            } else {
                passwordInput.type = 'password';
                toggleIcon.classList.remove('fa-eye-slash');
                toggleIcon.classList.add('fa-eye');
            }
        }
        
        // Login function
        async function handleLogin(event) {
            event.preventDefault();
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const loginBtn = event.target.querySelector('button[type="submit"]');
            
            // Disable button during login
            loginBtn.disabled = true;
            loginBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Inloggen...';
            
            try {
                const response = await fetch('./auth.php', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ action: 'login', username, password })
                });
                
                const result = await response.json();
                
                if (result.success) {
                    // Store user info
                    sessionStorage.setItem('user', JSON.stringify(result.user));
                    
                    // Show dashboard
                document.getElementById('loginSection').style.display = 'none';
                document.getElementById('adminDashboard').style.display = 'block';
                    
                    // Update header with user info
                    document.querySelector('.dashboard-title').innerHTML = `
                        <i class="fas fa-tachometer-alt"></i> Admin Dashboard
                        <small style="font-size: 14px; color: #999; margin-left: 15px;">Ingelogd als: ${result.user.full_name}</small>
                    `;
                    
                loadAllData();
            } else {
                    throw new Error(result.error || 'Login mislukt');
                }
            } catch (error) {
                console.error('Login error:', error);
                alert('❌ Login mislukt!\n\n' + error.message);
                loginBtn.disabled = false;
                loginBtn.innerHTML = '<i class="fas fa-sign-in-alt"></i> Inloggen';
            }
        }
        
        // Logout function
        async function handleLogout() {
            if (confirm('Weet je zeker dat je wilt uitloggen?')) {
                try {
                    await fetch('./auth.php?action=logout', { method: 'POST' });
                    sessionStorage.removeItem('user');
                    location.reload();
                } catch (error) {
                    console.error('Logout error:', error);
                    location.reload();
                }
            }
        }
        
        // Check if already logged in
        async function checkAuth() {
            try {
                const response = await fetch('./auth.php?action=check');
                const result = await response.json();
                
                if (result.authenticated) {
                    document.getElementById('loginSection').style.display = 'none';
                    document.getElementById('adminDashboard').style.display = 'block';
                    document.querySelector('.dashboard-title').innerHTML = `
                        <i class="fas fa-tachometer-alt"></i> Admin Dashboard
                        <small style="font-size: 14px; color: #999; margin-left: 15px;">Ingelogd als: ${result.user.full_name}</small>
                    `;
                    loadAllData();
                }
            } catch (error) {
                console.log('Not authenticated');
            }
        }
        
        // Check auth on page load
        checkAuth();

        // Data management
        let currentData = {
            matches: [],
            team: [],
            media: [],
            sponsors: [],
            trainingAttendance: [],
            fundTransactions: [],
            fundSummary: { balance: 0, totalIncome: 0, totalExpense: 0, recentExpenses: [] }
        };

        async function loadAllData() {
            // Load users list
            loadUsers();
            
            // Load social media
            loadSocialMediaAdmin();
            
            try {
                currentData = await dataManager.loadAllData();
                
                // Map database field names for display
                if (currentData.matches) {
                    currentData.matches = currentData.matches.map(match => ({
                        ...match,
                        homeTeam: match.home_team || match.homeTeam || 'VV Dongen 6',
                        awayTeam: match.away_team || match.awayTeam,
                        homeScore: match.home_score ?? match.homeScore ?? 0,
                        awayScore: match.away_score ?? match.awayScore ?? 0,
                        opponentLogo: match.opponent_logo || match.opponentLogo || '',
                        matchPlayed: match.matchPlayed !== undefined ? match.matchPlayed : true,
                            // Locatie velden
                            location: match.location || '',
                            latitude: match.latitude || null,
                            longitude: match.longitude || null,
                            time: match.time || null,
                            wazeLink: match.wazeLink || match.waze_link || null
                    }));
                }
                
                if (currentData.scorers) {
                    currentData.scorers = currentData.scorers.map(scorer => ({
                        ...scorer,
                        name: scorer.player_name || scorer.name,
                        goals: scorer.goals
                    }));
                }
                
                if (currentData.assists) {
                    currentData.assists = currentData.assists.map(assist => ({
                        ...assist,
                        name: assist.player_name || assist.name,
                        assists: assist.assists
                    }));
                }

                if (currentData.trainingAttendance) {
                    currentData.trainingAttendance = currentData.trainingAttendance.map(entry => {
                        const rawDate = entry.week_date || entry.weekDate || entry.date || null;
                        const presentValue = entry.players_present ?? entry.playersPresent ?? 0;
                        const totalValue = entry.players_total ?? entry.playersTotal;
                        const parsedPresent = parseInt(presentValue, 10);
                        const parsedTotal = (totalValue === null || totalValue === undefined || totalValue === '') ? null : parseInt(totalValue, 10);

                        return {
                            ...entry,
                            id: entry.id ?? entry.attendance_id ?? `att-${Date.now()}-${Math.random().toString(36).substring(2, 8)}`,
                            weekDate: rawDate,
                            date: rawDate,
                            weekLabel: entry.weekLabel || entry.week_label || '',
                            playersPresent: Number.isFinite(parsedPresent) ? parsedPresent : 0,
                            playersTotal: Number.isFinite(parsedTotal) ? parsedTotal : null,
                            notes: entry.notes ?? entry.comment ?? ''
                        };
                    }).sort((a, b) => {
                        const aDate = new Date(a.date);
                        const bDate = new Date(b.date);
                        return bDate - aDate;
                    });
                } else {
                    currentData.trainingAttendance = [];
                }

                if (currentData.fund) {
                    const fundTransactions = currentData.fund.transactions || [];
                    currentData.fundTransactions = fundTransactions.map(tx => ({
                        ...tx,
                        id: tx.id ?? `fund-${Date.now()}-${Math.random().toString(36).substring(2, 8)}`,
                        transactionDate: tx.transaction_date || tx.transactionDate || tx.date,
                        amount: typeof tx.amount === 'number' ? tx.amount : parseFloat(tx.amount || 0),
                        type: tx.type || (tx.amount >= 0 ? 'income' : 'expense'),
                        description: tx.description || ''
                    }));
                    currentData.fundSummary = {
                        balance: currentData.fund.balance ?? 0,
                        totalIncome: currentData.fund.totalIncome ?? 0,
                        totalExpense: currentData.fund.totalExpense ?? 0,
                        recentExpenses: (currentData.fund.recentExpenses || []).map(exp => ({
                            ...exp,
                            amount: typeof exp.amount === 'number' ? exp.amount : parseFloat(exp.amount || 0),
                            transactionDate: exp.transaction_date || exp.transactionDate || exp.date
                        }))
                    };
                } else {
                    currentData.fundTransactions = currentData.fundTransactions || [];
                    currentData.fundSummary = currentData.fundSummary || { balance: 0, totalIncome: 0, totalExpense: 0, recentExpenses: [] };
                }

                delete currentData.fund;

                dataManager.currentData = currentData;
                renderAllData();
                console.log('Data loaded from server');
            } catch (error) {
                console.error('Failed to load data:', error);
                // Fallback to localStorage
                const savedData = localStorage.getItem('vvDongen6_data');
                if (savedData) {
                    currentData = JSON.parse(savedData);
                    if (!currentData.fundTransactions) currentData.fundTransactions = [];
                    if (!currentData.fundSummary) currentData.fundSummary = { balance: 0, totalIncome: 0, totalExpense: 0, recentExpenses: [] };
                    dataManager.currentData = currentData;
                    renderAllData();
                }
            }
        }

        function renderAllData() {
            renderMatches();
            renderTeam();
            renderMedia();
            renderSponsors();
            renderTrainingAttendance();
            renderFundOverview();
        }

        function renderMatches() {
            const container = document.getElementById('matchesList');
            container.innerHTML = '';
            
            currentData.matches.forEach(match => {
                const matchDiv = document.createElement('div');
                matchDiv.className = 'item';
                
                // Bepaal of VV Dongen 6 thuis of uit speelt
                const isVVHome = match.homeTeam === 'VV Dongen 6';
                const vvScore = isVVHome ? match.homeScore : match.awayScore;
                const opponentScore = isVVHome ? match.awayScore : match.homeScore;
                const opponent = isVVHome ? match.awayTeam : match.homeTeam;
                const matchType = isVVHome ? '🏠 Thuis' : '✈️ Uit';
                const opponentLogo = match.opponentLogo || '';
                
                matchDiv.innerHTML = `
                    <img src="logo.png" alt="VV Dongen 6" style="width: 40px; height: 40px; object-fit: contain; border: 1px solid #0066cc; padding: 5px; background: white; border-radius: 5px;">
                    <span style="font-size: 18px; font-weight: bold; color: #999;">VS</span>
                    ${opponentLogo ? `<img src="${opponentLogo}" alt="${opponent}" style="width: 40px; height: 40px; object-fit: contain; border: 1px solid #ddd; padding: 5px; background: white; border-radius: 5px;" onerror="this.style.display='none'">` : '<div style="width: 40px; height: 40px; border: 1px solid #ddd; background: #f5f5f5; border-radius: 5px;"></div>'}
                    <div style="flex: 1;">
                        <strong>${match.date}</strong> <span style="background: ${isVVHome ? '#e8f5e9' : '#fff3e0'}; padding: 2px 8px; border-radius: 3px; font-size: 12px;">${matchType}</span>
                        <br><strong>VV Dongen 6</strong> ${vvScore} - ${opponentScore} <strong>${opponent}</strong>
                    <br><small>Doelpunten: ${match.goals || 'Geen'}</small>
                    ${match.assists ? `<br><small>Assists: ${match.assists}</small>` : ''}
                    </div>
                    <div style="display: flex; gap: 8px;">
                        <button onclick="editMatch(${match.id})" style="background: #ff9800; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 13px; transition: all 0.3s; display: inline-flex; align-items: center; gap: 6px;" onmouseover="this.style.background='#f57c00'" onmouseout="this.style.background='#ff9800'">
                            <i class="fas fa-edit"></i> Bewerken
                        </button>
                        <button onclick="deleteMatch(${match.id})" style="background: #f44336; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 13px; transition: all 0.3s; display: inline-flex; align-items: center; gap: 6px;" onmouseover="this.style.background='#d32f2f'" onmouseout="this.style.background='#f44336'">
                            <i class="fas fa-trash"></i> Verwijderen
                        </button>
                    </div>
                `;
                container.appendChild(matchDiv);
            });
        }

        function renderTeam() {
            const container = document.getElementById('teamList');
            container.innerHTML = '';
            
            currentData.team.forEach(player => {
                const playerDiv = document.createElement('div');
                playerDiv.className = 'item';
                playerDiv.innerHTML = `
                    <div style="flex: 1;">
                    <strong>${player.name}</strong> - ${player.position}
                    </div>
                    <div style="display: flex; gap: 8px;">
                        <button onclick="editPlayer(${player.id})" style="background: #ff9800; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 13px; transition: all 0.3s; display: inline-flex; align-items: center; gap: 6px;" onmouseover="this.style.background='#f57c00'" onmouseout="this.style.background='#ff9800'">
                            <i class="fas fa-edit"></i> Bewerken
                        </button>
                        <button onclick="deletePlayer(${player.id})" style="background: #f44336; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 13px; transition: all 0.3s; display: inline-flex; align-items: center; gap: 6px;" onmouseover="this.style.background='#d32f2f'" onmouseout="this.style.background='#f44336'">
                            <i class="fas fa-trash"></i> Verwijderen
                        </button>
                    </div>
                `;
                container.appendChild(playerDiv);
            });
        }

        function renderMedia() {
            const container = document.getElementById('mediaList');
            container.innerHTML = '';
            
            currentData.media.forEach(media => {
                const mediaDiv = document.createElement('div');
                mediaDiv.className = 'item';
                
                // Normalize image path
                let imagePath = media.image;
                if (!imagePath.startsWith('data:') && !imagePath.startsWith('http') && !imagePath.startsWith('/')) {
                    imagePath = './' + imagePath;
                }
                
                const fileType = media.fileType || 'image';
                const isVideo = fileType.startsWith('video/') || imagePath.includes('.mp4') || imagePath.includes('.mov');
                
                mediaDiv.innerHTML = `
                        ${isVideo ? 
                        `<video src="${imagePath}" style="width: 80px; height: 60px; object-fit: cover; border: 1px solid #ddd; border-radius: 6px;"></video>` :
                        `<img src="${imagePath}" alt="${media.title}" style="width: 80px; height: 60px; object-fit: cover; border: 1px solid #ddd; border-radius: 6px;">`
                        }
                    <div style="flex: 1;">
                            <strong>${media.title}</strong>
                            <br><small>${media.date}</small>
                        <br><small>Type: ${isVideo ? '🎥 Video' : '📷 Afbeelding'}</small>
                        </div>
                    <div style="display: flex; gap: 8px;">
                        <button onclick="editMedia(${media.id})" style="background: #ff9800; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 13px; transition: all 0.3s; display: inline-flex; align-items: center; gap: 6px;" onmouseover="this.style.background='#f57c00'" onmouseout="this.style.background='#ff9800'">
                            <i class="fas fa-edit"></i> Bewerken
                        </button>
                        <button onclick="deleteMedia(${media.id})" style="background: #f44336; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 13px; transition: all 0.3s; display: inline-flex; align-items: center; gap: 6px;" onmouseover="this.style.background='#d32f2f'" onmouseout="this.style.background='#f44336'">
                            <i class="fas fa-trash"></i> Verwijderen
                        </button>
                    </div>
                `;
                container.appendChild(mediaDiv);
            });
        }

        function renderSponsors() {
            const container = document.getElementById('sponsorsList');
            container.innerHTML = '';
            
            currentData.sponsors.forEach(sponsor => {
                const sponsorDiv = document.createElement('div');
                sponsorDiv.className = 'item';
                sponsorDiv.innerHTML = `
                    <img src="${sponsor.image}" alt="${sponsor.name}" style="width: 80px; height: 60px; object-fit: contain; border: 1px solid #ddd; padding: 5px; background: white; border-radius: 6px;">
                    <div style="flex: 1;">
                            <strong>${sponsor.name}</strong>
                        ${sponsor.website ? `<br><small>Website: <a href="${sponsor.website}" target="_blank" style="color: #667eea;">${sponsor.website}</a></small>` : ''}
                        </div>
                    <div style="display: flex; gap: 8px;">
                        <button onclick="editSponsor(${sponsor.id})" style="background: #ff9800; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 13px; transition: all 0.3s; display: inline-flex; align-items: center; gap: 6px;" onmouseover="this.style.background='#f57c00'" onmouseout="this.style.background='#ff9800'">
                            <i class="fas fa-edit"></i> Bewerken
                        </button>
                        <button onclick="deleteSponsor(${sponsor.id})" style="background: #f44336; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 13px; transition: all 0.3s; display: inline-flex; align-items: center; gap: 6px;" onmouseover="this.style.background='#d32f2f'" onmouseout="this.style.background='#f44336'">
                            <i class="fas fa-trash"></i> Verwijderen
                        </button>
                    </div>
                `;
                container.appendChild(sponsorDiv);
            });
        }

        function recalculateFundSummary() {
            if (!currentData.fundTransactions) currentData.fundTransactions = [];
            let totalIncome = 0;
            let totalExpense = 0;
            
            currentData.fundTransactions.forEach(tx => {
                const amount = typeof tx.amount === 'number' ? tx.amount : parseFloat(tx.amount || 0);
                if (tx.type === 'income') {
                    totalIncome += amount;
                } else {
                    totalExpense += amount;
                }
            });
            
            const recentExpenses = currentData.fundTransactions
                .filter(tx => tx.type === 'expense')
                .sort((a, b) => new Date(b.transactionDate || b.date) - new Date(a.transactionDate || a.date))
                .slice(0, 5)
                .map(tx => ({
                    ...tx,
                    amount: typeof tx.amount === 'number' ? tx.amount : parseFloat(tx.amount || 0)
                }));
            
            currentData.fundSummary = {
                balance: totalIncome - totalExpense,
                totalIncome,
                totalExpense,
                recentExpenses
            };
        }

        function formatFundDate(dateString) {
            if (!dateString) return 'Onbekend';
            const date = new Date(dateString);
            if (Number.isNaN(date.getTime())) return dateString;
            return date.toLocaleDateString('nl-NL', { day: '2-digit', month: '2-digit', year: 'numeric' });
        }

        function formatCurrency(amount) {
            const formatter = new Intl.NumberFormat('nl-NL', { style: 'currency', currency: 'EUR' });
            return formatter.format(amount || 0);
        }

        function renderFundOverview() {
            recalculateFundSummary();
            
            const balanceEl = document.getElementById('fundBalance');
            const totalsEl = document.getElementById('fundTotals');
            const recentEl = document.getElementById('recentExpensesList');
            const listContainer = document.getElementById('fundTransactionsList');
            
            if (balanceEl) {
                const balance = currentData.fundSummary.balance || 0;
                balanceEl.textContent = formatCurrency(balance);
                balanceEl.style.color = balance >= 0 ? '#d4f4dd' : '#ffe0e0';
            }
            
            if (totalsEl) {
                totalsEl.textContent = `Inkomsten: ${formatCurrency(currentData.fundSummary.totalIncome)} • Uitgaven: ${formatCurrency(currentData.fundSummary.totalExpense)}`;
            }
            
            if (recentEl) {
                recentEl.innerHTML = '';
                if (!currentData.fundSummary.recentExpenses.length) {
                    recentEl.innerHTML = '<li style="opacity: 0.7;">Nog geen uitgaven geregistreerd</li>';
                } else {
                    currentData.fundSummary.recentExpenses.forEach(tx => {
                        const li = document.createElement('li');
                        li.innerHTML = `<strong>${formatCurrency(-tx.amount)}</strong> - ${tx.description || 'Uitgave'} <br><small>${formatFundDate(tx.transactionDate || tx.date)}</small>`;
                        recentEl.appendChild(li);
                    });
                }
            }
            
            if (listContainer) {
                listContainer.innerHTML = '';
                if (!currentData.fundTransactions.length) {
                    listContainer.innerHTML = `
                        <div style="padding: 15px; background: #f8f9fb; border-radius: 8px; border: 1px dashed #cbd5f5; color: #667eea;">
                            <i class="fas fa-info-circle"></i> Voeg de eerste transactie toe.
                        </div>
                    `;
                    return;
                }
                
                const sortedTransactions = currentData.fundTransactions.slice().sort((a, b) => {
                    const dateDiff = new Date(b.transactionDate || b.date) - new Date(a.transactionDate || a.date);
                    if (dateDiff !== 0) return dateDiff;
                    return (b.id || 0) - (a.id || 0);
                });
                
                sortedTransactions.forEach(tx => {
                    const item = document.createElement('div');
                    item.className = 'item';
                    const isIncome = tx.type === 'income';
                    const signedAmount = isIncome ? tx.amount : -tx.amount;
                    item.innerHTML = `
                        <div style="flex: 1;">
                            <strong>${formatFundDate(tx.transactionDate || tx.date)}</strong>
                            <br>${tx.description || (isIncome ? 'Inkomst' : 'Uitgave')}
                        </div>
                        <div style="min-width: 120px; text-align: right; font-weight: 600; color: ${isIncome ? '#2e7d32' : '#c0392b'};">
                            ${formatCurrency(signedAmount)}
                        </div>
                        <div style="display: flex; gap: 8px;">
                            <button onclick="editFundTransaction('${tx.id}')" style="background: #ff9800; color: white; border: none; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 12px;" onmouseover="this.style.background='#f57c00'" onmouseout="this.style.background='#ff9800'">
                                <i class="fas fa-edit"></i>
                            </button>
                            <button onclick="deleteFundTransaction('${tx.id}')" style="background: #f44336; color: white; border: none; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 12px;" onmouseover="this.style.background='#d32f2f'" onmouseout="this.style.background='#f44336'">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    `;
                    listContainer.appendChild(item);
                });
            }
        }

        function addFundTransaction() {
            openFundModal();
        }

        function editFundTransaction(id) {
            const transaction = currentData.fundTransactions.find(tx => String(tx.id) === String(id));
            if (!transaction) {
                alert('Transactie niet gevonden');
                return;
            }
            openFundModal(transaction);
        }

        function deleteFundTransaction(id) {
            if (!confirm('Weet je zeker dat je deze transactie wilt verwijderen?')) return;
            currentData.fundTransactions = currentData.fundTransactions.filter(tx => String(tx.id) !== String(id));
            dataManager.currentData.fundTransactions = currentData.fundTransactions;
            recalculateFundSummary();
            renderFundOverview();
            saveAllData();
        }

        function openFundModal(transaction = null) {
            const isEdit = !!transaction;
            const modal = document.createElement('div');
            modal.style.cssText = `
                position: fixed; top: 0; left: 0; width: 100%; height: 100%;
                background: rgba(0,0,0,0.5); z-index: 1000; display: flex;
                justify-content: center; align-items: center; padding: 20px;
                overflow-y: auto;
            `;
            
            modal.innerHTML = `
                <div style="background: white; padding: 20px; border-radius: 12px; width: 420px; max-width: 95%; margin: auto;">
                    <h3 style="margin-bottom: 15px; color: #1e3c72;">
                        <i class="fas ${isEdit ? 'fa-edit' : 'fa-plus-circle'}"></i> ${isEdit ? 'Transactie Bewerken' : 'Nieuwe Transactie'}
                    </h3>
                    <form id="fundForm">
                        <div style="margin: 12px 0;">
                            <label>Datum:</label><br>
                            <input type="date" id="fundDate" required style="width: 100%; padding: 10px; border-radius: 6px; border: 1px solid #d1d5db;">
                        </div>
                        <div style="margin: 12px 0;">
                            <label>Type:</label><br>
                            <select id="fundType" style="width: 100%; padding: 10px; border-radius: 6px; border: 1px solid #d1d5db;">
                                <option value="income">Inkomst</option>
                                <option value="expense">Uitgave</option>
                            </select>
                        </div>
                        <div style="margin: 12px 0;">
                            <label>Bedrag:</label><br>
                            <input type="number" step="0.01" id="fundAmount" min="0" required style="width: 100%; padding: 10px; border-radius: 6px; border: 1px solid #d1d5db;">
                        </div>
                        <div style="margin: 12px 0;">
                            <label>Omschrijving:</label><br>
                            <input type="text" id="fundDescription" placeholder="Bijv. Teamuitje, contributie" style="width: 100%; padding: 10px; border-radius: 6px; border: 1px solid #d1d5db;">
                        </div>
                        <div style="display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px;">
                            <button type="button" id="cancelFundBtn" style="background: #e5e7eb; color: #374151; border: none; padding: 10px 16px; border-radius: 6px; cursor: pointer;">
                                Annuleren
                            </button>
                            <button type="submit" style="background: #1e3c72; color: white; border: none; padding: 10px 16px; border-radius: 6px; cursor: pointer;">
                                ${isEdit ? 'Opslaan' : 'Toevoegen'}
                            </button>
                        </div>
                    </form>
                </div>
            `;
            
            document.body.appendChild(modal);
            
            const form = modal.querySelector('#fundForm');
            const cancelBtn = modal.querySelector('#cancelFundBtn');
            const dateInput = form.querySelector('#fundDate');
            const typeInput = form.querySelector('#fundType');
            const amountInput = form.querySelector('#fundAmount');
            const descriptionInput = form.querySelector('#fundDescription');
            
            if (isEdit) {
                dateInput.value = (transaction.transactionDate || transaction.date || '').slice(0, 10);
                typeInput.value = transaction.type || 'expense';
                amountInput.value = transaction.amount || 0;
                descriptionInput.value = transaction.description || '';
            } else {
                dateInput.value = new Date().toISOString().slice(0, 10);
                typeInput.value = 'expense';
            }
            
            cancelBtn.addEventListener('click', () => modal.remove());
            
            form.addEventListener('submit', (event) => {
                event.preventDefault();
                
                const transactionDate = dateInput.value;
                const type = typeInput.value;
                const amountValue = parseFloat(amountInput.value);
                const description = descriptionInput.value.trim();
                
                if (!transactionDate) {
                    alert('Kies een datum voor de transactie.');
                    return;
                }
                
                if (!Number.isFinite(amountValue) || amountValue < 0) {
                    alert('Voer een geldig bedrag in.');
                    return;
                }
                
                const transactionEntry = {
                    id: transaction?.id ?? `fund-${Date.now()}`,
                    transactionDate,
                    amount: Math.abs(amountValue),
                    type,
                    description
                };
                
                if (transaction) {
                    currentData.fundTransactions = currentData.fundTransactions.map(tx =>
                        String(tx.id) === String(transaction.id) ? { ...tx, ...transactionEntry } : tx
                    );
                } else {
                    currentData.fundTransactions.push(transactionEntry);
                }
                
                dataManager.currentData.fundTransactions = currentData.fundTransactions;
                recalculateFundSummary();
                renderFundOverview();
                saveAllData();
                modal.remove();
            });
        }

        function renderTrainingAttendance() {
            const container = document.getElementById('attendanceList');
            if (!container) return;
            
            container.innerHTML = '';
            const entries = (currentData.trainingAttendance || []).slice().sort((a, b) => {
                const aDate = new Date(a.date || a.weekDate);
                const bDate = new Date(b.date || b.weekDate);
                return bDate - aDate;
            });
            
            if (!entries.length) {
                container.innerHTML = `
                    <div style="padding: 15px; background: #f8f9fb; border-radius: 8px; border: 1px dashed #cbd5f5; color: #667eea;">
                        <i class="fas fa-info-circle"></i> Nog geen trainingsopkomst geregistreerd. Voeg de eerste registratie toe!
                    </div>
                `;
                return;
            }
            
            entries.forEach(entry => {
                const attendanceItem = document.createElement('div');
                attendanceItem.className = 'item';
                
                const weekLabel = formatAttendanceWeek(entry.weekLabel, entry.date || entry.weekDate);
                const dateLabel = formatAttendanceDate(entry.date || entry.weekDate);
                const present = entry.playersPresent ?? 0;
                const total = entry.playersTotal ?? null;
                const percentage = (total && total > 0) ? Math.round((present / total) * 100) : null;
                const notes = entry.notes ? `<br><small>Notitie: ${entry.notes}</small>` : '';
                
                const details = document.createElement('div');
                details.style.flex = '1';
                details.innerHTML = `
                    <strong>${weekLabel}</strong> - ${dateLabel}
                    <br><small><strong>Opkomst:</strong> ${present}${total ? ` / ${total}` : ''}${percentage !== null ? ` (${percentage}%)` : ''}</small>
                    ${notes}
                `;
                
                const actions = document.createElement('div');
                actions.style.display = 'flex';
                actions.style.gap = '8px';
                
                const editButton = document.createElement('button');
                editButton.style = "background: #ff9800; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 13px; transition: all 0.3s; display: inline-flex; align-items: center; gap: 6px;";
                editButton.innerHTML = `<i class="fas fa-edit"></i> Bewerken`;
                editButton.onmouseover = function() { this.style.background = '#f57c00'; };
                editButton.onmouseout = function() { this.style.background = '#ff9800'; };
                editButton.addEventListener('click', () => editAttendanceEntry(entry.id));
                
                const deleteButton = document.createElement('button');
                deleteButton.style = "background: #f44336; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 13px; transition: all 0.3s; display: inline-flex; align-items: center; gap: 6px;";
                deleteButton.innerHTML = `<i class="fas fa-trash"></i> Verwijderen`;
                deleteButton.onmouseover = function() { this.style.background = '#d32f2f'; };
                deleteButton.onmouseout = function() { this.style.background = '#f44336'; };
                deleteButton.addEventListener('click', () => deleteAttendanceEntry(entry.id));
                
                actions.appendChild(editButton);
                actions.appendChild(deleteButton);
                
                attendanceItem.appendChild(details);
                attendanceItem.appendChild(actions);
                container.appendChild(attendanceItem);
            });
        }

        function addAttendanceEntry() {
            openAttendanceModal();
        }

        function editAttendanceEntry(id) {
            const entry = currentData.trainingAttendance.find(item => String(item.id) === String(id));
            if (!entry) {
                alert('Registratie niet gevonden');
                return;
            }
            openAttendanceModal(entry);
        }

        function deleteAttendanceEntry(id) {
            if (!confirm('Weet je zeker dat je deze trainingsregistratie wilt verwijderen?')) return;
            currentData.trainingAttendance = currentData.trainingAttendance.filter(item => String(item.id) !== String(id));
            dataManager.currentData.trainingAttendance = currentData.trainingAttendance;
            renderTrainingAttendance();
            saveAllData();
        }

        function openAttendanceModal(entry = null) {
            const isEdit = !!entry;
            const modal = document.createElement('div');
            modal.style.cssText = `
                position: fixed; top: 0; left: 0; width: 100%; height: 100%;
                background: rgba(0,0,0,0.5); z-index: 1000; display: flex;
                justify-content: center; align-items: center; padding: 20px;
                overflow-y: auto;
            `;
            
            modal.innerHTML = `
                <div style="background: white; padding: 20px; border-radius: 12px; width: 420px; max-width: 95%; margin: auto;">
                    <h3 style="margin-bottom: 15px; color: #1e3c72;">
                        <i class="fas ${isEdit ? 'fa-edit' : 'fa-plus-circle'}"></i> ${isEdit ? 'Training Opkomst Bewerken' : 'Nieuwe Training Opkomst'}
                    </h3>
                    <form id="attendanceForm">
                        <div style="margin: 12px 0;">
                            <label>Trainingsdatum:</label><br>
                            <input type="date" id="attendanceDate" required style="width: 100%; padding: 10px; border-radius: 6px; border: 1px solid #d1d5db;">
                        </div>
                        <div style="margin: 12px 0;">
                            <label>Weeklabel (optioneel):</label><br>
                            <input type="text" id="attendanceWeekLabel" placeholder="Bijv. Week 45" style="width: 100%; padding: 10px; border-radius: 6px; border: 1px solid #d1d5db;">
                            <small style="color: #6b7280;">Laat leeg voor automatische weeknummering.</small>
                        </div>
                        <div style="margin: 12px 0;">
                            <label>Aantal aanwezigen:</label><br>
                            <input type="number" id="attendancePresent" min="0" required style="width: 100%; padding: 10px; border-radius: 6px; border: 1px solid #d1d5db;">
                        </div>
                        <div style="margin: 12px 0;">
                            <label>Totaal aantal spelers (optioneel):</label><br>
                            <input type="number" id="attendanceTotal" min="0" placeholder="Bijv. 16" style="width: 100%; padding: 10px; border-radius: 6px; border: 1px solid #d1d5db;">
                            <small style="color: #6b7280;">Gebruik dit om automatisch een percentage te tonen.</small>
                        </div>
                        <div style="margin: 12px 0;">
                            <label>Notitie (optioneel):</label><br>
                            <textarea id="attendanceNotes" rows="3" style="width: 100%; padding: 10px; border-radius: 6px; border: 1px solid #d1d5db;" placeholder="Bijv. Teamuitje, blessuregevallen, etc."></textarea>
                        </div>
                        <div style="display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px;">
                            <button type="button" id="cancelAttendanceBtn" style="background: #e5e7eb; color: #374151; border: none; padding: 10px 16px; border-radius: 6px; cursor: pointer;">
                                Annuleren
                            </button>
                            <button type="submit" style="background: #1e3c72; color: white; border: none; padding: 10px 16px; border-radius: 6px; cursor: pointer;">
                                ${isEdit ? 'Opslaan' : 'Toevoegen'}
                            </button>
                        </div>
                    </form>
                </div>
            `;
            
            document.body.appendChild(modal);
            
            const form = modal.querySelector('#attendanceForm');
            const cancelBtn = modal.querySelector('#cancelAttendanceBtn');
            const dateInput = form.querySelector('#attendanceDate');
            const weekLabelInput = form.querySelector('#attendanceWeekLabel');
            const presentInput = form.querySelector('#attendancePresent');
            const totalInput = form.querySelector('#attendanceTotal');
            const notesInput = form.querySelector('#attendanceNotes');
            
            if (entry) {
                dateInput.value = (entry.weekDate || entry.date || '').slice(0, 10);
                weekLabelInput.value = entry.weekLabel || '';
                presentInput.value = entry.playersPresent ?? 0;
                totalInput.value = entry.playersTotal ?? '';
                notesInput.value = entry.notes || '';
            }
            
            cancelBtn.addEventListener('click', () => modal.remove());
            
            form.addEventListener('submit', (event) => {
                event.preventDefault();
                
                const weekDate = dateInput.value;
                const weekLabel = weekLabelInput.value.trim();
                const presentValue = parseInt(presentInput.value, 10);
                const totalValueRaw = totalInput.value;
                const totalValue = totalValueRaw === '' ? null : parseInt(totalValueRaw, 10);
                const notes = notesInput.value.trim();
                
                if (!weekDate) {
                    alert('Kies een datum voor de training.');
                    return;
                }
                
                if (!Number.isFinite(presentValue) || presentValue < 0) {
                    alert('Voer een geldig aantal aanwezigen in.');
                    return;
                }
                
                if (totalValue !== null && (!Number.isFinite(totalValue) || totalValue < 0)) {
                    alert('Voer een geldig totaal aantal spelers in of laat het veld leeg.');
                    return;
                }
                
                const attendanceEntry = {
                    id: entry?.id ?? `att-${Date.now()}`,
                    weekDate,
                    date: weekDate,
                    weekLabel,
                    playersPresent: presentValue,
                    playersTotal: totalValue,
                    notes
                };
                
                if (entry) {
                    currentData.trainingAttendance = currentData.trainingAttendance.map(item =>
                        String(item.id) === String(entry.id) ? attendanceEntry : item
                    );
                } else {
                    currentData.trainingAttendance = [
                        attendanceEntry,
                        ...currentData.trainingAttendance.filter(item => item.date !== weekDate)
                    ];
                }
                
                dataManager.currentData.trainingAttendance = currentData.trainingAttendance;
                renderTrainingAttendance();
                saveAllData();
                modal.remove();
            });
        }

        function formatAttendanceWeek(customLabel, dateString) {
            if (customLabel && customLabel.trim().length) {
                return customLabel.trim();
            }
            if (!dateString) return 'Week onbekend';
            const date = new Date(dateString);
            if (Number.isNaN(date.getTime())) return 'Week onbekend';
            const weekNumber = getISOWeekNumber(date);
            return `Week ${weekNumber} • ${date.getFullYear()}`;
        }

        function formatAttendanceDate(dateString) {
            if (!dateString) return 'Onbekende datum';
            const date = new Date(dateString);
            if (Number.isNaN(date.getTime())) return 'Onbekende datum';
            return date.toLocaleDateString('nl-NL', { weekday: 'long', day: '2-digit', month: 'long', year: 'numeric' });
        }

        function getISOWeekNumber(date) {
            const tempDate = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
            const dayNumber = tempDate.getUTCDay() || 7;
            tempDate.setUTCDate(tempDate.getUTCDate() + 4 - dayNumber);
            const yearStart = new Date(Date.UTC(tempDate.getUTCFullYear(), 0, 1));
            return Math.ceil((((tempDate - yearStart) / 86400000) + 1) / 7);
        }

        // Helper function to get players as options
        function getPlayersOptions() {
            if (!currentData.team || currentData.team.length === 0) {
                return '<option value="">Geen spelers beschikbaar</option>';
            }
            
            // Only show actual players (not coaches/managers)
            const players = currentData.team.filter(p => 
                !['Hoofdcoach', 'Assistent Coach', 'Team Manager', 'Fysiotherapeut', 'Keeper Trainer'].includes(p.position)
            );
            
            return players
                .sort((a, b) => a.name.localeCompare(b.name))
                .map(p => `<option value="${p.name}">${p.name} (${p.position})</option>`)
                .join('');
        }
        
        // Helper function to get players with pre-selected values
        function getPlayersOptionsWithSelected(selectedString) {
            if (!currentData.team || currentData.team.length === 0) {
                return '<option value="">Geen spelers beschikbaar</option>';
            }
            
            const selectedNames = selectedString.split(',').map(name => name.trim()).filter(name => name);
            
            const players = currentData.team.filter(p => 
                !['Hoofdcoach', 'Assistent Coach', 'Team Manager', 'Fysiotherapeut', 'Keeper Trainer'].includes(p.position)
            );
            
            return players
                .sort((a, b) => a.name.localeCompare(b.name))
                .map(p => {
                    const isSelected = selectedNames.includes(p.name) ? 'selected' : '';
                    return `<option value="${p.name}" ${isSelected}>${p.name} (${p.position})</option>`;
                })
                .join('');
        }
        
        // Helper function to get selected values from multi-select (legacy)
        function getSelectedValues(selectId) {
            const select = document.getElementById(selectId);
            if (!select) return '';
            const selected = Array.from(select.selectedOptions).map(opt => opt.value);
            return selected.join(', ');
        }
        
        // Generate goal scorers dropdowns based on score
        function updateGoalScorers() {
            const vvScore = parseInt(document.getElementById('vvScore').value) || 0;
            const goalsContainer = document.getElementById('goalsContainer');
            const assistsContainer = document.getElementById('assistsContainer');
            
            if (!goalsContainer || !assistsContainer) return;
            
            // Clear containers
            goalsContainer.innerHTML = '';
            assistsContainer.innerHTML = '';
            
            if (vvScore === 0) {
                goalsContainer.innerHTML = '<p style="color: #999; font-style: italic;">Voer eerst een score in om doelpuntenmakers toe te voegen</p>';
                return;
            }
            
            // Create goal scorers dropdowns
            goalsContainer.innerHTML = `
                <label style="font-weight: bold; margin-bottom: 10px; display: block;">
                    <i class="fas fa-futbol"></i> Doelpuntenmakers (${vvScore} ${vvScore === 1 ? 'doelpunt' : 'doelpunten'}):
                </label>
            `;
            
            // Create goal scorers in 2-column grid for compactness
            const goalsGrid = document.createElement('div');
            goalsGrid.style.cssText = 'display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; margin-top: 10px;';
            
            for (let i = 0; i < vvScore; i++) {
                const goalDiv = document.createElement('div');
                goalDiv.innerHTML = `
                    <label style="font-size: 12px; color: #666; display: block; margin-bottom: 3px;">
                        ⚽ Doelpunt ${i + 1}:
                    </label>
                    <select class="goal-scorer" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 13px;">
                        <option value="">-- Selecteer --</option>
                        ${getPlayersOptions()}
                    </select>
                `;
                goalsGrid.appendChild(goalDiv);
            }
            goalsContainer.appendChild(goalsGrid);
            
            // Create assists dropdowns in 2-column grid
            assistsContainer.innerHTML = `
                <label style="font-weight: bold; margin-bottom: 10px; display: block; margin-top: 15px;">
                    <i class="fas fa-hands-helping"></i> Assists (optioneel):
                </label>
            `;
            
            const assistsGrid = document.createElement('div');
            assistsGrid.style.cssText = 'display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px;';
            
            for (let i = 0; i < vvScore; i++) {
                const assistDiv = document.createElement('div');
                assistDiv.innerHTML = `
                    <label style="font-size: 12px; color: #666; display: block; margin-bottom: 3px;">
                        🤝 Doelpunt ${i + 1}:
                    </label>
                    <select class="assist-giver" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 13px;">
                        <option value="">-- Geen --</option>
                        ${getPlayersOptions()}
                    </select>
                `;
                assistsGrid.appendChild(assistDiv);
            }
            assistsContainer.appendChild(assistsGrid);
        }
        
        // Collect goals from individual dropdowns
        function collectGoals() {
            const scorers = document.querySelectorAll('.goal-scorer');
            const goals = Array.from(scorers)
                .map(select => select.value)
                .filter(value => value);
            return goals.join(', ');
        }
        
        // Collect assists from individual dropdowns
        function collectAssists() {
            const assisters = document.querySelectorAll('.assist-giver');
            const assists = Array.from(assisters)
                .map(select => select.value)
                .filter(value => value);
            return assists.join(', ');
        }
        
        // === EDIT MATCH FUNCTIONS ===
        
        // Generate goal scorers dropdowns for edit form
        function updateEditGoalScorers(existingGoals = '', existingAssists = '') {
            const vvScore = parseInt(document.getElementById('editVvScore').value) || 0;
            const goalsContainer = document.getElementById('editGoalsContainer');
            const assistsContainer = document.getElementById('editAssistsContainer');
            
            if (!goalsContainer || !assistsContainer) return;
            
            const existingGoalsList = existingGoals.split(',').map(g => g.trim()).filter(g => g);
            const existingAssistsList = existingAssists.split(',').map(a => a.trim()).filter(a => a);
            
            // Clear containers
            goalsContainer.innerHTML = '';
            assistsContainer.innerHTML = '';
            
            if (vvScore === 0) {
                goalsContainer.innerHTML = '<p style="color: #999; font-style: italic;">Voer eerst een score in</p>';
                return;
            }
            
            // Create goal scorers dropdowns
            goalsContainer.innerHTML = `
                <label style="font-weight: bold; margin-bottom: 10px; display: block;">
                    <i class="fas fa-futbol"></i> Doelpuntenmakers (${vvScore} ${vvScore === 1 ? 'doelpunt' : 'doelpunten'}):
                </label>
            `;
            
            // Create goal scorers in 2-column grid
            const goalsGrid = document.createElement('div');
            goalsGrid.style.cssText = 'display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; margin-top: 10px;';
            
            for (let i = 0; i < vvScore; i++) {
                const goalDiv = document.createElement('div');
                const preSelected = existingGoalsList[i] || '';
                goalDiv.innerHTML = `
                    <label style="font-size: 12px; color: #666; display: block; margin-bottom: 3px;">
                        ⚽ Doelpunt ${i + 1}:
                    </label>
                    <select class="edit-goal-scorer" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 13px;">
                        <option value="">-- Selecteer --</option>
                        ${getPlayersOptionsWithSelected(preSelected)}
                    </select>
                `;
                goalsGrid.appendChild(goalDiv);
            }
            goalsContainer.appendChild(goalsGrid);
            
            // Create assists dropdowns in 2-column grid
            assistsContainer.innerHTML = `
                <label style="font-weight: bold; margin-bottom: 10px; display: block; margin-top: 15px;">
                    <i class="fas fa-hands-helping"></i> Assists (optioneel):
                </label>
            `;
            
            const assistsGrid = document.createElement('div');
            assistsGrid.style.cssText = 'display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px;';
            
            for (let i = 0; i < vvScore; i++) {
                const assistDiv = document.createElement('div');
                const preSelected = existingAssistsList[i] || '';
                assistDiv.innerHTML = `
                    <label style="font-size: 12px; color: #666; display: block; margin-bottom: 3px;">
                        🤝 Doelpunt ${i + 1}:
                    </label>
                    <select class="edit-assist-giver" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 13px;">
                        <option value="">-- Geen --</option>
                        ${getPlayersOptionsWithSelected(preSelected)}
                    </select>
                `;
                assistsGrid.appendChild(assistDiv);
            }
            assistsContainer.appendChild(assistsGrid);
        }
        
        // Collect goals from edit form dropdowns
        function collectEditGoals() {
            const scorers = document.querySelectorAll('.edit-goal-scorer');
            const goals = Array.from(scorers)
                .map(select => select.value)
                .filter(value => value);
            return goals.join(', ');
        }
        
        // Collect assists from edit form dropdowns
        function collectEditAssists() {
            const assisters = document.querySelectorAll('.edit-assist-giver');
            const assists = Array.from(assisters)
                .map(select => select.value)
                .filter(value => value);
            return assists.join(', ');
        }

        // Toggle score section visibility
        function toggleScoreSection() {
            const matchPlayed = document.getElementById('matchPlayed');
            const scoreSection = document.getElementById('scoreSection');
            
            if (matchPlayed && scoreSection) {
                if (matchPlayed.checked) {
                    scoreSection.style.display = 'block';
                    // Make score fields required when visible
                    document.getElementById('vvScore').required = true;
                    document.getElementById('opponentScore').required = true;
                } else {
                    scoreSection.style.display = 'none';
                    // Make score fields optional when hidden
                    document.getElementById('vvScore').required = false;
                    document.getElementById('opponentScore').required = false;
                    // Reset scores to 0
                    document.getElementById('vvScore').value = 0;
                    document.getElementById('opponentScore').value = 0;
                }
            }
        }
        
        function toggleEditScoreSection() {
            const matchPlayed = document.getElementById('editMatchPlayed');
            const scoreSection = document.getElementById('editScoreSection');
            
            if (matchPlayed && scoreSection) {
                if (matchPlayed.checked) {
                    scoreSection.style.display = 'block';
                    // Make score fields required when visible
                    document.getElementById('editVvScore').required = true;
                    document.getElementById('editOpponentScore').required = true;
                } else {
                    scoreSection.style.display = 'none';
                    // Make score fields optional when hidden
                    document.getElementById('editVvScore').required = false;
                    document.getElementById('editOpponentScore').required = false;
                    // Reset scores to 0
                    document.getElementById('editVvScore').value = 0;
                    document.getElementById('editOpponentScore').value = 0;
                }
            }
        }

        // Add functions
        function addMatch() {
            showMatchModal();
        }

        function showMatchModal() {
            const modal = document.createElement('div');
            modal.style.cssText = `
                position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
                background: rgba(0,0,0,0.5); z-index: 1000; display: flex; 
                justify-content: center; align-items: center; padding: 20px;
                overflow-y: auto;
            `;
            
            modal.innerHTML = `
                <div style="background: white; padding: 20px; border-radius: 10px; width: 650px; max-width: 95%; max-height: 95vh; overflow-y: auto; margin: auto;">
                    <h3 style="position: sticky; top: 0; background: white; z-index: 10; padding-bottom: 10px; margin-bottom: 15px; border-bottom: 2px solid #f0f0f0;">
                        <i class="fas fa-plus-circle"></i> Nieuwe Wedstrijd
                    </h3>
                    <form id="matchForm">
                        <div style="margin: 10px 0;">
                            <label>Datum:</label><br>
                            <input type="date" id="matchDate" required style="width: 100%; padding: 8px;">
                        </div>
                        <div style="margin: 10px 0; padding: 10px; background: #f0f0f0; border-radius: 5px;">
                            <label style="display: flex; align-items: center; cursor: pointer;">
                                <input type="checkbox" id="isAwayMatch" style="margin-right: 10px; width: 20px; height: 20px;" onchange="toggleScoreSection()">
                                <span style="font-weight: bold;">Uitwedstrijd (VV Dongen 6 speelt uit)</span>
                            </label>
                        </div>
                        
                        <div style="margin: 10px 0; padding: 10px; background: #e8f5e9; border-radius: 5px; border-left: 4px solid #28a745;">
                            <label style="display: flex; align-items: center; cursor: pointer;">
                                <input type="checkbox" id="matchPlayed" style="margin-right: 10px; width: 20px; height: 20px;" onchange="toggleScoreSection()">
                                <span style="font-weight: bold; color: #155724;">Wedstrijd is al gespeeld (scores invullen)</span>
                            </label>
                            <small style="color: #155724; font-size: 12px; margin-top: 5px; display: block;">
                                Vink dit aan als de wedstrijd al gespeeld is en je de scores wilt invoeren
                            </small>
                        </div>
                        <div style="margin: 10px 0;">
                            <label>Tegenstander:</label><br>
                            <input type="text" id="opponentTeam" required placeholder="Bijv. FC Rival" style="width: 100%; padding: 8px;">
                        </div>
                        <div style="margin: 10px 0;">
                            <label>Logo URL van tegenstander (optioneel):</label><br>
                            <input type="url" id="opponentLogo" placeholder="https://example.com/logo.png" style="width: 100%; padding: 8px;">
                            <small style="color: #666;">Voer de API link of URL van het logo in</small>
                        </div>
                        
                        <!-- Wedstrijd Locatie Sectie -->
                        <div style="margin: 20px 0; padding: 20px; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-radius: 12px; border: 3px solid #1e3c72; box-shadow: 0 4px 12px rgba(30, 60, 114, 0.2);">
                            <h4 style="color: #1e3c72; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700;">
                                <i class="fas fa-map-marker-alt" style="font-size: 18px;"></i> 🗺️ Wedstrijd Locatie
                            </h4>
                            
                            <div style="margin: 15px 0;">
                                <label style="font-weight: 600; color: #495057; display: block; margin-bottom: 8px;">
                                    <i class="fas fa-building"></i> Locatie naam:
                                </label>
                                <input type="text" id="matchLocation" placeholder="Bijv. Sportpark De Kreek, Dongen" style="width: 100%; padding: 12px; border: 2px solid #ced4da; border-radius: 8px; font-size: 14px; transition: border-color 0.3s;" onfocus="this.style.borderColor='#1e3c72'" onblur="this.style.borderColor='#ced4da'">
                                <small style="color: #6c757d; font-size: 12px; margin-top: 5px; display: block;">Naam van het sportcomplex of stadion</small>
                            </div>
                            
                            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin: 15px 0;">
                                <div>
                                    <label style="font-weight: 600; color: #495057; display: block; margin-bottom: 8px;">
                                        <i class="fas fa-map-pin"></i> Breedtegraad:
                                    </label>
                                    <input type="number" id="matchLatitude" step="any" placeholder="51.6294" style="width: 100%; padding: 12px; border: 2px solid #ced4da; border-radius: 8px; font-size: 14px; transition: border-color 0.3s;" onfocus="this.style.borderColor='#1e3c72'" onblur="this.style.borderColor='#ced4da'">
                                </div>
                                <div>
                                    <label style="font-weight: 600; color: #495057; display: block; margin-bottom: 8px;">
                                        <i class="fas fa-map-pin"></i> Lengtegraad:
                                    </label>
                                    <input type="number" id="matchLongitude" step="any" placeholder="4.9346" style="width: 100%; padding: 12px; border: 2px solid #ced4da; border-radius: 8px; font-size: 14px; transition: border-color 0.3s;" onfocus="this.style.borderColor='#1e3c72'" onblur="this.style.borderColor='#ced4da'">
                                </div>
                            </div>
                            
                            <div style="margin: 15px 0; padding: 12px; background: rgba(30, 60, 114, 0.1); border-radius: 8px; border-left: 4px solid #1e3c72;">
                                <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
                                    <i class="fas fa-info-circle" style="color: #1e3c72;"></i>
                                    <strong style="color: #1e3c72; font-size: 13px;">Navigatie coördinaten</strong>
                                </div>
                                <p style="color: #495057; font-size: 12px; margin: 0; line-height: 1.4;">
                                    Deze coördinaten worden gebruikt voor de navigatie-apps op de website. 
                                    Je kunt ze vinden via Google Maps door rechts op de locatie te klikken.
                                </p>
                            </div>
                            
                            <div style="margin: 15px 0;">
                                <label style="font-weight: 600; color: #495057; display: block; margin-bottom: 8px;">
                                    <i class="fas fa-clock"></i> Wedstrijdtijd:
                                </label>
                                <input type="time" id="matchTime" style="width: 100%; padding: 12px; border: 2px solid #ced4da; border-radius: 8px; font-size: 14px; transition: border-color 0.3s;" onfocus="this.style.borderColor='#1e3c72'" onblur="this.style.borderColor='#ced4da'">
                                <small style="color: #6c757d; font-size: 12px; margin-top: 5px; display: block;">Tijd wanneer de wedstrijd begint</small>
                            </div>
                            
                            <div style="margin: 15px 0;">
                                <label style="font-weight: 600; color: #495057; display: block; margin-bottom: 8px;">
                                    <i class="fas fa-car" style="color: #33CCFF;"></i> Waze Navigatie Link (optioneel):
                                </label>
                                <input type="url" id="matchWazeLink" placeholder="https://ul.waze.com/ul?place=..." style="width: 100%; padding: 12px; border: 2px solid #ced4da; border-radius: 8px; font-size: 14px; transition: border-color 0.3s;" onfocus="this.style.borderColor='#33CCFF'" onblur="this.style.borderColor='#ced4da'">
                                <small style="color: #6c757d; font-size: 12px; margin-top: 5px; display: block;">Directe Waze navigatie link - voorkeur boven coördinaten</small>
                            </div>
                        </div>
                        
                        <!-- Score Sectie - Alleen zichtbaar als wedstrijd is gespeeld -->
                        <div id="scoreSection" style="display: none; margin: 20px 0; padding: 20px; background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%); border-radius: 12px; border: 2px solid #ffc107; box-shadow: 0 2px 8px rgba(255, 193, 7, 0.2);">
                            <h4 style="color: #856404; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700;">
                                <i class="fas fa-futbol" style="font-size: 18px;"></i> ⚽ Wedstrijd Scores
                            </h4>
                            
                            <div style="margin: 10px 0;">
                                <label>VV Dongen 6 score:</label><br>
                                <input type="number" id="vvScore" min="0" value="0" style="width: 100%; padding: 8px;" onchange="updateGoalScorers()">
                            </div>
                            <div style="margin: 10px 0;">
                                <label>Tegenstander score:</label><br>
                                <input type="number" id="opponentScore" min="0" value="0" style="width: 100%; padding: 8px;">
                            </div>
                            
                            <div id="goalsContainer" style="margin: 15px 0;">
                                <!-- Doelpunten dropdowns worden hier dynamisch toegevoegd -->
                            </div>
                            <div id="assistsContainer" style="margin: 15px 0;">
                                <!-- Assists dropdowns worden hier dynamisch toegevoegd -->
                            </div>
                        </div>
                        <div style="margin: 15px 0; padding: 15px; background: #f8f9fa; border-radius: 8px; border-left: 3px solid #667eea;">
                            <label style="font-weight: bold; display: block; margin-bottom: 8px;">
                                <i class="fas fa-newspaper"></i> Wedstrijdverslag (optioneel):
                            </label>
                            <textarea id="matchReport" placeholder="Schrijf hier later een verslag van de wedstrijd... (optioneel)" 
                                style="width: 100%; min-height: 80px; padding: 10px; border: 2px solid #e0e0e0; border-radius: 6px; font-size: 13px; font-family: inherit; resize: vertical;"></textarea>
                            <small style="color: #999; font-size: 11px;">
                                <i class="fas fa-info-circle"></i> Voor later gebruik
                            </small>
                        </div>
                        <div style="margin: 20px 0; text-align: right; position: sticky; bottom: 0; background: white; padding: 10px 0; border-top: 2px solid #f0f0f0;">
                            <button type="button" onclick="closeModal()" style="margin-right: 10px; padding: 10px 20px; border: 2px solid #ddd; background: white; border-radius: 6px; cursor: pointer;">Annuleren</button>
                            <button type="submit" style="background: #667eea; color: white; padding: 10px 20px; border: none; border-radius: 6px; cursor: pointer; font-weight: 500;">
                                <i class="fas fa-save"></i> Opslaan
                            </button>
                        </div>
                    </form>
                </div>
            `;
            
            document.body.appendChild(modal);
            
            document.getElementById('matchForm').onsubmit = function(e) {
                e.preventDefault();
                const date = document.getElementById('matchDate').value;
                const opponentTeam = document.getElementById('opponentTeam').value;
                const opponentLogo = document.getElementById('opponentLogo').value;
                const vvScore = document.getElementById('vvScore').value;
                const opponentScore = document.getElementById('opponentScore').value;
                const goals = collectGoals();
                const assists = collectAssists();
                const matchReport = document.getElementById('matchReport').value;
                const isAwayMatch = document.getElementById('isAwayMatch').checked;
                
                // Locatie velden
                const matchLocation = document.getElementById('matchLocation').value;
                const matchLatitude = document.getElementById('matchLatitude').value;
                const matchLongitude = document.getElementById('matchLongitude').value;
                const matchTime = document.getElementById('matchTime').value;
                const matchWazeLink = document.getElementById('matchWazeLink').value;
                
                // Check if match is played
                const matchPlayed = document.getElementById('matchPlayed').checked;
                
                // Validation: basic fields always required, scores only if match is played
                if (date && opponentTeam && (!matchPlayed || (vvScore !== '' && opponentScore !== ''))) {
                    // Als uitwedstrijd: tegenstander is thuis, VV Dongen 6 is uit
                    // Als thuiswedstrijd: VV Dongen 6 is thuis, tegenstander is uit
                    const newMatch = {
                        id: Date.now(),
                        date: date,
                        homeTeam: isAwayMatch ? opponentTeam : 'VV Dongen 6',
                        awayTeam: isAwayMatch ? 'VV Dongen 6' : opponentTeam,
                        homeScore: matchPlayed ? (isAwayMatch ? parseInt(opponentScore) : parseInt(vvScore)) : 0,
                        awayScore: matchPlayed ? (isAwayMatch ? parseInt(vvScore) : parseInt(opponentScore)) : 0,
                        goals: matchPlayed ? (goals || '') : '',
                        assists: matchPlayed ? (assists || '') : '',
                        isAwayMatch: isAwayMatch,
                        opponentLogo: opponentLogo || '',
                        matchReport: matchReport || null,
                        matchPlayed: matchPlayed,
                        // Locatie velden
                        location: matchLocation || '',
                        latitude: matchLatitude ? parseFloat(matchLatitude) : null,
                        longitude: matchLongitude ? parseFloat(matchLongitude) : null,
                        time: matchTime || null,
                        wazeLink: matchWazeLink || null
                    };
                    
                    currentData.matches.unshift(newMatch);
                    if (currentData.matches.length > 5) {
                        currentData.matches = currentData.matches.slice(0, 5);
                    }
                    
                    // Update statistics
                    updateStatistics(goals, assists);
                    
                    renderMatches();
                    saveAllData();
                    closeModal();
                }
            };
        }

        function editMatch(id) {
            const match = currentData.matches.find(m => m.id === id);
            if (!match) return;
            
            // Determine if VV Dongen 6 was home or away
            const isVVHome = match.homeTeam === 'VV Dongen 6';
            const opponentName = isVVHome ? match.awayTeam : match.homeTeam;
            const vvScore = isVVHome ? match.homeScore : match.awayScore;
            const opponentScore = isVVHome ? match.awayScore : match.homeScore;
            
            const modal = document.createElement('div');
            modal.style.cssText = `
                position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
                background: rgba(0,0,0,0.5); z-index: 1000; display: flex; 
                justify-content: center; align-items: center; padding: 20px;
                overflow-y: auto;
            `;
            
            modal.innerHTML = `
                <div style="background: white; padding: 20px; border-radius: 10px; width: 650px; max-width: 95%; max-height: 95vh; overflow-y: auto; margin: auto;">
                    <h3 style="position: sticky; top: 0; background: white; z-index: 10; padding-bottom: 10px; margin-bottom: 15px; border-bottom: 2px solid #f0f0f0;">
                        <i class="fas fa-edit"></i> Wedstrijd Bewerken
                    </h3>
                    <form id="editMatchForm">
                        <div style="margin: 10px 0;">
                            <label>Datum:</label><br>
                            <input type="date" id="editMatchDate" value="${match.date}" required style="width: 100%; padding: 8px;">
                        </div>
                        <div style="margin: 10px 0; padding: 10px; background: #f0f0f0; border-radius: 5px;">
                            <label style="display: flex; align-items: center; cursor: pointer;">
                                <input type="checkbox" id="editIsAwayMatch" ${!isVVHome ? 'checked' : ''} style="margin-right: 10px; width: 20px; height: 20px;" onchange="toggleEditScoreSection()">
                                <span style="font-weight: bold;">Uitwedstrijd (VV Dongen 6 speelt uit)</span>
                            </label>
                        </div>
                        
                        <div style="margin: 10px 0; padding: 10px; background: #e8f5e9; border-radius: 5px; border-left: 4px solid #28a745;">
                            <label style="display: flex; align-items: center; cursor: pointer;">
                                <input type="checkbox" id="editMatchPlayed" ${(vvScore > 0 || opponentScore > 0) ? 'checked' : ''} style="margin-right: 10px; width: 20px; height: 20px;" onchange="toggleEditScoreSection()">
                                <span style="font-weight: bold; color: #155724;">Wedstrijd is al gespeeld (scores invullen)</span>
                            </label>
                            <small style="color: #155724; font-size: 12px; margin-top: 5px; display: block;">
                                Vink dit aan als de wedstrijd al gespeeld is en je de scores wilt invoeren
                            </small>
                        </div>
                        <div style="margin: 10px 0;">
                            <label>Tegenstander:</label><br>
                            <input type="text" id="editOpponentTeam" value="${opponentName}" required style="width: 100%; padding: 8px;">
                        </div>
                        <div style="margin: 10px 0;">
                            <label>Logo URL van tegenstander (optioneel):</label><br>
                            <input type="url" id="editOpponentLogo" value="${match.opponentLogo || ''}" placeholder="https://example.com/logo.png" style="width: 100%; padding: 8px;">
                        </div>
                        
                        <!-- Wedstrijd Locatie Sectie - Edit -->
                        <div style="margin: 20px 0; padding: 20px; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-radius: 12px; border: 3px solid #1e3c72; box-shadow: 0 4px 12px rgba(30, 60, 114, 0.2);">
                            <h4 style="color: #1e3c72; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700;">
                                <i class="fas fa-map-marker-alt" style="font-size: 18px;"></i> 🗺️ Wedstrijd Locatie
                            </h4>
                            
                            <div style="margin: 15px 0;">
                                <label style="font-weight: 600; color: #495057; display: block; margin-bottom: 8px;">
                                    <i class="fas fa-building"></i> Locatie naam:
                                </label>
                                <input type="text" id="editMatchLocation" value="${match.location || ''}" placeholder="Bijv. Sportpark De Kreek, Dongen" style="width: 100%; padding: 12px; border: 2px solid #ced4da; border-radius: 8px; font-size: 14px; transition: border-color 0.3s;" onfocus="this.style.borderColor='#1e3c72'" onblur="this.style.borderColor='#ced4da'">
                                <small style="color: #6c757d; font-size: 12px; margin-top: 5px; display: block;">Naam van het sportcomplex of stadion</small>
                            </div>
                            
                            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin: 15px 0;">
                                <div>
                                    <label style="font-weight: 600; color: #495057; display: block; margin-bottom: 8px;">
                                        <i class="fas fa-map-pin"></i> Breedtegraad:
                                    </label>
                                    <input type="number" id="editMatchLatitude" step="any" value="${match.latitude || ''}" placeholder="51.6294" style="width: 100%; padding: 12px; border: 2px solid #ced4da; border-radius: 8px; font-size: 14px; transition: border-color 0.3s;" onfocus="this.style.borderColor='#1e3c72'" onblur="this.style.borderColor='#ced4da'">
                                </div>
                                <div>
                                    <label style="font-weight: 600; color: #495057; display: block; margin-bottom: 8px;">
                                        <i class="fas fa-map-pin"></i> Lengtegraad:
                                    </label>
                                    <input type="number" id="editMatchLongitude" step="any" value="${match.longitude || ''}" placeholder="4.9346" style="width: 100%; padding: 12px; border: 2px solid #ced4da; border-radius: 8px; font-size: 14px; transition: border-color 0.3s;" onfocus="this.style.borderColor='#1e3c72'" onblur="this.style.borderColor='#ced4da'">
                                </div>
                            </div>
                            
                            <div style="margin: 15px 0; padding: 12px; background: rgba(30, 60, 114, 0.1); border-radius: 8px; border-left: 4px solid #1e3c72;">
                                <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
                                    <i class="fas fa-info-circle" style="color: #1e3c72;"></i>
                                    <strong style="color: #1e3c72; font-size: 13px;">Navigatie coördinaten</strong>
                                </div>
                                <p style="color: #495057; font-size: 12px; margin: 0; line-height: 1.4;">
                                    Deze coördinaten worden gebruikt voor de navigatie-apps op de website. 
                                    Je kunt ze vinden via Google Maps door rechts op de locatie te klikken.
                                </p>
                            </div>
                            
                            <div style="margin: 15px 0;">
                                <label style="font-weight: 600; color: #495057; display: block; margin-bottom: 8px;">
                                    <i class="fas fa-clock"></i> Wedstrijdtijd:
                                </label>
                                <input type="time" id="editMatchTime" value="${match.time || ''}" style="width: 100%; padding: 12px; border: 2px solid #ced4da; border-radius: 8px; font-size: 14px; transition: border-color 0.3s;" onfocus="this.style.borderColor='#1e3c72'" onblur="this.style.borderColor='#ced4da'">
                                <small style="color: #6c757d; font-size: 12px; margin-top: 5px; display: block;">Tijd wanneer de wedstrijd begint</small>
                            </div>
                            
                            <div style="margin: 15px 0;">
                                <label style="font-weight: 600; color: #495057; display: block; margin-bottom: 8px;">
                                    <i class="fas fa-car" style="color: #33CCFF;"></i> Waze Navigatie Link (optioneel):
                                </label>
                                <input type="url" id="editMatchWazeLink" value="${match.wazeLink || match.waze_link || ''}" placeholder="https://ul.waze.com/ul?place=..." style="width: 100%; padding: 12px; border: 2px solid #ced4da; border-radius: 8px; font-size: 14px; transition: border-color 0.3s;" onfocus="this.style.borderColor='#33CCFF'" onblur="this.style.borderColor='#ced4da'">
                                <small style="color: #6c757d; font-size: 12px; margin-top: 5px; display: block;">Directe Waze navigatie link - voorkeur boven coördinaten</small>
                            </div>
                        </div>
                        
                        <!-- Score Sectie - Alleen zichtbaar als wedstrijd is gespeeld -->
                        <div id="editScoreSection" style="display: ${(vvScore > 0 || opponentScore > 0) ? 'block' : 'none'}; margin: 20px 0; padding: 20px; background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%); border-radius: 12px; border: 2px solid #ffc107; box-shadow: 0 2px 8px rgba(255, 193, 7, 0.2);">
                            <h4 style="color: #856404; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700;">
                                <i class="fas fa-futbol" style="font-size: 18px;"></i> ⚽ Wedstrijd Scores
                            </h4>
                            
                            <div style="margin: 10px 0;">
                                <label>VV Dongen 6 score:</label><br>
                                <input type="number" id="editVvScore" value="${vvScore}" min="0" style="width: 100%; padding: 8px;" onchange="updateEditGoalScorers()">
                            </div>
                            <div style="margin: 10px 0;">
                                <label>Tegenstander score:</label><br>
                                <input type="number" id="editOpponentScore" value="${opponentScore}" min="0" style="width: 100%; padding: 8px;">
                            </div>
                            
                            <div id="editGoalsContainer" style="margin: 15px 0;">
                                <!-- Doelpunten dropdowns worden hier dynamisch toegevoegd -->
                            </div>
                            <div id="editAssistsContainer" style="margin: 15px 0;">
                                <!-- Assists dropdowns worden hier dynamisch toegevoegd -->
                            </div>
                        </div>
                        <div style="margin: 15px 0; padding: 15px; background: #f8f9fa; border-radius: 8px; border-left: 3px solid #667eea;">
                            <label style="font-weight: bold; display: block; margin-bottom: 8px;">
                                <i class="fas fa-newspaper"></i> Wedstrijdverslag (optioneel):
                            </label>
                            <textarea id="editMatchReport" placeholder="Schrijf een verslag van de wedstrijd..." 
                                style="width: 100%; min-height: 80px; padding: 10px; border: 2px solid #e0e0e0; border-radius: 6px; font-size: 13px; font-family: inherit; resize: vertical;">${match.matchReport || match.match_report || ''}</textarea>
                            <small style="color: #999; font-size: 11px;">
                                <i class="fas fa-lightbulb"></i> Beschrijf hoogtepunten en bijzonderheden
                            </small>
                        </div>
                        <div style="margin: 20px 0; text-align: right; position: sticky; bottom: 0; background: white; padding: 10px 0; border-top: 2px solid #f0f0f0;">
                            <button type="button" onclick="closeModal()" style="margin-right: 10px; padding: 10px 20px; border: 2px solid #ddd; background: white; border-radius: 6px; cursor: pointer;">Annuleren</button>
                            <button type="submit" style="background: #667eea; color: white; padding: 10px 20px; border: none; border-radius: 6px; cursor: pointer; font-weight: 500;">
                                <i class="fas fa-save"></i> Opslaan
                            </button>
                        </div>
                    </form>
                </div>
            `;
            
            document.body.appendChild(modal);
            
            // Initialize the dropdowns with current score
            setTimeout(() => {
                updateEditGoalScorers(match.goals || '', match.assists || '');
                // Initialize score section visibility
                toggleEditScoreSection();
            }, 100);
            
            document.getElementById('editMatchForm').onsubmit = function(e) {
                e.preventDefault();
                const date = document.getElementById('editMatchDate').value;
                const opponentTeam = document.getElementById('editOpponentTeam').value;
                const opponentLogo = document.getElementById('editOpponentLogo').value;
                const vvScore = document.getElementById('editVvScore').value;
                const opponentScore = document.getElementById('editOpponentScore').value;
                const goals = collectEditGoals();
                const assists = collectEditAssists();
                const matchReport = document.getElementById('editMatchReport').value;
                const isAwayMatch = document.getElementById('editIsAwayMatch').checked;
                
                // Locatie velden
                const matchLocation = document.getElementById('editMatchLocation').value;
                const matchLatitude = document.getElementById('editMatchLatitude').value;
                const matchLongitude = document.getElementById('editMatchLongitude').value;
                const matchTime = document.getElementById('editMatchTime').value;
                const matchWazeLink = document.getElementById('editMatchWazeLink').value;
                
                // Check if match is played
                const matchPlayed = document.getElementById('editMatchPlayed').checked;
                
                // Validation: basic fields always required, scores only if match is played
                if (date && opponentTeam && (!matchPlayed || (vvScore !== '' && opponentScore !== ''))) {
                    match.date = date;
                    match.homeTeam = isAwayMatch ? opponentTeam : 'VV Dongen 6';
                    match.awayTeam = isAwayMatch ? 'VV Dongen 6' : opponentTeam;
                    match.homeScore = matchPlayed ? (isAwayMatch ? parseInt(opponentScore) : parseInt(vvScore)) : 0;
                    match.awayScore = matchPlayed ? (isAwayMatch ? parseInt(vvScore) : parseInt(opponentScore)) : 0;
                    match.goals = matchPlayed ? goals : '';
                    match.assists = matchPlayed ? assists : '';
                    match.opponentLogo = opponentLogo;
                    match.matchReport = matchReport || null;
                    match.isAwayMatch = isAwayMatch;
                    match.matchPlayed = matchPlayed;
                    // Locatie velden
                    match.location = matchLocation || '';
                    match.latitude = matchLatitude ? parseFloat(matchLatitude) : null;
                    match.longitude = matchLongitude ? parseFloat(matchLongitude) : null;
                    match.time = matchTime || null;
                    match.wazeLink = matchWazeLink || null;
                
                // Recalculate all statistics
                recalculateAllStatistics();
                
                renderMatches();
                saveAllData();
                    closeModal();
            }
            };
        }

        function addPlayer() {
            showPlayerModal();
        }

        function showPlayerModal() {
            const modal = document.createElement('div');
            modal.style.cssText = `
                position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
                background: rgba(0,0,0,0.5); z-index: 1000; display: flex; 
                justify-content: center; align-items: center;
            `;
            
            modal.innerHTML = `
                <div style="background: white; padding: 20px; border-radius: 10px; width: 400px; max-width: 90%;">
                    <h3>Nieuwe Speler/Staf</h3>
                    <form id="playerForm">
                        <div style="margin: 10px 0;">
                            <label>Naam:</label><br>
                            <input type="text" id="playerName" required style="width: 100%; padding: 8px;">
                        </div>
                        <div style="margin: 10px 0;">
                            <label>Positie/Functie:</label><br>
                            <select id="playerPosition" required style="width: 100%; padding: 8px;">
                                <option value="">Selecteer...</option>
                                <option value="Keeper">Keeper</option>
                                <option value="Verdediger">Verdediger</option>
                                <option value="Middenvelder">Middenvelder</option>
                                <option value="Aanvaller">Aanvaller</option>
                                <option value="Hoofdcoach">Hoofdcoach</option>
                                <option value="Assistent Coach">Assistent Coach</option>
                                <option value="Keeper Trainer">Keeper Trainer</option>
                                <option value="Fysiotherapeut">Fysiotherapeut</option>
                                <option value="Team Manager">Team Manager</option>
                                <option value="Anders">Anders</option>
                            </select>
                        </div>
                        <div style="margin: 10px 0;">
                            <label>Afbeelding/GIF/MP4:</label><br>
                            <input type="file" id="playerFile" accept=".jpg,.jpeg,.png,.gif,.mp4" style="width: 100%; padding: 8px;">
                            <small>Ondersteunt: JPG, PNG, GIF, MP4</small>
                        </div>
                        <div style="margin: 20px 0; text-align: right;">
                            <button type="button" onclick="closeModal()" style="margin-right: 10px; padding: 8px 16px;">Annuleren</button>
                            <button type="submit" style="background: #007bff; color: white; padding: 8px 16px; border: none; border-radius: 5px;">Opslaan</button>
                        </div>
                    </form>
                </div>
            `;
            
            document.body.appendChild(modal);
            
            document.getElementById('playerForm').onsubmit = function(e) {
                e.preventDefault();
                const name = document.getElementById('playerName').value;
                const position = document.getElementById('playerPosition').value;
                const fileInput = document.getElementById('playerFile');
                
                if (name && position) {
                    let imageUrl = `https://via.placeholder.com/150x150/0066cc/ffffff?text=${name.charAt(0)}`;
                    
                    // Handle file upload
                    if (fileInput.files && fileInput.files[0]) {
                        const file = fileInput.files[0];
                        console.log('Uploaded file type:', file.type);
                        console.log('Uploaded file name:', file.name);
                        
                        const reader = new FileReader();
                        reader.onload = function(e) {
                            imageUrl = e.target.result;
                            console.log('Data URL:', imageUrl.substring(0, 50) + '...');
                            savePlayer(name, position, imageUrl);
                        };
                        reader.readAsDataURL(file);
                    } else {
                        savePlayer(name, position, imageUrl);
                    }
                }
            };
        }

        function savePlayer(name, position, imageUrl) {
            const newPlayer = {
                id: Date.now(),
                name: name,
                position: position,
                image: imageUrl
            };
            
            currentData.team.push(newPlayer);
            renderTeam();
            saveAllData();
            closeModal();
        }

        function closeModal() {
            const modal = document.querySelector('div[style*="position: fixed"]');
            if (modal) {
                modal.remove();
            }
        }

        function editPlayer(id) {
            const player = currentData.team.find(p => p.id === id);
            if (!player) return;
            
            const modal = document.createElement('div');
            modal.style.cssText = `
                position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
                background: rgba(0,0,0,0.5); z-index: 1000; display: flex; 
                justify-content: center; align-items: center;
            `;
            
            modal.innerHTML = `
                <div style="background: white; padding: 20px; border-radius: 10px; width: 400px; max-width: 90%;">
                    <h3>Speler/Staf Bewerken</h3>
                    <form id="editPlayerForm">
                        <div style="margin: 10px 0;">
                            <label>Naam:</label><br>
                            <input type="text" id="editPlayerName" value="${player.name}" required style="width: 100%; padding: 8px;">
                        </div>
                        <div style="margin: 10px 0;">
                            <label>Positie/Functie:</label><br>
                            <select id="editPlayerPosition" required style="width: 100%; padding: 8px;">
                                <option value="Keeper" ${player.position === 'Keeper' ? 'selected' : ''}>Keeper</option>
                                <option value="Verdediger" ${player.position === 'Verdediger' ? 'selected' : ''}>Verdediger</option>
                                <option value="Middenvelder" ${player.position === 'Middenvelder' ? 'selected' : ''}>Middenvelder</option>
                                <option value="Aanvaller" ${player.position === 'Aanvaller' || player.position === 'Spits' ? 'selected' : ''}>Aanvaller</option>
                                <option value="Hoofdcoach" ${player.position === 'Hoofdcoach' ? 'selected' : ''}>Hoofdcoach</option>
                                <option value="Assistent Coach" ${player.position === 'Assistent Coach' ? 'selected' : ''}>Assistent Coach</option>
                                <option value="Keeper Trainer" ${player.position === 'Keeper Trainer' ? 'selected' : ''}>Keeper Trainer</option>
                                <option value="Fysiotherapeut" ${player.position === 'Fysiotherapeut' ? 'selected' : ''}>Fysiotherapeut</option>
                                <option value="Team Manager" ${player.position === 'Team Manager' ? 'selected' : ''}>Team Manager</option>
                                <option value="Anders" ${player.position === 'Anders' ? 'selected' : ''}>Anders</option>
                            </select>
                        </div>
                        <div style="margin: 10px 0;">
                            <label>Nieuwe Afbeelding/GIF/MP4 (optioneel):</label><br>
                            <input type="file" id="editPlayerFile" accept=".jpg,.jpeg,.png,.gif,.mp4" style="width: 100%; padding: 8px;">
                            <small>Ondersteunt: JPG, PNG, GIF, MP4</small>
                        </div>
                        <div style="margin: 20px 0; text-align: right;">
                            <button type="button" onclick="closeModal()" style="margin-right: 10px; padding: 8px 16px;">Annuleren</button>
                            <button type="submit" style="background: #007bff; color: white; padding: 8px 16px; border: none; border-radius: 5px;">Opslaan</button>
                        </div>
                    </form>
                </div>
            `;
            
            document.body.appendChild(modal);
            
            document.getElementById('editPlayerForm').onsubmit = function(e) {
                e.preventDefault();
                const newName = document.getElementById('editPlayerName').value;
                const newPosition = document.getElementById('editPlayerPosition').value;
                const fileInput = document.getElementById('editPlayerFile');
                
                if (newName && newPosition) {
                    let imageUrl = player.image;
                    
                    // Handle file upload
                    if (fileInput.files && fileInput.files[0]) {
                        const file = fileInput.files[0];
                        console.log('Edit - Uploaded file type:', file.type);
                        console.log('Edit - Uploaded file name:', file.name);
                        
                        const reader = new FileReader();
                        reader.onload = function(e) {
                            player.name = newName;
                            player.position = newPosition;
                            player.image = e.target.result;
                            console.log('Edit - Data URL:', e.target.result.substring(0, 50) + '...');
                            
                            renderTeam();
                            saveAllData();
                            closeModal();
                        };
                        reader.readAsDataURL(file);
                    } else {
                        player.name = newName;
                        player.position = newPosition;
                        
                        renderTeam();
                        saveAllData();
                        closeModal();
                    }
                }
            };
        }

        function addMedia() {
            showMediaModal();
        }

        function showMediaModal() {
            const modal = document.createElement('div');
            modal.style.cssText = `
                position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
                background: rgba(0,0,0,0.5); z-index: 1000; display: flex; 
                justify-content: center; align-items: center;
            `;
            
            modal.innerHTML = `
                <div style="background: white; padding: 20px; border-radius: 10px; width: 400px; max-width: 90%;">
                    <h3>Nieuwe Media Toevoegen</h3>
                    <form id="mediaForm">
                        <div style="margin: 10px 0;">
                            <label>Titel:</label><br>
                            <input type="text" id="mediaTitle" required style="width: 100%; padding: 8px;">
                        </div>
                        <div style="margin: 10px 0;">
                            <label>Datum:</label><br>
                            <input type="date" id="mediaDate" required style="width: 100%; padding: 8px;">
                        </div>
                        <div style="margin: 10px 0;">
                            <label>Media Upload (Afbeelding/Video):</label><br>
                            <input type="file" id="mediaFile" accept=".jpg,.jpeg,.png,.gif,.mp4,.mov,.avi" required style="width: 100%; padding: 8px;">
                            <small>Ondersteunt: JPG, PNG, GIF, MP4, MOV, AVI</small>
                        </div>
                        <div style="margin: 20px 0; text-align: right;">
                            <button type="button" onclick="closeModal()" style="margin-right: 10px; padding: 8px 16px;">Annuleren</button>
                            <button type="submit" style="background: #007bff; color: white; padding: 8px 16px; border: none; border-radius: 5px;">Toevoegen</button>
                        </div>
                    </form>
                </div>
            `;
            
            document.body.appendChild(modal);
            
            document.getElementById('mediaForm').onsubmit = async function(e) {
                e.preventDefault();
                const title = document.getElementById('mediaTitle').value;
                const date = document.getElementById('mediaDate').value;
                const fileInput = document.getElementById('mediaFile');
                
                if (fileInput.files.length > 0) {
                    const file = fileInput.files[0];
                    console.log('Uploading media file:', file.name, file.type, file.size);
                    
                    const submitBtn = document.querySelector('#mediaForm button[type="submit"]');
                    submitBtn.disabled = true;
                    submitBtn.textContent = 'Uploaden...';
                    
                    try {
                        // Upload file to server
                        const formData = new FormData();
                        formData.append('file', file);
                        formData.append('type', 'media');
                        
                        const response = await fetch('./upload.php', {
                            method: 'POST',
                            body: formData
                        });
                        
                        const result = await response.json();
                        
                        if (result.success) {
                        const newMedia = {
                            id: Date.now(),
                            title: title,
                            date: date,
                                image: result.filePath,
                                fileType: result.fileType,
                                fileName: result.fileName
                        };
                        
                        currentData.media.push(newMedia);
                        renderMedia();
                            await saveAllData();
                        closeModal();
                        console.log('Media toegevoegd:', newMedia.title);
                            alert('Media succesvol geupload!');
                        } else {
                            throw new Error(result.error || 'Upload mislukt');
                        }
                    } catch (error) {
                        console.error('Upload error:', error);
                        alert('Fout bij uploaden: ' + error.message);
                        submitBtn.disabled = false;
                        submitBtn.textContent = 'Toevoegen';
                    }
                } else {
                    alert('Selecteer een media bestand!');
                }
            };
        }

        function editMedia(id) {
            const media = currentData.media.find(m => m.id === id);
            if (!media) return;
            
            const modal = document.createElement('div');
            modal.style.cssText = `
                position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
                background: rgba(0,0,0,0.5); z-index: 1000; display: flex; 
                justify-content: center; align-items: center;
            `;
            
            modal.innerHTML = `
                <div style="background: white; padding: 20px; border-radius: 10px; width: 400px; max-width: 90%;">
                    <h3>Media Bewerken</h3>
                    <form id="editMediaForm">
                        <div style="margin: 10px 0;">
                            <label>Titel:</label><br>
                            <input type="text" id="editMediaTitle" value="${media.title}" required style="width: 100%; padding: 8px;">
                        </div>
                        <div style="margin: 10px 0;">
                            <label>Datum:</label><br>
                            <input type="date" id="editMediaDate" value="${media.date}" required style="width: 100%; padding: 8px;">
                        </div>
                        <div style="margin: 10px 0;">
                            <label>Huidige Media:</label><br>
                            ${media.fileType && media.fileType.startsWith('video/') ? 
                                `<video src="${media.image}" controls style="max-width: 200px; max-height: 150px; border: 1px solid #ddd;"></video>` :
                                `<img src="${media.image}" alt="Huidige media" style="max-width: 200px; max-height: 150px; border: 1px solid #ddd;">`
                            }
                        </div>
                        <div style="margin: 10px 0;">
                            <label>Nieuwe Media Upload (optioneel):</label><br>
                            <input type="file" id="editMediaFile" accept=".jpg,.jpeg,.png,.gif,.mp4,.mov,.avi" style="width: 100%; padding: 8px;">
                            <small>Laat leeg om huidige media te behouden</small>
                        </div>
                        <div style="margin: 20px 0; text-align: right;">
                            <button type="button" onclick="closeModal()" style="margin-right: 10px; padding: 8px 16px;">Annuleren</button>
                            <button type="submit" style="background: #007bff; color: white; padding: 8px 16px; border: none; border-radius: 5px;">Opslaan</button>
                        </div>
                    </form>
                </div>
            `;
            
            document.body.appendChild(modal);
            
            document.getElementById('editMediaForm').onsubmit = function(e) {
                e.preventDefault();
                const newTitle = document.getElementById('editMediaTitle').value;
                const newDate = document.getElementById('editMediaDate').value;
                const fileInput = document.getElementById('editMediaFile');
                
                // Update basic info
                media.title = newTitle;
                media.date = newDate;
                
                // Update media if new file is uploaded
                if (fileInput.files.length > 0) {
                    const file = fileInput.files[0];
                    console.log('Edit - Uploaded media file:', file.name, file.type);
                    
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        media.image = e.target.result;
                        media.fileType = file.type;
                        media.fileName = file.name;
                        renderMedia();
                        saveAllData();
                        closeModal();
                        console.log('Media bijgewerkt:', media.title);
                    };
                    
                    reader.readAsDataURL(file);
                } else {
                    // No new media, just save the changes
                    renderMedia();
                    saveAllData();
                    closeModal();
                    console.log('Media bijgewerkt:', media.title);
                }
            };
        }

        function addSponsor() {
            showSponsorModal();
        }

        function showSponsorModal() {
            const modal = document.createElement('div');
            modal.style.cssText = `
                position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
                background: rgba(0,0,0,0.5); z-index: 1000; display: flex; 
                justify-content: center; align-items: center;
            `;
            
            modal.innerHTML = `
                <div style="background: white; padding: 20px; border-radius: 10px; width: 400px; max-width: 90%;">
                    <h3>Nieuwe Sponsor Toevoegen</h3>
                    <form id="sponsorForm">
                        <div style="margin: 10px 0;">
                            <label>Sponsor Naam:</label><br>
                            <input type="text" id="sponsorName" required style="width: 100%; padding: 8px;">
                        </div>
                        <div style="margin: 10px 0;">
                            <label>Logo Upload:</label><br>
                            <input type="file" id="sponsorLogo" accept=".jpg,.jpeg,.png,.gif,.svg" required style="width: 100%; padding: 8px;">
                            <small>Ondersteunt: JPG, PNG, GIF, SVG</small>
                        </div>
                        <div style="margin: 10px 0;">
                            <label>Website URL (optioneel):</label><br>
                            <input type="url" id="sponsorWebsite" placeholder="https://example.com" style="width: 100%; padding: 8px;">
                        </div>
                        <div style="margin: 20px 0; text-align: right;">
                            <button type="button" onclick="closeModal()" style="margin-right: 10px; padding: 8px 16px;">Annuleren</button>
                            <button type="submit" style="background: #007bff; color: white; padding: 8px 16px; border: none; border-radius: 5px;">Toevoegen</button>
                        </div>
                    </form>
                </div>
            `;
            
            document.body.appendChild(modal);
            
            document.getElementById('sponsorForm').onsubmit = function(e) {
                e.preventDefault();
                const name = document.getElementById('sponsorName').value;
                const website = document.getElementById('sponsorWebsite').value;
                const fileInput = document.getElementById('sponsorLogo');
                
                if (fileInput.files.length > 0) {
                    const file = fileInput.files[0];
                    console.log('Uploaded sponsor logo:', file.name, file.type);
                    
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        const newSponsor = {
                            id: Date.now(),
                            name: name,
                            image: e.target.result,
                            website: website || ''
                        };
                        
                        currentData.sponsors.push(newSponsor);
                        renderSponsors();
                        saveAllData();
                        closeModal();
                        console.log('Sponsor toegevoegd:', newSponsor.name);
                    };
                    
                    reader.readAsDataURL(file);
                } else {
                    alert('Selecteer een logo bestand!');
                }
            };
        }

        function editSponsor(id) {
            const sponsor = currentData.sponsors.find(s => s.id === id);
            if (!sponsor) return;
            
            const modal = document.createElement('div');
            modal.style.cssText = `
                position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
                background: rgba(0,0,0,0.5); z-index: 1000; display: flex; 
                justify-content: center; align-items: center;
            `;
            
            modal.innerHTML = `
                <div style="background: white; padding: 20px; border-radius: 10px; width: 400px; max-width: 90%;">
                    <h3>Sponsor Bewerken</h3>
                    <form id="editSponsorForm">
                        <div style="margin: 10px 0;">
                            <label>Sponsor Naam:</label><br>
                            <input type="text" id="editSponsorName" value="${sponsor.name}" required style="width: 100%; padding: 8px;">
                        </div>
                        <div style="margin: 10px 0;">
                            <label>Huidige Logo:</label><br>
                            <img src="${sponsor.image}" alt="Huidig logo" style="max-width: 200px; max-height: 100px; border: 1px solid #ddd; padding: 5px; background: white;">
                        </div>
                        <div style="margin: 10px 0;">
                            <label>Nieuw Logo Upload (optioneel):</label><br>
                            <input type="file" id="editSponsorLogo" accept=".jpg,.jpeg,.png,.gif,.svg" style="width: 100%; padding: 8px;">
                            <small>Laat leeg om huidige logo te behouden</small>
                        </div>
                        <div style="margin: 10px 0;">
                            <label>Website URL:</label><br>
                            <input type="url" id="editSponsorWebsite" value="${sponsor.website || ''}" placeholder="https://example.com" style="width: 100%; padding: 8px;">
                        </div>
                        <div style="margin: 20px 0; text-align: right;">
                            <button type="button" onclick="closeModal()" style="margin-right: 10px; padding: 8px 16px;">Annuleren</button>
                            <button type="submit" style="background: #007bff; color: white; padding: 8px 16px; border: none; border-radius: 5px;">Opslaan</button>
                        </div>
                    </form>
                </div>
            `;
            
            document.body.appendChild(modal);
            
            document.getElementById('editSponsorForm').onsubmit = function(e) {
                e.preventDefault();
                const newName = document.getElementById('editSponsorName').value;
                const newWebsite = document.getElementById('editSponsorWebsite').value;
                const fileInput = document.getElementById('editSponsorLogo');
                
                // Update basic info
                sponsor.name = newName;
                sponsor.website = newWebsite || '';
                
                // Update logo if new file is uploaded
                if (fileInput.files.length > 0) {
                    const file = fileInput.files[0];
                    console.log('Edit - Uploaded sponsor logo:', file.name, file.type);
                    
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        sponsor.image = e.target.result;
                        renderSponsors();
                        saveAllData();
                        closeModal();
                        console.log('Sponsor bijgewerkt:', sponsor.name);
                    };
                    
                    reader.readAsDataURL(file);
                } else {
                    // No new logo, just save the changes
                    renderSponsors();
                    saveAllData();
                    closeModal();
                    console.log('Sponsor bijgewerkt:', sponsor.name);
                }
            };
        }

        // Delete functions
        function deleteMatch(id) {
            if (confirm('Wedstrijd verwijderen?')) {
                currentData.matches = currentData.matches.filter(match => match.id !== id);
                renderMatches();
                saveAllData();
            }
        }

        function deletePlayer(id) {
            if (confirm('Speler/Staf verwijderen?')) {
                currentData.team = currentData.team.filter(player => player.id !== id);
                renderTeam();
                saveAllData();
            }
        }

        function deleteMedia(id) {
            if (confirm('Media verwijderen?')) {
                currentData.media = currentData.media.filter(media => media.id !== id);
                renderMedia();
                saveAllData();
            }
        }

        function deleteSponsor(id) {
            if (confirm('Sponsor verwijderen?')) {
                currentData.sponsors = currentData.sponsors.filter(sponsor => sponsor.id !== id);
                renderSponsors();
                saveAllData();
            }
        }

        async function saveAllData() {
            try {
                // Update dataManager with current data
                dataManager.currentData = currentData;
                console.log('Saving data:', currentData);
                const success = await dataManager.saveAllData();
                if (success) {
                    alert('Data opgeslagen op server!');
                    // Reload to get fresh data with IDs from database
                    await loadAllData();
                } else {
                    alert('Data opgeslagen lokaal (server niet beschikbaar)');
                }
            } catch (error) {
                console.error('Save failed - Full error:', error);
                console.error('Error message:', error.message);
                console.error('Error stack:', error.stack);
                // Fallback to localStorage
                localStorage.setItem('vvDongen6_data', JSON.stringify(currentData));
                alert('Data opgeslagen lokaal (server fout: ' + error.message + ')');
            }
        }

        // Statistics functions
        function updateStatistics(goals, assists) {
            if (!currentData.scorers) currentData.scorers = [];
            if (!currentData.assists) currentData.assists = [];
            
            // Update scorers
            if (goals) {
                const goalScorers = goals.split(',').map(name => name.trim()).filter(name => name);
                goalScorers.forEach(scorerName => {
                    let scorer = currentData.scorers.find(s => s.name === scorerName);
                    if (scorer) {
                        scorer.goals = (scorer.goals || 0) + 1;
                    } else {
                        currentData.scorers.push({ name: scorerName, goals: 1 });
                    }
                });
            }
            
            // Update assists
            if (assists) {
                const assistGivers = assists.split(',').map(name => name.trim()).filter(name => name);
                assistGivers.forEach(assistName => {
                    let assist = currentData.assists.find(a => a.name === assistName);
                    if (assist) {
                        assist.assists = (assist.assists || 0) + 1;
                    } else {
                        currentData.assists.push({ name: assistName, assists: 1 });
                    }
                });
            }
            
            // Sort statistics
            currentData.scorers.sort((a, b) => (b.goals || 0) - (a.goals || 0));
            currentData.assists.sort((a, b) => (b.assists || 0) - (a.assists || 0));
        }

        function recalculateAllStatistics() {
            // Reset statistics
            currentData.scorers = [];
            currentData.assists = [];
            
            // Recalculate from all matches
            currentData.matches.forEach(match => {
                if (match.goals) {
                    const goalScorers = match.goals.split(',').map(name => name.trim()).filter(name => name);
                    goalScorers.forEach(scorerName => {
                        let scorer = currentData.scorers.find(s => s.name === scorerName);
                        if (scorer) {
                            scorer.goals = (scorer.goals || 0) + 1;
                        } else {
                            currentData.scorers.push({ name: scorerName, goals: 1 });
                        }
                    });
                }
                
                if (match.assists) {
                    const assistGivers = match.assists.split(',').map(name => name.trim()).filter(name => name);
                    assistGivers.forEach(assistName => {
                        let assist = currentData.assists.find(a => a.name === assistName);
                        if (assist) {
                            assist.assists = (assist.assists || 0) + 1;
                        } else {
                            currentData.assists.push({ name: assistName, assists: 1 });
                        }
                    });
                }
            });
            
            // Sort statistics
            currentData.scorers.sort((a, b) => (b.goals || 0) - (a.goals || 0));
            currentData.assists.sort((a, b) => (b.assists || 0) - (a.assists || 0));
        }
        
        // ========== USER MANAGEMENT ==========
        
        async function loadUsers() {
            try {
                const response = await fetch('./auth.php?action=users');
                if (response.ok) {
                    const users = await response.json();
                    renderUsers(users);
                }
            } catch (error) {
                console.error('Failed to load users:', error);
            }
        }
        
        function renderUsers(users) {
            const container = document.getElementById('usersList');
            if (!container) return;
            
            container.innerHTML = '';
            
            users.forEach(user => {
                const userDiv = document.createElement('div');
                userDiv.className = 'item';
                userDiv.innerHTML = `
                    <div style="flex: 1;">
                        <strong>${user.full_name}</strong> (@${user.username})
                        <br><small>Rol: ${user.role === 'admin' ? '👑 Administrator' : '📝 Editor'}</small>
                        ${user.last_login ? `<br><small>Laatst ingelogd: ${new Date(user.last_login).toLocaleString('nl-NL')}</small>` : '<br><small>Nog niet ingelogd</small>'}
                    </div>
                    <div style="display: flex; gap: 8px;">
                        <button onclick="deleteUser(${user.id})" style="background: #f44336; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 13px; transition: all 0.3s; display: inline-flex; align-items: center; gap: 6px;" onmouseover="this.style.background='#d32f2f'" onmouseout="this.style.background='#f44336'">
                            <i class="fas fa-trash"></i> Verwijderen
                        </button>
                    </div>
                `;
                container.appendChild(userDiv);
            });
        }
        
        function addUser() {
            const modal = document.createElement('div');
            modal.style.cssText = `
                position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
                background: rgba(0,0,0,0.5); z-index: 1000; display: flex; 
                justify-content: center; align-items: center;
            `;
            
            modal.innerHTML = `
                <div style="background: white; padding: 20px; border-radius: 10px; width: 400px; max-width: 90%;">
                    <h3>Nieuwe Gebruiker Toevoegen</h3>
                    <form id="userForm">
                        <div style="margin: 10px 0;">
                            <label>Volledige naam:</label><br>
                            <input type="text" id="userFullName" required placeholder="Bijv. Jan Janssen" style="width: 100%; padding: 8px;">
                        </div>
                        <div style="margin: 10px 0;">
                            <label>Gebruikersnaam:</label><br>
                            <input type="text" id="userUsername" required placeholder="Bijv. jjanssen" style="width: 100%; padding: 8px;">
                            <small style="color: #666;">Alleen letters, cijfers en underscore</small>
                        </div>
                        <div style="margin: 10px 0;">
                            <label>Wachtwoord:</label><br>
                            <input type="password" id="userPassword" required placeholder="Minimaal 6 karakters" minlength="6" style="width: 100%; padding: 8px;">
                        </div>
                        <div style="margin: 10px 0;">
                            <label>Rol:</label><br>
                            <select id="userRole" style="width: 100%; padding: 8px;">
                                <option value="admin">👑 Administrator (volledige toegang)</option>
                                <option value="editor">📝 Editor (kan content bewerken)</option>
                            </select>
                        </div>
                        <div style="margin: 20px 0; text-align: right;">
                            <button type="button" onclick="closeModal()" style="margin-right: 10px; padding: 8px 16px;">Annuleren</button>
                            <button type="submit" style="background: #667eea; color: white; padding: 8px 16px; border: none; border-radius: 5px;">Toevoegen</button>
                        </div>
                    </form>
                </div>
            `;
            
            document.body.appendChild(modal);
            
            document.getElementById('userForm').onsubmit = async function(e) {
                e.preventDefault();
                const fullName = document.getElementById('userFullName').value;
                const username = document.getElementById('userUsername').value;
                const password = document.getElementById('userPassword').value;
                const role = document.getElementById('userRole').value;
                
                try {
                    const response = await fetch('./auth.php', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ action: 'add-user', fullName, username, password, role })
                    });
                    
                    const result = await response.json();
                    
                    if (result.success) {
                        alert('✅ Gebruiker succesvol toegevoegd!');
                        loadUsers();
                        closeModal();
                    } else {
                        throw new Error(result.error || 'Toevoegen mislukt');
                    }
                } catch (error) {
                    alert('❌ Fout: ' + error.message);
                }
            };
        }
        
        async function deleteUser(userId) {
            if (confirm('Weet je zeker dat je deze gebruiker wilt verwijderen?')) {
                try {
                    const response = await fetch('./auth.php', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ action: 'delete-user', id: userId })
                    });
                    
                    const result = await response.json();
                    
                    if (result.success) {
                        alert('✅ Gebruiker verwijderd!');
                        loadUsers();
                    } else {
                        throw new Error(result.error || 'Verwijderen mislukt');
                    }
                } catch (error) {
                    alert('❌ Fout: ' + error.message);
                }
            }
        }
        
        // ========== CHANGE PASSWORD ==========
        
        function showChangePasswordModal() {
            const modal = document.createElement('div');
            modal.style.cssText = `
                position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
                background: rgba(0,0,0,0.5); z-index: 1000; display: flex; 
                justify-content: center; align-items: center;
            `;
            
            modal.innerHTML = `
                <div style="background: white; padding: 30px; border-radius: 15px; width: 450px; max-width: 90%; box-shadow: 0 10px 40px rgba(0,0,0,0.2);">
                    <h3 style="margin-bottom: 20px; color: #333;">
                        <i class="fas fa-key" style="color: #4caf50;"></i> Wachtwoord Wijzigen
                    </h3>
                    <form id="changePasswordForm">
                        <div style="margin: 15px 0;">
                            <label style="display: block; margin-bottom: 8px; color: #555; font-weight: 500;">
                                <i class="fas fa-lock"></i> Huidig wachtwoord:
                            </label>
                            <input type="password" id="currentPassword" required 
                                placeholder="Voer je huidige wachtwoord in" 
                                style="width: 100%; padding: 12px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 14px;">
                        </div>
                        <div style="margin: 15px 0;">
                            <label style="display: block; margin-bottom: 8px; color: #555; font-weight: 500;">
                                <i class="fas fa-lock"></i> Nieuw wachtwoord:
                            </label>
                            <input type="password" id="newPassword" required minlength="6"
                                placeholder="Minimaal 6 karakters" 
                                style="width: 100%; padding: 12px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 14px;">
                        </div>
                        <div style="margin: 15px 0;">
                            <label style="display: block; margin-bottom: 8px; color: #555; font-weight: 500;">
                                <i class="fas fa-lock"></i> Bevestig nieuw wachtwoord:
                            </label>
                            <input type="password" id="confirmPassword" required minlength="6"
                                placeholder="Voer opnieuw je nieuwe wachtwoord in" 
                                style="width: 100%; padding: 12px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 14px;">
                        </div>
                        <div style="background: #fff3cd; border-left: 3px solid #ffc107; padding: 12px; margin: 15px 0; border-radius: 6px;">
                            <small style="color: #856404;">
                                <i class="fas fa-exclamation-triangle"></i> 
                                Zorg voor een sterk wachtwoord met letters, cijfers en symbolen.
                            </small>
                        </div>
                        <div style="margin-top: 25px; text-align: right; display: flex; gap: 10px; justify-content: flex-end;">
                            <button type="button" onclick="closeModal()" 
                                style="padding: 10px 20px; border: 2px solid #ddd; background: white; border-radius: 8px; cursor: pointer; font-size: 14px;">
                                Annuleren
                            </button>
                            <button type="submit" 
                                style="background: #4caf50; color: white; padding: 10px 20px; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500;">
                                <i class="fas fa-check"></i> Wachtwoord Wijzigen
                            </button>
                        </div>
                    </form>
                </div>
            `;
            
            document.body.appendChild(modal);
            
            document.getElementById('changePasswordForm').onsubmit = async function(e) {
                e.preventDefault();
                const currentPassword = document.getElementById('currentPassword').value;
                const newPassword = document.getElementById('newPassword').value;
                const confirmPassword = document.getElementById('confirmPassword').value;
                
                // Check if passwords match
                if (newPassword !== confirmPassword) {
                    alert('❌ De nieuwe wachtwoorden komen niet overeen!');
                    return;
                }
                
                const submitBtn = e.target.querySelector('button[type="submit"]');
                submitBtn.disabled = true;
                submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Wijzigen...';
                
                try {
                    const response = await fetch('./auth.php', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ 
                            action: 'change-password', 
                            currentPassword, 
                            newPassword 
                        })
                    });
                    
                    const result = await response.json();
                    
                    if (result.success) {
                        alert('✅ Wachtwoord succesvol gewijzigd!\n\nJe wordt uitgelogd en moet opnieuw inloggen met je nieuwe wachtwoord.');
                        closeModal();
                        handleLogout();
                    } else {
                        throw new Error(result.error || 'Wijzigen mislukt');
                    }
                } catch (error) {
                    alert('❌ Fout: ' + error.message);
                    submitBtn.disabled = false;
                    submitBtn.innerHTML = '<i class="fas fa-check"></i> Wachtwoord Wijzigen';
                }
            };
        }
        
        // ========== SOCIAL MEDIA MANAGEMENT ==========
        
        const socialMediaIcons = {
            facebook: { icon: 'fab fa-facebook', color: '#1877f2', name: 'Facebook', placeholder: 'https://facebook.com/vvdongen6' },
            instagram: { icon: 'fab fa-instagram', color: '#e4405f', name: 'Instagram', placeholder: 'https://instagram.com/vvdongen6' },
            tiktok: { icon: 'fab fa-tiktok', color: '#000000', name: 'TikTok', placeholder: 'https://tiktok.com/@vvdongen6' },
            youtube: { icon: 'fab fa-youtube', color: '#ff0000', name: 'YouTube', placeholder: 'https://youtube.com/@vvdongen6' },
            twitter: { icon: 'fab fa-twitter', color: '#1da1f2', name: 'Twitter', placeholder: 'https://twitter.com/vvdongen6' }
        };
        
        async function loadSocialMediaAdmin() {
            try {
                const response = await fetch('./api.php/api/social-media');
                if (response.ok) {
                    const socialMedia = await response.json();
                    renderSocialMedia(socialMedia);
                }
            } catch (error) {
                console.error('Failed to load social media:', error);
            }
        }
        
        function renderSocialMedia(socialMedia) {
            const container = document.getElementById('socialMediaList');
            if (!container) return;
            
            container.innerHTML = '';
            
            socialMedia.forEach(sm => {
                const config = socialMediaIcons[sm.platform];
                if (!config) return;
                
                const smDiv = document.createElement('div');
                smDiv.className = 'item';
                smDiv.style.flexWrap = 'nowrap';
                
                smDiv.innerHTML = `
                    <div style="width: 50px; height: 50px; background: ${config.color}; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 24px;">
                        <i class="${config.icon}"></i>
                    </div>
                    <div style="flex: 1;">
                        <strong>${config.name}</strong>
                        <br><small>${sm.url || 'Nog niet ingesteld'}</small>
                        <br><small style="color: ${sm.enabled ? '#4caf50' : '#999'};">${sm.enabled ? '✓ Actief' : '✗ Uitgeschakeld'}</small>
                    </div>
                    <div style="display: flex; gap: 8px;">
                        <button onclick="editSocialMedia('${sm.platform}')" style="background: #ff9800; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 13px; transition: all 0.3s; display: inline-flex; align-items: center; gap: 6px;" onmouseover="this.style.background='#f57c00'" onmouseout="this.style.background='#ff9800'">
                            <i class="fas fa-edit"></i> Bewerken
                        </button>
                    </div>
                `;
                
                container.appendChild(smDiv);
            });
        }
        
        function editSocialMedia(platform) {
            const config = socialMediaIcons[platform];
            if (!config) return;
            
            // Get current data
            fetch('./api.php/api/social-media')
                .then(r => r.json())
                .then(socialMedia => {
                    const current = socialMedia.find(sm => sm.platform === platform);
                    if (!current) return;
                    
                    const modal = document.createElement('div');
                    modal.style.cssText = `
                        position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
                        background: rgba(0,0,0,0.5); z-index: 1000; display: flex; 
                        justify-content: center; align-items: center;
                    `;
                    
                    modal.innerHTML = `
                        <div style="background: white; padding: 30px; border-radius: 15px; width: 500px; max-width: 90%;">
                            <div style="text-align: center; margin-bottom: 20px;">
                                <div style="width: 80px; height: 80px; background: ${config.color}; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: white; font-size: 36px; margin-bottom: 15px;">
                                    <i class="${config.icon}"></i>
                                </div>
                                <h3>${config.name} Instellen</h3>
                            </div>
                            <form id="socialMediaForm">
                                <div style="margin: 15px 0;">
                                    <label style="display: block; margin-bottom: 8px; color: #555; font-weight: 500;">
                                        <i class="fas fa-link"></i> ${config.name} URL:
                                    </label>
                                    <input type="url" id="smUrl" value="${current.url || ''}" 
                                        placeholder="${config.placeholder}" 
                                        style="width: 100%; padding: 12px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 14px;">
                                    <small style="color: #666;">Laat leeg om uit te schakelen</small>
                                </div>
                                <div style="margin: 20px 0; padding: 12px; background: #f0f4ff; border-radius: 8px;">
                                    <label style="display: flex; align-items: center; cursor: pointer;">
                                        <input type="checkbox" id="smEnabled" ${current.enabled ? 'checked' : ''} style="margin-right: 10px; width: 20px; height: 20px;">
                                        <span style="font-weight: 500;">Toon op website</span>
                                    </label>
                                </div>
                                <div style="margin-top: 25px; display: flex; gap: 10px; justify-content: flex-end;">
                                    <button type="button" onclick="closeModal()" 
                                        style="padding: 10px 20px; border: 2px solid #ddd; background: white; border-radius: 8px; cursor: pointer;">
                                        Annuleren
                                    </button>
                                    <button type="submit" 
                                        style="background: ${config.color}; color: white; padding: 10px 20px; border: none; border-radius: 8px; cursor: pointer; font-weight: 500;">
                                        <i class="fas fa-save"></i> Opslaan
                                    </button>
                                </div>
                            </form>
                        </div>
                    `;
                    
                    document.body.appendChild(modal);
                    
                    document.getElementById('socialMediaForm').onsubmit = async function(e) {
                        e.preventDefault();
                        const url = document.getElementById('smUrl').value;
                        const enabled = document.getElementById('smEnabled').checked ? 1 : 0;
                        
                        try {
                            const response = await fetch('./api.php/api/social-media', {
                                method: 'POST',
                                headers: { 'Content-Type': 'application/json' },
                                body: JSON.stringify({ platform, url, enabled })
                            });
                            
                            const result = await response.json();
                            
                            if (result.success) {
                                alert('✅ Social media link opgeslagen!');
                                loadSocialMediaAdmin();
                                closeModal();
                            } else {
                                throw new Error(result.error || 'Opslaan mislukt');
                            }
                        } catch (error) {
                            alert('❌ Fout: ' + error.message);
                        }
                    };
                });
        }

        // === SEASON RESET FUNCTIONS ===
        function showSeasonResetModal() {
            const modal = document.createElement('div');
            modal.style.cssText = `
                position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
                background: rgba(0,0,0,0.8); z-index: 10000; display: flex; 
                justify-content: center; align-items: center; padding: 20px;
            `;
            
            modal.innerHTML = `
                <div style="background: white; padding: 30px; border-radius: 15px; max-width: 500px; width: 100%;">
                    <div style="text-align: center; margin-bottom: 25px;">
                        <i class="fas fa-calendar-times" style="font-size: 48px; color: #ff6b6b; margin-bottom: 15px;"></i>
                        <h2 style="color: #d63031; margin-bottom: 10px;">Seizoen Reset</h2>
                        <p style="color: #666; font-size: 14px;">
                            Reset alle seizoen-specifieke data voor seizoen 2026-2027
                        </p>
                    </div>
                    
                    <div style="background: #fff5f5; padding: 20px; border-radius: 8px; margin-bottom: 25px; border-left: 4px solid #ff6b6b;">
                        <h4 style="color: #d63031; margin: 0 0 15px 0;"><i class="fas fa-exclamation-triangle"></i> Wat wordt gereset:</h4>
                        <ul style="margin: 0; padding-left: 20px; color: #666; font-size: 14px;">
                            <li>Alle wedstrijden (matches)</li>
                            <li>Alle spelersstatistieken (goals & assists)</li>
                            <li><strong>Media bestanden (optioneel)</strong></li>
                        </ul>
                    </div>

                    <div style="margin-bottom: 25px;">
                        <label style="display: flex; align-items: center; margin-bottom: 15px; cursor: pointer;">
                            <input type="checkbox" id="createBackup" checked style="margin-right: 10px; transform: scale(1.2);">
                            <span style="font-size: 14px; color: #333;">Maak automatisch een backup van huidige data</span>
                        </label>
                        
                        <label style="display: flex; align-items: center; margin-bottom: 15px; cursor: pointer;">
                            <input type="checkbox" id="resetMedia" style="margin-right: 10px; transform: scale(1.2);">
                            <span style="font-size: 14px; color: #333;">Ook alle media bestanden verwijderen</span>
                        </label>
                    </div>

                    <div style="display: flex; gap: 15px; justify-content: center;">
                        <button onclick="closeModal()" style="background: #6c757d; color: white; border: none; padding: 12px 25px; border-radius: 8px; cursor: pointer; font-size: 14px;">
                            <i class="fas fa-times"></i> Annuleren
                        </button>
                        <button onclick="confirmSeasonReset()" style="background: #ff6b6b; color: white; border: none; padding: 12px 25px; border-radius: 8px; cursor: pointer; font-size: 14px;">
                            <i class="fas fa-calendar-times"></i> Reset Bevestigen
                        </button>
                    </div>
                </div>
            `;
            
            document.body.appendChild(modal);
        }

        async function confirmSeasonReset() {
            const createBackup = document.getElementById('createBackup').checked;
            const resetMedia = document.getElementById('resetMedia').checked;
            
            try {
                // Show loading
                const confirmBtn = event.target;
                const originalText = confirmBtn.innerHTML;
                confirmBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Bezig met resetten...';
                confirmBtn.disabled = true;
                
                const response = await fetch('./api.php/api/season/reset', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        createBackup: createBackup,
                        resetMedia: resetMedia,
                        shouldReset: true
                    })
                });
                
                const result = await response.json();
                
                if (result.success) {
                    alert('✅ ' + result.message);
                    closeModal();
                    // Reload data to show empty state
                    await loadAllData();
                } else {
                    throw new Error(result.error || 'Reset mislukt');
                }
                
            } catch (error) {
                alert('❌ Fout: ' + error.message);
                // Reset button
                const confirmBtn = event.target;
                confirmBtn.innerHTML = '<i class="fas fa-calendar-times"></i> Reset Bevestigen';
                confirmBtn.disabled = false;
            }
        }

        function showBackupModal() {
            const modal = document.createElement('div');
            modal.style.cssText = `
                position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
                background: rgba(0,0,0,0.8); z-index: 10000; display: flex; 
                justify-content: center; align-items: center; padding: 20px;
            `;
            
            modal.innerHTML = `
                <div style="background: white; padding: 30px; border-radius: 15px; max-width: 400px; width: 100%;">
                    <div style="text-align: center; margin-bottom: 25px;">
                        <i class="fas fa-download" style="font-size: 48px; color: #74b9ff; margin-bottom: 15px;"></i>
                        <h2 style="color: #0984e3; margin-bottom: 10px;">Backup Maken</h2>
                        <p style="color: #666; font-size: 14px;">
                            Maak een backup van alle huidige seizoen data
                        </p>
                    </div>
                    
                    <div style="background: #f8f9fa; padding: 20px; border-radius: 8px; margin-bottom: 25px;">
                        <p style="margin: 0; color: #666; font-size: 14px; text-align: center;">
                            De backup wordt opgeslagen in: <code>/var/www/vv-dongen6/backups/</code>
                        </p>
                    </div>

                    <div style="display: flex; gap: 15px; justify-content: center;">
                        <button onclick="closeModal()" style="background: #6c757d; color: white; border: none; padding: 12px 25px; border-radius: 8px; cursor: pointer; font-size: 14px;">
                            <i class="fas fa-times"></i> Sluiten
                        </button>
                        <button onclick="createManualBackup()" style="background: #74b9ff; color: white; border: none; padding: 12px 25px; border-radius: 8px; cursor: pointer; font-size: 14px;">
                            <i class="fas fa-download"></i> Backup Maken
                        </button>
                    </div>
                </div>
            `;
            
            document.body.appendChild(modal);
        }

        async function createManualBackup() {
            try {
                // Show loading
                const backupBtn = event.target;
                const originalText = backupBtn.innerHTML;
                backupBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Bezig...';
                backupBtn.disabled = true;
                
                const response = await fetch('./api.php/api/backup/create', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' }
                });
                
                const result = await response.json();
                
                if (result.success) {
                    alert('✅ Backup succesvol gemaakt!');
                    closeModal();
                } else {
                    throw new Error(result.error || 'Backup mislukt');
                }
                
            } catch (error) {
                alert('❌ Fout: ' + error.message);
                // Reset button
                const backupBtn = event.target;
                backupBtn.innerHTML = '<i class="fas fa-download"></i> Backup Maken';
                backupBtn.disabled = false;
            }
        }
    </script>
</body>
</html>