<?= $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;">My Attendance History</h2>
    </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);">Date</th>
                    <th style="padding: 15px 25px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted);">Status</th>
                    <th style="padding: 15px 25px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted);">Verification Photo</th>
                    <th style="padding: 15px 25px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted);">Approval Status</th>
                </tr>
            </thead>
            <tbody>
                <?php if (empty($attendance)): ?>
                    <tr>
                        <td colspan="4" style="padding: 50px; text-align: center; color: var(--text-muted);">No attendance records found.</td>
                    </tr>
                <?php else: ?>
                    <?php foreach ($attendance as $record): ?>
                        <tr style="border-bottom: 1px solid var(--border);">
                            <td style="padding: 20px 25px; font-weight: 700;"><?= date('D, d M Y', strtotime($record['date'])) ?></td>
                            <td style="padding: 20px 25px;">
                                <span style="font-weight: 600; color: <?= $record['status'] == 'Present' ? '#2ecc71' : '#f1c40f' ?>;">
                                    <?= $record['status'] ?>
                                </span>
                            </td>
                            <td style="padding: 20px 25px;">
                                <?php if ($record['image_path']): ?>
                                    <img src="<?= base_url($record['image_path']) ?>" style="width: 50px; height: 50px; border-radius: 8px; object-fit: cover; border: 2px solid #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.1);">
                                <?php else: ?>
                                    <span style="color: var(--text-muted);">No Photo</span>
                                <?php endif; ?>
                            </td>
                            <td style="padding: 20px 25px;">
                                <span style="padding: 5px 12px; border-radius: 50px; font-size: 0.75rem; font-weight: 700; 
                                    background: <?= $record['approval_status'] == 'Approved' ? 'rgba(46, 204, 113, 0.1)' : ($record['approval_status'] == 'Rejected' ? 'rgba(231, 76, 60, 0.1)' : 'rgba(52, 152, 219, 0.1)') ?>; 
                                    color: <?= $record['approval_status'] == 'Approved' ? '#2ecc71' : ($record['approval_status'] == 'Rejected' ? '#e74c3c' : '#3498db') ?>; 
                                    text-transform: uppercase;">
                                    <?= $record['approval_status'] ?>
                                </span>
                            </td>
                        </tr>
                    <?php endforeach; ?>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>

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