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

{% block body %}
{% set displayPopup = 1 %}
{% set project_photographer = customParam('project_photographer') %}
<section class="header-b-to-b">
    <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 %}pageBtoB.inscription{% endtrans %}</li>
            </ol>
        </nav>
        <div class="row first-row">
            <div class="col-md-6">
                <h1> {% trans %}pageBtoB.are_you{% endtrans %}</h1>
            </div>
            <div class="col-md-6">
                    <p>{% trans %}pageBtoB.75%{% endtrans %}</p>
                    <p>{% trans %}pageBtoB.qualified{% endtrans %}</p>
                    <p>{% trans %}pageBtoB.relation{% endtrans %}</p>
                    <p>{% trans %}pageBtoB.refund{% endtrans %}</p>
                    <p>{% trans %}pageBtoB.all_year{% endtrans %}</p>
                    {% if currentCountry2 == 'be' %}
                        <p> {% trans %}pageBtoB.more_info_at_be{% endtrans %}</p>
                    {% elseif currentCountry2 == 'lu' %}
                        <p> {% trans %}pageBtoB.more_info_at_lu{% endtrans %}</p>
                    {% elseif currentCountry2 == 'ch' %}
                        <p> {% trans %}pageBtoB.more_info_at_ch{% endtrans %}</p>
                    {% else %}
                        <p> {% trans %}pageBtoB.more_info_at{% endtrans %}</p>
                    {% endif %}
            </div>
        </div>
    </div>
</section>
<section class="content-b-to-b">
    <div class="container">
        <div class="row form-b-to-b">
            <div class="col-md-12">
                <h2>{% trans %}pageBtoB.rejoin{% endtrans %}</h2>
            </div>
            <div class="col-md-6 offset-md-3">
                <form method="POST" id="formbtob" action="{{ absolute_url(customPath('worker_mail_send_inscription')) }}" onsubmit="return checkForm();">
                    <input type="text" class="form-control" placeholder="{% trans %}forms.name{% endtrans %}" name="lastNameInscription" required/>
                    <input type="text" class="form-control" placeholder="{% trans %}forms.firstname{% endtrans %}" name="firstNameInscription" required/>
                    <input type="text" class="form-control" placeholder="{% trans %}forms.city{% endtrans %}" name="cityInscription" required/>
                    <input type="email" class="form-control email" placeholder="{% trans %}forms.email{% endtrans %}" name="emailInscription" required/>
                    <input type="text" class="form-control phone" placeholder="{% trans %}forms.number_phone{% endtrans %}" name="numberInscription" required/>
                    <input type="hidden" name="url" value="{{ app.request.uri }}" />
                    <button type="submit" class="btn btn-block btn-archi-blue btn-tag-btob">{% trans %} validate {% endtrans %}</button>
                    <div class="form-group">
                        <ul class="errorList"></ul>
                    </div>
                </form>
            </div>
        </div>
        <div class="row why-b-to-b">
            <div class="item shadow">
                <h4>{% trans %}pageBtoB.request{% endtrans %}</h4>
                <p>{% trans %}pageBtoB.20_request{% endtrans %}</p>
            </div>
            <div class="item shadow">
                <h4>{% trans %}pageBtoB.skills{% endtrans %}</h4>
                <p>{% trans %}pageBtoB.direct_relation{% endtrans %} </p>
            </div>
            <div class="item shadow">
                <h4> {% trans %}pageBtoB.refund_br{% endtrans %}</h4>
                <p> {% trans %}pageBtoB.quantity{% endtrans %}</p>
            </div>
        </div>
        <div class="row develop-b-to-b">
            <div class="col-md-12"><h2> {% trans %}pageBtoB.develop{% endtrans %}</h2></div>
            <div class="col-md-3 item">
                <img src="{{ asset('lib/media/base/develop-1'~ project_photographer ~ '.png') }}" alt="{{'pageBtoB.btob_img_1'|trans}}">
                <p> {% trans %}pageBtoB.target{% endtrans %}</p>
            </div>
            <div class="col-md-3 item">
                <img src="{{ asset('lib/media/base/develop-2'~ project_photographer ~ '.png') }}" alt="{{'pageBtoB.btob_img_2'|trans}}">
                <p> {% trans %}pageBtoB.enlarge{% endtrans %}</p>
            </div>
            <div class="col-md-3 item">
                <img src="{{ asset('lib/media/base/develop-3'~ project_photographer ~'.png') }}" alt="{{'pageBtoB.btob_img_3'|trans}}">
                <p>{% trans %}pageBtoB.boost{% endtrans %}</p>
            </div>
            <div class="col-md-3 item">
                <img src="{{ asset('lib/media/base/develop-4'~ project_photographer ~'.png') }}" alt="{{'pageBtoB.btob_img_4'|trans}}">
                <p>{% trans %}pageBtoB.find_your_cabinet{% endtrans %}</p>
            </div>
        </div>
    </div>
