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

{% block meta %}
{% if worker.currentTranslation.contentTitle and worker.currentTranslation.contentTitle|length > 0 %}    
    <title>{{ worker.currentTranslation.contentTitle|striptags  }}</title>
    <meta name="description" content="{{ worker.currentTranslation.contentTitle|striptags  }}">
{% endif %}
{% endblock %}

{% block add %}
    {% if worker.isEnabled == 0 %}
        <meta name="robots" content="noindex, nofollow">
    {% endif %}
{% endblock %}

{% set default_country = customParam('default_country') %}
{% set currentLocal = app.request.locale %}
{% block body %}

{% set displayPopup = 1 %}

<div itemscope itemtype="https://schema.org/Person">
    <section class="header-ficher-photographer">
        <div id="fond"></div>
        <div class="container">
            <nav class="breadcrumb" 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"><a href="{{ absolute_url(customPath('find_worker_place_results_all', { place : worker.city|urlPrepare })) }}">{{'pageWorker.photographers'|trans}} {{ worker.city|capitalize }}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{ worker.company }}</li>
                </ol>
            </nav>
            <div class="row photographer-first-info">
                <div class="col-lg-3 photographer-info-text">
                    <div class="content-info-text">
                        {% if worker.profilePicture %}
                            <img itemprop="logo" src="{{ worker.profilePicture.picture | imagine_filter('remote_worker_logo_sheet_photographe') }}" class="photographer-logo" />
                        {% endif %}

                        {% if worker.isEnabled == 0 %}
                        {# <span class="badge badge-info">{{'pageWorker.draft'|trans}}</span> #}
                        <div id="cercle">{{'pageWorker.draft'|trans|raw}}</div>
                        {% endif %}
                        
                        <h1>{{ worker.company }}</h1>
                        <h2>{{ worker.fullName }}</h2>
                        {% if worker.boolDirige == 'photographer' and worker.sexe == 'monsieur' %}
                            <p class="legend-info">{{'pageWorker.leader'|trans}}</p>
                        {% elseif worker.boolDirige == 'photographer' and worker.sexe == 'madame' %}
                            <p class="legend-info">{{'pageWorker.leader_bis'|trans}}</p>
                        {% elseif worker.boolDirige == 'leader_1' %}
                            <p class="legend-info">{{'pageWorker.leader_1'|trans}}</p>
                        {% endif %}
                        <p class="company-address">
                            {{ worker.address }}<br />{{ worker.city }} {{ worker.zipCode }}<br />
                            {% if countryUrl == "be" %}
                            {% trans %}pageWorker.company_number{% endtrans %}: {{ worker.siret }}
                            {% else %}
                            {% trans %}pageWorker.company_siret{% endtrans %}: {{ worker.siret }}
                            {% endif %}
                        </p>
                        {% if worker.workerMedia %}
                            <div class="social-links">
                                {% if worker.workerMedia.linkedIn|length > 0 %}
                                <a href="{{ worker.workerMedia.linkedIn }}" class="btn-stat btn-point" data-point="1" data-stats="clic_btn_linkedin" target="_blank"><i class="fa fa-linkedin btn-tag-social" aria-hidden="true"></i></a>
                                {% endif %}
                                {% if worker.workerMedia.facebook|length > 0 %}
                                <a href="{{ worker.workerMedia.facebook }}" class="btn-stat btn-point" data-point="1" data-stats="clic_btn_facebook" target="_blank"><i class="fa fa-facebook-official btn-tag-social" aria-hidden="true"></i></a>
                                {% endif %}
                                {% if worker.workerMedia.twitter|length > 0 %}
                                <a href="{{ worker.workerMedia.twitter }}" class="btn-stat btn-point" data-point="1" data-stats="clic_btn_twitter" target="_blank"><i class="fa fa-twitter btn-tag-social" aria-hidden="true"></i></a>
                                {% endif %}
                                {% if worker.workerMedia.instagram|length > 0 %}
                                <a href="{{ worker.workerMedia.instagram }}" class="btn-stat btn-point" data-point="1" data-stats="clic_btn_instagram" target="_blank"><i class="fa fa-instagram btn-tag-social" aria-hidden="true"></i></a>
                                {% endif %}
                                {% if worker.workerMedia.pinterest|length > 0 %}
                                <a href="{{ worker.workerMedia.pinterest }}" class="btn-stat btn-point" data-point="1" data-stats="clic_btn_pinterest" target="_blank"><i class="fa fa-pinterest btn-tag-social" aria-hidden="true"></i></a>
                                {% endif %}
                                {% if worker.workerMedia.youtube|length > 0 %}
                                <a href="{{ worker.workerMedia.youtube }}" class="btn-stat btn-point" data-point="1" data-stats="clic_btn_youtube" target="_blank"><i class="fa fa-youtube-play btn-tag-social" aria-hidden="true"></i></a>
                                {% endif %}
                                {% if worker.workerMedia.websiteWorker|length > 0 %}
                                <a itemprop="url" href="{{ worker.workerMedia.websiteWorker }}" class="btn-stat btn-point" data-point="1" data-stats="clic_btn_siteInternet" target="_blank"><i class="fa fa-link btn-tag-website" aria-hidden="true"></i></a>
                                {% endif %}
                                {% if worker.workerMedia.websiteWorker2|length > 0 %}
                                <a itemprop="url" href="{{ worker.workerMedia.websiteWorker2 }}" class="btn-stat btn-point" data-point="1" data-stats="clic_btn_siteInternet" target="_blank"><i class="fa fa-link btn-tag-website" aria-hidden="true"></i></a>
                                {% endif %}
                                {% if worker.workerMedia.book|length > 0 %}
                                <a itemprop="url" href="{{ absolute_url(customPath('worker_book', {'workerKey': worker.workerKey})) }}" class="btn-stat btn-point" data-point="1" data-stats="clic_btn_siteInternet" target="_blank"><i class="fa fa-file-pdf-o btn-tag-social" aria-hidden="true"></i></a>
                                {% endif %}
                            </div>
                        {% endif %}
                    </div>
                </div>
                <div class="col-lg-8 photographer-info-right">
                    <div class="content-info-text">
                        <div oncontextmenu="return false"  id="carousel-photographer-pictures" class="carousel slide" data-ride="carousel" data-touch="true" data-wrap="true">
                            <ol class="carousel-indicators">
                                {% for picture in worker.pictures %}
                                <li data-target="#carousel-photographer-pictures" data-slide-to="{{ loop.index - 1 }}" {% if loop.index == 1 %}class="active"{% endif %}}></li>
                                {% endfor %}
                            </ol>
                            <div class="carousel-inner">
                                {% for picture in worker.pictures %}
                                <div class="carousel-item {% if loop.index == 1 %}active{% endif %}">
                                    <img itemprop="image" src="{{ picture.picture | imagine_filter('remote_sheet_slide_photo_scale') }}" class="d-block"  alt="{{getPictureAlt(picture)}}" >
                                </div>
                                {% endfor %}
                            </div>
                            {% if worker.pictures|length > 1 %}
                                <a class="carousel-control-prev" href="#carousel-photographer-pictures" role="button" data-slide="prev">
                                </a>
                                <a class="carousel-control-next" href="#carousel-photographer-pictures" role="button" data-slide="next">
                                </a>
                            {% endif %}
                        </div>
                    </div>
                    <div class="contact-photographer">
                        <div class="first-row">
                            <p class="contact-txt">{{'pageWorker.contact_by'|trans}} <span >{{ worker.company }}</span></p>
                        </div>
                        {% if worker.showNumber %}
                            <div class="second-row">
                                <div class="p-relative">
                                    <button  type="button" data-toggle="modal" data-target="#modalNumberPhone" data-stats="clic_btn_telephone" class="btn btn-archi-blue btn-stat btn-tag-phone"><i class="fa fa-phone btn-tag-phone" aria-hidden="true"> </i> {{'forms.phone'|trans}}</button>
                                    <p class="free-phone">{{'pageWorker.free_phone'|trans}}</p>
                                </div>
                                <div>
                                    <button type="button" data-toggle="modal" data-target="#modalEmail" data-stats="clic_btn_email" class="btn btn-archi-blue btn-stat btn-tag-email"><i class="fa fa-envelope-o btn-tag-email" aria-hidden="true"></i> {{'forms.email'|trans}}</button>
                                </div>
                            </div>
                        {% else %}
                            <div class="second-row blacklisted-row">
                                <div class="p-relative">
                                    <p class="blacklisted-message">{{'blacklist.message_sheet_worker'|trans}}</p> 
                                </div>
                                <div>
                                    <button type="button" data-toggle="modal" data-target="#modalEmail" data-stats="clic_btn_email" class="btn btn-archi-blue btn-stat btn-tag-email"><i class="fa fa-envelope-o btn-tag-email" aria-hidden="true"></i> {{'email'|trans}}</button>
                                </div>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </section>
