{# === WORK LOG PAYROLL — FULL PAGE === #}
{# Shareable, bookmark-able view for one work log's payroll status. #}
{# Same data source as the modal; different presentation. #}

{% extends "base.html" %}
{% load format_tags %}

{% block title %}Work Log {{ log.date|date:"d M Y" }} | FoxFitt{% endblock %}

{% block content %}
<div class="container py-4" style="max-width: 960px;">

    {# === Breadcrumb === #}
    <nav aria-label="breadcrumb" class="mb-3">
        <ol class="breadcrumb small mb-0">
            <li class="breadcrumb-item"><a href="{% url 'work_history' %}" class="text-decoration-none">History</a></li>
            <li class="breadcrumb-item active" aria-current="page">
                {{ log.date|date:"d M Y" }}
                {% if log.project %} · <a href="{% url 'project_detail' log.project.id %}" class="text-decoration-none">{{ log.project.name }}</a>{% endif %}
                {% if log.team %} · <a href="{% url 'team_detail' log.team.id %}" class="text-decoration-none">{{ log.team.name }}</a>{% endif %}
            </li>
        </ol>
    </nav>

    {# === Page header === #}
    <div class="d-flex align-items-start justify-content-between mb-4">
        <div>
            <h3 class="mb-1"><i class="fas fa-calendar-day me-2"></i>Work Log Payroll</h3>
            <p class="text-muted mb-0 small">Who was paid for this day's work and who is still outstanding.</p>
        </div>
        <a href="{% url 'work_history' %}" class="btn btn-sm btn-outline-secondary">
            <i class="fas fa-arrow-left me-1"></i>Back to history
        </a>
    </div>

    {# === Attendance card === #}
    <div class="card mb-3">
        <div class="card-body">
            <h6 class="fw-semibold small text-uppercase text-muted mb-3">Attendance</h6>
            <div class="row g-3 small">
                <div class="col-md-6">
                    <div><span class="text-muted">Workers present:</span> <strong>{{ worker_rows|length }}</strong></div>
                    <div><span class="text-muted">Overtime hours:</span> <strong>{{ log.overtime_amount|default:0 }}</strong></div>
                </div>
                <div class="col-md-6">
                    <div><span class="text-muted">Supervisor:</span> <strong>
                        {% if log.supervisor %}{{ log.supervisor.get_full_name|default:log.supervisor.username }}{% else %}—{% endif %}
                    </strong></div>
                    {% if pay_period.0 %}
                    <div><span class="text-muted">Pay period:</span> <strong>{{ pay_period.0|date:"d M" }} – {{ pay_period.1|date:"d M Y" }}</strong></div>
                    {% else %}
                    <div><span class="text-muted">Pay period:</span>
                        <span class="text-muted fst-italic">no schedule</span>
                        {% if log.team %}<a href="{% url 'team_edit' log.team.id %}" class="small ms-1">configure</a>{% endif %}
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    {# === Unpriced OT banner === #}
    {% if overtime_needs_pricing %}
    <div class="alert alert-warning py-2 px-3 mb-3 small">
        <i class="fas fa-triangle-exclamation me-1"></i>
        Overtime on this log hasn't been priced yet.
        <a href="{% url 'payroll_dashboard' %}" class="alert-link">Price now</a>.
    </div>
    {% endif %}

    {# === Workers table === #}
    <div class="card mb-3">
        <div class="card-body">
            <h6 class="fw-semibold small text-uppercase text-muted mb-3">Workers on this log</h6>
            <div class="table-responsive">
                <table class="table table-sm align-middle mb-0">
                    <thead>
                        <tr>
                            <th>Worker</th>
                            <th>Status</th>
                            <th class="text-end">Earned</th>
                            <th>Payslip</th>
                            <th>Paid on</th>
                        </tr>
                    </thead>
                    <tbody>
                    {% for row in worker_rows %}
                        <tr>
                            <td>
                                <a href="{% url 'worker_detail' row.worker.id %}"
                                   class="text-decoration-none {% if not row.worker.active %}text-decoration-line-through{% endif %}">
                                    {{ row.worker.name }}
                                </a>
                                {% if not row.worker.active %}<span class="badge bg-secondary ms-1">Inactive</span>{% endif %}
                            </td>
                            <td>
                                {% if row.status == 'Paid' %}
                                    <span class="badge bg-success"><i class="fas fa-check me-1"></i>Paid</span>
                                {% elif row.status == 'Priced, not paid' %}
                                    <span class="badge bg-info text-dark">Priced, not paid</span>
                                {% else %}
                                    <span class="badge bg-warning text-dark"><i class="fas fa-clock me-1"></i>Unpaid</span>
                                {% endif %}
                            </td>
                            <td class="text-end">R {{ row.earned|money }}</td>
                            <td>
                                {% if row.payroll_record %}
                                    <a href="{% url 'payslip_detail' row.payroll_record.pk %}" class="text-decoration-none">#{{ row.payroll_record.pk }}</a>
                                {% else %}—{% endif %}
                            </td>
                            <td>{{ row.paid_date|date:"d M Y"|default:"—" }}</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {# === Adjustments card (only when present) === #}
    {% if adjustments %}
    <div class="card mb-3">
        <div class="card-body">
            <h6 class="fw-semibold small text-uppercase text-muted mb-3">Adjustments on this log</h6>
            <div class="table-responsive">
                <table class="table table-sm align-middle mb-0">
                    <thead><tr><th>Type</th><th>Worker</th><th class="text-end">Amount</th><th>Payslip</th></tr></thead>
                    <tbody>
                    {% for adj in adjustments %}
                        <tr>
                            <td>{{ adj.type }}</td>
                            <td><a href="{% url 'worker_detail' adj.worker.id %}" class="text-decoration-none">{{ adj.worker.name }}</a></td>
                            <td class="text-end">R {{ adj.amount|money }}</td>
                            <td>
                                {% if adj.payroll_record %}
                                    <a href="{% url 'payslip_detail' adj.payroll_record.pk %}" class="text-decoration-none">#{{ adj.payroll_record.pk }}</a>
                                {% else %}<span class="text-muted">unpaid</span>{% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    {% endif %}

    {# === Totals footer === #}
    <div class="d-flex gap-4 pt-2 small">
        <div><span class="text-muted">Total earned:</span> <strong>R {{ total_earned|money }}</strong></div>
        <div><span class="text-muted">Paid:</span> <strong>R {{ total_paid|money }}</strong></div>
        <div><span class="text-muted">Outstanding:</span> <strong>R {{ total_outstanding|money }}</strong></div>
    </div>

</div>
{% endblock %}