{% extends 'base.html.twig' %}
{% block wrapperStyle %}
    {% if data.brandhub.brandhubCampaign != true %}
        {{ caCustomBg(data.pdata.data) }}
    {% endif %}
{% endblock %}
{% block wrapperClass %}campaignpage photocorner{% endblock %}

{% block brandhubWrapper %}
    {% if data.brandhub.brandhubCampaign %}
        {% include 'includes/brandhubview.html.twig' with {
        data : data
        } %}
    {% endif %}
{% endblock brandhubWrapper %}

{% block body %}

	<div class="container clearfix navpadding">
		{{ renderTwigBlock('includes/campaigns/campaign.submenu',{ 'campaignData' : data}) }}

		<div class="col-md-12 col-sm-12 col-xs-12 p0">

			<div class="col-md-9 col-sm-12 col-xs-12">

				<div class="content col-md-12 col-xs-12 clearfix p0 list-group gallery">
					<h1 class="col-md-12 mt15 mb15">{{ readFunnel(data.page, 1) }}</h1>

					<div class="col-md-12 pb15 clearfix">
						<div class="text-left mb20">{{ readFunnel(data.page, 3)|raw }}</div>
					</div>

					<div id="notification"></div>

                    <div class="col-md-6 p0">
                        {% if selected and not campaignClosed %}
                            <photo-corner-upload
                                :campaign-id="{{ campaign_id }}"
                            />
                        {% endif %}
                    </div>

                    <div class="col-md-6 p0">
                        <a class="btn pull-right grey mb15" role="button" data-toggle="collapse"
                           href="#filterCollapse" aria-expanded="false" aria-controls="filterCollapse">
                           <i class="fa fa-list-ul"></i>{{ "BTNFILTER"|translate }}
                        </a>
                    </div>
                    
                    {% include 'campaigns/snippets/filter.html.twig' %}
                    
					<div class="clearfix"></div>
					<div id="messages"></div>
				</div>
				<div class="loader"></div>
				<div data-page="1" class="btn loadingmore content mt0 mb20 col-md-12 col-xs-12"
					 onclick="loadData(this,'mediaGallery',{{ data.item }});">
					<a class="btn btn-primary blue load-more">
						<i class="fa fa-navicon"></i>
					</a>
					<span class="clearfix">{{ constant('LOAD_MORE') }}</span>
				</div>
			</div>
			<input type="hidden" id="host" value="{{ regGet('url') }}">


            {{ renderTwigBlock('includes/campaigns/campaign.sidebar', {'shareUrl' : buildCanonical()}) }}
        </div>
	</div>
{% endblock %}
{% block assetsBottom %}
	{{ parent() }}

	<script type="text/javascript">
        function callbackClick(elm, state, likes, id) {
            var t = elm;
            var p = t.parent('.imgWrapper');
            var img = p.find('.img');
            var btn = $('.likeClick_' + id);

            if (state == 1) {
                img.data('liked', 0).attr('data-liked', 0);
                img.data('lclass', '').attr('data-lclass', '');
                btn.data('liked', 0).attr('data-liked', 0).removeClass('faLiked');
                t.find('span.likeText').html('{{ "LIKE_IT"|translate }}');
            } else {
                img.data('liked', 1).attr('data-liked', 1);
                img.data('lclass', 'faLiked').attr('data-lclass', 'faLiked');
                btn.data('liked', 1).attr('data-liked', 1).addClass('faLiked');
                t.find('span.likeText').html('{{ "DONT_LIKE_IT"|translate }}');
            }
            img.data('likes', likes).attr('data-likes', likes);
            btn.find('.likesCount').text(likes);
        }

        function likeAction(e, id, elm) {
            e.preventDefault();
            var t = $(elm);
            var liked = t.data('liked');
            // t.attr('data-liked');
            var action = (liked == 1) ? "unlike" : "like";

            $.ajax({
                dataType: 'json',
                type: "POST",
                url: "{{ regGet('url') }}ajax/medialike/",
                data: {action: action, relid: id}
            }).done(function (data) {
                // console.log(data);
                callbackClick(t, liked, data.likes, id);
            });
        }
    </script>
{% endblock %}
{% block readyStateFunction %}

    $("a.fancybox").fancybox({
    'centerOnScroll': false,
    afterLoad: function () {
    var t = $(this.element);
    var relid = this.element.data('rel');
    var likes = t.data('likes');
    var liked = t.data('liked');
    var user = t.data('member');
    var imgdate = t.data('date');
    var avatar = t.data('avatar');
    var title = t.parent('.imgWrapper').find('.infoBox').attr('title');
    var lclass = t.data('lclass');
    var info = $('<div class="infoBorder user"></div>');
    info.append('<span class="avatar pull-left" style="background-image:url(' + avatar + ');"></span>');
    info.append('<div class="pull-left ml10"><p class="username">' + user + '</p> <p class="userinfo">' + imgdate + '</p></div>');

    {% if loggedin %}
        if (typeof liked != undefined) {
        var label = $('<a data-liked="' + liked + '" href="javascript:void(0);" id="likeClick_'
                            + relid + '" class="infoBox likeClick_' + relid + ' ' + lclass + '" title="' + title + '" onclick="likeAction(event,'
                            + relid + ',this);"></a>');

        var likeCount = '<span class="likeText">'
                            + title + '</span> (<span class="likesCount" id="likesCount_'
                            + relid + '">' + likes + '</span>)';
        label.append('<i class="fa fa-thumbs-up ' + lclass + '" title="' + title + '"></i>');
        label.append(likeCount);
        info.append(label);
        }
    {% endif %}
    info.prependTo(this.outer);

    $('.fancybox-outer').on('swipeleft', function () {
    $.fancybox.next();
    }).on('swiperight', function () {
    $.fancybox.prev();
    });
    },
    afterShow: function (instance, slide) {

    }
    });

    $('.loadingmore').trigger('click');
    initSurveyFormUploaders();
    initFilter();

{% endblock readyStateFunction %}