<?php
// dashboards/admin.php — included by dashboard.php (session already started)
include $_SERVER['DOCUMENT_ROOT'] . "/app/dashboard/classes/dashboard.class.php";
$username = $_SESSION['username'] ?? 'Admin';

$db   = new db_safeguard();
$dash = new DashboardData($db);

// ── DATA ──────────────────────────────────────────────────
$team_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_installs    = $dash->allInstallations();
$all_repairs     = $dash->allRepairs();
$all_jobcards    = $dash->allJobcards();

// ── INSTALL VIEW DATA (all teams, no filter) ──────────────
$install_meters  = $dash->installMetersThisMonth(0);
$install_stats   = $dash->installSummaryStats(0);
$active_installs = $dash->activeInstallations(0);
$active_repairs  = $dash->activeRepairs(0);

function a_esc($s) { return htmlspecialchars($s ?? '', ENT_QUOTES, 'UTF-8'); }
function c_esc($s) { return htmlspecialchars($s ?? '', ENT_QUOTES, 'UTF-8'); }
function c_pill($s) {
    $s = trim($s ?? '');
    if (!$s) return '<span style="display:inline-block;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:700;background:var(--blue-light);color:var(--blue)">Open</span>';
    return '<span style="display:inline-block;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:700;background:var(--blue-light);color:var(--blue)">' . 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>Admin 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;
            --green:      #16a34a;
            --green-lt:   #dcfce7;
            --red:        #dc2626;
            --red-lt:     #fee2e2;
            --amber:      #d97706;
            --amber-lt:   #fef3c7;
            --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); position: sticky; top: 0; z-index: 20; }
        .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-size: 12px; font-weight: 600;
            cursor: pointer; text-decoration: none; transition: background .2s; }
        .btn-refresh:hover { background: rgba(255,255,255,.22); }

        /* ── SWITCHER ── */
        .switcher { display: flex; align-items: center; background: var(--white);
            border-bottom: 1px solid var(--border); padding: 0 16px;
            overflow-x: auto; flex-shrink: 0; }
        .switcher::-webkit-scrollbar { display: none; }
        .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; flex-shrink: 0;
            border-bottom: 2px solid transparent; margin-bottom: -1px;
            transition: color .2s, border-color .2s; white-space: nowrap; }
        .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; }
        .sw-count-red { background: var(--red-lt) !important; color: var(--red) !important; }
        .switcher-btn.active .sw-count-red { background: var(--red) !important; color: #fff !important; }

        /* ── VIEWS ── */
        .views { overflow: hidden; height: 100%; }
        .view  { display: none; height: 100%; }
        .view.active { display: block; }

        /* ── GRIDS ── */
        .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; }

        .metrics-grid { display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            gap: 12px; padding: 12px; height: 100%; overflow: hidden; }

        /* ── 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-overdue::before { background: linear-gradient(90deg, var(--red), var(--orange)); }
        .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); }
        .panel-overdue .panel-label { color: var(--red); }
        .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-red { background: var(--red-lt) !important; border-color: #fca5a5 !important; color: var(--red) !important; }
        .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; }

        /* ── TABLE ── */
        .tbl-wrap { flex: 1; overflow-y: auto; overflow-x: auto; -webkit-overflow-scrolling: touch; }
        .tbl-wrap::-webkit-scrollbar { width: 4px; }
        .tbl-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
        table { width: 100%; border-collapse: collapse; min-width: 360px; }
        thead th { position: sticky; top: 0; padding: 7px 10px; font-size: 10px; font-weight: 700;
            text-transform: uppercase; letter-spacing: 1px; text-align: left; border-bottom: 1px solid var(--border); }
        th.blue-head { background: var(--blue-light); color: var(--blue); }
        th.red-head  { background: var(--red-lt);     color: var(--red); }
        tbody tr { border-bottom: 1px solid var(--border); transition: background .15s; }
        tbody tr:hover { background: var(--blue-light); }
        .panel-overdue tbody tr:hover { background: #fff5f5; }
        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; }
        .empty-state td { text-align: center; padding: 32px; color: var(--muted); font-style: italic; }

        /* ── TEAM SECTIONS (job counts) ── */
        .team-scroll { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
        .team-scroll::-webkit-scrollbar { width: 4px; }
        .team-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
        .team-section { border: 1px solid var(--border); border-radius: 6px;
            padding: 10px 12px; background: var(--bg); transition: border-color .15s; }
        .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: 22px; line-height: 1; }
        .cnt-blue   { color: var(--blue); }
        .cnt-orange { color: var(--orange); }
        .cnt-purple { color: #7e22ce; }
        .team-bar-row { display: flex; align-items: center; gap: 8px; }
        .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; transition: width .5s ease; }
        .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; }
        .cnt-n { color: var(--blue); }
        .cnt-i { color: var(--orange); }
        .cnt-r { color: #9333ea; }
        .team-done-note { font-size: 10px; color: var(--muted); margin-top: 5px; font-family: 'DM Mono'; }

        /* ── DAYS BADGE ── */
        .days-badge { font-family: 'DM Mono'; font-size: 11px; font-weight: 700;
            padding: 2px 7px; border-radius: 6px; white-space: nowrap; }
        .days-warning { background: var(--amber-lt); color: var(--amber); }
        .days-danger  { background: var(--red-lt);   color: var(--red); }

        /* ── ACTION TYPE PILL (metrics) ── */
        .type-pill { display: inline-block; padding: 2px 8px; border-radius: 20px;
            font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
        .type-pill.drill    { background: #dbeafe; color: #1d4ed8; }
        .type-pill.rieming  { background: #ffedd5; color: #c2410c; }
        .type-pill.casing   { background: var(--green-lt); color: var(--green); }
        .type-pill.blasting { background: var(--amber-lt); color: var(--amber); }
        .type-pill.other    { background: #f1f5f9; color: #64748b; }

        /* ── INSTALL VIEW GRID ── */
        .install-grid { display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            gap: 12px; padding: 12px; height: 100%; overflow: hidden; }
        .install-grid .span2 { grid-column: span 2; }

        /* chart */
        .panel-chart .chart-wrap { flex: 1; position: relative; min-height: 0; }
        .panel-chart canvas { position: absolute; inset: 0; }

        /* stat cards */
        .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); }

        /* search bar */
        .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); }

        /* install-specific */
        .badge-orange { background: var(--orange-lt) !important; border-color: #fed7aa !important; color: var(--orange) !important; }
        .pill-repair  { display: inline-block; padding: 2px 8px; border-radius: 20px;
            font-size: 10px; font-weight: 700; text-transform: uppercase;
            background: var(--orange-lt); color: var(--orange); }
        .depth-tag { font-family: 'DM Mono'; font-size: 11px; font-weight: 600; color: var(--blue-mid); }
        .td-clip { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

        /* responsive for install grid */
        @media (max-width: 1023px) {
            .install-grid { display: flex; flex-direction: column; height: auto; overflow: visible; }
            .install-grid .span2 { grid-column: unset; }
        }
        .state-idle { display: flex; flex-direction: column; align-items: center;
            justify-content: center; height: 100%; gap: 8px; color: var(--muted); }
        .pulse { display: inline-block; width: 8px; height: 8px; background: var(--orange);
            border-radius: 50%; animation: pulse 1.2s ease-in-out infinite; }
        @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.6)} }

        /* ── RESPONSIVE ── */
        @media (max-width: 1023px) {
            .shell { grid-template-rows: 52px 40px auto; height: auto; }
            .views, .view { height: auto; overflow: visible; }
            .view.active { display: block; }
            .jobs-grid, .metrics-grid {
                display: flex; flex-direction: column; height: auto; overflow: visible; }
            .jobs-grid .span3 { grid-column: unset; }
            .panel { min-height: 260px; }
            .chart-wrap { min-height: 200px; }
            .tbl-wrap, .team-scroll { max-height: 300px; }
        }
        @media (max-width: 767px) {
            .switcher { padding: 0 8px; }
            .switcher-btn { padding: 0 10px; font-size: 10px; }
            .page-title { font-size: 16px; }
            .divider-v, .role-badge, .user-name { display: none; }
        }

        /* ── 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">ADMIN <span>DASHBOARD</span></span>
            <div class="divider-v"></div>
            <span class="role-badge">Admin</span>
            <span class="user-name"><?= a_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>

    <!-- TABS -->
    <nav class="switcher">

        <!-- ① JOBS — default active -->
        <button class="switcher-btn active" 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"/></svg>
            Jobs
            <?php $total_open = array_sum(array_column($team_counts, 'total_open')); ?>
            <span class="sw-count"><?= $total_open ?></span>
        </button>

        <!-- ② OVERDUE -->
        <button class="switcher-btn" data-view="overdue">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
            Overdue
            <span class="sw-count <?= count($overdue_all) > 0 ? 'sw-count-red' : '' ?>"><?= count($overdue_all) ?></span>
        </button>

        <!-- ③ METRICS -->
        <button class="switcher-btn" data-view="metrics">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
            Metrics
        </button>

        <!-- ④ ACTIVE INSTALLS -->
        <button class="switcher-btn" data-view="active-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>
            Active Installs
            <span class="sw-count"><?= count($active_installs) + count($active_repairs) ?></span>
        </button>

        <!-- ⑤ ALL INSTALL RECORDS -->
        <button class="switcher-btn" data-view="installs">
            <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"/></svg>
            All Records
            <span class="sw-count"><?= count($all_installs) + count($all_repairs) + count($all_jobcards) ?></span>
        </button>

    </nav>

    <div class="views">

        <!-- ══════════════════════════════════════
             ① JOBS TAB — default view
        ══════════════════════════════════════ -->
        <div class="view active" 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_counts, 'normal_open')) ?> open</span>
                    </div>
                    <div class="panel-body-flush">
                        <div class="team-scroll">
                        <?php if (empty($team_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_counts) ?: [1]);
                            foreach ($team_counts as $t):
                                $total    = $t['normal_open'] + $t['normal_done'];
                                $bar_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">
                                    <?= a_esc($t['team']) ?>
                                    <span class="team-open-count cnt-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:<?= $bar_pct ?>%"></div></div>
                                    <span class="bar-count cnt-n"><?= $t['normal_open'] ?></span>
                                </div>
                                <div class="team-done-note"><?= $t['normal_done'] ?> done &middot; <?= $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_counts, 'install_open')) ?> open</span>
                    </div>
                    <div class="panel-body-flush">
                        <div class="team-scroll">
                        <?php if (empty($team_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_counts) ?: [1]);
                            foreach ($team_counts as $t):
                                $total    = $t['install_open'] + $t['install_done'];
                                $bar_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">
                                    <?= a_esc($t['team']) ?>
                                    <span class="team-open-count cnt-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:<?= $bar_pct ?>%"></div></div>
                                    <span class="bar-count cnt-i"><?= $t['install_open'] ?></span>
                                </div>
                                <div class="team-done-note"><?= $t['install_done'] ?> done &middot; <?= $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_counts, 'repair_open')) ?> open</span>
                    </div>
                    <div class="panel-body-flush">
                        <div class="team-scroll">
                        <?php if (empty($team_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_counts) ?: [1]);
                            foreach ($team_counts as $t):
                                $total    = $t['repair_open'] + $t['repair_done'];
                                $bar_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">
                                    <?= a_esc($t['team']) ?>
                                    <span class="team-open-count cnt-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:<?= $bar_pct ?>%"></div></div>
                                    <span class="bar-count cnt-r"><?= $t['repair_open'] ?></span>
                                </div>
                                <div class="team-done-note"><?= $t['repair_done'] ?> done &middot; <?= $done_pct ?>% complete</div>
                            </div>
                        <?php endforeach; endif; ?>
                        </div>
                    </div>
                </div>

                <!-- Overdue summary — 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 class="red-head">Type</th>
                                        <th class="red-head">JC #</th>
                                        <th class="red-head hide-mobile">Team</th>
                                        <th class="red-head">Days Open</th>
                                    </tr>
                                </thead>
                                <tbody>
                                <?php if (empty($overdue_all)): ?>
                                    <tr><td colspan="4" style="text-align:center;padding:24px;color:var(--muted);font-style:italic">
                                        ✓ No jobcards overdue — everything is within 5 days
                                    </td></tr>
                                <?php else:
                                    $type_styles = [
                                        'Normal'  => 'background:var(--blue-light);color:var(--blue)',
                                        'Install' => 'background:var(--orange-lt);color:var(--orange)',
                                        'Repair'  => 'background:#f3e8ff;color:#7e22ce',
                                    ];
                                    foreach ($overdue_all as $r):
                                        $d      = (int) $r['days_open'];
                                        $dcls   = $d >= 14 ? 'days-danger' : 'days-warning';
                                        $tstyle = $type_styles[$r['job_type']] ?? '';
                                ?>
                                    <tr>
                                        <td>
                                            <span style="display:inline-block;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:700;text-transform:uppercase;<?= $tstyle ?>">
                                                <?= a_esc($r['job_type']) ?>
                                            </span>
                                        </td>
                                        <td class="td-mono"><strong>#<?= a_esc($r['jc_no']) ?></strong></td>
                                        <td class="td-muted hide-mobile"><?= a_esc($r['team_name'] ?? '—') ?></td>
                                        <td><span class="days-badge <?= $dcls ?>"><?= $d ?>d</span></td>
                                    </tr>
                                <?php endforeach; endif; ?>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

            </div>
        </div><!-- /view-jobs -->

        <!-- ══════════════════════════════════════
             ② OVERDUE TAB — drilled down by type
        ══════════════════════════════════════ -->
        <div class="view" id="view-overdue">
            <div class="jobs-grid">

                <!-- Normal overdue -->
                <div class="panel panel-overdue">
                    <div class="panel-head">
                        <span class="panel-label">⚠ Normal Jobcards</span>
                        <span class="badge badge-red"><?= count($overdue_normal) ?></span>
                    </div>
                    <div class="panel-body-flush">
                        <div class="tbl-wrap">
                            <table>
                                <thead><tr>
                                    <th class="red-head">JC #</th>
                                    <th class="red-head hide-mobile">Team</th>
                                    <th class="red-head">Days</th>
                                </tr></thead>
                                <tbody>
                                <?php if (empty($overdue_normal)): ?>
                                    <tr class="empty-state"><td colspan="3">No overdue normal jobcards ✓</td></tr>
                                <?php else: foreach ($overdue_normal as $r):
                                    $d = (int)$r['days_open']; $dc = $d >= 14 ? 'days-danger' : 'days-warning';
                                ?>
                                    <tr>
                                        <td class="td-mono"><strong>#<?= a_esc($r['jc_no']) ?></strong></td>
                                        <td class="td-muted hide-mobile"><?= a_esc($r['team_name'] ?? '—') ?></td>
                                        <td><span class="days-badge <?= $dc ?>"><?= $d ?>d</span></td>
                                        <td><?= $sn ? '<span style="display:inline-block;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:700;background:var(--blue-light);color:var(--blue)">'.a_esc($sn).'</span>' : '<span class="td-muted">—</span>' ?></td>
                                    </tr>
                                <?php endforeach; endif; ?>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Install overdue -->
                <div class="panel panel-overdue">
                    <div class="panel-head">
                        <span class="panel-label">⚠ Install Jobcards</span>
                        <span class="badge badge-red"><?= count($overdue_install) ?></span>
                    </div>
                    <div class="panel-body-flush">
                        <div class="tbl-wrap">
                            <table>
                                <thead><tr>
                                    <th class="red-head">JC #</th>
                                    <th class="red-head hide-mobile">Team</th>
                                    <th class="red-head">Days</th>
                                </tr></thead>
                                <tbody>
                                <?php if (empty($overdue_install)): ?>
                                    <tr class="empty-state"><td colspan="3">No overdue install jobcards ✓</td></tr>
                                <?php else: foreach ($overdue_install as $r):
                                    $d = (int)$r['days_open']; $dc = $d >= 14 ? 'days-danger' : 'days-warning';
                                ?>
                                    <tr>
                                        <td class="td-mono"><strong>#<?= a_esc($r['jc_no']) ?></strong></td>
                                        <td class="td-muted hide-mobile"><?= a_esc($r['team_name'] ?? '—') ?></td>
                                        <td><span class="days-badge <?= $dc ?>"><?= $d ?>d</span></td>
                                        <td><?= $si ? '<span style="display:inline-block;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:700;background:var(--blue-light);color:var(--blue)">'.a_esc($si).'</span>' : '<span class="td-muted">—</span>' ?></td>
                                    </tr>
                                <?php endforeach; endif; ?>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Repair overdue -->
                <div class="panel panel-overdue">
                    <div class="panel-head">
                        <span class="panel-label">⚠ Repair Jobcards</span>
                        <span class="badge badge-red"><?= count($overdue_repair) ?></span>
                    </div>
                    <div class="panel-body-flush">
                        <div class="tbl-wrap">
                            <table>
                                <thead><tr>
                                    <th class="red-head">JC #</th>
                                    <th class="red-head hide-mobile">Team</th>
                                    <th class="red-head">Days</th>
                                </tr></thead>
                                <tbody>
                                <?php if (empty($overdue_repair)): ?>
                                    <tr class="empty-state"><td colspan="3">No overdue repair jobcards ✓</td></tr>
                                <?php else: foreach ($overdue_repair as $r):
                                    $d = (int)$r['days_open']; $dc = $d >= 14 ? 'days-danger' : 'days-warning';
                                ?>
                                    <tr>
                                        <td class="td-mono"><strong>#<?= a_esc($r['jc_no']) ?></strong></td>
                                        <td class="td-muted hide-mobile"><?= a_esc($r['team_name'] ?? '—') ?></td>
                                        <td><span class="days-badge <?= $dc ?>"><?= $d ?>d</span></td>
                                        <td><?= $sr ? '<span style="display:inline-block;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:700;background:var(--blue-light);color:var(--blue)">'.a_esc($sr).'</span>' : '<span class="td-muted">—</span>' ?></td>
                                    </tr>
                                <?php endforeach; endif; ?>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- placeholder to fill bottom row -->
                <div class="panel span3" style="min-height:0;padding:0;">
                    <div class="panel-head">
                        <span class="panel-label">Summary</span>
                    </div>
                    <div class="panel-body" style="flex-direction:row;gap:24px;align-items:center;justify-content:center;flex-wrap:wrap;">
                        <div style="text-align:center">
                            <div style="font-family:'Bebas Neue';font-size:48px;color:var(--blue);line-height:1"><?= count($overdue_normal) ?></div>
                            <div style="font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--muted)">Normal</div>
                        </div>
                        <div style="width:1px;height:48px;background:var(--border)"></div>
                        <div style="text-align:center">
                            <div style="font-family:'Bebas Neue';font-size:48px;color:var(--orange);line-height:1"><?= count($overdue_install) ?></div>
                            <div style="font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--muted)">Install</div>
                        </div>
                        <div style="width:1px;height:48px;background:var(--border)"></div>
                        <div style="text-align:center">
                            <div style="font-family:'Bebas Neue';font-size:48px;color:#7e22ce;line-height:1"><?= count($overdue_repair) ?></div>
                            <div style="font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--muted)">Repair</div>
                        </div>
                        <div style="width:1px;height:48px;background:var(--border)"></div>
                        <div style="text-align:center">
                            <div style="font-family:'Bebas Neue';font-size:48px;color:var(--red);line-height:1"><?= count($overdue_all) ?></div>
                            <div style="font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--muted)">Total Overdue</div>
                        </div>
                    </div>
                </div>

            </div>
        </div><!-- /view-overdue -->

        <!-- ══════════════════════════════════════
             ③ METRICS TAB — meters, last actions, bits
        ══════════════════════════════════════ -->
        <div class="view" id="view-metrics">
            <div class="metrics-grid">

                <div class="panel panel-chart">
                    <div class="panel-head">
                        <span class="panel-label">Meters This Month — All Teams</span>
                        <span class="badge" id="meters-total">Loading…</span>
                    </div>
                    <div class="panel-body">
                        <div id="meters-state" class="state-idle"><span class="pulse"></span></div>
                        <div class="chart-wrap" id="meters-chart-wrap" style="display:none">
                            <canvas id="metersChart"></canvas>
                        </div>
                    </div>
                </div>

                <div class="panel">
                    <div class="panel-head">
                        <span class="panel-label">Last Action Per Team</span>
                        <span class="badge" id="teams-count">—</span>
                    </div>
                    <div class="panel-body-flush">
                        <div class="tbl-wrap">
                            <table>
                                <thead><tr>
                                    <th class="blue-head">Team</th>
                                    <th class="blue-head">Last Action</th>
                                    <th class="blue-head hide-mobile">Jobcard</th>
                                    <th class="blue-head hide-mobile">Time</th>
                                </tr></thead>
                                <tbody id="last-actions-body">
                                    <tr><td colspan="4" style="text-align:center;padding:20px"><span class="pulse"></span></td></tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="panel">
                    <div class="panel-head">
                        <span class="panel-label">Meters Per Drilling Bit</span>
                        <span class="badge" id="drill-bits-count">—</span>
                    </div>
                    <div class="panel-body-flush">
                        <div class="tbl-wrap">
                            <table>
                                <thead><tr><th class="blue-head">Bit Serial</th><th class="blue-head">Total Meters</th></tr></thead>
                                <tbody id="drill-bits-body">
                                    <tr><td colspan="2" style="text-align:center;padding:20px"><span class="pulse"></span></td></tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="panel">
                    <div class="panel-head">
                        <span class="panel-label">Meters Per Rieming Bit</span>
                        <span class="badge" id="riem-bits-count">—</span>
                    </div>
                    <div class="panel-body-flush">
                        <div class="tbl-wrap">
                            <table>
                                <thead><tr><th class="blue-head">Bit Serial</th><th class="blue-head">Total Meters</th></tr></thead>
                                <tbody id="riem-bits-body">
                                    <tr><td colspan="2" style="text-align:center;padding:20px"><span class="pulse"></span></td></tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

            </div>
        </div><!-- /view-metrics -->

        <!-- ══════════════════════════════════════
             ④ ACTIVE INSTALLS TAB
        ══════════════════════════════════════ -->
        <div class="view" id="view-active-install">
            <div class="install-grid">

                <!-- Cable & HDPE meters chart -->
                <div class="panel panel-chart span2">
                    <div class="panel-head">
                        <span class="panel-label">Cable &amp; HDPE Meters — This Month (All Teams)</span>
                        <span class="badge"><?= number_format($install_meters['cable'] + $install_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"><?= $install_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"><?= $install_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"><?= $install_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($active_installs) ?> open</span>
                    </div>
                    <div class="panel-body-flush">
                        <div class="search-bar">
                            <input type="text" class="search-input"
                                   placeholder="Search client, area, jobcard, pack no…"
                                   oninput="filterTable(this,'admin-installs-tbody')">
                        </div>
                        <div class="tbl-wrap">
                            <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">Team</th>
                                        <th class="blue-head hide-mobile">Pack No</th>
                                        <th class="blue-head hide-mobile">Depth</th>
                                        <th class="blue-head hide-mobile">Cable m</th>
                                        <th class="blue-head hide-mobile">HDPE m</th>
                                        <th class="blue-head">Status</th>
                                    </tr>
                                </thead>
                                <tbody id="admin-installs-tbody">
                                <?php if (empty($active_installs)): ?>
                                    <tr class="empty-state"><td colspan="9">No active installations</td></tr>
                                <?php else: foreach ($active_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 hide-mobile"><?= c_esc($row['area'] ?? '—') ?></td>
                                        <td class="td-muted hide-mobile"><?= c_esc($row['team_name'] ?? '—') ?></td>
                                        <td class="td-mono hide-mobile"><?= c_esc($row['pack_no'] ?? '—') ?></td>
                                        <td class="hide-mobile"><?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 hide-mobile"><?= $row['cable_meters'] ? c_esc($row['cable_meters']).'m' : '—' ?></td>
                                        <td class="td-mono hide-mobile"><?= $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($active_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,'admin-repairs-tbody')">
                        </div>
                        <div class="tbl-wrap">
                            <table>
                                <thead>
                                    <tr>
                                        <th class="blue-head">JC No</th>
                                        <th class="blue-head">Client Type</th>
                                        <th class="blue-head hide-mobile">Team</th>
                                        <th class="blue-head hide-mobile">Address</th>
                                        <th class="blue-head">Status</th>
                                    </tr>
                                </thead>
                                <tbody id="admin-repairs-tbody">
                                <?php if (empty($active_repairs)): ?>
                                    <tr class="empty-state"><td colspan="5">No active repairs</td></tr>
                                <?php else: foreach ($active_repairs as $row): ?>
                                    <tr>
                                        <td class="td-mono"><strong><?= c_esc($row['jobcard_no']) ?></strong></td>
                                        <td><span class="pill-repair"><?= c_esc($row['client_type'] ?? '—') ?></span></td>
                                        <td class="td-muted hide-mobile"><?= c_esc($row['team_name'] ?? '—') ?></td>
                                        <td class="td-muted td-clip hide-mobile"><?= 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-active-install -->

        <!-- ══════════════════════════════════════
             ⑤ ALL RECORDS TAB — installs, repairs, jobcards
        ══════════════════════════════════════ -->
        <div class="view" id="view-installs">
            <div style="display:flex;flex-direction:column;gap:0;padding:12px;height:100%;overflow:hidden;">

                <!-- Sub-tab bar -->
                <div style="display:flex;align-items:center;gap:0;background:var(--white);border:1px solid var(--border);border-bottom:none;border-radius:var(--radius) var(--radius) 0 0;overflow-x:auto;scrollbar-width:none;flex-shrink:0;">
                    <button class="rec-tab-btn active" data-rec="installs" onclick="switchRecTab(this)" style="display:flex;align-items:center;gap:7px;padding:10px 20px;font-size:20px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--blue);border:none;background:none;cursor:pointer;border-bottom:2px solid var(--blue);white-space:nowrap;flex-shrink:0;">
                        Installations
                        <span style="background:var(--blue);color:#fff;font-size:10px;padding:1px 7px;border-radius:20px;font-weight:700;"><?= count($all_installs) ?></span>
                    </button>
                    <button class="rec-tab-btn" data-rec="repairs" onclick="switchRecTab(this)" style="display:flex;align-items:center;gap:7px;padding:10px 20px;font-size:20px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--muted);border:none;background:none;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;flex-shrink:0;">
                        Repairs
                        <span style="background:var(--orange-lt);color:var(--orange);font-size:10px;padding:1px 7px;border-radius:20px;font-weight:700;"><?= count($all_repairs) ?></span>
                    </button>
                    <button class="rec-tab-btn" data-rec="jobcards" onclick="switchRecTab(this)" style="display:flex;align-items:center;gap:7px;padding:10px 20px;font-size:20px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--muted);border:none;background:none;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;flex-shrink:0;">
                        Jobcards
                        <span style="background:var(--blue-light);color:var(--blue);font-size:10px;padding:1px 7px;border-radius:20px;font-weight:700;"><?= count($all_jobcards) ?></span>
                    </button>
                    <span id="records-count" style="margin-left:auto;padding:0 16px;font-family:'DM Mono';font-size:15px;color:var(--muted);white-space:nowrap;align-self:center;"><?= count($all_installs) ?> records</span>
                </div>

                <!-- Container -->
                <div style="flex:1;overflow:hidden;border:1px solid var(--border);border-radius:0 0 var(--radius) var(--radius);background:var(--white);display:flex;flex-direction:column;">

                    <!-- Shared 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="records-search" class="search-input" style="flex:1;min-width:160px;"
                               placeholder="Search jobcard, client, address, team…" oninput="filterRecords()">
                        <select id="records-status-filter" class="filter-select" onchange="filterRecords()">
                            <option value="">All statuses</option>
                            <option value="0">Open</option>
                            <option value="1">Completed</option>
                        </select>
                        <select id="records-team-filter" class="filter-select" onchange="filterRecords()">
                            <option value="">All teams</option>
                            <?php
                            $all_teams_seen = [];
                            foreach (array_merge($all_installs, $all_repairs, $all_jobcards) as $r) {
                                $tn = $r['team_name'] ?? '';
                                if ($tn && !in_array($tn, $all_teams_seen)) $all_teams_seen[] = $tn;
                            }
                            sort($all_teams_seen);
                            foreach ($all_teams_seen as $tn):
                            ?><option value="<?= a_esc($tn) ?>"><?= a_esc($tn) ?></option><?php endforeach; ?>
                        </select>
                    </div>

                    <!-- INSTALLATIONS -->
                    <div class="rec-panel" id="rec-installs" style="flex:1;overflow:hidden;display:flex;flex-direction:column;">
                        <div class="tbl-wrap">
                            <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">Team</th>
                                    <th class="blue-head hide-mobile">Depth</th><th class="blue-head hide-mobile">Cable m</th>
                                    <th class="blue-head hide-mobile">HDPE m</th><th class="blue-head hide-mobile">Pack No</th>
                                    <th class="blue-head hide-mobile">Installed By</th><th class="blue-head hide-mobile">Date</th>
                                    <th class="blue-head">Status</th>
                                </tr></thead>
                                <tbody id="tbody-installs">
                                <?php if (empty($all_installs)): ?>
                                    <tr><td colspan="11" style="text-align:center;padding:32px;color:var(--muted);font-style:italic">No installations found</td></tr>
                                <?php else: foreach ($all_installs as $r):
                                    $done=$r['status']==1;$slbl=$r['jc_current_status']?:($done?'Completed':'Open');
                                    $ss=$done?'background:#dcfce7;color:#15803d':'background:var(--blue-light);color:var(--blue)';
                                ?>
                                    <tr class="rec-row" data-type="installs"
                                        data-search="<?= a_esc(strtolower(($r['jobcard_no']??'').' '.($r['client_name']??'').' '.($r['area']??'').' '.($r['team_name']??''))) ?>"
                                        data-status="<?= (int)$r['status'] ?>" data-team="<?= a_esc($r['team_name']??'') ?>">
                                        <td class="td-mono"><strong><?= a_esc($r['jobcard_no']) ?></strong></td>
                                        <td><?= a_esc($r['client_name']??'—') ?></td>
                                        <td class="td-muted hide-mobile"><?= a_esc($r['area']??'—') ?></td>
                                        <td class="td-muted hide-mobile"><?= a_esc($r['team_name']??'—') ?></td>
                                        <td class="hide-mobile"><?= $r['pump_depth']?'<span style="font-family:DM Mono;font-size:11px;font-weight:600;color:var(--blue-mid)">'.a_esc($r['pump_depth']).'m</span>':'—' ?></td>
                                        <td class="td-mono hide-mobile"><?= $r['cable_meters']?a_esc($r['cable_meters']).'m':'—' ?></td>
                                        <td class="td-mono hide-mobile"><?= $r['hdpe_meters']?a_esc($r['hdpe_meters']).'m':'—' ?></td>
                                        <td class="td-mono hide-mobile"><?= a_esc($r['pack_no']??'—') ?></td>
                                        <td class="td-muted hide-mobile"><?= a_esc($r['installed_by']??'—') ?></td>
                                        <td class="td-muted hide-mobile"><?= a_esc(substr($r['date_time_created']??'',0,10)) ?></td>
                                        <td><span style="display:inline-block;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:700;<?= $ss ?>"><?= a_esc($slbl) ?></span></td>
                                    </tr>
                                <?php endforeach;endif; ?>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- REPAIRS -->
                    <div class="rec-panel" id="rec-repairs" style="flex:1;overflow:hidden;display:none;flex-direction:column;">
                        <div class="tbl-wrap">
                            <table>
                                <thead><tr>
                                    <th class="blue-head">JC No</th><th class="blue-head hide-mobile">Client Type</th>
                                    <th class="blue-head">Address</th><th class="blue-head hide-mobile">Team</th>
                                    <th class="blue-head hide-mobile">Problem</th><th class="blue-head hide-mobile">Repaired By</th>
                                    <th class="blue-head hide-mobile">Date</th><th class="blue-head">Status</th>
                                </tr></thead>
                                <tbody id="tbody-repairs">
                                <?php if (empty($all_repairs)): ?>
                                    <tr><td colspan="8" style="text-align:center;padding:32px;color:var(--muted);font-style:italic">No repairs found</td></tr>
                                <?php else: foreach ($all_repairs as $r):
                                    $done=$r['status']==1;$slbl=$r['jc_current_status']?:($done?'Completed':'Open');
                                    $ss=$done?'background:#dcfce7;color:#15803d':'background:var(--orange-lt);color:var(--orange)';
                                ?>
                                    <tr class="rec-row" data-type="repairs"
                                        data-search="<?= a_esc(strtolower(($r['jobcard_no']??'').' '.($r['address']??'').' '.($r['team_name']??'').' '.($r['client_type']??''))) ?>"
                                        data-status="<?= (int)$r['status'] ?>" data-team="<?= a_esc($r['team_name']??'') ?>">
                                        <td class="td-mono"><strong><?= a_esc($r['jobcard_no']) ?></strong></td>
                                        <td class="hide-mobile"><span style="display:inline-block;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:700;background:var(--orange-lt);color:var(--orange)"><?= a_esc($r['client_type']??'—') ?></span></td>
                                        <td class="td-muted"><?= a_esc($r['address']??'—') ?></td>
                                        <td class="td-muted hide-mobile"><?= a_esc($r['team_name']??'—') ?></td>
                                        <td class="td-muted hide-mobile" style="max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"><?= a_esc($r['problem_description']??'—') ?></td>
                                        <td class="td-muted hide-mobile"><?= a_esc($r['repaired_by']??'—') ?></td>
                                        <td class="td-muted hide-mobile"><?= a_esc(substr($r['date_time_created']??'',0,10)) ?></td>
                                        <td><span style="display:inline-block;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:700;<?= $ss ?>"><?= a_esc($slbl) ?></span></td>
                                    </tr>
                                <?php endforeach;endif; ?>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- JOBCARDS -->
                    <div class="rec-panel" id="rec-jobcards" style="flex:1;overflow:hidden;display:none;flex-direction:column;">
                        <div class="tbl-wrap">
                            <table>
                                <thead><tr>
                                    <th class="blue-head">JC #</th><th class="blue-head">Client</th>
                                    <th class="blue-head hide-mobile">Address</th><th class="blue-head hide-mobile">Team</th>
                                    <th class="blue-head hide-mobile">Water Strike</th><th class="blue-head hide-mobile">Flow</th>
                                    <th class="blue-head hide-mobile">Comp Hrs</th><th class="blue-head hide-mobile">Date</th>
                                    <th class="blue-head">Status</th>
                                </tr></thead>
                                <tbody id="tbody-jobcards">
                                <?php if (empty($all_jobcards)): ?>
                                    <tr><td colspan="9" style="text-align:center;padding:32px;color:var(--muted);font-style:italic">No jobcards found</td></tr>
                                <?php else: foreach ($all_jobcards as $r):
                                    $done=$r['status']=='1'||$r['status']==1;
                                    $slbl=$r['jc_current_status']?:($done?'Completed':'Open');
                                    $ss=$done?'background:#dcfce7;color:#15803d':'background:var(--blue-light);color:var(--blue)';
                                ?>
                                    <tr class="rec-row" data-type="jobcards"
                                        data-search="<?= a_esc(strtolower(($r['jc_no']??'').' '.($r['client_name']??'').' '.($r['address']??'').' '.($r['team_name']??''))) ?>"
                                        data-status="<?= $done?'1':'0' ?>" data-team="<?= a_esc($r['team_name']??'') ?>">
                                        <td class="td-mono"><strong>#<?= a_esc($r['jc_no']) ?></strong></td>
                                        <td><?= a_esc($r['client_name']??'—') ?></td>
                                        <td class="td-muted hide-mobile"><?= a_esc($r['address']??'—') ?></td>
                                        <td class="td-muted hide-mobile"><?= a_esc($r['team_name']??'—') ?></td>
                                        <td class="td-mono hide-mobile"><?= $r['water_strike']?a_esc($r['water_strike']).'m':'—' ?></td>
                                        <td class="td-mono hide-mobile"><?= $r['water_flow']?a_esc($r['water_flow']).'l/h':'—' ?></td>
                                        <td class="td-mono hide-mobile"><?= $r['compressor_hours']?a_esc($r['compressor_hours']).'h':'—' ?></td>
                                        <td class="td-muted hide-mobile"><?= a_esc(substr($r['date_created']??'',0,10)) ?></td>
                                        <td><span style="display:inline-block;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:700;<?= $ss ?>"><?= a_esc($slbl) ?></span></td>
                                    </tr>
                                <?php endforeach;endif; ?>
                                </tbody>
                            </table>
                        </div>
                    </div>

                </div>
            </div>
        </div><!-- /view-installs -->

    </div><!-- /views -->
</div><!-- /shell -->

<script>
const TICK = { color:'#1a3a6e', font:{ family:'DM Sans', size:11 } };
const TT   = { backgroundColor:'#fff', borderColor:'#d0daea', borderWidth:1,
               titleColor:'#0f1e3d', bodyColor:'#6b7fa8', padding:10 };

// ── TABS ─────────────────────────────────────────────────
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');
    });
});

// ── METERS CHART (only fetched when Metrics tab opened) ───
let metersLoaded = false;
document.querySelector('[data-view="metrics"]').addEventListener('click', () => {
    if (metersLoaded) return;
    metersLoaded = true;
    fetch('/app/dashboard/ajax/meters_month.ajax.php')
        .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('metersChart'), {
                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 }
                    }
                }
            });

            // Last team actions
            fetch('/app/dashboard/ajax/last_team_actions.ajax.php')
                .then(r => r.json())
                .then(rows => {
                    document.getElementById('teams-count').textContent = rows.length;
                    const body = document.getElementById('last-actions-body');
                    if (!rows.length) { body.innerHTML='<tr><td colspan="4" style="text-align:center;padding:16px;color:#6b7fa8">No data</td></tr>'; return; }
                    body.innerHTML = rows.map(r => {
                        const t = (r.type||'').toUpperCase();
                        let cls = 'other';
                        if (t.includes('DRILL')) cls='drill';
                        else if (t.includes('RIEM')) cls='rieming';
                        else if (t.includes('CASI')) cls='casing';
                        else if (t.includes('BLAS')) cls='blasting';
                        const pill = `<span class="type-pill ${cls}">${esc(r.type||'—')}</span>`;
                        const dt   = (r.date_time||'') !== '-' ? (r.date_time||'').slice(0,16) : '—';
                        return `<tr>
                            <td><strong>${esc(r.team)}</strong></td>
                            <td>${pill}</td>
                            <td class="td-mono hide-mobile">${esc(r.jobcard_id)}</td>
                            <td class="td-muted hide-mobile">${esc(dt)}</td>
                        </tr>`;
                    }).join('');
                });

            // Bit tables
            fetchBits('/app/dashboard/ajax/bit_meters.ajax.php?type=DRILLING+BIT', 'drill-bits-body', 'drill-bits-count');
            fetchBits('/app/dashboard/ajax/bit_meters.ajax.php?type=RIEMING+BIT',  '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" style="text-align:center;padding:16px;color:#6b7fa8">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 FILTER ────────────────────────────────────────
// ── INSTALL METERS CHART ──────────────────────────────────
new Chart(document.getElementById('installMetersChart'), {
    type: 'bar',
    data: {
        labels: ['Cable Meters', 'HDPE Meters'],
        datasets:[{
            data: [<?= $install_meters['cable'] ?>, <?= $install_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'} }
        }
    }
});

// ── TABLE SEARCH FILTER ───────────────────────────────────
function filterTable(input, tbodyId) {
    const q = input.value.toLowerCase();
    document.querySelectorAll('#' + tbodyId + ' tr:not(.empty-state)').forEach(row => {
        row.classList.toggle('hidden-row', q && !row.textContent.toLowerCase().includes(q));
    });
}

// ── ALL RECORDS SUB-TABS ──────────────────────────────────
let currentRecTab = 'installs';

function switchRecTab(btn) {
    const rec = btn.dataset.rec;
    currentRecTab = rec;
    document.querySelectorAll('.rec-tab-btn').forEach(b => {
        const active = b.dataset.rec === rec;
        b.style.color        = active ? 'var(--blue)' : 'var(--muted)';
        b.style.borderBottom = active ? '2px solid var(--blue)' : '2px solid transparent';
    });
    document.querySelectorAll('.rec-panel').forEach(p => {
        p.style.display = p.id === 'rec-' + rec ? 'flex' : 'none';
    });
    const counts = { installs: <?= count($all_installs) ?>, repairs: <?= count($all_repairs) ?>, jobcards: <?= count($all_jobcards) ?> };
    document.getElementById('records-count').textContent = counts[rec] + ' records';
    filterRecords();
}

function filterRecords() {
    const q      = (document.getElementById('records-search')?.value || '').toLowerCase();
    const status = document.getElementById('records-status-filter')?.value || '';
    const team   = (document.getElementById('records-team-filter')?.value || '').toLowerCase();
    let count = 0;
    document.querySelectorAll('.rec-row').forEach(row => {
        if (row.dataset.type !== currentRecTab) return;
        const show = (!q || row.dataset.search.includes(q))
                  && (!status || row.dataset.status === status)
                  && (!team || (row.dataset.team||'').toLowerCase() === team);
        row.classList.toggle('hidden-row', !show);
        if (show) count++;
    });
    document.getElementById('records-count').textContent = count + ' records';
}


function filterInstalls() {
    const q      = document.getElementById('install-search').value.toLowerCase();
    const status = document.getElementById('install-status-filter').value;
    const team   = document.getElementById('install-team-filter').value.toLowerCase();
    let   count  = 0;

    document.querySelectorAll('.install-row').forEach(row => {
        const matchQ      = !q      || row.dataset.search.includes(q);
        const matchStatus = !status || row.dataset.status === status;
        const matchTeam   = !team   || row.dataset.team.toLowerCase() === team;
        const show        = matchQ && matchStatus && matchTeam;
        row.classList.toggle('hidden-row', !show);
        if (show) count++;
    });
    document.getElementById('install-count').textContent = count + ' records';
}

function esc(s) {
    return String(s ?? '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
}
</script>
</body>
</html>