<?php
include "$_SERVER[DOCUMENT_ROOT]/root.class.php";
$html = new html();
$html->add_styles_page();
$db = new db_safeguard();

$teams = $db->query("teams", "SELECT * FROM teams WHERE status='ACTIVE'");
// echo "SELECT * FROM teams WHERE status='ACTIVE'";

$teams_list = "";
$team_members = "";

while ($t = $teams->fetch_assoc()) {
    $teams_list .= "<option value='{$t['record_id']}'>{$t['name']}</option>";

    $team_members .= "<input type='text' value='{$t['name']}'>";

}


?>

<!DOCTYPE html>
<html>

<head>
    <title>Team Dashboard</title>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <style>
        .dashboard-section {
            background: #ffffff;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 25px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
        }

        .dashboard-section h2 {
            margin-bottom: 15px;
            color: #1e3a8a;
        }

        .team-member {
            padding: 10px 14px;
            margin-bottom: 8px;
            border-left: 4px solid #f97316;
            background: #f8fafc;
            border-radius: 6px;
        }

        .loader {
            color: #1e3a8a;
            font-weight: bold;
        }

        .team_input {
            border: 1px solid #cbd5e1;
            border-radius: 8px;
            padding: 9px 11px;
            font-size: 0.9rem;
            background: #ffffff;
            color: #0f172a;
            font-size: 1.5em;
            width: 80%;
            margin: 0.5vw auto;
        }

        .team_input:focus {
            outline: none;
            border-color: #2563eb;
            box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
        }

        .team_label {
            font-size: 1.5em;
            width: 30%;
            color: black;
            text-align: center;
            margin-top: 1vw;
        }

        body {
            font-family: "Segoe UI", Arial, sans-serif;
            background: #f4f6f9;
            padding: 2rem;
        }

        .page-title {
            color: #1e3a8a;
        }

        .team-selector {
            margin-bottom: 1.5rem;
        }

        select {
            padding: 0.6rem;
            font-size: 1rem;
        }

        .section {
            background: white;
            padding: 1.5rem;
            border-radius: 10px;
            margin-bottom: 1.5rem;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
        }

        .mini_div {
            display: flex;
            justify-content: space-between;
        }

        .mini_section {
            background: white;
            padding: 1.5rem;
            border-radius: 10px;
            margin-bottom: 1.5rem;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
            width: 45%;
        }

        h2 {
            margin-top: 0;
        }

        .big-number {
            font-size: 4rem;
            font-weight: bold;
            color: #2563eb;
            text-align: center;
        }

        .big-text {
            font-size: 2rem;
            font-weight: bold;
            color: #2563eb;
            text-align: center;
        }

        /* PRELOADER */
        .preloader {
            position: fixed;
            inset: 0;
            background: rgba(255, 255, 255, 0.9);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 999;
        }

        .hidden {
            display: none;
        }

        .spinner {
            width: 45px;
            height: 45px;
            border: 4px solid #e5e7eb;
            border-top: 4px solid #2563eb;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        canvas {
            max-width: 100%;
        }

        button {
            padding: 0.7rem 1.2rem;
            font-size: 1rem;
            border: none;
            border-radius: 6px;
            background: #2563eb;
            color: white;
            cursor: pointer;
        }

        button:disabled {
            background: #94a3b8;
            cursor: not-allowed;
        }
    </style>
</head>

<body>

    <h1 class="page-title">Team Management Dashboard</h1>

    <div class="team-selector">
        <label class="team_label" style="">Select Team</label>
        <select id="team_id" class="team_input">
            <option value="">-- Select Team --</option>
            <?= $teams_list ?>
        </select>
    </div>

    <!-- PRELOADER -->
    <div id="preloader" class="preloader hidden">
        <div class="spinner"></div>
        <p>Loading team data...</p>
    </div>

    <!-- SECTION 1 -->
    <div class="mini_div">
        <div class="mini_section">
            <div id="team-members-section" class="dashboard-section">
                <h2>👷 Team Members</h2>

                <!-- Loader -->
                <div id="team-members-loader" class="loader">Loading team members...</div>

                <!-- Content -->
                <div id="team-members-list"></div>
            </div>
        </div>
        <div class="mini_section">
            <h2>Completed Jobcards</h2>
            <div class="big-number" id="jobcards_total">0</div>
        </div>
    </div>


    <!-- SECTION 2 -->
    <div class="section">
        <h2>Meters </h2>
        <canvas id="metersChart"></canvas>
    </div>

    <!-- SECTION 3 -->
    <div class="section">
        <h2>Average Jobcard Duration (Hours)</h2>
        <canvas id="durationChart"></canvas>
    </div>

    <!-- SECTION 4 -->
    <div class="section">
        <h2>Download Report</h2>
        <button id="download_pdf" disabled>Download Team PDF</button>
    </div>

    <script>
        let metersChart = null;
        let durationChart = null;

        const teamSelect = document.getElementById("team_id");
        const preloader = document.getElementById("preloader");
        const downloadBtn = document.getElementById("download_pdf");

        teamSelect.addEventListener("change", function () {
            const teamId = this.value;
            if (!teamId) return;

            downloadBtn.disabled = false;
            preloader.classList.remove("hidden");

            loadJobcards(teamId);
            loadMeters(teamId);
            loadDuration(teamId);
            loadTeamMembers(teamId);
        });

        downloadBtn.addEventListener("click", function () {
            window.open("pdf/team_report_pdf.php?team_id=" + teamSelect.value, "_blank");
        });

        function loadJobcards(teamId) {
            fetch("ajax/team_jobcards.ajax.php?team_id=" + teamId)
                .then(res => res.text())
                .then(total => {
                    document.getElementById("jobcards_total").innerText = total;
                    preloader.classList.add("hidden");
                });
        }

        function loadMeters(teamId) {
            fetch("ajax/team_meters.ajax.php?team_id=" + teamId)
                .then(res => res.text())
                .then(csv => {
                    const values = csv.split(",");

                    if (metersChart) metersChart.destroy();

                    metersChart = new Chart(
                        document.getElementById("metersChart"),
                        {
                            type: "bar",
                            data: {
                                labels: ["REIMING", "DRILLING", "CASING", "BLASTING"],
                                datasets: [{
                                    label: "Meters",
                                    data: values,
                                    backgroundColor: [
                                        "#1e3a8a",
                                        "#2563eb",
                                        "#f97316",
                                        "#0ea5e9"
                                    ]
                                }]
                            },
                            options: {
                                scales: {
                                    y: {
                                        beginAtZero: true,
                                        title: {
                                            display: true,
                                            text: "Meters"
                                        }
                                    }
                                }
                            }
                        }
                    );
                });
        }

        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 = [];
                    const 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: 0.3,
                                    fill: false
                                }]
                            },
                            options: {
                                scales: {
                                    y: {
                                        beginAtZero: true,
                                        title: {
                                            display: true,
                                            text: "Hours"
                                        }
                                    }
                                }
                            }
                        }
                    );
                });
        }

        function loadTeamHours(teamId) {
            fetch("/app/team_dashboard/ajax/team_duration.ajax.php?team_id=" + teamId)
                .then(res => res.text())
                .then(data => {
                    console.log(data);
                })
                .catch(err => console.error(err));
        }

        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;
                })
                .catch(err => {
                    loader.innerHTML = "Failed to load team members";
                    console.error(err);
                });
        }


    </script>

</body>

</html>