{% extends 'base.html' %}
{% load static %}

{% block title %}Mark Staff Attendance — Rapha-Bethel BNPS{% endblock %}

{% block extra_css %}
<style>
.att-table th { font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:#888;padding:.6rem .85rem;background:#fdfaf7;border-bottom:1px solid #ede8e3; }
.att-table td { padding:.65rem .85rem;border-bottom:1px solid #f5f0ea;vertical-align:middle;font-size:.875rem; }
.att-table tbody tr:last-child td { border-bottom:none; }
.att-table tbody tr:hover td { background:#fdfaf7; }

.status-pills { display:flex;gap:.35rem;flex-wrap:wrap; }
.status-pill input[type=radio] { display:none; }
.status-pill label {
    padding:.3rem .7rem;border-radius:20px;font-size:.75rem;font-weight:600;
    cursor:pointer;border:1.5px solid #e0d8d0;color:#666;transition:all .15s;white-space:nowrap;
}
.status-pill input[value="present"]:checked + label { background:#dcfce7;border-color:#22c55e;color:#166534; }
.status-pill input[value="absent"]:checked  + label { background:#fee2e2;border-color:var(--rb-red);color:#991b1b; }
.status-pill input[value="late"]:checked    + label { background:#fef9c3;border-color:#ca8a04;color:#854d0e; }
.status-pill input[value="leave"]:checked   + label { background:#dbeafe;border-color:#3b82f6;color:#1e40af; }
.status-pill label:hover { border-color:#aaa;color:#333; }

.staff-avatar { width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,var(--rb-red-dark),var(--rb-red));color:#fff;font-weight:700;font-size:.8rem;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.bulk-bar { background:#fff;border:1px solid #ede8e3;border-radius:10px;padding:.75rem 1rem;margin-bottom:1rem;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem; }
</style>
{% endblock %}

{% block content %}
<div class="rb-page-header">
    <div>
        <h1 class="rb-page-title">Mark Staff Attendance</h1>
        <p class="rb-page-subtitle">{{ today|date:"l, d N Y" }}</p>
    </div>
    <a href="{% url 'staff:attendance_list' %}" class="btn btn-outline-secondary btn-sm">
        <i class="fas fa-list me-1"></i> Attendance List
    </a>
</div>

<form method="post">
    {% csrf_token %}
    <input type="hidden" name="date" value="{{ today|date:'Y-m-d' }}">

    <div class="bulk-bar">
        <span style="font-size:.8rem;font-weight:600;color:#666">Mark all as:</span>
        <button type="button" class="btn btn-sm" style="background:#dcfce7;color:#166534;border:none" onclick="markAll('present')">
            <i class="fas fa-check-circle me-1"></i> Present
        </button>
        <button type="button" class="btn btn-sm" style="background:#fee2e2;color:#991b1b;border:none" onclick="markAll('absent')">
            <i class="fas fa-times-circle me-1"></i> Absent
        </button>
        <button type="button" class="btn btn-sm" style="background:#fef9c3;color:#854d0e;border:none" onclick="markAll('late')">
            <i class="fas fa-clock me-1"></i> Late
        </button>
        <span style="margin-left:auto;font-size:.8rem;color:#aaa" id="markedCount">0 of {{ staff_members|length }} marked</span>
    </div>

    <div class="card mb-4">
        <div class="table-responsive">
            <table class="att-table w-100">
                <thead>
                    <tr>
                        <th>Staff Member</th>
                        <th>Role</th>
                        <th>Status</th>
                        <th style="width:180px">Notes</th>
                    </tr>
                </thead>
                <tbody>
                    {% for member in staff_members %}
                    <tr>
                        <td>
                            <div style="display:flex;align-items:center;gap:.65rem">
                                <div class="staff-avatar">{{ member.user.first_name|first }}{{ member.user.last_name|first }}</div>
                                <div>
                                    <div style="font-weight:600">{{ member.user.get_full_name }}</div>
                                    <div style="font-size:.75rem;color:#aaa">{{ member.employee_id }}</div>
                                </div>
                            </div>
                        </td>
                        <td><span class="rb-badge rb-badge-gray">{{ member.get_role_display }}</span></td>
                        <td>
                            <input type="hidden" name="staff_ids" value="{{ member.pk }}">
                            <div class="status-pills">
                                <div class="status-pill">
                                    <input type="radio" name="status_{{ member.pk }}" id="p_{{ member.pk }}" value="present" onchange="updateCount()">
                                    <label for="p_{{ member.pk }}">Present</label>
                                </div>
                                <div class="status-pill">
                                    <input type="radio" name="status_{{ member.pk }}" id="a_{{ member.pk }}" value="absent" onchange="updateCount()">
                                    <label for="a_{{ member.pk }}">Absent</label>
                                </div>
                                <div class="status-pill">
                                    <input type="radio" name="status_{{ member.pk }}" id="l_{{ member.pk }}" value="late" onchange="updateCount()">
                                    <label for="l_{{ member.pk }}">Late</label>
                                </div>
                                <div class="status-pill">
                                    <input type="radio" name="status_{{ member.pk }}" id="lv_{{ member.pk }}" value="leave" onchange="updateCount()">
                                    <label for="lv_{{ member.pk }}">Leave</label>
                                </div>
                            </div>
                        </td>
                        <td>
                            <input type="text" name="notes_{{ member.pk }}" class="form-control form-control-sm" placeholder="Optional note" style="min-height:36px;font-size:.8rem">
                        </td>
                    </tr>
                    {% empty %}
                    <tr><td colspan="4" class="text-center py-4 text-muted">No active staff members found.</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <div class="d-flex justify-content-end gap-2">
        <a href="{% url 'staff:attendance_list' %}" class="btn btn-outline-secondary">Cancel</a>
        <button type="submit" class="btn btn-rb-primary px-4">
            <i class="fas fa-save me-2"></i> Save Attendance
        </button>
    </div>
</form>
{% endblock %}

{% block extra_js %}
<script>
function markAll(status) {
    document.querySelectorAll('input[type=radio][value="' + status + '"]').forEach(r => {
        r.checked = true;
    });
    updateCount();
}
function updateCount() {
    const rows = document.querySelectorAll('tbody tr');
    let marked = 0;
    rows.forEach(row => { if (row.querySelector('input[type=radio]:checked')) marked++; });
    const el = document.getElementById('markedCount');
    if (el) el.textContent = marked + ' of ' + rows.length + ' marked';
}
updateCount();
</script>
{% endblock %}