{% extends 'base.html.twig' %}

{% block og_title %}{{ 'title'|trans({}, 'Academia') }}{% endblock%}

{% block metaKeywords %}
    أبحاث,أكاديميا,محتوى علمي,شمرا أكاديميا
{% endblock %}
{% block metaDescription %}{{ 'about'|trans({}, 'Academia') }}{% endblock%}

{% block og_description %}{{ 'about'|trans({}, 'Academia') }}{% endblock%}
{% block og_image %}{{ asset('bundles/syndexacademic/images/shamra-academy-logo-300-300.jpg', absolute=true) }}{% endblock%}
{% block og_image_width %}300{% endblock%}
{% block og_image_height %}300{% endblock%}


{% set currentPage = 0 %}

{%block title %}{{ 'title'|trans({}, 'Academia') }}{% endblock %}

{% block body %}
    <section class="academia-section">
        <div  class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-10 col-md-7">
                {{ include('syndexSearchBundle:Default:SearchBar.html.twig', { 'searchRoute': 'syndex_academic_search','searchMsg': 'search.msg'|trans({}, 'Academia') }) }}
                <div class="new-research">
                    <a class="btn btn-default" role="button" href="{{ path('shamra_academia_research_new') }}"><i class="fa fa-plus"></i>&nbsp;{{ 'research.new.title'|trans({}, 'Academia') }}</a>
                </div>
            </div>
        </div>
        <hr>
        <div class="row" >

            <div class="col-md-2">
                <div id="selectCat" class="select-cat" hidden >
                    <a  class="btn orng-link"  href="#"> {{ 'search.type'|trans({}, 'Academia') }}</a>
                </div>
                <div id="main_category" class="list-group side-navbar">
                    {% for category in categories %}
                        <a href="" id="{{category.id}}" class="list-group-item" target="_blank">{{category.arabicFullName}} </a>
                    {% endfor %}
                </div>
            </div>
            <div class="col-md-7">
                <div id="adsResult" class="row hidden-md hidden-lg"  style="padding-right:10px;padding-left: 10px " >

                        {% if permAds is not null %}  
                            {{ include('BuisnessBundle:AdsBlock:perm.html.twig') }} 
                        {% endif %}                        

                    </div>
                <div id="academic_result">
                    {{ include('syndexAcademicBundle:Search:index_search.html.twig') }}
                </div>
            </div>
            <div id="seeHide" hidden>
                {{ include('syndexSearchBundle:Default:see_more.html.twig',{'searchRoute':'syndex_academic_search','pageCount': pageCount}) }}
            </div>
            <div  id="adsResult" class="col-md-3 hidden-sm hidden-xs"  style="padding-right: 30px;" >

                        {% if permAds is not null %}  
                            {{ include('BuisnessBundle:AdsBlock:perm.html.twig') }} 
                        {% endif %}  
             </div>           
        </div>

    </div>
    </section>
{% endblock %}

{% block stylesheets %}
    <link href="{{ asset('bundles/syndexacademic/css/search.css') }}" rel="stylesheet" />
    <!-- CSS file -->
    <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.2/jquery.qtip.css" />
    <link rel="stylesheet" type="text/css" href="{{ asset('/assets/css/academia-section.css') }}" />    
    
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('bundles/syndexacademic/js/academix.js') }}"></script>
    
    <!-- Include either the minifed or production version, NOT both!! -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.2/jquery.qtip.js"></script>

    <script type="text/javascript" >
        // We'll encapsulate our .qtip() call in your .on() handler method
        $(document).on('mouseover', '.restagg', function (event) {
            // Bind the qTip within the event handler
            $(this).qtip({
                content: {
                    text: function (event, api) {
                        event.preventDefault();
                        var element = $(this);
                        var slug = element.attr("id");
                        api.elements.content.html('<i class="fa fa-spinner fa-pulse"></i> جاري تحميل المعلومات');
                        return $.ajax({
                            type: "POST",
                            url: Routing.generate('shamra_academia_tag_info'),
                            data: {slug: slug},
                        })
                                .then(function (content) {
                                    // Set the tooltip content upon successful retrieval
                                    return content
                                }, function (xhr, status, error) {
                                    // Upon failure... set the tooltip content to error
                                    api.set('content.text', status + ': ' + error);
                                });
                    }
                },
                position: {
                    my: 'top center', // Position my top left...
                    at: 'bottom center', // at the bottom right of...
                    target: $(this) // my target
                },
                style: {
                    classes: 'qtip-bootstrap qtip-shadow'
                },
                show: {
                    delay: 500,
                    ready: true, // Show the tooltip as soon as it's bound, vital so it shows up the first time you hover!
                    effect: function () {
                        $(this).slideDown();
                    }
                },
                hide: {
                    //event: 'click mouseleave',
                    //target: $('.btn.btn-default.restag'),
                    effect: function () {
                        $(this).slideUp();
                    },
                    fixed: true,
                    delay: 300
                }
            }, event); // Pass through our original event to qTip
        });
        
		$(document).ready(function () {
            $(document).on('click', '.follow', function (e) {
                e.preventDefault();
                var element = $(this);
                var slug = element.attr("id");
                element.append('<i class="fa fa-spinner fa-pulse"></i> ');
                $.ajax({
                    type: "POST",
                    url: Routing.generate('shamra_academia_tag_follow'),
                    data: {slug: slug},
                    success: function (numberOfFollowers) {
                        element.text('إلغاء المتابعة');
                        element.removeClass('follow').addClass('remove');
                        $('#numberOfFollowers' + slug).html(numberOfFollowers);
                    }
                });
                return false;
            });
            
			$(document).on('click', '.remove', function (e) {
                e.preventDefault();
                var element = $(this);
                var slug = element.attr("id");
                element.append('<i class="fa fa-spinner fa-pulse"></i> ');
                $.ajax({
                    type: "POST",
                    url: Routing.generate('shamra_academia_tag_unfollow'),
                    data: {slug: slug},
                    success: function (numberOfFollowers) {
                        element.text('متابعة');
                        element.removeClass('remove').addClass('follow');
                        $('#numberOfFollowers' + slug).html(numberOfFollowers);
                    }
                });
                return false;
            });
        });
        </script>
{% endblock %}