{% extends "base.html" %}
{% block title %}{{ ride.fahrgast.name }} · Fahrt{% endblock %}
{% block head %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
{% endblock %}
{% block content %}
<a class="back" href="{% url 'dashboard' %}">← Übersicht</a>

<div class="detail-grid">
  <div class="card">
    <span class="badge" style="--c: {{ ride.status_color }}">{{ ride.get_status_display }}</span>
    <h1>{{ ride.fahrgast.name }}</h1>
    <dl class="meta">
      <dt>Wann</dt><dd>{{ ride.scheduled_at|date:"l, d. F Y, H:i" }} Uhr</dd>
      <dt>Abholung</dt><dd>{{ ride.pickup_label }}</dd>
      <dt>Ziel</dt><dd>{{ ride.dest_label }}</dd>
      {% if ride.assigned_pilot %}<dt>Pilot</dt><dd>{{ ride.assigned_pilot.get_full_name|default:ride.assigned_pilot.username }}</dd>{% endif %}
      {% if ride.fahrgast.einrichtung %}<dt>Einrichtung</dt><dd>{{ ride.fahrgast.einrichtung.name }}</dd>{% endif %}
    </dl>

    {% if show_notes %}
      {% if ride.fahrgast.mobility_notes %}
      <div class="notes"><h3>Hinweise zum Fahrgast</h3><p>{{ ride.fahrgast.mobility_notes }}</p></div>
      {% endif %}
      {% if ride.note %}
      <div class="notes"><h3>Notiz zur Fahrt</h3><p>{{ ride.note }}</p></div>
      {% endif %}
    {% else %}
      <p class="muted small notes-locked">🔒 Pflege-Hinweise sind nur für die zugeteilte Pilot:in und die Koordination sichtbar.</p>
    {% endif %}
  </div>

  <div class="card map-card">
    <div id="map" class="detail-map"></div>
  </div>
</div>

{{ ride.route_geojson|json_script:"route-data" }}
{% endblock %}

{% block scripts %}
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
  const pickup = [{{ ride.pickup_lat }}, {{ ride.pickup_lng }}];
  const dest = [{{ ride.dest_lat }}, {{ ride.dest_lng }}];
  const route = JSON.parse(document.getElementById("route-data").textContent);

  const map = L.map("map");
  L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
    maxZoom: 19, attribution: "© OpenStreetMap"
  }).addTo(map);

  L.marker(pickup).addTo(map).bindPopup("Abholung");
  L.marker(dest).addTo(map).bindPopup("Ziel");

  let line;
  if (route) {
    line = L.geoJSON(route, { style: { color: "#2f7d57", weight: 5 } }).addTo(map);
  } else {
    line = L.polyline([pickup, dest], { color: "#2f7d57", weight: 4, dashArray: "6 8" }).addTo(map);
  }
  map.fitBounds(line.getBounds().pad(0.3));
</script>
{% endblock %}