<?php
session_start();
include("../../functions/functions.php");
require_once "../../templates/header.php";

// Helper für sichere Ausgabe
function h($v){ return htmlspecialchars((string)$v, ENT_QUOTES, 'UTF-8'); }
?>

<style>
    :root {
        --panel: rgba(15, 18, 27, 0.65);
        --border: rgba(255, 255, 255, 0.12);
        --txt: #f0f0f0;
        --muted: #bbb;
        --accent: #ff6a00; /* Neon Orange */
        --shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }

    /* Hauptcontainer mit Abstand für den fixierten Header */
    .competitions-page {
        margin-top: 160px;
    }

    /* Das Karteikarten-Design */
    .esports-card {
        position: relative;
        border-radius: 18px;
        background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid var(--border);
        box-shadow: var(--shadow);
        margin-bottom: 24px;
        overflow: hidden;
        transition: transform .25s, box-shadow .25s, border-color .25s;
    }

    .esports-card:hover {
        transform: translateY(-3px);
        border-color: rgba(255, 106, 0, .4);
        box-shadow: 0 16px 40px rgba(255, 106, 0, .25);
    }

    /* Header der Karte */
    .esports-head {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 14px 18px 12px;
        border-bottom: 2px solid var(--accent);
        background: linear-gradient(90deg, rgba(255, 106, 0, 0.1), rgba(0, 0, 0, 0));
    }

    .esports-head h2 {
        margin: 0;
        color: var(--txt);
        text-transform: uppercase;
        font-weight: 800;
        letter-spacing: .5px;
        font-size: 18px;
    }

    .esports-head .comp-logo {
        height: 28px;
        width: auto;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    }

    /* Content-Bereich und Scrollbar */
    .esports-wrap {
        position: relative;
        z-index: 1;
        padding: 0; /* Padding wird von Tabelle übernommen */
    }

    .scroll-box {
        max-height: 600px; /* Feste Höhe für Scrollbereich in der 2-Spalten-Ansicht */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Schicke Scrollleiste */
    .scroll-box::-webkit-scrollbar { width: 6px; }
    .scroll-box::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; }
    .scroll-box::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); }


    /* Tabelle */
    .esports-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        color: var(--txt);
    }

    /* Sticky Header (bleibt beim Scrollen oben) */
    .esports-table thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        background: rgba(15, 18, 27, 0.95); /* Fast undurchsichtig für Lesbarkeit */
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        text-transform: uppercase;
        font-weight: 700;
        letter-spacing: .5px;
        font-size: 11px;
        color: #ffb37a; /* Helles Orange */
        border-bottom: 1px solid rgba(255, 255, 255, .12);
        padding: 12px 15px;
    }

    .esports-table tbody td {
        padding: 12px 15px;
        border-bottom: 1px solid rgba(255, 255, 255, .06);
        vertical-align: middle;
        font-weight: 500;
    }

    .esports-table tbody tr:hover td {
        background: linear-gradient(90deg, rgba(255, 106, 0, .15), rgba(255, 160, 60, .1));
    }

    .esports-table a {
        color: var(--txt);
        text-decoration: none;
        transition: color 0.2s;
    }

    .esports-table a:hover {
        color: var(--accent);
        text-decoration: none;
    }

    .team-logo {
        height: 26px;
        width: auto;
        vertical-align: middle;
        filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5));
        transition: transform 0.2s;
    }
    a:hover .team-logo { transform: scale(1.1); }

    /* Kleine Info-Pille oben rechts */
    .badge-pill {
        margin-left: auto;
        font-size: 11px;
        color: #fff;
        background: rgba(255, 106, 0, 0.15);
        border: 1px solid rgba(255, 106, 0, 0.3);
        padding: 4px 10px;
        border-radius: 12px;
        font-weight: bold;
        text-transform: uppercase;
    }

    .muted { color: var(--muted); font-size: 13px; font-style: italic; }
</style>


<div class="col-md-12 competitions-page">
    <div class="row">
        <?php
        // Schleife durch alle aktiven Ligen
        foreach(getAktiveLigen() as $wettbewerbe_id):
            $wid = (int)$wettbewerbe_id;
            $compName = h(getWettbewerbVonWettbewerbeID($wid));

            // Teams abfragen
            $q = mysqli_query($connection, "SELECT team_id, team FROM s_teams WHERE liga_id = '$wid' AND aktiv = '1' ORDER BY team ASC");
            $teamCount = mysqli_num_rows($q);
        ?>
        <div class="col-md-6">
            <div class="esports-card animate-box">

                <div class="esports-head">
                    <img src="../../images/wettbewerbe/<?= $wid ?>.png" class="comp-logo" alt="<?= $compName ?>">
                    <h2><?= $compName ?></h2>
                    <span class="badge-pill"><?= $teamCount ?> Teams</span>
                </div>

                <div class="esports-wrap table-responsive scroll-box">
                    <table class="esports-table">
                        <thead>
                            <tr>
                                <th width="15%" align="center">Logo</th>
                                <th width="85%" align="left">Teamname</th>
                            </tr>
                        </thead>
                        <tbody>
                        <?php
                        if($teamCount > 0):
                            while($db = $q->fetch_object()):
                                $tid = (int)$db->team_id;
                                $tname = h($db->team);
                        ?>
                            <tr>
                                <td align="center">
                                    <a href="../kader/index.php?team=<?= $tid ?>">
                                        <img src="../../images/teamlogos/<?= $tid ?>.png" class="team-logo" alt="<?= $tname ?>">
                                    </a>
                                </td>
                                <td align="left">
                                    <a href="../kader/index.php?team=<?= $tid ?>" style="font-size:14px;"><?= $tname ?></a>
                                </td>
                            </tr>
                        <?php
                            endwhile;
                        else:
                        ?>
                            <tr>
                                <td colspan="2" align="center" class="muted" style="padding: 30px;">
                                    Keine aktiven Teams in diesem Wettbewerb gefunden.
                                </td>
                            </tr>
                        <?php endif; ?>
                        </tbody>
                    </table>
                </div>

            </div>
        </div>
        <?php
        endforeach;
        ?>
    </div>
</div>

<?php require_once "../../templates/footer.php"; ?>
