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

{% endblock %}

{% block css %}
    <link rel="stylesheet" href="{{ asset('css/modal_cv.css') }}">
{% endblock %}
{% block body %}
    <!-- breadcrumb area start -->
    <section class="breadcrumb-area" id="home">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="breadcrumb-area-content">
                        <h2>{{ 'page.be.title2'|trans }} </h2>
                        <ul>
                            <li><a href="{{ path('front_home')}}">{{ 'title.Ac'|trans }}</a></li>
                            <li class="active"><a href="#">{{ 'page.be.title2'|trans }} </a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- breadcrumb area end -->

    <!-- offices section start -->
    <section class=" ptb-100">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="sec-title mb-50">

                        {% if app.request.locale == 'ar' %}
                            <h2>{{ 'page.be.title4'|trans }}<span class="title-span"> {{ 'page.be.title3'|trans }} </span>
                                <span class="sec-title-border">
									<span></span>
									<span></span>
									<span></span>
								</span>
                            </h2>
                            {% elseif app.request.locale == 'fr' %}
                                <h2>{{ 'page.be.title3'|trans }}<span class="title-span"> {{ 'page.be.title4'|trans }} </span>
                                    <span class="sec-title-border">
									<span></span>
									<span></span>
									<span></span>
								</span>
                                </h2>
                            {% else %}
                                <h2>{{ 'page.be.title3'|trans }}<span class="title-span"> {{ 'page.be.title4'|trans }} </span>
                                    <span class="sec-title-border">
									<span></span>
									<span></span>
									<span></span>
								</span>
                                </h2>
                        {% endif %}
                    </div>
                </div>
            </div>

            <div class="row widget " align="center ">

                        {% for level1 in levels1 %}

                         <div class="col-lg-12" align="center">
                            <div class="single-team-member col-lg-3" align="center">
                                <div class="team-member-img">
                                    <img  class="imgBe" src="{{ asset('uploads/offices/'~level1.id~'/'~level1.path) }}" alt="BE">
                                </div>
                                <div class="team-member-info ">

                                    <a  class="titre" href="{{ asset('uploads/offices/'~level1.id~'/'~level1.cv) }}" target="_blank"><h4 class="linkCv">{{ level1.title }}</h4></a>

                                    <a href="#"><h4 class="view_cv" data-id="{{ level1.id }}">{{ level1.description }}</h4></a>
                                </div>
                            </div>
                        </div>

                        {% endfor %}

                <div class="col-lg-3"></div>

                {% for level2 in levels2 %}

                    <div class="col-lg-3">
                        <div class="single-team-member" align="center">
                            <div class="team-member-img">
                                <img class="imgBe" src="{{ asset('uploads/offices/'~level2.id~'/'~level2.path) }}" alt="BE">
                            </div>
                            <div class="team-member-info ">


                                <a  class="titre" href="{{ asset('uploads/offices/'~level2.id~'/'~level2.cv) }}" target="_blank"><h4 class="linkCv">{{ level2.title }}</h4></a>
                                <a href="#"><h4 class="view_cv" data-id="{{ level2.id }}">{{ level2.description }}</h4></a>

                            </div>
                        </div>
                    </div>

                {% endfor %}
                <div class="col-lg-3"></div>

                {% for level3 in levels3 %}

                    <div class="col-lg-3">
                        <div class="single-team-member" align="center">
                            <div class="team-member-img">
                                <img  class="imgBe" src="{{ asset('uploads/offices/'~level3.id~'/'~level3.path) }}" alt="BE">
                            </div>
                            <div class="team-member-info">
                                <a class="titre" href="{{ asset('uploads/offices/'~level3.id~'/'~level3.cv) }}" target="_blank"><h4 class="linkCv">{{ level3.title }}</h4></a>
                                <a href="#"><h4 class="view_cv" data-id="{{ level3.id }}">{{ level3.description }}</h4></a>
                            </div>
                        </div>
                    </div>


                {% endfor %}
            </div>
        </div>
    </section>
    <!-- testimonial section end -->

    <!-- modal -->
    <!-- FONTS -->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>

    <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="icofont icofont-close"></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="icofont icofont-telephone"></i></p>
                            <p id="email_cv" class="info_cv"><i class="icofont icofont-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">Bio</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 type="text/javascript" src="{{ asset('maps/jquery.vmap.js') }}"></script>#}
    {#<script type="text/javascript" src="{{ asset('maps/jquery.vmap.tunisia.fr.js')}}" charset="utf-8"></script>#}

    <script>
        jQuery(document).ready(function () {
//            jQuery('#vmap').vectorMap({
//                map: 'tunisia',
//                onRegionClick: function (element, code, region) {
//                    var message = 'You clicked "'
//                        + region
//                        + '" which has the code: '
//                        + code.toUpperCase();
//
//                    alert(message);
//                }
//            });

// ###### 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="icofont icofont-telephone"></i>');
                        $('#email_cv').html('<i class="icofont icofont-envelope"></i>');

                        if (data.result == true) {

                            $('#img_cv').attr('src','/uploads/offices/' + data.data[0].id + '/' + data.data[0].path);
                            $('#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 %}