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


{% block meta %}
<title>{{ meta['title'] }}</title>
<meta name="description" content="{{ meta['description'] }}" />
{% endblock %}

{% block add %}
    {% if nbWorkers == 0 %}
    <meta name="robots" content="noindex">
    {% endif %}
{% endblock %}

{% block body %}
<section class="header-search-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>
                {% if '.com' in app.request.uri and placeData.country is defined and placeData.country.long_name is defined %}
                <li class="breadcrumb-item active test"><a
                    href="{{ absolute_url(customPath('find_worker_search')) }}">{{placeData.country.long_name}}</a>
                </li>
                {% endif %}
                {% if placeData.region %}
                <li class="breadcrumb-item active"><a
                        href="{{ absolute_url(customPath('find_worker_place_reg_results_all', { place : placeData.region.long_name|urlPrepare })) }}">{{placeData.region.long_name}}</a>
                </li>
                {% endif %}
                {% if placeData.department %}
                <li class="breadcrumb-item active"><a
                        href="{{ absolute_url(customPath('find_worker_place_dpt_results_all', { place : placeData.department.long_name|urlPrepare })) }}">{{placeData.department.long_name}}</a>
                </li>
                {% endif %}
                {% if placeData.city and place|length > 0 %}
                <li class="breadcrumb-item active"><a
                        href="{{ absolute_url(customPath('find_worker_place_results_all', { place : place })) }}">{{placeData.city.long_name}}</a>
                </li>
                {% else %}
                <li class="breadcrumb-item active" aria-current="page">{{'find_architect'|trans}}</li>
                {% endif %}
            </ol>
        </nav>

        <h1>
            {{'find_architect'|trans}}
            {% if placeData.city %}{{'a'|trans}}{{ placeData.city.long_name }}{% endif %}
            {% if skillsStr|length > 0 %}{{'specialist'|trans}} {{'en'|trans}} {{ skillsStr }}{% endif %}
        </h1>
        <p class="take-meeting">{{'immediately'|trans}}</p>
        <div class="form-search-wrapper">
            <form action="{{ customPath('find_worker_search') }}" method="GET" id="form-search">
                <div class="row">
                    <div class="col-md-4">
                        <select name="slugs[]" class="form-control select-box">
                            <option value=""> {{'work_types'|trans}} </option>
                            {% for skillType in skillType2 %}
                            {% if skillType.mainSkill == null %}
                            <option value="{{ skillType.currentTranslation.slug }}"
                                {% if skillType.currentTranslation.slug in skills %}selected{% endif %}>
                                {{ skillType.currentTranslation.name }}</option>
                            {% for skillTypeChild in skillType.skills  %}
                            <option value="{{ skillTypeChild.currentTranslation.slug }}"
                                {% if skillTypeChild.currentTranslation.slug in skills %}selected{% endif %}>-
                                {{ skillTypeChild.currentTranslation.name }}</option>
                            {% endfor %}
                            {% endif %}
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-4">
                        <select name="slugs[]" class="form-control select-box">
                            <option value="">{{'property_types'|trans}}</option> 
                            {% for skillType in skillType1 %}
                            {% if skillType.mainSkill == null %}
                            <option value="{{ skillType.currentTranslation.slug }}"
                                {% if skillType.currentTranslation.slug in skills %}selected{% endif %}>
                                {{ skillType.currentTranslation.name }}</option>
                            {% for skillTypeChild in skillType.skills  %}
                            <option value="{{ skillTypeChild.currentTranslation.slug }}"
                                {% if skillTypeChild.currentTranslation.slug in skills %}selected{% endif %}>-
                                {{ skillTypeChild.currentTranslation.name }}</option>
                            {% endfor %}
                            {% endif %}
                            {% endfor %}
                        </select>
                    </div>

                    <div class="col-md-4">
                        <input type="text" class="form-control input-google-autocomplete"
                            placeholder="{{'form_search'|trans}}" id="autocomplete-workerplace"
                            value="{{ placeData.formattedAddress }}" name="search[lieu]">
                        <input type="hidden" name="city" id="search-city" />
                        <input type="hidden" name="zip-code" id="search-zip-code" />
                        <input type="hidden" name="department" id="search-department" />
                        <input type="hidden" name="region" id="search-region" />
                        <input type="hidden" name="country" id="search-country" />
                        <input type="hidden" name="{{ placeKey }}" id="city-zip-code" value="{{ place }}" />
                        <input type="hidden" name="offset" id="offset-architect" />
                    </div>
                </div>
                <div class="row row-more-creterion" id="accordion">
                    {% for mainAttribute in mainAttributes %}
                    <div class="col-md-3">
                        <button type="button" class="btn btn-more-creterion btn-more-creterion-{{ mainAttribute['id'] }} btn-block collapsed {% if mainAttributesChecked[mainAttribute['id']] %}criterion-checked{% endif %}" 
                        data-toggle="collapse" data-target="#collapse-{{ mainAttribute.id }}"
                        aria-expanded="false">
                            + {{ mainAttribute.currentTranslation.name }}
                        </button>
                        <div class="collapse-menu-attributes collapse" id="collapse-{{ mainAttribute.id }}" data-parent="#accordion">
                            <div class="col-drop-menu">
                                <p>{{ mainAttribute.currentTranslation.name }}</p>
                                <div class="criteria-container">
                                    {% for attribute in mainAttribute.attributes  %}
                                    <div class="form-group form-check collapse-item">
                                        <label class="form-check-label" for="attribute-{{ attribute.id }}">
                                            <input type="checkbox" id="attribute-{{ attribute.id }}" class="form-check-input checkbox-{{ mainAttribute.id }}" {% if attribute.currentTranslation.slug in attributes %}checked{% endif %} name="attr[]" value="{{ attribute.currentTranslation.slug }}">
                                            {{ attribute.currentTranslation.name }}
                                        </label>
                                    </div>
                                    {% endfor %}
                                </div>
                            </div>
                            <div class="dropdown-footer">
                                <button type="button" class="btn btn-validate-refine collapsed erase-main-attribute" data-main="{{ mainAttribute.id }}"
                                    data-toggle="collapse" data-target="#collapse-{{ mainAttribute.id }}"
                                    aria-expanded="false">{{ 'myAccount.erase'|trans }}</button>
                                <button type="button" class="btn btn-validate-refine validate collapsed"
                                    data-toggle="collapse" data-target="#collapse-{{ mainAttribute.id }}"
                                    aria-expanded="false">{{ 'validate'|trans }}</button>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                <div class="btn-search-wrapper">
                    <button name="submitaz" type="submit"
                        class="btn btn-block btn-archi-blue">{{'pageHome.find'|trans}}</button>
                </div>
            </form>
        </div>
    </div>

