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

{% block css %}
{% endblock %}
{% block body %}
    <div class="page-title-area item-bg4 jarallax" data-jarallax='{"speed": 0.3}'>
        <div class="container">
            <div class="page-title-content text-center">
                <h2>{{ 'page.be.title2'|trans }}</h2>
            </div>
        </div>
    </div>
    <!-- offices section start -->
    <section class="team-area ptb-100 pb-70">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-sm-12 col-md-12 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 class="height-60">{{ 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 class="height-60">{{ 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">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <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 text-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="">
                                </div>
                            </div>
                        </div>
                        <div class="rela-block_cv content-container_cv">
                            <h2 id="name_cv" class="rela-block_cv caps_cv title_cv"></h2>
                            <h2 id="post_cv" class="rela-block_cv caps_cv title_cv"></h2>
                        </div>
                        <div class="text-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">
                            <div class="rela-block_cv caps_cv greyed_cv">{{ 'office.index.title6' | trans }}</div>
                            <p id="bio_cv" class="long-margin_cv info_cv text-left"></p>
                        </div>


                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block javascripts %}
    {{ parent() }}

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