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

{% block title %}Dashboard{% endblock %}

{% block templateCSS %}
    <style>
		.uv-activity-wrapper {
			margin-top: 60px;
		}
		.uv-activity-wrapper .uv-activity-chart-col-lt {
			width: 80%;
			float: left;
		}
		ul.uv-activity-brick-wrapper {
			list-style: none;
			margin: 0;
			padding: 0;
			width: 100%;
    		display: inline-block;
		}
		ul.uv-activity-brick-wrapper li {
			width: 25%;
			display: inline-block;
			float: left;
			padding-left: 10px;
			padding-right: 10px;
			color: #fff;
		}
		ul.uv-activity-brick-wrapper .uv-activity-brick {
			border-radius: 3px;
    		padding: 10px;
			text-align: center;
		}
		ul.uv-activity-brick-wrapper li a {
			color: #fff;
			font-size: 45px;
			width: 100%;
    		display: inline-block;
		}
		ul.uv-activity-brick-wrapper li label {
			font-size: 18px;
			width: 100%;
    		display: inline-block;
		}
		.uv-activity-chart-bottom-row .uv-pannel-body {
			height: 450px;
		}
		.kudos-overview {
			width: 40%;
			float: left;
			padding-right: 10px;
		}
		.recent-notification {
			width: 30%;
			float: left;
			padding-left: 10px;
		}
		.completion-chart {
			width: 300px;
			margin: 0 auto;
		}
		.progress-meter .background {
			fill: #EFEFEF;
		}
		.progress-meter text {
			font-size: 30px;
		}
		.kudos-overview .uv-pannel-body {
			text-align: center;
			padding-top: 50px;
		}
		.kudos-overview .uv-pannel-body label {
			margin-top: 10px;
    		display: inline-block;
		}
		.recent-notification ul {
			list-style: none;
			padding: 0;
			margin: 0;
			overflow-y: auto;
			max-height: 400px !important;
		}
		.recent-notification .uv-pannel-body {
			padding: 0;
		}
		.recent-notification ul li {
			color: #333333;
			border-bottom: solid 1px #D3D3D3;
			padding: 15px 20px;
		}
		.recent-notification ul li:first-child {
			border-top: none;
		}
		.recent-notification ul li:last-child {
			border-bottom: none;
		}
		.recent-notification ul li * {
			display: inline-block !important;
		}
		.recent-notification ul li .timeago {
			color: #9E9E9E;
			margin-top: 5px;
			font-size: 13px;
		}
		.recent-notification label {
			text-align: center;
			display: inline-block;
			width: 100%;
			padding-top: 15px;
			border-top: 1px solid #d3d3d3;
		}
		.recent-notification span.uv-notification-message {
			float: left;
			width: 100%;
		}
		.kudos-count {
			width: 30%;
			float: left;
			padding-right: 10px;
			padding-left: 10px;
		}
		.kudos-count .uv-pannel-body {
			padding-top: 50px;
			overflow-y: auto;
		}
		.kudos-count ul {
			list-style: none;
			padding: 0;
			margin: 0;
		}
		.kudos-count ul li {
			width: 100%;
			display: inline-block;
			padding: 15px 0;
		}
		.kudos-count ul li .uv-icon-kudos  {
			vertical-align: middle;
			margin-right: 10px;
		}
		.uv-activity-wrapper .uv-activity-chart-col-rt {
			width: 20%;
			float: left;
		}
		.uv-activity-chart-col-rt ul {
			padding: 0;
			margin: 0;
			list-style: none;
		}
		.uv-activity-chart-col-rt ul li {
			margin-bottom: 10px
		}
		.uv-activity-chart-col-rt ul li span {
			width: 100%;
			display: inline-block;
			color: #6f6f6f;
		}
		.uv-middle {
			margin: 0 auto;
			display: inline-block;
			margin-top: 200px;
			text-align: center;
			width: 100%;
		}
		@media screen and (max-width: 1024px) {
			.uv-activity-wrapper .uv-activity-chart-col-lt {
				width: 100%;
				padding: 0;
			}
			.uv-activity-wrapper .uv-activity-chart-col-rt {
				width: 100%;
			}
			.kudos-overview {
				width: 100%;
				padding: 0;
			}
			.kudos-count {
				width: 100%;
				padding: 0;
			}
			.recent-notification {
				width: 100%;
				padding: 0;
			}
			ul.uv-activity-brick-wrapper li {
				width: 50%;
				margin: 10px 0;
			}
		}
		@media screen and (max-width: 768px) {
			ul.uv-activity-brick-wrapper li {
				width: 100%;
			}
		}
		@media screen and (max-width: 467px) {
			.completion-chart {
				width: 100%;
			}
		}
		span.uv-notification-message a:link, span.uv-notification-message a:visited, label a:link, label a:visited {
			color: #2750C4;
			font-size: 15px;
		}
		.uv-mob-aside {
			display: none;
		}
	</style>
{% endblock %}

