{% extends "assets/base_assets_index.html" %}
{% load static i18n %}

{% block tab_actions %}
    <li class="nav-item ms-auto">
        <a href="{% url 'assets:management_zones_index' %}?thematic=nature" class="btn btn-sm btn-outline-success d-inline-flex align-items-center gap-1 my-1 me-2" title="{% translate 'Gérer les zones de gestion écologique et d'entretien' %}">
            <i class="bi bi-diagram-3"></i>
            <span>{% translate "Zones de gestion" %}</span>
        </a>
    </li>
{% endblock tab_actions %}
    

{% block locations_filter_form %}
    <form method="get" id="filter-form" class="row g-3 mb-4" style="width: 30vw;">
        <div class="col-12">
            <label class="form-label">{% translate "Type de localisation" %}</label>
            <div class="d-flex gap-3">
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="location_type" id="location_type_all" value=""
                        {% if not selected_location_type %}checked{% endif %}>
                    <label class="form-check-label" for="location_type_all">{% translate "Tous" %}</label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="location_type" id="location_type_naturelocation" value="naturelocation"
                        {% if selected_location_type == 'naturelocation' %}checked{% endif %}>
                    <label class="form-check-label" for="location_type_naturelocation">{% translate "Voiries" %}</label>
                </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <label for="highway" class="form-label">{% translate "Ring et autoroutes" %}</label>
            <input type="checkbox" id="highway" name="highway" class="form-check-input" {% if highway %}checked{% endif %} value="1">
        </div>
        <div class="col-12">
            <button type="button" id="apply-filters" class="btn btn-primary">{% translate "Filtrer" %}</button>
            <button type="button" id="reset-filters" class="btn btn-secondary">{% translate "Réinitialiser" %}</button>
        </div>
    </form>
{% endblock locations_filter_form %}



{% block assets_filter_form %}    
    <form method="get" id="assets-filter-form" class="row g-3 mb-3 me-3" style="width: 600px;">
        <div class="col-6">
            <label for="category" class="form-label">{% translate "Catégorie" %}</label>
            <select name="category" id="category" class="form-select" multiple>
                {% for key, value in category_choices %}
                    <option value="{{ key }}" {% if key in selected_categories %}selected{% endif %}>
                        {{ value }}
                    </option>
                {% endfor %}
            </select>
        </div>
        <div class="col-6">
            <label for="model" class="form-label">{% translate "Modèle" %}</label>
            <select name="model" id="model" class="form-select" multiple>
                {% for key, value in model_choices %}
                    <option value="{{ key }}" {% if key in selected_models %}selected{% endif %}>
                        {{ value }}
                    </option>
                {% endfor %}
            </select>
        </div>
        <div class="col-12 d-flex justify-content-between mt-4" style="width: 200px;">
            <button type="button" id="apply-assets-filters" class="btn btn-sm btn-primary">{% translate "Filtrer" %}</button>
            <button type="button" id="reset-assets-filters" class="btn btn-sm btn-secondary">{% translate "Réinitialiser" %}</button>
        </div>
    </form>
{% endblock assets_filter_form %}


