<?php
session_start();

require_once __DIR__ . '/../includes/helpers.php';
require_once __DIR__ . '/../includes/layout.php';

if (!isset($_SESSION['authenticated'])) {
    redirect(page_url('signin'));
}

function dashboard_money($amount): string
{
    return '₹' . number_format((float) $amount, 2);
}

$userId = isset($_SESSION['user_id']) ? (int) $_SESSION['user_id'] : null;
$displayName = trim((string) ($_SESSION['user_company'] ?? ''));
if ($displayName === '') {
    $displayName = trim((string) ($_SESSION['user'] ?? 'Expense user'));
}

$workspace = trim((string) ($_SESSION['workspace_name'] ?? 'demo'));
if ($workspace === '') {
    $workspace = 'demo';
}

$profileEmail = trim((string) ($_SESSION['user_email'] ?? ''));

$summary = [
    'pending_approval' => 0,
    'unreported_expenses' => 0,
    'unreported_advances_count' => 0,
    'unreported_advances_amount' => 0.00,
    'unsubmitted_reports' => 0,
    'awaiting_approval_reports' => 0,
    'awaiting_reimbursement_reports' => 0,
    'awaiting_reimbursement_amount' => 0.00,
];

$recentTrip = [
    'name' => 'No recent trip',
    'destination' => 'Trips you create will appear here.',
    'range' => '',
    'status' => 'Empty',
];

if ($userId !== null) {
    $overview = fetch_one(
        'SELECT pending_approval_count, unreported_expenses_count, unreported_advances_count, unreported_advances_amount, unsubmitted_reports_count, awaiting_approval_reports_count, awaiting_reimbursement_reports_count, awaiting_reimbursement_amount
         FROM vw_dashboard_overview
         WHERE user_id = ?',
        'i',
        [$userId]
    );

    if ($overview) {
        $summary['pending_approval'] = (int) ($overview['pending_approval_count'] ?? 0);
        $summary['unreported_expenses'] = (int) ($overview['unreported_expenses_count'] ?? 0);
        $summary['unreported_advances_count'] = (int) ($overview['unreported_advances_count'] ?? 0);
        $summary['unreported_advances_amount'] = (float) ($overview['unreported_advances_amount'] ?? 0);
        $summary['unsubmitted_reports'] = (int) ($overview['unsubmitted_reports_count'] ?? 0);
        $summary['awaiting_approval_reports'] = (int) ($overview['awaiting_approval_reports_count'] ?? 0);
        $summary['awaiting_reimbursement_reports'] = (int) ($overview['awaiting_reimbursement_reports_count'] ?? 0);
        $summary['awaiting_reimbursement_amount'] = (float) ($overview['awaiting_reimbursement_amount'] ?? 0);
    }

    $trip = fetch_one(
        'SELECT trip_name, destination, start_date, end_date, status
         FROM expense_trips
         WHERE user_id = ?
         ORDER BY COALESCE(end_date, start_date, created_at) DESC, id DESC
         LIMIT 1',
        'i',
        [$userId]
    );

    if ($trip) {
        $recentTrip['name'] = trim((string) ($trip['trip_name'] ?? '')) ?: 'Recent trip';
        $recentTrip['destination'] = trim((string) ($trip['destination'] ?? '')) ?: 'Trip destination not set';
        $start = $trip['start_date'] ?? '';
        $end = $trip['end_date'] ?? '';
        if ($start && $end) {
            $recentTrip['range'] = date('d M Y', strtotime($start)) . ' - ' . date('d M Y', strtotime($end));
        } elseif ($start) {
            $recentTrip['range'] = date('d M Y', strtotime($start));
        }
        $recentTrip['status'] = ucfirst((string) ($trip['status'] ?? 'planned'));
    }
}

$sidebarItems = [
    ['icon' => 'fa-solid fa-house', 'label' => 'Home', 'href' => page_url('dashboard'), 'active' => true],
    ['icon' => 'fa-solid fa-compass', 'label' => 'Trips', 'href' => page_url('trips')],
    ['icon' => 'fa-regular fa-credit-card', 'label' => 'Expenses', 'href' => route_url('expenses/new/')],
    ['icon' => 'fa-regular fa-file-lines', 'label' => 'Reports', 'href' => route_url('reports/new/')],
    ['icon' => 'fa-solid fa-folder-open', 'label' => 'Advances', 'href' => page_url('advances')],
    ['icon' => 'fa-regular fa-credit-card', 'label' => 'Cards', 'href' => page_url('cards')],
    ['icon' => 'fa-solid fa-circle-check', 'label' => 'Approvals', 'href' => page_url('approvals')],
    ['icon' => 'fa-solid fa-chart-column', 'label' => 'Analytics', 'href' => page_url('analytics')],
    ['icon' => 'fa-solid fa-gear', 'label' => 'My Settings', 'href' => page_url('my_settings')],
];

