<?= $this->extend('layouts/employee') ?>

<?= $this->section('content') ?>

<div class="card" style="padding: 0; overflow: hidden;">
    <div style="padding: 25px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center;">
        <h2 style="margin: 0; font-size: 1.25rem; font-weight: 800;">Expense History</h2>
        <div style="font-size: 0.9rem; color: var(--text-muted);">Total Recorded: <span style="font-weight: 700; color: var(--primary);"><?= count($expenses) ?> items</span></div>
    </div>
    
    <div style="overflow-x: auto;">
        <table style="width: 100%; border-collapse: collapse; min-width: 600px;">
            <thead>
                <tr style="background: rgba(0,0,0,0.02); text-align: left;">
                    <th style="padding: 15px 25px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted);">Project</th>
                    <th style="padding: 15px 25px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted);">Category</th>
                    <th style="padding: 15px 25px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted);">Description</th>
                    <th style="padding: 15px 25px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted);">Date</th>
                    <th style="padding: 15px 25px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); text-align: right;">Amount</th>
                </tr>
            </thead>
            <tbody>
                <?php if (empty($expenses)): ?>
                    <tr>
                        <td colspan="5" style="padding: 50px; text-align: center; color: var(--text-muted);">No expenses recorded yet.</td>
                    </tr>
                <?php else: ?>
                    <?php foreach ($expenses as $exp): ?>
                        <tr style="border-bottom: 1px solid var(--border); transition: background 0.3s;" onmouseover="this.style.background='rgba(0,0,0,0.01)'" onmouseout="this.style.background='transparent'">
                            <td style="padding: 20px 25px; font-weight: 700;"><?= $exp['project_title'] ?></td>
                            <td style="padding: 20px 25px;">
                                <span style="padding: 5px 12px; border-radius: 50px; font-size: 0.75rem; font-weight: 700; background: rgba(52, 152, 219, 0.1); color: #3498db; text-transform: uppercase;">
                                    <?= $exp['category'] ?>
                                </span>
                            </td>
                            <td style="padding: 20px 25px; color: var(--text-muted); font-size: 0.9rem;"><?= $exp['description'] ?></td>
                            <td style="padding: 20px 25px; font-size: 0.9rem;"><?= date('d M, Y', strtotime($exp['date'])) ?></td>
                            <td style="padding: 20px 25px; text-align: right; font-weight: 800; color: var(--text-main);">₹<?= number_format($exp['amount'], 2) ?></td>
                        </tr>
                    <?php endforeach; ?>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>

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