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

{% block title %}Attendance Record - Rapha-Bethel BNPS{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0">Attendance Record</h1>
        <a href="{% url 'staff:attendance_list' %}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left me-2"></i>Back to List
        </a>
    </div>

    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-clipboard-check me-2"></i>Attendance Details
                    </h6>
                </div>
                <div class="card-body">
                    <table class="table table-borderless">
                        <tr>
                            <td class="text-muted fw-bold" width="40%">Staff Member</td>
                            <td>{{ attendance.staff.user.get_full_name }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted fw-bold">Employee ID</td>
                            <td>{{ attendance.staff.employee_id }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted fw-bold">Role</td>
                            <td>{{ attendance.staff.get_role_display }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted fw-bold">Date</td>
                            <td>{{ attendance.date|date:"l, d F Y" }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted fw-bold">Status</td>
                            <td>
                                <span class="badge bg-{% if attendance.status == 'present' %}success{% elif attendance.status == 'absent' %}danger{% elif attendance.status == 'late' %}warning{% else %}info{% endif %} fs-6">
                                    {{ attendance.get_status_display }}
                                </span>
                            </td>
                        </tr>
                        <tr>
                            <td class="text-muted fw-bold">Check In</td>
                            <td>{{ attendance.check_in_time|default:"Not recorded" }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted fw-bold">Check Out</td>
                            <td>{{ attendance.check_out_time|default:"Not recorded" }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted fw-bold">Remarks</td>
                            <td>{{ attendance.remarks|default:"—" }}</td>
                        </tr>
                    </table>
                    <div class="d-flex justify-content-end gap-2 mt-3">
                        <a href="{% url 'staff:staff_detail' attendance.staff.pk %}" class="btn btn-outline-primary">
                            <i class="fas fa-user me-2"></i>View Staff Profile
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}