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

{% block title %}Microsoft Apps{% endblock %}

{% block templateCSS %}
    <style>
		.uv-action-bar {
			border-bottom: 1px solid #d3d3d3;
			padding-bottom: 10px;
		}

		.uv-app-list-brick {
			width: 310px;
			max-width: 100%;
			font-size: 0;
			margin: 15px 20px 0px 0px;
			display: inline-block;
			border-radius: 3px;
			border: solid 1px #7C70F4;
		}

		.uv-app-list-brick .uv-app-list-brick-lt {
			display: inline-block;
			vertical-align: middle;
			width: 35%;
			height: 100%;
			text-align: center;
			background-color: #7C70F4;
		}

		.uv-app-list-brick .uv-app-list-brick-lt span {
			font-size: 24px;
			color: #FFFFFF;
			padding: 24px 0px;
			display: inline-block;
			line-height: 40px;
		}

		.uv-app-list-brick .uv-app-list-brick-rt {
			width: 65%;
			padding: 10px 15px 9px 15px;
			display: inline-block;
			vertical-align: middle;
		}

		.uv-app-list-brick .uv-app-list-brick-rt p {
			width: 100%;
			margin: 0px;
			margin-bottom: 3px;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.uv-app-list-brick .uv-app-list-brick-rt span.uv-app-list-flag-active {
			font-size: 15px;
			color: #FFFFFF;
			background-color: #2ED04C;
			display: inline-block;
			padding: 0px 7px 1px 7px;
			margin-bottom: 2px;
			border-radius: 3px;
		}

		.uv-app-list-brick .uv-app-list-brick-rt span.uv-app-list-flag-inactive {
			font-size: 15px;
			color: #FFFFFF;
			background-color: #FF5656;
			display: inline-block;
			padding: 0px 7px 1px 7px;
			margin-bottom: 2px;
			border-radius: 3px;
		}

		.uv-app-list-brick .uv-app-list-brick-rt a:link,
		.uv-app-list-brick .uv-app-list-brick-rt a:focus,
		.uv-app-list-brick .uv-app-list-brick-rt a:hover,
		.uv-app-list-brick .uv-app-list-brick-rt a:active,
		.uv-app-list-brick .uv-app-list-brick-rt a:visited {
			font-size: 15px;
			color: #2750C4;
			margin-right: 10px;
			display: inline-block;
		}

		.uv-app-list-brick .uv-app-list-brick-rt a.uv-delete {
			color: #FF5656;
		}

		{# .uv-app-list-brick-template {
			width: 100%;
			padding: 10px 15px 9px 15px;
			display: inline-block;
			vertical-align: middle;
		} #}

		.uv-custom-btn {
			cursor: pointer;
			background: unset;
			border: unset;
			margin-right: 10px;
			padding: unset;
			font-size: 15px;
		}
	</style>
{% endblock %}

{% block pageContent %}
	<div class="uv-inner-section">
        {# Append Panel Aside #}
		{% set asideTemplate = 'Webkul\\UVDesk\\CoreFrameworkBundle\\Dashboard\\AsideTemplate' %}
		{% set asideSidebarReference = 'Webkul\\UVDesk\\CoreFrameworkBundle\\UIComponents\\Dashboard\\Panel\\Sidebars\\Settings' %}

		{{ 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 %}">
			<div class="uv-action-bar">
                <div class="uv-action-bar-col-lt" style="vertical-align: middle;">
					<h1>{{ 'Microsoft Apps'|trans }}</h1>
                </div>

				<div class="uv-action-bar-col-rt" style="vertical-align: middle;">
					<a href="{{ path('uvdesk_member_core_framework_microsoft_apps_settings_create_configuration') }}" type="button" class="uv-btn-action" style="margin: unset;">{{ 'New App'|trans }}</a>
				</div>
            </div>

            <div id="mailbox-collection" class="mailbox-collection uv-app-list-channels">
            </div>
		</div>
	</div>
{% endblock %}

{% block footer %}
	{{ parent() }}
	
	<script type="text/template" id="no_configurations_template">
        <div class="uv-app-screen">
            <div class="uv-app-splash" style="text-align: center;">
                <img class="uv-app-splash-image" src="{{ asset('bundles/uvdeskcoreframework/images/splash/mailbox.png') }}" alt="Tasks">
                <h2 class="uv-margin-top-10">{{ 'No microsoft apps found'|trans }}</h2>
            </div>
        </div>	
	</script>

	<script id="app_configuration_item_template" type="text/template">
		<div class="uv-app-list-brick-rt" title="<%- id %>" style="width: 100%;">
			<p style="line-height: 1.4em; margin: unset; margin-bottom: 4px;">
				<span style="font-weight: 700; text-transform: uppercase;"><%- name %></span>
			</p>
			
			<p style="line-height: 1.4em; margin-bottom: 10px;">
				<% if (isEnabled) { %>
					<span class="uv-app-list-flag-active">Enabled</span>
				<% } else { %>
					<span class="uv-app-list-flag-inactive">Disabled</span>
				<% } %>

                <% if (isVerified) { %>
					<span class="uv-app-list-flag-active">Verified</span>
				<% } else { %>
					<span class="uv-app-list-flag-inactive">Unverified</span>
				<% } %>
			</p>

			<div class="uv-app-list-actions" style="display: flex; align-items: center; margin-top: 1.6rem;">
				<% if (isEnabled) { %>
					<button class="uv-custom-btn toggle-microsoft-app-status" data-status="disable" style="color: #e00d0d;">{{ "Disable"|trans }}</button>
				<% } else { %>
					<button class="uv-custom-btn toggle-microsoft-app-status" data-status="enable" style="color: #2750C4;">{{ "Enable"|trans }}</button>
				<% } %>

				<a href="{{ path('uvdesk_member_core_framework_microsoft_apps_settings_update_configuration', {'id': '' }) }}/<%- id %>" class="uv-custom-btn">
					{{ "Edit"|trans }}
				</a>

				<button class="uv-custom-btn delete-microsoft-app" style="color: #e00d0d;">{{ "Delete"|trans }}</button>
			</div>
		</div>
    </script>

	<script type="text/javascript">
		var path = "{{ path('uvdesk_member_core_framework_microsoft_apps_settings_update_configuration', {'id': 'replaceId' }) }}";

		$(function () {
			var globalMessageResponse = "";

			var ConfigurationModel = Backbone.Model.extend({
				idAttribute : "id"
			});

			var ConfigurationCollection = AppCollection.extend({
				model: ConfigurationModel,
				url: "{{ path('uvdesk_member_core_framework_microsoft_apps_settings_load_configurations_xhr') }}",
				filterParameters : {
					"isActive" : "",
					"search" : ""
				},
				parseRecords: function (resp, options) {
					return resp.types;
				},
				initialize: function() {
					this.syncData();
				},
				syncData: function() {
					app.appView.showLoader();

					this.fetch({
						data: this.getValidParameters(),
						reset: true,
						success: function(model, response) {
							app.appView.hideLoader();
							var configurationListView = new ConfigurationList(response);

							if (globalMessageResponse) {
								app.appView.renderResponseAlert(globalMessageResponse);
							}

							globalMessageResponse = null;
						},
						error: function (model, xhr, options) {
							if(url = xhr.getResponseHeader('Location'))
								window.location = url;
						}
					});
				}
			});

			var ConfigurationView = Backbone.View.extend({
				tagName: "div",
				className: "uv-app-list-brick",
				template: _.template($("#app_configuration_item_template").html()),
				events: {
					'click .delete-microsoft-app': "deleteMicrosoftApp", 
					'click .toggle-microsoft-app-status': "toggleMicrosoftAppStatus"
				},
				render: function() {
					this.$el.html(this.template(this.model));
					return this;
				},
				deleteMicrosoftApp: function(e) {
					e.preventDefault();
					app.appView.openConfirmModal(this)
				},
				toggleMicrosoftAppStatus: function(e) {
					e.preventDefault();
					app.appView.showLoader();

					let status = $(e.target).data('status');

					$.ajax({
						url: "{{ path('uvdesk_member_core_framework_microsoft_apps_settings_toggle_configuration_status') }}/" + this.model.id, 
						data: { status: status }, 
						success: function (response) {
							app.appView.hideLoader();
							globalMessageResponse = response;
							configurationCollection.syncData();
						}, 
						error: function (model, xhr, options) {
							if (url = xhr.getResponseHeader('Location')) {
								window.location = url;
							}

							var response = warningResponse;
							
							if (xhr.responseJSON) {
								response = xhr.responseJSON;
							}

							app.appView.hideLoader();
							app.appView.renderResponseAlert(response);
						}
					});
				},
				removeItem: function (e) {
					app.appView.showLoader();
					self = this;
				
					$.ajax({
						url: "{{ path('uvdesk_member_core_framework_microsoft_apps_settings_remove_configuration') }}/" + this.model.id,
						success: function (response) {
							app.appView.hideLoader();
							globalMessageResponse = response;
							configurationCollection.syncData();
						}, 
						error: function (model, xhr, options) {
							if (url = xhr.getResponseHeader('Location')) {
								window.location = url;
							}

							var response = warningResponse;
							
							if (xhr.responseJSON) {
								response = xhr.responseJSON;
							}

							app.appView.hideLoader();
							app.appView.renderResponseAlert(response);
						}
					});
				}
			});

			var ConfigurationList = Backbone.View.extend({
				el: $(".mailbox-collection"),
				template: _.template($("#no_configurations_template").html()),
				initialize : function(listItems) {
					this.render(listItems);
				},
				render : function (items) {
					this.$el.find("div").remove();
					
					if (items.length > 0) {
						_.each(items, function (item) {
							this.renderType(item);
						}, this);
					} else {
						this.$el.html(this.template());
					}
				},
				renderType : function (item) {
					var configuration = new ConfigurationView({
						model: item
					});

					this.$el.append(configuration.render().el);
				}
			});

			var configurationCollection = new ConfigurationCollection();
		});
	</script>
{% endblock %}