$quickAdds = [
    [
        'icon' => 'fa-solid fa-upload',
        'title' => 'Drag Receipts or click here to attach',
        'subtitle' => 'Upload a receipt and let the expense form prefill the details.',
        'action' => 'Attach Receipt',
    ],
    [
        'icon' => 'fa-solid fa-receipt',
        'title' => 'Create Expense',
        'subtitle' => 'Open a clean expense entry flow with receipt first.',
        'href' => route_url('expenses/new/'),
    ],
    [
        'icon' => 'fa-solid fa-folder-plus',
        'title' => 'Create Report',
        'subtitle' => 'Start a new report and group expenses instantly.',
        'href' => route_url('reports/new/'),
    ],
];

$reportTabs = [
    [
        'key' => 'recent',
        'label' => 'Most Recent Reports',
        'value' => 'Reports',
        'active' => true,
    ],
    [
        'key' => 'unsubmitted',
        'label' => 'Unsubmitted Reports',
        'value' => $summary['unsubmitted_reports'] . ' Reports',
        'active' => false,
    ],
    [
        'key' => 'approval',
        'label' => 'Awaiting Approval',
        'value' => $summary['awaiting_approval_reports'] . ' Reports',
        'active' => false,
    ],
    [
        'key' => 'reimbursement',
        'label' => 'Awaiting Reimbursement',
        'value' => $summary['awaiting_reimbursement_reports'] . ' Reports (' . html_entity_decode('&#8377;') . number_format((float) $summary['awaiting_reimbursement_amount'], 2) . ')',
        'active' => false,
    ],
];

$footerColumns = [
    'OTHER ZOHO APPS' => [
        'Accounting Software',
        'Ecommerce Software',
        'End-to-end Billing Solution',
        'Invoice Software',
        'Inventory Management',
        'Payroll Software',
        'HR Software',
        'CRM & Other Apps',
    ],
    'HELP & SUPPORT' => [
        'Contact Support',
        'Request a Feature',
        'Help Documentation',
        'Register for Webinar',
        'FAQ',
    ],
    'QUICK LINKS' => [
        'Features',
        'Integrations',
        'Mobile Apps',
        'Resources',
        'Essential Business Guides',
        "What's New?",
    ],
];

