<?php
// dashboards/combined.php — included by dashboard.php (session already started)
// Shown to username = 'test'. Contains both driver and install panels in tabs.
include $_SERVER['DOCUMENT_ROOT'] . "/app/dashboard/classes/dashboard.class.php";

$username = $_SESSION['username'] ?? 'Test';
$user_id  = (int) ($_SESSION['user_id']  ?? 0);
$team_id  = (int) ($_SESSION['team_id']  ?? 0);

$db   = new db_safeguard();
$dash = new DashboardData($db);

// ── DRIVER DATA ───────────────────────────────────────────
$time_spent  = $dash->timeSpentByActivity($user_id);
$active_jobs = $dash->teamJobcards($team_id, 'active');

// ── INSTALL DATA ──────────────────────────────────────────
$meters   = $dash->installMetersThisMonth($team_id);
$installs = $dash->activeInstallations($team_id);
$repairs  = $dash->activeRepairs($team_id);
$stats    = $dash->installSummaryStats($team_id);

// ── EXTRA PANELS DATA ─────────────────────────────────────
$today_jobs    = $dash->todayJobcardStatuses($team_id);
$diesel        = $dash->dieselThisMonth($team_id);
$compressor    = $dash->compressorHoursThisMonth($team_id);
$water_data    = $dash->recentWaterData($team_id);
$upcoming      = $dash->upcomingJobcards($team_id);
$team_stock    = $dash->teamStock($team_id);

// ── JOBS TAB DATA ─────────────────────────────────────────
$team_jc_counts   = $dash->jobcardCountsPerTeam();
$overdue_all      = $dash->overdueJobcards(5);
$overdue_normal   = array_values(array_filter($overdue_all, fn($r) => $r['job_type'] === 'Normal'));
$overdue_install  = array_values(array_filter($overdue_all, fn($r) => $r['job_type'] === 'Install'));
$overdue_repair   = array_values(array_filter($overdue_all, fn($r) => $r['job_type'] === 'Repair'));

// ── ALL INSTALLATIONS TABLE ───────────────────────────────
$all_installs = $dash->allInstallations($team_id);

