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

{% block title %} 
	{{ 'Mailbox 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;
		}
	</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 mailbox is defined and mailbox.id is not empty %}
				<h1>{{ 'Update Mailbox'|trans }}</h1>
			{% else %}
				<h1>{{ 'Add Mailbox'|trans }}</h1>
			{% endif %}

            <div class="uv-hr"></div>
			
			<form method="post" action="" id="mailbox-settings-view">
				{# Mailer Id #}
				<div class="uv-element-block">
					<label class="uv-field-label">{{ 'ID'|trans }}</label>

					<div class="uv-field-block">
						{% if mailbox is defined and mailbox.id is not empty %}
							<input type="text" name="id" class="uv-field" value="{{ mailbox.id }}" placeholder="{{ 'Mailbox ID - Leave blank to automatically create id'|trans }}" />
						{% else %}
							<input type="text" name="id" class="uv-field" value="" placeholder="{{ 'Mailbox ID - Leave blank to automatically create id'|trans }}" />
						{% endif %}
					</div>
				</div>

				{# Mailer Name #}
				<div class="uv-element-block">
					<label class="uv-field-label">{{ 'Name'|trans }}</label>

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

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

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

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

				<div class="uv-element-block">
					<label>
						<div class="uv-checkbox">
							{% if mailbox.isDeleted is defined and mailbox.isDeleted == true %}
								<input name="isDeleted" type="checkbox" checked="">
							{% else %}
								<input name="isDeleted" type="checkbox">
							{% endif %}

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

						<span class="uv-checkbox-label">{{ 'Permanently delete from Inbox'|trans }}</span>
					</label>
				</div>

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

				{# IMAP Settings #}
				<h3 class="section-heading">{{ 'Incoming Mail (IMAP) Server'|trans }}</h3>
				<p class="section-description">{{ 'Configure your imap settings which will be used to fetch emails from your mailbox.'|trans }}</p>

				<div class="uv-element-block">
					<label class="uv-field-label">{{ 'Transport'|trans }}</label>

					{% if mailbox is defined %}
						<select name="imap[transport]" id="cta-mailbox-imap-transport" class="uv-select">
							<option value="custom" {% if mailbox.imapConfiguration.code == 'custom' %}selected{% endif %}>{{ 'IMAP'|trans }}</option>
							<option value="gmail" {% if mailbox.imapConfiguration.code == 'gmail' %}selected{% endif %}>{{ 'Gmail'|trans }}</option>
							<option value="yahoo" {% if mailbox.imapConfiguration.code == 'yahoo' %}selected{% endif %}>{{ 'Yahoo'|trans }}</option>
						</select>
					{% else %}
						<select name="imap[transport]" id="cta-mailbox-imap-transport" class="uv-select">
							<option value="custom" selected>{{ 'IMAP'|trans }}</option>
							<option value="gmail">{{ 'Gmail'|trans }}</option>
							<option value="yahoo">{{ 'Yahoo'|trans }}</option>
						</select>
					{% endif %}
				</div>

				<div class="imap-setting-references"></div>

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

				{# SwiftMailer Settings #}
				<h3 class="section-heading">{{ 'Outgoing Mail (SMTP) Server'|trans }}</h3>
				<p class="section-description">{{ 'Select a valid Swift Mailer configuration which will be used to send emails through your mailbox.'|trans }}</p>

				<div class="uv-element-block">
					<label class="uv-field-label">{{ 'Swift Mailer ID'|trans }}</label>

					{% if swiftmailerConfigurations is defined and swiftmailerConfigurations is not empty %}
						<select name="swiftmailer_id" class="uv-select">
							<option value="none">{{ 'None Selected'|trans }}</option>
							{% for configuration in swiftmailerConfigurations %}
								{% if mailbox is defined and mailbox.swiftmailerConfiguration and mailbox.swiftmailerConfiguration.id == configuration.id %}
									<option value="{{ configuration.id }}" selected>{{ configuration.id }}</option>
								{% else %}
									<option value="{{ configuration.id }}">{{ configuration.id }}</option>
								{% endif %}
							{% endfor %}
						</select>
					{% else %}
						<select name="swiftmailer_id" class="uv-select">
							<option value="none">{{ 'None Selected'|trans }}</option>
						</select>
					{% endif %}
				</div>

				<div class="uv-hr"></div>
				
				{% if mailbox is defined and mailbox.id is not empty %}
					<input class="uv-btn" href="#" value="{{ 'Update Mailbox'|trans }}" type="submit">
				{% else %}
					<input class="uv-btn" href="#" value="{{ 'Create Mailbox'|trans }}" type="submit">
				{% endif %}
			</form>
		</div>
	</div>
{% endblock %}

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

    <script id="imap_conf_template_predefined" type="text/template">
        <div class="uv-element-block">
			<label class="uv-field-label">{{ 'Username/Email' |trans }}</label>
			
			<div class="uv-field-block">
				<% if (typeof(username) != 'undefined' && username != '') { %>
					<input class="uv-field" type="text" name="imap[username]" value="<%- username %>" placeholder="{{ 'username@domain.com'|trans }}">
				<% } else { %>
					<input class="uv-field" type="text" name="imap[username]" value="" placeholder="{{ 'username@domain.com'|trans }}">
                <% } %>
			</div>
		</div>
		
		<div class="uv-element-block">
			<label class="uv-field-label">{{ 'Password' |trans }}</label>

			<div class="uv-field-block">
				<input class="uv-field" type="password" name="imap[password]" placeholder="{{ 'Associated Password'|trans }}">
			</div>
		</div>
	</script>

    <script id="imap_conf_template_custom" type="text/template">
        <div class="uv-element-block">
			<label class="uv-field-label">{{ 'Host'|trans }}</label>
			
			<div class="uv-field-block">
				<% if (typeof(host) != 'undefined' && host != '') { %>
					<input class="uv-field" type="text" name="imap[host]" value="<%- host %>" placeholder="<%- host %>">
				<% } else { %>
					<input class="uv-field" type="text" name="imap[host]" value="" placeholder="{{'IMAP Host'|trans }}">
                <% } %>
			</div>
		</div>

		<div class="uv-element-block">
			<label class="uv-field-label">{{ 'Username/Email'|trans }}</label>
			
			<div class="uv-field-block">
				<% if (typeof(username) != 'undefined' && username != '') { %>
					<input class="uv-field" type="text" name="imap[username]" value="<%- username %>" placeholder="{{'username@domain.com'|trans }}">
				<% } else { %>
					<input class="uv-field" type="text" name="imap[username]" value="" placeholder="{{'username@domain.com'|trans }}">
                <% } %>
			</div>
		</div>
		
		<div class="uv-element-block">
			<label class="uv-field-label">{{'Password'|trans }}</label>

			<div class="uv-field-block">
				<input class="uv-field" type="password" name="imap[password]" placeholder="{{'Associated Password'|trans }}">
			</div>
		</div>
	</script>

	<script type="text/javascript">
		$(function () {
			var MailboxConfigurationModel = Backbone.Model.extend({
                idAttribute: "id",
                validation: {
					name: function(value) {
						if (value == undefined || value == '') {
							return "Please specify a valid name for your mailbox.";
						}
                    },
					swiftmailer_id: function(value) {
						if (value == undefined || value == '' || value == 'none') {
							return "Please select a valid swift-mailer configuration.";
						}
                    },
					"imap[host]": function(value) {
                        if ('custom' == this.get('transport') || 'imap' == this.get('transport')) {
                            if (value == undefined || value == '') {
                                return "Please specify a valid host address.";
                            }
                        }
                    },
                    "imap[username]": [
                        {
                            required: true,
                            msg: 'Please specify a valid email address.'
                        },
                        {
                            pattern: /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,
                            msg: 'Please specify a valid email address.'
                        }
                    ],
                    "imap[password]": function(value) {
                        if (value == undefined || value == '') {
                            return "Please enter the associated account password.";
                        }
                    }
				}
			});

			var MailboxConfigurationView = Backbone.View.extend({
                imap_conf_template_custom: _.template($("#imap_conf_template_custom").html()),
                imap_conf_template_predefined: _.template($("#imap_conf_template_predefined").html()),
				events: {
                    'change #cta-mailbox-imap-transport': 'changeImapTransportType',
					'click .uv-btn' : "validateSubmission",
				},
				initialize: function() {
                    Backbone.Validation.bind(this);
                    this.renderTransportConfigurations();
				},
                changeImapTransportType: function(e) {
                    if (true) {
                        this.model.set('transport', $(e.target).val());
                    }

                    this.renderTransportConfigurations();
                },
                renderTransportConfigurations: function() {
                    switch (this.model.get('transport')) {
                        case 'custom':
                            $('.imap-setting-references').html(this.imap_conf_template_custom(this.model.attributes));
                            break;
                        case 'gmail':
                            $('.imap-setting-references').html(this.imap_conf_template_predefined(this.model.attributes));
                            break;
                        case 'yahoo':
                            $('.imap-setting-references').html(this.imap_conf_template_predefined(this.model.attributes));
                            break;
                        default:
                            break;
                    }
                },
                validateSubmission: function(e) {
                    e.preventDefault();
                    this.model.set(this.$el.serializeObject());

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

            {% if mailbox is defined %}
                new MailboxConfigurationView({
                    el: $("#mailbox-settings-view"),
                    model: new MailboxConfigurationModel({
						transport: "{{ mailbox.imapConfiguration.code }}",
						host: "{{ mailbox.imapConfiguration.host }}",
						username: "{{ mailbox.imapConfiguration.username }}",
					})
                });
            {% else %}
                new MailboxConfigurationView({
                    el: $("#mailbox-settings-view"),
                    model: new MailboxConfigurationModel({ transport: 'custom' })
                });
            {% endif %}
		});
	</script>
{% endblock %}