{% extends "mobile/mobile_base.html" %}
{% load static %}
{% load i18n %}

{% block extra_head %}
    <!-- MapLibre GL CSS (not in mobile_base.html) -->
    <link href="{% static 'common/maplibre-gl.css' %}" rel="stylesheet">
    <!-- jQuery UI CSS -->
    <link rel="stylesheet" href="{% static 'common/jquery-ui.min.css' %}">
    <style>
        .ui-autocomplete {
            max-height: 400px;
            overflow-y: auto;
            overflow-x: hidden;
            z-index: 1100;
        }

        /* Carte plus courte sur mobile */
        #map { height: 260px !important; }

        /* Réduire le padding des cards */
        .card-body { padding: 0.75rem !important; }
        .card-header { padding: 0.5rem 0.75rem !important; }

        /* Bouton Sauvegarder sticky */
        button[type="submit"] {
            position: sticky;
            bottom: 0.75rem;
            z-index: 100;
            width: 100%;
            padding: 0.85rem;
            font-size: 1.05rem;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.15);
        }

        /* Éviter le zoom iOS (font-size >= 16px) */
        input[type="text"],
        input[type="search"],
        input[type="number"],
        input[type="email"],
        input[type="date"],
        textarea,
        select {
            font-size: 16px !important;
        }

        /* Zone GPS indicator */
        #gps-status {
            font-size: 0.8rem;
            color: #6c757d;
        }
    </style>
{% endblock extra_head %}

{% block title %}
    {% if page_title %}
        {{ page_title }}
    {% else %}
        {% if inspection_config %}
            {% translate "Nouvelle inspection" %}
        {% else %}
            {% translate "Nouvelle intervention" %}
        {% endif %}
    {% endif %}
{% endblock title %}

{% block content %}
<div class="container-fluid px-3">
    <!-- Header with back button -->
    <div class="d-flex align-items-center mb-3">
        <a href="{% url 'mobile:choose_thematic_for_intervention_mobile' %}?maintain_type={{ maintain_type }}"
           class="btn btn-outline-secondary btn-sm me-2">
            <i class="bi bi-arrow-left"></i>
        </a>
        <div>
            <h5 class="mb-0">
                {% if page_title %}
                    {{ page_title }}
                {% else %}
                    {% if inspection_config %}
                        {% translate "Nouvelle inspection" %}
                    {% else %}
                        {% translate "Nouvelle intervention" %}
                    {% endif %}
                    — {{ thematic.name }}
                {% endif %}
            </h5>
            <small class="text-muted">
                {% if maintain_type == 'ameliorative' %}
                    <i class="bi bi-arrow-up-circle text-success me-1"></i>{% translate "Améliorative" %}
                {% else %}
                    <i class="bi bi-tools text-danger me-1"></i>{% translate "Corrective" %}
                {% endif %}
            </small>
        </div>
    </div>

    {% include "interventions/add/_intervention_add_form.html" %}
</div>
{% endblock content %}

{% block extra_scripts %}
    <!-- MapLibre GL JS (not in mobile_base.html) -->
    <script src="{% static 'common/maplibre-gl.js' %}"></script>
    <!-- jQuery (not in mobile_base.html) -->
    <script src="{% static 'common/jquery.min.js' %}"></script>

    {% include "interventions/add/_intervention_add_scripts.html" %}

    <!-- GPS pre-positioning (mobile only) -->
    <script>
    (function () {
        'use strict';
        var gpsApplied = false;

        function applyGpsPosition(lon, lat) {
            if (gpsApplied) return;
            gpsApplied = true;

            var lonEl = document.getElementById('id_lon');
            var latEl = document.getElementById('id_lat');

            // Only apply if no position was already set by the user or pre-filled form
            if (latEl && latEl.value && parseFloat(latEl.value) !== 50.8503) {
                return; // Form already has a meaningful position
            }

            if (lonEl) lonEl.value = lon;
            if (latEl) latEl.value = lat;

            try {
                if (typeof marker !== 'undefined' && marker) {
                    marker.setLngLat([lon, lat]);
                }
                if (typeof map !== 'undefined' && map) {
                    if (map.loaded()) {
                        map.flyTo({ center: [lon, lat], zoom: 16 });
                    } else {
                        map.once('load', function () {
                            map.flyTo({ center: [lon, lat], zoom: 16 });
                        });
                    }
                }
                // Trigger location update if available
                if (typeof update_locations === 'function') {
                    update_locations({ lon: lon, lat: lat, clean_equipment: false });
                }
            } catch (e) { /* noop */ }

            var statusEl = document.getElementById('gps-status');
            var statusText = document.getElementById('gps-status-text');
            if (statusEl && statusText) {
                statusText.textContent = '{% translate "Position GPS détectée" %}';
                statusEl.classList.remove('d-none');
                setTimeout(function () { statusEl.classList.add('d-none'); }, 4000);
            }
        }

        function startGps() {
            if (!navigator.geolocation) return;

            var latEl = document.getElementById('id_lat');
            // Skip if lat already has a meaningful value (pre-filled from URL param)
            if (latEl && latEl.value && parseFloat(latEl.value) !== 50.8503) return;

            var statusEl = document.getElementById('gps-status');
            if (statusEl) statusEl.classList.remove('d-none');

            navigator.geolocation.getCurrentPosition(
                function (pos) {
                    applyGpsPosition(pos.coords.longitude, pos.coords.latitude);
                },
                function () {
                    // Permission denied or error — hide the indicator silently
                    var statusEl = document.getElementById('gps-status');
                    if (statusEl) statusEl.classList.add('d-none');
                },
                { enableHighAccuracy: true, timeout: 10000, maximumAge: 60000 }
            );
        }

        // Wait for DOM + map to be initialised before attempting GPS
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', startGps);
        } else {
            startGps();
        }
    })();
    </script>
{% endblock extra_scripts %}