<?php
include $_SERVER['DOCUMENT_ROOT'] . "/root.class.php";

$html = new html();
$html->add_styles_page();
$db = new db_safeguard();

$teams = $db->query("teams", "SELECT record_id,name FROM teams WHERE status='ACTIVE'");
$teams_list = "";

while ($t = $teams->fetch_assoc()) {
    $teams_list .= "<option value='{$t['record_id']}'>{$t['name']}</option>";
}
?>
<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
    <style>
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        :root {
            --bg:        #f0f4fa;
            --surface:   #ffffff;
            --surface2:  #e8eef8;
            --border:    #d0daea;
            --blue:      #1a56c4;
            --blue-mid:  #2e6dd6;
            --blue-light:#e8f0fd;
            --orange:    #e8720a;
            --orange-lt: #fff3e8;
            --text:      #0f1e3d;
            --muted:     #6b7fa8;
            --white:     #ffffff;
            --radius:    8px;
        }

        html, body {
            height: 100%;
            overflow: hidden;
            background: var(--bg);
            color: var(--text);
            font-family: 'DM Sans', sans-serif;
            font-size: 13px;
        }

        /* ── LAYOUT ─────────────────────────────────────── */
        .shell {
            display: grid;
            grid-template-rows: 52px 1fr;
            height: 100vh;
        }

        /* ── TOP BAR ─────────────────────────────────────── */
        .topbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 24px;
            background: var(--blue);
            border-bottom: none;
            gap: 16px;
        }

        .topbar-left {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .logo-mark {
            width: 28px;
            height: 28px;
            background: var(--orange);
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            flex-shrink: 0;
        }

        .page-title {
            font-family: 'Bebas Neue', sans-serif;
            font-size: 20px;
            letter-spacing: 2px;
            color: var(--white);
        }

        .page-title span { color: var(--orange); }

        .divider-v {
            width: 1px;
            height: 24px;
            background: rgba(255,255,255,0.25);
        }

        /* ── SELECT ─────────────────────────────────────── */
        .team-select-wrap {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .team-select-wrap label {
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: rgba(255,255,255,0.65);
        }

        select#team_id {
            background: rgba(255,255,255,0.12);
            border: 1px solid rgba(255,255,255,0.25);
            color: var(--white);
            font-family: 'DM Sans', sans-serif;
            font-size: 13px;
            padding: 5px 32px 5px 10px;
            border-radius: var(--radius);
            appearance: none;
            cursor: pointer;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 10px center;
            min-width: 200px;
            transition: border-color .2s, background .2s;
        }

        select#team_id option { background: var(--blue); color: var(--white); }

        select#team_id:focus {
            outline: none;
            border-color: var(--orange);
            background-color: rgba(255,255,255,0.2);
        }

        /* ── PDF BUTTON ─────────────────────────────────── */
        .btn-pdf {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 14px;
            background: var(--orange);
            border: 1px solid var(--orange);
            color: var(--white);
            border-radius: var(--radius);
            font-family: 'DM Sans', sans-serif;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: .5px;
            cursor: pointer;
            text-decoration: none;
            transition: background .2s, opacity .2s;
        }

        .btn-pdf:hover { opacity: .85; }
        .btn-pdf svg { flex-shrink: 0; }

        /* ── MAIN GRID ───────────────────────────────────── */
        .main {
            display: grid;
            grid-template-columns: 240px 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            gap: 12px;
            padding: 12px;
            overflow: hidden;
            height: 100%;
        }

        /* Members: spans both rows on col 1 */
        .panel-members { grid-row: 1 / 3; }

        /* ── PANEL ───────────────────────────────────────── */
        .panel {
            background: var(--white);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            position: relative;
            box-shadow: 0 1px 4px rgba(26,86,196,0.07);
        }

        .panel::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--blue), var(--orange));
            border-radius: var(--radius) var(--radius) 0 0;
        }

        .panel-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 14px;
            border-bottom: 1px solid var(--border);
            flex-shrink: 0;
            background: var(--white);
        }

        .panel-label {
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: var(--blue);
        }

        .panel-body {
            flex: 1;
            overflow: hidden;
            padding: 12px 14px;
            display: flex;
            flex-direction: column;
        }

        /* ── STAT PANEL ──────────────────────────────────── */
        .panel-stat .panel-body {
            justify-content: center;
            align-items: center;
        }

        .stat-number {
            font-family: 'Bebas Neue', sans-serif;
            font-size: 72px;
            line-height: 1;
            color: var(--blue);
            letter-spacing: 2px;
        }

        .stat-sub {
            font-size: 11px;
            color: var(--muted);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-top: 4px;
        }

        /* ── MEMBERS LIST ────────────────────────────────── */
        .members-scroll {
            flex: 1;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .members-scroll::-webkit-scrollbar { width: 4px; }
        .members-scroll::-webkit-scrollbar-track { background: transparent; }
        .members-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

        .member-row {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 10px;
            background: var(--blue-light);
            border: 1px solid var(--border);
            border-radius: 6px;
            transition: border-color .2s, background .2s;
        }

        .member-row:hover { border-color: var(--blue); background: #dce8fb; }

        .member-avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--blue), var(--orange));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            font-weight: 700;
            color: var(--white);
            flex-shrink: 0;
        }

        .member-name {
            font-size: 13px;
            font-weight: 500;
            color: var(--text);
        }

        /* ── LOADER / EMPTY STATE ────────────────────────── */
        .state-idle {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            gap: 8px;
            color: var(--muted);
        }

        .state-idle svg { opacity: .3; }
        .state-idle p { font-size: 12px; letter-spacing: .5px; }

        .pulse {
            display: inline-block;
            width: 8px; height: 8px;
            background: var(--orange);
            border-radius: 50%;
            animation: pulse 1.2s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: .4; transform: scale(.6); }
        }

        /* ── CHARTS ──────────────────────────────────────── */
        .chart-wrap {
            flex: 1;
            position: relative;
            min-height: 0;
        }

        canvas { position: absolute; inset: 0; }

        /* ── BADGE ───────────────────────────────────────── */
        .badge {
            font-family: 'DM Mono', monospace;
            font-size: 10px;
            padding: 2px 8px;
            border-radius: 20px;
            background: var(--blue-light);
            border: 1px solid var(--border);
            color: var(--blue);
            font-weight: 600;
        }

        /* ── EMPTY: no team selected ─────────────────────── */
        #no-team-overlay {
            position: fixed;
            inset: 52px 0 0 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(240,244,250,0.80);
            backdrop-filter: blur(4px);
            z-index: 10;
            pointer-events: none;
            transition: opacity .3s;
        }

        #no-team-overlay.hidden { opacity: 0; }

        .overlay-inner {
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }

        .overlay-inner svg { opacity: .25; color: var(--blue); }

        .overlay-inner h2 {
            font-family: 'Bebas Neue', sans-serif;
            font-size: 28px;
            letter-spacing: 3px;
            color: var(--blue);
        }

        .overlay-inner p { font-size: 12px; color: var(--muted); }
    </style>
