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

{% block title %}Site Report — {{ work_log.date|date:"d M Y" }} | FoxFitt{% endblock %}

{% block content %}
{% comment %}
Mobile-first site-report edit form. Reachable two ways:
  1. Auto-redirect after a successful /attendance/log/ submission (the
     "two-step flow" — supervisor logs WHO worked, then lands here to
     log WHAT was done).
  2. Direct visit /site-report/<work_log_id>/edit/ (admin or supervisor
     of the parent work log) — useful for backfilling a missed report.

The form is deliberately optional: a "Skip" link goes straight home so
supervisors who're in a hurry can ship the attendance log without the
progress data. WorkLogs without a SiteReport are completely valid.

Layout principles:
  - Vertical stack of inputs (no multi-column on phone)
  - Large tap-targets for the boolean checkboxes
  - inputmode="numeric" on count + temperature fields → numeric keypad
  - Weather rendered as a chunky icon-button row, not a dropdown
{% endcomment %}

<div class="container py-4">

    {# === Page header === #}
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
            <h1 class="page-title mb-0">
                <i class="fas fa-clipboard-check me-2" style="color: var(--accent);"></i>
                {% if is_creating %}Log Today's Work{% else %}Edit Site Report{% endif %}
            </h1>
            <small class="text-muted">
                {{ work_log.project.name }} —
                {{ work_log.date|date:"l, d M Y" }}
                {% if work_log.team %}({{ work_log.team.name }}){% endif %}
            </small>
        </div>
        {# Skip = abandon this report (intentional) and go home. #}
        {# Save the attendance, ship the day. #}
        <a href="{% url 'home' %}"
           class="btn btn-outline-secondary btn-sm"
           title="Skip the progress report — attendance is already saved">
            <i class="fas fa-forward fa-sm me-1"></i> Skip
        </a>
    </div>

    {# === Helpful note for the supervisor — only visible on first creation === #}
    {% if is_creating %}
    <div class="alert alert-info py-2 mb-3" style="font-size: 0.875rem;">
        <i class="fas fa-info-circle me-1"></i>
        Logging the day's progress is optional. Skip if you're in a hurry —
        the attendance entry is already saved.
    </div>
    {% endif %}

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

                {# --- Form-level error display --- #}
                {% if form.non_field_errors %}
                <div class="alert alert-danger py-2">
                    {% for error in form.non_field_errors %}<div>{{ error }}</div>{% endfor %}
                </div>
                {% endif %}

                {# === SECTION 1 — Weather + Temperature === #}
                <div class="mb-4">
                    <h6 class="text-uppercase mb-2" style="font-size: 0.75rem; letter-spacing: 0.05em; color: var(--text-secondary);">
                        Conditions
                    </h6>

                    {# --- Weather: icon-button row, picks one --- #}
                    {# Bootstrap btn-check + label pattern gives us large tap targets #}
                    {# without a custom JavaScript handler. #}
                    <div class="mb-3">
                        <label class="form-label mb-1 fw-semibold">Weather</label>
                        <div class="btn-group flex-wrap" role="group" aria-label="Weather">
                            {% for choice_value, choice_label in form.weather.field.choices %}
                            <input type="radio"
                                   class="btn-check"
                                   name="weather"
                                   id="weather-{{ choice_value|default:'none' }}"
                                   value="{{ choice_value }}"
                                   {% if form.weather.value == choice_value %}checked{% endif %}
                                   autocomplete="off">
                            <label class="btn btn-outline-secondary btn-sm me-1 mb-1" for="weather-{{ choice_value|default:'none' }}">
                                {% if choice_value == 'sunny' %}☀️ Sunny
                                {% elif choice_value == 'cloudy' %}☁️ Cloudy
                                {% elif choice_value == 'rain' %}🌧️ Rain
                                {% elif choice_value == 'storm' %}⛈️ Storm
                                {% elif choice_value == 'hot' %}🥵 Hot
                                {% elif choice_value == 'cold' %}🥶 Cold
                                {% elif choice_value == 'windy' %}💨 Windy
                                {% else %}—{% endif %}
                            </label>
                            {% endfor %}
                        </div>
                        {% if form.weather.errors %}<div class="text-danger small mt-1">{{ form.weather.errors|first }}</div>{% endif %}
                    </div>

                    {# --- Temperature min/max: two short numeric fields --- #}
                    <div class="row g-2">
                        <div class="col-6">
                            <label for="{{ form.temperature_min.id_for_label }}" class="form-label fw-semibold">Min °C</label>
                            {{ form.temperature_min }}
                            {% if form.temperature_min.errors %}<div class="text-danger small mt-1">{{ form.temperature_min.errors|first }}</div>{% endif %}
                        </div>
                        <div class="col-6">
                            <label for="{{ form.temperature_max.id_for_label }}" class="form-label fw-semibold">Max °C</label>
                            {{ form.temperature_max }}
                            {% if form.temperature_max.errors %}<div class="text-danger small mt-1">{{ form.temperature_max.errors|first }}</div>{% endif %}
                        </div>
                    </div>
                </div>

                {# === SECTION 2 — Count metrics === #}
                {# Iterates (metric, bound_field) tuples pre-built in the view #}
                {# so we don't need a "form-by-variable-name" template filter. #}
                <div class="mb-4">
                    <h6 class="text-uppercase mb-2" style="font-size: 0.75rem; letter-spacing: 0.05em; color: var(--text-secondary);">
                        Counts (today's totals)
                    </h6>
                    <div class="row g-2">
                        {% for metric, bound_field in count_field_pairs %}
                        <div class="col-6 col-md-4">
                            <label for="{{ bound_field.id_for_label }}" class="form-label fw-semibold mb-1" style="font-size: 0.875rem;">
                                {{ metric.label }}
                            </label>
                            {{ bound_field }}
                            {% if bound_field.errors %}<div class="text-danger small mt-1">{{ bound_field.errors|first }}</div>{% endif %}
                        </div>
                        {% endfor %}
                    </div>
                </div>

                {# === SECTION 3 — Check metrics (booleans) === #}
                <div class="mb-4">
                    <h6 class="text-uppercase mb-2" style="font-size: 0.75rem; letter-spacing: 0.05em; color: var(--text-secondary);">
                        Other (tap to mark)
                    </h6>
                    {% for metric, bound_field in check_field_pairs %}
                    <div class="form-check form-switch mb-2" style="padding-left: 2.75em;">
                        {{ bound_field }}
                        <label class="form-check-label fw-semibold" for="{{ bound_field.id_for_label }}" style="font-size: 0.95rem;">
                            {{ metric.label }}
                        </label>
                    </div>
                    {% endfor %}
                </div>

                {# === SECTION 4 — Free-form notes === #}
                <div class="mb-4">
                    <label for="{{ form.notes.id_for_label }}" class="form-label fw-semibold">
                        Notes
                        <small class="text-muted fw-normal">(optional)</small>
                    </label>
                    {{ form.notes }}
                    {% if form.notes.errors %}<div class="text-danger small mt-1">{{ form.notes.errors|first }}</div>{% endif %}
                </div>

                {# === Actions === #}
                <div class="d-flex justify-content-between gap-2">
                    <a href="{% url 'home' %}" class="btn btn-outline-secondary">
                        <i class="fas fa-times me-1"></i> Skip
                    </a>
                    <button type="submit" class="btn btn-accent">
                        <i class="fas fa-check me-1"></i>
                        {% if is_creating %}Save Site Report{% else %}Update{% endif %}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}