exit-game/gesamtliste.php

<?php
require_once 'config.php';
require_once 'db_config.php';

$filterPlayerId = isset($_GET['team_filter']) ? (int)$_GET['team_filter'] : 0;

$sql = "SELECT sp.*, t.bezeichnung as typ_name, MAX(sc.sterne) as best_sterne, 
               (SELECT status FROM besitzstatus WHERE spiel_id = sp.id AND spieler_id = :fid) as einzel_status,
               (SELECT GROUP_CONCAT(CONCAT(p.name, ': ', b.status) SEPARATOR '||') 
                FROM besitzstatus b JOIN spieler p ON b.spieler_id = p.id 
                WHERE b.spiel_id = sp.id AND b.status != 'nicht besitzt') as besitz_info
        FROM spiele sp
        LEFT JOIN game_typen t ON sp.typ_id = t.id
        LEFT JOIN scores sc ON sp.id = sc.spiel_id " . 
        ($filterPlayerId > 0 ? " AND sc.spieler_id = :pid " : "") . "
        GROUP BY sp.id ORDER BY sp.id DESC";

$stmt = $pdo->prepare($sql);
$params = ['fid' => $filterPlayerId];
if ($filterPlayerId > 0) { $params['pid'] = $filterPlayerId; }
$stmt->execute($params);
$inventory = $stmt->fetchAll();

