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

{% block title %}{{ meta_title }}{% endblock %}

{% block content %}
<section class="page-hero-sm">
  <div class="container-xxl px-3 px-lg-4">
    <div class="page-hero-copy">
      <p class="section-kicker">Trip workflow</p>
      <h1 class="section-title mb-2">{{ page_heading }}</h1>
      <p class="section-subtitle">Capture the route, odometer readings, and audit-ready timestamps in one place.</p>
    </div>
  </div>
</section>

<section class="section-shell section-tight pt-0">
  <div class="container-xxl px-3 px-lg-4">
    <div class="row g-4">
      <div class="col-xl-8">
        <div class="glass-panel form-shell">
          <form method="post" novalidate id="trip-form" data-distance-endpoint="{% url 'distance_estimate' %}">
            {% csrf_token %}
            {% if form.non_field_errors %}
            <div class="alert alert-danger app-alert">{{ form.non_field_errors }}</div>
            {% endif %}
            <div class="row g-3">
              <div class="col-sm-4">
                <label class="form-label" for="{{ form.date.id_for_label }}">Date of trip</label>
                {{ form.date }}
                <div class="field-help">Past dates are supported for retroactive entries.</div>
                {% for error in form.date.errors %}<div class="field-error">{{ error }}</div>{% endfor %}
              </div>
              <div class="col-sm-4">
                <label class="form-label" for="{{ form.start_time.id_for_label }}">Start time</label>
                {{ form.start_time }}
                {% for error in form.start_time.errors %}<div class="field-error">{{ error }}</div>{% endfor %}
              </div>
              <div class="col-sm-4">
                <label class="form-label" for="{{ form.end_time.id_for_label }}">End time</label>
                {{ form.end_time }}
                {% for error in form.end_time.errors %}<div class="field-error">{{ error }}</div>{% endfor %}
              </div>
              <div class="col-12">
                <label class="form-label" for="{{ form.start_location.id_for_label }}">Starting location</label>
                {{ form.start_location }}
                {% for error in form.start_location.errors %}<div class="field-error">{{ error }}</div>{% endfor %}
              </div>
              <div class="col-12">
                <label class="form-label" for="{{ form.end_location.id_for_label }}">Destination / ending location</label>
                {{ form.end_location }}
                {% for error in form.end_location.errors %}<div class="field-error">{{ error }}</div>{% endfor %}
              </div>
              <div class="col-lg-8">
                <label class="form-label" for="{{ form.business_purpose.id_for_label }}">Business purpose</label>
                {{ form.business_purpose }}
                <div class="field-help">{{ form.business_purpose.help_text }}</div>
                {% for error in form.business_purpose.errors %}<div class="field-error">{{ error }}</div>{% endfor %}
              </div>
              <div class="col-lg-4">
                <label class="form-label" for="{{ form.trip_type.id_for_label }}">Trip type</label>
                {{ form.trip_type }}
                {% for error in form.trip_type.errors %}<div class="field-error">{{ error }}</div>{% endfor %}
              </div>
              <div class="col-sm-4">
                <label class="form-label" for="{{ form.start_odometer.id_for_label }}">Starting odometer</label>
                {{ form.start_odometer }}
                <div class="field-help">{% if latest_end_odometer %}Suggested from your most recent ending odometer: {{ latest_end_odometer }} miles.{% else %}Optional, but recommended for audit-ready logs.{% endif %}</div>
                {% for error in form.start_odometer.errors %}<div class="field-error">{{ error }}</div>{% endfor %}
              </div>
              <div class="col-sm-4">
                <label class="form-label" for="{{ form.end_odometer.id_for_label }}">Ending odometer</label>
                {{ form.end_odometer }}
                {% for error in form.end_odometer.errors %}<div class="field-error">{{ error }}</div>{% endfor %}
              </div>
              <div class="col-sm-4">
                <label class="form-label" for="{{ form.distance_miles.id_for_label }}">Distance miles</label>
                {{ form.distance_miles }}
                <div class="field-help">{{ form.distance_miles.help_text }}</div>
                {% for error in form.distance_miles.errors %}<div class="field-error">{{ error }}</div>{% endfor %}
              </div>
              <div class="col-12">
                <div class="distance-action-bar">
                  <button type="button" class="btn btn-outline-light app-btn-secondary" id="calculate-distance-btn">Calculate with Google Maps</button>
                  <div id="distance-status" class="distance-status">Enter both locations to calculate route mileage.</div>
                </div>
              </div>
              <div class="col-12">
                <div class="form-check app-check">
                  {{ form.update_end_odometer_from_map }}
                  <label class="form-check-label" for="{{ form.update_end_odometer_from_map.id_for_label }}">{{ form.update_end_odometer_from_map.label }}</label>
                </div>
                <div class="field-help">{{ form.update_end_odometer_from_map.help_text }}</div>
              </div>
              <div class="col-12">
                <label class="form-label" for="{{ form.notes.id_for_label }}">Notes</label>
                {{ form.notes }}
                {% for error in form.notes.errors %}<div class="field-error">{{ error }}</div>{% endfor %}
              </div>
            </div>
            <div class="timestamp-panel mt-4">
              <div class="section-heading-wrap mb-3">
                <div>
                  <p class="section-kicker">Audit trail</p>
                  <h2 class="section-title h4 mb-0">Timestamp controls</h2>
                </div>
              </div>
              <div class="row g-3">
                <div class="col-md-6">
                  <label class="form-label" for="{{ form.created_at_override.id_for_label }}">{{ form.created_at_override.label }}</label>
                  {{ form.created_at_override }}
                  <div class="field-help">{{ form.created_at_override.help_text }}</div>
                  {% for error in form.created_at_override.errors %}<div class="field-error">{{ error }}</div>{% endfor %}
                </div>
                <div class="col-md-6">
                  <label class="form-label" for="{{ form.updated_at_override.id_for_label }}">{{ form.updated_at_override.label }}</label>
                  {{ form.updated_at_override }}
                  <div class="field-help">{{ form.updated_at_override.help_text }}</div>
                  {% for error in form.updated_at_override.errors %}<div class="field-error">{{ error }}</div>{% endfor %}
                </div>
              </div>
              {% if trip %}<p class="audit-caption mt-3 mb-0">Current stored timestamps: created {{ trip.created_at|date:"M j, Y g:i A" }} · updated {{ trip.updated_at|date:"M j, Y g:i A" }}</p>{% endif %}
            </div>
            <div class="form-actions d-flex flex-wrap gap-3 mt-4">
              <button type="submit" class="btn btn-primary app-btn-primary">{{ submit_label }}</button>
              <a href="{% url 'trip_list' %}" class="btn btn-outline-light app-btn-secondary">Back to trip list</a>
            </div>
          </form>
        </div>
      </div>
      <div class="col-xl-4">
        <div class="glass-panel side-panel h-100">
          <p class="section-kicker">How mileage is chosen</p>
          <div class="side-stack">
            <article class="side-card"><h3>1. Odometer first</h3><p>If both start and end odometer readings are present, MileLedger saves that difference as the primary trip distance.</p></article>
            <article class="side-card"><h3>2. Google Maps fallback</h3><p>If odometer readings are incomplete, the distance field stores the Google Maps estimate instead.</p></article>
            <article class="side-card"><h3>3. Human review stays in control</h3><p>You can edit route miles, adjust timestamps, and confirm the ending odometer before saving.</p></article>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}

{% block scripts %}
<script src="{% static 'js/mileage_app.js' %}?v={{ deployment_timestamp }}"></script>
{% endblock %}