<?php
// dashboards/dev.php — included by dashboard.php (session already started)
$username = $_SESSION['username'] ?? 'Dev';
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dev Dashboard</title>
    <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-light: #e8f0fd;
            --orange:     #e8720a;
            --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 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-logout { 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-logout:hover { background:rgba(255,255,255,.22); }

        /* MAIN */
        .main { display:flex; flex-direction:column; gap:0; padding:12px;
            overflow:hidden; height:100%; }

        /* PANEL */
        .panel { background:var(--white); border:1px solid var(--border);
            border-radius:var(--radius); display:flex; flex-direction:column;
            overflow:hidden; position:relative; flex:1; min-height:0;
            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; }

        /* TABS */
        .tab-bar { display:flex; align-items:stretch; gap:0;
            border-bottom:1px solid var(--border); padding:0 12px; flex-shrink:0; background:var(--white); }
        .tab-btn { display:flex; align-items:center; gap:7px; padding:10px 16px;
            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; }
        .tab-btn:hover { color:var(--blue); }
        .tab-btn.active { color:var(--blue); border-bottom-color:var(--blue); }
        .tab-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; }
        .tab-btn.active .tab-count { background:var(--blue); color:#fff; }

        /* TAB PANELS */
        .tab-panels { flex:1; overflow:hidden; position:relative; }
        .tab-panel { display:none; position:absolute; inset:0; flex-direction:column; overflow:hidden; }
        .tab-panel.active { display:flex; }

        /* SEARCH BAR */
        .search-bar { padding:10px 14px; border-bottom:1px solid var(--border); flex-shrink:0; }
        .search-input { width:100%; padding:7px 12px; border:1px solid var(--border);
            border-radius:var(--radius); font-family:'DM Sans'; font-size:13px; color:var(--text);
            background:var(--bg); transition:border-color .2s; }
        .search-input:focus { outline:none; border-color:var(--blue); }

        /* 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; }
        thead th { position:sticky; top:0; background:var(--blue-light);
            padding:8px 12px; 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:8px 12px; font-size:12px; color:var(--text); }
        .td-mono  { font-family:'DM Mono'; font-size:11px; }
        .td-muted { color:var(--muted); font-size:11px; }

        /* STATUS PILLS */
        .pill { display:inline-block; padding:2px 8px; border-radius:20px;
            font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
        .pill-open      { background:#dbeafe; color:#1d4ed8; }
        .pill-active    { background:#fef3c7; color:#b45309; }
        .pill-completed { background:#dcfce7; color:#15803d; }
        .pill-other     { background:#f1f5f9; color:#64748b; }

        /* LOADING */
        .state-idle { display:flex; flex-direction:column; align-items:center;
            justify-content:center; height:100%; gap:8px; color:var(--muted); }
        .state-idle svg { opacity:.25; }
        .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)} }

        /* ── 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">

    <header class="topbar">
        <div class="topbar-left">
            <div class="logo-mark"></div>
            <span class="page-title">DEV <span>DASHBOARD</span></span>
            <div class="divider-v"></div>
            <span class="role-badge">Dev</span>
            <span class="user-name"><?= htmlspecialchars($username) ?></span>
        </div>
        <a class="btn-logout" href="/logout.php">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
            Logout
        </a>
    </header>

    <main class="main">
        <div class="panel">

            <!-- TABS -->
            <div class="tab-bar">
                <button class="tab-btn active" data-tab="open">
                    Open <span class="tab-count" id="cnt-open">…</span>
                </button>
                <button class="tab-btn" data-tab="active">
                    Active <span class="tab-count" id="cnt-active">…</span>
                </button>
                <button class="tab-btn" data-tab="completed">
                    Completed <span class="tab-count" id="cnt-completed">…</span>
                </button>
                <button class="tab-btn" data-tab="other">
                    Other <span class="tab-count" id="cnt-other">…</span>
                </button>
            </div>

            <!-- TAB PANELS -->
            <div class="tab-panels">
                <?php foreach (['open','active','completed','other'] as $tab): ?>
                <div class="tab-panel <?= $tab === 'open' ? 'active' : '' ?>" id="panel-<?= $tab ?>">
                    <div class="search-bar">
                        <input type="text" class="search-input" placeholder="Search by JC#, client, address…"
                               data-panel="<?= $tab ?>" oninput="filterTable(this)">
                    </div>
                    <div class="tbl-wrap">
                        <table>
                            <thead><tr>
                                <th>JC #</th>
                                <th>Client</th>
                                <th class="hide-mobile">Address</th>
                                <th class="hide-mobile">Team</th>
                                <th class="hide-mobile">Date Created</th>
                                <th>Status</th>
                            </tr></thead>
                            <tbody id="tbody-<?= $tab ?>">
                                <tr><td colspan="6" style="text-align:center;padding:32px">
                                    <span class="pulse"></span>
                                </td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>

        </div>
    </main>
</div>

<script>
let allData = {}; // stores all rows per group for search

// ── LOAD ALL JOBCARDS ────────────────────────────────────
fetch('/app/dashboard/ajax/jobcards_list.ajax.php?scope=all')
    .then(r => r.json())
    .then(groups => {
        allData = groups;
        ['open','active','completed','other'].forEach(tab => {
            const rows = groups[tab] || [];
            document.getElementById('cnt-' + tab).textContent = rows.length;
            renderTable(tab, rows);
        });
    });

function renderTable(tab, rows) {
    const tbody = document.getElementById('tbody-' + tab);
    if (!rows.length) {
        tbody.innerHTML = `<tr><td colspan="6" class="td-muted" style="text-align:center;padding:32px">No jobcards in this section</td></tr>`;
        return;
    }
    tbody.innerHTML = rows.map(r => {
        const pillClass = tab === 'open' ? 'pill-open'
                        : tab === 'active' ? 'pill-active'
                        : tab === 'completed' ? 'pill-completed' : 'pill-other';
        const statusLabel = r.jc_current_status || (tab.charAt(0).toUpperCase() + tab.slice(1));
        return `<tr>
            <td class="td-mono"><strong>#${esc(r.jc_no)}</strong></td>
            <td>${esc(r.client_name)}</td>
            <td class="td-muted">${esc(r.address)}</td>
            <td>${esc(r.team_name ?? '—')}</td>
            <td class="td-muted">${esc((r.date_created||'').slice(0,10))}</td>
            <td><span class="pill ${pillClass}">${esc(statusLabel)}</span></td>
        </tr>`;
    }).join('');
}

// ── TABS ─────────────────────────────────────────────────
document.querySelectorAll('.tab-btn').forEach(btn => {
    btn.addEventListener('click', () => {
        document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
        document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
        btn.classList.add('active');
        document.getElementById('panel-' + btn.dataset.tab).classList.add('active');
    });
});

// ── SEARCH ───────────────────────────────────────────────
function filterTable(input) {
    const q    = input.value.toLowerCase();
    const tab  = input.dataset.panel;
    const rows = allData[tab] || [];
    const filtered = rows.filter(r =>
        (r.jc_no       + '').toLowerCase().includes(q) ||
        (r.client_name + '').toLowerCase().includes(q) ||
        (r.address     + '').toLowerCase().includes(q) ||
        (r.team_name   + '').toLowerCase().includes(q)
    );
    renderTable(tab, filtered);
}

function esc(s) {
    return String(s ?? '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
}
</script>
</body>
</html>