</section>

<section class="results-architect">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h2>
                    {% trans %}pageBtoC.selection{% endtrans %}
                    {% if selection|length > 0 %}: {{ selection }}{% endif %}
                </h2>
            </div>
            <div class="col-md-8">
                {% for worker in workers %}
                <div class="architect-item shadow-sm">
                    <div class="row">
                        <div class="col-lg-4 architect-infos">
                            <a href="{{ absolute_url(customPath('worker_sheet', { workerKey : worker.workerKey })) }}">
                                {% if worker.profilePicture %}
                                <img src="{{ worker.profilePicture.picture | imagine_filter('remote_worker_logo') }}"
                                    class="architect-logo" alt="{#alt#}" />
                                {% endif %}
                                <p>{{ worker.firstname }} {{ worker.lastname }}</p>
                            </a>
                            <div class="architect-skills">
                                {% for workerSkill in worker.workerSkill %}
                                    {% if workerSkill.currentTranslation and loop.index <= maxSkillDisplay %}
                                        <div class="architect-skill">
                                            <span>{{ workerSkill.currentTranslation.name }}</span>
                                        </div>
                                    {% endif %}
                                {% endfor %}
                                {% if worker.workerSkill|length > maxSkillDisplay  %}
                                <div class="architect-skill-nb"><span>+
                                        {{ worker.workerSkill|length - maxSkillDisplay }}</span></div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-lg-8">
                            <a href="{{ absolute_url(customPath('worker_sheet', { workerKey : worker.workerKey })) }}">
                                <h3>{{ worker.company }} - {{ worker.city }} ({{ worker.zipCode }})</h3>
                            </a>

                            <div id="carousel-architect-{{ worker.id }}" class="carousel-architect carousel slide"
                                data-ride="carousel" data-touch="true" oncontextmenu="return false;">
                                <div class="carousel-inner">
                                    {% for picture in worker.pictures %}
                                    {% if loop.index <= maxPictureDisplay %}
                                    <div class="carousel-item {% if loop.index == 1 %}active{% endif %}">
                                        <div class="carousel-content">
                                            <a
                                                href="{{ absolute_url(customPath('worker_sheet', { workerKey : worker.workerKey })) }}">
                                                <img src="{{ picture.picture | imagine_filter('remote_search_slide') }}"
                                                    class="img-architect" alt="{#alt#}" />
                                            </a>
                                        </div>
                                    </div>
                                    {% endif %}
                                    {% endfor %}
                                </div>
                                {% if worker.pictures|length > 1 %}
                                <a class="carousel-control-prev" href="#carousel-architect-{{ worker.id }}"
                                    role="button" data-slide="prev"></a>
                                <a class="carousel-control-next" href="#carousel-architect-{{ worker.id }}"
                                    role="button" data-slide="next"></a>
                                {% endif %}
                            </div>
                        </div>
                        {% if worker.currentTranslation != "[]"%}
                        <div class="mini-description col-lg-8">
                            {{ worker.currentTranslation.miniDescription|raw }}
                        </div>
                        <div class="col-lg-4 btn-mini-description">
                            <a href="{{ absolute_url(customPath('worker_sheet', { workerKey : worker.workerKey })) }}" class="btn btn-archi-blue">{% trans %}email.learn_more{% endtrans %}</a>
                        </div>
                        {% endif %}
                    </div>
                </div>

                {% if loop.index == displayFindBlock %}
                <div class="we-find-architect">
                    <p class="first">{{'pageBtoC.dont_find'|trans}}</p>
                    <p class="second">{{'pageBtoC.we_find_it'|trans}}</p>
                    <div class="architect-call-me">
                        <h4>{{'pageBtoC.architect_callback_sr_bis'|trans|raw}}
                        </h4>
                        <a href="{# absolute_url(customPath('fo_BtoC')) #}"
                            class="btn btn-archi-blue">{{'footer.lets_go'|trans}}</a>
                    </div>
                </div>
                {% endif %}
                {% endfor %}
                {% if nbWorkers > limitQuery %}
                {% set currentSearchUrl = app.request.attributes.get('_route') %}
                {% set currentParams = app.request.attributes.get('params') %}
                {% set currentPlace = app.request.attributes.get('place') %}
                <div class="architect-paginate">
                    <ul>
                        {% if (offsetQuery+1) > 1 %}
                        <li class="paginate-to" data-page="{{ offsetQuery-1 }}"><a class="paginate-link" href="{{ addPaginateParams(customCurrentPath(currentSearchUrl, { place : currentPlace, params : currentParams }), offsetQuery-1 ) }}" ><i class="fa fa-angle-left"></a></i>
                        {% endif %}
                        {% if nbStartPaginate > 1 %}
                        <li class="paginate-to" data-page="0"><a class="paginate-link" href="{{ addPaginateParams(customCurrentPath(currentSearchUrl, { place : currentPlace, params : currentParams }), 0 ) }}" >1</a></li>
                        {% if offsetQuery + 1 > nbMaxPaginate %}
                        <li class="divider">...</li>
                        {% endif %}
                        {% endif %}
                        {% for paginate in nbStartPaginate..nbPaginate %}
                        <li class="paginate-to {% if paginate == (offsetQuery+1) %}active{% endif %}"
                            data-page="{{ paginate-1 }}"><a class="paginate-link" href="{{ addPaginateParams(customCurrentPath(currentSearchUrl, { place : currentPlace, params : currentParams }), paginate-1 ) }}" >{{ paginate }}</a></li>
                        {% endfor %}
                        {% if nbPages > nbPaginate %}
                        {% if offsetQuery + 1 <= nbPages - nbMaxPaginate %}
                        <li class="divider">...</li>
                        {% endif %}
                        <li class="paginate-to {% if nbPages == (offsetQuery+1) %}active{% endif %}"
                            data-page="{{ nbPages-1 }}"><a class="paginate-link" href="{{ addPaginateParams(customCurrentPath(currentSearchUrl, { place : currentPlace, params : currentParams }), nbPages-1 ) }}" >{{ nbPages }}</a></li>
                        {% endif %}
                        {% if (offsetQuery+1) < nbPages %}
                        <li class="paginate-to" data-page="{{ offsetQuery+1 }}"><a class="paginate-link" href="{{ addPaginateParams(customCurrentPath(currentSearchUrl, { place : currentPlace, params : currentParams }), offsetQuery+1 ) }}" ><i class="fa fa-angle-right"></i></a></li>
                        {% endif %}
                    </ul>
                </div>
                {% endif %}
            </div>
            <div class="col-md-4">
                <div class="map-architect" id="map"></div>

                <div class="div-all-archi">
                    <a href="{{ absolute_url(customPath('main_worker_map')) }}"
                        class="all-archi">{{'see_all_archi'|trans|raw}}</a>
                </div>
                <div class="search-call-architect">
                    <a href="{{ absolute_url(customPath('main_BtoC')) }}">
                        <img src="{{asset('lib/media/base/un-archi-me-rappelle.png')}}" class="img-architect-rappelle"
                            alt="{{'search'|trans}}" />
                            <div class="content-archi-callback">{{'pageBtoC.architect_callback_sr_bis'|trans|raw}}

                                <btn class="btn btn-archi-blue btn-in-map btn-archi-callback">{{'footer.lets_go'|trans}}</btn>
                            </div>
                    </a>

                </div>
            </div>
        </div>
    </div>
