{% extends "base.html" %}

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

{% block content %}
<section class="page-hero-sm report-print-header">
  <div class="container-xxl px-3 px-lg-4 d-flex flex-column flex-lg-row justify-content-between gap-3 align-items-lg-end">
    <div>
      <p class="section-kicker">IRS-style mileage log</p>
      <h1 class="section-title mb-2">Reports</h1>
      <p class="section-subtitle">Monthly, custom-range, and annual summaries with CSV export and print-friendly tables.</p>
    </div>
    <div class="d-flex gap-2 flex-wrap no-print">
      <a class="btn btn-outline-light app-btn-secondary" href="{% url 'trip_create' %}">Log trip</a>
      <button class="btn btn-primary app-btn-primary" onclick="window.print()" type="button">Print / Save PDF</button>
    </div>
  </div>
</section>
<section class="section-shell section-tight pt-0">
  <div class="container-xxl px-3 px-lg-4">
    <div class="glass-panel mb-4 no-print">
      <form method="get" class="row g-3 align-items-end">
        <div class="col-md-3"><label class="form-label" for="{{ form.report_type.id_for_label }}">Report type</label>{{ form.report_type }}</div>
        <div class="col-md-2"><label class="form-label" for="{{ form.month.id_for_label }}">Month</label>{{ form.month }}</div>
        <div class="col-md-2"><label class="form-label" for="{{ form.year.id_for_label }}">Year</label>{{ form.year }}</div>
        <div class="col-md-2"><label class="form-label" for="{{ form.start_date.id_for_label }}">Start date</label>{{ form.start_date }}</div>
        <div class="col-md-2"><label class="form-label" for="{{ form.end_date.id_for_label }}">End date</label>{{ form.end_date }}</div>
        <div class="col-md-1 d-grid"><button class="btn btn-primary app-btn-primary" type="submit">Run</button></div>
        {% if form.non_field_errors %}<div class="col-12"><div class="alert alert-danger app-alert mb-0">{{ form.non_field_errors }}</div></div>{% endif %}
        <div class="col-12 d-flex flex-wrap gap-2"><a class="btn btn-outline-light app-btn-secondary" href="{% url 'report_export_csv' %}?{{ request.GET.urlencode }}">Export CSV</a></div>
      </form>
    </div>
    <div class="row g-4 mb-4">
      <div class="col-md-4"><div class="metric-card panel-solid h-100"><p>Total business miles</p><h2>{{ summary.business_miles|floatformat:1 }}</h2><span>Primary number for deduction review</span></div></div>
      <div class="col-md-4"><div class="metric-card panel-solid h-100"><p>Personal / commuting / repair miles</p><h2>{{ summary.non_business_miles|floatformat:1 }}</h2><span>Useful context for year-end records</span></div></div>
      <div class="col-md-4"><div class="metric-card panel-solid h-100"><p>Total trips</p><h2>{{ summary.trip_count }}</h2><span>Entries in this report period</span></div></div>
    </div>
    <div class="glass-panel table-panel printable-panel">
      {% if trips %}
      <div class="table-responsive">
        <table class="table app-table report-table align-middle mb-0">
          <thead><tr><th>Date</th><th>Start</th><th>End</th><th>From</th><th>To</th><th>Purpose</th><th>Type</th><th>Start odo</th><th>End odo</th><th>Miles</th></tr></thead>
          <tbody>
            {% for trip in trips %}
            <tr>
              <td>{{ trip.date|date:"Y-m-d" }}</td>
              <td>{{ trip.start_time|time:"H:i" }}</td>
              <td>{{ trip.end_time|time:"H:i" }}</td>
              <td>{{ trip.start_location }}</td>
              <td>{{ trip.end_location }}</td>
              <td>{{ trip.business_purpose }}</td>
              <td>{{ trip.get_trip_type_display }}</td>
              <td>{{ trip.start_odometer|default:"" }}</td>
              <td>{{ trip.end_odometer|default:"" }}</td>
              <td>{{ trip.distance_miles|floatformat:1 }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      {% else %}
      <div class="empty-state-card compact-empty"><h3>No trips in this report period</h3><p>Run a different date range or add a new mileage entry.</p></div>
      {% endif %}
    </div>
  </div>
</section>
{% endblock %}