</section>
<section class="b-to-b-testimonials">
    <div class="container">
        <div id="carousel-testimonials" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
               {% for carouselOpinion in carouselOpinions %}
                   <div class="carousel-item {% if loop.index == 1 %}active{% endif %}">
                       <div class="row">
                           {% for opinion in carouselOpinion %}
                               <div class="col-md-6">
                                   <p class="testimonials-rates">
                                       {% for i in 1..opinion.stars %}
                                           <i class="fa fa-star checked" aria-hidden="true"></i>
                                       {% endfor %}
                                       {% if opinion.stars != 5 %}
                                           {% for i in 1..5-opinion.stars %}
                                               <i class="fa fa-star checked unchecked" aria-hidden="true"></i>
                                           {% endfor %}
                                       {% endif %}
                                   </p>
                                   <div class="testimonials-txt">
                                        {{opinion.currentTranslation.description|raw}}
                                   </div>
                                   <div class="d-flex justify-content-end avis-name testimonials-txt">
                                       {{opinion.name}}
                                   </div>
                               </div>
                           {% endfor %}
                        </div>
                   </div>
                {% endfor %}
            </div>
            <a class="carousel-control-prev" href="#carousel-testimonials" role="button" data-slide="prev">
            </a>
            <a class="carousel-control-next" href="#carousel-testimonials" role="button" data-slide="next">
            </a>
        </div>
        <div class="row">
            <div class="col-md-4 offset-md-4 see-all-testimonials">
                <a href="{{ absolute_url(customPath('main_particular_partner_opinion')) }}" class="blue"> {% trans %}pageHome.read_more_opinion{% endtrans %}</a> 
            </div>
        </div>
    </div>
</section>
<section class="b-to-b-stats-architects">
    <div class="container">
        {% set project_photographer = customParam('project_photographer') %}
        {% set country = project_photographer ~ currentCountry2 %}
        {% set tab = displayInfosPage(country) %}
            <p>{% trans with {'%n1%': tab[1]} %}pageBtoB.30000_archi{% endtrans %}</p>
            <p>{% trans with {'%n1%': tab[2]} %}pageBtoB.50000_search{% endtrans %}</p>
            <p>{% trans with {'%n1%': tab[3]} %}pageBtoB.75%_search{% endtrans %}</p>
            <p>{% trans with {'%n1%': tab[4]} %}pageBtoB.results{% endtrans %}</p>
            <h3> {% trans %}pageBtoB.show{% endtrans %}</h3>
    </div>
</section>
<section class="b-to-b-futur-customer">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h2> {% trans %}pageBtoB.how{% endtrans %}</h2>
            </div>
            <div class="col-md-4 item">
                <img src="{{ asset('lib/media/base/find-customer-1'~ project_photographer ~ '.png') }}" alt="{{'pageBtoB.btob_img_5'|trans}}">
                <h4> {% trans %}pageBtoB.indexing{% endtrans %}</h4>
                <p> {% trans %}pageBtoB.indexing_specialist{% endtrans %}</p>
            </div>
            <div class="col-md-4 item">
                <img src="{{ asset('lib/media/base/find-customer-2'~ project_photographer ~ '.png') }}" alt="{{'pageBtoB.btob_img_6'|trans}}">
                <h4> {% trans %}pageBtoB.social_networks{% endtrans %}</h4>
                <p> {% trans %}pageBtoB.we_communicate{% endtrans %} </p>
            </div>
            <div class="col-md-4 item">
                <img src="{{ asset('lib/media/base/find-customer-3'~ project_photographer ~ '.png') }}" alt="{{'pageBtoB.btob_img_7'|trans}}">
                <h4> {% trans %}pageBtoB.emailings{% endtrans %}</h4>
                <p>  {% trans %}pageBtoB.we_possess{% endtrans %}</p>
            </div>
        </div>
    </div>
</section>
<section class="b-to-b-contact">
    <div class="container">
        <div class="row">
            <div class="col-md-7 text-contact">
                <h5> {% trans %}pageBtoB.want_more{% endtrans %} </h5>
                <p>  {% trans %}pageBtoB.personnal_details{% endtrans %}</p>
            </div>
            <div class="col-md-5">
                    <form method="POST" id="formbottom" action="{{ absolute_url(customPath('worker_mail_send_contact')) }}" onsubmit="return checkForm();">
                        <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="{% trans %}forms.msg{% endtrans %}" 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 formbtob = $('#formbtob');
        formbtob.on('submit', function(e) { 
            validateCredentials(e, formbtob);
        });

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

        function validateCredentials(evt, form){
            var test = isSameNumber(form.find('.phone').val());   
            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>');
            }
        };

        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 %}