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

{% block title %} 
	{{ 'Microsoft App Settings'|trans }}
{% endblock %}

{% block pageContent %}
	<style>
		.section-heading {
			font-size: 16px;
			margin: 0px;
			line-height: 1.4em;
		}

		.section-description {
			color: #6F6F6F;
			margin-top: unset !important;
			margin-bottom: 20px;
			line-height: 1.4em;
		}

		.uv-element-block .uv-field-message {
			font-style: normal;
			margin: 0px 0px 20px 0px;
		}

		.section-info ul > ul {
			margin-bottom: 1.4rem;
		}

		.section-info ul > ul:last-child {
		}

		.section-info ul li {
			margin-bottom: 6px;
		}

		.section-info ul li:last-child {
			margin-bottom: unset;
		}
	</style>

	<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 %}">
			{% if microsoftApp is defined and microsoftApp is not empty %}
				<h1>{{ 'Microsoft app settings'|trans }}</h1>
			{% else %}
				<h1>{{ 'Add a Microsoft app'|trans }}</h1>
			{% endif %}

            <div class="uv-hr"></div>
			
			<form method="post" action="" id="app-settings-view">
				{# App Name #}
				<div class="uv-element-block">
					<label class="uv-field-label">{{ 'Name'|trans }}</label>

					<div class="uv-field-block">
						{% if microsoftApp.name is defined and microsoftApp.name is not empty %}
							<input type="text" name="name" class="uv-field" value="{{ microsoftApp.name }}" placeholder="{{ 'App Name'|trans }}" />
						{% else %}
							<input type="text" name="name" class="uv-field" value="" placeholder="{{ 'App Name'|trans }}" />
						{% endif %}
					</div>
				</div>

				{# App Status #}
				<div class="uv-element-block">
					<label>
						<div class="uv-checkbox">
							{% if microsoftApp.isEnabled is defined and microsoftApp.isEnabled == true %}
								<input name="isEnabled" type="checkbox" checked="">
							{% else %}
								<input name="isEnabled" type="checkbox" checked="checked">
							{% endif %}

							<span class="uv-checkbox-view"></span>
						</div>

						<span class="uv-checkbox-label">{{ 'Enabled'|trans }}</span>
					</label>
				</div>

				{% if microsoftApp.isVerified is defined %}
					<div class="uv-element-block">
						{% if microsoftApp.isVerified == true %}
							<span style="font-size: 15px; color: #2ED04C; border: 1px solid #2ED04C; display: inline-block; padding: 2px 7px 3px 7px; margin: 10px 0 2px; border-radius: 3px;">Verified</span>
						{% else %}
							<span style="font-size: 15px; color: #FF5656; border: 1px solid #FF5656; display: inline-block; padding: 2px 7px 3px 7px; margin: 10px 0 2px; border-radius: 3px;">Unverified</span>
						{% endif %}
					</div>
				{% endif %}

				<div class="uv-hr"></div>

				{# App Settings #}
				<div class="uv-element-block">
					<label class="uv-field-label">{{ 'Tenant Id'|trans }}</label>
					
					<div class="uv-field-block">
						<input class="uv-field" type="text" name="tenantId" value="{{ microsoftApp.tenantId is defined and microsoftApp.tenantId is not empty ? microsoftApp.tenantId : '' }}" placeholder="Tenant Id">
					</div>
				</div>

				<div class="uv-element-block">
					<label class="uv-field-label">{{ 'Client Id'|trans }}</label>
					
					<div class="uv-field-block">
						<input class="uv-field" type="text" name="clientId" value="{{ microsoftApp.clientId is defined and microsoftApp.clientId is not empty ? microsoftApp.clientId : '' }}" placeholder="Client Id">
					</div>
				</div>
				
				<div class="uv-element-block">
					<label class="uv-field-label">{{'Client Secret'|trans }}</label>

					<div class="uv-field-block">
						<input class="uv-field" type="password" name="clientSecret" value="" placeholder="Client Secret">
					</div>
				</div>

				{% if microsoftApp is defined and microsoftApp is not empty and microsoftApp.id is not empty %}
					<input id="saveConfigurationSettings" class="uv-btn" href="#" value="{{ 'Update App'|trans }}" type="submit">
				{% else %}
					<input id="saveConfigurationSettings" class="uv-btn" href="#" value="{{ 'Add App'|trans }}" type="submit">
				{% endif %}

				<div class="uv-hr"></div>

				<div class="section-info" style="font-size: 14px;">
					<h3>Guide on creating a new app in Azure Active Directory:</h3>
					
					<p style="font-size: 14px;">To add a new Microsoft App to your azure active directory, follow the steps as given below:</p>

					<ul style="margin: 0px 20px 0px 0px;">
						<li>Go to Azure Active Directory -> App registerations</li>
						<li>Create a New Registeration</li>
						<ul>
							<li>Enter your app details as following:</li>
							<li>App Name: Enter an app name to easily help you identify its purpose</li>
							<li>Supported Account Types: Select whichever option works the best for you (Recommended: Accounts in any organizational directory and personal Microsoft accounts)</li>
							<li>Redirect URI:</li>
							<ul>
								<li>Select Platform: Web</li>
								<li>Enter the following redirect uri: {{ redirectEndpoint }}</li>
							</ul>
							<li>Proceed to create your application</li>
						</ul>

						<li>Once your app has been created, in your app overview section, continue with adding a client credential by clicking on "Add a certificate or secret"</li>
						<ul>
							<li>Create a new client secret</li>
							<li>Enter a description as per your preference to help identify the purpose of this client secret</li>
							<li>Choose an expiration time as per your preference</li>
							<li>Proceed to add your client secret</li>
							<li>Copy the client secret value which will be needed later and cannot be viewed again</li>
						</ul>

						<li>Navigate to API permissions</li>
						<ul>
							<li>Click on "Add a permission" to add a new api permission. Add the following delegated permissions by selecting Microsoft APIs > Microsoft Graph > Delegate Permissions</li>
							<ul>
								<li>offline_access</li>
								<li>openid</li>
								<li>profile</li>
								<li>User.Read</li>
								<li>IMAP.AccessAsUser.All</li>
								<li>SMTP.Send</li>
								<li>POP.AccessAsUser.All</li>
								<li>Mail.Read</li>
								<li>Mail.ReadBasic</li>
								<li>Mail.Send</li>
								<li>Mail.Send.Shared</li>
							</ul>
						</ul>

						<li>Navigate to your app overview section</li>
						<ul>
							<li>Copy the Application (Client) Id</li>
							<li>Copy the Directory (Tenant) Id</li>
						</ul>

						<li>Enter your client id, tenant id, and client secret in settings above as required.</li>
					</ul>
				</div>
			</form>
		</div>
	</div>
{% endblock %}

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

	<script type="text/javascript">
		$(function () {
			var MicrosoftAppConfigurationModel = Backbone.Model.extend({
                idAttribute: "id",
                validation: {
					name: function(value) {
						if (value == undefined || value == '') {
							return "Please enter a valid name for your app.";
						}
                    },
					tenantId: function(value) {
						if (value == undefined || value == '' || value == 'none') {
							return "Please enter a valid tenant id.";
						}
                    },
					clientId: function(value) {
						if (value == undefined || value == '' || value == 'none') {
							return "Please enter a valid client id.";
						}
                    },
					clientSecret: function(value) {
						if (value == undefined || value == '' || value == 'none') {
							return "Please enter a valid client secret.";
						}
                    }
				}
			});

			var MicrosoftAppConfigurationView = Backbone.View.extend({
				events: {
					'click #saveConfigurationSettings' : "submitConfigurationSettings",
				},
				initialize: function() {
                    Backbone.Validation.bind(this);
				},
                submitConfigurationSettings: function(e) {
                    e.preventDefault();
                    this.model.set(this.$el.serializeObject());

			        if (this.model.isValid(true)) {
			            this.$el.submit();
			        }
                }
			});

            {% if microsoftApp is defined and microsoftApp is not empty %}
				new MicrosoftAppConfigurationView({
					el: $("#app-settings-view"),
					model: new MicrosoftAppConfigurationModel({
						name: "{{ microsoftApp.name }}",
						tenantId: "{{ microsoftApp.tenantId }}",
						clientId: "{{ microsoftApp.clientId }}",
						clientSecret: "{{ microsoftApp.clientSecret }}",
					})
				});
            {% else %}
                new MicrosoftAppConfigurationView({
                    el: $("#app-settings-view"),
                    model: new MicrosoftAppConfigurationModel({})
                });
            {% endif %}
		});
	</script>
{% endblock %}