{% extends '@Contao/block_unsearchable' %}

{% block content %}
    <form{{ formAction is defined ? ' action='~formAction : '' }} class="filter" method="get">
        <div class="formbody">
            <input type="hidden" name="FORM_SUBMIT" value="{{ formSubmit }}">
            <div class="widget widget-text">
                <input type="text" name="filter_keywords" placeholder="Jobtitel" value="">
            </div>
            <div class="widget widget-autocomplete">
                <input type="hidden" id="filter-city-label-{{ id }}" name="filter_city_label" value="">
                <select id="filter-city-{{ id }}" name="filter_city" data-placeholder="PLZ/Ort" autocomplete="off">
                    <option value="">PLZ/Ort</option>
                </select>
            </div>
            <div class="widget widget-text">
                <input type="text" name="filter_radius" placeholder="Suchradius in km" value="">
            </div>
            {% if filterVertragsarten is defined %}
                <div class="widget widget-select">
                    <select name="filter_vertragsart">
                        <option value="">Art der Anstellung</option>
                        {% for vertragsart in filterVertragsarten %}
                            <option value="{{ vertragsart.ObjectUuid }}">{{ vertragsart.Bezeichnung }}</option>
                        {% endfor %}
                    </select>
                </div>
            {% endif %}
            {% if filterAbteilung is defined %}
                <div class="widget widget-select">
                    <select name="filter_abteilung">
                        <option value="">Unternehmensbereich / Abteilung</option>
                        {% for abteilung in filterAbteilung %}
                            <option value="{{ abteilung.ObjectUuid }}">{{ abteilung.Bezeichnung }}</option>
                        {% endfor %}
                    </select>
                </div>
            {% endif %}
            <div class="widget widget-submit">
                <button type="submit">Suchen</button>
            </div>
        </div>
    </form>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            new TomSelect("#filter-city-{{ id }}",{
                allowEmptyOption: true,
                create: false,
                valueField: 'latLon',
                labelField: 'name',
                searchField: 'name',
                load: function(query, callback) {
                    var url = '_geodb/getLatLon?q=' + encodeURIComponent(query);
                    fetch(url)
                        .then(response => response.json())
                        .then(json => {
                            callback(json.items);
                        }).catch(() => {
                        callback();
                    });
                },
                onChange: function (values) {
                    let target = document.getElementById('filter-city-label-{{ id }}');
                    if (target !== undefined && this.activeOption.innerText !== undefined)
                    {
                        target.value = this.activeOption.innerText
                    }
                }
            });
        }, false);
    </script>

{% endblock %}