{% extends 'base.html.twig' %}
{% block title %}{{ 'help.title'|trans({}, 'HelpBundle') }}{% endblock %}
{% block body %}
    <section id="helpSection">
        <div class="container-fluid">
            <div class="row-fluid">
                <div class="col-md-2" style="padding-top: 25px">
                    <div id="selectFaqCat" class="hidden-md hidden-lg"
                         style="color:orange; background-color:whitesmoke;width:100%;padding-bottom: 10px;">
                        <a class="btn" style="color:orange;"
                           href="#"> {{ 'help.selFaqCat'|trans({}, 'HelpBundle') }}</a>
                    </div>
                    <div id="faq_category" class="side-navbar list-group hidden-sm hidden-xs">
                        <a href="#" id="0" class="list-group-item active"> {{ 'help.allquestions'|trans({}, 'HelpBundle') }}<span id="fa0" hidden
                                                                                           style="float:left;"><i
                                        class="fa-lg fa fa-spinner fa-spin" style="color:white;"></i></span></a>
                    </div>
                </div>
                <div class="col-md-7">
                    <div>
                        <h1 id="mainTitle">{{ 'help.title'|trans({}, 'HelpBundle') }}</h1>
                        <p>{{ 'help.msg'|trans({}, 'HelpBundle') }}</p>
                    </div>

                    <div id="Questions">
                        {% if faq_results is not empty %}
                            {% set counter = 0 %}
                            {% for faq_results in faq_results %}
                                {% set counter = counter + 1 %}
                                <h3>{{ counter }}-<a id="{{ faq_results.id }}" href="#{{ faq_results.id }}"> {{ faq_results.faqShortQuestion }}
                                </a></h3>

                                <div id="ShamraQAns{{ faq_results.id }}">
                                    <div id="{{ faq_results.id }}">
                                        <div id="Asection" class="col-md-12">
                                            <h4 id="AnsTitle">{{ 'help.shAnswer'|trans({}, 'HelpBundle') }}</h4>
                                            <p> {{ faq_results.shamraAnswer|raw }}</p>
                                        </div>
                                    </div>
                                </div>
                                <hr style="margin-top: 10px;margin-bottom: 10px">
                            {% endfor %}
                        {% else %}
                            <h3 id="noQuestion">{{ 'help.noQuestions'|trans({}, 'HelpBundle') }}</h3>
                        {% endif %}
                    </div>

                </div>
                <div class="col-md-3">
                </div>
            </div>
        </div>
        <br>
        <a id="chat" href="javascript:void(0)" style="display: none"></a>
    </section>

    <!-- Messenger Chat Plugin Code -->
    <!-- Your Chat Plugin code -->
    <div id="fb-customer-chat" class="fb-customerchat"></div>
{% endblock %}
{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('bundles/syndexhelp/css/HelpStyle.css') }}"/>
    <link rel="stylesheet" href="{{ asset('assets/css/footer-bottom.css') }}"/>

{% endblock %}
{% block javascripts %}

      <script>
        var chatbox = document.getElementById('fb-customer-chat');
        chatbox.setAttribute("page_id", "101401022197726");
        chatbox.setAttribute("attribution", "biz_inbox");

        window.fbAsyncInit = function() {
            FB.init({
            xfbml            : true,
            version          : 'v12.0'
            });
        };

        (function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
            js.src = 'https://connect.facebook.net/ar_AR/sdk/xfbml.customerchat.js';
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    </script>

{% endblock %}