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

{% block title %}Absences | FoxFitt{% endblock %}

{% block content %}
{% comment %}
=== ABSENCES LIST PAGE ===
Filtered, paginated table of absences. Each row links to edit and
has an inline delete form. CSV export button only shows for admin.
{% endcomment %}
<div class="container-fluid py-3">

    {# === Page header — title + log/export action buttons === #}
    <div class="d-flex justify-content-between align-items-start mb-3">
        <div>
            <h1 class="page-title mb-0">
                <i class="fas fa-user-clock me-2" style="color: var(--accent);"></i>Absences
            </h1>
            <small class="text-muted">{{ page.paginator.count }} record{{ page.paginator.count|pluralize }}</small>
        </div>
        <div class="d-flex gap-2">
            <a href="{% url 'absence_log' %}" class="btn btn-accent btn-sm">
                <i class="fas fa-plus me-1"></i> Log Absence
            </a>
            {% if is_admin %}
                <a href="{% url 'absence_export_csv' %}?{{ request.GET.urlencode }}" class="btn btn-outline-secondary btn-sm">
                    <i class="fas fa-download me-1"></i> CSV
                </a>
            {% endif %}
        </div>
    </div>

    {# === Flash messages (e.g. "Absence deleted") === #}
    {% if messages %}
        {% for m in messages %}<div class="alert alert-{{ m.tags }}">{{ m }}</div>{% endfor %}
    {% endif %}

    {# === Filter bar — 7 fields stacked on mobile, wrapped on desktop === #}
    <form method="get" class="card mb-3">
        <div class="card-body p-2 d-flex flex-wrap gap-2 align-items-end">
            <div>
                <label class="form-label small mb-0">Worker</label>
                <select name="worker" class="form-select form-select-sm" style="min-width: 160px;">
                    <option value="">All</option>
                    {% for w in workers_qs %}
                    <option value="{{ w.id }}" {% if filter_worker == w.id|stringformat:"s" %}selected{% endif %}>{{ w.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label class="form-label small mb-0">Team</label>
                <select name="team" class="form-select form-select-sm" style="min-width: 140px;">
                    <option value="">All</option>
                    {% for t in teams_qs %}
                    <option value="{{ t.id }}" {% if filter_team == t.id|stringformat:"s" %}selected{% endif %}>{{ t.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label class="form-label small mb-0">Project</label>
                <select name="project" class="form-select form-select-sm" style="min-width: 140px;">
                    <option value="">All</option>
                    {% for p in projects_qs %}
                    <option value="{{ p.id }}" {% if filter_project == p.id|stringformat:"s" %}selected{% endif %}>{{ p.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                {# === Reason filter — multi-checkbox dropdown (Fix A2, May 2026) === #}
                {# All checkboxes share name="reason" so Django gets multiple values #}
                {# in request.GET.getlist('reason') when the form submits. The wrapping #}
                {# <ul onclick="event.stopPropagation();"> keeps the dropdown open while #}
                {# the user is picking multiple boxes; submitting via the Apply button #}
                {# closes it normally. #}
                <label class="form-label small mb-0">Reasons</label>
                <div class="dropdown">
                    <button class="btn btn-outline-secondary btn-sm dropdown-toggle form-select-sm" type="button" data-bs-toggle="dropdown" style="min-width: 140px; text-align: left;">
                        {% if filter_reasons %}{{ filter_reasons|length }} selected{% else %}All{% endif %}
                    </button>
                    <ul class="dropdown-menu p-2" style="min-width: 220px;" onclick="event.stopPropagation();">
                        {% for key, label in reason_choices %}
                            <li>
                                <label class="form-check d-block mb-0">
                                    <input type="checkbox" class="form-check-input" name="reason" value="{{ key }}"
                                           {% if key in filter_reasons %}checked{% endif %}>
                                    <span class="form-check-label ms-1">{{ label }}</span>
                                </label>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
            <div>
                <label class="form-label small mb-0">From</label>
                <input type="date" name="date_from" value="{{ filter_date_from }}" class="form-control form-control-sm">
            </div>
            <div>
                <label class="form-label small mb-0">To</label>
                <input type="date" name="date_to" value="{{ filter_date_to }}" class="form-control form-control-sm">
            </div>
            <div>
                <label class="form-label small mb-0">Paid?</label>
                <select name="paid" class="form-select form-select-sm">
                    <option value="">All</option>
                    <option value="paid" {% if filter_paid == 'paid' %}selected{% endif %}>Paid</option>
                    <option value="unpaid" {% if filter_paid == 'unpaid' %}selected{% endif %}>Unpaid</option>
                </select>
            </div>
            <button type="submit" class="btn btn-outline-primary btn-sm">Apply</button>
            <a href="{% url 'absence_list' %}" class="btn btn-outline-secondary btn-sm">Clear</a>
        </div>
    </form>

    {# === Table of absences === #}
    <div class="card">
        <div class="card-body p-0">
            <table class="table table-sm mb-0">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Worker</th>
                        <th>Reason</th>
                        <th>Paid?</th>
                        <th>Logged by</th>
                        <th>Notes</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                {% for a in page %}
                    <tr>
                        <td>{{ a.date|date:"d M Y" }}</td>
                        <td>{{ a.worker.name }}</td>
                        <td><span class="badge badge-absence-{{ a.reason }}">{{ a.get_reason_display }}</span></td>
                        <td>
                            {% if a.is_paid %}
                                <i class="fas fa-check-circle" style="color: var(--badge-bonus-bg);"></i>
                                {% if a.payroll_adjustment %}<small class="text-muted">({{ a.payroll_adjustment.amount|money }})</small>{% endif %}
                            {% else %}
                                <i class="far fa-circle text-muted"></i>
                            {% endif %}
                        </td>
                        <td>{{ a.logged_by.username|default:"—" }}</td>
                        <td class="text-muted">{{ a.notes|truncatechars:60 }}</td>
                        <td>
                            <a href="{% url 'absence_edit' a.id %}" class="btn btn-sm btn-outline-secondary" data-bs-toggle="tooltip" title="Edit">
                                <i class="fas fa-pen"></i>
                            </a>
                            <form method="post" action="{% url 'absence_delete' a.id %}" style="display: inline;" onsubmit="return confirm('Delete this absence?');">
                                {% csrf_token %}
                                <button type="submit" class="btn btn-sm btn-outline-danger" data-bs-toggle="tooltip" title="Delete">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </form>
                        </td>
                    </tr>
                {% empty %}
                    <tr><td colspan="7" class="text-center text-muted py-4">No absences match the filters.</td></tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    {# === Pagination — only shown when there's more than one page === #}
    {% if page.has_other_pages %}
    <nav class="mt-3">
        <ul class="pagination pagination-sm justify-content-center">
            {% if page.has_previous %}
                <li class="page-item"><a class="page-link" href="?page={{ page.previous_page_number }}">Previous</a></li>
            {% endif %}
            <li class="page-item disabled"><span class="page-link">Page {{ page.number }} of {{ page.paginator.num_pages }}</span></li>
            {% if page.has_next %}
                <li class="page-item"><a class="page-link" href="?page={{ page.next_page_number }}">Next</a></li>
            {% endif %}
        </ul>
    </nav>
    {% endif %}
</div>

{% comment %}
=== Reason badge colours ===
Reuses the existing semantic badge palette from custom.css so dark/
light theme switching works out of the box. Green-ish for "valid"
leave (sick/family/annual), neutral for unpaid/other, amber for IOD,
purple-ish (deduction) for the disciplinary reasons (suspension,
absconded).
{% endcomment %}
<style>
.badge-absence-sick       { background: var(--badge-bonus-bg); color: var(--badge-bonus-fg); }
.badge-absence-family     { background: var(--badge-bonus-bg); color: var(--badge-bonus-fg); }
.badge-absence-annual     { background: var(--badge-bonus-bg); color: var(--badge-bonus-fg); }
.badge-absence-unpaid     { background: var(--badge-neutral-bg, #6c757d); color: #fff; }
.badge-absence-iod        { background: var(--badge-overtime-bg, #ffc107); color: var(--badge-overtime-fg, #000); }
.badge-absence-suspension { background: var(--badge-deduction-bg); color: var(--badge-deduction-fg); }
.badge-absence-absconded  { background: var(--badge-deduction-bg); color: var(--badge-deduction-fg); }
.badge-absence-other      { background: var(--badge-neutral-bg, #6c757d); color: #fff; }
</style>
{% endblock %}