</head>
<body>

<div class="shell">

    <!-- TOP BAR -->
    <header class="topbar">
        <div class="topbar-left">
            <div class="logo-mark"></div>
            <span class="page-title">TEAM <span>DASHBOARD</span></span>
            <div class="divider-v"></div>
            <div class="team-select-wrap">
                <label for="team_id">Team</label>
                <select id="team_id">
                    <option value="">— Select Team —</option>
                    <?= $teams_list ?>
                </select>
            </div>
        </div>
        <a id="pdf-link" class="btn-pdf" href="#" target="_blank">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/>
            </svg>
            Export PDF
        </a>
    </header>

    <!-- MAIN GRID -->
    <main class="main">

        <!-- COL 1: Members (spans 2 rows) -->
        <div class="panel panel-members">
            <div class="panel-head">
                <span class="panel-label">Team Members</span>
                <span class="badge" id="member-count">—</span>
            </div>
            <div class="panel-body">
                <div class="members-scroll" id="team-members-list">
                    <div class="state-idle">
                        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
                        <p>Select a team</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- COL 2 ROW 1: Jobcards -->
        <div class="panel panel-stat">
            <div class="panel-head">
                <span class="panel-label">Completed Jobcards</span>
            </div>
            <div class="panel-body">
                <div id="jobcards-wrap" class="state-idle">
                    <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
                    <p>No data yet</p>
                </div>
            </div>
        </div>

        <!-- COL 3 ROW 1: Duration Chart -->
        <div class="panel">
            <div class="panel-head">
                <span class="panel-label">Jobcard Duration</span>
                <span class="badge">Hours</span>
            </div>
            <div class="panel-body">
                <div id="duration-placeholder" class="state-idle">
                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
                    <p>Select a team</p>
                </div>
                <div class="chart-wrap" id="duration-chart-wrap" style="display:none">
                    <canvas id="durationChart"></canvas>
                </div>
            </div>
        </div>

        <!-- COL 2+3 ROW 2: Meters Chart -->
        <div class="panel" style="grid-column: 2 / 4;">
            <div class="panel-head">
                <span class="panel-label">Meters Breakdown</span>
                <span class="badge" id="meters-total">—</span>
            </div>
            <div class="panel-body">
                <div id="meters-placeholder" class="state-idle">
                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M3 15h18M9 3v18M15 3v18"/></svg>
                    <p>Select a team</p>
                </div>
                <div class="chart-wrap" id="meters-chart-wrap" style="display:none">
                    <canvas id="metersChart"></canvas>
                </div>
            </div>
        </div>

    </main>
