@extends('layouts.base')

@section('editable_content')
    {{ Form::open(['method' => 'get', 'url' => 'aanbod', 'id' => 'selectForm']) }}

    @include('properties.form_offer')

    {{ Form::close() }}

    <div class="contact-page  contact-page--househunters">
        <div class="content-container">
            <div class="house-hunters-form">
                @include('layouts.partials.houseHuntersForm')
            </div>
            <div class="contact-block">
                <h1 class="house-hunters-title">Laat ons weten wat u zoekt<br/>en wij zoeken mee!</h1>
                <img alt="contact-image" style="max-width: 550px; margin: auto;" src="/img/househunters_pin.png">
                <h4>Huizenjagers</h4>
            </div>
            <div class="clear"></div>
        </div>
    </div>


@endsection

@section('extra-js')
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={{Config::get('komma.google_api_key')}}&libraries=places"></script>
    <script type="text/javascript" src="/js/jquery.selectric.min.js"></script>
    <script type="text/javascript" src="/js/form.js?v=2"></script>
    <script type="text/javascript" src="/js/houseHuntersForm.js"></script>

    <script type="text/javascript">
        $(function () {

            const regionSearch = document.getElementById('region');
            const searchOptions = {
                types: ['(regions)'],
                // types: ['(cities)'],
                // types: ['address'],
                // types: ['geocode'],
                // types: ['establishment'],
                componentRestrictions: {country: 'be'}
            };

            const regionAutocomplete = new google.maps.places.Autocomplete(regionSearch, searchOptions);

            google.maps.event.addListener(regionAutocomplete, 'place_changed', function() {

                const place = regionAutocomplete.getPlace();

                const errorMessage = document.getElementById('js-search-error');

                if(place.vicinity === undefined) {
                    errorMessage.innerHTML = 'Geselecteerd optie is niet mogelijk.';
                    return;
                }
                else errorMessage.innerHTML = '';

                const regionList = document.getElementById('js-region-list');
                regionList.innerHTML += '<li class="region-list__item">' + place.vicinity + '</li>';

            });

            $('#js-region-list').on('click', '.region-list__item', function () {
                this.remove();
            });

        });
    </script>
@endsection