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

$importColumns = [
    'approved_amount',
    'bill_date',
    'bill_number',
    'claim_amount',
    'claim_month',
    'employee_code',
    'notes',
    'dd-MMM-yyyy',
    'dd/MMM/yyyy',
    'dd/MM/yyyy',
    'MM.dd.yyyy',
    'dd-MM-yyyy',
    'dd/MM/yy',
    'yyyy-MM-dd',
];

$mapFields = [
    ['label' => 'Report Name *', 'required' => true, 'format' => false],
    ['label' => 'Report Number', 'required' => false, 'format' => false],
    ['label' => 'Business Purpose', 'required' => false, 'format' => false],
    ['label' => 'Start Date', 'required' => false, 'format' => true],
    ['label' => 'End Date', 'required' => false, 'format' => true],
    ['label' => 'Report Type', 'required' => false, 'format' => false],
    ['label' => "Approver's Email", 'required' => false, 'format' => false],
    ['label' => 'Expense Date *', 'required' => true, 'format' => true],
    ['label' => 'Expense Currency Code', 'required' => false, 'format' => false],
    ['label' => 'Expense Location', 'required' => false, 'format' => false],
    ['label' => 'Exchange Rate', 'required' => false, 'format' => false],
    ['label' => 'Mileage Rate', 'required' => false, 'format' => false],
    ['label' => 'Distance', 'required' => false, 'format' => false],
    ['label' => 'Entry Number', 'required' => false, 'format' => false],
    ['label' => 'Mileage Unit', 'required' => false, 'format' => false],
    ['label' => 'Start Odometer Reading', 'required' => false, 'format' => false],
    ['label' => 'End Odometer Reading', 'required' => false, 'format' => false],
    ['label' => 'Mileage Type', 'required' => false, 'format' => false],
    ['label' => 'Merchant Name', 'required' => false, 'format' => false],
    ['label' => 'Reference#', 'required' => false, 'format' => false],
    ['label' => 'Is Reimbursable', 'required' => false, 'format' => false],
    ['label' => 'Is Billable', 'required' => false, 'format' => false],
    ['label' => 'Expense Customer Name', 'required' => false, 'format' => false],
    ['label' => 'Paid Through', 'required' => false, 'format' => false],
    ['label' => 'Payment Mode', 'required' => false, 'format' => false],
    ['label' => 'Is Inclusive Tax', 'required' => false, 'format' => false],
    ['label' => "Owner's Email", 'required' => false, 'format' => false],
    ['label' => 'Expense Category *', 'required' => true, 'format' => false],
    ['label' => 'Expense Amount *', 'required' => true, 'format' => false],
    ['label' => 'Expense Project Name', 'required' => false, 'format' => false],
    ['label' => 'Expense Description', 'required' => false, 'format' => false],
    ['label' => 'Product Type', 'required' => false, 'format' => false],
    ['label' => 'Tax Name', 'required' => false, 'format' => false],
    ['label' => 'Tax Percentage', 'required' => false, 'format' => false],
    ['label' => 'Tax Type', 'required' => false, 'format' => false],
];

