<?php
session_start();

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

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

$userContext = current_user_context();
$advanceOwner = trim((string) ($userContext['display_name'] ?? ''));
if ($advanceOwner === '') {
    $advanceOwner = 'You';
}

render_expense_shell_start('Getting Started | Advances | Zoho Expense', 'dashboard-page advance-start-page', 'advances');
?>
<div class="page-surface page-surface--white advance-start-surface">
    <section class="advance-start-shell">
        <div class="advance-start-hero panel">
            <div class="advance-start-copy">
                <div class="advance-start-mark" aria-hidden="true">
                    <i class="fa-solid fa-folder-open"></i>
                </div>
                <h1>Get started with Advances</h1>
                <p>
                    The advances module enables you to request for cash advances from your organization,
                    and apply them to your expense reports after approval.
                </p>
                <div class="advance-start-actions">
                    <a class="expense-primary" href="<?= e(route_url('advances/new/')) ?>">+ Record Advance</a>
                </div>
            </div>

            <div class="advance-start-preview">
                <div class="advance-start-preview-card">
                    <div class="advance-start-preview-visual">
                        <div class="advance-start-preview-left">
                            <div class="advance-start-coin">
                                <i class="fa-solid fa-circle-dollar-to-slot" aria-hidden="true"></i>
                            </div>
                            <div class="advance-start-amount-label">Advance Amount</div>
                            <div class="advance-start-amount">$100.00</div>
                        </div>

                        <div class="advance-start-preview-right">
                            <div class="advance-start-preview-row">
                                <span>Date :</span>
                                <strong>1/02/2025</strong>
                            </div>
                            <div class="advance-start-preview-row">
                                <span>Reference :</span>
                                <strong>ADV-001</strong>
                            </div>
                            <div class="advance-start-preview-row">
                                <span>Trips :</span>
                                <strong>Trip for Zoholics</strong>
                            </div>
                            <div class="advance-start-preview-row">
                                <span>Requested for :</span>
                                <strong><?= e($advanceOwner) ?></strong>
                            </div>
                            <div class="advance-start-preview-row">
                                <span>Recorded by :</span>
                                <strong><?= e($advanceOwner) ?></strong>
                            </div>
                            <div class="advance-start-preview-row">
                                <span>Notes :</span>
                                <strong>For external event</strong>
                            </div>
                        </div>
                    </div>

                    <div class="advance-start-preview-footer">
                        <span>Get started with Advances (1:29)</span>
                        <div class="advance-start-preview-pager">
                            <button type="button" aria-label="Previous slide"><i class="fa-solid fa-chevron-left"></i></button>
                            <strong>1 of 2</strong>
                            <button type="button" aria-label="Next slide"><i class="fa-solid fa-chevron-right"></i></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <section class="advance-start-section panel">
            <header class="advance-start-section-head">
                <h2>How It Works</h2>
            </header>

            <div class="advance-start-flow">
                <div class="advance-start-flow-grid">
                    <div class="advance-start-mini-card"><i class="fa-solid fa-circle-plus"></i><span>Create advance</span></div>
                    <div class="advance-start-mini-card"><i class="fa-regular fa-paper-plane"></i><span>Submit advance for approval</span></div>
                    <div class="advance-start-mini-card"><i class="fa-regular fa-circle-check"></i><span>Approver validates advance</span></div>
                    <div class="advance-start-mini-card"><i class="fa-solid fa-wallet"></i><span>Advance recorded</span></div>
                    <div class="advance-start-mini-card"><i class="fa-regular fa-folder-open"></i><span>Apply advance to expense report</span></div>
                </div>

                <div class="advance-start-flow-arrow">&rarr;</div>

                <div class="advance-start-flow-note">
                    <i class="fa-regular fa-comment-dots" aria-hidden="true"></i>
                    <strong>View reason for rejection within advance</strong>
                </div>
            </div>

            <div class="advance-start-flow-legend">
                <span><i class="fa-solid fa-user" aria-hidden="true"></i> Submitter</span>
                <span><i class="fa-solid fa-user-check" aria-hidden="true"></i> Approver</span>
                <span><i class="fa-solid fa-crown" aria-hidden="true"></i> Admin</span>
            </div>
        </section>

        <section class="advance-start-section panel">
            <header class="advance-start-section-head advance-start-section-head--more">
                <h2>See what's more</h2>
            </header>

            <div class="advance-start-more-list">
                <article class="advance-start-more-item">
                    <div class="advance-start-more-icon"><i class="fa-regular fa-folder-open"></i></div>
                    <div class="advance-start-more-copy">
                        <h3>Record spend made from advances</h3>
                        <p>Expenses for spend made from advances have to be marked reimbursable. Zoho Expense then adjusts them against the amount in the expense report.</p>
                    </div>
                    <a href="<?= e(route_url('advances/new/')) ?>">Learn More <i class="fa-solid fa-arrow-up-right-from-square"></i></a>
                </article>

                <article class="advance-start-more-item">
                    <div class="advance-start-more-icon"><i class="fa-solid fa-coins"></i></div>
                    <div class="advance-start-more-copy">
                        <h3>Request advance in other currencies</h3>
                        <p>When requesting a new advance, click on the currency drop-down under "Amount" to request advances in any other currency supported by your organization.</p>
                    </div>
                    <a href="<?= e(route_url('advances/new/')) ?>">Learn More <i class="fa-solid fa-arrow-up-right-from-square"></i></a>
                </article>

                <article class="advance-start-more-item">
                    <div class="advance-start-more-icon"><i class="fa-solid fa-circle-plus"></i></div>
                    <div class="advance-start-more-copy">
                        <h3>Request additional advances</h3>
                        <p>Multiple advances can be applied to a single expense report. So if you need additional amounts, you can create new advances requests and apply them to the same report.</p>
                    </div>
                    <a href="<?= e(route_url('advances/new/')) ?>">Learn More <i class="fa-solid fa-arrow-up-right-from-square"></i></a>
                </article>

                <article class="advance-start-more-item">
                    <div class="advance-start-more-icon"><i class="fa-solid fa-rotate-left"></i></div>
                    <div class="advance-start-more-copy">
                        <h3>Handle leftover advance amounts</h3>
                        <p>Any amount left over from the advance after spend can be carried forward and used for future spending or returned back to the organization depending on organizational policy.</p>
                    </div>
                    <a href="<?= e(page_url('reports')) ?>">Learn More <i class="fa-solid fa-arrow-up-right-from-square"></i></a>
                </article>

                <article class="advance-start-more-item">
                    <div class="advance-start-more-icon"><i class="fa-regular fa-handshake"></i></div>
                    <div class="advance-start-more-copy">
                        <h3>View refunds</h3>
                        <p>Balance amounts left over from advances and returned to the organization can be easily viewed under the "Advances &amp; Refunds" tab within the expense report.</p>
                    </div>
                    <a href="<?= e(page_url('reports')) ?>">Learn More <i class="fa-solid fa-arrow-up-right-from-square"></i></a>
                </article>

                <article class="advance-start-more-item">
                    <div class="advance-start-more-icon"><i class="fa-solid fa-suitcase"></i></div>
                    <div class="advance-start-more-copy">
                        <h3>Associate with Trip</h3>
                        <p>Advance requests can be associated with any approved trip to help approvers get more context on the trip budgets and travel costs.</p>
                    </div>
                    <a href="<?= e(route_url('trips/new/')) ?>">Learn More <i class="fa-solid fa-arrow-up-right-from-square"></i></a>
                </article>
            </div>
        </section>
    </section>
</div>
<?php render_expense_shell_end(); ?>
