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

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

<div style="min-height: 100vh;">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;">
        <div>
            <h2 style="margin-bottom: 5px;">Employee Attendance</h2>
            <p style="color: var(--text-muted);">Manage and approve employee daily attendance records.</p>
        </div>
    </div>

    <?php if (session()->getFlashdata('success')): ?>
        <div style="background: rgba(46, 204, 113, 0.1); color: #2ecc71; padding: 15px; border-radius: 8px; border: 1px solid rgba(46, 204, 113, 0.2); margin-bottom: 25px; display: flex; align-items: center; gap: 10px;">
            <i class="bi bi-check-circle-fill"></i>
            <?= session()->getFlashdata('success') ?>
        </div>
    <?php endif; ?>

    <!-- Pending Attendance Section -->
    <div class="admin-card" style="margin-bottom: 40px;">
        <div style="padding: 20px 25px; border-bottom: 1px solid var(--border-admin); display: flex; justify-content: space-between; align-items: center;">
            <h3 style="font-size: 1.1rem; font-weight: 700; margin: 0; color: var(--primary);">Pending Approvals</h3>
            <span style="background: var(--primary); color: #fff; padding: 2px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600;"><?= count($pending_attendance) ?> Pending</span>
        </div>
        <div style="overflow-x: auto;">
            <table class="admin-table">
                <thead>
                    <tr>
                        <th>Employee</th>
                        <th>Image</th>
                        <th>Date</th>
                        <th>Status</th>
                        <th>Remarks</th>
                        <th style="text-align: right;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <?php if (empty($pending_attendance)): ?>
                        <tr>
                            <td colspan="5" style="text-align: center; padding: 40px; color: var(--text-muted);">No pending attendance records found.</td>
                        </tr>
                    <?php else: ?>
                        <?php foreach ($pending_attendance as $record): ?>
                            <tr>
                                <td style="font-weight: 600;"><?= $record['user_name'] ?></td>
                                <td>
                                    <?php if ($record['image_path']): ?>
                                        <img src="<?= base_url($record['image_path']) ?>" style="width: 50px; height: 50px; border-radius: 8px; object-fit: cover; border: 1px solid var(--border);">
                                    <?php else: ?>
                                        <div style="width: 50px; height: 50px; border-radius: 8px; background: var(--border); display: flex; align-items: center; justify-content: center;"><i class="bi bi-person"></i></div>
                                    <?php endif; ?>
                                </td>
                                <td><?= date('M d, Y', strtotime($record['date'])) ?></td>
                                <td>
                                    <span class="status-badge" style="background: <?= $record['status'] == 'Present' ? 'rgba(46, 204, 113, 0.1)' : ($record['status'] == 'Half Day' ? 'rgba(241, 196, 15, 0.1)' : 'rgba(231, 76, 60, 0.1)') ?>; color: <?= $record['status'] == 'Present' ? '#2ecc71' : ($record['status'] == 'Half Day' ? '#f1c40f' : '#e74c3c') ?>;">
                                        <?= $record['status'] ?>
                                    </span>
                                </td>
                                <td style="max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><?= $record['remarks'] ?: '-' ?></td>
                                <td style="text-align: right;">
                                    <div style="display: flex; gap: 8px; justify-content: flex-end;">
                                        <a href="<?= base_url('admin/attendance_approve/' . $record['id']) ?>" class="btn-action edit" title="Approve" style="background: #2ecc71; color: #fff;"><i class="bi bi-check-lg"></i></a>
                                        <a href="<?= base_url('admin/attendance_reject/' . $record['id']) ?>" class="btn-action delete" title="Reject" onclick="return confirm('Are you sure you want to reject this attendance?')" style="background: #e74c3c; color: #fff;"><i class="bi bi-x-lg"></i></a>
                                    </div>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>

    <!-- All Attendance History -->
    <div class="admin-card">
        <div style="padding: 20px 25px; border-bottom: 1px solid var(--border-admin);">
            <h3 style="font-size: 1.1rem; font-weight: 700; margin: 0;">Attendance History</h3>
        </div>
        <div style="overflow-x: auto;">
            <table class="admin-table">
                <thead>
                    <tr>
                        <th>Employee</th>
                        <th>Image</th>
                        <th>Date</th>
                        <th>Status</th>
                        <th>Approval</th>
                        <th>Remarks</th>
                    </tr>
                </thead>
                <tbody>
                    <?php if (empty($all_attendance)): ?>
                        <tr>
                            <td colspan="5" style="text-align: center; padding: 40px; color: var(--text-muted);">No attendance records found.</td>
                        </tr>
                    <?php else: ?>
                        <?php foreach ($all_attendance as $record): ?>
                            <tr>
                                <td style="font-weight: 600;"><?= $record['user_name'] ?></td>
                                <td>
                                    <?php if ($record['image_path']): ?>
                                        <img src="<?= base_url($record['image_path']) ?>" style="width: 40px; height: 40px; border-radius: 6px; object-fit: cover; border: 1px solid var(--border);">
                                    <?php else: ?>
                                        <div style="width: 40px; height: 40px; border-radius: 6px; background: var(--border); display: flex; align-items: center; justify-content: center; font-size: 0.8rem;"><i class="bi bi-person"></i></div>
                                    <?php endif; ?>
                                </td>
                                <td><?= date('M d, Y', strtotime($record['date'])) ?></td>
                                <td>
                                    <span style="font-weight: 500;"><?= $record['status'] ?></span>
                                </td>
                                <td>
                                    <span class="status-badge" style="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') ?>;">
                                        <?= $record['approval_status'] ?>
                                    </span>
                                </td>
                                <td><?= $record['remarks'] ?: '-' ?></td>
                            </tr>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

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