<?= $this->extend('layout/management_layout') ?>
<?= $this->section('content') ?>

<div class="container mt-4">
    <h1>Add Reimbursement</h1>

    <form method="post" action="<?= base_url('reimbursements/store') ?>" enctype="multipart/form-data">
        <?= csrf_field() ?>
        <input type="hidden" name="expense_id" value="<?= esc($expense_id ?? '') ?>">

        <div class="mb-3">
            <label>Amount</label>
            <input
                type="number"
                step="0.01"
                name="amount"
                class="form-control"
                required
                value="<?= old('amount', isset($prefill_amount) ? number_format((float)$prefill_amount, 2, '.', '') : '') ?>">
        </div>

        <div class="mb-3">
            <label>Reimbursed To</label>
            <?php $selectedRecipient = (string) (old('reimbursed_to') ?? ''); ?>
            <select name="reimbursed_to" class="form-control" required>
                <option value="">-- Select Person --</option>
                <?php foreach ($users as $user): ?>
                    <?php
                        $id    = (string) ($user['id'] ?? '');
                        $label = trim(($user['firstname'] ?? '') . ' ' . ($user['lastname'] ?? ''));
                    ?>
                    <option value="<?= esc($id) ?>" <?= $selectedRecipient !== '' && $selectedRecipient === $id ? 'selected' : '' ?>>
                        <?= esc($label !== '' ? $label : 'Unknown') ?>
                    </option>
                <?php endforeach; ?>
            </select>
        </div>

        <div class="mb-3">
            <label>Reimbursement Method</label>
            <select name="reimbursement_method" id="reimbursement_method" class="form-control" required>
                <option value="">-- Select Method --</option>
                <option value="Cash">Cash</option>
                <option value="Check">Check</option>
            </select>
        </div>

        <div class="mb-3 d-none" id="check_number_group">
            <label>Check Number</label>
            <input type="text" name="check_number" class="form-control">
        </div>

        <div class="mb-3 d-none" id="check_receipt_group">
            <label>Check Receipt Image</label>
            <input type="file" name="receipt" class="form-control">
        </div>

        <div class="mb-3">
            <label>Description</label>
            <textarea name="description" class="form-control"></textarea>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
        <a href="<?= base_url('reimbursements') ?>" class="btn btn-secondary">Cancel</a>
    </form>
</div>

<?= $this->endSection() ?>

<?= $this->section('scripts') ?>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const methodSelect = document.getElementById('reimbursement_method');
        const checkNumberGroup = document.getElementById('check_number_group');
        const checkReceiptGroup = document.getElementById('check_receipt_group');

        methodSelect.addEventListener('change', function() {
            const isCheck = this.value === 'Check';
            checkNumberGroup.classList.toggle('d-none', !isCheck);
            checkReceiptGroup.classList.toggle('d-none', !isCheck);
            checkReceiptGroup.querySelector('input').required = isCheck;
        });
    });
</script>

<?= $this->endSection() ?>
