{% extends 'frontNEW.html.twig' %}
{% block title %} {{ 'page.pres.title' | trans }} {% endblock %}
{% block stytesheets %}
    {{ parent() }}
{% endblock %}

{% block css %}
{% endblock %}

{% block body %}
    <div class="page-title-area item-bg1 jarallax" data-jarallax='{"speed": 0.3}'>
        <div class="container">
            <div class="page-title-content text-center">
                <h2>{{ 'menu.nav.nav2' |trans }}</h2>
            </div>
        </div>
    </div>
    <!-- start -->
    {% if page!= null %}
        <section class="about-area ptb-100">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 col-md-12 col-sm-12">
                        <div class="about-image">
                            <img src="{{ asset('uploads/pages/'~page[0].path) }}" alt="cnfce" />
                            <div class="text">More than <span>20</span> years of Leadership</div>
                            <div class="shape">
                                <img src="{{ asset('assetsNEW/img/dot.png') }}" alt="dot" />
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-12 col-sm-12">
                        <div class="about-content">
                            <span class="sub-title">&nbsp;</span>
                            <h2>{{ 'page.pres.title' | trans }} {{ 'page.pres.cnfce'| trans }}</h2>
                            <div style="color: #57647c">
                                {{ page[0].content|raw }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="about-inner-area">
                    <div class="row">
                        <div class="col-lg-4 col-md-6 col-sm-6">
                            <div class="about-text">
                                <h3>La CNFCE c’est :</h3>
                                <ul class="features-list">
                                    <li><i class="flaticon-right-arrow"></i> Des ACTIONS B TO B</li>
                                    <li><i class="flaticon-right-arrow"></i> Des FOIRES ET DES SALONS nationaux et internationaux</li>
                                    <li><i class="flaticon-right-arrow"></i> Des FORMATIONS diversifiées</li>
                                    <li><i class="flaticon-right-arrow"></i> Un ENCADREMENT TECHNIQUE</li>
                                    <li><i class="flaticon-right-arrow"></i> Des actions de MENTORING</li>
                                    <li><i class="flaticon-right-arrow"></i> Une VEILLE STRATÉGIQUE</li>
                                    <li><i class="flaticon-right-arrow"></i> Du RÉSEAUTAGE et partage d’expériences</li>
                                    <li><i class="flaticon-right-arrow"></i> Des PARTENARIATS internationaux et nationaux</li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6 col-sm-6">
                            <div class="about-text">
                                <h3>NOTRE VISION 2018-2022</h3>
                                <ul class="features-list">
                                    <li><i class="flaticon-right-arrow"></i>  ENRICHIR LE RÉSEAU des femmes cheffes d’entreprises et renforcer leurs COMPÉTENCES et leur VISIBILITÉ</li>
                                    <li><i class="flaticon-right-arrow"></i>  ADOPTER ET VULGARISER le DIGITAL comme outil d'accès aux marchés nationaux et internationaux</li>
                                    <li><i class="flaticon-right-arrow"></i>  CRÉER UNE SYNERGIE ENTRE LES RÉGIONS pour en faire une force de développement économique</li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6 col-sm-6 offset-lg-0 offset-md-3 offset-sm-3">
                            <div class="about-text">
                                <h3>Who we are</h3>
                                <p>Real innovations and a positive customer experience are the heart of successful communication.</p>
                                <ul class="features-list">
                                    <li><i class="flaticon-right-arrow"></i> Stay real. Always.</li>
                                    <li><i class="flaticon-right-arrow"></i> We have you covered</li>
                                    <li><i class="flaticon-right-arrow"></i> We turn heads</li>
                                    <li><i class="flaticon-right-arrow"></i> Your brand, promoted</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    {% endif %}
    <!-- end -->
    <!-- newsletter start -->
    {#    <section class="donate-area jarallax extra-pb" data-jarallax='{"speed": 0.3}' style="padding-top: 25px;">
        <div class="container">
            <div class="section-title" style="margin-bottom: 0px;">
                <span class="sub-title" style="font-size: 27px;">{{ 'menu.nav.nav5' |trans }}</span>
                <h2>Your Support Will Help Us</h2>
            </div>
            <div class="donate-content">
                <a href="{{ path('fos_user_registration_register') }}" class="give-btn">{{ 'head.adhesion'|trans }}</a>
            </div>
        </div>
    </section>#}
    <section class="join-with-us-area" style="margin-top: 100px;">
        <div class="container">
            <div class="join-with-us-content">
                <h4 style="color: #EE7A00">{{'newsletter.modal03' | trans}}</h4>
                <h3 style="color: white;">{{'newsletter.modal04' | trans}}</h3>
                <form onsubmit="return false;">
                    <input type="email" class="input-email newsletter3" placeholder="{{'newsletter.modal02' | trans}}" name="EMAIL" autocomplete="off" />
                    <button class="btn-newsletter" type="button" data-id="3">{{'newsletter.modal01' | trans}}</button>
                    <br>
                    <div class="alert alert-success msg-newsletter3 col-12" role="alert" style="display: none;">
                        <a href="#" class="alert-link">{{'newsletter.modal05' | trans}}</a>
                    </div>
                </form>
                <div class="shape"><img src="{{ asset('assetsNEW/img/dot-shape.png') }}" alt="image" /></div>
            </div>
        </div>
    </section>
    <!-- newsletter end -->
    <!-- offices section start -->
    <section class="team-area ptb-100 pb-70">
        <div class="container">
            <div class="section-title">
                <h2>{{ 'page.be.title3'|trans }} {{ 'page.be.title4'|trans }}</h2>
            </div>
            <div class="row">
                <div class="col-lg-12 col-sm-12 col-md-12" style="text-align: -webkit-center;">
                    {% for level1 in levels1 %}
                        <div class="col-lg-3 col-sm-12 col-md-6">
                            <div class="single-team-box">
                                <div class="image">
                                    <img class="imgBe view_cv" src="{{ asset('uploads/offices/'~level1.id~'/'~level1.path) }}"
                                         alt="BE" data-id="{{ level1.id }}"/>
                                </div>
                                <div class="content">
                                    <a class="titre view_cv" href="javaScript:void(0)" data-id="{{ level1.id }}">
                                        <h3>{{ level1.title }}</h3>
                                    </a>
                                    <a href="javaScript:void(0)">
                                        <span class="view_cv" data-id="{{ level1.id }}">{{ level1.description }}</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
            <div class="row">
                <div class="col-lg-3"></div>
                {% for level2 in levels2 %}
                    <div class="col-lg-3 col-sm-6 col-md-6">
                        <div class="single-team-box">
                            <div class="image">
                                <img class="imgBe view_cv" src="{{ asset('uploads/offices/'~level2.id~'/'~level2.path) }}"
                                     alt="BE" data-id="{{ level2.id }}"/>
                            </div>
                            <div class="content">
                                <a class="titre view_cv" href="javaScript:void(0)" data-id="{{ level2.id }}">
                                    <h3 style="height: 60px;">{{ level2.title }}</h3>
                                </a>
                                <a href="javaScript:void(0)">
                                    <span class="view_cv" data-id="{{ level2.id }}">{{ level2.description }}</span>
                                </a>
                            </div>
                        </div>
                    </div>
                {% endfor %}
                <div class="col-lg-3"></div>
            </div>
            <div class="row">
                {% for level3 in levels3 %}
                    <div class="col-lg-3 col-sm-6 col-md-6">
                        <div class="single-team-box">
                            <div class="image">
                                <img class="imgBe view_cv" src="{{ asset('uploads/offices/'~level3.id~'/'~level3.path) }}"
                                     alt="BE" data-id="{{ level3.id }}"/>
                            </div>
                            <div class="content">
                                <a class="titre view_cv" href="javaScript:void(0)" data-id="{{ level3.id }}">
                                    <h3 style="height: 60px;">{{ level3.title }}</h3>
                                </a>
                                <a href="javaScript:void(0)">
                                    <span class="view_cv" data-id="{{ level3.id }}">{{ level3.description }}</span>
                                </a>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </section>
    <!-- offices section end -->

    <div id="modal-cv" class="modal" tabindex="-1" role="dialog" aria-hidden="true" style="z-index: 99999;">
        <div class="modal-dialog" role="document" style="margin: 1.5rem 21%;">
            <div class="modal-content" style="width: 62vw;">
                <div class="modal-header">
                    <h5 class="modal-title"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="modal-body" style="text-align: center;">
                    <!-- PAGE STUFF -->
                    <div class="rela-block_cv page_cv">
                        <div class="rela-block_cv top-bar_cv">
                            <div class="caps_cv name_cv">
                                <div class="abs-center_cv">
                                    <img id="img_cv" src="" style="width: 190px;height: auto;">
                                </div>
                            </div>
                        </div>
                        <div class="rela-block_cv content-container_cv" style="padding-left: 0px;padding-right: 0px;padding-bottom: 0px;">
                            <h2 id="name_cv" class="rela-block_cv caps_cv title_cv" style="margin-top: 140px;margin-bottom: 0px;"></h2>
                            <h2 id="post_cv" class="rela-block_cv caps_cv title_cv" style="margin-top: 0px;margin-bottom: 0px;"></h2>
                        </div>
                        <div style="text-align: center;">
                            <p id="company_cv" class="info_cv"></p>
                            <p id="sector_cv" class="info_cv"></p>
                            <p id="tel_cv" class="info_cv"><i class="flaticon-phone-call"></i></p>
                            <p id="email_cv" class="info_cv"><i class="fas fa-envelope"></i></p><br>
                        </div>
                        <div class="rela-block_cv content-container_cv" style="padding-left: 0px;padding-right: 0px;">
                            <div class="rela-block_cv caps_cv greyed_cv">{{ 'office.index.title6' | trans }}</div>
                            <p id="bio_cv" class="long-margin_cv info_cv" style="text-align: left;"></p>
                        </div>


                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    {#    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>#}
    <script>
        jQuery(document).ready(function () {

// ###### modal CV
            $('.view_cv').on('click', function () {

                var url = '{{ path('get_cv') }}';
                var id = $(this).data('id');
                $.ajax({
                    url:  url,
                    type: "GET",
                    data: {id: id},
                    dataType: 'JSON',
                    success:function(data) {
                        $('#img_cv').attr('src','');
                        $('#name_cv').text('');
                        $('#post_cv').text('');
                        $('#bio_cv').text('');
                        $('#company_cv').text('');
                        $('#sector_cv').text('');
                        $('#tel_cv').text('');
                        $('#email_cv').text('');
                        $('#tel_cv').html('<i class="flaticon-phone-call"></i>');
                        $('#email_cv').html('<i class="fas fa-envelope"></i>');

                        if (data.result == true) {
                            var img = '{{ asset('uploads/offices/DATA_ID/DATA_PATH') }}';
                            img = img.replace('DATA_ID', data.data[0].id).replace('DATA_PATH',data.data[0].path);
                            $('#img_cv').attr('src',img);
                            $('#name_cv').text(data.data[0].title);
                            $('#post_cv').text(data.data[0].description);
                            $('#bio_cv').text(data.data[0].bio);
                            $('#company_cv').text(data.data[0].company);
                            $('#sector_cv').text(data.data[0].sector);
                            $('#tel_cv').append(data.data[0].tel);
                            $('#email_cv').append(data.data[0].email);

                            $('#modal-cv').modal('show');
                        }
                    },
                    error: function () {
                        console.log('erreur');
                    }
                });
            });

        });
    </script>
{% endblock %}