{% extends "base.html" %}
{% block title %}{{ truck.name }} — Frota Trucks{% endblock %}
{% block body %}
<header>
  <div class="brand">Frota Trucks{% set h = header_info() %}{% if h.company %} · {{ h.company }}{% endif %}{% if h.machine_id %} · <span class="secondary" style="font-weight:400; font-size:0.82rem">Cód: {{ h.machine_id }}</span>{% endif %}</div>
  <nav style="display:flex; align-items:center">
    <a href="/">Painel</a>
    <a href="/manutencao">Itens de manutenção</a>
    <a href="/configuracoes">Configurações</a>
    <a href="/usuarios">Usuários</a>
    <form method="post" action="/api/logout" style="display:inline; margin-left:18px">
      <button type="submit" class="secondary-btn" style="padding:4px 10px; font-size:0.85rem">Sair</button>
    </form>
  </nav>
</header>
<main>
  <p><a href="/" class="back-link">&larr; Voltar ao painel</a></p>
  <h2 style="margin-bottom:4px">{{ truck.name }}</h2>
  <p class="secondary" style="margin-top:0">
    {{ truck.engine_model or "Motor não informado" }} ·
    Odômetro: {{ "%.0f"|format(truck.odometer_miles) if truck.odometer_miles is not none else "—" }} mi ·
    Horas: {{ "%.0f"|format(truck.engine_hours) if truck.engine_hours is not none else "—" }} h
  </p>
  <form method="post" action="/api/trucks/{{ truck.id }}" style="display:flex; gap:10px; align-items:flex-end; margin-bottom:20px">
    <div>
      <label>Modelo do motor</label>
      <input type="text" name="engine_model" value="{{ truck.engine_model or '' }}" placeholder="ex: Cummins X15">
    </div>
    <div><button type="submit" class="secondary-btn">Salvar</button></div>
  </form>

  <div class="card" style="margin-bottom:20px">
    <h3 style="margin-top:0">Status por item de manutenção</h3>
    <table>
      <thead><tr><th>Item</th><th>Status</th><th>Restante</th><th>Última manutenção</th></tr></thead>
      <tbody>
        {% for row in rows %}
        <tr>
          <td>{{ row.item.name }}</td>
          <td>
            <span class="badge badge-{{ row.status }}"><span class="dot"></span>
              {% if row.status == "ok" %}OK
              {% elif row.status == "vencendo" %}Vencendo
              {% elif row.status == "vencido" %}Vencido
              {% elif row.status == "sem_registro" %}Sem registro
              {% else %}Sem config.{% endif %}
            </span>
          </td>
          <td class="secondary">
            {% if row.remaining_miles is not none %}{{ "%.0f"|format(row.remaining_miles) }} mi{% endif %}
            {% if row.remaining_hours is not none %} · {{ "%.0f"|format(row.remaining_hours) }} h{% endif %}
            {% if row.remaining_days is not none %} · {{ row.remaining_days }} dias{% endif %}
            {% if row.remaining_miles is none and row.remaining_hours is none and row.remaining_days is none %}—{% endif %}
          </td>
          <td class="secondary">
            {% if row.last_record %}{{ row.last_record.service_date.strftime("%d/%m/%Y") }}
              ({{ "%.0f"|format(row.last_record.mileage_at_service) if row.last_record.mileage_at_service else "—" }} mi)
            {% else %}nunca{% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <div class="card" style="margin-bottom:20px">
    <h3 style="margin-top:0">Registrar manutenção realizada</h3>
    <form method="post" action="/api/trucks/{{ truck.id }}/manutencao" style="display:grid; grid-template-columns:1fr 1fr; gap:0 20px">
      <div>
        <label>Item</label>
        <select name="item_id" required style="width:100%">
          {% for item in items %}<option value="{{ item.id }}">{{ item.name }}</option>{% endfor %}
        </select>
        <label>Data do serviço</label>
        <input type="date" name="service_date" required style="width:100%">
        <label>Odômetro na data (mi, opcional)</label>
        <input type="number" step="1" name="mileage_at_service" style="width:100%">
        <label>Horas de motor na data (opcional)</label>
        <input type="number" step="1" name="hours_at_service" style="width:100%">
      </div>
      <div>
        <label>Dias parado</label>
        <input type="number" step="0.5" name="downtime_days" value="0" style="width:100%">
        <label>Observações</label>
        <textarea name="notes" rows="2" style="width:100%"></textarea>
      </div>
      <div style="grid-column:1/-1; margin-top:18px">
        <button type="submit">Registrar</button>
      </div>
    </form>
  </div>

  <div class="card">
    <h3 style="margin-top:0">Histórico</h3>
    <table>
      <thead><tr><th>Data</th><th>Item</th><th>Odômetro</th><th>Obs.</th></tr></thead>
      <tbody>
        {% for record in history %}
        <tr>
          <td>{{ record.service_date.strftime("%d/%m/%Y") }}</td>
          <td>{{ record.item.name }}</td>
          <td>{{ "%.0f"|format(record.mileage_at_service) if record.mileage_at_service else "—" }} mi</td>
          <td class="secondary">{{ record.notes or "" }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% if not history %}<p class="muted">Nenhuma manutenção registrada ainda.</p>{% endif %}
  </div>
</main>
{% endblock %}