<?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>
    <title>Team Dashboard</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <style>
        body {
            font-family: Segoe UI;
            background: #f4f6f9;
            padding: 2rem
        }

        .section {
            background: #fff;
            padding: 1.5rem;
            border-radius: 10px;
            margin-bottom: 1.5rem;
            box-shadow: 0 6px 18px rgba(0, 0, 0, .08)
        }

        .mini_div {
            display: flex;
            gap: 20px
        }

        .mini_section {
            width: 50%
        }

        .big-number {
            text-align: center;
            font-size: 4rem;
            color: #2563eb;
            font-weight: bold
        }

        canvas {
            max-width: 100%
        }

        .loader {
            font-weight: bold;
            color: #1e3a8a
        }
    </style>
</head>

<body>

    <h1>Team Management Dashboard</h1>

    <select id="team_id">
        <option value="">-- Select Team --</option>
        <?= $teams_list ?>
    </select>

    <!-- SECTION 1 -->
    <div class="mini_div">

        <div class="section mini_section">
            <h2>Team Members</h2>
            <div id="team-members-loader" class="loader">Loading...</div>
            <div id="team-members-list"></div>
        </div>

        <div class="section mini_section">
            <h2>Completed Jobcards</h2>
            <div id="jobcards_total" class="big-number">0</div>
        </div>

    </div>

    <!-- SECTION 2 -->
    <div class="section">
        <h2>Meters Breakdown</h2>
        <canvas id="metersChart"></canvas>
    </div>

    <!-- SECTION 3 -->
    <div class="section">
        <h2>Jobcard Duration (Hours)</h2>
        <canvas id="durationChart"></canvas>
    </div>

    <script>
        let metersChart = null;
        let durationChart = null;

        document.getElementById("team_id").addEventListener("change", function () {
            const teamId = this.value;
            if (!teamId) return;

            loadJobcards(teamId);
            loadMeters(teamId);
            loadDuration(teamId);
            loadTeamMembers(teamId);
        });

        function loadJobcards(teamId) {
            fetch("ajax/team_jobcards.ajax.php?team_id=" + teamId)
                .then(res => res.text())
                .then(total => {
                    document.getElementById("jobcards_total").innerText = total;
                });
        }

        function loadMeters(teamId) {
            fetch("ajax/team_meters.ajax.php?team_id=" + teamId)
                .then(res => res.text())
                .then(csv => {
                    const values = csv.split(",").map(Number);
                    const total = values.reduce((a, b) => a + b, 0);

                    if (metersChart) metersChart.destroy();

                    metersChart = new Chart(document.getElementById("metersChart"), {
                        type: "bar",
                        data: {
                            labels: ["REIM", "DRILL", "CASING", "BLASTING"],
                            datasets: [{
                                data: values,
                                backgroundColor: ["#1e3a8a", "#2563eb", "#f97316", "#0ea5e9"]
                            }]
                        },
                        options: {
                            plugins: {
                                title: {
                                    display: true,
                                    text: "Total Meters: " + total
                                }
                            },
                            scales: { y: { beginAtZero: true } }
                        }
                    });
                });
        }

        function loadDuration(teamId) {
            fetch("/app/team_dashboard/ajax/team_duration.ajax.php?team_id=" + teamId)
                .then(res => res.text())
                .then(data => {
                    if (!data) return;

                    const rows = data.split("|");
                    const labels = [], values = [];

                    rows.forEach(r => {
                        const p = r.split(",");
                        labels.push("Jobcard " + p[0]);
                        values.push(p[1]);
                    });

                    if (durationChart) durationChart.destroy();

                    durationChart = new Chart(document.getElementById("durationChart"), {
                        type: "line",
                        data: {
                            labels: labels,
                            datasets: [{
                                label: "Hours",
                                data: values,
                                borderColor: "#2563eb",
                                borderWidth: 3,
                                tension: .3
                            }]
                        },
                        options: { scales: { y: { beginAtZero: true } } }
                    });
                });
        }

        function loadTeamMembers(teamId) {
            const loader = document.getElementById("team-members-loader");
            const list = document.getElementById("team-members-list");

            loader.style.display = "block";
            list.innerHTML = "";

            fetch("/app/team_dashboard/ajax/team_members.ajax.php?team_id=" + teamId)
                .then(res => res.text())
                .then(html => {
                    loader.style.display = "none";
                    list.innerHTML = html;
                });
        }
    </script>

</body>

</html>