{% block const_script %}
<script>
    const locationsgeojsonUrl = "{% url 'assets:nature_locations_geojson' %}";
    const assetsgeojsonUrl = "{% url 'assets:nature_assets_geojson' %}";
    
    const locationsurl = "{% url 'assets:nature_locations' %}";
    const assetsurl = "{% url 'assets:nature_index' %}";
    
    var locations_property_fields = ['name', 'highway'];
    var locations_columns = [
        { field: 'name', title: '{% translate "Nom" %}' },
        { field: 'highway', title: '{% translate "Ring/Autoroute" %}', align: 'center' }
    ];

    var assets_property_fields = ['category', 'model', 'area'];
    var assets_columns = [
        { field: 'category', title: '{% translate "Catégorie" %}' },
        { field: 'model', title: '{% translate "Modèle" %}' },
        { field: 'area', title: '{% translate "Superficie" %}' }
    ]


    const locations_layer_def = {
        id: 'locations',
        type: 'fill',
        source: 'locations',
        paint: {
            'fill-color': '#0094ff',
            'fill-opacity': 0
        }
    };
    var locations_outline_layer = {
        id: 'locations-outline',
        type: 'line',
        source: 'locations',
        paint: {
            'line-color': [
                'case',
                ['boolean', ['feature-state', 'highlighted'], false], '#ff0000',
                '#0094ff'
            ],
            'line-width': [
                'case',
                ['boolean', ['feature-state', 'highlighted'], false], 1,
                1
            ],
            'line-opacity': 0.7
        }
    };

    const assets_surfaces_layer_def = {
        id: 'assets',
        type: 'fill',
        source: 'assets',
        filter: ['all',
        ['==', ['get', 'asset_type'], 'naturegreensurface']
        ],
        paint: {
            'fill-color': ['get', 'color'],
            'fill-opacity': 0.7,
            'fill-outline-color': [
                'case',
                ['boolean', ['feature-state', 'highlighted'], false], '#ff0000',
                '#00000000' 
            ],
        },
        minzoom: 8
    };

    const assets_points_layer_def = {
        id: 'assets-points',
        type: 'circle',
        source: 'assets',
        filter: [
            'all',
            ['in', ['get', 'asset_type'], ['literal', ['naturetree', 'natureshrub', 'naturebench']]],
            ['any',
                ['==', ['geometry-type'], 'Point'],
                ['==', ['geometry-type'], 'MultiPoint']
            ]
        ],
        paint: {
        'circle-radius': [
            'interpolate', ['linear'], ['zoom'],
            8,  2,
            12, 3,
            16, 5,
            20, 8
        ],
        'circle-color': ['coalesce', ['get', 'color'], '#0277BD'],
        'circle-stroke-width': [
            'case',
            ['boolean', ['feature-state', 'highlighted'], false], 2,
            1
        ],
        'circle-stroke-color': [
            'case',
            ['boolean', ['feature-state', 'highlighted'], false], '#ff0000',
            '#000000'
        ],
        'circle-opacity': 0.8
        },
        minzoom: 8
    };

    const assets_layers_defs = [assets_surfaces_layer_def, assets_points_layer_def];


    // Filtrer les modèles par catégorie dans le formulaire des assets
    const modelsByCategory = {{ category_model_map|safe }};
    document.addEventListener("DOMContentLoaded", function () {
        const categorySelect = document.getElementById("category");
        const modelSelect = document.getElementById("model");

        function updateModelOptions() {
            const selectedCategories = Array.from(categorySelect.selectedOptions).map(opt => opt.value);
            const previouslySelectedModels = Array.from(modelSelect.selectedOptions).map(opt => opt.value);

            if (selectedCategories.length === 0) {
                return;
            }

            modelSelect.innerHTML = "";

            const allModels = [];
            const addedKeys = new Set();

            selectedCategories.forEach(cat => {
                const models = modelsByCategory[cat] || [];
                models.forEach(model => {
                    if (!addedKeys.has(model.key)) {
                        allModels.push(model);
                        addedKeys.add(model.key);
                    }
                });
            });

            allModels.sort((a, b) => a.label.localeCompare(b.label));

            allModels.forEach(model => {
                const option = document.createElement("option");
                option.value = model.key;
                option.text = model.label;
                if (previouslySelectedModels.includes(model.key)) {
                    option.selected = true;
                }
                modelSelect.appendChild(option);
            });
        }

        categorySelect.addEventListener("change", updateModelOptions);

        updateModelOptions();
    });
</script>
{% endblock const_script %}

{% block extra_script %}
<script>
    document.addEventListener("DOMContentLoaded", function () {
        function setupNatureOverlays() {
            if (typeof initContractsMapOverlay === 'function' && window.map) {
                initContractsMapOverlay({
                    map: window.map,
                    layerSwitcher: window.layerSwitcher,
                    thematic: 'nature',
                    geojsonUrl: "{% url 'contracts:contracts_geojson' %}",
                });
            }
            if (typeof initManagementZonesMapOverlay === 'function' && window.map) {
                initManagementZonesMapOverlay({
                    map: window.map,
                    layerSwitcher: window.layerSwitcher,
                    thematic: 'nature',
                    geojsonUrl: "{% url 'assets:management_zones_geojson' %}",
                });
            }
        }

        if (window.map && window.map.loaded && window.map.loaded()) {
            setupNatureOverlays();
        } else if (window.maploader) {
            window.maploader.addEventListener('mapLoaded', () => {
                setTimeout(setupNatureOverlays, 100);
            });
        } else if (window.map) {
            window.map.on('load', setupNatureOverlays);
        }
    });
</script>
{% endblock extra_script %}