{% set displayFooter = true %}
{% 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-photographer" id="header-search">
        <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 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">{{'pageBtoC.next_to'|trans}}</li>
                    {% endif %}
                </ol>
            </nav>
            <h1>
                {{'pageBtoC.next_to'|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 method="GET" action="{{ customPath('find_worker_search') }}" id="form-search" role="form">
                    <div class="row">
                        <div class="col-md-4">
                            <select name="slugs[]" class="form-control select-box">
                                <option value=""> {{'property_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 second-item">
                            <select name="slugs[]" class="form-control select-box">
                                <option value=""> {{'work_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-photographer" id="header-result">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h2>
                        {% trans %}pageBtoC.selection{% endtrans %}
                        {% if selection|length > 0 %}: {{ selection }}{% endif %}
                    </h2>
                </div>
                <div class="col-lg-8">
                    {% for photographer in workers %}
                        <div class="photographer-item shadow-sm">
                            <div class="row">
                                <div class="col-lg-3 photographer-infos">
                                    <a href="{{ absolute_url(customPath('worker_sheet', { workerKey : photographer.workerKey })) }}">
                                        {% if photographer.profilePicture %}
                                        <img class="photographer-logo" src="{{ photographer.profilePicture.picture | imagine_filter('remote_worker_logo_photographe') }}"
                                            class="architect-logo" alt="{#alt#}" />
                                        {% endif %}
                                    </a>
                                    <div class="photographer-skills">
                                        {% for skill in photographer.skills %}
                                            {% if skill.skill.currentTranslation and loop.index <= maxSkillDisplay %}
                                                <div class="photographer-skill">
                                                    <span>{{ skill.skill.currentTranslation.name }}</span>
                                                </div>
                                            {% endif %}
                                        {% endfor %}
                                        {% if photographer.skills|length > maxSkillDisplay  %}
                                        <div class="photographer-skill-nb"><span>+
                                                {{ photographer.skills|length - maxSkillDisplay }}</span></div>
                                        {% endif %}
                                    </div>
                                </div>
                                <div class="col-lg-9">
                                    <a href="{{ absolute_url(customPath('worker_sheet', { workerKey : photographer.workerKey })) }}" id="infos-archi">
                                        <h3>{{ photographer.fullName }} <br/>
                                        {{ photographer.company }} - {{ photographer.city }} ({{ photographer.zipCode }})</h3>
                                    </a>
                                    {% if photographer.pictures|length > 0 %}
                                        {% if loop.index <= maxPictureDisplay %}
                                            <div id="carousel-photographer-{{ photographer.id }}" class="carousel-photographer carousel slide " data-ride="carousel" data-touch="true" oncontextmenu="return false;">
                                                    <ol class="carousel-indicators">
                                                        {% for picture in photographer.pictures %}
                                                        <li data-target="#carousel-photographer-{{ photographer.id }}" data-slide-to="{{ loop.index - 1 }}" {% if loop.index == 1 %}class="active"{% endif %}}></li>
                                                        {% endfor %}
                                                    </ol>
                                                <div class="carousel-inner">
                                                    {% for picture in photographer.pictures %}
                                                        <div class="carousel-item {% if loop.index == 1 %}active{% endif %}">
                                                            <div class="carousel-content">
                                                                <a href="{{ absolute_url(customPath('worker_sheet', { workerKey : photographer.workerKey })) }}">
                                                                    <img src="{{ picture.picture | imagine_filter('remote_search_slide') }}" class="img-photographer" alt="" />
                                                                </a>
                                                            </div>
                                                        </div>
                                                    {% endfor %}
                                                </div>
                                                {% if photographer.pictures|length > 1 %}
                                                    <a class="carousel-control-prev" href="#carousel-photographer-{{ photographer.id }}" role="button" data-slide="prev"></a>
                                                    <a class="carousel-control-next" href="#carousel-photographer-{{ photographer.id }}" role="button" data-slide="next"></a>
                                                {% endif %}
                                            </div>
                                        {% endif %}
                                    {% endif %}
                                </div>
                                {% if photographer.currentTranslation %}
                                <div class="contain-mini-description">
                                    <div class="mini-description col-lg-8">
                                        {{ photographer.currentTranslation.miniDescription|raw }}
                                    </div>
                                    <div class="col-lg-3 btn-mini-description">
                                        <a href="{{ absolute_url(customPath('worker_sheet', { workerKey : photographer.workerKey })) }}" class="btn btn-archi-blue ">{{'email.learn_more'|trans}}</a>
                                    </div>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                        {% if loop.index == displayFindBlock %}
                        <div class="we-find-photographer">
                            <p class="first">{{'dont_find'|trans}}</p>
                            <p class="second">{{'we_find_it'|trans}}</p>
                            <div class="photographer-call-me">
                                <h4>{{'photographer_callback_sr'|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 %}
                    <div class="photographer-paginate">
                        <ul>
                            <input type="hidden" id="offset-photographer" name="offset" />
                            {% if (offsetQuery+1) > 1 %}
                            <li class="paginate-to" data-page="{{ offsetQuery-1 }}"><i class="fa fa-angle-left"></i>
                            {% endif %}
                            {% if nbStartPaginate > 1 %}
                            <li class="paginate-to" data-page="0">1</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 }}">{{ paginate }}</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 }}">{{ nbPages }}</li>
                            {% endif %}
                            {% if (offsetQuery+1) < nbPages %}
                            <li class="paginate-to" data-page="{{ offsetQuery+1 }}"><i class="fa fa-angle-right"></i></li>
                            {% endif %}
                        </ul>
                    </div>
                    {% endif %}
                </div>
                <div class="col-lg-4">
                    <div class="map-photographer" 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-photographer">
                            <p>{{'footer.architect_callback'|trans|raw}}</p>
                            <a href="{{ absolute_url(customPath('main_BtoC')) }}" class="btn btn-archi-blue">{{'footer.lets_go'|trans}}</a>
                        </div>
                </div>
            </div>
        </div>
    </section>
<section class="search-why-choose">
    <div class="container">
        <h3>{{'trouvermonarchitectewebsite'|trans|raw}}</h3>
        <p>{{ textWhyChoose|raw }}</p>
    </div>
</section>

<div class="photographer-call" lang="{{currentLocal}}">
    <div class="content">
        <h4>{{'footer.architect_callback'|trans|raw}}
        </h4>
        <a href="{{ absolute_url(customPath('main_BtoC')) }}" class="btn btn-archi-blue">{{'footer.lets_go'|trans}}</a>
    </div>
</div>
{% 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-photographer').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">En savoir plus</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-ph.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 %}