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

{% block body %}
{% set displayPopup = 1 %}
<section class="header-contactez-nous">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ absolute_url(customPath('main_home')) }}">{% trans %}home{% endtrans %}</a></li>
                <li class="breadcrumb-item active" aria-current="page">{% trans %}menu.contact_us{% endtrans %}</li>
            </ol>
        </nav>
        <div class="row first-row">
            <div class="col-md-6">
                <div class="logo">
                    <img src="{{ asset('lib/media/base/contact-logo-search'~ project_photographer ~'.png') }}" width="80" alt="{{'pageContactUs.contact_us_1'|trans}}" title="logo">
                </div>
                <h1 class="upper">{% trans %}pageContactUs.searching_architect{% endtrans %}</h1>
                <p>{% trans %}pageContactUs.guide{% endtrans %}<a href="{{ absolute_url(customPath('find_worker_search')) }}" class="btn-archi-blue upper btn-header">
                          {% trans %}pageHome.find{% endtrans %}</a></p> 
                
            </div>
            <div class="col-md-6">
                <div class="logo">
                        <img src="{{ asset('lib/media/base/contact-logo-archi'~ project_photographer ~'.png') }}" width="80" alt="{{'pageContactUs.contact_us_2'|trans}}" title="logo">
                </div>
                <h2 class="upper">{% trans %}menu.are_you_architect{% endtrans %}</h2>
                <p> {% trans %}pageContactUs.join{% endtrans %} <a href="{{ absolute_url(customPath('main_worker_inscription')) }}" class="btn-archi-blue upper btn-header">
                    {% trans %}pageContactUs.join_us{% endtrans %}</a></p>
                                  
            </div>
        </div>
    </div>
</section>
{# {% for flashMessage in app.session.flashbag.get('fo-success') %}
<div class="flashbag d-flex justify-content-center">
    <div class="row mt-2">
        <div class="col-md-12">
            <div class="alert alert-success alert-dismissable">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                <i class="fa fa-check-square-o"></i> {{ flashMessage }}
            </div>
        </div>
    </div>
</div>
{% endfor %}  #}
<section class="content-contactez-nous">
    <div class="container">
        <div class="row text-contactez-nous d-flex justify-content-center">

        {% if currentCountry2 == 'be' %}
            <p> {% trans %}pageContactUs.contact_phone_contact_us_be{% endtrans %}</p>
        {% elseif currentCountry2 == 'lu' %}
            <p> {% trans %}pageContactUs.contact_phone_contact_us_lu{% endtrans %}</p>
        {% elseif currentCountry2 == 'ch' %}
            <p> {% trans %}pageContactUs.contact_phone_contact_us_ch{% endtrans %}</p>
        {% else %}
            <p> {% trans %}pageContactUs.contact_phone_contact_us{% endtrans %}</p>
        {% endif %}
        </div> <br>
        <div class="row form-contactez-nous d-flex justify-content-center">
                <div class="col-md-5">
                    <form method="POST" id="formcontact" action="{{ absolute_url(customPath('worker_mail_send_contact')) }}" onsubmit="return checkForm();">
                        <label> {% trans %}pageContactUs.other_requests{% endtrans %} </label>
                        <input type="text" class="form-control" placeholder="{% trans %}forms.name{% endtrans %}" name="lastNameContact" required/>
                        <input type="text" class="form-control" placeholder="{% trans %}forms.firstname{% endtrans %}" name="firstNameContact" required/>
                        <input type="text" class="form-control" placeholder="{% trans %}forms.city{% endtrans %}" name="cityContact" required/>
                        <input type="email" class="form-control email" placeholder="{% trans %}forms.email{% endtrans %}" name="emailContact" required/>
                        <input type="text" class="form-control phone" placeholder="{% trans %}forms.number_phone{% endtrans %}" name="numberContact" required/>
                        <input type="hidden" name="url" value="{{ app.request.uri }}" />
                        <textarea class="form-control" placeholder="{{'forms.msg'|trans}}" name="messageContact" required></textarea>
                        <button type="submit" class="btn btn-block btn-archi-blue">{% trans %}validate{% endtrans %}</button>
                        {% if currentWebsite == 1 %}
                            {% if currentLocal == 'en'%}
                                <input type="hidden" name="redirecte" value="main_contact_us_tma_{{ countryUrl }}_en">
                            {% else %}
                                <input type="hidden" name="redirecte" value="main_contact_us_tma_{{ countryUrl }}">
                            {% endif %}
                        {% elseif currentWebsite == 3 %}
                            <input type="hidden" name="redirecte" value="main_contact_us_ph_{{ countryUrl }}">
                        {% else %}
                            <input type="hidden" name="redirecte" value="main_contact_us_{{ countryUrl }}">
                        {% endif %}
                        <div class="form-group">
                            <ul class="errorList"></ul>
                        </div>
                    </form>
                </div>
        </div>
    </div>

</section>
{% endblock %}

{% block javascripts %}
<script>
        var formcontact = $("#formcontact");
        formcontact.on('submit', function(e){
            validateCredentials(e, formcontact)
        })

        function validateCredentials(evt, form){
            var test = isSameNumber(form.find('.phone').val());   
            //Récupérer les valeurs des champs mail et phone via le form envoyé 
            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();
                //Placer un <ul> après le textarea et le remplir de <li> avec mon message d'erreur
                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>');
            }
        };

        function isSameNumber(phone){
            var ignoreChars = ["-", "(", ")", "/", "+", " "];
            var phoneLenght = phone.length;
            ignoreChars.includes(phone[i]);

            for(var i=0;i<phoneLenght;i++){
                if(phone[i] != phone[i-1]
                && !ignoreChars.includes(phone[i])
                && !ignoreChars.includes(phone[i-1])
                && i>=1){
                    return false;
                }
            }

            return true;
        };

        function checkForm(){
            $(document.activeElement).prop('disabled', true);
            return true;
        }
</script>
    {% if currentWebsite == 1 %}
        <script SameSite="None; Secure" src="https://static.landbot.io/landbot-widget/landbot-widget-1.0.0.js"></script>
        <script>
            if (window.innerWidth > 768 ){
                var customWidth = 'width: 120px;';            
                var customWidthRule = '.LandbotLauncherContent__bubble {' + customWidth + '}'; 
                    var myLandbot = new LandbotLivechat({
                        index: 'https://landbot.io/u/H-426238-VVOPBB8LA6O58C83/index.html',
                        accent: '#a1c10f',
                        launcherOptions: {                    
                            style: customWidthRule                
                        }    
                    });
            }
            else{
                    var myLandbot = new LandbotLivechat({
                        index: 'https://landbot.io/u/H-426238-VVOPBB8LA6O58C83/index.html',
                        accent: '#a1c10f', 
                    });
            }
        </script>
    {% endif %}
{% endblock %}