<?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'));
}

$userId = current_user_id();
if ($userId <= 0) {
    redirect(page_url('signin'));
}

render_expense_shell_start('Trips | Expense', 'dashboard-page trips-page', 'trips');
?>
<div class="page-surface trips-surface">
    <section class="trips-hero">
        <div class="trips-hero-copy">
            <div class="trips-hero-icon">
                <i class="fa-solid fa-suitcase" aria-hidden="true"></i>
            </div>
            <h1>Get started with Trips</h1>
            <p>
                Trips allows you to request pre-approval for your business travel. It also helps manage every aspect of a business trip, from itineraries to travel preferences and actual bookings.
            </p>
            <a class="trip-primary trips-hero-action" href="<?= e(route_url('trips/new/')) ?>">+ New Trip</a>
            <div class="trips-shared-block">
                <span>You may have Trips shared by others</span>
                <a href="#">View shared trips <i class="fa-solid fa-chevron-right" aria-hidden="true"></i></a>
                <a href="#">View trips shared as other traveler <i class="fa-solid fa-chevron-right" aria-hidden="true"></i></a>
            </div>
        </div>

        <div class="trips-hero-preview">
            <div class="trips-preview-card">
                <div class="trips-preview-card-head">
                    <strong>Business trip to California</strong>
                    <span>Duration: 1/02/2025 - 10/02/2025</span>
                </div>
                <div class="trips-preview-card-body">
                    <div class="trips-preview-tabs">
                        <span class="is-active"><i class="fa-solid fa-plane-up" aria-hidden="true"></i></span>
                        <span><i class="fa-solid fa-hotel" aria-hidden="true"></i></span>
                        <span><i class="fa-solid fa-car-side" aria-hidden="true"></i></span>
                        <span><i class="fa-solid fa-train-subway" aria-hidden="true"></i></span>
                        <span><i class="fa-solid fa-bus" aria-hidden="true"></i></span>
                        <span><i class="fa-solid fa-ship" aria-hidden="true"></i></span>
                        <button type="button">Associated Reports</button>
                    </div>
                    <div class="trips-preview-journey">
                        <div class="trips-preview-stop">
                            <strong>Chennai - MAA</strong>
                            <span>Madras International</span>
                            <small>(Meenambakkam)</small>
                        </div>
                        <div class="trips-preview-play">
                            <span><i class="fa-solid fa-play" aria-hidden="true"></i></span>
                        </div>
                        <div class="trips-preview-stop trips-preview-stop--right">
                            <strong>VCV - Victorville</strong>
                            <span>Southern California</span>
                            <small>Logistics Airport</small>
                        </div>
                    </div>
                </div>
                <div class="trips-preview-card-footer">
                    <span>Get started with Trips (2:16)</span>
                    <div class="trips-preview-pager">
                        <button type="button" aria-label="Previous">&lsaquo;</button>
                        <strong>1 of 2</strong>
                        <button type="button" aria-label="Next">&rsaquo;</button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="trips-section panel trips-how-panel">
        <header class="trips-section-header">
            <h2>How It Works</h2>
        </header>
        <div class="trips-flow">
            <div class="trips-flow-row">
                <div class="trips-flow-card">
                    <span class="trips-flow-avatar"><i class="fa-solid fa-user" aria-hidden="true"></i></span>
                    <i class="fa-solid fa-suitcase trips-flow-icon" aria-hidden="true"></i>
                    <strong>Create trip</strong>
                </div>
                <div class="trips-flow-arrow">&rarr;</div>
                <div class="trips-flow-card">
                    <span class="trips-flow-avatar"><i class="fa-solid fa-user" aria-hidden="true"></i></span>
                    <i class="fa-regular fa-paper-plane trips-flow-icon" aria-hidden="true"></i>
                    <strong>Submit trip for approval</strong>
                </div>
                <div class="trips-flow-arrow">&rarr;</div>
                <div class="trips-flow-card trips-flow-card--approval">
                    <span class="trips-flow-avatar trips-flow-avatar--green"><i class="fa-solid fa-user-check" aria-hidden="true"></i></span>
                    <i class="fa-regular fa-circle-check trips-flow-icon" aria-hidden="true"></i>
                    <strong>Approver validates trip</strong>
                    <div class="trips-flow-choice trips-flow-choice--reject">Rejects trip</div>
                    <div class="trips-flow-choice trips-flow-choice--approve">Approves trip</div>
                </div>
                <div class="trips-flow-arrow">&rarr;</div>
                <div class="trips-flow-card">
                    <span class="trips-flow-avatar"><i class="fa-solid fa-user" aria-hidden="true"></i></span>
                    <i class="fa-regular fa-folder-open trips-flow-icon" aria-hidden="true"></i>
                    <strong>Associate trip to expense report</strong>
                </div>
            </div>
            <div class="trips-flow-row trips-flow-row--top">
                <div class="trips-flow-card">
                    <span class="trips-flow-avatar"><i class="fa-solid fa-user" aria-hidden="true"></i></span>
                    <i class="fa-regular fa-pen-to-square trips-flow-icon" aria-hidden="true"></i>
                    <strong>Update and rectify the trip</strong>
                </div>
                <div class="trips-flow-arrow trips-flow-arrow--down">&darr;</div>
                <div class="trips-flow-card">
                    <span class="trips-flow-avatar"><i class="fa-solid fa-user" aria-hidden="true"></i></span>
                    <i class="fa-regular fa-comment-dots trips-flow-icon" aria-hidden="true"></i>
                    <strong>View reason for rejection</strong>
                </div>
            </div>
            <div class="trips-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>
        </div>
    </section>

    <section class="trips-section panel trips-more-panel">
        <header class="trips-section-header">
            <h2>See what's more</h2>
        </header>
        <div class="trips-more-list">
            <article class="trips-more-item">
                <div class="trips-more-icon"><i class="fa-regular fa-folder-open" aria-hidden="true"></i></div>
                <div class="trips-more-copy">
                    <strong>Request travel advances</strong>
                    <p>After a trip is approved, the next consideration is travel cost. To cover the same, you can directly request your organization for cash advances from within the trip itself.</p>
                </div>
                <a href="#">Learn More <i class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i></a>
            </article>
            <article class="trips-more-item">
                <div class="trips-more-icon"><i class="fa-regular fa-comment-dots" aria-hidden="true"></i></div>
                <div class="trips-more-copy">
                    <strong>Add comments for more context</strong>
                    <p>Emails and chats fragment information making it difficult to follow. Instead, you can comment within trips to convey additional information to approvers or travel teams.</p>
                </div>
                <a href="#">Learn More <i class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i></a>
            </article>
            <article class="trips-more-item">
                <div class="trips-more-icon"><i class="fa-regular fa-pen-to-square" aria-hidden="true"></i></div>
                <div class="trips-more-copy">
                    <strong>Update trip details</strong>
                    <p>Travel plans are often subject to change. Trips offers you the flexibility to update these changes anytime while keeping them visible to approvers and travel teams.</p>
                </div>
                <a href="#">Learn More <i class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i></a>
            </article>
            <article class="trips-more-item">
                <div class="trips-more-icon"><i class="fa-solid fa-rotate-left" aria-hidden="true"></i></div>
                <div class="trips-more-copy">
                    <strong>Recall submitted trips</strong>
                    <p>Updating missing information after submitting trips for approval is easy. Simply recall the trip, edit and update, then submit once again.</p>
                </div>
                <a href="#">Learn More <i class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i></a>
            </article>
            <article class="trips-more-item">
                <div class="trips-more-icon"><i class="fa-solid fa-wand-magic-sparkles" aria-hidden="true"></i></div>
                <div class="trips-more-copy">
                    <strong>Choose travel preferences</strong>
                    <p>You can set default values for your travel preferences so you don't have to choose them every time. This way you can create trips faster.</p>
                </div>
                <a href="#">Learn More <i class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i></a>
            </article>
            <article class="trips-more-item">
                <div class="trips-more-icon"><i class="fa-regular fa-file-lines" aria-hidden="true"></i></div>
                <div class="trips-more-copy">
                    <strong>Upload travel documents</strong>
                    <p>You can add your travel documents so they can be readily accessed for your travel team. Now, they do not spend time contacting you before every booking.</p>
                </div>
                <a href="#">Learn More <i class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i></a>
            </article>
            <article class="trips-more-item">
                <div class="trips-more-icon"><i class="fa-solid fa-list-check" aria-hidden="true"></i></div>
                <div class="trips-more-copy">
                    <strong>Choose booking options</strong>
                    <p>Booking options provided by your admin or travel team can be viewed and selected from within trips itself. Once booked, ticket information can also be downloaded.</p>
                </div>
                <a href="#">Learn More <i class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i></a>
            </article>
        </div>
    </section>
</div>
<?php render_expense_shell_end(); ?>