$spieler = $pdo->query("SELECT * FROM spieler ORDER BY name ASC")->fetchAll();
?>
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EXIT - Gesamtliste</title>
    <style>
        /* THEME VARIABLEN */
        :root { 
            --bg: #f8f9fa; --card: #ffffff; --text: #333; --border: #ddd; 
            --header-bg: #2c3e50; --header-text: #ffffff; --row-border: #eee;
        }
        .dark-theme { 
            --bg: #121212; --card: #1e1e1e; --text: #e0e0e0; --border: #333; 
            --header-bg: #252525; --header-text: #e67e22; --row-border: #2a2a2a;
        }

        body { font-family: 'Segoe UI', sans-serif; background: var(--bg); margin: 0; padding: 20px; color: var(--text); transition: 0.3s; }
        .container { max-width: 1400px; margin: 0 auto; }
        .header-area { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
        
        .nav-group { display: flex; align-items: center; gap: 10px; }
        .back-link { color: #e67e22; text-decoration: none; font-weight: bold; padding: 8px 15px; border: 2px solid #e67e22; border-radius: 6px; }
        .theme-toggle { background: var(--card); border: 1px solid var(--border); color: var(--text); padding: 8px 12px; border-radius: 20px; cursor: pointer; font-size: 1.1rem; }

        .filter-bar { background: var(--card); padding: 15px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); display: flex; gap: 15px; margin-bottom: 20px; align-items: center; border: 1px solid var(--border); }
        select, input { padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); }
        input { flex-grow: 1; }

        table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: 12px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
        th { background: var(--header-bg); color: var(--header-text); text-align: left; padding: 15px; cursor: pointer; font-size: 0.8em; }
        td { padding: 12px 15px; border-bottom: 1px solid var(--row-border); }
        
        .game-thumb { width: 55px; height: 55px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); cursor: pointer; transition: 0.2s; }
        .game-thumb:hover { transform: scale(1.1); border-color: #e67e22; }

        .lvl-badge { padding: 4px 10px; border-radius: 20px; color: white; font-size: 11px; font-weight: bold; text-transform: uppercase; }
        .lvl-Einsteiger { background: #27ae60; } 
        .lvl-Fortgeschrittene { background: #2980b9; } 
        .lvl-Profi { background: #c0392b; }
        .lvl-unknown, .badge-unknown { background: #f39c12; color: white; }

        .st-badge { padding: 5px 12px; border-radius: 15px; font-size: 11px; font-weight: bold; }
        .st-besitzt { background: #d4edda; color: #155724; }
        .dark-theme .st-besitzt { background: #1b4332; color: #74c69d; }
        .st-verkauft { background: #fff3cd; color: #856404; }
        .st-keins { background: #f8d7da; color: #721c24; }
        
        .team-pill { display: inline-flex; align-items: center; background: var(--bg); padding: 4px 10px; border-radius: 6px; font-size: 12px; margin: 2px; border: 1px solid var(--border); }
        .dot { height: 8px; width: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; }

        #imgModal { display: none; position: fixed; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); align-items: center; justify-content: center; cursor: zoom-out; }
        #modalContent { max-width: 90%; max-height: 90%; border-radius: 10px; }
        .image-preview { position: absolute; display: none; width: 220px; border: 4px solid white; border-radius: 12px; z-index: 999; box-shadow: 0 15px 35px rgba(0,0,0,0.4); pointer-events: none; }
    </style>
    <script>
        if (localStorage.getItem('theme') === 'dark') document.documentElement.classList.add('dark-theme');
    </script>
</head>
<body>

<div class="container">
    <div class="header-area">
        <h1>📝 Sammlungs-Übersicht</h1>
        <div class="nav-group">
            <button onclick="toggleTheme()" class="theme-toggle" id="theme-icon">🌙</button>
            <a href="index.php" class="back-link">← Zum Dashboard</a>
        </div>
    </div>

    <div class="filter-bar">
        <form method="GET"><select name="team_filter" onchange="this.form.submit()">
            <option value="0">-- Alle Teams --</option>
            <?php foreach ($spieler as $p): ?>
                <option value="<?= $p['id'] ?>" <?= $filterPlayerId == $p['id'] ? 'selected' : '' ?>><?= htmlspecialchars($p['name']) ?></option>
            <?php endforeach; ?>
        </select></form>
        <input type="text" id="searchInput" placeholder="Suchen..." onkeyup="filterTable()">
    </div>

    <table id="exitTable">
        <thead>
            <tr>
                <th onclick="sortTable(0)">ID</th>
                <th>Bild</th>
                <th onclick="sortTable(2)">Titel</th>
                <th>Level</th>
                <th>Bestwert</th>
                <th>Besitzstatus</th>
            </tr>
        </thead>
        <tbody>
            <?php foreach ($inventory as $row): 
                $lvl = (empty($row['level']) || strtolower($row['level']) == 'unknown') ? 'unknown' : $row['level'];
                $typ = (empty($row['typ_name']) || strtolower($row['typ_name']) == 'unknown') ? 'Unbekannt' : $row['typ_name'];
            ?>
            <tr>
                <td>#<?= $row['id'] ?></td>
                <td>
                    <img src="<?= htmlspecialchars($row['bild_url']) ?>" 
                         class="game-thumb" 
                         onclick="openModal('<?= htmlspecialchars($row['bild_url']) ?>')"
                         onmouseover="showPreview(event, '<?= htmlspecialchars($row['bild_url']) ?>')" 
                         onmouseout="hidePreview()"
                         onerror="this.src='https://via.placeholder.com/60?text=?'">
                </td>
                <td>
                    <strong><?= htmlspecialchars($row['titel']) ?></strong><br>
                    <?php if($typ == 'Unbekannt'): ?>
                        <small class="lvl-badge badge-unknown" style="padding: 1px 6px; font-size: 9px;">UNBEKANNT</small>
                    <?php else: ?>
                        <small style="opacity: 0.7;"><?= htmlspecialchars($typ) ?></small>
                    <?php endif; ?>
                </td>
                <td>
                    <span class="lvl-badge lvl-<?= $lvl ?>">
                        <?= ($lvl == 'unknown') ? 'Unbekannt' : $lvl ?>
                    </span>
                </td>
                <td><?= $row['best_sterne'] ? "<b>{$row['best_sterne']} ★</b>" : "-" ?></td>
                <td>
                    <?php if ($filterPlayerId > 0): 
                        $st = $row['einzel_status'] ?: 'nicht besitzt';
                        $class = ($st == 'besitzt') ? 'st-besitzt' : (($st == 'verkauft') ? 'st-verkauft' : 'st-keins');
                        echo "<span class='st-badge $class'>".strtoupper($st)."</span>";
                    else:
                        if ($row['besitz_info']) {
                            foreach (explode('||', $row['besitz_info']) as $t) {
                                $parts = explode(': ', $t);
                                if(count($parts) < 2) continue;
                                list($tn, $ts) = $parts;
                                $dot = ($ts == 'besitzt') ? '#27ae60' : '#f39c12';
                                echo "<span class='team-pill'><span class='dot' style='background:$dot'></span>$tn ($ts)</span>";
                            }
                        } else { echo "<small>-</small>"; }
                    endif; ?>
                </td>
            </tr>
            <?php endforeach; ?>
        </tbody>
    </table>
</div>

<div id="imgModal" onclick="this.style.display='none'"><img id="modalContent"></div>
<img id="hoverPreview" class="image-preview" src="">

<script>
    function toggleTheme() {
        const isDark = document.documentElement.classList.toggle('dark-theme');
        localStorage.setItem('theme', isDark ? 'dark' : 'light');
        document.getElementById('theme-icon').innerText = isDark ? '☀️' : '🌙';
    }
    if (localStorage.getItem('theme') === 'dark') document.getElementById('theme-icon').innerText = '☀️';

    const modal = document.getElementById("imgModal");
    const modalImg = document.getElementById("modalContent");
    function openModal(url) { modal.style.display = "flex"; modalImg.src = url; hidePreview(); }

    const preview = document.getElementById('hoverPreview');
    function showPreview(e, url) { 
        if(modal.style.display === "flex") return;
        preview.src = url; preview.style.display = 'block'; updatePos(e); 
    }
    function hidePreview() { preview.style.display = 'none'; }
    function updatePos(e) { preview.style.left = (e.pageX + 20) + 'px'; preview.style.top = (e.pageY - 100) + 'px'; }
    document.addEventListener('mousemove', (e) => { if(preview.style.display==='block') updatePos(e); });

    function filterTable() {
        let val = document.getElementById("searchInput").value.toUpperCase();
        let tr = document.getElementById("exitTable").getElementsByTagName("tr");
        for (let i = 1; i < tr.length; i++) tr[i].style.display = tr[i].innerText.toUpperCase().includes(val) ? "" : "none";
    }

    function sortTable(n) {
        var table = document.getElementById("exitTable"), rows, switching = true, i, x, y, should, dir = "asc", cnt = 0;
        while (switching) {
            switching = false; rows = table.rows;
            for (i = 1; i < (rows.length - 1); i++) {
                should = false; x = rows[i].getElementsByTagName("TD")[n]; y = rows[i + 1].getElementsByTagName("TD")[n];
                let valX = x.innerText.toLowerCase(); let valY = y.innerText.toLowerCase();
                if (n === 0) { valX = parseInt(valX.replace('#','')); valY = parseInt(valY.replace('#','')); }
                if (dir == "asc") { if (valX > valY) { should = true; break; } }
                else { if (valX < valY) { should = true; break; } }
            }
            if (should) { rows[i].parentNode.insertBefore(rows[i + 1], rows[i]); switching = true; cnt++; }
            else if (cnt == 0 && dir == "asc") { dir = "desc"; switching = true; }
        }
    }
</script>
</body>
</html>