render_header('Home | Expense', 'dashboard-page');
?>
<div class="dashboard-shell">
    <aside class="dashboard-sidebar">
        <div class="sidebar-brand">
            <span class="brand-mark">
                <span class="brand-ring"></span>
            </span>
            <span class="brand-text">Expense</span>
        </div>

        <nav class="sidebar-nav" aria-label="Primary">
            <?php foreach ($sidebarItems as $item): ?>
                <?php if (($item['label'] ?? '') === 'Advances'): ?>
                    <div class="sidebar-link-group">
                        <a class="sidebar-link<?= !empty($item['active']) ? ' is-active' : '' ?>" href="<?= e($item['href'] ?? '#') ?>">
                            <i class="<?= e($item['icon']) ?>" aria-hidden="true"></i>
                            <span><?= e($item['label']) ?></span>
                        </a>
                        <button type="button" class="sidebar-inline-action" data-advance-drawer-open aria-label="Show advances panel">+</button>
                    </div>
                <?php elseif (($item['label'] ?? '') === 'Reports'): ?>
                    <div class="sidebar-link-group">
                        <a class="sidebar-link<?= !empty($item['active']) ? ' is-active' : '' ?>" href="<?= e($item['href'] ?? '#') ?>">
                            <i class="<?= e($item['icon']) ?>" aria-hidden="true"></i>
                            <span><?= e($item['label']) ?></span>
                        </a>
                        <a class="sidebar-inline-action" href="<?= e(route_url('reports/new/')) ?>" aria-label="Create report">+</a>
                    </div>
                <?php else: ?>
                    <a class="sidebar-link<?= !empty($item['active']) ? ' is-active' : '' ?>" href="<?= e($item['href'] ?? '#') ?>">
                        <i class="<?= e($item['icon']) ?>" aria-hidden="true"></i>
                        <span><?= e($item['label']) ?></span>
                    </a>
                <?php endif; ?>
            <?php endforeach; ?>
        </nav>

        <button type="button" class="sidebar-admin-switch">
            <i class="fa-solid fa-shield-halved"></i>
            <span>Switch to Admin View</span>
        </button>

        <button type="button" class="sidebar-collapse" aria-label="Collapse sidebar">
            <i class="fa-solid fa-arrow-left-long"></i>
        </button>
    </aside>

    <div class="dashboard-main">
        <header class="dashboard-topbar">
            <label class="dashboard-search">
                <i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i>
                <input type="search" placeholder="Search in Expenses ( / )" aria-label="Search in Expenses">
            </label>

            <div class="topbar-right">
                <div class="trial-pill">
                    <span>Trial expires in 12 days.</span>
                    <a href="#">Upgrade Now</a>
                </div>

                <button type="button" class="view-pill">
                    <span class="view-stack">
                        <span class="view-mini">demo</span>
                        <strong>My View</strong>
                    </span>
                    <i class="fa-solid fa-chevron-down" aria-hidden="true"></i>
                </button>

                <div class="topbar-quick-add" data-quick-add>
                    <button type="button" class="topbar-square primary" data-quick-add-toggle aria-haspopup="true" aria-expanded="false" aria-label="Quick add">
                        <i class="fa-solid fa-plus" aria-hidden="true"></i>
                    </button>
                    <div class="quick-add-menu" data-quick-add-menu aria-hidden="true">
                        <div class="quick-add-menu-header">QUICK ADD</div>
                        <a class="quick-add-menu-item" href="<?= e(route_url('trips/new/')) ?>">
                            <span class="quick-add-menu-icon"><i class="fa-solid fa-suitcase" aria-hidden="true"></i></span>
                            <span>Trip</span>
                        </a>
                        <a class="quick-add-menu-item" href="<?= e(route_url('expenses/new/')) ?>">
                            <span class="quick-add-menu-icon"><i class="fa-regular fa-credit-card" aria-hidden="true"></i></span>
                            <span>Expense</span>
                        </a>
                        <a class="quick-add-menu-item" href="<?= e(route_url('reports/new/')) ?>">
                            <span class="quick-add-menu-icon"><i class="fa-regular fa-file-lines" aria-hidden="true"></i></span>
                            <span>Report</span>
                        </a>
                        <a class="quick-add-menu-item" href="<?= e(route_url('advances/new/')) ?>">
                            <span class="quick-add-menu-icon"><i class="fa-solid fa-folder-open" aria-hidden="true"></i></span>
                            <span>Advance</span>
                        </a>
                    </div>
                </div>

                <button type="button" class="topbar-icon" data-topbar-drawer-open="users" aria-expanded="false" aria-label="Delegates">
                    <i class="fa-solid fa-users" aria-hidden="true"></i>
                </button>

                <button type="button" class="topbar-icon" data-topbar-drawer-open="notifications" aria-expanded="false" aria-label="Notifications">
                    <i class="fa-solid fa-bell" aria-hidden="true"></i>
                </button>

                <a class="topbar-icon topbar-icon-link" href="<?= e(page_url('my_settings')) ?>" aria-label="Settings">
                    <i class="fa-solid fa-gear" aria-hidden="true"></i>
                </a>

                <button type="button" class="avatar-button" data-topbar-drawer-open="profile" aria-expanded="false" aria-label="Open profile menu">
                    <img src="../images/img1.jpg" alt="" class="avatar-image">
                </button>

                <button type="button" class="topbar-icon topbar-icon--launcher" data-topbar-drawer-open="apps" aria-expanded="false" aria-label="All Zoho apps">
                    <span class="topbar-launcher" aria-hidden="true">
                        <span></span><span></span><span></span>
                        <span></span><span></span><span></span>
                        <span></span><span></span><span></span>
                    </span>
                </button>
            </div>
        </header>

        <div class="topbar-drawer topbar-drawer--users" data-topbar-drawer="users" aria-hidden="true">
            <button type="button" class="topbar-drawer-backdrop" data-topbar-drawer-close aria-label="Close delegates panel"></button>
            <aside class="topbar-drawer-panel" role="dialog" aria-modal="true" aria-label="Delegates">
                <button type="button" class="topbar-drawer-close" data-topbar-drawer-close aria-label="Close">
                    <i class="fa-solid fa-xmark" aria-hidden="true"></i>
                </button>
                <div class="topbar-drawer-header">
                    <h2>Delegated To Me</h2>
                </div>
                <div class="topbar-drawer-empty" style="min-height: 180px;">
                    <div class="topbar-drawer-empty-icon">
                        <i class="fa-regular fa-circle-user" aria-hidden="true"></i>
                    </div>
                    <p>0 users</p>
                </div>
            </aside>
        </div>

        <div class="topbar-drawer topbar-drawer--notifications" data-topbar-drawer="notifications" aria-hidden="true">
            <button type="button" class="topbar-drawer-backdrop" data-topbar-drawer-close aria-label="Close notifications panel"></button>
            <aside class="topbar-drawer-panel" role="dialog" aria-modal="true" aria-label="Notifications">
                <button type="button" class="topbar-drawer-close" data-topbar-drawer-close aria-label="Close">
                    <i class="fa-solid fa-xmark" aria-hidden="true"></i>
                </button>
                <div class="topbar-drawer-header">
                    <h2>Notifications</h2>
                    <button type="button" class="topbar-drawer-filter">
                        Unread
                        <i class="fa-solid fa-caret-down" aria-hidden="true"></i>
                    </button>
                </div>
                <div class="topbar-drawer-note-row">
                    <div>
                        <strong>Desktop Notifications</strong>
                        <span>Stay up to date while you work.</span>
                    </div>
                    <a href="#">Enable</a>
                </div>
                <div class="topbar-drawer-empty">
                    <div class="topbar-drawer-empty-icon">
                        <i class="fa-regular fa-bell" aria-hidden="true"></i>
                    </div>
                    <p>Uhh... You don't have any notifications at the moment.</p>
                </div>
            </aside>
        </div>

        <div class="topbar-drawer topbar-drawer--profile" data-topbar-drawer="profile" aria-hidden="true">
            <button type="button" class="topbar-drawer-backdrop" data-topbar-drawer-close aria-label="Close profile panel"></button>
            <aside class="topbar-drawer-panel" role="dialog" aria-modal="true" aria-label="Profile menu">
                <button type="button" class="topbar-drawer-close" data-topbar-drawer-close aria-label="Close">
                    <i class="fa-solid fa-xmark" aria-hidden="true"></i>
                </button>

                <div class="topbar-drawer-card">
                    <img src="../images/img1.jpg" alt="" class="topbar-drawer-avatar">
                    <div>
                        <strong><?= e($displayName) ?></strong>
                        <span><?= e($profileEmail) ?></span>
                        <div class="topbar-drawer-account-links">
                            <a href="<?= e(page_url('my_settings')) ?>">My Account</a>
                            <span aria-hidden="true">•</span>
                            <a href="<?= e(page_url('logout')) ?>">Sign Out</a>
                        </div>
                    </div>
                </div>

                <div class="topbar-drawer-section">
                    <div class="topbar-drawer-note-row">
                        <div>
                            <strong>Delegated To Me</strong>
                            <span>0 users</span>
                        </div>
                        <a href="#">Open</a>
                    </div>
                </div>

                <div class="topbar-drawer-section">
                    <div class="topbar-drawer-links">
                        <a href="#"><i class="fa-regular fa-circle-question" aria-hidden="true"></i><span>Help &amp; Support</span></a>
                        <a href="#"><i class="fa-regular fa-compass" aria-hidden="true"></i><span>Take a Tour</span></a>
                        <a href="#"><i class="fa-regular fa-comment-dots" aria-hidden="true"></i><span>Share Feedback</span></a>
                        <a href="#"><i class="fa-regular fa-keyboard" aria-hidden="true"></i><span>View Keyboard Shortcuts</span> <span class="topbar-drawer-badge">New</span></a>
                        <a href="#"><i class="fa-regular fa-calendar" aria-hidden="true"></i><span>Webinar</span></a>
                    </div>
                </div>

                <div class="topbar-drawer-section">
                    <div class="topbar-drawer-links">
                        <a href="#"><i class="fa-regular fa-lightbulb" aria-hidden="true"></i><span>Request a Feature</span></a>
                        <a href="#"><i class="fa-regular fa-file-lines" aria-hidden="true"></i><span>Request a Demo</span></a>
                        <a href="#"><i class="fa-regular fa-phone" aria-hidden="true"></i><span>Request a Call</span></a>
                        <a href="#"><i class="fa-solid fa-headphones-simple" aria-hidden="true"></i><span>Contact Support</span></a>
                    </div>
                </div>

                <div class="topbar-drawer-divider"></div>

                <div class="topbar-drawer-section">
                    <div class="topbar-drawer-section-title">
                        <i class="fa-solid fa-sparkles" aria-hidden="true"></i>
                        <h3>What's New?</h3>
                    </div>
                    <div class="topbar-drawer-callout">
                        You can directly talk to us every Monday to Friday
                        <strong>18005692747 - 9.00 AM to 7:00 PM</strong>
                    </div>
                    <div class="topbar-drawer-qr">
                        <div class="topbar-drawer-qr-code" aria-hidden="true"></div>
                        <div class="topbar-drawer-qr-copy">
                            Scan the QR code to download the Zoho Expense mobile app.
                            <strong>Available in</strong>
                            <div class="topbar-drawer-qr-apps" aria-label="Available platforms">
                                <i class="fa-brands fa-apple" aria-hidden="true"></i>
                                <i class="fa-brands fa-google-play" aria-hidden="true"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </aside>
        </div>

        <div class="topbar-drawer topbar-drawer--apps" data-topbar-drawer="apps" aria-hidden="true">
            <button type="button" class="topbar-drawer-backdrop" data-topbar-drawer-close aria-label="Close apps panel"></button>
            <aside class="topbar-drawer-panel topbar-drawer-panel--apps" role="dialog" aria-modal="true" aria-label="All Zoho apps">
                <button type="button" class="topbar-drawer-close" data-topbar-drawer-close aria-label="Close">
                    <i class="fa-solid fa-xmark" aria-hidden="true"></i>
                </button>
                <div class="topbar-drawer-header topbar-drawer-header--apps">
                    <h2>All Zoho Apps</h2>
                    <button type="button" class="topbar-drawer-search-toggle" aria-label="Search apps">
                        <i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i>
                    </button>
                </div>
                <label class="topbar-drawer-search">
                    <i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i>
                    <input type="search" data-app-search placeholder="Search apps" aria-label="Search apps">
                </label>

                <section class="topbar-drawer-section" data-app-section>
                    <div class="topbar-drawer-section-label">Finance Apps</div>
                    <div class="topbar-drawer-app-grid">
                        <a href="#" class="topbar-app-item" data-app-item><i class="fa-solid fa-book-bookmark" aria-hidden="true"></i><span class="topbar-app-item-text"><strong>Zoho Books</strong><small>Online Accounting Software</small></span></a>
                        <a href="#" class="topbar-app-item" data-app-item><i class="fa-solid fa-receipt" aria-hidden="true"></i><span class="topbar-app-item-text"><strong>Zoho Billing</strong><small>End-to-end Billing Solution</small></span></a>
                        <a href="#" class="topbar-app-item" data-app-item><i class="fa-solid fa-boxes-stacked" aria-hidden="true"></i><span class="topbar-app-item-text"><strong>Zoho Inventory</strong><small>Order &amp; Inventory Management Software</small></span></a>
                        <a href="#" class="topbar-app-item" data-app-item><i class="fa-solid fa-wallet" aria-hidden="true"></i><span class="topbar-app-item-text"><strong>Zoho Checkout</strong><small>One-time and recurring payments software</small></span></a>
                        <a href="#" class="topbar-app-item" data-app-item><i class="fa-solid fa-cart-shopping" aria-hidden="true"></i><span class="topbar-app-item-text"><strong>Zoho Commerce</strong><small>Ecommerce software</small></span></a>
                        <a href="#" class="topbar-app-item" data-app-item><i class="fa-solid fa-file-invoice-dollar" aria-hidden="true"></i><span class="topbar-app-item-text"><strong>Zoho Payroll</strong><small>Simplified Payroll Management Software</small></span></a>
                    </div>
                </section>

                <section class="topbar-drawer-section" data-app-section>
                    <div class="topbar-drawer-section-label">Email and Collaboration</div>
                    <div class="topbar-drawer-app-grid topbar-drawer-app-grid--compact">
                        <a href="#" class="topbar-app-item topbar-app-item--compact" data-app-item><i class="fa-solid fa-book"></i><span class="topbar-app-item-text"><strong>Notebook</strong></span></a>
                        <a href="#" class="topbar-app-item topbar-app-item--compact" data-app-item><i class="fa-solid fa-circle-play"></i><span class="topbar-app-item-text"><strong>Meeting</strong></span></a>
                        <a href="#" class="topbar-app-item topbar-app-item--compact" data-app-item><i class="fa-solid fa-diagram-project"></i><span class="topbar-app-item-text"><strong>Projects</strong></span></a>
                        <a href="#" class="topbar-app-item topbar-app-item--compact" data-app-item><i class="fa-solid fa-pen-nib"></i><span class="topbar-app-item-text"><strong>Sign</strong></span></a>
                        <a href="#" class="topbar-app-item topbar-app-item--compact" data-app-item><i class="fa-solid fa-jet-fighter-up"></i><span class="topbar-app-item-text"><strong>Sprints</strong></span></a>
                        <a href="#" class="topbar-app-item topbar-app-item--compact" data-app-item><i class="fa-solid fa-inbox"></i><span class="topbar-app-item-text"><strong>TeamInbox</strong></span></a>
                        <a href="#" class="topbar-app-item topbar-app-item--compact" data-app-item><i class="fa-solid fa-envelope"></i><span class="topbar-app-item-text"><strong>Mail</strong></span></a>
                        <a href="#" class="topbar-app-item topbar-app-item--compact" data-app-item><i class="fa-solid fa-comment-dots"></i><span class="topbar-app-item-text"><strong>Cliq</strong></span></a>
                        <a href="#" class="topbar-app-item topbar-app-item--compact" data-app-item><i class="fa-solid fa-table"></i><span class="topbar-app-item-text"><strong>Sheet</strong></span></a>
                        <a href="#" class="topbar-app-item topbar-app-item--compact" data-app-item><i class="fa-solid fa-clapperboard"></i><span class="topbar-app-item-text"><strong>Show</strong></span></a>
                        <a href="#" class="topbar-app-item topbar-app-item--compact" data-app-item><i class="fa-solid fa-file-lines"></i><span class="topbar-app-item-text"><strong>Writer</strong></span></a>
                        <a href="#" class="topbar-app-item topbar-app-item--compact" data-app-item><i class="fa-solid fa-circle-nodes"></i><span class="topbar-app-item-text"><strong>Connect</strong></span></a>
                        <a href="#" class="topbar-app-item topbar-app-item--compact" data-app-item><i class="fa-solid fa-vault"></i><span class="topbar-app-item-text"><strong>Vault</strong></span></a>
                        <a href="#" class="topbar-app-item topbar-app-item--compact" data-app-item><i class="fa-solid fa-folder-open"></i><span class="topbar-app-item-text"><strong>WorkDrive</strong></span></a>
                        <a href="#" class="topbar-app-item topbar-app-item--compact" data-app-item><i class="fa-solid fa-graduation-cap"></i><span class="topbar-app-item-text"><strong>Learn</strong></span></a>
                    </div>
                </section>
            </aside>
        </div>

        <main class="dashboard-content">
            <section class="hero-row">
                <div class="hero-title-wrap">
                    <div class="hero-mark">
                        <i class="fa-regular fa-copy" aria-hidden="true"></i>
                    </div>
                    <div class="hero-copy">
                        <h1>Hello, <?= e($displayName) ?></h1>
                        <p><?= e($workspace) ?></p>
                    </div>
                </div>

                <div class="hero-links">
                    <a href="#">Getting Started</a>
                    <button type="button" class="help-badge">?</button>
                </div>
            </section>

            <section class="support-banner panel">
                <div class="support-icon">
                    <i class="fa-solid fa-headset" aria-hidden="true"></i>
                </div>
                <div class="support-copy">
                    <h2>2 hours of <span>FREE</span> Rapid Setup Assistance!</h2>
                    <p>Our product consultants will help you configure Zoho Expense based on your requirements.</p>
                </div>
                <button type="button" class="support-button" data-modal-open="Contact Support">Contact Support</button>
            </section>

            <section class="summary-grid">
                <article class="panel pending-panel">
                    <h3>Pending Tasks</h3>
                    <div class="pending-list">
                        <div class="pending-item">
                            <div class="pending-label">
                                <span class="pending-dot orange"></span>
                                <span>Pending Approval</span>
                            </div>
                            <strong><?= (int) $summary['pending_approval'] ?></strong>
                        </div>
                        <div class="pending-item">
                            <div class="pending-label">
                                <i class="fa-regular fa-file-lines" aria-hidden="true"></i>
                                <span>Unreported Expenses</span>
                            </div>
                            <strong><?= (int) $summary['unreported_expenses'] ?></strong>
                        </div>
                        <div class="pending-item">
                            <div class="pending-label">
                                <i class="fa-regular fa-folder-open" aria-hidden="true"></i>
                                <span>Unreported Advances</span>
                            </div>
                            <strong><?= e(html_entity_decode('&#8377;') . number_format((float) $summary['unreported_advances_amount'], 2)) ?></strong>
                        </div>
                    </div>
                </article>

                <article class="panel quick-add-panel">
                    <h3>Quick Add</h3>
                    <div class="quick-add-grid">
                        <?php foreach ($quickAdds as $index => $quickAdd): ?>
                            <?php if (isset($quickAdd['href'])): ?>
                                <a
                                    class="quick-add-card<?= $index === 0 ? ' upload-card' : '' ?>"
                                    href="<?= e($quickAdd['href']) ?>"
                                >
                            <?php else: ?>
                                <button
                                    type="button"
                                    class="quick-add-card<?= $index === 0 ? ' upload-card' : '' ?>"
                                    data-modal-open="<?= e($quickAdd['action']) ?>"
                                >
                            <?php endif; ?>
                                <div class="quick-add-icon">
                                    <i class="<?= e($quickAdd['icon']) ?>" aria-hidden="true"></i>
                                </div>
                                <div class="quick-add-copy">
                                    <strong><?= e($quickAdd['title']) ?></strong>
                                    <span><?= e($quickAdd['subtitle']) ?></span>
                                </div>
                            <?php if (isset($quickAdd['href'])): ?>
                                </a>
                            <?php else: ?>
                                </button>
                            <?php endif; ?>
                        <?php endforeach; ?>
                    </div>
                </article>
            </section>

            <section class="reports-panel panel">
                <header class="panel-header">
                    <h3>REPORTS SUMMARY</h3>
                </header>

                <div class="reports-tabs" data-report-tabs>
                    <?php foreach ($reportTabs as $tab): ?>
                        <button
                            type="button"
                            class="report-tab<?= $tab['active'] ? ' is-active' : '' ?>"
                            data-report-tab="<?= e($tab['key']) ?>"
                        >
                            <span class="report-tab-label"><?= e($tab['label']) ?></span>
                            <span class="report-tab-value"><?= e($tab['value']) ?></span>
                        </button>
                    <?php endforeach; ?>
                </div>

                <div class="reports-body" data-report-panels>
                    <div class="report-panel is-active" data-report-panel="recent">
                        <div class="empty-state">
                            <p>You've not created any reports. Create a report by clicking the New Report button below.</p>
                            <a class="empty-action" href="<?= e(route_url('reports/new/')) ?>">+ New Report</a>
                        </div>
                    </div>
                    <div class="report-panel" data-report-panel="unsubmitted">
                        <div class="empty-state compact">
                            <p>No unsubmitted reports yet.</p>
                        </div>
                    </div>
                    <div class="report-panel" data-report-panel="approval">
                        <div class="empty-state compact">
                            <p>No reports are waiting for approval.</p>
                        </div>
                    </div>
                    <div class="report-panel" data-report-panel="reimbursement">
                        <div class="empty-state compact">
                            <p>No reimbursements are pending.</p>
                        </div>
                    </div>
                </div>
            </section>

            <section class="recent-trip panel">
                <header class="panel-header">
                    <h3>RECENT TRIP</h3>
                </header>
                <div class="recent-trip-empty">
                    <p>View your recent trip here.</p>
                    <a class="recent-trip-button" href="<?= e(route_url('trips/new/')) ?>">+ New Trip</a>
                </div>
            </section>

            <section class="info-grid">
                <article class="info-panel panel">
                    <h3>Contact Us</h3>
                    <div class="contact-item">
                        <i class="fa-regular fa-envelope" aria-hidden="true"></i>
                        <p>Need help? <a href="#">Drop us an email</a> and we'll get back to you.</p>
                    </div>
                    <div class="contact-item">
                        <i class="fa-regular fa-clock" aria-hidden="true"></i>
                        <p>You can directly talk to us every Monday to Friday<br>18005692747 - 9.00 AM to 7:00 PM</p>
                    </div>
                </article>

                <article class="info-panel panel mobile-panel">
                    <h3>Expense on the go!</h3>
                    <div class="mobile-wrap">
                        <img src="../images/mobile-footer-in-6c8e1951aeca90821dfaa475a1967a1c.png" alt="Mobile app preview">
                        <div class="mobile-copy">
                            <p>Download the mobile app for Android or iOS</p>
                            <div class="store-icons">
                                <i class="fa-brands fa-apple" aria-hidden="true"></i>
                                <i class="fa-brands fa-android" aria-hidden="true"></i>
                            </div>
                        </div>
                    </div>
                </article>

                <article class="info-panel panel">
                    <h3>Resources</h3>
                    <ul class="resource-list">
                        <li><i class="fa-regular fa-bookmark" aria-hidden="true"></i>Help Documentation</li>
                        <li><i class="fa-regular fa-circle-question" aria-hidden="true"></i>FAQ</li>
                        <li><i class="fa-regular fa-lightbulb" aria-hidden="true"></i>Essential Business Guides</li>
                    </ul>
                </article>
            </section>

            <section class="footer-links">
                <?php foreach ($footerColumns as $title => $links): ?>
                    <article>
                        <h4><?= e($title) ?></h4>
                        <ul>
                            <?php foreach ($links as $link): ?>
                                <li><a href="#"><?= e($link) ?></a></li>
                            <?php endforeach; ?>
                        </ul>
                    </article>
                <?php endforeach; ?>
            </section>

            <footer class="dashboard-footer">
