<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Employee Dashboard</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
    <style>
        * { box-sizing: border-box; font-family: 'Roboto', sans-serif; margin: 0; padding: 0; }
        body { background-color: #f4f6f8; color: #333; padding: 20px; }
        h2 { text-align: center; margin-bottom: 20px; color: #2c3e50; }
        .container { max-width: 1000px; margin: auto; background: #fff; padding: 25px; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
        form { display: flex; justify-content: center; margin-bottom: 20px; gap: 10px; }
        select, button { padding: 10px 15px; font-size: 16px; border-radius: 5px; border: 1px solid #ccc; }
        button { background-color: #3498db; color: #fff; border: none; cursor: pointer; transition: 0.3s; }
        button:hover { background-color: #2980b9; }
        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
        th, td { padding: 12px 15px; text-align: center; border-bottom: 1px solid #ddd; }
        th { background-color: #3498db; color: white; }
        tr:hover { background-color: #f1f1f1; }
        .attendance-title { margin-top: 30px; text-align: center; color: #2c3e50; font-size: 20px; }
        a.logout { display: inline-block; margin-top: 20px; text-decoration: none; color: #fff; background-color: #e74c3c; padding: 10px 20px; border-radius: 5px; transition: 0.3s; }
        a.logout:hover { background-color: #c0392b; }
        .action-btn { padding: 5px 10px; border-radius: 5px; border: none; cursor: pointer; margin: 2px; font-size: 14px; }
        .edit-btn { background-color: #f39c12; color: #fff; }
        .edit-btn:hover { background-color: #d68910; }
        .delete-btn { background-color: #e74c3c; color: #fff; }
        .delete-btn:hover { background-color: #c0392b; }
        .message { text-align: center; margin-bottom: 15px; font-weight: 500; }
        .success { color: green; }
        .error { color: red; }
    </style>
</head>
<body>

<div class="container">
    <h2>Employee Dashboard</h2>
    <?php if(session()->getFlashdata('success')): ?>
        <div class="message success"><?= session()->getFlashdata('success') ?></div>
    <?php endif; ?>
    <?php if(session()->getFlashdata('error')): ?>
        <div class="message error"><?= session()->getFlashdata('error') ?></div>
    <?php endif; ?>

    <form method="post" action="<?= site_url('employee/punchin') ?>">
        <select name="mode" required>
            <option value="">Select Work Mode</option>
            <option value="WFH">WFH</option>
            <option value="Office">Office</option>
        </select>
        <button type="submit">Punch In</button>
    </form>
    <form method="post" action="<?= site_url('employee/punchout') ?>">
        <button type="submit">Punch Out</button>
    </form>

    <h3 class="attendance-title">My Attendance</h3>
    <table>
        <tr>
            <th>Employee Name</th>
            <th>Date</th>
            <th>Punch In</th>
            <th>Punch Out</th>
            <th>Mode</th>
        </tr>
        <?php if(!empty($records)): ?>
            <?php foreach($records as $r): ?>
            <tr>
                <td><?= $r['name'] ?? '---' ?></td>
                <td><?= $r['attendance_date'] ?></td>
                <td><?= $r['punch_in'] ?></td>
                <td><?= $r['punch_out'] ?? '---' ?></td>
                <td><?= $r['work_mode'] ?></td>
            </tr>
            <?php endforeach; ?>
        <?php else: ?>
            <tr>
                <td colspan="6">No attendance records found</td>
            </tr>
        <?php endif; ?>
    </table>

    <a href="<?= site_url('logout') ?>" class="logout">Logout</a>
</div>

</body>
</html>
