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

render_expense_shell_start('Add Expense | Expense', 'dashboard-page expense-page', 'expenses');
?>
<div class="page-surface page-surface--white">
    <header class="expense-subnav">
        <nav class="expense-tabs" aria-label="Expense tabs">
            <a class="expense-tab is-active" href="<?= e(route_url('expenses/new/')) ?>">
                <i class="fa-regular fa-square-plus"></i>
                <span>Add Expense</span>
            </a>
            <a class="expense-tab" href="<?= e(route_url('expenses/new/bulkadd/')) ?>">
                <i class="fa-regular fa-table-cells-large"></i>
                <span>Bulk Add Expenses</span>
            </a>
            <a class="expense-tab" href="<?= e(route_url('expenses/new/transactions/')) ?>">
                <i class="fa-regular fa-credit-card"></i>
                <span>From Cards</span>
            </a>
        </nav>
        <a class="page-close-button" href="<?= e(page_url('dashboard')) ?>" aria-label="Close">
            <i class="fa-solid fa-xmark" aria-hidden="true"></i>
        </a>
    </header>

    <section class="expense-form-layout">
        <div class="expense-receipt-panel panel">
            <div class="expense-upload-dropzone">
                <i class="fa-solid fa-arrow-up" aria-hidden="true"></i>
                <strong>Attach receipts from <span>computer</span> or <span>cloud</span></strong>
            </div>
        </div>

        <div class="expense-form-panel">
            <label class="expense-field">
                <span>Report</span>
                <select>
                    <option>Select</option>
                </select>
            </label>

            <label class="expense-field expense-field--accent">
                <span>Expense Date *</span>
                <input type="text" placeholder="eg: 31/01/2025">
            </label>

            <label class="expense-field">
                <span>Merchant</span>
                <select>
                    <option>Select or type to add</option>
                </select>
            </label>

            <label class="expense-field expense-field--accent">
                <span>Category *</span>
                <select>
                    <option>Select</option>
                </select>
            </label>

            <div class="expense-amount-row">
                <div class="expense-field expense-field--amount">
                    <div class="expense-label-line">
                        <span>Amount *</span>
                        <a href="#">Itemize</a>
                    </div>
                    <div class="expense-amount-input">
                        <select>
                            <option>INR</option>
                        </select>
                        <input type="text" value="0.00">
                    </div>
                </div>
                <label class="expense-check-row">
                    <input type="checkbox" checked>
                    <span>Claim reimbursement</span>
                    <i class="fa-regular fa-circle-question" aria-hidden="true"></i>
                </label>
            </div>

            <label class="expense-field">
                <span>Description</span>
                <textarea rows="4" placeholder="Max 500 characters"></textarea>
            </label>

            <label class="expense-field">
                <span>Reference#</span>
                <input type="text">
            </label>

            <div class="expense-footnote">
                <img src="<?= e(asset_url('images/notifications-new-8be8bc83fe9609e31e66bb52130f48e7.svg')) ?>" alt="" aria-hidden="true">
                <span>Why add expenses manually when you can get those receipts autoconscanned. <a href="#">Learn More!</a></span>
            </div>

            <footer class="expense-actions">
                <a class="expense-primary" href="<?= e(page_url('dashboard')) ?>">Save and Close</a>
                <a class="expense-secondary" href="<?= e(route_url('expenses/new/')) ?>">Save and New</a>
                <a class="expense-ghost" href="<?= e(page_url('dashboard')) ?>">Cancel</a>
            </footer>
        </div>
    </section>
</div>
<?php render_expense_shell_end(); ?>
