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

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

{% block content %}
{% comment %}
Conflict-confirmation page. Shown when at least one (worker, date)
pair on the absence-log form already has a WorkLog. The admin can
keep or untick the pre-checked "Remove from work log" box per
conflict — the common case (clocked-in but actually absent) is
fixed by removing them from the work log AND creating the absence,
so we pre-tick the box. Unticking keeps the WorkLog and SKIPS the
absence creation contradiction by still creating it (untouched
rows keep their WorkLog intact, so partial-day cases work too).
{% endcomment %}

<div class="container py-4">
    <h1 class="page-title mb-3">
        <i class="fas fa-triangle-exclamation me-2" style="color: var(--accent);"></i>
        Confirm Absences
    </h1>

    <div class="alert alert-warning">
        <strong>{{ conflicts|length }} worker(s) were already logged as <em>working</em> on these dates.</strong>
        <p class="mb-0 mt-2">
            You can't be both <em>working</em> and <em>absent</em> on the same day — pick which is correct below.
            The usual fix is to remove them from the work log (their attendance was recorded by mistake), so we've
            pre-selected that for you. Untick the box if you want to keep the work log entry instead (their absence
            won't be recorded in that case — you'll have to delete the absence manually after this saves).
        </p>
    </div>

    <form method="post" class="card">
        {% csrf_token %}
        <div class="card-body">
            <h6 class="text-uppercase mb-3" style="font-size: 0.75rem; color: var(--text-secondary);">
                Worker &times; Date
            </h6>
            <table class="table table-sm align-middle">
                <thead>
                    <tr>
                        <th>Worker</th>
                        <th>Date</th>
                        <th>Existing Work Log</th>
                        <th style="min-width: 240px;">What should happen?</th>
                    </tr>
                </thead>
                <tbody>
                {% for c in conflicts %}
                    <tr>
                        <td><strong>{{ c.worker_name }}</strong></td>
                        <td>{{ c.date }}</td>
                        <td><span class="text-muted">{{ c.project_name }}</span> (Log #{{ c.work_log_id }})</td>
                        <td>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox"
                                       name="remove_from_worklog_{{ c.work_log_id }}_{{ c.worker_id }}"
                                       id="remove_{{ forloop.counter }}" checked>
                                <label class="form-check-label" for="remove_{{ forloop.counter }}">
                                    Remove from work log <span class="text-muted">(recommended &mdash; they were absent, not working)</span>
                                </label>
                            </div>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>

            <hr>
            <div class="alert alert-secondary mb-0">
                <strong>{{ absence_count }} absence record(s) will be created.</strong>
                Reason: <strong>{{ reason }}</strong>.
                Paid: <strong>{% if is_paid %}Yes (Bonus payroll adjustment){% else %}No{% endif %}</strong>.
            </div>

            <div class="d-flex justify-content-between gap-2 mt-3">
                <a href="{% url 'absence_log' %}" class="btn btn-outline-secondary">
                    <i class="fas fa-times me-1"></i> Cancel
                </a>
                <button type="submit" class="btn btn-accent">
                    <i class="fas fa-check me-1"></i> Save Absences
                </button>
            </div>
        </div>
    </form>
</div>
{% endblock %}