{% extends "base.html.twig" %}


{% block body %}
<section class="header-selection-architect">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ absolute_url(customPath('main_home')) }}">{{'home'|trans}}</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{'possession_types'|trans}} - {{'work_types'|trans}}</li>
            </ol>
        </nav>
        <h1>
            {{'find_architect'|trans}}
        </h1>
        <div class="form-search-wrapper">
            <form method="POST" action="{{ absolute_url(customPath('fo_search_query')) }}" id="form-search" role="form" onsubmit="return checkForm();">
                <div class="row">
                    <div class="col-md-6 first-col col-items">
                            <h3 class="types">{{'possession_types'|trans}}</h3>
                        <div class="row">
                            {% for propertyType in propertyTypes %}
                                {% set propertyTypeLanguage = forCurrentLanguage(propertyType.propertyTypeLanguage) %}
                                    {% if propertyType.isPrincipal == 1 %}
                                        <div class="form-group col-md-6 form-check">
                                            <input type="radio" name="type-biens" class="form-radio-input col-md-12" id="type-bien-{{ propertyTypeLanguage.propertyType.id }}" value="{{ propertyTypeLanguage.slug }}">
                                            <label class="form-check-label" for="type-bien-{{ propertyTypeLanguage.propertyType.id }}">{{ propertyTypeLanguage.namePropertyType }}</label>
                                        </div>
                                    {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                    <div class="col-md-6 col-items">
                            <h3 class="types">{{'work_types'|trans}}</h3>
                        <div class="row">
                            {% for workType in workTypes %}
                                {% set workTypeLanguage = forCurrentLanguage(workType.workTypeLanguage)  %}
                                    {% if workType.isPrincipal == 1 %}
                                        <div class="form-group col-md-6 form-check">
                                            <input type="radio" name="type-travaux" class="form-radio-input" id="type-travaux-{{ workTypeLanguage.workType.id  }}" value="{{ workTypeLanguage.slug }}">
                                            <label class="form-check-label" for="type-travaux-{{ workTypeLanguage.workType.id  }}">{{ workTypeLanguage.nameWorkType }}</label>
                                        </div>
                                    {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                </div>
                <div class="row mt-4">
                    <div class="col-md-8 offset-md-2">
                        <div class="row">
                            <div class="col-md-8">
                                <input type="text" class="form-control" placeholder="{{'form_search'|trans}}" id="autocomplete"
                                    name="search[lieu]">
                                <input type="hidden" name="city" id="search-city" />
                                <input type="hidden" name="postal-code" id="search-postal-code" />
                                <input type="hidden" name="city-postal-code" id="city-postal-code" />
                            </div>
                            <div class="col-md-4">
                                <button name="submitaz" type="submit" class="btn btn-block btn-archi-blue">{{'find'|trans}}</button>
                            </div>
                        </div>
                        <div class="row">
                            <div class="offset-md-8 col-md-4">
                                <p class="free-no-contract">{{'free'|trans}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</section>
<section class="central-img-selection"></section>
<section class="selection-why-choose">
    <div class="container">
        <h3>{{'trouvermonarchitectewebsite'|trans}}</h3>
        <p>
            {{'pageBtoC.use_filters'|trans|raw}}
        </p>
    </div>
</section>


{% endblock %}

{% block javascripts %}
<script>
    $(document).ready(function() {
        $('.paginate-to').click(function() {
            $('#offset-architect').val($(this).data('page'));
            $('#form-search').submit();
        })

        $(window).keydown(function(event){
            if(event.keyCode == 13) {
                event.preventDefault();
                var firstResult = $(".pac-container .pac-item:first").text();
                var country = "fr"
                var geocoder = new google.maps.Geocoder();
                    geocoder.geocode({address:firstResult, componentRestrictions: { country: country }, region: 'FR' }, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        var addressComponents = results[0].address_components
                        var addressComponent = null
                        for(var i in addressComponents) {
                            addressComponent = addressComponents[i]
                            if(addressComponent.types.indexOf('postal_code') > -1) document.getElementById('search-postal-code').value = addressComponent.long_name
                            if(addressComponent.types.indexOf('locality') > -1) document.getElementById('search-city').value = addressComponent.long_name
                        }
                        document.getElementById('form-search').submit();
                    }
                    return false;
                })
            }
        });
    });

</script>
<script>

    var options = {
        componentRestrictions: { country: {{country|raw}} },
        types: ['(regions)'],
        
    };
    function activatePlacesSearch() {
        var input = document.getElementById('autocomplete');
        var autocomplete = new google.maps.places.Autocomplete(input, options);
        google.maps.event.addListener(autocomplete, 'place_changed', onPlaceChanged);
    };
    function onPlaceChanged() {
        var place = this.getPlace();
        var addressComponents = place.address_components
        var addressComponent = null
        for(var i in addressComponents) {
            addressComponent = addressComponents[i]
            if(addressComponent.types.indexOf('postal_code') > -1) document.getElementById('search-postal-code').value = addressComponent.long_name
            if(addressComponent.types.indexOf('locality') > -1) document.getElementById('search-city').value = addressComponent.long_name
        }
        document.getElementById('form-search').submit();
    };


    function init() {
        activatePlacesSearch();
    }

    function checkForm(){
        $(document.activeElement).prop('disabled', true);
        return true;
    }
</script>
<script type="text/javascript"
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDNkil3rKocVoPtfM-_-NuoApPY24yR4RU&libraries=places&callback=init&language={{local}}"></script>
{% endblock %}