{% extends 'frontNEW.html.twig' %}
{% block title %} {{ 'page.reg.title' | trans }} {% endblock %}
{% block stytesheets %}
    {{ parent() }}
{% endblock %}
{% block css %}
    <link rel="stylesheet" type="text/css" href="{{ asset('maps/jqvmap.css') }}" media="all"/>
{#    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">#}
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
    <style>
        @media (min-width: 576px) {
            .modal-dialog {
                max-width: 380px !important;
            }
        }
        table a {
            color: #007bff;
        }
    </style>
{% 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.reg.title2'|trans }}</h2>
            </div>
        </div>
    </div>
{#    <section class="team-area ptb-100 pb-0">#}
{#        <div class="container">#}
{#            <div class="section-title">#}
{#                <h2>{{ 'page.reg.title4'|trans }} {{ 'page.reg.title5'|trans }} {{ 'page.reg.title6'|trans }}</h2>#}
{#            </div>#}
{#        </div>#}
{#    </section>#}

    <!-- regional start -->
    <section class="our-about ptb-100 pt-30">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <div class="video-popup">
                        <div id="vmap" style="width: 250px; height: 637px;" align="left"></div>
                    </div>
                </div>
                <div class="col-md-8">
                    <div class="table-responsive">
                        <table  id="dt-example-responsive" class="table table-striped table-bordered" style="width:100%">
                            <thead>
                            <tr>
                                <th width="35%" >{{'tab.t1' | trans}}</th>
                                <th>{{'tab.t2' | trans}}</th>
                                <th width="18%">{{'tab.t3' | trans}}</th>
                                <th>{{'tab.t4' | trans}} </th>
                                <th>{{'tab.t5' | trans}}</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% if presidents is defined and presidents != null %}
                                {% for president in presidents %}
                                    <tr>
                                        <td>
                                            <a href="javascript:void(0);" class="getInfo"
                                               data-code="{{ president.country }}">
                                                {{ president.name }} {{ president.surname }}</a>
                                        </td>
                                        {% set country = 'country.'~president.country %}
                                        <td>{{ country | trans }}</td>
                                        <td>{{ president.fax }}</td>
                                        <td>{{ president.tel }}</td>
                                        <td><span class="label label-sm label-warning">{{ president.email|replace({"#": "<br>"})|raw }}</span></td>
                                    </tr>
                                {% endfor %}
                            {% endif %}
                            </tbody>
                        </table>
                    </div>


                </div>

            </div>
        </div>
    </section>
    <!-- regional end -->

    <!-- presidente modal start -->
    <div id="presidenteModal" class="modal" tabindex="-1" role="dialog" aria-hidden="true" style="top: 150px;">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header" style="border-bottom: none;">
{#                    <h5 class="modal-title">{{'regional.modal.title' | trans}}</h5>#}
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="z-index: 9;margin-right: -14px !important;
                            {% if app.request.locale =='ar' %}margin: unset;{% endif %}">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="modal-body pt-0">
                    <div class="col-md-12">
                        <div class="form-group">
                            <p><h4 style="text-align: center;"><span class="name-presidente"></span></h4></p>
                        </div>
                        <div class="form-group" style="{% if app.request.locale =='ar' %}text-align: right;{% endif %}">
                            <p><h6><i class="fas fa-map-marker-alt" style="color: #EE7A00;"></i>&nbsp;&nbsp;&nbsp;<span class="region-presidente"></span></h6></p>
                        </div>
                        <div class="form-group" style="{% if app.request.locale =='ar' %}text-align: right;{% endif %}">
                            <p><h6><i class="fas fa-at" style="color: #EE7A00;"></i>&nbsp;&nbsp;<span class="email-presidente"></span></h6></p>
                        </div>
                        <div class="form-group" style="{% if app.request.locale =='ar' %}text-align: right;{% endif %}">
                            <p><h6><i class="fas fa-mobile-alt" style="color: #EE7A00;"></i>&nbsp;&nbsp;&nbsp;<span class="tel-presidente"></span></h6></p>
                        </div>
                        <div class="form-group" style="{% if app.request.locale =='ar' %}text-align: right;{% endif %}">
                            <p><h6><i class="fas fa-fax" style="color: #EE7A00;"></i>&nbsp;&nbsp;<span class="fax-presidente"></span></h6></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- presidente modal end -->

{% endblock %}
{% block javascripts %}
    {{ parent() }}
{#    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>#}
    <script type="text/javascript" src="{{ asset('maps/jquery.vmap.js') }}"></script>
    {%  if app.request.locale == 'ar' %}
        <script type="text/javascript" src="{{ asset('maps/jquery.vmap.tunisia.ar.js')}}" charset="utf-8"></script>
    {% elseif app.request.locale == 'fr' %}
        <script type="text/javascript" src="{{ asset('maps/jquery.vmap.tunisia.fr.js')}}" charset="utf-8"></script>
    {% elseif app.request.locale == 'en' %}
        <script type="text/javascript" src="{{ asset('maps/jquery.vmap.tunisia.en.js')}}" charset="utf-8"></script>
    {% endif %}
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
    <script>
        jQuery(document).ready(function () {
            $('#dt-example-responsive').DataTable({
                {% if app.request.locale == 'fr' %}
                "language": {
                    "sEmptyTable": "Aucune donn&eacute;e disponible dans le tableau",
                    "sLoadingRecords": "Chargement en cours...",
                    "sProcessing": "Traitement en cours...",
                    "sLengthMenu": "Afficher _MENU_ &eacute;l&eacute;ments",
                    "sZeroRecords": "Aucun &eacute;l&eacute;ment &agrave; afficher",
                    "sInfo": "Affichage de l'&eacute;l&eacute;ment _START_ &agrave; _END_ sur _TOTAL_ &eacute;l&eacute;ments",
                    "sInfoEmpty": "Affichage de l'&eacute;l&eacute;ment 0 &agrave; 0 sur 0 &eacute;l&eacute;ment",
                    "sInfoFiltered": "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
                    "sInfoPostFix": "",
                    "sSearch": "Rechercher:",
                    "sUrl": "",
                    "oPaginate": {
                        "sFirst": "Premier",
                        "sPrevious": "Dernier",
                        "sNext": "Suivant",
                        "sLast": "Pr&eacute;c&eacute;dent"
                    },
                    "oAria": {
                        "sSortAscending": ": activer pour trier la colonne par ordre croissantً",
                        "sSortDescending": ": activer pour trier la colonne par ordre d&eacute;croissantً"
                    }
                }, {% endif %}
                {% if app.request.locale == 'ar' %}
                "language": {
                    "sEmptyTable": "ليست هناك بيانات متاحة في الجدول",
                    "sLoadingRecords": "جارٍ التحميل...",
                    "sProcessing": "جارٍ التحميل...",
                    "sLengthMenu": "أظهر _MENU_ مدخلات",
                    "sZeroRecords": "لم يعثر على أية سجلات",
                    "sInfo": "إظهار _START_ إلى _END_ من أصل _TOTAL_ مدخل",
                    "sInfoEmpty": "يعرض 0 إلى 0 من أصل 0 سجل",
                    "sInfoFiltered": "(منتقاة من مجموع _MAX_ مُدخل)",
                    "sInfoPostFix": "",
                    "sSearch": "ابحث:",
                    "sUrl": "",
                    "oPaginate": {
                        "sFirst": "الأول",
                        "sPrevious": "السابق",
                        "sNext": "التالي",
                        "sLast": "الأخير"
                    },
                    "oAria": {
                        "sSortAscending": ": تفعيل لترتيب العمود تصاعدياً",
                        "sSortDescending": ": تفعيل لترتيب العمود تنازلياً"
                    }
                }, {% endif %}
                    "lengthChange": false,
                    // "lengthMenu": [[7,10, 25, 50, -1], [7,10, 25, 50, "All"]],
                    "pageLength": 7,
                    "ordering": false,
                    "info":     false
                }
            );
            jQuery('#vmap').vectorMap({
                map: 'tunisia',
                onRegionClick: function (element, code, region) {
                    //Get Presidents
                    var url = '{{ path('get_presidents') }}';
                    var code_ = code.toUpperCase();
                    $.ajax({
                        url:  url,
                        type: "GET",
                        data: {code: code_},
                        dataType: 'JSON',
                        success:function(data) {console.log(data);
                            $('.name-presidente').text('');
                            $('.region-presidente').text('');
                            $('.email-presidente').text('');
                            $('.tel-presidente').text('');
                            $('.fax-presidente').text('');

                            if (data.result == true) {
                                $('.name-presidente').text(data.data.name);
                                $('.region-presidente').text(data.data.country);
                                var email = data.data.email;
                                email = email.replace('#','<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;');
                                $('.email-presidente').html(email);
                                $('.tel-presidente').text(data.data.tel);
                                $('.fax-presidente').text(data.data.fax);

                                $('#presidenteModal').modal('show');

                            }
                        },
                        error: function () {
                            console.log('erreur');
                        }
                    });
                    //end

                    // var message = 'You clicked "'
                    //     + region
                    //     + '" which has the code: '
                    //     + code.toUpperCase();
                    // alert(message);
                }
            });
            $('.getInfo').on('click', function () {
                var url = '{{ path('get_presidents') }}';
                var code = $(this).data('code');
                var code_ = code.toUpperCase();
                $.ajax({
                    url: url,
                    type: "GET",
                    data: {code: code_},
                    dataType: 'JSON',
                    success: function (data) {
                        console.log(data);
                        $('.name-presidente').text('');
                        $('.region-presidente').text('');
                        $('.email-presidente').text('');
                        $('.tel-presidente').text('');
                        $('.fax-presidente').text('');

                        if (data.result == true) {
                            $('.name-presidente').text(data.data.name);
                            $('.region-presidente').text(data.data.country);
                            var email = data.data.email;
                            email = email.replace('#','<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;');
                            $('.email-presidente').html(email);
                            $('.tel-presidente').text(data.data.tel);
                            $('.fax-presidente').text(data.data.fax);

                            $('#presidenteModal').modal('show');

                        }
                    },
                    error: function () {
                        console.log('erreur');
                    }
                });
            });
        });
    </script>
{% endblock %}