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

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

<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 25px;">
    <?php if (empty($projects)): ?>
        <div class="card" style="grid-column: 1 / -1; text-align: center; padding: 60px;">
            <i class="bi bi-folder-x" style="font-size: 4rem; color: var(--border); margin-bottom: 20px; display: block;"></i>
            <h3 style="color: var(--text-muted);">No projects assigned yet.</h3>
        </div>
    <?php else: ?>
        <?php foreach ($projects as $proj): ?>
            <div class="card" style="padding: 0; overflow: hidden; transition: transform 0.3s;" onmouseover="this.style.transform='translateY(-5px)'" onmouseout="this.style.transform='translateY(0)'">
                <img src="<?= $proj['image'] ?? base_url('assets/images/placeholder.jpg') ?>" style="width: 100%; height: 200px; object-fit: cover;">
                <div style="padding: 25px;">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                        <span style="font-size: 0.75rem; text-transform: uppercase; font-weight: 700; color: var(--primary); letter-spacing: 1px;"><?= $proj['status'] ?></span>
                        <span style="font-size: 0.8rem; color: var(--text-muted);"><i class="bi bi-calendar3"></i> <?= date('M Y', strtotime($proj['start_date'])) ?></span>
                    </div>
                    <h3 style="margin: 0 0 15px 0; font-size: 1.25rem; font-weight: 700;"><?= $proj['title'] ?></h3>
                    
                    <?php if (!empty($proj['assigned_employees'])): ?>
                        <div style="margin-bottom: 20px;">
                            <div style="font-size: 0.7rem; color: var(--text-muted); font-weight: 700; text-transform: uppercase; margin-bottom: 5px;">Project Team</div>
                            <div style="display: flex; flex-wrap: wrap; gap: 5px;">
                                <?php foreach ($proj['assigned_employees'] as $name): ?>
                                    <span style="background: #f1f5f9; color: #475569; padding: 2px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 600;"><?= $name ?></span>
                                <?php endforeach; ?>
                            </div>
                        </div>
                    <?php endif; ?>

                    <p style="font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 20px;">
                        <?= substr(strip_tags($proj['description']), 0, 150) ?>...
                    </p>
                    <a href="<?= base_url('employee/project_expenses/' . $proj['id']) ?>" style="text-decoration: none; color: var(--primary); font-weight: 700; font-size: 0.9rem; display: flex; align-items: center; gap: 8px;">
                        Manage My Expenses <i class="bi bi-arrow-right"></i>
                    </a>
                </div>
            </div>
        <?php endforeach; ?>
    <?php endif; ?>
</div>

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