{% block pageContent %}
    <div class="uv-area">
        <!-- Dashboard Navigation -->
		{% set dashboardItems = uvdesk_service.getHelpdeskDashboadPanelItems() %}

        <div id="manage" class="uv-tab-view uv-tab-view-active" data-tab="manage">
			<!-- CHANNELS -->
			
		{% if app.user and is_granted('ROLE_ADMIN') %}
			{% if dashboardItems.HELPDESK_CHANNELS is defined and dashboardItems.HELPDESK_CHANNELS is not empty %}
				<div class="uv-brick">
					<div class="uv-brick-head">
						<h6>Channels</h6>
						<p>Channel acts as a funnel for the tickets which are created from different mediums</p>
					</div>

					<div class="uv-brick-section">
						{% for dashboardItem in dashboardItems.HELPDESK_CHANNELS %}
							<a href="{{ path(dashboardItem.route) }}">
								<div class="uv-brick-container">
									<div class="uv-brick-icon">
										<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="60px" height="60px" viewBox="0 0 60 60">
											{{ dashboardItem.brick_svg | raw }}
										</svg>
									</div>

									<p>{{ dashboardItem.name }}</p>
								</div>
							</a>
						{% endfor %}
					</div>
				</div>
			{% endif %}
		{% endif %}

		<!-- USERS -->
		{% if user_service.isAccessAuthorized('ROLE_AGENT_MANAGE_GROUP') or user_service.isAccessAuthorized('ROLE_AGENT_MANAGE_SUB_GROUP') or user_service.isAccessAuthorized('ROLE_AGENT_MANAGE_AGENT') or user_service.isAccessAuthorized('ROLE_AGENT_MANAGE_AGENT_PRIVILEGE') or user_service.isAccessAuthorized('ROLE_AGENT_MANAGE_CUSTOMER') %}
			{% if dashboardItems.HELPDESK_USERS is defined and dashboardItems.HELPDESK_USERS is not empty %}
				<div class="uv-brick">
					<div class="uv-brick-head">
						<h6>Users</h6>
						<p>Control your Groups, Teams, Agents and Customers</p>
					</div>

					<div class="uv-brick-section">
						{% for dashboardItem in dashboardItems.HELPDESK_USERS %}
							{% if dashboardItem.permission is not defined or dashboardItem.permission is empty or user_service.isAccessAuthorized(dashboardItem.permission) %}
								<a href="{{ path(dashboardItem.route) }}">
									<div class="uv-brick-container">
										<div class="uv-brick-icon">
											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="60px" height="60px" viewBox="0 0 60 60">
												{{ dashboardItem.brick_svg | raw }}
											</svg>
										</div>

										<p>{{ dashboardItem.name }}</p>
									</div>
								</a>
							{% endif %}
						{% endfor %}
					</div>
				</div>
			{% endif %}
		{% endif %}	
		
		<!-- KNOWLEDGEBASE -->
		{% if user_service.isAccessAuthorized('ROLE_AGENT_MANAGE_KNOWLEDGEBASE') %}
			{% if dashboardItems.HELPDESK_KNOWLEDGEBASE is defined and dashboardItems.HELPDESK_KNOWLEDGEBASE is not empty %}
				<div class="uv-brick">
					<div class="uv-brick-head">
						<h6>Knowledgebase</h6>
						<p>Knowledgebase is a source of rigid and complex information which helps Customers to help themselves</p>
					</div>

					<div class="uv-brick-section">
						{% for dashboardItem in dashboardItems.HELPDESK_KNOWLEDGEBASE %}
							<a href="{{ path(dashboardItem.route) }}">
								<div class="uv-brick-container">
									<div class="uv-brick-icon">
										<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="60px" height="60px" viewBox="0 0 60 60">
											{{ dashboardItem.brick_svg | raw }}
										</svg>
									</div>

									<p>{{ dashboardItem.name }}</p>
								</div>
							</a>
						{% endfor %}
					</div>
				</div>
			{% endif %}
		{% endif %}		

		<!-- AUTOMATION -->
		{% if user_service.isAccessAuthorized('ROLE_AGENT_MANAGE_WORKFLOW_MANUAL') or user_service.isAccessAuthorized('ROLE_AGENT_MANAGE_WORKFLOW_AUTOMATIC') or user_service.isAccessAuthorized('ROLE_AGENT_MANAGE_TICKET_TYPE') or user_service.isAccessAuthorized('ROLE_AGENT_MANAGE_TAG') or user_service.isAccessAuthorized('ROLE_ADMIN') %}
			{% if dashboardItems.HELPDESK_AUTOMATION is defined and dashboardItems.HELPDESK_AUTOMATION is not empty %}
				<div class="uv-brick">
					<div class="uv-brick-head">
						<h6>Productivity</h6>
						<p>Automate your processes by creating set of rules and presets to respond faster to the tickets</p>
					</div>

					<div class="uv-brick-section">
						{% for dashboardItem in dashboardItems.HELPDESK_AUTOMATION %}
							{% if dashboardItem.permission is not defined or dashboardItem.permission is empty or user_service.isAccessAuthorized(dashboardItem.permission) %}
								<a href="{{ path(dashboardItem.route) }}">
									<div class="uv-brick-container">
										<div class="uv-brick-icon">
											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="60px" height="60px" viewBox="0 0 60 60">
												{{ dashboardItem.brick_svg | raw }}
											</svg>
										</div>

										<p>{{ dashboardItem.name }}</p>
									</div>
								</a>
							{% endif %}
						{% endfor %}
					</div>
				</div>
			{% endif %}
		{% endif %}
			
		<!-- SETTINGS -->
		{% if user_service.isAccessAuthorized('ROLE_AGENT_MANAGE_EMAIL_TEMPLATE') or user_service.isAccessAuthorized('ROLE_AGENT_MANAGE_CUSTOM_FIELD') or user_service.isAccessAuthorized('import_data') %}
			{% if dashboardItems.HELPDESK_SETTINGS is defined and dashboardItems.HELPDESK_SETTINGS is not empty %}
				<div class="uv-brick">
					<div class="uv-brick-head">
						<h6>Settings</h6>
						<p>Manage your Brand Identity, Company Information and other details at a glance</p>
					</div>

					<div class="uv-brick-section">
						{% for dashboardItem in dashboardItems.HELPDESK_SETTINGS %}
							{% if dashboardItem.permission is not defined or dashboardItem.permission is empty or user_service.isAccessAuthorized(dashboardItem.permission) %}
								<a href="{{ path(dashboardItem.route) }}">
									<div class="uv-brick-container">
										<div class="uv-brick-icon">
											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="60px" height="60px" viewBox="0 0 60 60">
												{{ dashboardItem.brick_svg | raw }}
											</svg>
										</div>

										<p>{{ dashboardItem.name }}</p>
									</div>
								</a>
							{% endif %}
						{% endfor %}
					</div>
				</div>
			{% endif %}
		{% endif %}
        </div>
    </div>
{% endblock %}

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

    <script type="text/javascript">
      	var width = 260,
		    height = 260,
		    radius = Math.min(width, height) / 2,
		    twoPi = 2 * Math.PI,
		    progress = 0,
		    total = 100,
		    donutWidth = 40,
		    formatPercent = d3.format(".0%");

		var arc = d3.svg.arc()
		    .startAngle(0)
		    .innerRadius(radius - donutWidth)
		    .outerRadius(radius);

		var svg = d3.select(".completion-chart").append("svg")
		    .attr("viewBox", "0, 0, " + width + ", " + height + "")
		    .attr('fill', '#2CD651')
		    .append("g")
		    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

		var meter = svg.append("g")
	    				.attr("class", "progress-meter");

		meter.append("path")
		    .attr("class", "background")
		    .attr("d", arc.endAngle(twoPi));

		var foreground = meter.append("path")
	    	.attr("class", "foreground");

		var text = meter.append("text")
	    	.attr("text-anchor", "middle")
	    	.attr("y", 15);

		var animate = function(percentage){
	    	var i = d3.interpolate(progress, percentage);

		    d3.transition().duration(1200).tween("progress", function () {
		        return function (t) {
		            progress = i(t);
		            foreground.attr("d", arc.endAngle(twoPi * progress));
		            text.text(formatPercent(progress));
		        };
		    });
		};

		setTimeout(function () {
		  animate(60);
		}, 500);

		$(function() {
			if (typeof(Storage) !== "undefined") {
				if(!localStorage.getItem('assets-visibility')) {
					localStorage.setItem('assets-visibility', '{"source":1,"customer-name":1,"customer-email":0,"timestamp":1,"group":0,"team":0,"type1":0,"replies":1,"agent":1}' );
				}
			}
		});
	</script>
{% endblock %}