</section>

<section class="search-why-choose">
    <div class="container">
        <h3>{{'trouvermonarchitectewebsite'|trans}}</h3>
        <p>{{ textWhyChoose|raw }}</p>
</section>

{% endblock body %}
{% block javascripts %}
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
</script>
<script>
    $(document).ready(function () {
        /*$('.paginate-to').on('click', function () {
            $('#offset-architect').val($(this).data('page'));
            document.getElementById('form-search').submit();
        })*/

        $('.erase-main-attribute').on('click', function() {
            $('.checkbox-'+$(this).data('main')).prop('checked', false)
            if($('.btn-more-creterion-'+$(this).data('main')).hasClass('criterion-checked')) {
                $('.btn-more-creterion-'+$(this).data('main')).removeClass('criterion-checked')
            }
        })
    })

    /** END AUTO COMPLETE **/

    function initMap() {
        var zoom = {% if place|length > 0 %}10{% else %}5{% endif %};

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: zoom,
            center: {
                lat: {{placeData.latLng.lat}},
                lng: {{placeData.latLng.lng}}
            }
        });

        var marker = null;
        var myLatLng = null;
        var contentString = ''
        var infoWindow = new google.maps.InfoWindow({
            content: contentString
        });
        var markers = []; 
        {% for worker in workers %}
        var window = '<p class="map-company">{{worker.company}}</p>' +
            '<a href="{{ absolute_url(customPath('worker_sheet', { workerKey : worker.workerKey })) }}" class="btn btn-archi-blue btn-in-map">{% trans %}learn_more{% endtrans %}</a>'
        myLatLng = {
            lat: {{worker.latitude}},
            lng: {{worker.longitude}}
        };
        marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: new google.maps.MarkerImage("{{ asset('lib/media/base/Picto-Archi.png') }}")
        });
        markers.push(marker);
        setEventMarker(marker, infoWindow, window); 
        {% endfor %}

        mcOptions = [{
                height: 53,
                url: "{{ asset('lib/media/base/m1.png') }}",
                width: 53
            },
            {
                height: 56,
                url: "{{ asset('lib/media/base/m2.png') }}",
                width: 56
            },
            {
                height: 66,
                url: "{{ asset('lib/media/base/m3.png') }}",
                width: 66
            },
            {
                height: 78,
                url: "{{ asset('lib/media/base/m4.png') }}",
                width: 78
            },
            {
                height: 90,
                url: "{{ asset('lib/media/base/m5.png') }}",
                width: 90
            }
        ]

        var markerCluster = new MarkerClusterer(map, markers, {
            styles: mcOptions,
            maxZoom: 9,
            gridSize: 50
        });

    }

    function setEventMarker(marker, infowindow, texte) {
        google.maps.event.addListener(marker, 'click', function () {
            // affectation du texte
            infowindow.setContent(texte);
            // affichage InfoWindow
            infowindow.open(map, this);
        });
    }

    function init() {
        initMap();
        activatePlacesSearch();
    }
    var countryAutoComp = {{countryIsoCode|raw}}
</script>

<script src="{{ asset('lib/js/google-autocomplete.js')}}"></script>
<script type="text/javascript"
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDNkil3rKocVoPtfM-_-NuoApPY24yR4RU&libraries=places&callback=init&language={{ app.request.locale }}">
</script>
{% endblock %}