render_expense_shell_start('Import Reports | Expense', 'dashboard-page reports-import-page', 'reports');
?>
<div class="page-surface page-surface--white">
    <header class="import-header">
        <h1>Import Reports</h1>
        <a class="page-close-button" href="<?= e(page_url('reports')) ?>" aria-label="Close">
            <i class="fa-solid fa-xmark" aria-hidden="true"></i>
        </a>
    </header>

    <div class="import-stepper" aria-label="Import reports steps" data-report-import-stepper>
        <span class="import-step is-active" data-report-import-step="select"><strong>1</strong> Select file</span>
        <span class="import-step" data-report-import-step="map"><strong>2</strong> Map fields</span>
        <span class="import-step" data-report-import-step="finish"><strong>3</strong> Finish Import</span>
    </div>

    <section class="report-import-shell" data-report-import>
        <div class="report-import-stage" data-report-import-stage="select">
            <div class="import-upload-shell report-import-upload-shell">
                <div class="import-upload-box report-import-upload-box" data-report-import-box>
                    <div class="import-upload-target report-import-dropzone" data-report-import-dropzone>
                        <input type="file" accept=".csv,.tsv" data-report-import-input hidden>
                        <i class="fa-solid fa-arrow-up" aria-hidden="true"></i>
                        <strong data-report-import-file-title>Drag and drop file to import</strong>
                        <span data-report-import-file-hint>( or )</span>
                        <button type="button" class="expense-primary expense-primary--small" data-report-import-choose>Choose File</button>
                        <small>File Format: CSV or TSV</small>
                        <div class="report-import-file-meta is-hidden" data-report-import-file-meta>
                            <i class="fa-solid fa-file-csv" aria-hidden="true"></i>
                            <strong data-report-import-file-meta-name>reimbursements_sample.csv</strong>
                            <button type="button" class="report-import-file-remove" data-report-import-remove>Remove</button>
                        </div>
                    </div>
                </div>

                <p class="import-note">View our <a href="#">sample file</a> to ensure you import files in the standard format.</p>

                <label class="bank-terms-check bank-terms-check--inline">
                    <input type="checkbox">
                    <span>This file is password protected</span>
                </label>

                <label class="import-field import-field--compact">
                    <span>Character Encoding *</span>
                    <select>
                        <option>UTF-8 (Unicode)</option>
                        <option>ISO-8859-1</option>
                        <option>ISO-8859-2</option>
                        <option>ISO-8859-9 (Turkish)</option>
                        <option>GB2312 (Simplified Chinese)</option>
                        <option>Big5 (Traditional Chinese)</option>
                        <option>Shift_JIS (Japanese)</option>
                    </select>
                </label>

                <footer class="expense-actions expense-actions--center">
                    <button type="button" class="expense-primary" data-report-import-next disabled>Next</button>
                    <a class="expense-ghost" href="<?= e(page_url('reports')) ?>">Cancel</a>
                </footer>
            </div>
        </div>

        <div class="report-import-stage is-hidden" data-report-import-stage="map" aria-hidden="true">
            <div class="report-import-map-shell">
                <div class="report-import-map-summary">
                    <p>File selected: <strong data-report-import-file-name>reimbursements_sample.csv</strong></p>
                    <div class="report-import-map-note">
                        <i class="fa-solid fa-circle-info" aria-hidden="true"></i>
                        <span>The best match to each field on the selected file has been auto-selected</span>
                    </div>
                    <p class="report-import-map-count">Total fields: 35 <span>( 35 Unmapped fields )</span></p>
                </div>

                <div class="report-import-map-head">
                    <span>Predefined fields</span>
                    <span>Fields in imported file</span>
                </div>

                <div class="report-import-map-grid">
                    <?php foreach ($mapFields as $field): ?>
                        <div class="report-import-map-label<?= !empty($field['required']) ? ' report-import-map-label--required' : '' ?>">
                            <?= e($field['label']) ?>
                        </div>
                        <div class="report-import-map-control">
                            <select>
                                <option>Select</option>
                                <?php foreach ($importColumns as $column): ?>
                                    <option><?= e($column) ?></option>
                                <?php endforeach; ?>
                            </select>
                            <?php if (!empty($field['format'])): ?>
                                <select class="report-import-format">
                                    <option>yyyy-MM-dd</option>
                                    <option>dd/MM/yyyy</option>
                                    <option>dd/MMM/yyyy</option>
                                    <option>dd-MM-yyyy</option>
                                    <option>MM.dd.yyyy</option>
                                </select>
                            <?php endif; ?>
                        </div>
                    <?php endforeach; ?>
                </div>

                <label class="bank-terms-check bank-terms-check--inline">
                    <input type="checkbox" checked>
                    <span>Save these selections for use during future imports</span>
                </label>

                <footer class="expense-actions expense-actions--left">
                    <button type="button" class="expense-ghost" data-report-import-prev>&lsaquo; Previous</button>
                    <button type="button" class="expense-primary" data-report-import-next-step>Next</button>
                    <a class="expense-ghost" href="<?= e(page_url('reports')) ?>">Cancel</a>
                </footer>
            </div>
        </div>

        <div class="report-import-stage is-hidden" data-report-import-stage="finish" aria-hidden="true">
            <div class="report-import-finish panel">
                <div class="report-import-finish-icon"><i class="fa-solid fa-circle-check" aria-hidden="true"></i></div>
                <h2>Ready to finish import</h2>
                <p>Your file is mapped and ready to import into Reports.</p>
                <div class="expense-actions expense-actions--center">
                    <button type="button" class="expense-primary">Import</button>
                    <button type="button" class="expense-ghost" data-report-import-prev-step>&lsaquo; Back</button>
                </div>
            </div>
        </div>
    </section>
</div>
<?php render_expense_shell_end(); ?>