function c_esc($s) { return htmlspecialchars($s ?? '', ENT_QUOTES, 'UTF-8'); }
function c_pill($s) {
    $s = trim($s ?? '');
    if (!$s) return '<span class="pill pill-open">Open</span>';
    return '<span class="pill pill-open">' . htmlspecialchars($s, ENT_QUOTES) . '</span>';
}
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard</title>
    <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;
            --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%; background:var(--bg); color:var(--text);
            font-family:'DM Sans', sans-serif; }
        .shell { display:grid; grid-template-rows:52px 40px 1fr; height:100vh; }

        /* ── TOPBAR ──────────────────────────────────────── */
        .topbar { display:flex; align-items:center; justify-content:space-between;
            padding:0 24px; background:var(--blue); gap:16px; }
        .topbar-left { display:flex; align-items:center; gap:14px; }
        .logo-mark { width:28px; height:28px; background:var(--orange); flex-shrink:0;
            clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%); }
        .page-title { font-family:'Bebas Neue'; font-size:20px; letter-spacing:2px; color:#fff; }
        .page-title span { color:var(--orange); }
        .divider-v { width:1px; height:24px; background:rgba(255,255,255,.25); }
        .role-badge { padding:3px 10px; border-radius:20px; background:var(--orange);
            font-size:11px; font-weight:700; letter-spacing:1px; color:#fff; text-transform:uppercase; }
        .user-name { font-size:13px; color:rgba(255,255,255,.85); font-weight:500; }
        .btn-refresh { display:flex; align-items:center; gap:6px; padding:6px 14px;
            background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
            color:#fff; border-radius:var(--radius); font-family:'DM Sans'; font-size:12px;
            font-weight:600; cursor:pointer; text-decoration:none; transition:background .2s; }
        .btn-refresh:hover { background:rgba(255,255,255,.22); }

        /* ── VIEW SWITCHER ───────────────────────────────── */
        .switcher { display:flex; align-items:center; gap:0;
            padding:0 16px; background:var(--white);
            border-bottom:1px solid var(--border); }
        .switcher-btn { display:flex; align-items:center; gap:7px;
            padding:0 18px; height:40px;
            font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px;
            color:var(--muted); border:none; background:none; cursor:pointer;
            border-bottom:2px solid transparent; margin-bottom:-1px;
            transition:color .2s, border-color .2s; }
        .switcher-btn svg { flex-shrink:0; opacity:.5; transition:opacity .2s; }
        .switcher-btn:hover { color:var(--blue); }
        .switcher-btn:hover svg { opacity:.8; }
        .switcher-btn.active { color:var(--blue); border-bottom-color:var(--blue); }
        .switcher-btn.active svg { opacity:1; }
        .sw-count { display:inline-flex; align-items:center; justify-content:center;
            min-width:18px; height:18px; padding:0 5px; border-radius:20px;
            background:var(--blue-light); color:var(--blue); font-size:10px; font-weight:700; }
        .switcher-btn.active .sw-count { background:var(--blue); color:#fff; }

        /* ── VIEW PANELS ─────────────────────────────────── */
        .views { flex:1; overflow:hidden; position:relative; height:100%; }
        .view  { display:none; height:100%; }
        .view.active { display:block; }

        /* ── GRID: DRIVER ────────────────────────────────── */
        .driver-grid { display:grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            gap:12px; padding:12px; height:100%; }

        /* ── GRID: INSTALL ───────────────────────────────── */
        .install-grid { display:grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            gap:12px; padding:12px; height:100%; }

        .span2 { grid-column: span 2; }

        /* ── 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,.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; }
        .panel-label { font-size:10px; font-weight:700; text-transform:uppercase;
            letter-spacing:1.5px; color:var(--blue); }
        .badge { font-family:'DM Mono'; font-size:10px; padding:2px 8px; border-radius:20px;
            background:var(--blue-light); border:1px solid var(--border);
            color:var(--blue); font-weight:600; }
        .badge-orange { background:var(--orange-lt); border-color:#fed7aa; color:var(--orange); }
        .panel-body { flex:1; overflow:hidden; padding:12px 14px; display:flex; flex-direction:column; }
        .panel-body-flush { flex:1; overflow:hidden; display:flex; flex-direction:column; }

        /* ── CHART ───────────────────────────────────────── */
        .chart-wrap { flex:1; position:relative; min-height:0; }
        canvas { position:absolute; inset:0; }

        /* ── TIME SPEND CARDS (driver) ───────────────────── */
        .time-cards { display:flex; flex-direction:column; gap:8px; width:100%; }
        .time-card { display:flex; align-items:center; justify-content:space-between;
            padding:10px 14px; border-radius:6px; border:1px solid var(--border);
            background:var(--bg); transition:border-color .2s; }
        .time-card:hover { border-color:var(--blue); }
        .time-card-left { display:flex; align-items:center; gap:10px; }
        .time-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
        .dot-rieming  { background:#1a56c4; }
        .dot-drilling { background:#e8720a; }
        .dot-casing   { background:#2e6dd6; }
        .dot-blasting { background:#c2500a; }
        .time-card-name { font-size:11px; font-weight:700; text-transform:uppercase;
            letter-spacing:1px; color:var(--muted); }
        .time-card-value { font-family:'Bebas Neue'; font-size:26px; letter-spacing:1px; }
        .val-rieming  { color:#1a56c4; }
        .val-drilling { color:#e8720a; }
        .val-casing   { color:#2e6dd6; }
        .val-blasting { color:#c2500a; }
        .time-bar-track { height:4px; background:var(--border); border-radius:4px;
            margin-top:4px; overflow:hidden; }
        .time-bar-fill { height:100%; border-radius:4px; transition:width .6s ease; }

        /* ── ACTIVE JOBCARDS COUNT ───────────────────────── */
        .big-stat { display:flex; flex-direction:column; align-items:center;
            justify-content:center; height:100%; }
        .big-stat-num { font-family:'Bebas Neue'; font-size:72px; line-height:1;
            color:var(--blue); letter-spacing:2px; }
        .big-stat-sub { font-size:11px; color:var(--muted); text-transform:uppercase;
            letter-spacing:1px; margin-top:4px; }

        /* ── STAT CARDS (install summary) ────────────────── */
        .stat-grid { display:flex; flex-direction:column; gap:8px; height:100%; justify-content:center; }
        .stat-card { border:1px solid var(--border); border-radius:6px;
            padding:10px 14px; display:flex; align-items:center; justify-content:space-between;
            background:var(--bg); flex:1; transition:border-color .2s; }
        .stat-card:hover { border-color:var(--blue); }
        .stat-card-label { font-size:10px; font-weight:700; text-transform:uppercase;
            letter-spacing:1px; color:var(--muted); }
        .stat-card-value { font-family:'Bebas Neue'; font-size:36px; line-height:1; letter-spacing:1px; }
        .stat-card-sub { font-size:10px; color:var(--muted); margin-top:2px; }
        .val-blue   { color:var(--blue); }
        .val-orange { color:var(--orange); }
        .val-mid    { color:var(--blue-mid); }

        /* ── TABLE ───────────────────────────────────────── */
        .search-bar { padding:8px 12px; border-bottom:1px solid var(--border); flex-shrink:0; }
        .search-input { width:100%; padding:6px 10px; border:1px solid var(--border);
            border-radius:var(--radius); font-family:'DM Sans'; font-size:12px;
            background:var(--bg); color:var(--text); transition:border-color .2s; }
        .search-input:focus { outline:none; border-color:var(--blue); }
        .tbl-wrap { flex:1; overflow-y:auto; }
        .tbl-wrap::-webkit-scrollbar { width:4px; }
        .tbl-wrap::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }
        table { width:100%; border-collapse:collapse; }
        thead th { position:sticky; top:0; background:var(--blue-light);
            padding:7px 10px; font-size:10px; font-weight:700; text-transform:uppercase;
            letter-spacing:1px; color:var(--blue); text-align:left;
            border-bottom:1px solid var(--border); }
        tbody tr { border-bottom:1px solid var(--border); transition:background .15s; }
        tbody tr:hover { background:var(--blue-light); }
        tbody td { padding:7px 10px; font-size:12px; color:var(--text); }
        .td-mono  { font-family:'DM Mono'; font-size:11px; }
        .td-muted { color:var(--muted); font-size:11px; }
        .td-clip  { max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        tr.hidden-row { display:none; }

        /* ── PILLS ───────────────────────────────────────── */
        .pill { display:inline-block; padding:2px 7px; border-radius:20px;
            font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
        .pill-open   { background:var(--blue-light); color:var(--blue); }
        .pill-repair { background:var(--orange-lt);  color:var(--orange); }
        .pill-active { background:#fef3c7; color:#b45309; }

        /* ── MISC ────────────────────────────────────────── */
        .depth-tag { font-family:'DM Mono'; font-size:11px; font-weight:600; color:var(--blue-mid); }
        .empty-state td { text-align:center; padding:28px; color:var(--muted);
            font-size:12px; font-style:italic; }

        /* ── STAT ROW (diesel / compressor) ──────────────── */
        .kpi-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; flex-shrink:0; }
        .kpi-card { border:1px solid var(--border); border-radius:6px; padding:12px 14px;
            background:var(--bg); display:flex; flex-direction:column; gap:2px; }
        .kpi-val  { font-family:'Bebas Neue'; font-size:34px; line-height:1; letter-spacing:1px; }
        .kpi-blue { color:var(--blue); }
        .kpi-orange { color:var(--orange); }
        .kpi-lbl  { font-size:10px; font-weight:700; text-transform:uppercase;
                    letter-spacing:1px; color:var(--muted); }
        .kpi-sub  { font-size:10px; color:var(--muted); margin-top:2px; }

        /* ── WATER CARDS ─────────────────────────────────── */
        .water-list { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:6px; padding:10px 14px; }
        .water-list::-webkit-scrollbar { width:4px; }
        .water-list::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }
        .water-card { border:1px solid var(--border); border-radius:6px; padding:10px 12px;
            background:var(--bg); display:grid; grid-template-columns:1fr auto;
            gap:4px 10px; transition:border-color .15s; }
        .water-card:hover { border-color:var(--blue); }
        .water-name { font-size:12px; font-weight:600; color:var(--text); grid-column:1; }
        .water-addr { font-size:11px; color:var(--muted); grid-column:1; }
        .water-badges { grid-column:2; grid-row:1/3; display:flex; flex-direction:column;
                        gap:4px; align-items:flex-end; justify-content:center; }
        .water-badge { font-family:'DM Mono'; font-size:11px; font-weight:700;
                       padding:2px 8px; border-radius:20px; white-space:nowrap; }
        .wb-strike { background:#dbeafe; color:#1d4ed8; }
        .wb-flow   { background:#dcfce7; color:#15803d; }

        /* ── UPCOMING TABLE ──────────────────────────────── */
        .days-chip { display:inline-block; padding:2px 7px; border-radius:20px;
            font-size:10px; font-weight:700; font-family:'DM Mono'; }
        .days-today   { background:#fef3c7; color:#b45309; }
        .days-soon    { background:var(--blue-light); color:var(--blue); }
        .days-overdue { background:#fee2e2; color:#dc2626; }

        /* ── TEAM STOCK ──────────────────────────────────── */
        .qty-ok  { background:#dcfce7; color:#15803d; }
        .qty-low { background:#fff7ed; color:#c2410c; }
        .qty-out { background:#fee2e2; color:#dc2626; }
        .qty-badge { display:inline-flex; align-items:center; justify-content:center;
            min-width:26px; height:20px; padding:0 5px; border-radius:5px;
            font-family:'DM Mono'; font-size:11px; font-weight:700; }

        /* ── JOBS TAB ────────────────────────────────────── */
        .jobs-grid { display:grid;
            grid-template-columns:1fr 1fr 1fr;
            grid-template-rows:1fr 1fr;
            gap:12px; padding:12px; height:100%; overflow:hidden; }
        .jobs-grid .span3 { grid-column:1 / 4; }
        .team-section { border:1px solid var(--border); border-radius:6px;
            padding:10px 12px; background:var(--bg); margin-bottom:6px; transition:border-color .15s; }
        .team-section:last-child { margin-bottom:0; }
        .team-section:hover { border-color:var(--blue); }
        .team-section-name { font-size:12px; font-weight:700; color:var(--text);
            margin-bottom:8px; display:flex; justify-content:space-between; align-items:center; }
        .team-open-count { font-family:'Bebas Neue'; font-size:20px; line-height:1; }
        .count-total-blue   { color:var(--blue); }
        .count-total-orange { color:var(--orange); }
        .count-total-purple { color:#7e22ce; }
        .team-bar-row { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
        .bar-label { font-size:10px; font-weight:700; text-transform:uppercase;
            letter-spacing:.8px; color:var(--muted); width:52px; flex-shrink:0; }
        .bar-track { flex:1; height:7px; background:var(--border); border-radius:4px; overflow:hidden; }
        .bar-fill  { height:100%; border-radius:4px; }
        .bar-normal  { background:var(--blue); }
        .bar-install { background:var(--orange); }
        .bar-repair  { background:#9333ea; }
        .bar-count   { font-family:'DM Mono'; font-size:11px; font-weight:700;
            width:22px; text-align:right; flex-shrink:0; }
        .count-normal  { color:var(--blue); }
        .count-install { color:var(--orange); }
        .count-repair  { color:#9333ea; }
        .days-badge { font-family:'DM Mono'; font-size:11px; font-weight:700;
            padding:2px 7px; border-radius:6px; white-space:nowrap; }
        .days-warning { background:#fef3c7; color:#b45309; }
        .days-danger  { background:#fee2e2; color:var(--red); }
        .panel-overdue::before { background:linear-gradient(90deg, var(--red), var(--orange)) !important; }
        .panel-overdue .panel-label { color:var(--red) !important; }
        .badge-red { background:#fee2e2 !important; border-color:#fca5a5 !important; color:var(--red) !important; }

        /* ── MOBILE OVERRIDES ── */
        @media (max-width: 767px) {
            html, body      { overflow-x: hidden; }
            .shell, .shell-switcher { overflow-x: hidden; width: 100%; }

            /* Topbar */
            .topbar         { height: 80px; padding: 0 14px; }
            .page-title     { font-size: 40px !important; }
            .btn-refresh,
            .btn-logout     { font-size: 30px !important; padding: 10px 16px; }

            /* Switcher */
            .switcher       { overflow-x: auto; scrollbar-width: none; top: 80px; }
            .switcher::-webkit-scrollbar { display: none; }
            .switcher-btn   { font-size: 28px !important; padding: 0 18px; height: 56px; flex-shrink: 0; white-space: nowrap; min-width: max-content; }
            .sw-count       { font-size: 22px !important; height: 28px; min-width: 28px; }

            /* Dev tab bar */
            .tab-bar        { overflow-x: auto; scrollbar-width: none; }
            .tab-bar::-webkit-scrollbar { display: none; }
            .tab-btn        { font-size: 28px !important; padding: 0 18px; height: 56px; flex-shrink: 0; white-space: nowrap; }
            .tab-count      { font-size: 20px !important; }

            /* Stat tiles */
            .stat-strip     { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
            .stat-tile      { padding: 16px; gap: 16px; }
            .stat-icon      { width: 50px; height: 50px; }
            .stat-icon svg  { width: 26px; height: 26px; }
            .stat-num       { font-size: 70px; }
            .stat-lbl       { font-size: 28px !important; }

            /* Panels */
            .panel          { min-height: 280px; }
            .panel-head     { padding: 16px 14px; }
            .panel-body     { padding: 16px; }
            .panel-label    { font-size: 40px !important; }
            .badge          { font-size: 28px !important; padding: 5px 12px; }

            /* Stat cards */
            .stat-card      { padding: 16px; min-height: 80px; }
            .stat-card-label { font-size: 28px !important; }
            .stat-card-sub  { font-size: 24px !important; }
            .stat-card-value { font-size: 56px !important; }

            /* Big stat */
            .big-stat-num   { font-size: 100px !important; }
            .big-stat-sub   { font-size: 28px !important; }

            /* KPI cards */
            .kpi-val        { font-size: 56px !important; }
            .kpi-lbl        { font-size: 26px !important; }
            .kpi-sub        { font-size: 24px !important; }

            /* Search / toolbar */
            .toolbar        { padding: 12px; gap: 10px; }
            .search-bar     { padding: 12px; }
            .search-input   { font-size: 35px !important; padding: 12px; }
            .filter-select  { font-size: 35px !important; padding: 10px 12px; }

            /* Tables */
            table           { min-width: 700px; }
            .tbl-wrap       { max-height: 500px; }
            thead th        { font-size: 30px !important; padding: 12px 10px; }
            tbody td        { font-size: 30px !important; padding: 12px 10px; }
            .td-mono        { font-size: 30px !important; }
            .td-muted       { font-size: 28px !important; }

            /* Qty badge & action buttons */
            .qty            { font-size: 28px !important; height: 48px; min-width: 48px; }
            .btn-in,
            .btn-out        { font-size: 28px !important; padding: 10px 16px; }
            .days-badge     { font-size: 28px !important; padding: 6px 12px; }
            .type-pill      { font-size: 26px !important; padding: 5px 12px; }
            .pill-repair    { font-size: 26px !important; padding: 5px 12px; }

            /* Team sections */
            .team-section   { padding: 14px 16px; }
            .team-section-name { font-size: 32px !important; }
            .team-open-count { font-size: 56px !important; }
            .bar-label      { font-size: 26px !important; width: 70px; }
            .bar-track      { height: 10px; }
            .bar-count      { font-size: 26px !important; width: 32px; }
            .team-done-note { font-size: 24px !important; }
            .team-scroll    { max-height: 500px; }

            /* Members */
            .member-row     { padding: 14px; gap: 14px; }
            .member-avatar  { width: 50px; height: 50px; font-size: 20px; }
            .member-name    { font-size: 32px !important; }

            /* Time cards */
            .time-cards     { gap: 10px; }
            .time-card      { padding: 14px 16px; }
            .time-card-name  { font-size: 28px !important; }
            .time-card-value { font-size: 48px !important; }
            .time-dot       { width: 14px; height: 14px; }
            .time-bar-track { height: 8px; }

            /* Transactions */
            .trans-list     { max-height: 500px; }
            .trans-item     { padding: 16px 14px; gap: 14px; }
            .trans-dot      { width: 14px; height: 14px; margin-top: 8px; }
            .trans-name     { font-size: 40px !important; white-space: normal; }
            .trans-meta     { font-size: 36px !important; }
            .trans-badge    { font-size: 36px !important; padding: 6px 14px; }

            /* Water cards */
            .water-card     { padding: 14px 16px; }
            .water-name     { font-size: 32px !important; }
            .water-addr     { font-size: 28px !important; }
            .water-badge    { font-size: 28px !important; padding: 5px 12px; }

            /* Dispatch panels */
            .panel-low, .panel-book { min-height: 360px; }

            /* Depth tag */
            .depth-tag      { font-size: 28px !important; }
        }
    </style>
    <link rel="stylesheet" href="/app/dashboard/dashboard_responsive.css">
</head>
<body>
<div class="shell shell-switcher">

    <!-- TOPBAR -->
    <header class="topbar">
        <div class="topbar-left">
            <div class="logo-mark"></div>
            <span class="page-title">MY <span>DASHBOARD</span></span>
            <div class="divider-v"></div>
            <span class="role-badge">Test</span>
            <span class="user-name"><?= c_esc($username) ?></span>
        </div>
        <a class="btn-refresh" href="?">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/>
                <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>
            </svg>
            Refresh
        </a>
    </header>

    <!-- VIEW SWITCHER -->
    <nav class="switcher">
        <button class="switcher-btn active" data-view="driver">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8v4l3 3"/></svg>
            Drilling
            <span class="sw-count"><?= count($active_jobs) ?></span>
        </button>
        <button class="switcher-btn" data-view="install">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
            Install
            <span class="sw-count"><?= count($installs) + count($repairs) ?></span>
        </button>
        <button class="switcher-btn" data-view="overview">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
            Overview
            <span class="sw-count"><?= count($today_jobs) ?></span>
        </button>
        <button class="switcher-btn" data-view="upcoming">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
            Upcoming
            <span class="sw-count"><?= count($upcoming) ?></span>
        </button>
        <button class="switcher-btn" data-view="water">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z"/></svg>
            Water
            <span class="sw-count"><?= count($water_data) ?></span>
        </button>
        <button class="switcher-btn" data-view="stock">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
            My Stock
            <span class="sw-count"><?= count($team_stock) ?></span>
        </button>
        <button class="switcher-btn" data-view="jobs">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
            Jobs
            <span class="sw-count" style="background:<?= count($overdue_all) > 0 ? '#fee2e2' : '' ?>;color:<?= count($overdue_all) > 0 ? '#dc2626' : '' ?>"><?= count($overdue_all) ?></span>
        </button>
        <button class="switcher-btn" data-view="all-installs">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
            All Installs
            <span class="sw-count"><?= count($all_installs) ?></span>
        </button>
    </nav>

    <!-- VIEWS -->
    <div class="views">

        <!-- ════════════════════════════════════════
             DRIVER VIEW
        ════════════════════════════════════════ -->
        <div class="view active" id="view-driver">
            <div class="driver-grid">

                <!-- Meters this month (spans 2 cols) -->
                <div class="panel panel-chart span2">
                    <div class="panel-head">
                        <span class="panel-label">My Meters This Month</span>
                        <span class="badge" id="meters-total">Loading...</span>
                    </div>
                    <div class="panel-body">
                        <div id="meters-state" style="display:flex;align-items:center;justify-content:center;height:100%;color:var(--muted)">
                            <span style="display:inline-block;width:8px;height:8px;background:var(--orange);border-radius:50%;animation:pulse 1.2s ease-in-out infinite"></span>
                        </div>
                        <div class="chart-wrap" id="meters-chart-wrap" style="display:none">
                            <canvas id="driverMetersChart"></canvas>
                        </div>
                    </div>
                </div>

                <!-- Active jobcards count -->
                <div class="panel">
                    <div class="panel-head">
                        <span class="panel-label">Active Jobcards</span>
                    </div>
                    <div class="panel-body">
                        <div class="big-stat">
                            <div class="big-stat-num"><?= count($active_jobs) ?></div>
                            <div class="big-stat-sub">Open Jobcards</div>
                        </div>
                    </div>
                </div>

                <!-- Drilling bits -->
                <div class="panel">
                    <div class="panel-head">
                        <span class="panel-label">Drilling Bit Meters</span>
                        <span class="badge" id="drill-bits-count">—</span>
                    </div>
                    <div class="panel-body-flush">
                        <div class="tbl-wrap">
                            <table>
                                <thead><tr><th>Bit Serial</th><th>Total Meters</th></tr></thead>
                                <tbody id="drill-bits-body">
                                    <tr><td colspan="2" style="text-align:center;padding:20px;color:var(--muted)">Loading…</td></tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Rieming bits -->
                <div class="panel">
                    <div class="panel-head">
                        <span class="panel-label">Rieming Bit Meters</span>
                        <span class="badge" id="riem-bits-count">—</span>
                    </div>
                    <div class="panel-body-flush">
                        <div class="tbl-wrap">
                            <table>
                                <thead><tr><th>Bit Serial</th><th>Total Meters</th></tr></thead>
                                <tbody id="riem-bits-body">
                                    <tr><td colspan="2" style="text-align:center;padding:20px;color:var(--muted)">Loading…</td></tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Time spent -->
                <div class="panel">
                    <div class="panel-head">
                        <span class="panel-label">Time Spent — All Time</span>
                        <?php
                        $total_h = array_sum(array_column($time_spent, 'hours'));
                        ?>
                        <span class="badge"><?= number_format($total_h, 1) ?> hrs total</span>
                    </div>
                    <div class="panel-body">
                        <?php
                        $activities = [
                            ['key'=>'RIEMING',  'label'=>'Rieming',  'dot'=>'dot-rieming',  'val'=>'val-rieming',  'bar'=>'#1a56c4'],
                            ['key'=>'DRILLING', 'label'=>'Drilling', 'dot'=>'dot-drilling', 'val'=>'val-drilling', 'bar'=>'#e8720a'],
                            ['key'=>'CASING',   'label'=>'Casing',   'dot'=>'dot-casing',   'val'=>'val-casing',   'bar'=>'#2e6dd6'],
                            ['key'=>'BLASTING', 'label'=>'Blasting', 'dot'=>'dot-blasting', 'val'=>'val-blasting', 'bar'=>'#c2500a'],
                        ];
                        $max_sec = max(array_map(fn($a) => $time_spent[$a['key']]['seconds'] ?? 0, $activities) ?: [1]);
                        ?>
                        <div class="time-cards">
                        <?php foreach ($activities as $a):
                            $d   = $time_spent[$a['key']] ?? ['label'=>'0h 00m','seconds'=>0];
                            $pct = $max_sec > 0 ? round(($d['seconds'] / $max_sec) * 100) : 0;
                        ?>
                            <div class="time-card">
                                <div style="flex:1">
                                    <div class="time-card-left">
                                        <span class="time-dot <?= $a['dot'] ?>"></span>
                                        <span class="time-card-name"><?= $a['label'] ?></span>
                                    </div>
                                    <div class="time-bar-track">
                                        <div class="time-bar-fill" style="width:<?= $pct ?>%;background:<?= $a['bar'] ?>"></div>
                                    </div>
                                </div>
                                <span class="time-card-value <?= $a['val'] ?>"><?= c_esc($d['label']) ?></span>
                            </div>
                        <?php endforeach; ?>
                        </div>
                    </div>
                </div>

            </div>
        </div><!-- /view-driver -->

        <!-- ════════════════════════════════════════
             INSTALL VIEW
        ════════════════════════════════════════ -->
        <div class="view" id="view-install">
            <div class="install-grid">

                <!-- Cable & HDPE meters chart -->
                <div class="panel panel-chart span2">
                    <div class="panel-head">
                        <span class="panel-label">Cable & HDPE Meters — This Month</span>
                        <span class="badge"><?= number_format($meters['cable'] + $meters['hdpe']) ?> m total</span>
                    </div>
                    <div class="panel-body">
                        <div class="chart-wrap">
                            <canvas id="installMetersChart"></canvas>
                        </div>
                    </div>
                </div>

                <!-- Summary stats -->
                <div class="panel">
                    <div class="panel-head">
                        <span class="panel-label">This Month</span>
                    </div>
                    <div class="panel-body">
                        <div class="stat-grid">
                            <div class="stat-card">
                                <div>
                                    <div class="stat-card-label">Installs Done</div>
                                    <div class="stat-card-sub">Completed this month</div>
                                </div>
                                <div class="stat-card-value val-blue"><?= $stats['completed_installs'] ?></div>
                            </div>
                            <div class="stat-card">
                                <div>
                                    <div class="stat-card-label">Repairs Done</div>
                                    <div class="stat-card-sub">Completed this month</div>
                                </div>
                                <div class="stat-card-value val-orange"><?= $stats['completed_repairs'] ?></div>
                            </div>
                            <div class="stat-card">
                                <div>
                                    <div class="stat-card-label">Avg Pump Depth</div>
                                    <div class="stat-card-sub">Completed installs</div>
                                </div>
                                <div class="stat-card-value val-mid"><?= $stats['avg_pump_depth'] ?: '—' ?></div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Active installations -->
                <div class="panel span2">
                    <div class="panel-head">
                        <span class="panel-label">Active Installations</span>
                        <span class="badge"><?= count($installs) ?> open</span>
                    </div>
                    <div class="panel-body-flush">
                        <div class="search-bar">
                            <input type="text" class="search-input"
                                   placeholder="Search client, area, jobcard, pump no…"
                                   oninput="filterTable(this,'installs-tbody')">
                        </div>
                        <div class="tbl-wrap">
                            <table>
                                <thead>
                                    <tr><th>JC No</th><th>Client</th><th>Area</th><th>Pack No</th>
                                        <th>Depth</th><th>Cable m</th><th>HDPE m</th><th>Status</th></tr>
                                </thead>
                                <tbody id="installs-tbody">
                                <?php if (empty($installs)): ?>
                                    <tr class="empty-state"><td colspan="8">No active installations</td></tr>
                                <?php else: foreach ($installs as $row): ?>
                                    <tr>
                                        <td class="td-mono"><strong><?= c_esc($row['jobcard_no']) ?></strong></td>
                                        <td class="td-clip"><?= c_esc($row['client_name'] ?? '—') ?></td>
                                        <td class="td-muted td-clip"><?= c_esc($row['area'] ?? '—') ?></td>
                                        <td class="td-mono"><?= c_esc($row['pack_no'] ?? '—') ?></td>
                                        <td><?php if ($row['pump_depth']): ?><span class="depth-tag"><?= c_esc($row['pump_depth']) ?>m</span><?php else: ?>—<?php endif; ?></td>
                                        <td class="td-mono"><?= $row['cable_meters'] ? c_esc($row['cable_meters']).'m' : '—' ?></td>
                                        <td class="td-mono"><?= $row['hdpe_meters']  ? c_esc($row['hdpe_meters']).'m'  : '—' ?></td>
                                        <td><?= c_pill($row['jc_current_status']) ?></td>
                                    </tr>
                                <?php endforeach; endif; ?>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Active repairs -->
                <div class="panel">
                    <div class="panel-head">
                        <span class="panel-label">Active Repairs</span>
                        <span class="badge badge-orange"><?= count($repairs) ?> open</span>
                    </div>
                    <div class="panel-body-flush">
                        <div class="search-bar">
                            <input type="text" class="search-input"
                                   placeholder="Search jobcard, address…"
                                   oninput="filterTable(this,'repairs-tbody')">
                        </div>
                        <div class="tbl-wrap">
                            <table>
                                <thead>
                                    <tr><th>JC No</th><th>Client Type</th><th>Address</th><th>Status</th></tr>
                                </thead>
                                <tbody id="repairs-tbody">
                                <?php if (empty($repairs)): ?>
                                    <tr class="empty-state"><td colspan="4">No active repairs</td></tr>
                                <?php else: foreach ($repairs as $row): ?>
                                    <tr>
                                        <td class="td-mono"><strong><?= c_esc($row['jobcard_no']) ?></strong></td>
                                        <td><span class="pill pill-repair"><?= c_esc($row['client_type'] ?? '—') ?></span></td>
                                        <td class="td-muted td-clip"><?= c_esc($row['address'] ?? '—') ?></td>
                                        <td><?= c_pill($row['jc_current_status']) ?></td>
                                    </tr>
                                <?php endforeach; endif; ?>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

            </div>
        </div><!-- /view-install -->

        <!-- ════════════════════════════════════════
             OVERVIEW VIEW — diesel, compressor, today's jobs
        ════════════════════════════════════════ -->
        <div class="view" id="view-overview">
            <div class="driver-grid">

                <!-- Diesel + Compressor KPIs -->
                <div class="panel">
                    <div class="panel-head">
                        <span class="panel-label">This Month — Machine Stats</span>
                    </div>
                    <div class="panel-body">
                        <div class="kpi-row">
                            <div class="kpi-card">
                                <div class="kpi-val kpi-orange"><?= number_format($diesel['litres']) ?></div>
                                <div class="kpi-lbl">Litres Diesel</div>
                                <div class="kpi-sub">across <?= $diesel['jobs'] ?> job<?= $diesel['jobs'] !== 1 ? 's' : '' ?></div>
                            </div>
                            <div class="kpi-card">
                                <div class="kpi-val kpi-blue"><?= number_format($compressor['hours'], 1) ?></div>
                                <div class="kpi-lbl">Compressor Hrs</div>
                                <div class="kpi-sub">across <?= $compressor['jobs'] ?> job<?= $compressor['jobs'] !== 1 ? 's' : '' ?></div>
                            </div>
                        </div>
                        <!-- mini bar showing diesel vs compressor ratio -->
                        <?php $max = max($diesel['litres'], $compressor['hours'] * 10, 1); ?>
                        <div style="display:flex;flex-direction:column;gap:8px;margin-top:4px;">
                            <div>
                                <div style="font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:4px;">Diesel L / day</div>
                                <div style="height:6px;background:var(--border);border-radius:4px;overflow:hidden;">
                                    <div style="height:100%;width:<?= $diesel['litres'] > 0 ? min(100, round($diesel['litres'] / max(1, date('j')) / 200 * 100)) : 0 ?>%;background:var(--orange);border-radius:4px;"></div>
                                </div>
                            </div>
                            <div>
                                <div style="font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:4px;">Compressor hrs / day</div>
                                <div style="height:6px;background:var(--border);border-radius:4px;overflow:hidden;">
                                    <div style="height:100%;width:<?= $compressor['hours'] > 0 ? min(100, round($compressor['hours'] / max(1, date('j')) / 8 * 100)) : 0 ?>%;background:var(--blue);border-radius:4px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Today's jobcard statuses (spans 2 cols) -->
                <div class="panel span2">
                    <div class="panel-head">
                        <span class="panel-label">Current Jobcard Statuses</span>
                        <span class="badge"><?= count($today_jobs) ?> open</span>
                    </div>
                    <div class="panel-body-flush">
                        <div class="tbl-wrap">
                            <table>
                                <thead>
                                    <tr>
                                        <th>JC #</th>
                                        <th>Client</th>
                                        <th class="hide-mobile">Action Date</th>
                                        <th>Current Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                <?php if (empty($today_jobs)): ?>
                                    <tr class="empty-state"><td colspan="4">No open jobcards</td></tr>
                                <?php else: foreach ($today_jobs as $j): ?>
                                    <tr>
                                        <td class="td-mono"><strong>#<?= c_esc($j['jc_no']) ?></strong></td>
                                        <td><?= c_esc($j['client_name'] ?? '—') ?></td>
                                        <td class="td-muted hide-mobile"><?= c_esc($j['action_date'] ?? '—') ?></td>
                                        <td><?= c_pill($j['jc_current_status']) ?></td>
                                    </tr>
                                <?php endforeach; endif; ?>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

            </div>
        </div><!-- /view-overview -->

        <!-- ════════════════════════════════════════
             UPCOMING VIEW — scheduled jobcards
        ════════════════════════════════════════ -->
        <div class="view" id="view-upcoming">
            <div class="driver-grid" style="grid-template-columns:1fr;grid-template-rows:1fr;">
                <div class="panel">
                    <div class="panel-head">
                        <span class="panel-label">Upcoming Scheduled Jobcards</span>
                        <span class="badge"><?= count($upcoming) ?></span>
                    </div>
                    <div class="panel-body-flush">
                        <div class="tbl-wrap">
                            <table>
                                <thead>
                                    <tr>
                                        <th>JC #</th>
                                        <th>Client</th>
                                        <th class="hide-mobile">Address</th>
                                        <th>Action Date</th>
                                        <th>Due</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                <?php if (empty($upcoming)): ?>
                                    <tr class="empty-state"><td colspan="6">No upcoming scheduled jobcards</td></tr>
                                <?php else: foreach ($upcoming as $j):
                                    $days_away = 0;
                                    $due_chip  = '';
                                    if (!empty($j['action_date'])) {
                                        $ts = strtotime($j['action_date']);
                                        $days_away = (int) ceil(($ts - time()) / 86400);
                                        if ($days_away < 0)
                                            $due_chip = '<span class="days-chip days-overdue">' . abs($days_away) . 'd overdue</span>';
                                        elseif ($days_away === 0)
                                            $due_chip = '<span class="days-chip days-today">Today</span>';
                                        else
                                            $due_chip = '<span class="days-chip days-soon">in ' . $days_away . 'd</span>';
                                    }
                                ?>
                                    <tr>
                                        <td class="td-mono"><strong>#<?= c_esc($j['jc_no']) ?></strong></td>
                                        <td><?= c_esc($j['client_name'] ?? '—') ?></td>
                                        <td class="td-muted hide-mobile"><?= c_esc($j['address'] ?? '—') ?></td>
                                        <td class="td-mono td-muted"><?= c_esc($j['action_date'] ?? '—') ?></td>
                                        <td><?= $due_chip ?></td>
                                        <td><?= c_pill($j['jc_current_status']) ?></td>
                                    </tr>
                                <?php endforeach; endif; ?>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div><!-- /view-upcoming -->

        <!-- ════════════════════════════════════════
             WATER VIEW — water strike & flow
        ════════════════════════════════════════ -->
        <div class="view" id="view-water">
            <div class="driver-grid" style="grid-template-columns:1fr;grid-template-rows:1fr;">
                <div class="panel">
                    <div class="panel-head">
                        <span class="panel-label">Water Strike & Flow — Recent Completed Jobs</span>
                        <span class="badge"><?= count($water_data) ?> jobs</span>
                    </div>
                    <div class="panel-body-flush">
                        <?php if (empty($water_data)): ?>
                            <div style="display:flex;align-items:center;justify-content:center;height:100%;color:var(--muted);font-size:12px;font-style:italic;">No water data on recent completed jobs</div>
                        <?php else: ?>
                        <div class="water-list">
                            <?php foreach ($water_data as $w): ?>
                            <div class="water-card">
                                <div class="water-name"><?= c_esc($w['client_name'] ?? '—') ?> <span class="td-mono" style="font-size:11px;color:var(--muted);">#<?= c_esc($w['jc_no']) ?></span></div>
                                <div class="water-addr"><?= c_esc($w['address'] ?? '') ?> · <?= c_esc(substr($w['date_time_closed'] ?? '', 0, 10)) ?></div>
                                <div class="water-badges">
                                    <?php if (!empty($w['water_strike'])): ?>
                                    <span class="water-badge wb-strike">Strike: <?= c_esc($w['water_strike']) ?>m</span>
                                    <?php endif; ?>
                                    <?php if (!empty($w['water_flow'])): ?>
                                    <span class="water-badge wb-flow">Flow: <?= c_esc($w['water_flow']) ?> l/h</span>
                                    <?php endif; ?>
                                </div>
                            </div>
                            <?php endforeach; ?>
                        </div>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div><!-- /view-water -->

        <!-- ════════════════════════════════════════
             STOCK VIEW — team assigned stock
        ════════════════════════════════════════ -->
        <div class="view" id="view-stock">
            <div class="driver-grid" style="grid-template-columns:1fr;grid-template-rows:1fr;">
                <div class="panel">
                    <div class="panel-head">
                        <span class="panel-label">Stock Assigned to My Team</span>
                        <span class="badge"><?= count($team_stock) ?> items</span>
                    </div>
                    <div class="panel-body-flush">
                        <div class="toolbar" style="padding:8px 12px;border-bottom:1px solid var(--border);flex-shrink:0;">
                            <input type="text" class="search-input"
                                   placeholder="Search item, stock no…"
                                   oninput="filterStockView(this)"
                                   style="flex:1;min-width:140px;padding:6px 10px;border:1px solid var(--border);border-radius:var(--radius);font-family:'DM Sans';font-size:12px;background:var(--bg);color:var(--text);">
                        </div>
                        <div class="tbl-wrap">
                            <table id="stock-view-table">
                                <thead>
                                    <tr>
                                        <th>Stock No</th>
                                        <th>Item</th>
                                        <th class="hide-mobile">Type</th>
                                        <th class="hide-mobile">Size</th>
                                        <th class="hide-mobile">Serial</th>
                                        <th>Qty</th>
                                    </tr>
                                </thead>
                                <tbody id="stock-view-tbody">
                                <?php if (empty($team_stock)): ?>
                                    <tr class="empty-state"><td colspan="6">No stock assigned to this team</td></tr>
                                <?php else: foreach ($team_stock as $s):
                                    $qty  = (int) $s['qty'];
                                    $qcls = $qty <= 0 ? 'qty-out' : ($qty <= 1 ? 'qty-low' : 'qty-ok');
                                ?>
                                    <tr data-search="<?= c_esc(strtolower($s['item_name'].' '.$s['stock_no'])) ?>">
                                        <td class="td-mono"><?= c_esc($s['stock_no']) ?></td>
                                        <td><strong><?= c_esc($s['item_name']) ?></strong></td>
                                        <td class="td-muted hide-mobile"><?= c_esc($s['type_name'] ?? '—') ?></td>
                                        <td class="td-muted hide-mobile"><?= c_esc($s['size'] ?? '—') ?></td>
                                        <td class="td-mono hide-mobile"><?= c_esc($s['serial_number'] ?? '—') ?></td>
                                        <td><span class="qty-badge <?= $qcls ?>"><?= $qty ?></span></td>
                                    </tr>
                                <?php endforeach; endif; ?>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div><!-- /view-stock -->

        <!-- ════════════════════════════════════════
             JOBS VIEW — team counts + overdue
        ════════════════════════════════════════ -->
        <div class="view" id="view-jobs">
            <div class="jobs-grid">

                <!-- Normal jobcards per team -->
                <div class="panel">
                    <div class="panel-head">
                        <span class="panel-label">Normal Jobcards</span>
                        <span class="badge"><?= array_sum(array_column($team_jc_counts, 'normal_open')) ?> open</span>
                    </div>
                    <div class="panel-body-flush">
                        <div class="tbl-wrap" style="padding:10px 12px;">
                        <?php if (empty($team_jc_counts)): ?>
                            <p style="color:var(--muted);font-size:12px;text-align:center;padding:20px">No teams found</p>
                        <?php else:
                            $max_n = max(array_map(fn($t) => $t['normal_open'] + $t['normal_done'], $team_jc_counts) ?: [1]);
                            foreach ($team_jc_counts as $t):
                                $total = $t['normal_open'] + $t['normal_done'];
                                $pct   = $max_n > 0 ? round($t['normal_open'] / $max_n * 100) : 0;
                                $done_pct = $total > 0 ? round($t['normal_done'] / $total * 100) : 0;
                        ?>
                            <div class="team-section">
                                <div class="team-section-name">
                                    <?= c_esc($t['team']) ?>
                                    <span class="team-open-count count-total-blue"><?= $t['normal_open'] ?></span>
                                </div>
                                <div class="team-bar-row">
                                    <span class="bar-label">Open</span>
                                    <div class="bar-track"><div class="bar-fill bar-normal" style="width:<?= $pct ?>%"></div></div>
                                    <span class="bar-count count-normal"><?= $t['normal_open'] ?></span>
                                </div>
                                <div style="font-size:10px;color:var(--muted);margin-top:5px;font-family:'DM Mono'">
                                    <?= $t['normal_done'] ?> done · <?= $done_pct ?>% complete
                                </div>
                            </div>
                        <?php endforeach; endif; ?>
                        </div>
                    </div>
                </div>

                <!-- Install jobcards per team -->
                <div class="panel">
                    <div class="panel-head">
                        <span class="panel-label">Install Jobcards</span>
                        <span class="badge" style="background:var(--orange-lt);border-color:#fed7aa;color:var(--orange)"><?= array_sum(array_column($team_jc_counts, 'install_open')) ?> open</span>
                    </div>
                    <div class="panel-body-flush">
                        <div class="tbl-wrap" style="padding:10px 12px;">
                        <?php if (empty($team_jc_counts)): ?>
                            <p style="color:var(--muted);font-size:12px;text-align:center;padding:20px">No teams found</p>
                        <?php else:
                            $max_i = max(array_map(fn($t) => $t['install_open'] + $t['install_done'], $team_jc_counts) ?: [1]);
                            foreach ($team_jc_counts as $t):
                                $total = $t['install_open'] + $t['install_done'];
                                $pct   = $max_i > 0 ? round($t['install_open'] / $max_i * 100) : 0;
                                $done_pct = $total > 0 ? round($t['install_done'] / $total * 100) : 0;
                        ?>
                            <div class="team-section">
                                <div class="team-section-name">
                                    <?= c_esc($t['team']) ?>
                                    <span class="team-open-count count-total-orange"><?= $t['install_open'] ?></span>
                                </div>
                                <div class="team-bar-row">
                                    <span class="bar-label">Open</span>
                                    <div class="bar-track"><div class="bar-fill bar-install" style="width:<?= $pct ?>%"></div></div>
                                    <span class="bar-count count-install"><?= $t['install_open'] ?></span>
                                </div>
                                <div style="font-size:10px;color:var(--muted);margin-top:5px;font-family:'DM Mono'">
                                    <?= $t['install_done'] ?> done · <?= $done_pct ?>% complete
                                </div>
                            </div>
                        <?php endforeach; endif; ?>
                        </div>
                    </div>
                </div>

                <!-- Repair jobcards per team -->
                <div class="panel">
                    <div class="panel-head">
                        <span class="panel-label">Repair Jobcards</span>
                        <span class="badge" style="background:#f3e8ff;border-color:#d8b4fe;color:#7e22ce"><?= array_sum(array_column($team_jc_counts, 'repair_open')) ?> open</span>
                    </div>
                    <div class="panel-body-flush">
                        <div class="tbl-wrap" style="padding:10px 12px;">
                        <?php if (empty($team_jc_counts)): ?>
                            <p style="color:var(--muted);font-size:12px;text-align:center;padding:20px">No teams found</p>
                        <?php else:
                            $max_r = max(array_map(fn($t) => $t['repair_open'] + $t['repair_done'], $team_jc_counts) ?: [1]);
                            foreach ($team_jc_counts as $t):
                                $total = $t['repair_open'] + $t['repair_done'];
                                $pct   = $max_r > 0 ? round($t['repair_open'] / $max_r * 100) : 0;
                                $done_pct = $total > 0 ? round($t['repair_done'] / $total * 100) : 0;
                        ?>
                            <div class="team-section">
                                <div class="team-section-name">
                                    <?= c_esc($t['team']) ?>
                                    <span class="team-open-count count-total-purple"><?= $t['repair_open'] ?></span>
                                </div>
                                <div class="team-bar-row">
                                    <span class="bar-label">Open</span>
                                    <div class="bar-track"><div class="bar-fill bar-repair" style="width:<?= $pct ?>%"></div></div>
                                    <span class="bar-count count-repair"><?= $t['repair_open'] ?></span>
                                </div>
                                <div style="font-size:10px;color:var(--muted);margin-top:5px;font-family:'DM Mono'">
                                    <?= $t['repair_done'] ?> done · <?= $done_pct ?>% complete
                                </div>
                            </div>
                        <?php endforeach; endif; ?>
                        </div>
                    </div>
                </div>

                <!-- Overdue — spans full bottom row -->
                <div class="panel panel-overdue span3">
                    <div class="panel-head">
                        <span class="panel-label">⚠ Not Completed in 5+ Days</span>
                        <span class="badge badge-red"><?= count($overdue_all) ?> overdue</span>
                    </div>
                    <div class="panel-body-flush">
                        <div class="tbl-wrap">
                            <table>
                                <thead>
                                    <tr>
                                        <th style="background:#fee2e2;color:var(--red);padding:7px 10px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;text-align:left;border-bottom:1px solid #fca5a5;">Type</th>
                                        <th style="background:#fee2e2;color:var(--red);padding:7px 10px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;text-align:left;border-bottom:1px solid #fca5a5;">JC #</th>
                                        <th style="background:#fee2e2;color:var(--red);padding:7px 10px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;text-align:left;border-bottom:1px solid #fca5a5;">Client / Address</th>
                                        <th style="background:#fee2e2;color:var(--red);padding:7px 10px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;text-align:left;border-bottom:1px solid #fca5a5;" class="hide-mobile">Team</th>
                                        <th style="background:#fee2e2;color:var(--red);padding:7px 10px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;text-align:left;border-bottom:1px solid #fca5a5;">Days Open</th>
                                        <th style="background:#fee2e2;color:var(--red);padding:7px 10px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;text-align:left;border-bottom:1px solid #fca5a5;" class="hide-mobile">Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                <?php if (empty($overdue_all)): ?>
                                    <tr><td colspan="6" style="text-align:center;padding:24px;color:var(--muted);font-style:italic">
                                        ✓ No jobcards overdue — everything is within 5 days
                                    </td></tr>
                                <?php else: foreach ($overdue_all as $r):
                                    $d    = (int) $r['days_open'];
                                    $dcls = $d >= 14 ? 'days-danger' : 'days-warning';
                                    $type = $r['job_type'];
                                    $type_styles = [
                                        'Normal'  => 'background:var(--blue-light);color:var(--blue)',
                                        'Install' => 'background:var(--orange-lt);color:var(--orange)',
                                        'Repair'  => 'background:#f3e8ff;color:#7e22ce',
                                    ];
                                    $tstyle = $type_styles[$type] ?? '';
                                    $client = $r['client_name'] ?: $r['address'] ?: '—';
                                ?>
                                    <tr>
                                        <td>
                                            <span style="display:inline-block;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:700;text-transform:uppercase;<?= $tstyle ?>">
                                                <?= c_esc($type) ?>
                                            </span>
                                        </td>
                                        <td class="td-mono"><strong>#<?= c_esc($r['jc_no']) ?></strong></td>
                                        <td><?= c_esc($client) ?></td>
                                        <td class="td-muted hide-mobile"><?= c_esc($r['team_name'] ?? '—') ?></td>
                                        <td><span class="days-badge <?= $dcls ?>"><?= $d ?>d</span></td>
                                        <td class="td-muted hide-mobile"><?= c_esc($r['jc_current_status'] ?? '—') ?></td>
                                    </tr>
                                <?php endforeach; endif; ?>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

            </div>
        </div><!-- /view-jobs -->

        <!-- ════════════════════════════════════════
             ALL INSTALLS VIEW
        ════════════════════════════════════════ -->
        <div class="view" id="view-all-installs">
            <div style="display:grid;grid-template-columns:1fr;grid-template-rows:1fr;gap:12px;padding:12px;height:100%;overflow:hidden;">
                <div class="panel">
                    <div class="panel-head">
                        <span class="panel-label">All Installations</span>
                        <span class="badge"><?= count($all_installs) ?> records</span>
                    </div>
                    <div class="panel-body-flush">

                        <!-- Toolbar -->
                        <div style="display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--border);flex-shrink:0;flex-wrap:wrap;">
                            <input type="text" id="installs-search"
                                   style="flex:1;min-width:160px;padding:6px 10px;border:1px solid var(--border);border-radius:var(--radius);font-family:'DM Sans';font-size:12px;background:var(--bg);color:var(--text);"
                                   placeholder="Search jobcard, client, area, pack no…"
                                   oninput="filterInstalls()">
                            <select id="installs-status-filter"
                                    style="padding:6px 10px;border:1px solid var(--border);border-radius:var(--radius);font-family:'DM Sans';font-size:12px;background:var(--bg);color:var(--text);"
                                    onchange="filterInstalls()">
                                <option value="">All statuses</option>
                                <option value="0">Open</option>
                                <option value="1">Completed</option>
                            </select>
                        </div>

                        <div class="tbl-wrap">
                            <table id="installs-all-table">
                                <thead>
                                    <tr>
                                        <th class="blue-head">JC No</th>
                                        <th class="blue-head">Client</th>
                                        <th class="blue-head hide-mobile">Area</th>
                                        <th class="blue-head hide-mobile">Pack No</th>
                                        <th class="blue-head">Pump Depth</th>
                                        <th class="blue-head hide-mobile">Borehole m</th>
                                        <th class="blue-head">Cable m</th>
                                        <th class="blue-head">HDPE m</th>
                                        <th class="blue-head hide-mobile">Water Flow</th>
                                        <th class="blue-head hide-mobile">Installed By</th>
                                        <th class="blue-head">Status</th>
                                        <th class="blue-head hide-mobile">Date</th>
                                    </tr>
                                </thead>
                                <tbody id="installs-all-tbody">
                                <?php if (empty($all_installs)): ?>
                                    <tr><td colspan="12" style="text-align:center;padding:32px;color:var(--muted);font-style:italic">No installation records found</td></tr>
                                <?php else: foreach ($all_installs as $row):
                                    $is_done = (int)$row['status'] === 1;
                                    $status_pill = $is_done
                                        ? '<span style="display:inline-block;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:700;background:#dcfce7;color:#15803d">Done</span>'
                                        : '<span style="display:inline-block;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:700;background:var(--blue-light);color:var(--blue)">' . c_esc($row['jc_current_status'] ?: 'Open') . '</span>';
                                ?>
                                    <tr data-status="<?= (int)$row['status'] ?>"
                                        data-search="<?= c_esc(strtolower(
                                            ($row['jobcard_no'] ?? '') . ' ' .
                                            ($row['client_name'] ?? '') . ' ' .
                                            ($row['area'] ?? '') . ' ' .
                                            ($row['pack_no'] ?? '') . ' ' .
                                            ($row['installed_by'] ?? '')
                                        )) ?>">
                                        <td class="td-mono"><strong><?= c_esc($row['jobcard_no']) ?></strong></td>
                                        <td><?= c_esc($row['client_name'] ?? '—') ?></td>
                                        <td class="td-muted hide-mobile"><?= c_esc($row['area'] ?? '—') ?></td>
                                        <td class="td-mono hide-mobile"><?= c_esc($row['pack_no'] ?? '—') ?></td>
                                        <td><?= $row['pump_depth'] ? '<span class="depth-tag">' . c_esc($row['pump_depth']) . 'm</span>' : '<span class="td-muted">—</span>' ?></td>
                                        <td class="td-mono hide-mobile"><?= $row['borehole_meters'] ? c_esc($row['borehole_meters']) . 'm' : '—' ?></td>
                                        <td class="td-mono"><?= $row['cable_meters'] ? c_esc($row['cable_meters']) . 'm' : '—' ?></td>
                                        <td class="td-mono"><?= $row['hdpe_meters']  ? c_esc($row['hdpe_meters'])  . 'm' : '—' ?></td>
                                        <td class="td-muted hide-mobile"><?= c_esc($row['water_flow'] ?? '—') ?></td>
                                        <td class="td-muted hide-mobile"><?= c_esc($row['installed_by'] ?? '—') ?></td>
                                        <td><?= $status_pill ?></td>
                                        <td class="td-muted hide-mobile"><?= c_esc(substr($row['date_created'] ?? '', 0, 10)) ?></td>
                                    </tr>
                                <?php endforeach; endif; ?>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div><!-- /view-all-installs -->

    </div><!-- /views -->

</div><!-- /shell -->

<script>
const USER_ID = <?= $user_id ?>;
const TEAM_ID = <?= $team_id ?>;
const TICK = { color:'#1a3a6e', font:{ family:'DM Sans', size:11 } };
const TT   = { backgroundColor:'#fff', borderColor:'#d0daea', borderWidth:1,
               titleColor:'#0f1e3d', bodyColor:'#6b7fa8', padding:10 };

// ── TAB SWITCHER ──────────────────────────────────────────
document.querySelectorAll('.switcher-btn').forEach(btn => {
    btn.addEventListener('click', () => {
        document.querySelectorAll('.switcher-btn').forEach(b => b.classList.remove('active'));
        document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
        btn.classList.add('active');
        document.getElementById('view-' + btn.dataset.view).classList.add('active');
    });
});

// ── DRIVER: METERS THIS MONTH ─────────────────────────────
fetch(`/app/dashboard/ajax/meters_month.ajax.php?user_id=${USER_ID}`)
    .then(r => r.text())
    .then(csv => {
        const values = csv.split(',').map(Number);
        const total  = values.reduce((a,b) => a+b, 0);
        document.getElementById('meters-total').textContent = total.toLocaleString() + ' m';
        document.getElementById('meters-state').style.display = 'none';
        document.getElementById('meters-chart-wrap').style.display = 'block';
        new Chart(document.getElementById('driverMetersChart'), {
            type: 'bar',
            data: {
                labels: ['RIEMING','DRILLING','CASING','BLASTING'],
                datasets:[{
                    data: values,
                    backgroundColor:['rgba(26,86,196,0.85)','rgba(232,114,10,0.85)',
                                     'rgba(26,86,196,0.45)','rgba(232,114,10,0.45)'],
                    borderColor:['#1a56c4','#e8720a','#1a56c4','#e8720a'],
                    borderWidth:2, borderRadius:5, borderSkipped:'bottom'
                }]
            },
            options:{ responsive:true, maintainAspectRatio:false,
                plugins:{ legend:{display:false}, tooltip:{...TT, callbacks:{ label:c=>` ${c.parsed.y.toLocaleString()} m` }}},
                scales:{ x:{grid:{display:false},ticks:TICK}, y:{beginAtZero:true,grid:{color:'rgba(26,86,196,0.08)'},ticks:TICK} }
            }
        });
    });

// ── DRIVER: BIT TABLES ────────────────────────────────────
fetchBits(`/app/dashboard/ajax/bit_meters.ajax.php?type=DRILLING+BIT&user_id=${USER_ID}`, 'drill-bits-body', 'drill-bits-count');
fetchBits(`/app/dashboard/ajax/bit_meters.ajax.php?type=RIEMING+BIT&user_id=${USER_ID}`,  'riem-bits-body',  'riem-bits-count');

function fetchBits(url, bodyId, countId) {
    fetch(url).then(r => r.json()).then(rows => {
        document.getElementById(countId).textContent = rows.length + ' bits';
        const body = document.getElementById(bodyId);
        if (!rows.length) { body.innerHTML='<tr><td colspan="2" class="td-muted" style="text-align:center;padding:16px">No data</td></tr>'; return; }
        body.innerHTML = rows.map(r => `<tr>
            <td class="td-mono">${esc(r.serial)}</td>
            <td><strong>${r.meters.toLocaleString()}</strong> <span class="td-muted">m</span></td>
        </tr>`).join('');
    });
}

// ── INSTALL: CABLE & HDPE CHART ───────────────────────────
new Chart(document.getElementById('installMetersChart'), {
    type: 'bar',
    data: {
        labels: ['Cable Meters', 'HDPE Meters'],
        datasets:[{
            data: [<?= $meters['cable'] ?>, <?= $meters['hdpe'] ?>],
            backgroundColor:['rgba(26,86,196,0.85)','rgba(232,114,10,0.85)'],
            borderColor:['#1a56c4','#e8720a'],
            borderWidth:2, borderRadius:6, borderSkipped:'bottom',
            barPercentage: 0.45
        }]
    },
    options:{ responsive:true, maintainAspectRatio:false,
        plugins:{ legend:{display:false}, tooltip:{...TT, callbacks:{ label:c=>` ${c.parsed.y.toLocaleString()} meters` }}},
        scales:{
            x:{ grid:{display:false}, ticks:TICK },
            y:{ beginAtZero:true, grid:{color:'rgba(26,86,196,0.08)'}, border:{dash:[4,4]},
                ticks:{...TICK, callback: v => v.toLocaleString()+'m'} }
        }
    }
});

// ── SEARCH ────────────────────────────────────────────────
function filterTable(input, tbodyId) {
    const q = input.value.toLowerCase();
    document.querySelectorAll('#' + tbodyId + ' tr:not(.empty-state)').forEach(row => {
        row.classList.toggle('hidden-row', !row.textContent.toLowerCase().includes(q));
    });
}

function filterInstalls() {
    const q      = document.getElementById('installs-search').value.toLowerCase();
    const status = document.getElementById('installs-status-filter').value;
    document.querySelectorAll('#installs-all-tbody tr').forEach(row => {
        const matchQ = !q || row.dataset.search.includes(q);
        const matchS = status === '' || row.dataset.status === status;
        row.classList.toggle('hidden-row', !(matchQ && matchS));
    });
}

function filterStockView(input) {
    const q = input.value.toLowerCase();
    document.querySelectorAll('#stock-view-tbody tr:not(.empty-state)').forEach(row => {
        row.classList.toggle('hidden-row', q && !row.dataset.search.includes(q));
    });
}

function esc(s) {
    return String(s ?? '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
}
</script>
</body>
</html>