<?php
/**
 * City of Cincinnati | Power BI — Report Dashboard
 */

$reports = [
    ['title' => 'OT Spend by Pay Period', 'icon' => 'dollar-sign', 'category' => 'spend', 'url' => 'https://m365.cloud.microsoft/m365apps/1c4340de-2a85-40e5-8eb0-4f295368978b?auth=2&origindomain=Office'],
    ['title' => 'OT Hours by Pay Period', 'icon' => 'clock', 'category' => 'hours', 'url' => 'https://m365.cloud.microsoft/m365apps/1c4340de-2a85-40e5-8eb0-4f295368978b?auth=2&origindomain=Office'],
    ['title' => 'OT Spend - FY Comparison', 'icon' => 'trending-up', 'category' => 'spend', 'url' => 'https://m365.cloud.microsoft/m365apps/1c4340de-2a85-40e5-8eb0-4f295368978b?auth=2&origindomain=Office'],
    ['title' => 'OT Hours - FY Comparison', 'icon' => 'trending-up', 'category' => 'hours', 'url' => 'https://m365.cloud.microsoft/m365apps/1c4340de-2a85-40e5-8eb0-4f295368978b?auth=2&origindomain=Office'],
    ['title' => 'OT v Leave Spend', 'icon' => 'dollar-sign', 'category' => 'leave', 'url' => 'https://m365.cloud.microsoft/m365apps/1c4340de-2a85-40e5-8eb0-4f295368978b?auth=2&origindomain=Office'],
    ['title' => 'OT v Leave Hours', 'icon' => 'clock', 'category' => 'leave', 'url' => 'https://m365.cloud.microsoft/m365apps/1c4340de-2a85-40e5-8eb0-4f295368978b?auth=2&origindomain=Office'],
    ['title' => 'Overtime v Leave Detail', 'icon' => 'file-text', 'category' => 'leave', 'url' => 'https://m365.cloud.microsoft/m365apps/1c4340de-2a85-40e5-8eb0-4f295368978b?auth=2&origindomain=Office'],
    ['title' => 'Responses', 'icon' => 'activity', 'category' => 'operations', 'url' => 'https://m365.cloud.microsoft/m365apps/1c4340de-2a85-40e5-8eb0-4f295368978b?auth=2&origindomain=Office'],
    ['title' => 'Paramedics v FAO', 'icon' => 'users', 'category' => 'staffing', 'url' => 'https://m365.cloud.microsoft/m365apps/1c4340de-2a85-40e5-8eb0-4f295368978b?auth=2&origindomain=Office'],
    ['title' => 'Paramedics v FAO FY Comparison', 'icon' => 'bar-chart-2', 'category' => 'staffing', 'url' => 'https://m365.cloud.microsoft/m365apps/1c4340de-2a85-40e5-8eb0-4f295368978b?auth=2&origindomain=Office'],
    ['title' => 'Paramedics v FAO by Pay Period', 'icon' => 'bar-chart-2', 'category' => 'staffing', 'url' => 'https://m365.cloud.microsoft/m365apps/1c4340de-2a85-40e5-8eb0-4f295368978b?auth=2&origindomain=Office'],
    ['title' => 'Medic v Non-Medic', 'icon' => 'users', 'category' => 'staffing', 'url' => 'https://m365.cloud.microsoft/m365apps/1c4340de-2a85-40e5-8eb0-4f295368978b?auth=2&origindomain=Office'],
    ['title' => 'Internal Fire OT Stats', 'icon' => 'flame', 'category' => 'operations', 'url' => 'https://m365.cloud.microsoft/m365apps/1c4340de-2a85-40e5-8eb0-4f295368978b?auth=2&origindomain=Office'],
    ['title' => 'OT Hours and Employee Count by Rank', 'icon' => 'bar-chart-2', 'category' => 'hours', 'url' => 'https://m365.cloud.microsoft/m365apps/1c4340de-2a85-40e5-8eb0-4f295368978b?auth=2&origindomain=Office'],
    ['title' => 'OT Hours by Pay Period', 'icon' => 'clock', 'category' => 'hours', 'url' => 'https://m365.cloud.microsoft/m365apps/1c4340de-2a85-40e5-8eb0-4f295368978b?auth=2&origindomain=Office'],
    ['title' => 'Internal Data Validation', 'icon' => 'check-circle', 'category' => 'admin', 'url' => 'https://m365.cloud.microsoft/m365apps/1c4340de-2a85-40e5-8eb0-4f295368978b?auth=2&origindomain=Office'],
    ['title' => 'Documentation', 'icon' => 'book-open', 'category' => 'admin', 'url' => 'https://m365.cloud.microsoft/m365apps/1c4340de-2a85-40e5-8eb0-4f295368978b?auth=2&origindomain=Office'],
];

