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

{% block title %}Neue Pflanze anlegen{% endblock %}

{% block content %}
<h2>🌱 Neue Pflanze anlegen</h2>
<hr>

<form method="post">
    {% csrf_token %}
    <div class="form-row">
        <div class="form-group col-md-6">
            <label for="id_name">Trivialname</label>
            {{ form.name }}
        </div>
        <div class="form-group col-md-3">
            <label for="id_plantGenus">Gattung (Genus)</label>
            {{ form.plantGenus }}
        </div>
        <div class="form-group col-md-3">
            <label for="id_plantSpecies">Art (Species)</label>
            {{ form.plantSpecies }}
        </div>
    </div>

    <button type="button" id="fetch-trefle" class="btn btn-info mb-3">🔍 Daten von Trefle holen</button>

    <div class="form-row">
        <div class="form-group col-md-6">
            <label for="id_plantFamily">Familie</label>
            {{ form.plantFamily }}
        </div>
        <div class="form-group col-md-6">
            <label for="id_plantSubfamily">Unterfamilie</label>
            {{ form.plantSubfamily }}
        </div>
    </div>

    <button type="submit" class="btn btn-success">💾 Speichern</button>
</form>

<script>
document.getElementById("fetch-trefle").addEventListener("click", function() {
    const genus = document.getElementById("id_plantGenus").value;
    const species = document.getElementById("id_plantSpecies").value;

    if (!genus || !species) {
        alert("Bitte Gattung und Art eingeben.");
        return;
    }

    fetch(`/data/trefle-lookup/?genus=${genus}&species=${species}`)
        .then(response => response.json())
        .then(data => {
            if (data.family) {
                document.getElementById("id_plantFamily").value = data.family;
            }
            if (data.subfamily) {
                document.getElementById("id_plantSubfamily").value = data.subfamily;
            }
            if (data.error) {
                alert("Fehler: " + data.error);
            }
        })
        .catch(error => {
            alert("Fehler beim Abrufen der Daten.");
            console.error(error);
        });
});
</script>
{% endblock %}