{% extends 'base.html.twig' %}
{% set displayFooter = true %}

{% block body %}
{% set displayPopup = 1 %}
{% set mainType1 = customParam('main_skill_type_1')%}
{% set mainType2 = customParam('main_skill_type_2')%}
<section class="header-b-to-c">
    <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 %}possession_types{% endtrans %} - {% trans %}work_types{% endtrans %}</li>
            </ol>
        </nav>
        <div class="form-search-wrapper">
            <div class="row">
                <div class="col-md-6 first-col col-items">
                        <h1>{% trans %}pageBtoC.1rst{% endtrans %}</h1>
                </div>
                <div class="col-md-6 second-col col-items">
                    <form method="POST" id="formtop" action="{{ absolute_url(customPath('worker_mail_send_contact_project')) }}" enctype="multipart/form-data" onsubmit="return checkForm();">
                                <select name="slugs[]" class="form-control">
                                    <option value="">
                                        {% if projectTemplate == '-dc' %}
                                        {{'property_types'|trans}}
                                        {% else %}
                                        {{'work_types'|trans}}
                                        {% endif %}
                                    </option>
                                    {% for skillType in skillTypes[mainType1] %}
                                        {% if skillType.mainSkill == null %}
                                    <option value="{{ skillType.currentTranslation.slug }}" >{{ skillType.currentTranslation.name }}</option>
                                        {% for skillTypeChild in skillType.skills  %}
                                        <option value="{{ skillTypeChild.currentTranslation.slug }}">- {{ skillTypeChild.currentTranslation.name }}</option>
                                        {% endfor %}
                                    {% endif %}
                                    {% endfor %}
                                </select>
                                <select name="slugs[]" class="form-control">
                                    <option value="">
                                        {% if projectTemplate == '-dc' %}
                                        {{'style_types'|trans}}
                                        {% else %}
                                        {{'property_types'|trans}}
                                        {% endif %}
                                    </option>
                                    {% for skillType in skillTypes[mainType2] %}
                                        {% if skillType.mainSkill == null %}
                                    <option value="{{ skillType.currentTranslation.slug }}">{{ skillType.currentTranslation.name }}</option>
                                        {% for skillTypeChild in skillType.skills  %}
                                        <option value="{{ skillTypeChild.currentTranslation.slug }}">- {{ skillTypeChild.currentTranslation.name }}</option>
                                        {% endfor %}
                                    {% endif %}
                                    {% endfor %}
                                </select>
                        <input type="text" class="form-control" placeholder="{% trans %}forms.name{% endtrans %}" name="lastNameContactProjetParticulier" required/>
                        <input type="text" class="form-control" placeholder="{% trans %}forms.firstname{% endtrans %}" name="firstNameContactProjetParticulier" required/>
                        <input type="text" class="form-control" placeholder="{% trans %}forms.city{% endtrans %}" name="cityContactProjetParticulier" required/>
                        <input type="text" class="form-control" placeholder="{% trans %}forms.zip_code{% endtrans %}" name="postalCodeContactProjetParticulier" required/>
                        <input type="email" class="form-control email" placeholder="{% trans %}forms.email{% endtrans %}" name="emailContactProjetParticulier" required/>
                        <input type="text" class="form-control phone" placeholder="{% trans %}forms.number_phone{% endtrans %}" name="numberContactProjetParticulier" required/>
                        <input type="hidden" name="url" value="{{ app.request.uri }}" />
                        <textarea class="form-control" placeholder=" {% trans %}forms.msg_fast{% endtrans %}" name="messageContactProjetParticulier" required></textarea>
{#                         <div class="container-media">
                            <label class="media" >{{'choose_media'|trans}} </label>
                            <input type="file" id="image" name="image" accept="image/jpg, image/jpeg, image/png, application/pdf" value="" > 
                        </div> #}
                        <div class="form-group">
                            <ul class="errorList"></ul>
                        </div>
                        <button type="submit" class="btn btn-block btn-archi-blue upper btn-sub-btoc">{% trans %}forms.sent{% endtrans %}</button>
                        <p class="small"> {% trans %}pageBtoC.you_accept{% endtrans %}</p>
                    </form>
                </div>
            </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="page-b-to-c">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-one-img1 col-type-project">
                <h3 class="upper">{% trans %}pageBtoC.your_project{% endtrans %}</h3>
                <button type="button" class="btn-archi-blue upper btn-btoc"> {% trans %}pageBtoC.get_call{% endtrans %}</button>
            </div>

            <div class="col-lg-6 col-two-img1 col-type-project">
                <h3 class="upper">{% trans %}pageBtoC.start_up{% endtrans %}</h3>
                <button type="button" class="btn-archi-blue upper btn-btoc"> {% trans %}pageBtoC.get_call{% endtrans %}</button>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 col-one-img2 col-type-project">
                <h3 class="upper"> {% trans %}pageBtoC.optimise{% endtrans %}</h3>
                <button type="button" class="btn-archi-blue upper btn-btoc"> {% trans %}pageBtoC.get_call{% endtrans %}</button>
            </div>

            <div class="col-lg-6 col-two-img2 col-type-project">
                <h3 class="upper"> {% trans %}pageBtoC.build{% endtrans %}</h3>
                <button type="button" class="btn-archi-blue upper btn-btoc"> {% trans %}pageBtoC.get_call{% endtrans %}</button>
            </div>
        </div>
    </div>
</section>
<section class="section-btoc">
    <div class="container">
        <div class="form-search-wrapper2">
            <div class="row">
                <div class="col-md-6 first-col">
                    <h2> {% trans %}pageBtoC.an_architect_callback{% endtrans %}</h2>
                    <small> {% trans %}pageBtoC.free{% endtrans %}</small>
                </div>
                <div class="col-md-6 second-col">
                    <form method="POST" id="formbottom" action="{{ absolute_url(customPath('worker_mail_send_contact_project')) }}" enctype="multipart/form-data" onsubmit="return checkForm();">
                                <select name="slugs[]" class="form-control">
                                    <option value="">{{'work_types'|trans}}</option>
                                    {% for skillType in skillTypes[mainType1] %}
                                        {% if skillType.mainSkill == null %}
                                    <option value="{{ skillType.currentTranslation.slug }}">{{ skillType.currentTranslation.name }}</option>
                                        {% for skillTypeChild in skillType.skills  %}
                                        <option value="{{ skillTypeChild.currentTranslation.slug }}">- {{ skillTypeChild.currentTranslation.name }}</option>
                                        {% endfor %}
                                    {% endif %}
                                    {% endfor %}
                                </select>
                                <select name="slugs[]" class="form-control">
                                    <option value="">{{'property_types'|trans}}</option>
                                    {% for skillType in skillTypes[mainType2] %}
                                        {% if skillType.mainSkill == null %}
                                    <option value="{{ skillType.currentTranslation.slug }}">{{ skillType.currentTranslation.name }}</option>
                                        {% for skillTypeChild in skillType.skills  %}
                                        <option value="{{ skillTypeChild.currentTranslation.slug }}">- {{ skillTypeChild.currentTranslation.name }}</option>
                                        {% endfor %}
                                    {% endif %}
                                    {% endfor %}
                                </select>
                        <input type="text" class="form-control" placeholder="{% trans %}forms.name{% endtrans %}" name="lastNameContactProjetParticulier" required/>
                        <input type="text" class="form-control" placeholder="{% trans %}forms.firstname{% endtrans %}" name="firstNameContactProjetParticulier" required/>
                        <input type="text" class="form-control" placeholder="{% trans %}forms.city{% endtrans %}" name="cityContactProjetParticulier" required/>
                        <input type="text" class="form-control" placeholder="{% trans %}forms.zip_code{% endtrans %}" name="postalCodeContactProjetParticulier" required/>
                        <input type="email" class="form-control email" placeholder="{% trans %}forms.email{% endtrans %}" name="emailContactProjetParticulier" required/>
                        <input type="text" class="form-control phone" placeholder="{% trans %}forms.number_phone{% endtrans %}" name="numberContactProjetParticulier" required/>
                        <input type="hidden" name="url" value="{{ app.request.uri }}" />
                        <textarea class="form-control" placeholder=" {% trans %}forms.msg_fast{% endtrans %}" name="messageContactProjetParticulier" required></textarea>
{# 
                        <div class="form-group container-media">
                            <label class="media" >{{'choose_media'|trans}} </label>
                            <input type="file" id="image" name="image" accept="image/jpg, image/jpeg, image/png, application/pdf" value="" > 
                        </div> #}
                        <ul class="errorList"></ul>
                        <button type="submit" class="btn btn-block btn-archi-blue upper btn-sub-btoc">{% trans %}forms.sent{% endtrans %}</button>
                        <p class="small"> {% trans %}pageBtoC.you_accept{% endtrans %}</p>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
<div class="container mt-5">
    <p class="small grey">{% trans %}pageBtoC.information_gathered{% endtrans %}<a href="https://conso.bloctel.fr" target="_blank"> conso.bloctel.fr</a>
        </p>
</div>
{% endblock %}

{% block javascripts %}

<script src="{{ asset('lib/js/b-to-c.js')}}"></script>
<script>
        var formtop = $("#formtop");
        formtop.on('submit', function(e){
            validateCredentials(e, formtop);
        });

        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 checkForm(){
            $(document.activeElement).prop('disabled', true);
            return true;
        }

{#     $(document).ready(function() {        
        $('.btn-btoc').on('click', function() {
            $('html, body').animate({
                scrollTop: $(".form-search-wrapper2").offset().top
            }, 800);
        })
    }) #}
</script>
{% endblock %}