{% extends 'base.html' %}

{% block content %}
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
     integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
     crossorigin=""></script>
<div id="mapquestion-container">
    <div>
        <form class="flex flex-col p-4 space-y-4" enctype="multipart/form-data" method="post">
            {% csrf_token %}
            <div class="relative">
                <label for="question" class="absolute -top-2 left-3 text-sm bg-white dark:bg-gray-900 px-1 text-blue-600 dark:text-white z-10">Frage</label>
                <input type="text" id="question" name="question" class="p-4 w-full border-2 border-blue-400 rounded-md dark:text-white" value="{{ question.data.question }}" />
            </div>
            {% if image %}
                <img src="{{ image.image.url }}" style="max-width: 100px;" alt="Bild der Frage">
                <label for="reset_image" class="dark:text-white">
                    <input type="checkbox" name="reset_ques_image" id="reset_ques_image">
                    Bild zurücksetzen
                </label>
            {% endif %}
            <div class="relative">
                <label for="question_image" class="absolute -top-2 left-3 text-sm bg-white dark:bg-gray-900 px-1 text-blue-600 dark:text-white z-10">Bild der Frage</label>
                <input class="p-4 w-full border-2 border-blue-400 rounded-md dark:text-white" type="file" name="question_image" id="question_image" accept="image/*">
            </div>
            <div class="text-sm text-gray-600 dark:text-gray-400 mb-2">Ziel auswählen</div>
            <div id="map"></div>
            <div class="relative">
                <label for="location" class="absolute -top-2 left-3 text-sm bg-white dark:bg-gray-900 px-1 text-blue-600 dark:text-white z-10">Koordinaten</label>
                <input type="text" id="location" name="location" class="p-4 w-full border-2 border-blue-400 rounded-md dark:text-white" value="{{ question.data.target_location }}" />
            </div>

            <div class="relative">
                <label for="time_per_question" class="absolute -top-2 left-3 text-sm bg-white dark:bg-gray-900 px-1 text-blue-600 dark:text-white z-10">Zeit pro Frage</label>
                <select name="time_per_question" id="time_per_question" class="p-4 w-full border-2 border-blue-400 rounded-md bg-white dark:bg-gray-900 dark:text-gray-300">
                    <option value="10" {% if standard_time_per_question == "10" or time_per_question == "10" %}selected{% endif %}>10 Sekunden</option>
                    <option value="20" {% if standard_time_per_question == "20" or time_per_question == "20" %}selected{% endif %}>20 Sekunden</option>
                    <option value="30" {% if standard_time_per_question == "30" or time_per_question == "30" %}selected{% endif %}>30 Sekunden</option>
                    <option value="45" {% if standard_time_per_question == "45" or time_per_question == "45" %}selected{% endif %}>45 Sekunden</option>
                    <option value="60" {% if standard_time_per_question == "60" or time_per_question == "60" %}selected{% endif %}>1 Minute</option>
                    <option value="120" {% if standard_time_per_question == "120" or time_per_question == "120" %}selected{% endif %}>2 Minuten</option>
                    <option value="300" {% if standard_time_per_question == "300" or time_per_question == "300" %}selected{% endif %}>5 Minuten</option>
                </select>
            </div>
            <div class="relative">
                <label for="credits" class="absolute -top-2 left-3 text-sm bg-white dark:bg-gray-900 px-1 text-blue-600 dark:text-white z-10">Credits</label>
                <textarea name="credits" id="credits" rows="4" class="p-4 w-full border-2 border-blue-400 rounded-md dark:text-white">{{ credits }}</textarea>
            </div>
            <div class="relative">
                <label for="tolerance_radius" class="absolute -top-2 left-3 text-sm bg-white dark:bg-gray-900 px-1 text-blue-600 dark:text-white z-10">Radius (Meter) für volle Punktzahl</label>
                <input type="number" id="tolerance_radius" name="tolerance_radius" class="p-4 w-full border-2 border-blue-400 rounded-md dark:text-white" min="1" value="{{ question.data.tolerance_radius }}" />
            </div>
            <div class="flex justify-between mt-4">
                <button class="p-2 rounded-md text-white bg-gray-600 hover:bg-gray-700" type="button" onclick="window.history.back()">Zurück</button>
                <input class="p-2 rounded-md text-white bg-blue-400 hover:bg-blue-500" type="submit" value="Speichern">
            </div>
        </form>
    </div>
</div>
<script>
    let marker = null;
    let circle = null;
    const locationInput = document.getElementById('location');
    const radiusInput = document.getElementById('tolerance_radius');

    const map = L.map('map').setView([51.72, 10.45], 3);

    // Prüfe, ob Dark Mode aktiv ist
    const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

    // Wähle das passende Karten-Design
    const tileUrl = isDarkMode
    ? 'https://{s}.basemaps.cartocdn.com/rastertiles/dark_all/{z}/{x}/{y}.png'
    : 'https://{s}.basemaps.cartocdn.com/rastertiles/light_all/{z}/{x}/{y}.png';

    L.tileLayer(tileUrl, {
    maxZoom: 19,
    attribution: '© OpenStreetMap © CARTO'
    }).addTo(map);

    function updateCircle(latlng) {
        const radius = parseInt(radiusInput.value) || 100;
        if (circle) {
            map.removeLayer(circle);
        }
        circle = L.circle(latlng, {
            color: 'blue',
            fillColor: '#87CEEB',
            fillOpacity: 0.2,
            radius: radius
        }).addTo(map);
    }

    function updateInput(latlng) {
        locationInput.value = `${latlng.lat.toFixed(6)},${latlng.lng.toFixed(6)}`;
        if (marker) {
            updateCircle(marker.getLatLng());
        }
    }

    function placeOrMoveMarker(latlng) {
        if (marker) {
            marker.setLatLng(latlng);
        } else {
            marker = L.marker(latlng, { draggable: true }).addTo(map);

            marker.on('dragend', () => {
                updateInput(marker.getLatLng());
            });
        }
        updateInput(latlng);
    }

    // Update circle when radius changes
    radiusInput.addEventListener('input', () => {
        if (marker) {
            updateCircle(marker.getLatLng());
        }
    });

    // Place marker at existing coordinates if available
    const existingCoords = '{{ question.data.target_location }}';
    if (existingCoords) {
        const [lat, lng] = existingCoords.split(',').map(Number);
        placeOrMoveMarker({ lat, lng });
        map.setView([lat, lng], 6); // Zoom in to show the marker
    }

    map.on('click', e => placeOrMoveMarker(e.latlng));
</script>
{% endblock %}