$categories = [
    'all' => 'All Reports',
    'spend' => 'OT Spend',
    'hours' => 'OT Hours',
    'leave' => 'Leave Analysis',
    'staffing' => 'Staffing',
    'operations' => 'Operations',
    'admin' => 'Admin',
];

$catColors = [
    'spend' => '#F2C811',
    'hours' => '#E8B800',
    'leave' => '#00A6A0',
    'staffing' => '#1B6CB0',
    'operations' => '#DC2626',
    'admin' => '#6B7280',
];

$icons = [
    'dollar-sign' => '<circle cx="12" cy="12" r="10"/><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>',
    'clock' => '<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>',
    'trending-up' => '<polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/>',
    'file-text' => '<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"/>',
    'activity' => '<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>',
    'users' => '<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',
    'bar-chart-2' => '<line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/>',
    'flame' => '<path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/>',
    'check-circle' => '<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/>',
    'book-open' => '<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>',
];
?>

<!-- Back nav -->
<div style="margin-bottom:16px;">
    <a href="dashboard.php?page=overtime-taskforce" style="display:inline-flex; align-items:center; gap:6px; text-decoration:none; color:var(--accent); font-size:13px; font-weight:600;">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
        Overtime Taskforce
    </a>
</div>

<!-- Header -->
<div style="
    position:relative; border-radius:16px; overflow:hidden; margin-bottom:24px;
    background:linear-gradient(135deg, #1a1a2e 0%, #2d2d44 40%, #F2C811 100%);
    padding:28px 36px; color:#fff;
">
    <div style="position:absolute; top:-30px; right:-30px; width:180px; height:180px; background:radial-gradient(circle, rgba(242,200,17,0.2) 0%, transparent 70%); border-radius:50%;"></div>
    <div style="position:relative; z-index:2; display:flex; align-items:center; gap:16px;">
        <img src="assets/img/city-logo.png" alt="" style="height:36px; filter:brightness(0) invert(1); opacity:0.9;">
        <span style="font-size:22px; font-weight:200; color:rgba(255,255,255,0.2);">|</span>
        <svg width="32" height="32" viewBox="0 0 24 24" fill="none">
            <rect x="2" y="6" width="4" height="16" rx="1" fill="#F2C811"/>
            <rect x="8" y="3" width="4" height="19" rx="1" fill="#E8B800"/>
            <rect x="14" y="8" width="4" height="14" rx="1" fill="#D4A300"/>
            <rect x="20" y="11" width="4" height="11" rx="1" fill="#C09200" opacity="0.7"/>
        </svg>
        <div>
            <h1 style="font-size:22px; font-weight:800;">City of Cincinnati <span style="color:#F2C811;">Power BI</span></h1>
            <p style="font-size:12px; color:rgba(255,255,255,0.5);"><?= count($reports) ?> reports available &middot; Overtime & staffing analytics</p>
        </div>
    </div>
</div>

<!-- Filter Pills -->
<div style="display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px;" id="pbiFilters">
    <?php foreach ($categories as $key => $label): ?>
    <button onclick="filterPBI('<?= $key ?>')" class="pbi-filter-btn <?= $key === 'all' ? 'active' : '' ?>" data-cat="<?= $key ?>" style="
        padding:6px 16px; border-radius:20px; border:1px solid var(--ios-border);
        background:<?= $key === 'all' ? 'var(--primary)' : 'transparent' ?>;
        color:<?= $key === 'all' ? '#fff' : 'var(--ios-secondary)' ?>;
        font-size:12px; font-weight:600; cursor:pointer; transition:all 0.2s;
    "><?= $label ?></button>
    <?php endforeach; ?>
</div>

<!-- Main Section -->
<div style="margin-bottom:8px; padding:14px 20px; background:var(--ios-card); border:1px solid var(--ios-border); border-radius:12px; border-left:4px solid #F2C811; display:flex; align-items:center; justify-content:space-between;">
    <div style="display:flex; align-items:center; gap:10px;">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
            <rect x="2" y="6" width="3.5" height="14" rx="1" fill="#F2C811"/>
            <rect x="7.5" y="3" width="3.5" height="17" rx="1" fill="#E8B800"/>
            <rect x="13" y="8" width="3.5" height="12" rx="1" fill="#D4A300"/>
            <rect x="18.5" y="11" width="3.5" height="9" rx="1" fill="#C09200" opacity="0.7"/>
        </svg>
        <h2 style="font-size:16px; font-weight:800; color:var(--primary);">Main</h2>
    </div>
    <span style="font-size:11px; color:var(--ios-tertiary); font-weight:500;"><?= count($reports) ?> reports</span>
</div>

<!-- Report Grid -->
<div style="display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;" id="pbiGrid">
    <?php foreach ($reports as $i => $r):
        $color = $catColors[$r['category']] ?? '#6B7280';
        $iconSvg = $icons[$r['icon']] ?? $icons['file-text'];
    ?>
    <a href="<?= $r['url'] ?>" target="_blank" class="pbi-report-card" data-category="<?= $r['category'] ?>" style="
        display:flex; flex-direction:column; padding:20px; border-radius:14px;
        background:var(--ios-card); border:1px solid var(--ios-border);
        text-decoration:none; color:inherit; transition:all 0.2s;
        position:relative; overflow:hidden;
    " onmouseover="this.style.transform='translateY(-2px)';this.style.boxShadow='0 8px 24px rgba(0,0,0,0.08)';this.style.borderColor='<?= $color ?>40';" onmouseout="this.style.transform='';this.style.boxShadow='';this.style.borderColor='var(--ios-border)';">
        <!-- Color accent bar -->
        <div style="position:absolute; top:0; left:0; right:0; height:3px; background:<?= $color ?>;"></div>

        <div style="display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:12px;">
            <div style="width:40px; height:40px; background:<?= $color ?>12; border-radius:10px; display:flex; align-items:center; justify-content:center;">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="<?= $color ?>" stroke-width="2"><?= $iconSvg ?></svg>
            </div>
            <span style="padding:2px 8px; background:<?= $color ?>12; border-radius:8px; font-size:9px; font-weight:600; color:<?= $color ?>; text-transform:uppercase; letter-spacing:0.5px;">
                <?= $categories[$r['category']] ?? $r['category'] ?>
            </span>
        </div>

        <h3 style="font-size:14px; font-weight:700; color:var(--primary); line-height:1.3; margin-bottom:8px;"><?= htmlspecialchars($r['title']) ?></h3>

        <div style="margin-top:auto; display:flex; align-items:center; gap:4px; color:var(--ios-tertiary); font-size:11px;">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
            Open in Power BI
        </div>
    </a>
    <?php endforeach; ?>
</div>

<script>
function filterPBI(cat) {
    document.querySelectorAll('.pbi-filter-btn').forEach(btn => {
        const isActive = btn.dataset.cat === cat;
        btn.classList.toggle('active', isActive);
        btn.style.background = isActive ? 'var(--primary)' : 'transparent';
        btn.style.color = isActive ? '#fff' : 'var(--ios-secondary)';
    });
    document.querySelectorAll('.pbi-report-card').forEach(card => {
        card.style.display = (cat === 'all' || card.dataset.category === cat) ? 'flex' : 'none';
    });
}
</script>

<style>
@media (max-width: 768px) {
    #pbiGrid { grid-template-columns: 1fr !important; }
}
@media (min-width: 769px) and (max-width: 1024px) {
    #pbiGrid { grid-template-columns: repeat(2, 1fr) !important; }
}
</style>
