erdo
/
exit-game


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

// Filter-Werte abrufen
$filterPlayerId = isset($_GET['team_filter']) ? (int)$_GET['team_filter'] : 0;
$filterTypId = isset($_GET['typ_filter']) ? (int)$_GET['typ_filter'] : 0;

// SQL Query mit dynamischen Filtern
$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 " : "") . "
        WHERE 1=1 ";

if ($filterTypId > 0) {
    $sql .= " AND sp.typ_id = :tid ";
}

$sql .= " GROUP BY sp.id ORDER BY sp.id DESC";

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

$stmt->execute($params);
$inventory = $stmt->fetchAll();

$spieler = $pdo->query("SELECT * FROM spieler ORDER BY name ASC")->fetchAll();
$typen = $pdo->query("SELECT * FROM game_typen ORDER BY bezeichnung 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>
        :root { 
            --bg: #f8f9fa; --card: #ffffff; --text: #333; --border: #ddd; 
            --header-bg: #2c3e50; --header-text: #ffffff; --row-border: #eee;
            --accent: #e67e22;
        }
        .dark-theme { 
            --bg: #121212cf; --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 { background: var(--accent); color: white !important; text-decoration: none; font-weight: bold; padding: 10px 18px; border-radius: 6px; display: inline-block; }
        
        .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); flex-wrap: wrap; }
        .filter-bar form { display: flex; gap: 10px; flex-grow: 1; align-items: center; }
        
        select, input { padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); }
        #searchInput { flex-grow: 1; min-width: 200px; }

        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.85em; }
        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; }
        .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 { background: #f39c12; }

        .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; }
        
        .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; }
        #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>
</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" style="background:none; border:none; font-size:1.5rem; cursor:pointer;">🌙</button>
            <a href="index.php" class="back-link">Dashboard</a>
        </div>
    </div>

    <div class="filter-bar">
        <form method="GET" id="filterForm">
            <select name="team_filter" onchange="document.getElementById('filterForm').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>

            <select name="typ_filter" onchange="document.getElementById('filterForm').submit()">
                <option value="0">-- Alle Typen --</option>
                <?php foreach ($typen as $t): ?>
                    <option value="<?= $t['id'] ?>" <?= $filterTypId == $t['id'] ? 'selected' : '' ?>><?= htmlspecialchars($t['bezeichnung']) ?></option>
                <?php endforeach; ?>
            </select>
        </form>
        
        <input type="text" id="searchInput" placeholder="Suchen..." onkeyup="filterTable()">
    </div>

    <table id="exitTable">
        <thead>
            <tr>
                <th style="width: 70px;">Bild</th>
                <th onclick="sortTable(1)">Titel ↕</th>
                <th onclick="sortTable(2)">Level ↕</th>
                <th onclick="sortTable(3)">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>
                    <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>
                    <small style="opacity: 0.7;"><?= htmlspecialchars($typ) ?></small>
                </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.documentElement.classList.add('dark-theme');
        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");
        var rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
        switching = true; dir = "asc"; 
        while (switching) {
            switching = false; rows = table.rows;
            for (i = 1; i < (rows.length - 1); i++) {
                shouldSwitch = false;
                x = rows[i].getElementsByTagName("TD")[n];
                y = rows[i + 1].getElementsByTagName("TD")[n];
                let valX = x.innerText.toLowerCase().trim();
                let valY = y.innerText.toLowerCase().trim();
                if (dir == "asc") { if (valX > valY) { shouldSwitch = true; break; } }
                else if (dir == "desc") { if (valX < valY) { shouldSwitch = true; break; } }
            }
            if (shouldSwitch) {
                rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
                switching = true; switchcount ++;      
            } else {
                if (switchcount == 0 && dir == "asc") { dir = "desc"; switching = true; }
            }
        }
    }
</script>
</body>
</html>