<div class="grid-cards">
    <div class="stat-card c-blue">
        <div class="stat-icon"><i class="fa-solid fa-users"></i></div>
        <div class="stat-label">Total Staff</div>
        <div class="stat-value"><?= (int) $summary['total_staff'] ?></div>
        <div class="stat-sub">Active accounts</div>
    </div>
    <div class="stat-card c-green">
        <div class="stat-icon"><i class="fa-solid fa-circle-check"></i></div>
        <div class="stat-label">Present Today</div>
        <div class="stat-value"><?= (int) ($summary['present'] ?? 0) ?></div>
        <div class="stat-sub">Marked so far</div>
    </div>
    <div class="stat-card c-red">
        <div class="stat-icon"><i class="fa-solid fa-circle-xmark"></i></div>
        <div class="stat-label">Absent Today</div>
        <div class="stat-value"><?= (int) ($summary['absent'] ?? 0) ?></div>
        <div class="stat-sub">Marked so far</div>
    </div>
    <div class="stat-card c-gold">
        <div class="stat-icon"><i class="fa-solid fa-umbrella-beach"></i></div>
        <div class="stat-label">On Leave</div>
        <div class="stat-value"><?= (int) ($summary['leave'] ?? 0) ?></div>
        <div class="stat-sub">Today</div>
    </div>
</div>

<form method="GET" action="<?= Router::url('attendance') ?>" style="margin-bottom:16px;display:flex;gap:8px;align-items:center;">
    <label style="font-size:12.5px;font-weight:700;">Date:</label>
    <input type="date" name="date" class="form-control" style="width:auto;" value="<?= e($date) ?>" onchange="this.form.submit()">
</form>

<form method="POST" action="<?= Router::url('attendance/store') ?>">
    <?= $csrf ?>
    <input type="hidden" name="date" value="<?= e($date) ?>">

    <div class="panel" style="padding:0;overflow-x:auto;">
    <table class="data-table">
    <thead><tr><th>Staff</th><th>Role</th><th>Status</th><th>Check In</th><th>Check Out</th></tr></thead>
    <tbody>
    <?php foreach ($staff as $s): ?>
    <tr>
        <td><strong><?= e($s['full_name']) ?></strong></td>
        <td><span class="badge badge-gray"><?= e($s['role_name']) ?></span></td>
        <td>
            <div class="att-status-group">
                <?php foreach (['PRESENT' => ['P', 'green'], 'HALF_DAY' => ['H', 'gold'], 'ABSENT' => ['A', 'red'], 'LEAVE' => ['L', 'blue']] as $val => $meta): ?>
                <label class="att-radio att-<?= $meta[1] ?> <?= ($s['status'] ?? 'PRESENT') === $val ? 'checked-active' : '' ?>" onclick="rmsAttSelect(this)">
                    <input type="radio" name="status[<?= $s['user_id'] ?>]" value="<?= $val ?>" <?= ($s['status'] ?? 'PRESENT') === $val ? 'checked' : '' ?>>
                    <span><?= $meta[0] ?></span>
                </label>
                <?php endforeach; ?>
            </div>
        </td>
        <td><input type="time" name="check_in[<?= $s['user_id'] ?>]" class="form-control" style="width:120px;" value="<?= e($s['check_in'] ?? '') ?>"></td>
        <td><input type="time" name="check_out[<?= $s['user_id'] ?>]" class="form-control" style="width:120px;" value="<?= e($s['check_out'] ?? '') ?>"></td>
    </tr>
    <?php endforeach; ?>
    <?php if (empty($staff)): ?>
    <tr><td colspan="5" style="text-align:center;color:var(--color-text-muted);padding:30px;">No active staff found.</td></tr>
    <?php endif; ?>
    </tbody>
    </table>
    </div>

    <?php if (Auth::can('attendance', 'add')): ?>
    <button type="submit" class="btn btn-primary" style="margin-top:16px;"><i class="fa-solid fa-floppy-disk"></i> Save Attendance for <?= date('d M Y', strtotime($date)) ?></button>
    <?php endif; ?>
</form>

<style>
.att-status-group { display: flex; gap: 4px; }
.att-radio {
    width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; cursor: pointer; border: 1px solid var(--color-border); color: var(--color-text-muted);
    position: relative;
}
.att-radio input { position: absolute; opacity: 0; }
.att-radio.checked-active { border-color: transparent; color: #fff; }
.att-radio.att-green.checked-active { background: var(--stat-green); }
.att-radio.att-gold.checked-active { background: var(--color-accent); }
.att-radio.att-red.checked-active { background: var(--stat-red); }
.att-radio.att-blue.checked-active { background: var(--stat-blue); }
</style>

<script>
function rmsAttSelect(label) {
    const group = label.closest('.att-status-group');
    group.querySelectorAll('.att-radio').forEach(l => l.classList.remove('checked-active'));
    label.classList.add('checked-active');
}
</script>
