<?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('Cards | Expense', 'dashboard-page cards-import-page', 'cards');
?>
<div class="page-surface page-surface--white">
    <header class="import-header">
        <h1>Import Statement</h1>
        <a class="page-close-button" href="<?= e(page_url('cards')) ?>" aria-label="Close">
            <i class="fa-solid fa-xmark" aria-hidden="true"></i>
        </a>
    </header>

    <div class="import-stepper" aria-label="Import statement steps">
        <span class="import-step is-complete"><strong>1</strong> Enter Card Details</span>
        <span class="import-step"><strong>2</strong> Select file</span>
        <span class="import-step"><strong>3</strong> Map fields</span>
        <span class="import-step"><strong>4</strong> Finish Import</span>
    </div>

    <section class="import-form-shell">
        <div class="import-form">
            <label class="import-field import-field--toggle">
                <span>Is this a corporate card? *</span>
                <div class="import-radios">
                    <label><input type="radio" name="corp"> <span>Yes</span></label>
                    <label><input type="radio" name="corp" checked> <span>No</span></label>
                </div>
            </label>

            <label class="import-field import-field--toggle">
                <span>Select Card Type *</span>
                <div class="import-radios">
                    <label><input type="radio" name="type" checked> <span>Debit Card</span></label>
                    <label><input type="radio" name="type"> <span>Credit Card</span></label>
                </div>
            </label>

            <label class="import-field">
                <span>Card/Account Name *</span>
                <input type="text">
            </label>

            <label class="import-field">
                <span>Currency *</span>
                <select>
                    <option>INR- Indian Rupee</option>
                </select>
            </label>

            <label class="import-field">
                <span>Bank Name</span>
                <input type="text">
            </label>

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

            <footer class="expense-actions expense-actions--center">
                <a class="expense-primary" href="<?= e(route_url('cards/import-statement/select-file/')) ?>">Save and Continue</a>
                <a class="expense-ghost" href="<?= e(page_url('cards')) ?>">Cancel</a>
            </footer>
        </div>
    </section>
</div>
<?php render_expense_shell_end(); ?>