&copy; 2026, Zoho Corporation Pvt. Ltd. All Rights Reserved.
            </footer>
        </main>
    </div>
</div>

<div class="advances-surface advances-surface--dashboard" data-advance-page aria-hidden="true">
    <button type="button" class="advance-drawer-backdrop" data-advance-drawer-close aria-label="Close panel"></button>
    <aside class="advance-drawer" data-advance-drawer aria-hidden="true">
        <div class="advance-drawer-card">
            <button type="button" class="advance-drawer-close" data-advance-drawer-close aria-label="Close">
                <i class="fa-solid fa-xmark" aria-hidden="true"></i>
            </button>

            <div class="advance-drawer-art" aria-hidden="true">
                <div class="advance-drawer-circle">
                    <i class="fa-solid fa-bullhorn"></i>
                </div>
            </div>

            <h2>Know people who would love Zoho Expense?</h2>
            <p class="advance-drawer-lead">
                Refer now and earn credits for every qualified signup that stays active.
            </p>

            <button type="button" class="advance-drawer-cta">Refer and Earn</button>

            <section class="advance-drawer-copy">
                <h3>How do you refer & earn?</h3>
                <p>Share the app with friends or business contacts. When they sign up and keep using it, you receive reward credits.</p>
                <p>Credits are applied toward future subscription payments and can be used from your workspace wallet.</p>
                <p class="advance-drawer-note">Terms and conditions apply.</p>
            </section>
        </div>
    </aside>
</div>

<div class="page-modal" data-page-modal aria-hidden="true">
    <div class="page-modal-backdrop" data-page-modal-close></div>
    <div class="page-modal-card" role="dialog" aria-modal="true" aria-labelledby="dashboardModalTitle">
        <button type="button" class="page-modal-close" data-page-modal-close aria-label="Close">
            <i class="fa-solid fa-xmark" aria-hidden="true"></i>
        </button>
        <div class="page-modal-icon">
                        <i class="fa-solid fa-circle-info" aria-hidden="true"></i>
        </div>
        <h3 id="dashboardModalTitle">Action unavailable in demo mode</h3>
        <ul class="page-modal-list">
            <li>Connect these actions to your expense creation flow when you're ready.</li>
            <li>The dashboard shell is already wired for future CRUD screens.</li>
        </ul>
    </div>
</div>
<?php render_footer(); ?>