<section class="photographer-informations">
    <div class="container">
        <div class="row">
            <div class="col-md-3 photographer-information-item photographer-information-item-type shwadow-sm">
                {% set photographerPrestations = getSkillsByType(worker['workerSkill'], 'prestation-type') %}
                {% set photographerPhotos = getSkillsByType(worker['workerSkill'], 'photo-type') %}
                {% set photographerStyles = getAttributesByMain(worker['workerAttribute'], 58) %}

                <div class="row">
                    <div class="col-6 col-md-12">
                        <h4 class="first">{{'prestation_type'|trans}}</h4>
                        {% for prestation in photographerPrestations %}
                            <span class="type-item type-prestation">{{ prestation.currentTranslation.name }}</span>
                        {% endfor %}
                    </div>
                    <div class="col-6 col-md-12">
                        <h4>{{'photos_types'|trans}}</h4>
                        {% for photos in photographerPhotos %}
                        <span class="type-item type-photos">{{ photos.currentTranslation.name }}</span>
                        {% endfor %}
                    </div>
                    <div class="col-6 col-md-12">
                        <h4>{{'style_types'|trans}}</h4>
                        {% for style in photographerStyles %}
                        <span class="type-item type-styles">{{ style.currentTranslation.name }}</span>
                        {% endfor %}
                    </div>
                </div>
            </div>
            <div class="col-md-6 photographer-information-item shwadow-sm photographer-information-item-description">
                <h3>{{'pageWorker.presentations'|trans}}</h3>
                <div class="photographer-description">
                    {{ worker.currentTranslation.description|raw }}
                </div>
                <div class="col-12" id="coord">

                    {% if worker.showNumber %}
                    <button class="btn btn-archi-blue btn-stat btn-tag-phone coord-description" data-toggle="modal" data-target="#modalNumberPhone" data-stats="clic_btn_telephone"><i class="fa fa-phone btn-tag-phone" aria-hidden="true"> </i> {{'forms.phone'|trans}}</button>
                    <button type="button" data-stats="clic_btn_email" data-toggle="modal" data-target="#modalEmail" class="btn btn-archi-blue btn-stat btn-tag-email coord-description"><i class="fa fa-envelope btn-tag-email" aria-hidden="true"></i> {{'forms.email'|trans}}</button>
                    {% else %}
                    <div class="p-relative">
                        <p class="blacklisted-message">{{'blacklist.message_sheet_worker'|trans}}</p> 
                    </div>

                    <button type="button" data-stats="clic_btn_email" data-toggle="modal" data-target="#modalEmail" class="btn btn-block btn-archi-blue btn-stat btn-tag-email"><i class="fa fa-envelope-o btn-tag-email" aria-hidden="true"></i> {{'email'|trans}}</button>
                    {% endif %}
                </div>
            </div>
            <div class="col-md-3" id="right-infos">
                <div class="map-photographer" id="map"></div>
                <div class="photographer-other-informations row">
                    {% if attribute_2 not in mainAttributesIds %}
                        <div class="photographer-other-information col-md-12 col-6">
                            <h4>{{'localisation'|trans}}</h4>
                            <ul>
                                {% for attributes in worker['workerAttribute'] %}
                                    {% if attributes['attribute']['mainAttribute'] is not null and attributes['attribute']['mainAttribute']['id'] == attribute_2 %}
                                        <li>{{ attributes['attribute']['currentTranslation']['name'] }}</li>
                                    {% endif %}
                                {% endfor %}
                            </ul>
                        </div>
                    {% endif %}
                    {% if attribute_3 not in mainAttributesIds %}
                        <div class="photographer-other-information col-md-12 col-6">
                            <h4>{{'prices'|trans}}</h4>
                            <ul>
                                {% for attributes in worker['workerAttribute'] %}
                                    {% if attributes['attribute']['mainAttribute'] is not null and attributes['attribute']['mainAttribute']['id'] == attribute_3 %}
                                        <li>{{ attributes['attribute']['currentTranslation']['name'] }}</li>
                                    {% endif %}
                                {% endfor %}
                            </ul>
                        </div>
                    {% endif %}
                    {% if attribute_4 not in mainAttributesIds %}
                        <div class="photographer-other-information col-md-12 col-6">
                            <h4>{{'payment'|trans}}</h4>
                            <ul>
                                {% for attributes in worker['workerAttribute'] %}
                                    {% if attributes['attribute']['mainAttribute'] is not null and attributes['attribute']['mainAttribute']['id'] == attribute_4 %}
                                        <li>{{ attributes['attribute']['currentTranslation']['name'] }}</li>
                                    {% endif %}
                                {% endfor %}
                            </ul>
                        </div>
                    {% endif %}
                    {% if attribute_5 not in mainAttributesIds %}
                        <div itemprop="knowsLanguage" class="photographer-other-information col-md-12 col-6">
                            <h4>{{'language_spoken'|trans}}</h4>
                            <ul>
                                {% for attributes in worker['workerAttribute'] %}
                                    {% if attributes['attribute']['mainAttribute'] is not null and attributes['attribute']['mainAttribute']['id'] == attribute_5 %}
                                        <li>{{ attributes['attribute']['currentTranslation']['name'] }}</li>
                                    {% endif %}
                                {% endfor %}
                            </ul>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</section>
    <section class="photographer-contact">
        <div class="container">
            <div class="row">
                <div class="col-md-6 offset-md-3">
                    {% if countryUrl == "es" %}
                    <h5>{{'pageWorker.wish'|trans|raw}} <strong class="yellow">{{ worker.company }}</strong></h5>
                    {% else %}
                    <h5>{{'pageWorker.wish'|trans|raw}} <strong class="yellow">{{ worker.fullName }}</strong></h5>
                    {% endif %}
                    <form method="POST" id="formBottom" action="{{ absolute_url(customPath('worker_mail_send', { 'id':worker.id })) }}">
                        <div class="form-group">
                            <input class="form-control" type="text" name="firstName" placeholder="{{'forms.firstname'|trans}}" value="">
                        </div>
                        <div class="form-group">
                            <input class="form-control" type="text" name="lastName" placeholder="{{'forms.name'|trans}}" value="">
                        </div>
                        <div class="form-group">
                            <input class="form-control email" type="email" name="email" placeholder="{{'forms.email'|trans}}" value="">
                        </div>
                        <div class="form-group">
                            <input class="form-control phone" type="text" name="phone" placeholder="{{'forms.number_phone'|trans}}" value="">
                        </div>
                        <div class="form-group">
                            <input class="form-control" type="text" required name="zipCode" placeholder="{{'forms.postal_code_project'|trans}}" value="">
                        </div>
                        <div class="form-group">
                            <input class="form-control" type="text" required name="city" placeholder="{{'forms.city_project'|trans}}" value="">
                        </div>
                        <div class="form-group">
                            <textarea class="form-control" type="text" name="description" placeholder="{{'forms.your_request'|trans}}"></textarea>
                        </div>
                            <input type="hidden" name="url" value="{{ app.request.uri }}" />
                            <input type="hidden" name="id" value="{{ worker.id }}" />
                        <div class="form-group">
                            <button class="btn btn-archi-blue btn-block">{{'forms.sent'|trans}}</button>
                        </div>
                        <div class="form-group">
                            <ul class="errorList"></ul>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
    {# MODAL NUMBER PHONE #}
    {% if worker.showNumber %}
    <div itemprop="contactPoint" itemscope itemtype="http://schema.org/ContactPoint" class="modal modal-number" id="modalNumberPhone" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true"> 
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <p class="mt-2" id="modalLabel">{{'pageWorker.contact_phone'|trans}}</p>
                    <button type="button" class="close position-absolute" style="right: 0.8em; z-index: 999;" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body text-center pb-2">
                    <p class="mb-2 mt-3 first-line" >{{'pageWorker.contact_by'|trans}} <strong class="upper">{{worker.company}}</strong> {{'pageWorker.by_phone'|trans}}</p>
                    <div class="row">
                        <p class="mx-auto mb-2" id="phone-area"></p>
                        <div class="w-100 mb-3 not-overtaxed"><strong class="upper">{{'pageWorker.free_phone'|trans}}</strong></div>
                        <p class="last-line mx-2">{{'pageWorker.dont_forget'|trans|raw}}</p>
                    </div>
                </div> 
            </div>
        </div>
    </div> 
    {% endif %}
    {# MODAL EMAIL #}
    <form method="POST" id="formModal" action="{{ absolute_url(customPath('worker_mail_send', { 'id':worker.id })) }}" enctype="multipart/form-data">
        <div itemprop="contactPoint" itemscope itemtype="http://schema.org/ContactPoint" class="modal modal-email" id="modalEmail" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <p id="modalLabel">{{'forms.contact_formular'|trans}}</p>
                        <button type="button" class="close position-absolute" style="right: 0.8em; z-index: 999;" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body text-center pb-2">
                        <p class="mb-3" >{{'forms.sent_architect'|trans}} <strong>{{ worker.fullName }}</strong></p>
                            <div class="form-row">
                                <div class="form-group col-md-12">
                                        <input class="form-control border-blue" id="fname" type="text" required name="firstName" placeholder="{{'forms.firstname'|trans}}" value="">
                                </div>
                                <div class="form-group col-md-12">
                                        <input class="form-control border-blue" id="lname" type="text" required name="lastName" placeholder="{{'forms.name'|trans}}" value="">
                                </div>
                                <div class="form-group col-md-12">
                                        <input class="form-control border-blue email" id="email" type="email" required name="email" placeholder="{{'forms.email'|trans}}" value="">
                                </div>
                                <div class="form-group col-md-12">
                                        <input class="form-control border-blue photo phone" id="number" type="text" required name="phone" placeholder="{{'forms.number_phone'|trans}}" value="">
                                </div>
                                <div class="form-group col-md-12">
                                    <input class="form-control border-blue" id="zipCode" type="text" required name="zipCode" placeholder="{{'forms.postal_code_project'|trans}}" value="">
                                </div>
                                    <input type="hidden" name="url" value="{{ app.request.uri }}" />
                                    <input type="hidden" name="id" value="{{ worker.id }}" />
                                <div class="form-group col-md-12">
                                    <input class="form-control border-blue" type="text" required name="city" placeholder="{{'forms.city_project'|trans}}" value="">
                                </div>
                                <div class="form-group col-md-12">
                                        <textarea class="form-control border-blue" type="text" name="description" placeholder="{{'forms.your_request'|trans}}"></textarea>
                                </div>
                                <div class=" form-group col-md-12 container-media">
                                    <label class="media" >{{'forms.choose_media'|trans}} </label>
                                    <input lang="en" type="file" id="image" name="image" accept="image/jpg, image/jpeg, image/png, application/pdf" value="" > 
                                </div>
                            </div>
                    </div> 

                    <div class="modal-footer">
                        <button data-stats="clic_btn_envoyer" name="submitaz" type="submit" class="btn btn-archi-blue btn-stat btn-tag-send">{{'forms.sent'|trans}}</button> <!-- data-stats="clic_btn_envoyer" -->
                    </div>
                    <div class="form-group">
                        <ul class="errorList"></ul>
                    </div>
                </div>
            </div>
        </div> 
    </form>
</div>
{% endblock %}

{% block javascripts %}
{% set number = number(worker.phone, websiteId) %}
<script>
        var urlArchi = "{{ absolute_url(customPath('worker_new_stats')) }}"
        var idArchi = "{{ worker.id }}"
        var lati = {{ worker.latitude }}
        var lngd = {{ worker.longitude }}
        var iconArchi = "{{ asset('lib/media/base/Picto-Archi-ph.png') }}"
        var getMap = document.getElementById('map')
        var local = "{{app.request.locale}}"
        {% if worker.showNumber %}
        var phoneEncode = '{{ number|base64Encode }}'
        {% endif %}

        var formBottom = $('#formBottom');
        var formModal = $('#formModal');
        formBottom.on('submit', function(e) { 
            validateCredentials(e, formBottom);
        });
        formModal.on('submit', function(e) {
            validateCredentials(e, formModal);
        })

        function validateCredentials(evt, form){  
            var emailvalue = form.find('.email').val();
            var phonevalue = form.find('.phone').val();
            var emailFilter = new RegExp(/^[a-z0-9&\.\-_]+@[a-z0-9\-]+\.([a-z0-9\-]+\.)*[a-z]{2,3}$/);
            form.find(".errorList li").remove();
            if(!emailFilter.test(emailvalue)){
                evt.preventDefault();
                var errormsg = "{% trans %}forms.invalid_email{% endtrans %}";
                form.find(".errorList").append('<li class="errorMsg">'+errormsg+'</li>');

            }
            var phoneFilter = new RegExp(/^[0-9\-\(\)\/\+\s]*$/);
            if(!phoneFilter.test(phonevalue) || isSameNumber(phonevalue)){
                evt.preventDefault();
                form.find(".errorList").append('<li class="errorMsg">{% trans %}forms.invalid_phone{% endtrans %}</li>');
            }
        }


</script>

<script src="{{ asset('lib/js/sheet-archi.js')}}?1.1"></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 %}