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

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

{% block content %}
{% comment %}
Standalone absence-logging form. Date range with optional Sat/Sun
inclusion (mirror of /attendance/log/). After successful submit
either redirects to /absences/ (no conflicts) or to
/absences/log/confirm/ (one or more workers were on a WorkLog for
one of the selected dates — admin chooses whether to also remove
them from the WorkLog).
{% endcomment %}

<div class="container py-4">
    <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>
                Log Absences
            </h1>
            <small class="text-muted">Record workers who were not on site today.</small>
        </div>
        <a href="{% url 'absence_list' %}" class="btn btn-outline-secondary btn-sm">
            <i class="fas fa-list me-1"></i> View All
        </a>
    </div>

    {% if messages %}
        {% for message in messages %}
            <div class="alert alert-{{ message.tags }}">{{ message }}</div>
        {% endfor %}
    {% endif %}

    {% if form.non_field_errors %}
        <div class="alert alert-danger">{{ form.non_field_errors }}</div>
    {% endif %}

    <form method="post" class="card">
        {% csrf_token %}
        <div class="card-body p-3 p-md-4">

            {# === DATE RANGE === #}
            <div class="row g-3">
                <div class="col-12 col-md-6">
                    <label class="form-label">Date <span class="text-danger">*</span></label>
                    {{ form.date }}
                    {{ form.date.errors }}
                </div>
                <div class="col-12 col-md-6">
                    <label class="form-label">End Date (optional)</label>
                    {{ form.end_date }}
                    <small class="text-muted">{{ form.end_date.help_text }}</small>
                    {{ form.end_date.errors }}
                </div>
                <div class="col-12 col-md-6 d-flex gap-3 align-items-center">
                    <div class="form-check">
                        {{ form.include_saturday }}
                        <label class="form-check-label" for="{{ form.include_saturday.id_for_label }}">
                            Include Saturdays
                        </label>
                    </div>
                    <div class="form-check">
                        {{ form.include_sunday }}
                        <label class="form-check-label" for="{{ form.include_sunday.id_for_label }}">
                            Include Sundays
                        </label>
                    </div>
                </div>
            </div>

            <hr class="my-3">

            {# === PROJECT (optional) === #}
            {# Slots above Reason — when set + Paid ticked, the auto-Bonus #}
            {# inherits this project so paid-absence cost shows up against #}
            {# the right project on payroll dashboards. #}
            <div class="row g-3">
                <div class="col-12 col-md-6">
                    <label class="form-label" for="{{ form.project.id_for_label }}">Project (optional)</label>
                    {{ form.project }}
                    {{ form.project.errors }}
                    <small class="text-muted">Which project was the worker absent from? Leave blank for non-project absences.</small>
                </div>
            </div>

            <hr class="my-3">

            {# === REASON + PAID FLAG === #}
            <div class="row g-3">
                <div class="col-12 col-md-6">
                    <label class="form-label">Reason <span class="text-danger">*</span></label>
                    {{ form.reason }}
                    {{ form.reason.errors }}
                </div>
                <div class="col-12 col-md-6 d-flex align-items-end">
                    <div class="form-check">
                        {{ form.is_paid }}
                        <label class="form-check-label" for="{{ form.is_paid.id_for_label }}">
                            Paid at daily rate
                        </label>
                        <div><small class="text-muted">Creates a Bonus payroll adjustment when ticked.</small></div>
                    </div>
                </div>
            </div>

            <hr class="my-3">

            {# === TEAM FILTER + WORKER PICKER === #}
            <div class="row g-3">
                <div class="col-12 col-md-4">
                    <label class="form-label">Filter by Team</label>
                    {{ form.team }}
                </div>
                <div class="col-12 col-md-8">
                    <label class="form-label">Workers <span class="text-danger">*</span></label>
                    <input type="text" class="form-control mb-2" id="workerSearch" placeholder="Search workers...">
                    <div class="border rounded p-2" style="max-height: 300px; overflow-y: auto;">
                        {% for worker in form.workers %}
                            <div class="form-check worker-row" data-name="{{ worker.choice_label|lower }}" data-worker-id="{{ worker.choice_value }}">
                                {{ worker.tag }}
                                <label class="form-check-label">{{ worker.choice_label }}</label>
                            </div>
                        {% endfor %}
                    </div>
                    {{ form.workers.errors }}
                </div>
            </div>

            <hr class="my-3">

            {# === FREE-FORM NOTES === #}
            <div>
                <label class="form-label">Notes (optional)</label>
                {{ form.notes }}
            </div>

            <div class="d-flex justify-content-end gap-2 mt-3">
                <a href="{% url 'home' %}" class="btn btn-outline-secondary">Cancel</a>
                <button type="submit" class="btn btn-accent">
                    <i class="fas fa-save me-1"></i> Log Absences
                </button>
            </div>
        </div>
    </form>
</div>

<script>
// === Worker filter — search box + team dropdown COMPOSE ===
// Two independent filters operate against the same worker checkbox list:
//   1. The search input narrows by name substring (case-insensitive).
//   2. The team dropdown narrows by team membership (hides workers who
//      aren't on the selected team).
// A row is visible only when BOTH filters allow it. Switching either
// re-runs the combined visibility pass via applyWorkerFilters().
//
// Empty selection in either filter = "no restriction" for that filter.
//
// IMPLEMENTATION NOTE: we read the worker's id from the inner
// <input name="workers"> value attribute, NOT from data-worker-id on
// the row div. This matches the attendance form's proven pattern and
// avoids brittleness around how Django renders choice_value for
// ModelMultipleChoiceField iteration.
//
// REGRESSION: this used to read data-worker-id, which silently hid
// all workers in some renders. Reading from input[name="workers"]
// value is the same pattern attendance_log.html uses and is proven.
// See 7d4d7b1+ Konrad's bug report on production.
(function() {
    var searchInput = document.getElementById('workerSearch');
    var teamSelect = document.querySelector('[name="team"]');
    // teamWorkersMap: { team_id_string: [worker_id_int, ...] }
    // Parse once at load — re-used by every filter pass.
    var teamWorkersMap = JSON.parse('{{ team_workers_json|escapejs }}');

    function applyWorkerFilters() {
        var q = searchInput ? searchInput.value.toLowerCase() : '';
        var teamId = teamSelect ? teamSelect.value : '';

        // Build allowed set as STRINGS (matching DOM input.value strings).
        // null means "no team filter applied" (show everyone).
        var allowedSet = null;
        if (teamId) {
            // Defensive fallback: object keys are always strings in JS, but
            // be explicit about handling both raw and stringified keys just
            // in case the JSON payload ever changes shape.
            var teamWorkers = teamWorkersMap[teamId] || teamWorkersMap[String(teamId)];
            if (teamWorkers) {
                allowedSet = {};
                teamWorkers.forEach(function(id) { allowedSet[String(id)] = true; });
            } else {
                // Team key not in map — show no one (defensive)
                allowedSet = {};
            }
        }

        document.querySelectorAll('.worker-row').forEach(function(row) {
            var name = row.dataset.name || '';
            // Read worker id from the actual checkbox input — proven reliable.
            var input = row.querySelector('input[name="workers"]');
            var wid = input ? String(input.value) : '';

            var matchesSearch = q === '' || name.indexOf(q) > -1;
            var matchesTeam = (allowedSet === null) || (allowedSet[wid] === true);

            row.style.display = (matchesSearch && matchesTeam) ? '' : 'none';
        });
    }

    if (searchInput) searchInput.addEventListener('input', applyWorkerFilters);
    if (teamSelect) teamSelect.addEventListener('change', applyWorkerFilters);
})();
</script>
{% endblock %}