{% extends "@UVDeskCoreFramework//Templates//layout.html.twig" %}

{# WebkulUserBundle/Resources/views/dashboard.html.twig #}
{% block title %} 
	{{ 'kudos'|trans }}
{% endblock %}

{% block pageContent %}
    <style>
    .uv-action-bar {
  border-bottom: 1px solid #d3d3d3;
  padding-bottom: 10px;
}
.uv-action-bar .uv-field-block.date {
  display: inline-block;
  margin-right: 10px;
}
.uv-action-bar label {
  font-size: 16px;
  vertical-align: middle;
  margin-right: 10px;
}
.uv-report-wrapper {
  padding-right: 20px;
}
.uv-report-wrapper .uv-middle {
  position: absolute;
  width: 100%;
  left: 0;
  top: 50%;
  text-align: center;
}
.uv-report-wrapper svg {
  width: 100%;
}
.uv-report-wrapper svg text {
  fill: #333;
}
.uv-report-brick-wrapper {
  width: 100%;
  display: inline-block;
  border: 1px solid #d3d3d3;
  margin: 20px 0;
  border-radius: 3px;
}
.uv-report-brick-wrapper {
  width: 100%;
  display: inline-block;
  border: 1px solid #d3d3d3;
  margin: 20px 0;
  border-radius: 3px;
}
.uv-report-brick {
  position: relative;
  display: inline-block;
  float: left;
  width: 20%;
  text-align: center;
  padding: 18px 0;
  border-right: 1px solid #d3d3d3;
}
.uv-report-brick:last-child {
  border-right: none;
}
.uv-report-brick-count {
  width: 100%;
  display: inline-block;
  color: #8473f3;
  font-size: 30px;
}
.uv-report-brick-label {
  width: 100%;
  display: inline-block;
  font-size: 18px;
}
.uv-icon-kudos {
  background-image: url("{{ asset('bundles/uvdeskcoreframework/images/uvdesk-kudo-sprite.svg') }}");
  display: inline-block;
  width: 40px;
  height: 40px;
}
.uv-icon-kudos.kudos-1 {
  background-position: 0px 40px;
}
.uv-icon-kudos.kudos-2 {
  background-position: -40px 40px;
}
.uv-icon-kudos.kudos-3 {
  background-position: -80px 40px;
}
.uv-icon-kudos.kudos-4 {
  background-position: -120px 40px;
}
.uv-icon-kudos.kudos-5 {
  background-position: -160px 40px;
}
.kudos-text-1 {
  color: #FC6E46;
}
.kudos-text-2 {
  color: #FC6E46;
}
.kudos-text-3 {
  color: #FCDA32;
}
.kudos-text-4 {
  color: #01D101;
}
.kudos-text-5 {
  color: #01D101;
}
@media screen and (max-width: 1024px) {
  .uv-report-chart-top-row .uv-report-chart-col-lt {
      width: 100%;
      padding: 0;
  }
  .uv-report-chart-top-row .uv-report-chart-col-rt {
      width: 100%;
  }
  .uv-report-chart-bottom-row .uv-col-4 {
      width: 100%;
      padding: 0;
  }
  .uv-pannel-body.ticket-customer {
      padding: 0 !important;
  }
  .uv-report-brick {
      width: 100%;
      border-right: none;
      border-bottom: 1px solid #d3d3d3;
  }
  .uv-report-brick:last-child {
      border-bottom: none;
  }
}
@media screen and (max-width: 500px) {
  .uv-action-bar label {
      display: none;
  }
  .uv-action-bar .uv-field-block.date {
      width: 100%;
      padding: 0px 0px 0px 5px;
      margin-right: 0;
  }
  .uv-action-bar .uv-field-block.date input {
      width: 100%;
  }
  .uv-inner-section .uv-action-bar .uv-action-bar-col-lt {
      padding-right: 15px;
  }
  .uv-report-chart-col-lt .uv-pannel-body {
      padding: 0;
  }
  .uv-pannel-heading select {
      width: 100px;
  }
}
    </style>

	<div class="uv-inner-section">
		{% set asideTemplate = 'Webkul\\UVDesk\\CoreFrameworkBundle\\Dashboard\\AsideTemplate' %}
		{% set asideSidebarReference = 'Webkul\\UVDesk\\CoreFrameworkBundle\\UIComponents\\Dashboard\\Panel\\Sidebars\\Reports' %}

		{{ uvdesk_extensibles.getRegisteredComponent(asideTemplate).renderSidebar(asideSidebarReference) | raw }}
		<div class="uv-view {% if app.request.cookies and app.request.cookies.get('uv-asideView') %}uv-aside-view{% endif %}">
			<h1>
				{{ 'Kudos'|trans }}
			</h1>
			<div class="uv-action-bar">
                <div class="uv-action-bar-col-lt">
                    <label>{{ 'From'|trans }}</label>  
                    <div class="uv-field-block date">
                        <input type="text" class="uv-field uv-date-picker date date-from" value="{{ startDate }}">
                    </div>
                    <label>{{ 'To'|trans }}</label>  
                    <div class="uv-field-block date">  
                        <input type="text" class="uv-field uv-date-picker date date-to" value="{{ endDate }}">
                    </div>
                </div>
                
				<div class="uv-action-bar-col-rt">
					<!-- Filter Button -->
					<div class="uv-btn-stroke uv-margin-left-15 filter-view-trigger"  data-target="uv-filter-view">
                        <span class="uv-icon-filter"></span>
                        {{ 'Filter View'|trans }}
                    </div>
					<!--// Filter Button -->
				</div>
            </div>


			<div class="uv-report-wrapper">
                <div class="uv-report-brick-wrapper">
                    <span class="uv-report-brick">
						<span class="uv-icon-kudos kudos-1"></span>
                        <span class="uv-report-brick-count">
                            0
                        </span>
                        <span class="uv-report-brick-label">
                            {{ 'Very Sad'|trans }}
                        </span>
                    </span>
                    <span class="uv-report-brick">
						<span class="uv-icon-kudos kudos-2"></span>
                        <span class="uv-report-brick-count">
                            0
                        </span>
                        <span class="uv-report-brick-label">
                            {{ 'Sad'|trans }}
                        </span>
                    </span>
                    <span class="uv-report-brick">
						<span class="uv-icon-kudos kudos-3"></span>
                        <span class="uv-report-brick-count">
                            0
                        </span>
                        <span class="uv-report-brick-label">
                            {{ 'Neutral'|trans }}
                        </span>
                    </span>
                    <span class="uv-report-brick">
						<span class="uv-icon-kudos kudos-4"></span>
                        <span class="uv-report-brick-count">
                            0
                        </span>
                        <span class="uv-report-brick-label">
                            {{ 'Happy'|trans }}
                        </span>
                    </span>
                    <span class="uv-report-brick">
						<span class="uv-icon-kudos kudos-5"></span>
                        <span class="uv-report-brick-count">
                            0
                        </span>
                        <span class="uv-report-brick-label">
                            {{ 'Very Happy'|trans }}
                        </span>
                    </span>
                </div>

                    <div class="uv-action-bar">
                        <div class="uv-action-bar-col-lt">
                            <!--Sort by-->
                            <div class="uv-dropdown sort">
                                <div class="uv-dropdown-btn uv-vertical-align uv-margin-right-5">
                                    {{ 'Sort By:'|trans }} {{ 'Timestamp'|trans }}
                                </div>
                                <div class="uv-dropdown-list uv-bottom-left">
                                    <div class="uv-dropdown-container">
                                        <label> {{ 'Sort By'|trans }}</label>
                                        <ul>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <!--Sort by-->
                        </div>
                        {#<div class="uv-action-bar-col-rt">
                            <input type="text" class="uv-search-inline uv-vertical-align uv-margin-right-15" placeholder="{{ 'Search'|trans }}">
                        </div>#}
                    </div>
                    <div class="uv-table uv-list-view">
                        <table>
                            <thead>
                                <tr>
                                    <th>
                                        {{ 'Ticket Id'|trans }}
                                    </th>
                                    <th>
                                        {{ 'Customer Name'|trans }}
                                    </th>
                                    <th>
                                        {{ 'Customer Email'|trans }}
                                    </th>
                                    <th>
                                        {{ 'Timestamp'|trans }}
                                    </th>
                                    <th class="uv-last">
                                        {{ 'Kudos Rating'|trans }}
                                    </th>

                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                        <div class="navigation"></div>
                    </div>
			</div>
		</div>

		<!-- Filter bar -->
        <div class="uv-filter-view" id="uv-filter-view">

            <!--/-->
            <div class="uv-filter-head">			
                <div class="uv-filter-title">
                    <h6>{{ 'Tickets'|trans }}</h6>
                    <span>{{ 'Save set of filters as a preset to stay more productive'|trans }}</span>
                </div>
                <div class="uv-filter-toggle" id="filter-close-trigger">
                    <span></span>
                </div>
            </div>
            <!--//-->

            <div class="uv-filter-paper">
                <!-- Filter block -->
                <div class="uv-filter-options">
                    {% set filterContext = {} %}
                    <div class="uv-element-block">
                        <label class="uv-field-label">{{ 'Agent'|trans }}</label>
                        <div class="uv-field-block" id="agent-filter">
                            <input class="uv-field uv-dropdown-other preloaded" type="text" data-filter-type="agent" id="agent-filter-input">
                            <div class="uv-dropdown-list uv-bottom-left">
                                <div class="uv-dropdown-container">
                                    <label>{{ 'Filter With'|trans }}</label>
                            </div>
                            <ul class="uv-agents-list">
                                <li class="uv-filter-info">
                                    {{ 'Type atleast 2 letters'|trans }}
                                </li>
                                <li class="uv-no-results" style="display: none;">
                                    {{ 'No result found'|trans }}
                                </li>
                            </ul>
                        </div>
                            <div class="uv-filtered-tags"></div>
                        </div>
                    </div>

                    <div class="uv-element-block">
                        <label class="uv-field-label">{{ 'Customer'|trans }}</label>
                        <div class="uv-field-block" id="customer-filter">
                            <input class="uv-field uv-dropdown-other" type="text" data-filter-type="customer" id="customer-filter-input">
                            <div class="uv-dropdown-list uv-bottom-left">
                                <div class="uv-dropdown-container">
                                    <label>{{ 'Filter With'|trans }}</label>
                                </div>
                                <ul class="uv-agents-list">
                                    <li class="uv-filter-info">
                                        {{ 'Type atleast 2 letters'|trans }}
                                    </li>
                                    <li class="uv-no-results" style="display: none;">
                                        {{ 'No result found'|trans }}
                                    </li>
                                </ul>
                            </div>
                            <div class="uv-filtered-tags"></div>
                        </div>
                    </div>

                    <div class="uv-element-block">
                        <label class="uv-field-label">{{ 'group'|trans }}</label>
                        <div class="uv-field-block" id="group-filter">
                            <input class="uv-field uv-dropdown-other preloaded" type="text" data-filter-type="group" id="group-filter-input">
                            <div class="uv-dropdown-list uv-bottom-left">
                                <div class="uv-dropdown-container">
                                    <label>{{ 'Filter With'|trans }}</label>
                                    <ul>
                                        <li class="uv-filter-info">
                                            {{ 'Type atleast 2 letters'|trans }}
                                        </li>
                                        <li class="uv-no-results" style="display: none;">
                                            {{ 'No result found'|trans }}
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="uv-filtered-tags"></div>
                        </div>
                    </div>

                    <div class="uv-element-block">
                        <label class="uv-field-label">{{ 'Team'|trans }}</label>
                        <div class="uv-field-block" id="team-filter">
                            <input class="uv-field uv-dropdown-other preloaded" type="text" data-filter-type="team" id="team-filter-input">
                            <div class="uv-dropdown-list uv-bottom-left">
                                <div class="uv-dropdown-container">
                                    <label>{{ 'Filter With'|trans }}</label>
                                    <ul>
                                        <li class="uv-filter-info">
                                            {{ 'Type atleast 2 letters'|trans }}
                                        </li>
                                        <li class="uv-no-results" style="display: none;">
                                            {{ 'No result found'|trans }}
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="uv-filtered-tags"></div>
                        </div>
                    </div>

                    <div class="uv-element-block">
                        <label class="uv-field-label">{{ 'Type'|trans }}</label>
                        <div class="uv-field-block" id="type-filter">
                            <input class="uv-field uv-dropdown-other preloaded" type="text" data-filter-type="type" id="type-filter-input">
                            <div class="uv-dropdown-list uv-bottom-left">
                                <div class="uv-dropdown-container">
                                    <label>{{ 'Filter With'|trans }}</label>
                                    <ul class="">
                                        {% set options = [] %}
                                        {% for type in ticket_service.getTypes() %}
                                            {% set options = options|merge([{'id': type.id, 'name': type.name}]) %}
                                            <li data-id="{{type.id}}">
                                                {{type.name}}
                                            </li>
                                        {% endfor %}
                                        <li class="uv-no-results" style="display: none;">
                                            {{ 'No result found'|trans }}
                                        </li>
                                        {% set filterContext = filterContext|merge({'type':options}) %}
                                    </ul>
                                </div>
                            </div>
                            <div class="uv-filtered-tags"></div>
                        </div>
                    </div>

                    <div class="uv-element-block">
                        <label class="uv-field-label">{{ 'Priority'|trans }}</label>
                        <div class="uv-field-block" id="priority-filter">
                            <input class="uv-field uv-dropdown-other preloaded" type="text" data-filter-type="priority" id="priority-filter-input">
                            <div class="uv-dropdown-list uv-bottom-left">
                                <div class="uv-dropdown-container">
                                    <label>{{ 'Filter With'|trans }}</label>
                                    <ul class="">
                                        {% set options = [] %}
                                        {% for priority in ticket_service.getPriorities() %}
                                            {% set options = options|merge([{'id': priority.id, 'name': priority.description, 'color': priority.colorCode}]) %}
                                            <li data-id="{{priority.id}}">
                                                {{priority.description}}
                                            </li>
                                        {% endfor %}
                                        <li class="uv-no-results" style="display: none;">
                                            {{ 'No result found'|trans }}
                                        </li>
                                        {% set filterContext = filterContext|merge({'priority':options}) %}
                                    </ul>
                                </div>
                            </div>
                            <div class="uv-filtered-tags"></div>
                        </div>
                    </div>

                <div class="uv-element-block">
                        <label class="uv-field-label">{{ 'Source'|trans }}</label>
                        <div class="uv-field-block" id="source-filter">
                            <input class="uv-field uv-dropdown-other preloaded" type="text" data-filter-type="source" id="source-filter-input">
                            <div class="uv-dropdown-list uv-bottom-left">
                                <div class="uv-dropdown-container">
                                    <label>{{ 'Filter With'|trans }}</label>
                                    <ul class="">
                                        {% set options = [] %}
                                        {% for key, source in ticket_service.getAllSources() %}
                                            {% set options = options|merge([{'id': key, 'name': source}]) %}
                                            <li data-id="{{key}}">
                                                {{source}}
                                            </li>
                                        {% endfor %}
                                        <li class="uv-no-results" style="display: none;">
                                            {{ 'No result found'|trans }}
                                        </li>
                                        {% set filterContext = filterContext|merge({'source': options}) %}
                                    </ul>
                                </div>
                            </div>
                            <div class="uv-filtered-tags"></div>
                        </div>
                    </div> 
                </div>
                <script type="text/javascript">
                    var filterContext = {{filterContext|json_encode|raw}}
                </script>
            </div>
        </div>
		<!-- //Filter bar -->
	</div>
{% endblock %}

{% block footer %}
	{{ parent() }}

	<!-- Sorting Template -->
	<script id="rating_list_sorting_tmp" type="text/template">
        <li class="<% if(sort == 't.id') { %>uv-drop-list-active<% } %>">
            <a href="#<% if(queryString != '') { %><%= queryString %>/<% } %><% if(page) { %>page/<%= page %><% } else { %>page/1<% } %>/sort/t.id/<% if(sort == 't.id') { %><% if(direction) { %>direction/<%= direction %><% } else { %>direction/desc<% } %><% } else { %>direction/asc<% } %>" data-field="t.id">
                {{ 'Ticket Id'|trans }}
            </a>
            <% if(sort == 't.id') { %>
                <span class="uv-sorting <% if(direction == 'asc') { %> descend <% } else { %> ascend <% } %>"></span>
            <% } %>
        </li>
        <li class="<% if(sort == 'name') { %>uv-drop-list-active<% } %>">
            <a href="#<% if(queryString != '') { %><%= queryString %>/<% } %><% if(page) { %>page/<%= page %><% } else { %>page/1<% } %>/sort/name/<% if(sort == 'name') { %><% if(direction) { %>direction/<%= direction %><% } else { %>direction/desc<% } %><% } else { %>direction/asc<% } %>" data-field="name">
                {{ 'Customer Name'|trans }}
            </a>
            <% if(sort == 'name') { %>
                <span class="uv-sorting <% if(direction == 'asc') { %> descend <% } else { %> ascend <% } %>"></span>
            <% } %>
        </li>
		<li class="<% if(sort == 'c.email') { %>uv-drop-list-active<% } %>">
            <a href="#<% if(queryString != '') { %><%= queryString %>/<% } %><% if(page) { %>page/<%= page %><% } else { %>page/1<% } %>/sort/c.email/<% if(sort == 'c.email') { %><% if(direction) { %>direction/<%= direction %><% } else { %>direction/desc<% } %><% } else { %>direction/asc<% } %>" data-field="c.email">
                {{ 'Customer Email'|trans }}
            </a>
            <% if(sort == 'c.email') { %>
                <span class="uv-sorting <% if(direction == 'asc') { %> descend <% } else { %> ascend <% } %>"></span>
            <% } %>
        </li>
		<li class="<% if(sort == 'r.stars') { %>uv-drop-list-active<% } %>">
            <a href="#<% if(queryString != '') { %><%= queryString %>/<% } %><% if(page) { %>page/<%= page %><% } else { %>page/1<% } %>/sort/r.stars/<% if(sort == 'r.stars') { %><% if(direction) { %>direction/<%= direction %><% } else { %>direction/desc<% } %><% } else { %>direction/asc<% } %>" data-field="r.stars">
                {{ 'Rating'|trans }}
            </a>
            <% if(sort == 'r.stars') { %>
                <span class="uv-sorting <% if(direction == 'asc') { %> descend <% } else { %> ascend <% } %>"></span>
            <% } %>
        </li>
		<li class="<% if(sort == 'r.createdAt') { %>uv-drop-list-active<% } %>">
            <a href="#<% if(queryString != '') { %><%= queryString %>/<% } %><% if(page) { %>page/<%= page %><% } else { %>page/1<% } %>/sort/r.createdAt/<% if(sort == 'r.createdAt') { %><% if(direction) { %>direction/<%= direction %><% } else { %>direction/desc<% } %><% } else { %>direction/asc<% } %>" data-field="r.createdAt">
                {{ 'Timestamp'|trans }}
            </a>
            <% if(sort == 'r.createdAt') { %>
                <span class="uv-sorting <% if(direction == 'asc') { %> descend <% } else { %> ascend <% } %>"></span>
            <% } %>
        </li>
	</script>
	<!-- //Sorting Template -->

    <script id="rating_brick_tmp" type="text/template">
        <span class="uv-report-brick">
			<span class="uv-icon-kudos kudos-1"></span>
			<span class="uv-report-brick-count">
				<%= rating[1] %>
			</span>
			<span class="uv-report-brick-label">
				{{ 'Very Sad'|trans }}
			</span>
		</span>
		<span class="uv-report-brick">
			<span class="uv-icon-kudos kudos-2"></span>
			<span class="uv-report-brick-count">
				<%= rating[2] %>
			</span>
			<span class="uv-report-brick-label">
				{{ 'Sad'|trans }}
			</span>
		</span>
		<span class="uv-report-brick">
			<span class="uv-icon-kudos kudos-3"></span>
			<span class="uv-report-brick-count">
				<%= rating[3] %>
			</span>
			<span class="uv-report-brick-label">
				{{ 'Neutral'|trans }}
			</span>
		</span>
		<span class="uv-report-brick">
			<span class="uv-icon-kudos kudos-4"></span>
			<span class="uv-report-brick-count">
				<%= rating[4] %>
			</span>
			<span class="uv-report-brick-label">
				{{ 'Happy'|trans }}
			</span>
		</span>
		<span class="uv-report-brick">
			<span class="uv-icon-kudos kudos-5"></span>
			<span class="uv-report-brick-count">
				<%= rating[5] %>
			</span>
			<span class="uv-report-brick-label">
				{{ 'Very Happy'|trans }}
			</span>
		</span>
    </script>

	<script id="rated_ticket_item_tmp" type="text/template">
        <td data-value="{{ 'Ticket Id'|trans }}">
        	<a class="bold" href="{{path('helpdesk_member_ticket')}}/<%= ticketId %>">
            	#<%= ticketId %>
            </a>
        </td>
        <td data-value="{{ 'Customer Name'|trans }}">
        	<a href="{{path('helpdesk_member_manage_customer_account')}}/<%= customer.id %>">
                <% if(customer.smallThumbnail != null) { %>
                    <img src="{{ app.request.scheme ~'://' ~ app.request.httpHost ~ asset('') }}<%= customer.smallThumbnail %>" alt=""/>
                <% } else { %>
                    <img src="{{ asset(default_customer_image_path) }}" alt=""/>
                <% } %>
                <%- customer.name %>
            </a>
        </td>
        <td data-value="{{ 'Customer Email'|trans }}">
        	<%- customer.email %>
        </td>
        <td data-value="{{ 'Timestamp'|trans }}">
        	<%- formatedRatedAt %>
        </td>
        <td data-value="{{ 'Kudos Rating'|trans }}">
			<span class="kudos-text-<%= count %>">
				<%= count %> {{ "Star(s)"|trans }} - 
				<% if(count == 1) { %>
					{{ "Very Sad"|trans }}
				<% } else if(count == 2) { %>
					{{ "Sad"|trans }}
				<% } else if(count == 3) { %>
					{{ "Neutral"|trans }}
				<% } else if(count == 4) { %>
					{{ "Happy"|trans }}
				<% } else { %>
					{{ "Very Happy"|trans }}
				<% } %>
			</span>
        </td>
	</script>

	<script>
	    $(function() {
	    	var customerPath = "{{ path('helpdesk_member_manage_customer_account', {'id': 'replaceId' }) }}";
	    	var startGlobalDate = "{{startDate}}",
	    	endGlobalDate = "{{endDate}}";
            var date = new Date();
            var currentMonth = date.getMonth();
            var currentDate = date.getDate();
            var currentYear = date.getFullYear();
			$('.uv-action-bar .date').datetimepicker({
				maxDate: new Date(currentYear, currentMonth, currentDate),
                format: 'YYYY-MM-DD',
			}).on('dp.change', function(e) {
				$('.date').removeClass('uv-field-error');
				var element = $(e.currentTarget);
				var date = element.find('input').val();
				if(new Date($(".date-to").val()) >= new Date($(".date-from").val())) {
                    achievementsView.filterReport();
                } else
					$('.date').addClass('uv-field-error');
		    });
	    
			var AchievementsView = Backbone.View.extend({
				el : $(".uv-view"),
				template : _.template($("#rating_brick_tmp").html()),
			    events : {
			    	'click .update-date' : "filterReport"
			    },
				filterReport: function(e) {
					if(new Date($(".date-to").val()) >= new Date($(".date-from").val())) {
						ratedTicketCollection.filterParameters.start = $(".date-from").val();
						ratedTicketCollection.filterParameters.end = $(".date-to").val();
						var queryString = app.appView.buildQuery($.param(ratedTicketCollection.getValidParameters()));
						router.navigate(queryString, {trigger: true});
					}
			    },
			    intializeTiles : function(response) {
					this.$el.find('.uv-report-brick-wrapper').html(this.template({'rating': response.data.ratings}));
				},
			});
			var RatedTicketModel = Backbone.Model.extend({
				idAttribute : "id",
			});
			var RatedTicketCollection = AppCollection.extend({
				model : RatedTicketModel,
				url : "{{ path('helpdesk_report_achievements_data_xhr') }}",
			  	filterParameters : {
			  		"start" : "",
			  		"end" : "",
			  		"agent" : "",
			  		"customer" : "",
			  		"priority" : "",
			  		"type" : "",
			  		"group" : "",
			  		"team" : "",
			  	},
				parseRecords: function (resp, options) {
				    return resp.ratedTickets;
				},
				syncData : function() {
					app.appView.showLoader();
					this.fetch({
						data : this.getValidParameters(),
		                reset: true,               
		                success: function(model, response) {
		                	app.appView.hideLoader();
	                		achievementsView.intializeTiles(response)
				           	var ratedTicketListView = new RatedTicketList();
				           	
				           	app.pager.paginationData = response.pagination;
							var url = app.pager.paginationData.url;
				           	if(ratedTicketCollection.length == 0 && app.pager.paginationData.current != "0")
			        			router.navigate(url.replace('replacePage', app.pager.paginationData.last),{trigger: true});
			        		else
				        		app.pager.render();
		                },
		                error: function (model, xhr, options) {
		                	if(url = xhr.getResponseHeader('Location'))
	                			window.location = url;
		                }
		            });
				} 
			});
			var RatedTicketItem = Backbone.View.extend({
				tagName : "tr",
				template : _.template($("#rated_ticket_item_tmp").html()),
			    render : function() {
			    	this.model.set({path:customerPath.replace('replaceId', this.model.attributes.customer.id)})
		            this.$el.html(this.template(this.model.toJSON()));
		            return this;
		        }
			});
			var RatedTicketList = Backbone.View.extend({
				el : $(".uv-list-view table tbody"),
				initialize : function() {
			        this.render();
			    },
		        render : function () {
		        	this.$el.html('');
		        	if(ratedTicketCollection.length) {
			            _.each(ratedTicketCollection.models, function (item) {
			                this.renderRatedTicket(item);
			            }, this);
			        } else {
			        	this.$el.append("<tr style='text-align: center;'><td colspan='6'>{% trans %}No Record Found{% endtrans %}</td></tr>")
			        }
		        },
		        renderRatedTicket : function (item) {
		            var ratedTicketItem = new RatedTicketItem({
		                model: item
		            });
		            this.$el.append(ratedTicketItem.render().el);
		        }
			});
		    var SideFilterModel = Backbone.Model.extend({
                updateModel: function(type,json) {
                    if(this.has(type)) {
                        context = this.get(type)
                        savedOptionsIds = [];
                        _.each(context, function (option) {
                            savedOptionsIds.push(parseInt(option.id))
                        })
                        if(jQuery.inArray(parseInt(json.id), savedOptionsIds) == -1) {
                            context.push(json);
                            this.set(type, context)
                        }
                    } else {
                        this.set(type, [json])
                    }
                },
                loadFilterOptions: function(data) {
                    var self = this;
                    $.ajax({
                        url : "{{ path('helpdesk_member_ticket_collection_load_filter_options_xhr') }}",
                        type : 'POST',
                        data: data,
                        dataType : 'json',
                        success : function(response) {
                            _.each(response,function(filter,key) {
                                _.each(filter, function (item) {
                                    self.updateModel(key,item)
                                })
                            })
                            sideFilter.render();
                        },
                        error: function (xhr) {
                            if(url = xhr.getResponseHeader('Location'))
                                window.location = url;
                        }
                    });
                }
            });
            var SideFilter = Backbone.View.extend({
                el : $(".uv-filter-view"),
                isRecurrsiveCalls: 0,
                isReadyFlag: 0,
                events: {
                    'change #saved-filter': 'applySavedFilter',
                    'input .uv-field-block input' : 'searchFilterOption',
                    'click .uv-dropdown-list li' : 'applyFilter',
                    'dp.change .range input': 'applyFilter',
                    'click .uv-filtered-tags .uv-btn-tag' : 'removeFilter',
                },
                loaderTemplate : _.template($("#loader-tmp").html()),
                checkOptionAvailable: function() {
                    this.isReadyFlag = 0;
                    var self = this;
                    var fetchOptions = {};
                    _.each(ratedTicketCollection.filterParameters, function (filter,key) {
                        if(jQuery.inArray(key, ['customer','agent','group','team','source']) !== -1) {
                            if(filter != null && filter != '') {
                                filter = filter.split(',');
                                if(typeof fetchOptions[key] === 'undefined')
                                    fetchOptions[key] = [];
                                savedOptionsIds = [];
                                if(sideFilterModel.has(key)) {
                                    _.each(sideFilterModel.get(key), function (option) {
                                        savedOptionsIds.push(parseInt(option.id))
                                    })
                                }
                                _.each(filter, function (item) {
                                    if(jQuery.inArray(parseInt(item), savedOptionsIds) == -1) {
                                        fetchOptions[key].push(parseInt(item));
                                        self.isReadyFlag = 1;
                                    }
                                })
                            }
                        }
                    });
                    return fetchOptions;
                },
                render: function() {
                    fetchOptions = this.checkOptionAvailable();
                    if(this.isReadyFlag && !this.isRecurrsiveCalls) {
                        this.isReadyFlag = 0;
                        this.isRecurrsiveCalls = 1;
                        sideFilterModel.loadFilterOptions(fetchOptions)
                    } else {
                        var appliedFilterOptions = {};
                        $('.uv-filtered-tags').html("")
                        var self = this;
                        var displayFlag = 0;
                        _.each(ratedTicketCollection.filterParameters, function (filter, key) {
                            if(jQuery.inArray(key, ['customer', 'agent', 'priority', 'type', 'group', 'team', 'source']) !== -1) {
                                if(filter != null && filter != '') {
                                    displayFlag = 1;
                                    filter = filter.split(',');
                                    _.each(filter, function (value) {
                                        savedOptions = sideFilterModel.get(key)
                                        _.each(savedOptions, function (item) {
                                            if(item.id == value) {
                                                parent = $('#'+key+'-filter')
                                                parent.find('.uv-filtered-tags').append("<a class='uv-btn-tag' href='#' data-id='" + item.id + "'>" + item.name + "<span class='uv-icon-remove-dark'></span></a>")
                                                parent.find('input').val('')
                                            }
                                        })
                                    });
                                }
                            }
                        })
                    }
                },
                searchFilterOption: function(e) {
                    self = this;
                    currentElement = Backbone.$(e.currentTarget);
                    dropdown = currentElement.siblings('.uv-dropdown-list');
                    var filterType =  currentElement.attr('data-filter-type');
                    if(jQuery.inArray(filterType, ['customer','agent','group','team']) !== -1) {
                        self.searchFilterXhr(currentElement);
                    }
                },
                searchFilterXhr: _.debounce(function(currentElement) {
                    var parent = currentElement.parent();
                    if($('.uv-dropdown-other.uv-dropdown-btn-active').parent().attr('id') != parent.attr('id'))
                        return;
                    
                    parent.find("li:not(.uv-no-results, .uv-filter-info)").remove();
                    parent.find(".uv-filter-info").show()
                    if(currentElement.val().length > 1) {
                        parent.append(this.loaderTemplate())
                        parent.find('.uv-filter-info').text("{% trans %}Searching{% endtrans %} ...")
                        if(self.xhrReq)
                            self.xhrReq.abort();
                        self.xhrReq = $.ajax({
                            url : "{{ path('helpdesk_member_ticket_collection_search_filter_options_xhr') }}",
                            type : 'GET',
                            data: {"type" : currentElement.attr('data-filter-type'), "query" : currentElement.val(), 'not' : ratedTicketCollection.filterParameters[currentElement.attr('data-filter-type')]},
                            dataType : 'json',
                            success : function(response) {
                                self.xhrReq = 0;
                                parent.find('.uv-loader').remove()
                                parent.find('.uv-filter-info').text("{{ 'Type atleast 2 letters'|trans }}").hide();
                                if(response.length == 0) {
                                    parent.find('.uv-no-results').show()
                                } else {
                                    parent.find('.uv-no-results').hide();
                                    _.each(response, function(item) {
                                        if(currentElement.attr('data-filter-type') == 'customer' || currentElement.attr('data-filter-type') == 'agent') {
                                            var img = item.smallThumbnail ? "{{ app.request.scheme ~'://' ~ app.request.httpHost ~ asset('') }}" + item.smallThumbnail : (currentElement.attr('data-filter-type') == 'customer' ? "{{ asset(default_customer_image_path) }}" : "{{ asset(default_agent_image_path) }}");
                                            parent.find('.uv-dropdown-list ul').append("<li data-id='" + item.id + "'><img src='" + img + "'/>" + item.name + "</li>")
                                        } else
                                            parent.find('.uv-dropdown-list ul').append("<li data-id='" + item.id + "'>" + item.name + "</li>")
                                    });
                                }
                            },
                            error: function (xhr) {
                                self.xhrReq = 0;
                                parent.find('.uv-loader').remove()
                                parent.find('.uv-no-results').hide();
                                parent.find('.uv-filter-info').text("{{ 'Type atleast 2 letters'|trans }}").show();
                                if(url = xhr.getResponseHeader('Location'))
                                    window.location = url;
                            }
                        });
                    } else {
                        parent.find('.uv-no-results').hide();                        
                    }
                },1000),
                applyFilter: function(e) {
                    currentElement = Backbone.$(e.currentTarget);
                    if(currentElement.attr("data-id")) {
                        var flag = 1;
                        parent = currentElement.parents(".uv-field-block");
                        filterType = parent.find('input').attr('data-filter-type');
                        
                        if(filterType == "customer" || filterType == 'agent' || filterType == 'group' || filterType == 'team') {
                            sideFilterModel.updateModel(filterType, {'id': currentElement.attr('data-id'), 'name': currentElement.text()})
                            parent.find(".uv-no-results").hide()
                            parent.find(".uv-filter-info").show().text("{{ 'Type atleast 2 letters'|trans }}")
                            parent.find("li:not(.uv-no-results, .uv-filter-info)").remove();
                        } else {
                            if(ratedTicketCollection.filterParameters[filterType]) {
                                ids = ratedTicketCollection.filterParameters[filterType].split(',')
                                if(jQuery.inArray(currentElement.attr('data-id'), ids) !== -1)
                                    flag = 0;
                            }
                        }
                        parent.find('input').val('')
                        if(jQuery.inArray(filterType, ['priority', 'type', 'source']) !== -1) {
                            parent.find("li:not(.uv-no-results)").show()
                        }
                        if(flag) {
                            parent.find('.uv-filtered-tags').append("<a class='uv-btn-tag' href='#' data-id='" + currentElement.attr('data-id') + "'>"+currentElement.text()+"<span class='uv-icon-remove-dark'></span></a>")
                            ratedTicketCollection.filterParameters[filterType] = this.joinTagValues(parent.find(".uv-filtered-tags"));
                            var queryString = app.appView.buildQuery($.param(ratedTicketCollection.getValidParameters()));
                            router.navigate(queryString, {trigger: true});
                        }
                    }
                },
                removeFilter: function(e) {
                    e.preventDefault()
                    currentElement = Backbone.$(e.currentTarget);
                    filterType = currentElement.parents('.uv-field-block').find('input').attr('data-filter-type')
                    var options = ratedTicketCollection.filterParameters[filterType];
                    options = options.split(',');
                    var index = options.indexOf(currentElement.attr('data-id'));
                    options.splice(index, 1);
                    ratedTicketCollection.filterParameters[filterType] = options.join(',');
                    currentElement.remove()
                    var queryString = app.appView.buildQuery($.param(ratedTicketCollection.getValidParameters()));
                    router.navigate(queryString, {trigger: true});
                },
                joinTagValues: function(parent) {
                    var ids = new Array();
                    parent.find('.uv-btn-tag').each(function() {
                        ids.push($(this).attr('data-id'))
                    });
                    return ids.join();
                },
                
            });
			var Filter = app.Filter.extend({
				defaultSortIndex: 'r.ratedAt',
				sortText: "{% trans %}Sort By:{% endtrans %} ",
				defaultSortText: "{% trans %}Sort By:{% endtrans %} {% trans %}Timestamp{% endtrans %}",
				template : _.template($("#rating_list_sorting_tmp").html())
			})
			var ratedTicketCollection = new RatedTicketCollection();
			var achievementsView = new AchievementsView({
				model : ratedTicketCollection
			});
            var sideFilterModel = new SideFilterModel(filterContext)
            var sideFilter = new SideFilter();
			var filter = new Filter({
				collection : ratedTicketCollection
			});
			Router = Backbone.Router.extend({
		    	routes: {
	            	'start/:startDate(/end/:endDate)(/agent/:agent)(/customer/:customer)(/priority/:priority)(/type/:type)(/group/:group)(/team/:team)(/source/:source)(/page/:number)(/sort/:sortField)(/direction/:order)' : 'getFilteredReport',
	            	'' : 'getDefaultReport',
	            },
	            getDefaultReport : function() {
	            	this.resetFilter(startGlobalDate,endGlobalDate);
	            	this.fetch(null,null,null);
	            },
	            getFilteredReport : function(startDate,endDate,agent,customer,priority,type,group,team,source,number,sortField,order) {
	            	this.resetFilter(startDate,endDate,agent,customer,priority,type,group,team,source);
	            	this.fetch(number,sortField,order);
	            },
	            fetch : function(number,sortField,order) {
                        ratedTicketCollection.state.currentPage = number;
                        filter.sortCollection(sortField, order);
                        ratedTicketCollection.syncData();
                },
	            resetFilter : function(startDate,endDate,agent,customer,priority,type,group,team,source) {
	            	ratedTicketCollection.filterParameters.start = startDate;
	            	$('.date-from').val(startDate)//.parent().find('.date').text(startDate);
					ratedTicketCollection.filterParameters.end = endDate;
					$('.date-to').val(endDate)//.parent().find('.date').text(endDate);
					ratedTicketCollection.filterParameters.agent = agent;
                	ratedTicketCollection.filterParameters.customer = customer;
                	ratedTicketCollection.filterParameters.priority = priority;
                	ratedTicketCollection.filterParameters.type = type;
                	ratedTicketCollection.filterParameters.group = group;
                	ratedTicketCollection.filterParameters.team = team;
					ratedTicketCollection.filterParameters.source = source;
			    	sideFilter.render()
	            }
	        });     
	        router = new Router();
	        Backbone.history.start({push_state:true});
	    });
	</script>
{% endblock %}