{% extends "base.html" %}
{% block title %}Fahrt anlegen{% 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>
<h1>Fahrt anlegen</h1>

<form method="post" class="form card">{% csrf_token %}
  {% if form.non_field_errors %}<div class="form-errors">{{ form.non_field_errors }}</div>{% endif %}

  <label>Fahrgast {{ form.fahrgast }}{{ form.fahrgast.errors }}</label>
  <label>Termin {{ form.scheduled_at }}{{ form.scheduled_at.errors }}</label>

  <div class="two-col">
    <label>Abholort {{ form.pickup_label }}{{ form.pickup_label.errors }}</label>
    <label>Ziel {{ form.dest_label }}{{ form.dest_label.errors }}</label>
  </div>

  <label>Notiz {{ form.note }}</label>

  {{ form.pickup_lat }}{{ form.pickup_lng }}{{ form.dest_lat }}{{ form.dest_lng }}

  <p class="muted small">Marker auf der Karte ziehen: <span class="dot-inline" style="background:#2f8f5b"></span> Abholung,
    <span class="dot-inline" style="background:#d14b4b"></span> Ziel.</p>
  <div id="pickmap" class="form-map"></div>

  <button class="btn btn-primary">Fahrt speichern</button>
</form>
{% endblock %}

{% block scripts %}
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
  const $ = (id) => document.getElementById(id);
  // Voreinstellung: Malstatt (Abholung) → Staden (Ziel)
  const start = { lat: 49.2517, lng: 6.9590 };
  const end = { lat: 49.2326, lng: 6.9974 };

  const sync = (point, latId, lngId) => { $(latId).value = point.lat.toFixed(6); $(lngId).value = point.lng.toFixed(6); };
  sync(start, "id_pickup_lat", "id_pickup_lng");
  sync(end, "id_dest_lat", "id_dest_lng");

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

  const greenIcon = L.divIcon({ className: "pin pin-green", html: "", iconSize: [18, 18] });
  const redIcon = L.divIcon({ className: "pin pin-red", html: "", iconSize: [18, 18] });

  const a = L.marker([start.lat, start.lng], { draggable: true, icon: greenIcon }).addTo(map);
  const b = L.marker([end.lat, end.lng], { draggable: true, icon: redIcon }).addTo(map);
  a.on("dragend", () => sync(a.getLatLng(), "id_pickup_lat", "id_pickup_lng"));
  b.on("dragend", () => sync(b.getLatLng(), "id_dest_lat", "id_dest_lng"));
</script>
{% endblock %}