<?php
// --- TAMIM 1280 MASTER FIX START (সেশন ও লগইন লুপ চিরস্থায়ী সমাধান) ---
$sessionPath = __DIR__ . '/sessions'; 
if (!file_exists($sessionPath)) { @mkdir($sessionPath, 0755, true); }
if (is_writable($sessionPath)) { ini_set('session.save_path', $sessionPath); }
if (session_status() === PHP_SESSION_NONE) { session_start(); }
// --- TAMIM 1280 MASTER FIX END ---

if (!isset($_SESSION['user_id'])) { header("Location: login.php"); exit(); }

include 'db.php';
if (!isset($_GET['id'])) die("SYSTEM ERROR: ID Missing");
$match_id = intval($_GET['id']);
$match = $conn->query("SELECT * FROM matches WHERE id=$match_id")->fetch_assoc();
if (!$match) die("SYSTEM ERROR: Match Data Not Found");

$sql = "SELECT * FROM match_participants WHERE match_id=$match_id ORDER BY team_number ASC, 
    CASE WHEN player_role = 'Leader' THEN 1 WHEN player_role = 'Officer' THEN 2 ELSE 3 END";
$result = $conn->query($sql);
$teams = [];
while ($row = $result->fetch_assoc()) { $teams[$row['team_number']][] = $row; }
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Master Interface | TAMIM 1280</title>
    
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Rajdhani:wght@600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"></script>

    <style>
        :root {
            --primary: #00f7ff; 
            --secondary: #0055ff; 
            --bg-dark: #05070a;
            --glass: rgba(10, 25, 40, 0.9);
        }

        body { background: #000; font-family: 'Rajdhani', sans-serif; margin: 0; color: #fff; }

        /* --- 🛠️ DYNAMIC CONTROL PANEL --- */
        .master-panel {
            background: #111; padding: 15px; border-bottom: 2px solid var(--primary);
            display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; position: sticky; top: 0; z-index: 1000;
        }
        .ctrl-grp { display: flex; flex-direction: column; gap: 3px; }
        .ctrl-grp label { font-size: 9px; font-family: 'Orbitron'; color: var(--primary); text-transform: uppercase; }
        select, input { background: #000; border: 1px solid #333; color: #fff; padding: 6px; font-size: 12px; border-radius: 4px; }

        /* --- 💎 CAPTURE AREA (আগের ছোট সাইজ সংরক্ষিত) 💎 --- */
        .container { width: 98%; max-width: 1100px; margin: 30px auto; text-align: center; }

        #capture-area {
            background: var(--bg-dark);
            background-image: linear-gradient(rgba(0, 247, 255, 0.05) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(0, 247, 255, 0.05) 1.5px, transparent 1.5px);
            background-size: 35px 35px;
            padding: 40px; border: 4px solid var(--primary); border-radius: 8px;
            position: relative; box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
            transition: all 0.3s ease;
        }

        /* 20 ADVANCED BORDER STYLES */
        .g-1 { border-style: solid !important; }
        .g-2 { border-style: double !important; border-width: 8px !important; }
        .g-3 { border-radius: 50px !important; }
        .g-4 { box-shadow: inset 0 0 30px var(--primary) !important; }
        .g-5 { border-image: linear-gradient(to bottom right, var(--primary), var(--secondary)) 1 !important; }
        .g-6 { border-left-width: 15px !important; border-right-width: 15px !important; }
        .g-7 { border: 2px dashed var(--primary) !important; }
        .g-8 { filter: contrast(1.2) brightness(1.1); }
        .g-9 { border-radius: 100px 0 100px 0 !important; }
        .g-10 { outline: 10px double var(--secondary); outline-offset: -15px; }

        /* HEADER */
        .header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--secondary); padding-bottom: 15px; margin-bottom: 25px; }
        .main-title { font-family: 'Orbitron'; font-size: 42px; color: #fff; text-transform: uppercase; margin: 0; text-shadow: 0 0 15px var(--primary); font-weight: 900; }
        .sys-label { color: var(--primary); font-family: 'Orbitron'; font-size: 13px; letter-spacing: 3px; font-weight: bold; }

        /* TEAM GRID */
        .team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(480px, 1fr)); gap: 20px; }
        .team-card {
            display: flex; background: var(--glass); border: 1.5px solid rgba(0, 247, 255, 0.3);
            border-radius: 0 15px 15px 0; min-height: 90px; transition: 0.3s;
        }

        /* 20 CARD STYLES */
        .c-style-1 { border-left: 4px solid var(--primary); }
        .c-style-2 { clip-path: polygon(0 0, 100% 0, 96% 100%, 0% 100%); }
        .c-style-3 { box-shadow: inset 0 0 15px var(--primary); }
        .c-style-4 { background: linear-gradient(90deg, #001a33, #000); }

        .rank-badge {
            background: linear-gradient(135deg, var(--secondary), #000); width: 75px;
            display: flex; flex-direction: column; justify-content: center; align-items: center;
            border-right: 2px solid var(--primary); color: #fff; font-family: 'Orbitron';
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 20% 50%);
        }
        .rank-num { font-size: 32px; font-weight: 900; }

        .team-players { flex-grow: 1; padding: 10px 15px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 15px; align-items: center; }
        .player-row { display: flex; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 4px; overflow: hidden; }

        /* 🛡️ ONE LINE NAME LIMIT (Ellipsis) */
        .p-name {
            color: #fff; font-size: 19px; font-weight: 700; text-transform: uppercase;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 
            max-width: 160px; display: inline-block;
            text-shadow: 0 0 5px rgba(255,255,255,0.2);
        }

        .role-icon { width: 22px; text-align: center; margin-right: 10px; font-size: 15px; }
        .role-Leader { color: #ffd700; filter: drop-shadow(0 0 5px #ffd700); }
        .role-Officer { color: var(--primary); }
        .role-Sniper { color: #ff3333; }

        .sys-footer { margin-top: 30px; display: flex; justify-content: space-between; font-family: 'Orbitron'; font-size: 12px; color: var(--primary); opacity: 0.8; border-top: 2px solid var(--secondary); padding-top: 10px; }

        /* BUTTONS */
        .btn-hd {
            margin-top: 25px; padding: 15px 45px; background: linear-gradient(90deg, var(--secondary), var(--primary));
            color: #000; border: none; font-family: 'Orbitron'; font-size: 18px; font-weight: 900; cursor: pointer; border-radius: 50px;
            box-shadow: 0 0 20px rgba(0, 247, 255, 0.4); text-transform: uppercase; transition: 0.3s;
        }
        .btn-hd:hover { transform: scale(1.05); box-shadow: 0 0 40px var(--primary); }

        @media (max-width: 768px) { .team-grid { grid-template-columns: 1fr; } .main-title { font-size: 28px; } .p-name { max-width: 120px; } }
    </style>
</head>
<body>

    <!-- 🛠️ MASTER DYNAMIC CONTROLS -->
    <div class="master-panel">
        <div class="ctrl-grp">
            <label>Primary Theme</label>
            <input type="color" id="colorMain" value="#00f7ff" oninput="applyStyles()">
        </div>
        <div class="ctrl-grp">
            <label>Accent Glow</label>
            <input type="color" id="colorSec" value="#0055ff" oninput="applyStyles()">
        </div>
        <div class="ctrl-grp">
            <label>Border Style (20)</label>
            <select id="gStyle" onchange="applyStyles()">
                <option value="g-1">01. Classic Cyber</option>
                <option value="g-2">02. Royal Double</option>
                <option value="g-3">03. Smooth Edge</option>
                <option value="g-4">04. Deep Glow</option>
                <option value="g-5">05. Cyber Gradient</option>
                <option value="g-6">06. Heavy Armour</option>
                <option value="g-7">07. Tech Dashed</option>
                <option value="g-8">08. Max Contrast</option>
                <option value="g-9">09. Blade Cut</option>
                <option value="g-10">10. Internal Frame</option>
            </select>
        </div>
        <div class="ctrl-grp">
            <label>Squad Card Style</label>
            <select id="cStyle" onchange="applyStyles()">
                <option value="c-style-1">Style 1: Bordered</option>
                <option value="c-style-2">Style 2: Slanted</option>
                <option value="c-style-3">Style 3: Glowing</option>
                <option value="c-style-4">Style 4: Dark Grad</option>
            </select>
        </div>
        <div class="ctrl-grp">
            <label>Event Date/Time</label>
            <input type="text" id="dtInput" placeholder="E.g. 12 JAN | 09:00 PM" onkeyup="applyStyles()">
        </div>
        <button onclick="downloadPoster()" class="btn-hd" style="margin:0; padding:10px 25px; font-size:12px;">GENERATE HD</button>
    </div>

    <div class="container">
        
        <div id="capture-area" class="g-1">
            <div class="header">
                <div class="title-box" style="text-align:left;">
                    <div class="sys-label">Ƭᴇᴀᴍꜱ┊1280모 SYSTEM ACTIVE</div>
                    <div class="main-title"><?php echo htmlspecialchars($match['title']); ?></div>
                </div>
                <div class="logo-box">
                    <img src="assets/logo.png" style="height:80px;" onerror="this.style.display='none'">
                </div>
            </div>

            <div class="team-grid">
                <?php foreach ($teams as $t_num => $members): ?>
                    <div class="team-card c-style-1">
                        <div class="rank-badge">
                            <span class="rank-num"><?php echo str_pad($t_num, 2, '0', STR_PAD_LEFT); ?></span>
                        </div>
                        <div class="team-players">
                            <?php foreach($members as $p): 
                                $is_empty = (strtoupper($p['player_name']) == 'EMPTY' || empty($p['player_name']));
                                $display_name = $is_empty ? '-- EMPTY --' : $p['player_name'];
                                $role = $p['player_role'];
                                $icon = 'fa-solid fa-circle-dot';
                                if($role == 'Leader') $icon = 'fa-solid fa-crown';
                                if($role == 'Officer') $icon = 'fa-solid fa-shield-halved';
                                if($role == 'Sniper') $icon = 'fa-solid fa-crosshairs';
                                if($role == 'Rusher') $icon = 'fa-solid fa-bolt';
                            ?>
                                <div class="player-row">
                                    <span class="role-icon role-<?php echo $role; ?>"><i class="<?php echo $icon; ?>"></i></span>
                                    <span class="p-name"><?php echo htmlspecialchars($display_name); ?></span>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>

            <div class="sys-footer">
                <span>AUTHENTICATED BY TAMIM 1280</span>
                <span id="dtDisplay">STATUS: READY TO DEPLOY</span>
                <span>SECURED DATA</span>
            </div>
        </div>

        <p id="loader" style="display:none; color:var(--primary); font-family:'Orbitron'; margin-top:20px;">🚀 ENHANCING RESOLUTION & SAVING...</p>
        
        <br><br>
        <a href="index.php" style="color:#222; text-decoration:none; font-family:'Orbitron'; font-size:11px; letter-spacing:2px;">RESTART SYSTEM</a>
    </div>

    <script>
        function applyStyles() {
            const p = document.getElementById('colorMain').value;
            const s = document.getElementById('colorSec').value;
            const g = document.getElementById('gStyle').value;
            const c = document.getElementById('cStyle').value;
            const dt = document.getElementById('dtInput').value;

            document.documentElement.style.setProperty('--primary', p);
            document.documentElement.style.setProperty('--secondary', s);
            document.getElementById('capture-area').className = g;
            document.querySelectorAll('.team-card').forEach(card => card.className = 'team-card ' + c);
            document.getElementById('dtDisplay').innerText = dt ? "EVENT TIME: " + dt : "STATUS: READY TO DEPLOY";
        }

        function downloadPoster() {
            const area = document.getElementById('capture-area');
            const loader = document.getElementById('loader');
            loader.style.display = 'block';

            // ৩ গুণ শার্পনেস এবং হাই-কোয়ালিটি গ্লো ক্যাপচার
            const scale = 3; 
            domtoimage.toPng(area, {
                width: area.clientWidth * scale,
                height: area.clientHeight * scale,
                style: {
                    transform: `scale(${scale})`,
                    transformOrigin: 'top left',
                    width: area.clientWidth + "px",
                    height: area.clientHeight + "px"
                }
            })
            .then(function (dataUrl) {
                const link = document.createElement('a');
                link.download = 'TAMIM_1280_ULTIMATE_LIST.png';
                link.href = dataUrl;
                link.click();
                loader.style.display = 'none';
            })
            .catch(function (error) {
                console.error(error);
                loader.innerText = "CAPTURE ERROR!";
            });
        }
        window.onload = applyStyles;
    </script>
</body>
</html>