<?php
session_start();

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

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

$displayName = trim((string) ($_SESSION['user_company'] ?? ''));
if ($displayName === '') {
    $displayName = trim((string) ($_SESSION['user'] ?? 'Expense user'));
}

render_expense_shell_start('Getting Started | Expense', 'dashboard-page getting-started-page', 'home');
?>
<div class="page-surface getting-started-surface">
    <section class="getting-started-shell">
        <div class="getting-started-home" data-getting-started-home>
        <header class="getting-started-hero panel">
            <div class="getting-started-hero-mark">
                <i class="fa-solid fa-play" aria-hidden="true"></i>
            </div>
            <div class="getting-started-hero-copy">
                <h1>Welcome <?= e($displayName) ?> :) Let&rsquo;s get started!</h1>
                <p>Learn to manage individual business travel and spend.</p>
            </div>
            <a class="page-close-button getting-started-close" href="<?= e(page_url('dashboard')) ?>" aria-label="Close">
                <i class="fa-solid fa-xmark" aria-hidden="true"></i>
            </a>
        </header>

        <section class="getting-started-grid">
            <article class="getting-started-panel panel getting-started-overview">
                <h2>Get a quick overview</h2>
                <div class="getting-started-video">
                    <button type="button" class="getting-started-play" aria-label="Play overview video">
                        <i class="fa-solid fa-play" aria-hidden="true"></i>
                    </button>
                </div>
            </article>

            <article class="getting-started-panel panel getting-started-help">
                <h2>Help &amp; Support</h2>
                <ul class="getting-started-links">
                    <li><a href="<?= e(route_url('home/gettingstarted/request-demo/')) ?>">Request a Demo</a></li>
                    <li><a href="<?= e(route_url('support/contact/')) ?>">Contact Support</a></li>
                    <li><a href="<?= e(route_url('home/gettingstarted/take-a-tour/')) ?>">Take a Tour</a></li>
                    <li><a href="<?= e(route_url('home/gettingstarted/help-documentation/')) ?>">Help Documentation</a></li>
                    <li><a href="<?= e(route_url('home/gettingstarted/faq/')) ?>">FAQ</a></li>
                </ul>
            </article>
        </section>

        <section class="getting-started-panel panel getting-started-steps">
            <header class="getting-started-strip">
                <h2>Let&rsquo;s get started!</h2>
            </header>

            <div class="getting-started-step-list">
                <article class="getting-started-step">
                    <div class="getting-started-step-icon"><i class="fa-solid fa-suitcase" aria-hidden="true"></i></div>
                    <div class="getting-started-step-copy">
                        <h3>Create Trips</h3>
                        <p>Raise business trip requests, add itinerary and preferences, submit for approval.</p>
                    </div>
                    <a class="getting-started-step-action" href="<?= e(route_url('trips/new/')) ?>">+ New Trip</a>
                </article>

                <article class="getting-started-step">
                    <div class="getting-started-step-icon"><i class="fa-regular fa-credit-card" aria-hidden="true"></i></div>
                    <div class="getting-started-step-copy">
                        <h3>Create Expenses</h3>
                        <p>Upload receipts for autoscan and automatically convert to expenses or add expenses manually.</p>
                    </div>
                    <a
                        class="getting-started-step-action"
                        href="<?= e(route_url('expenses/new/')) ?>"
                        data-expense-launch
                        aria-controls="getting-started-expense-view"
                    >+ New Expense</a>
                </article>

                <article class="getting-started-step">
                    <div class="getting-started-step-icon"><i class="fa-regular fa-file-lines" aria-hidden="true"></i></div>
                    <div class="getting-started-step-copy">
                        <h3>Create Reports</h3>
                        <p>Add expenses to reports, submit for approval and reimbursement.</p>
                    </div>
                    <a class="getting-started-step-action" href="<?= e(route_url('reports/new/')) ?>">+ New Report</a>
                </article>
            </div>
        </section>

        <section class="getting-started-panel panel getting-started-more">
            <h2>Do more</h2>
            <div class="getting-started-more-grid">
                <article class="getting-started-more-card">
                    <div class="getting-started-more-icon"><i class="fa-regular fa-envelope" aria-hidden="true"></i></div>
                    <div>
                        <h3>Autoscan email receipts</h3>
                        <p>Forward email receipts to your inbox and automatically convert to expenses via autoscan.</p>
                    </div>
                    <a href="<?= e(route_url('home/gettingstarted/help-documentation/')) ?>">Copy email</a>
                </article>

                <article class="getting-started-more-card">
                    <div class="getting-started-more-icon"><i class="fa-regular fa-credit-card" aria-hidden="true"></i></div>
                    <div>
                        <h3>Connect Cards</h3>
                        <p>Connect and manage cards, automatically fetch card statements, and match or convert them into expenses.</p>
                    </div>
                    <a href="<?= e(page_url('cards')) ?>">Access cards</a>
                </article>
            </div>
        </section>

        <section class="getting-started-panel panel getting-started-admin">
            <h2>Manage admin tasks and organization settings from Admin View</h2>
            <div class="getting-started-admin-list">
                <article class="getting-started-admin-item">
                    <div class="getting-started-admin-icon"><i class="fa-regular fa-user" aria-hidden="true"></i></div>
                    <div>
                        <h3>Users and Control</h3>
                        <p>Add users, assign roles, define policies, set budgets and automate compliance.</p>
                    </div>
                </article>

                <article class="getting-started-admin-item">
                    <div class="getting-started-admin-icon"><i class="fa-solid fa-sliders" aria-hidden="true"></i></div>
                    <div>
                        <h3>Customization</h3>
                        <p>Manage preferences and create custom entities to extend app functionality.</p>
                    </div>
                </article>

                <article class="getting-started-admin-item">
                    <div class="getting-started-admin-icon"><i class="fa-solid fa-gear" aria-hidden="true"></i></div>
                    <div>
                        <h3>Functionality</h3>
                        <p>Manage corporate cards, provide travel booking options, and record reimbursements.</p>
                    </div>
                </article>

                <article class="getting-started-admin-item">
                    <div class="getting-started-admin-icon"><i class="fa-solid fa-robot" aria-hidden="true"></i></div>
                    <div>
                        <h3>Automation</h3>
                        <p>Automate expense reporting, approval, and other business processes.</p>
                    </div>
                </article>
            </div>
            <div class="getting-started-admin-actions">
                <a class="getting-started-admin-button" href="<?= e(page_url('organization')) ?>">Switch to Admin View</a>
            </div>
        </section>

        <section class="info-grid getting-started-info-grid">
            <article class="info-panel panel">
                <h3>Need help?</h3>
                <div class="contact-item">
                    <i class="fa-regular fa-envelope" aria-hidden="true"></i>
                    <p>Drop us an email and we&rsquo;ll get back to you.</p>
                </div>
            </article>

            <article class="info-panel panel">
                <h3>You can directly talk to us every Monday to Friday</h3>
                <div class="contact-item">
                    <i class="fa-regular fa-phone" aria-hidden="true"></i>
                    <p>18005692747 - 9.00 AM to 7:00 PM</p>
                </div>
            </article>

            <article class="info-panel panel mobile-panel">
                <h3>Access anywhere, anytime</h3>
                <div class="mobile-wrap">
                    <img src="<?= e(asset_url('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>
        </section>

        <section class="footer-links getting-started-footer-links">
            <article>
                <h4>OTHER ZOHO APPS</h4>
                <ul>
                    <li><a href="#">Accounting Software</a></li>
                    <li><a href="#">Ecommerce Software</a></li>
                    <li><a href="#">End-to-end Billing Solution</a></li>
                    <li><a href="#">Invoice Software</a></li>
                    <li><a href="#">Inventory Management</a></li>
                    <li><a href="#">Payroll Software</a></li>
                    <li><a href="#">HR Software</a></li>
                    <li><a href="#">CRM &amp; Other Apps</a></li>
                </ul>
            </article>

            <article>
                <h4>HELP &amp; SUPPORT</h4>
                <ul>
                    <li><a href="<?= e(route_url('home/gettingstarted/request-demo/')) ?>">Request a Demo</a></li>
                    <li><a href="<?= e(route_url('support/contact/')) ?>">Contact Support</a></li>
                    <li><a href="<?= e(route_url('home/gettingstarted/take-a-tour/')) ?>">Take a Tour</a></li>
                    <li><a href="<?= e(route_url('home/gettingstarted/help-documentation/')) ?>">Help Documentation</a></li>
                    <li><a href="<?= e(route_url('home/gettingstarted/faq/')) ?>">FAQ</a></li>
                </ul>
            </article>

            <article>
                <h4>QUICK LINKS</h4>
                <ul>
                    <li><a href="#">Features</a></li>
                    <li><a href="#">Integrations</a></li>
                    <li><a href="#">Mobile Apps</a></li>
                    <li><a href="#">Resources</a></li>
                    <li><a href="#">Essential Business Guides</a></li>
                    <li><a href="#">What&rsquo;s New?</a></li>
                </ul>
            </article>
        </section>

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

        <div
            id="getting-started-expense-view"
            class="getting-started-expense-view is-hidden"
            data-getting-started-expense-view
            aria-hidden="true"
        >
            <div class="page-surface page-surface--white">
                <?php render_expense_new_content(page_url('dashboard')); ?>
            </div>
        </div>
    </section>
</div>
<?php render_expense_shell_end(); ?>