</div>

<!-- Overlay when no team selected -->
<div id="no-team-overlay">
    <div class="overlay-inner">
        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
        <h2>Select a Team</h2>
        <p>Choose a team from the dropdown above to load its dashboard</p>
    </div>
</div>

<script>
    let metersChart = null;
    let durationChart = null;

    const CHART_DEFAULTS = {
        color: '#1a3a6e',
        gridColor: 'rgba(26,86,196,0.08)',
        font: { family: 'DM Sans', size: 11 }
    };

    document.getElementById("team_id").addEventListener("change", function () {
        const teamId = this.value;
        const overlay = document.getElementById("no-team-overlay");

        if (!teamId) {
            overlay.classList.remove("hidden");
            return;
        }

        overlay.classList.add("hidden");
        document.getElementById("pdf-link").href = `/app/team_dashboard/team_report.pdf.php?team_id=${teamId}`;

        loadJobcards(teamId);
        loadMeters(teamId);
        loadDuration(teamId);
        loadTeamMembers(teamId);
    });

    function loadJobcards(teamId) {
        fetch("/app/team_dashboard/ajax/team_jobcards.ajax.php?team_id=" + teamId)
            .then(r => r.text())
            .then(total => {
                document.getElementById("jobcards-wrap").innerHTML = `
                    <div class="stat-number">${total}</div>
                    <div class="stat-sub">Completed Jobcards</div>
                `;
                document.getElementById("jobcards-wrap").className = "";
                document.getElementById("jobcards-wrap").style.cssText = "display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%";
            });
    }

    function loadMeters(teamId) {
        fetch("/app/team_dashboard/ajax/team_meters.ajax.php?team_id=" + teamId)
            .then(r => r.text())
            .then(csv => {
                const values = csv.split(",").map(Number);
                const total = values.reduce((a, b) => a + b, 0);

                document.getElementById("meters-placeholder").style.display = "none";
                document.getElementById("meters-chart-wrap").style.display = "block";
                document.getElementById("meters-total").textContent = total.toLocaleString() + " m";

                if (metersChart) metersChart.destroy();

                metersChart = new Chart(document.getElementById("metersChart"), {
                    type: "bar",
                    data: {
                        labels: ["REIM", "DRILL", "CASING", "BLASTING"],
                        datasets: [{
                            label: "Meters",
                            data: values,
                            backgroundColor: [
                                "rgba(26,86,196,0.85)",
                                "rgba(232,114,10,0.85)",
                                "rgba(26,86,196,0.5)",
                                "rgba(232,114,10,0.5)"
                            ],
                            borderColor: [
                                "#1a56c4",
                                "#e8720a",
                                "#1a56c4",
                                "#e8720a"
                            ],
                            borderWidth: 2,
                            borderRadius: 5,
                            borderSkipped: "bottom"
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: { display: false },
                            tooltip: {
                                backgroundColor: "#ffffff",
                                borderColor: "#d0daea",
                                borderWidth: 1,
                                titleColor: "#0f1e3d",
                                bodyColor: "#6b7fa8",
                                padding: 10,
                                callbacks: {
                                    label: ctx => ` ${ctx.parsed.y.toLocaleString()} meters`
                                }
                            }
                        },
                        scales: {
                            x: {
                                grid: { display: false },
                                border: { color: "#d0daea" },
                                ticks: { color: CHART_DEFAULTS.color, font: CHART_DEFAULTS.font }
                            },
                            y: {
                                beginAtZero: true,
                                grid: { color: CHART_DEFAULTS.gridColor },
                                border: { color: "#d0daea", dash: [4,4] },
                                ticks: { color: CHART_DEFAULTS.color, font: CHART_DEFAULTS.font }
                            }
                        }
                    }
                });
            });
    }

    function loadDuration(teamId) {
        fetch("/app/team_dashboard/ajax/team_duration.ajax.php?team_id=" + teamId)
            .then(r => r.text())
            .then(data => {
                if (!data) return;

                document.getElementById("duration-placeholder").style.display = "none";
                document.getElementById("duration-chart-wrap").style.display = "block";

                const rows = data.split("|");
                const labels = [], values = [];
                rows.forEach(r => {
                    const p = r.split(",");
                    labels.push("#" + p[0]);
                    values.push(p[1]);
                });

                if (durationChart) durationChart.destroy();

                durationChart = new Chart(document.getElementById("durationChart"), {
                    type: "line",
                    data: {
                        labels,
                        datasets: [{
                            label: "Hours",
                            data: values,
                            borderColor: "#1a56c4",
                            backgroundColor: "rgba(26,86,196,0.07)",
                            borderWidth: 2,
                            pointBackgroundColor: "#1a56c4",
                            pointRadius: 3,
                            tension: 0.4,
                            fill: true
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: { display: false },
                            tooltip: {
                                backgroundColor: "#ffffff",
                                borderColor: "#d0daea",
                                borderWidth: 1,
                                titleColor: "#0f1e3d",
                                bodyColor: "#6b7fa8",
                                padding: 10,
                                callbacks: {
                                    label: ctx => ` ${ctx.parsed.y} hrs`
                                }
                            }
                        },
                        scales: {
                            x: {
                                grid: { display: false },
                                border: { color: "#d0daea" },
                                ticks: { color: CHART_DEFAULTS.color, font: CHART_DEFAULTS.font }
                            },
                            y: {
                                beginAtZero: true,
                                grid: { color: CHART_DEFAULTS.gridColor },
                                border: { color: "#d0daea", dash: [4,4] },
                                ticks: { color: CHART_DEFAULTS.color, font: CHART_DEFAULTS.font }
                            }
                        }
                    }
                });
            });
    }

    function loadTeamMembers(teamId) {
        const list = document.getElementById("team-members-list");
        list.innerHTML = `<div class="state-idle"><span class="pulse"></span><p>Loading…</p></div>`;

        fetch("/app/team_dashboard/ajax/team_members.ajax.php?team_id=" + teamId)
            .then(r => r.text())
            .then(html => {
                // Parse the raw HTML from the server (div.team-member elements)
                const parser = new DOMParser();
                const doc = parser.parseFromString(html, "text/html");
                const rawMembers = doc.querySelectorAll(".team-member");

                if (rawMembers.length === 0) {
                    list.innerHTML = `<div class="state-idle"><p>No members found</p></div>`;
                    document.getElementById("member-count").textContent = "0";
                    return;
                }

                document.getElementById("member-count").textContent = rawMembers.length;

                let out = "";
                rawMembers.forEach(el => {
                    const name = el.textContent.replace("👤", "").trim();
                    const initials = name.split(" ").map(w => w[0]).join("").slice(0, 2).toUpperCase();
                    out += `
                        <div class="member-row">
                            <div class="member-avatar">${initials}</div>
                            <span class="member-name">${name}</span>
                        </div>`;
                });

                list.innerHTML = out;
            });
    }
</script>

</body>
</html>