golden hour

/var/www/html/Digital_Design/assets/js/apps

File/Folder	Size	Actions
contact.js	12.33 KB
custom-mailbox.js	68.73 KB
invoice.js	2.24 KB
mailbox-chat.js	8.45 KB
notes.js	9.03 KB
scrumboard.js	23.37 KB
todoList.js	18.36 KB

Edit: custom-mailbox.js

$(document).ready(function() {

var today = new Date();
  	var dd = String(today.getDate()).padStart(2, '0');
  	var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
  	var yyyy = today.getFullYear();
  	var today = mm + '/' + dd + '/' + yyyy;

$('.current-recent-mail').text(today + ' -')

// Applying Scroll Bar

const ps = new PerfectScrollbar('.message-box-scroll');
	const mailScroll = new PerfectScrollbar('.mail-sidebar-scroll', {
		suppressScrollX : true
	});

function mailInboxScroll() {
		$('.mailbox-inbox .collapse').each(function(){ const mailContainerScroll = new PerfectScrollbar($(this)[0], {
			suppressScrollX : true
		}); });
	}
	mailInboxScroll();

/*
		fn. dynamicBadgeNotification ==> Get the badge count for mail sidebar
	*/
	function dynamicBadgeNotification( setMailCategoryCount ) {
		var mailCategoryCount = setMailCategoryCount;

// Get Parents Div(s)
		var get_ParentsDiv = $('.mail-item');
		var get_MailInboxParentsDiv = $('.mail-item.mailInbox');
		var get_UnreadMailInboxParentsDiv = $('[id*="unread-"]');
		var get_DraftParentsDiv = $('.mail-item.draft');

// Get Parents Div(s) Counts
		var get_MailInboxElementsCount = get_MailInboxParentsDiv.length;
		var get_UnreadMailInboxElementsCount = get_UnreadMailInboxParentsDiv.length;
		var get_DraftElementsCount = get_DraftParentsDiv.length;

// Get Badge Div(s)
		var getBadgeMailInboxDiv = $('#mailInbox .mail-badge');
		var getBadgeDraftMailDiv = $('#draft .mail-badge');

if (mailCategoryCount === 'mailInbox') {
			if (get_UnreadMailInboxElementsCount === 0) {
				getBadgeMailInboxDiv.text('');
				return;
			}
			getBadgeMailInboxDiv.text(get_UnreadMailInboxElementsCount);
		} else if (mailCategoryCount === 'draftmail') {
			if (get_DraftElementsCount === 0) {
				getBadgeDraftMailDiv.text('');
				return;
			}
			getBadgeDraftMailDiv.text(get_DraftElementsCount);
		}
	}

dynamicBadgeNotification('mailInbox');
	dynamicBadgeNotification('draftmail');

// Open Modal on Compose Button Click
	$('#btn-compose-mail').on('click', function(event) {
		$('#btn-send').show();
		$('#btn-reply').hide();
		$('#btn-fwd').hide();
		$('#composeMailModal').modal('show');

// Save And Reply Save
		$('#btn-save').show();
		$('#btn-reply-save').hide();
		$('#btn-fwd-save').hide();
	})

/*
		Init. fn. checkAll ==> Checkbox check all
	*/
	document.getElementById('inboxAll').addEventListener('click', function() {
		var getActiveList = document.querySelectorAll('.tab-title .list-actions.active');
		var getActiveListID = '.'+getActiveList[0].id;

var getItemsCheckboxes = '';

if (getActiveList[0].id === 'personal' || getActiveList[0].id === 'work' || getActiveList[0].id === 'social' || getActiveList[0].id === 'private') {

getItemsGroupCheckboxes = document.querySelectorAll(getActiveListID);
			for (var i = 0; i < getItemsGroupCheckboxes.length; i++) {
				getItemsGroupCheckboxes[i].parentNode.parentNode.parentNode;

getItemsCheckboxes = document.querySelectorAll('.'+getItemsGroupCheckboxes[i].parentNode.parentNode.parentNode.className.split(' ')[0] + ' ' + getActiveListID + ' .inbox-chkbox');
				
				if (getItemsCheckboxes[i].checked) {
					getItemsCheckboxes[i].checked = false;
				} else {
					if (this.checked) {
						getItemsCheckboxes[i].checked = true;
					}
				}
			}

} else {
			getItemsCheckboxes = document.querySelectorAll('.mail-item'+getActiveListID + ' .inbox-chkbox');
			for (var i = 0; i < getItemsCheckboxes.length; i++ ) {
				if (getItemsCheckboxes[i].checked) {
					getItemsCheckboxes[i].checked = false;
				} else {
					if (this.checked) {
						getItemsCheckboxes[i].checked = true;
					}
				}
			}
		}
	})

/*
		fn. randomString ==> Generate Random Numbers
	*/
	function randomString(length, chars) {
		var result = '';
		for (var i = length; i > 0; --i) result += chars[Math.round(Math.random() * (chars.length - 1))];
		return result;
	}

/*
		fn. formatAMPM ==> Get Time in 24hr Format
	*/
	function formatAMPM(date) {
	  var hours = date.getHours();
	  var minutes = date.getMinutes();
	  var ampm = hours >= 12 ? 'PM' : 'AM';
	  hours = hours % 12;
	  hours = hours ? hours : 12; // the hour '0' should be '12'
	  minutes = minutes < 10 ? '0'+minutes : minutes;
	  var strTime = hours + ':' + minutes + ' ' + ampm;
	  return strTime;
	}

/*
		fn. formatBytes ==> Calculate and convert bytes into ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
	*/
	function formatBytes(bytes, decimals) {
	    if (bytes === 0) return '0 Bytes';
	    const k = 1024;
	    const dm = decimals < 0 ? 0 : decimals;
	    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
	    const i = Math.floor(Math.log(bytes) / Math.log(k));
	    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
	}

// Search on each key pressed

$('.input-search').on('keyup', function() {
	  var rex = new RegExp($(this).val(), 'i');
	    $('.message-box .mail-item').hide();
	    $('.message-box .mail-item').filter(function() {
	        return rex.test($(this).text());
	    }).show();
	});

// Tooltip

$('[data-toggle="tooltip"]').tooltip({
	    'template': '<div class="tooltip actions-btn-tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>',
	})

// Triggered when mail is Closed

$('.close-message').on('click', function(event) {
		event.preventDefault();
		$('.content-box .collapse').collapse('hide')
		$(this).parents('.content-box').css({
			width: '0',
			left: 'auto',
			right: '-46px'
		});
	});

// Open Mail Sidebar on resolution below or equal to 991px.

$('.mail-menu').on('click', function(e){
		$(this).parents('.mail-box-container').children('.tab-title').addClass('mail-menu-show')
		$(this).parents('.mail-box-container').children('.mail-overlay').addClass('mail-overlay-show')
	})

// Close sidebar when clicked on ovelay ( and ovelay itself ).

$('.mail-overlay').on('click', function(e){
		$(this).parents('.mail-box-container').children('.tab-title').removeClass('mail-menu-show')
		$(this).removeClass('mail-overlay-show')
	})

/*
		fn. contentBoxPosition ==> Triggered when clicked on any each mail to show the mail content.
	*/
	function contentBoxPosition() {
		$('.content-box .collapse').on('show.bs.collapse', function(event) {
			var getCollpaseElementId = this.id;
			var getSelectedMailTitleElement = $('.content-box').find('.mail-title');
			var getSelectedMailContentTitle = $(this).find('.mail-content').attr('data-mailTitle');
			$(this).parent('.content-box').css({
				width: '100%',
				left: '0',
				right: '100%'
			});
			$(this).parents('#mailbox-inbox').find('.message-box [data-target="#'+getCollpaseElementId+'"]').parents('.mail-item').removeAttr('id');
			getSelectedMailTitleElement.text(getSelectedMailContentTitle);
			getSelectedMailTitleElement.attr('data-selectedMailTitle', getSelectedMailContentTitle);
			dynamicBadgeNotification('mailInbox');
		})
	}
	function stopPropagations() {
		$('.mail-item-heading .mail-item-inner .new-control').on('click', function(e){
		    e.stopPropagation();
		})
	}

/*
		====================
			Quill Editor
		====================
	*/

var quill = new Quill('#editor-container', {
	  modules: {
	    toolbar: [
	      [{ header: [1, 2, false] }],
	      ['bold', 'italic', 'underline'],
	      ['image', 'code-block']
	    ]
	  },
	  placeholder: 'Compose an epic...',
	  theme: 'snow'  // or 'bubble'
	});

// Validating input fields

getEmailToInput = document.getElementById('m-to');

getEmailToInput.addEventListener('input', function() {

getEmailToInputValue = this.value;

if (getEmailToInputValue == "") {
	      $_getValidationField[0].innerHTML = 'Email Required';
	      $_getValidationField[0].style.display = 'block';
	    } else if((emailReg.test(getEmailToInputValue) == false)) {
	      $_getValidationField[0].innerHTML = 'Invalid Email';
	      $_getValidationField[0].style.display = 'block';
	    } else {
	      $_getValidationField[0].style.display = 'none';
	    }
	})

getCCEmailInput = document.getElementById('m-cc');
	getCCEmailInput.addEventListener('input', function() {

getCCEmailInputValue = this.value;

if (!getCCEmailInputValue == "") {
	       if((emailReg.test(getCCEmailInputValue) == false)) {
		      $_getValidationField[1].innerHTML = 'Invalid Email';
		      $_getValidationField[1].style.display = 'block';
		    } else {
		      	$_getValidationField[1].style.display = 'none';
		    }
	    } else {
	      $_getValidationField[1].style.display = 'none';
	    }

})

getSubjectInput = document.getElementById('m-subject');

getSubjectInput.addEventListener('input', function() {

getSubjectInput = this.value;

if (getSubjectInput == "") {
	    $_getValidationField[2].innerHTML = 'Subject Required';
	    $_getValidationField[2].style.display = 'block';
	  } else {
	    $_getValidationField[2].style.display = 'none';
	  }

})

$('#composeMailModal').on('hidden.bs.modal', function (e) {
	    
	  	$(this)
	    .find("input,textarea")
	       .val('')
	       .end();

quill.deleteText(0, 2000);

for (var i = 0; i < $_getValidationField.length; i++) {
	      e.preventDefault();
	      $_getValidationField[i].style.display = 'none';
	    }
	})

/*
		=========================
			Tab Functionality
		=========================
	*/
	var $listbtns = $('.list-actions').click(function() {
		$(this).parents('.mail-box-container').find('.mailbox-inbox > .content-box').css({
			width: '0',
			left: 'auto',
			right: '-46px'
		});
		$('.content-box .collapse').collapse('hide');
		var getActionCenterDivElement = $(this).parents('.mail-box-container').find('.action-center');
	  	if (this.id == 'mailInbox') {
			var $el = $('.' + this.id).show();
			getActionCenterDivElement.removeClass('tab-trash-active');
			$('#ct > div').not($el).hide();
	  	} else if (this.id == 'personal') {
	  		$el = '.' + $(this).attr('id');
	  		$elShow = $($el).show();
	  		getActionCenterDivElement.removeClass('tab-trash-active');
		    $('#ct > div .mail-item-heading'+$el).parents('.mail-item').show();
		    $('#ct > div .mail-item-heading').not($el).parents('.mail-item').hide();
	  	} else if (this.id == 'work') {
		    $el = '.' + $(this).attr('id');
	  		$elShow = $($el).show();
	  		getActionCenterDivElement.removeClass('tab-trash-active');
		    $('#ct > div .mail-item-heading'+$el).parents('.mail-item').show();
		    $('#ct > div .mail-item-heading').not($el).parents('.mail-item').hide();
	  	} else if (this.id == 'social') {
		    $el = '.' + $(this).attr('id');
	  		$elShow = $($el).show();
	  		getActionCenterDivElement.removeClass('tab-trash-active');
		    $('#ct > div .mail-item-heading'+$el).parents('.mail-item').show();
		    $('#ct > div .mail-item-heading').not($el).parents('.mail-item').hide();
	  	} else if (this.id == 'private') {
		    $el = '.' + $(this).attr('id');
	  		$elShow = $($el).show();
	  		getActionCenterDivElement.removeClass('tab-trash-active');
		    $('#ct > div .mail-item-heading'+$el).parents('.mail-item').show();
		    $('#ct > div .mail-item-heading').not($el).parents('.mail-item').hide();
	  		getActionCenterDivElement.removeClass('tab-trash-active');
	  	} else if (this.id == 'trashed') {
	  		var $el = $('.' + this.id).show();
	  		getActionCenterDivElement.addClass('tab-trash-active');
			$('#ct > div').not($el).hide();
	  	} else {
	    	var $el = $('.' + this.id).show();
	    	getActionCenterDivElement.removeClass('tab-trash-active');
	    	$('#ct > div').not($el).hide();
	  	}
	  	$listbtns.removeClass('active');
	  	$(this).addClass('active');
	})

setTimeout(function() {
        $(".list-actions#mailInbox").trigger('click');
    },10);

// Mark As Important
	$(".action-important").on("click", function() {
		var notificationText = '';
		var getCheckedItemlength = $(".inbox-chkbox:checked").length;

if ($(".inbox-chkbox:checked").parents('.mail-item').hasClass('important')) {
			var notificationText = getCheckedItemlength < 2 ? getCheckedItemlength + ' Mail removed from Important' : getCheckedItemlength + ' Mails removed from Important';
		} else {
			var notificationText = getCheckedItemlength < 2 ? getCheckedItemlength + ' Mail Added to Important' : getCheckedItemlength + ' Mails Added to Important';
		}

$(".inbox-chkbox:checked").parents('.mail-item').toggleClass('important');
 		$(".inbox-chkbox:checked").prop('checked',false);
 		$("#inboxAll:checked").prop('checked',false);
 		$(".list-actions#important").trigger('click');
		Snackbar.show({
	        text: notificationText,
	        width: 'auto',
	        pos: 'top-center',
	        actionTextColor: '#bfc9d4',
	        backgroundColor: '#515365'
	    });
	});

// Mark as Span
	$(".action-spam").on("click", function() {
		var inboxCheckboxParents = $(".inbox-chkbox:checked").parents('.mail-item');
		var mailItemClass = inboxCheckboxParents.attr('class').split(' ')[1];
		var mailItemClassRemoveClass = inboxCheckboxParents.toggleClass('mailInbox');

var notificationText = '';
		var getCheckedItemlength = $(".inbox-chkbox:checked").length;

if ($(".inbox-chkbox:checked").parents('.mail-item').hasClass('spam')) {
			var notificationText = getCheckedItemlength < 2 ? getCheckedItemlength + ' Mail removed from Spam' : getCheckedItemlength + ' Mails removed from Spam';
		} else {
			var notificationText = getCheckedItemlength < 2 ? getCheckedItemlength + ' Mail Added to Spam' : getCheckedItemlength + ' Mails Added to Spam';
		}
	  	inboxCheckboxParents.toggleClass('spam');
 		$(".inbox-chkbox:checked").prop('checked',false);
 		$("#inboxAll:checked").prop('checked',false);
 		$(".list-actions#spam").trigger('click');

Snackbar.show({
	        text: notificationText,
	        width: 'auto',
	        pos: 'top-center',
	        actionTextColor: '#bfc9d4',
	        backgroundColor: '#515365'
	    });
	});

// Mark as read
	$(".action-mark_as_read").on("click", function() {
		var inboxCheckboxParents = $(".inbox-chkbox:checked").parents('.mail-item');

var notificationText = '';
		var getCheckedItemlength = $(".inbox-chkbox:checked").length;
		var notificationText = getCheckedItemlength < 2 ? getCheckedItemlength + ' Mail marked as Read' : getCheckedItemlength + ' Mails marked as Read';

inboxCheckboxParents.removeAttr('id');
		dynamicBadgeNotification('mailInbox');
 		$("#inboxAll:checked").prop('checked',false);
 		$(".inbox-chkbox:checked").prop('checked',false);

Snackbar.show({
	        text: notificationText,
	        width: 'auto',
	        pos: 'top-center',
	        actionTextColor: '#bfc9d4',
	        backgroundColor: '#515365'
	    });
	})

// Mark as Unread
	$(".action-mark_as_unRead").on("click", function() {
		var inboxCheckboxParents = $(".inbox-chkbox:checked").parents('.mail-item');
		var getMailTitle = inboxCheckboxParents.find('.mail-title').attr('data-mailtitle');
		var randomAlphaNumeric = randomString(10, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ');

var notificationText = '';
		var getCheckedItemlength = $(".inbox-chkbox:checked").length;
		var notificationText = getCheckedItemlength < 2 ? getCheckedItemlength + ' Mail marked as UnRead' : getCheckedItemlength + ' Mails marked as UnRead';

inboxCheckboxParents.attr('id', 'unread-'+getMailTitle.replace(/\s+/g, '-').toLowerCase()+randomAlphaNumeric);
		dynamicBadgeNotification('mailInbox');
 		$("#inboxAll:checked").prop('checked',false);
 		$(".inbox-chkbox:checked").prop('checked',false);

Snackbar.show({
	        text: notificationText,
	        width: 'auto',
	        pos: 'top-center',
	        actionTextColor: '#bfc9d4',
	        backgroundColor: '#515365'
	    });

})

// Delete a mail
	$(".action-delete").on("click", function() {
		var inboxCheckboxParents = $(".inbox-chkbox:checked").parents('.mail-item');
		var inboxMailItemClass = inboxCheckboxParents.attr('class');
        var getFirstClass = inboxMailItemClass.split(' ')[1];
        var getSecondClass = inboxMailItemClass.split(' ')[2];
        var getThirdClass = inboxMailItemClass.split(' ')[3];
        var getFourthClass = inboxMailItemClass.split(' ')[4];
        var getFifthClass = inboxMailItemClass.split(' ')[5];

var notificationText = '';
		var getCheckedItemlength = $(".inbox-chkbox:checked").length;

var notificationText = getCheckedItemlength < 2 ? getCheckedItemlength + ' Mail Deleted' : getCheckedItemlength + ' Mails Deleted';

if (getFirstClass === 'mailInbox' || getFirstClass === 'sentmail' || getFirstClass === 'draft' || getFirstClass === 'spam') {
          inboxCheckboxParents.removeClass(getFirstClass);
        }
        if (getSecondClass === 'mailInbox' || getSecondClass === 'important') {
          inboxCheckboxParents.removeClass(getSecondClass);
        }
	  	inboxCheckboxParents.addClass('trashed');
 		$(".inbox-chkbox:checked").prop('checked',false);
 		$("#inboxAll:checked").prop('checked',false);
 		$(".list-actions#trashed").trigger('click');

Snackbar.show({
	        text: notificationText,
	        width: 'auto',
	        pos: 'top-center',
	        actionTextColor: '#bfc9d4',
	        backgroundColor: '#515365'
	    });
	});

// Revive Mail from Tash
	$(".revive-mail").on("click", function() {
		var inboxCheckboxParents = $(".inbox-chkbox:checked").parents('.mail-item');
		var inboxMailItemClass = inboxCheckboxParents.attr('class');
		var getFirstClass = inboxMailItemClass.split(' ')[1];

var notificationText = '';
		var getCheckedItemlength = $(".inbox-chkbox:checked").length;
		var notificationText = getCheckedItemlength < 2 ? getCheckedItemlength + ' Mail restored' : getCheckedItemlength + ' Mails restored';

inboxCheckboxParents.removeClass(getFirstClass);
		inboxCheckboxParents.addClass('mailInbox');
 		$(".inbox-chkbox:checked").prop('checked',false);
 		$("#inboxAll:checked").prop('checked',false);
 		$(".list-actions#mailInbox").trigger('click');

Snackbar.show({
	        text: notificationText,
	        width: 'auto',
	        pos: 'top-center',
	        actionTextColor: '#bfc9d4',
	        backgroundColor: '#515365'
	    });
	})

// Permanently Delete Mail
	$(".permanent-delete").on("click", function() {
		var inboxCheckboxParents = $(".inbox-chkbox:checked").parents('.mail-item');

var notificationText = '';
		var getCheckedItemlength = $(".inbox-chkbox:checked").length;
		var notificationText = getCheckedItemlength < 2 ? getCheckedItemlength + ' Mail Permanently Deleted' : getCheckedItemlength + ' Mails Permanently Deleted';

if (inboxCheckboxParents.hasClass('trashed')) {
			inboxCheckboxParents.remove();
		}
 		$("#inboxAll:checked").prop('checked',false);

Snackbar.show({
	        text: notificationText,
	        width: 'auto',
	        pos: 'top-center',
	        actionTextColor: '#bfc9d4',
	        backgroundColor: '#515365'
	    });
	})

// Mark mail Priority/Groups as [ Personal, Work, Social, Private ]
	$(".label-group-item").on("click", function() {
		var getLabelColor = $(this).attr('class').split(' ')[1];
		var splitLabelColor = getLabelColor.split('-')[1];

var notificationText = '';
		var getCheckedItemlength = $(".inbox-chkbox:checked").length;

if ($(".inbox-chkbox:checked").parents('.mail-item-heading').hasClass(splitLabelColor)) {
			var notificationText = getCheckedItemlength < 2 ? getCheckedItemlength + ' Mail removed from '+ splitLabelColor.toUpperCase() +' Group' : getCheckedItemlength + ' Mails removed from '+ splitLabelColor.toUpperCase() +' Group';
		} else {
			var notificationText = getCheckedItemlength < 2 ? getCheckedItemlength + ' Mail Grouped as ' + splitLabelColor.toUpperCase() : getCheckedItemlength + ' Mails Grouped as ' + splitLabelColor.toUpperCase();
		}

$(".inbox-chkbox:checked").parents('.mail-item-heading').toggleClass(splitLabelColor);
 		$(".inbox-chkbox:checked").prop('checked',false);
 		$("#inboxAll:checked").prop('checked',false);

Snackbar.show({
	        text: notificationText,
	        width: 'auto',
	        pos: 'top-center',
	        actionTextColor: '#bfc9d4',
	        backgroundColor: '#515365'
	    });
	});

/*
		fn. $_sendMail ==> Trigger when clicked on Send Mail Button in Modal.
	*/
	function $_sendMail(getDraftTragetID) {
		$("#btn-send").off('click').on('click', function(event) {
			event.preventDefault();
			/* Act on the event */
			draftTragetID = getDraftTragetID;

var $_mailFrom = document.getElementById('m-form').value;
		  	var $_mailTo = document.getElementById('m-to').value;

var $_mailCC = document.getElementById('m-cc').value;
		  	var $_mailAttachment = document.getElementById('mail_File_attachment');
		  	var $_mailSubject = document.getElementById('m-subject').value;
		  	var $_mailDescriptionText = quill.getText();
		  	var $_mailDescriptionInnerHTML = quill.root.innerHTML;

var delta = quill.getContents();
		  	var $_textDelta = JSON.stringify(delta);

var $outerAttachmentHTML = '';
		  	var $innerAttachmentHTML = '';
		  	var getSVG = '';
		  	if ($_mailAttachment.files.length >= 1) {
				for (var i = 0; i < $_mailAttachment.files.length; ++i) {
				  	$outerAttachmentHTML += '<span class="">'+ $_mailAttachment.files.item(i).name +'</span>';

// Dectecting the format/type of the uploaded file for appling the icon/svg accordingly 
					if ($_mailAttachment.files.item(i).type.split('/')[0] === 'image') {
						getSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-image"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>';
					} else if ($_mailAttachment.files.item(i).type.split('/')[0] === 'application') {
						if ($_mailAttachment.files.item(i).type.split('/')[1] === 'zip') {
							getSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-package"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>';
						} else if ($_mailAttachment.files.item(i).type.split('/')[1]  === 'vnd.openxmlformats-officedocument.spreadsheetml.sheet' || $_mailAttachment.files.item(i).type.split('/')[1]  === 'vnd.openxmlformats-officedocument.wordprocessingml.document' ) {
							getSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>';
						} else  {
							getSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-folder"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>';
						}
					} else if ($_mailAttachment.files.item(i).type.split('/')[0] === 'video') {
						getSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-video"><polygon points="23 7 16 12 23 17 23 7"></polygon><rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect></svg>';
					} else {
						getSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-folder"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>';
					}

$innerAttachmentHTML += '<div class="attachment file"> <div class="media"> '+ getSVG +' <div class="media-body"> <p class="file-name">'+ $_mailAttachment.files.item(i).name +'</p> <p class="file-size">'+ formatBytes($_mailAttachment.files.item(i).size, 2) +'</p> </div> </div> </div>';
				}
		  	}

var outerConditionHTML = $_mailAttachment.files.length >= 1 ? '<div class="attachments">' + $outerAttachmentHTML + '</div>' : "";

var innerConditionHTML = $_mailAttachment.files.length >= 1 ? '<div class="attachments">' + $innerAttachmentHTML + '</div>' : "";

var attachmentIcon = $_mailAttachment.files.length >= 1 ? '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-paperclip attachment-indicator"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg>' : "";

var randomAlphaNumeric = randomString(10, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ');

$html = '<div class="mail-item sentmail">' +
                        '<div class="animated animatedFadeInUp fadeInUp" id="sfdsf">' +
                            '<div class="mb-0">' +
                                '<div class="mail-item-heading collapsed"  data-toggle="collapse" role="navigation" data-target="#'+randomAlphaNumeric+'" aria-expanded="false">' +
                                    '<div class="mail-item-inner">' +

'<div class="d-flex">' +
                                            '<div class="n-chk text-center">' +
                                                '<label class="new-control new-checkbox checkbox-primary">' +
                                                  '<input type="checkbox" class="new-control-input inbox-chkbox">' +
                                                  '<span class="new-control-indicator"></span>' +
                                                '</label>' +
                                            '</div>' +
                                            '<div class="f-body" data-mailFrom="'+$_mailFrom+'" data-mailTo="'+$_mailTo+'" data-mailCC="'+$_mailCC+'" >' +
                                                '<div class="meta-mail-time">' +
                                                    '<p class="user-email" data-mailTo="'+$_mailTo+'">'+$_mailTo+'</p>' +
                                                '</div>' +
                                                '<div class="meta-title-tag">' +
                                                    '<p class="mail-content-excerpt" data-mailDescription="'+$_mailDescriptionText+'">'+attachmentIcon+'<span class="mail-title" data-mailTitle="'+$_mailSubject+'">'+$_mailSubject+' - </span>'+$_mailDescriptionText+'</p>' +
                                                    '<div class="tags">' +
                                                        '<span class="g-dot-primary"></span>' +
                                                        '<span class="g-dot-warning"></span>' +
                                                        '<span class="g-dot-success"></span>' +
                                                        '<span class="g-dot-danger"></span>' +
                                                    '</div>' +
                                                    '<p class="meta-time align-self-center">'+formatAMPM(new Date)+'</p>' +
                                                '</div>' +
                                            '</div>' +
                                        '</div>' +
                                    '</div>' +
                                    outerConditionHTML+
                                '</div>' +
                            '</div>' +
                        '</div>' +
                    '</div>';

$html2 = '<div id="'+randomAlphaNumeric+'" class="collapse" aria-labelledby="'+randomAlphaNumeric+'" data-parent="#mailbox-inbox">'+
		                '<div class="mail-content-container sentmail" data-mailFrom="'+$_mailFrom+'" data-mailTo="'+$_mailTo+'" data-mailCC="'+$_mailCC+'" >'+
		                    '<div class="d-flex justify-content-between mb-3">'+
		                    	'<div class="d-flex user-info">'+
	                                '<div class="f-body">'+
	                                    '<div class="meta-mail-time">'+
	                                        '<div class="">'+
                                                '<p class="user-email" data-mailto="'+$_mailTo+'"><span>To - </span>'+$_mailTo+'</p>, '+
                                                '<p class="user-cc-mail" data-mailcc="'+$_mailCC+'"><span>CC - </span>'+$_mailCC+'</p>'+
                                            '</div>'+
	                                        '<p class="mail-content-meta-date">'+today+' -</p>'+
	                                        '<p class="meta-time align-self-center">'+formatAMPM(new Date)+'</p>'+
	                                    '</div>'+
	                               '</div>'+
	                            '</div>'+
	                            '<div class="action-btns">'+
	                                '<a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="" data-original-title="Reply">'+
	                                    '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-corner-up-left reply"><polyline points="9 14 4 9 9 4"></polyline><path d="M20 20v-7a4 4 0 0 0-4-4H4"></path></svg>'+
	                                '</a>'+
	                                '<a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="" data-original-title="Forward">'+
	                                    '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-corner-up-right forward"><polyline points="15 14 20 9 15 4"></polyline><path d="M4 20v-7a4 4 0 0 1 4-4h12"></path></svg>'+
	                                '</a>'+
	                            '</div>'+
	                        '</div>'+

"<p class='mail-content' data-mailTitle='"+$_mailSubject+"' data-mailDescription='"+$_textDelta+"'>"+$_mailDescriptionInnerHTML+"</p>"+

'<p>Best Regards,</p>'+
		                    '<p>Info</p>'+
		                    innerConditionHTML +
		                '</div>'+
		            '</div>';

$("#ct").prepend($html);
		    $(".content-box > .msg-close").after($html2);
		    $('#composeMailModal').modal('hide');
		    $(".list-actions#sentmail").trigger('click');
		    swal({
		        title: 'Mail Sent Successfully',
		        type: 'success',
		        padding: '2em'
		    })
		    $_GET_mailItem_Reply();
			$_GET_mailItem_Forward();
			contentBoxPosition();
			stopPropagations();
			mailInboxScroll()
	        if (draftTragetID != "") {
	        	$('[data-target="'+draftTragetID+'"]').parents('.mail-item').remove();
	        	dynamicBadgeNotification('draftmail');
	        }
		});
	}

/*
		Button Save ==> Trigger when clicked on Save Button in Modal.
	*/
	$("#btn-save").on('click', function(event) {
		event.preventDefault();
		/* Act on the event */

var $_mailFrom = document.getElementById('m-form').value;
	  	var $_mailTo = document.getElementById('m-to').value;
	  	var $_mailCC = document.getElementById('m-cc').value;
	  	var $_mailAttachment = document.getElementById('mail_File_attachment');
	  	var $_mailSubject = document.getElementById('m-subject').value;
	  	var $_mailDescription = quill.getText();

var delta = quill.getContents();
	  	var $_textDelta = JSON.stringify(delta);

$outerAttachmentHTML = '';
	  	if ($_mailAttachment.files.length >= 1) {
			for (var i = 0; i < $_mailAttachment.files.length; ++i) {
			  $outerAttachmentHTML += '<span class="">'+ $_mailAttachment.files.item(i).name +'</span>'
			}
	  	}

var outerConditionHTML = $_mailAttachment.files.length >= 1 ? '<div class="attachments">' + $outerAttachmentHTML + '</div>' : "";

var randomAlphaNumeric = randomString(10, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ');

$html = '<div class="mail-item draft">' +
                        '<div class="animated animatedFadeInUp fadeInUp" id="sfdsf">' +
                            '<div class="mb-0">' +
                                '<div class="mail-item-heading collapsed"  data-toggle="collapse" role="navigation" data-target="#'+randomAlphaNumeric+'" aria-expanded="false">' +
                                    '<div class="mail-item-inner">' +

'<div class="d-flex">' +
                                            '<div class="n-chk text-center">' +
                                                '<label class="new-control new-checkbox checkbox-primary">' +
                                                  '<input type="checkbox" class="new-control-input inbox-chkbox">' +
                                                  '<span class="new-control-indicator"></span>' +
                                                '</label>' +
                                            '</div>' +
                                            '<div class="f-body" data-mailFrom="'+$_mailFrom+'" data-mailTo="'+$_mailTo+'" data-mailCC="'+$_mailCC+'" >' +
                                                '<div class="meta-mail-time">' +
                                                    '<p class="user-email" data-mailTo="'+$_mailTo+'">'+$_mailTo+'</p>' +
                                                '</div>' +
                                                '<div class="meta-title-tag">' +
                                                    "<p class='mail-content-excerpt' data-mailDescription='"+$_textDelta+"'><span class='mail-title' data-mailTitle='"+$_mailSubject+"'>Draft: "+$_mailSubject+" - </span>"+$_mailDescription+"</p>" +
                                                    '<div class="tags">' +
                                                        '<span class="g-dot-primary"></span>' +
                                                        '<span class="g-dot-warning"></span>' +
                                                        '<span class="g-dot-success"></span>' +
                                                        '<span class="g-dot-danger"></span>' +
                                                    '</div>' +
                                                    '<p class="meta-time align-self-center">'+formatAMPM(new Date)+'</p>' +
                                                '</div>' +
                                            '</div>' +
                                        '</div>' +
                                    '</div>' +
                                    outerConditionHTML+
                                '</div>' +
                            '</div>' +
                        '</div>' +
                    '</div>';

$("#ct").prepend($html);
	    $('#composeMailModal').modal('hide');
	    $(".list-actions#draft").trigger('click');
	    swal({
	        title: 'Successfully Saved to Draft',
	        type: 'success',
	        padding: '2em'
	    })
	    $_GET_mailItem_Draft();
		contentBoxPosition();
		stopPropagations();
		dynamicBadgeNotification('draftmail');
	});

/*
		Button Send Reply ==> Trigger when clicked on SEND Button in REPLY Modal.
	*/
	$("#btn-reply").on('click', function(event) {
		event.preventDefault();
		/* Act on the event */

var delta = quill.getContents();
	  	var $_textDelta = JSON.stringify(delta);

var $outerAttachmentHTML = '';
	  	var $innerAttachmentHTML = '';
	  	var getSVG = '';
	  	if ($_mailAttachment.files.length >= 1) {
			for (var i = 0; i < $_mailAttachment.files.length; ++i) {
			  	$outerAttachmentHTML += '<span class="">'+ $_mailAttachment.files.item(i).name +'</span>'

// Dectecting the format/type of the uploaded file for appling the icon/svg accordingly 
				if ($_mailAttachment.files.item(i).type.split('/')[0] === 'image') {
					getSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-image"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>';
				} else if ($_mailAttachment.files.item(i).type.split('/')[0] === 'application') {
					if ($_mailAttachment.files.item(i).type.split('/')[1] === 'zip') {
						getSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-package"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>';
					} else if ($_mailAttachment.files.item(i).type.split('/')[1]  === 'vnd.openxmlformats-officedocument.spreadsheetml.sheet' || $_mailAttachment.files.item(i).type.split('/')[1]  === 'vnd.openxmlformats-officedocument.wordprocessingml.document' ) {
						getSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>';
					} else  {
						getSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-folder"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>';
					}
				} else if ($_mailAttachment.files.item(i).type.split('/')[0] === 'video') {
					getSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-video"><polygon points="23 7 16 12 23 17 23 7"></polygon><rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect></svg>';
				} else {
					getSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-folder"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>';
				}

var outerConditionHTML = $_mailAttachment.files.length >= 1 ? '<div class="attachments">' + $outerAttachmentHTML + '</div>' : "";

var innerConditionHTML = $_mailAttachment.files.length >= 1 ? '<div class="attachments">' + $innerAttachmentHTML + '</div>' : "";

var randomAlphaNumeric = randomString(10, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ');

$html = '<div class="mail-item sentmail">' +
            '<div class="animated animatedFadeInUp fadeInUp" id="sfdsf">' +
                '<div class="mb-0">' +
                    '<div class="mail-item-heading collapsed"  data-toggle="collapse" role="navigation" data-target="#'+randomAlphaNumeric+'" aria-expanded="false">' +
                        '<div class="mail-item-inner">' +

'<div class="d-flex">' +
                                '<div class="n-chk text-center">' +
                                    '<label class="new-control new-checkbox checkbox-primary">' +
                                      '<input type="checkbox" class="new-control-input inbox-chkbox">' +
                                      '<span class="new-control-indicator"></span>' +
                                    '</label>' +
                                '</div>' +
                                '<div class="f-body" data-mailFrom="'+$_mailFrom+'" data-mailTo="'+$_mailTo+'" data-mailCC="'+$_mailCC+'" >' +
                                    '<div class="meta-mail-time">' +
                                        '<p class="user-email" data-mailTo="'+$_mailTo+'">'+$_mailTo+'</p>' +
                                    '</div>' +
                                    '<div class="meta-title-tag">' +
                                        '<p class="mail-content-excerpt" data-mailDescription="'+$_mailDescriptionText+'"><span class="mail-title" data-mailTitle="'+$_mailSubject+'">'+$_mailSubject+' - </span>'+$_mailDescriptionText+'</p>' +
                                        '<div class="tags">' +
                                            '<span class="g-dot-primary"></span>' +
                                            '<span class="g-dot-warning"></span>' +
                                            '<span class="g-dot-success"></span>' +
                                            '<span class="g-dot-danger"></span>' +
                                        '</div>' +
                                        '<p class="meta-time align-self-center">'+formatAMPM(new Date)+'</p>' +
                                    '</div>' +
                                '</div>' +
                            '</div>' +
                        '</div>' +
                        outerConditionHTML+
                    '</div>' +
                '</div>' +
            '</div>' +
        '</div>';

$html2 = '<div id="'+randomAlphaNumeric+'" class="collapse" aria-labelledby="sdfsdaf" data-parent="#mailbox-inbox">'+
	                '<div class="mail-content-container sentmail" data-mailFrom="'+$_mailFrom+'" data-mailTo="'+$_mailTo+'" data-mailCC="'+$_mailCC+'" >'+

'<div class="d-flex justify-content-between mb-5">'+
		                    '<div class="d-flex user-info">'+
                                '<div class="f-body">'+
                                    '<div class="meta-mail-time">'+
                                    '<div class="">'+
                                            '<p class="user-email" data-mailto="'+$_mailTo+'"><span>To - </span>'+$_mailTo+'</p>, '+
                                            '<p class="user-cc-mail" data-mailcc="'+$_mailCC+'"><span>CC - </span>'+$_mailCC+'</p>'+
                                        '</div>'+
                                        '<p class="mail-content-meta-date">'+today+' -</p>'+
                                        '<p class="meta-time align-self-center">'+formatAMPM(new Date)+'</p>'+
                                    '</div>'+
                               '</div>'+
                            '</div>'+
                            '<div class="action-btns">'+
                                '<a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="" data-original-title="Reply">'+
                                    '<i class="flaticon-reply reply"></i>'+
                                '</a>'+
                                '<a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="" data-original-title="Forward">'+
                                    '<i class="flaticon-forward-arrow forward"></i>'+
                                '</a>'+
                            '</div>'+
                        '</div>'+

"<p class='mail-content' data-mailTitle='"+$_mailSubject+"' data-mailDescription='"+$_textDelta+"'>"+$_mailDescriptionInnerHTML+"</p>"+

'<p>Best Regards,</p>'+
	                    '<p>Info</p>'+
		                innerConditionHTML +
	                '</div>'+
	            '</div>';

/*
		Btn Reply Save ==> Trigger when clicked on SAVE Button in REPLY Modal.
	*/
	$("#btn-reply-save").on('click', function(event) {
		event.preventDefault();
		/* Act on the event */

var delta = quill.getContents();
	  	var $_textDelta = JSON.stringify(delta);

var outerConditionHTML = $_mailAttachment.files.length >= 1 ? '<div class="attachments">' + $outerAttachmentHTML + '</div>' : "";

var randomAlphaNumeric = randomString(10, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ');

'<div class="d-flex">' +
                                            '<div class="n-chk text-center">' +
                                                '<label class="new-control new-checkbox checkbox-primary">' +
                                                  '<input type="checkbox" class="new-control-input inbox-chkbox">' +
                                                  '<span class="new-control-indicator"></span>' +
                                                '</label>' +
                                            '</div>' +
                                            '<div class="f-body" data-mailFrom="'+$_mailFrom+'" data-mailTo="'+$_mailTo+'" data-mailCC="'+$_mailCC+'" >' +
                                                '<div class="meta-mail-time">' +
                                                    '<p class="user-email" data-mailTo="'+$_mailTo+'">'+$_mailTo+'</p>' +
                                                '</div>' +
                                                '<div class="meta-title-tag">' +
                                                    "<p class='mail-content-excerpt' data-mailDescription='"+$_textDelta+"'><span class='mail-title' data-mailTitle='"+$_mailSubject+"'>Draft: "+$_mailSubject+" - </span>"+$_mailDescription+"</p>" +
                                                    '<div class="tags">' +
                                                        '<span class="g-dot-primary"></span>' +
                                                        '<span class="g-dot-warning"></span>' +
                                                        '<span class="g-dot-success"></span>' +
                                                        '<span class="g-dot-danger"></span>' +
                                                    '</div>' +
                                                    '<p class="meta-time align-self-center">'+formatAMPM(new Date)+'</p>' +
                                                '</div>' +
                                            '</div>' +
                                        '</div>' +
                                    '</div>' +
                                    outerConditionHTML+
                                '</div>' +
                            '</div>' +
                        '</div>' +
                    '</div>';

/*
		Button Send FWD ==> Trigger when clicked on SEND Button in FWD Modal.
	*/
	$("#btn-fwd").on('click', function(event) {
		event.preventDefault();
		/* Act on the event */
	  	var $_mailFrom = document.getElementById('m-form').value;
	  	var $_mailTo = document.getElementById('m-to').value;
	  	var $_mailCC = document.getElementById('m-cc').value;
	  	var $_mailAttachment = document.getElementById('mail_File_attachment');
	  	var $_mailSubject = document.getElementById('m-subject').value;
	  	var $_mailDescriptionText = quill.getText();
	  	var $_mailDescriptionInnerHTML = quill.root.innerHTML;
	  	var delta = quill.getContents();
	  	var $_textDelta = JSON.stringify(delta);

var $outerAttachmentHTML = '';
	  	var $innerAttachmentHTML = '';
	  	var getSVG = '';
	  	if ($_mailAttachment.files.length >= 1) {
			for (var i = 0; i < $_mailAttachment.files.length; ++i) {
			  	$outerAttachmentHTML += '<span class="">'+ $_mailAttachment.files.item(i).name +'</span>'

// Dectecting the format/type of the uploaded file for appling the icon/svg accordingly 
				if ($_mailAttachment.files.item(i).type.split('/')[0] === 'image') {
					getSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-image"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>';
				} else if ($_mailAttachment.files.item(i).type.split('/')[0] === 'application') {
					if ($_mailAttachment.files.item(i).type.split('/')[1] === 'zip') {
						getSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-package"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>';
					} else if ($_mailAttachment.files.item(i).type.split('/')[1]  === 'vnd.openxmlformats-officedocument.spreadsheetml.sheet' || $_mailAttachment.files.item(i).type.split('/')[1]  === 'vnd.openxmlformats-officedocument.wordprocessingml.document' ) {
						getSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>';
					} else  {
						getSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-folder"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>';
					}
				} else if ($_mailAttachment.files.item(i).type.split('/')[0] === 'video') {
					getSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-video"><polygon points="23 7 16 12 23 17 23 7"></polygon><rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect></svg>';
				} else {
					getSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-folder"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>';
				}

var outerConditionHTML = $_mailAttachment.files.length >= 1 ? '<div class="attachments">' + $outerAttachmentHTML + '</div>' : "";

var innerConditionHTML = $_mailAttachment.files.length >= 1 ? '<div class="attachments">' + $innerAttachmentHTML + '</div>' : "";

var randomAlphaNumeric = randomString(10, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ');

'<div class="d-flex">' +
                                            '<div class="n-chk text-center">' +
                                                '<label class="new-control new-checkbox checkbox-primary">' +
                                                  '<input type="checkbox" class="new-control-input inbox-chkbox">' +
                                                  '<span class="new-control-indicator"></span>' +
                                                '</label>' +
                                            '</div>' +
                                            '<div class="f-body" data-mailFrom="'+$_mailFrom+'" data-mailTo="'+$_mailTo+'" data-mailCC="'+$_mailCC+'" >' +
                                                '<div class="meta-mail-time">' +
                                                    '<p class="user-email" data-mailTo="'+$_mailTo+'">'+$_mailTo+'</p>' +
                                                '</div>' +
                                                '<div class="meta-title-tag">' +
                                                    '<p class="mail-content-excerpt" data-mailDescription="'+$_mailDescriptionText+'"><span class="mail-title" data-mailTitle="'+$_mailSubject+'">'+$_mailSubject+' - </span>'+$_mailDescriptionText+'</p>' +
                                                    '<div class="tags">' +
                                                        '<span class="g-dot-primary"></span>' +
                                                        '<span class="g-dot-warning"></span>' +
                                                        '<span class="g-dot-success"></span>' +
                                                        '<span class="g-dot-danger"></span>' +
                                                    '</div>' +
                                                    '<p class="meta-time align-self-center">'+formatAMPM(new Date)+'</p>' +
                                                '</div>' +
                                            '</div>' +
                                        '</div>' +
                                    '</div>' +
                                    outerConditionHTML+
                                '</div>' +
                            '</div>' +
                        '</div>' +
                    '</div>';

'<div class="d-flex justify-content-between mb-5">'+

'<div class="d-flex user-info">'+
                                '<div class="f-body">'+
                                    '<div class="meta-mail-time">'+
                                    	'<div class="">'+
                                            '<p class="user-email" data-mailto="'+$_mailTo+'"><span>To - </span>'+$_mailTo+'</p>, '+
                                            '<p class="user-cc-mail" data-mailcc="'+$_mailCC+'"><span>CC - </span>'+$_mailCC+'</p>'+
                                        '</div>'+
                                        '<p class="mail-content-meta-date">'+today+' -</p>'+
                                        '<p class="meta-time align-self-center">'+formatAMPM(new Date)+'</p>'+
                                    '</div>'+
                               '</div>'+
                            '</div>'+

'<div class="action-btns">'+
                                '<a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="" data-original-title="Reply">'+
                                    '<i class="flaticon-reply reply"></i>'+
                                '</a>'+
                                '<a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="" data-original-title="Forward">'+
                                    '<i class="flaticon-forward-arrow forward"></i>'+
                                '</a>'+
                            '</div>'+
                        '</div>'+

"<p class='mail-content' data-mailTitle='"+$_mailSubject+"' data-mailDescription='"+$_textDelta+"'>"+$_mailDescriptionInnerHTML+"</p>"+

'<p>Best Regards,</p>'+
	                    '<p>Info</p>'+
	                    innerConditionHTML+
	                '</div>'+
	            '</div>';

/*
		Btn Fwd Save ==> Trigger when clicked on SAVE Button in FWD Modal.
	*/
	$("#btn-fwd-save").on('click', function(event) {
			event.preventDefault();
			/* Act on the event */
		  	var $_mailFrom = document.getElementById('m-form').value;
		  	var $_mailTo = document.getElementById('m-to').value;
		  	var $_mailCC = document.getElementById('m-cc').value;
		  	var $_mailAttachment = document.getElementById('mail_File_attachment');
		  	var $_mailSubject = document.getElementById('m-subject').value;
		  	var $_mailDescription = quill.getText();
		  	var delta = quill.getContents();
		  	var $_textDelta = JSON.stringify(delta);

$outerAttachmentHTML = '';
		  	if ($_mailAttachment.files.length >= 1) {
				for (var i = 0; i < $_mailAttachment.files.length; ++i) {
				  $outerAttachmentHTML += '<span class="">'+ $_mailAttachment.files.item(i).name +'</span>'
				}
		  	}

var outerConditionHTML = $_mailAttachment.files.length >= 1 ? '<div class="attachments">' + $outerAttachmentHTML + '</div>' : "";

var randomAlphaNumeric = randomString(10, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ');

'<div class="d-flex">' +
                                            '<div class="n-chk text-center">' +
                                                '<label class="new-control new-checkbox checkbox-primary">' +
                                                  '<input type="checkbox" class="new-control-input inbox-chkbox">' +
                                                  '<span class="new-control-indicator"></span>' +
                                                '</label>' +
                                            '</div>' +
                                            '<div class="f-body" data-mailFrom="'+$_mailFrom+'" data-mailTo="'+$_mailTo+'" data-mailCC="'+$_mailCC+'" >' +
                                                '<div class="meta-mail-time">' +
                                                    '<p class="user-email" data-mailTo="'+$_mailTo+'">'+$_mailTo+'</p>' +
                                                '</div>' +
                                                '<div class="meta-title-tag">' +
                                                    "<p class='mail-content-excerpt' data-mailDescription='"+$_textDelta+"'><span class='mail-title' data-mailTitle='"+$_mailSubject+"'>Draft: "+$_mailSubject+" - </span>"+$_mailDescription+"</p>" +
                                                    '<div class="tags">' +
                                                        '<span class="g-dot-primary"></span>' +
                                                        '<span class="g-dot-warning"></span>' +
                                                        '<span class="g-dot-success"></span>' +
                                                        '<span class="g-dot-danger"></span>' +
                                                    '</div>' +
                                                    '<p class="meta-time align-self-center">'+formatAMPM(new Date)+'</p>' +
                                                '</div>' +
                                            '</div>' +
                                        '</div>' +
                                    '</div>' +
                                    outerConditionHTML+
                                '</div>' +
                            '</div>' +
                        '</div>' +
                    '</div>';

$("#ct").prepend($html);
		    $('#composeMailModal').modal('hide');
		    $(".list-actions#draft").trigger('click');
		    swal({
		        title: 'Successfully Saved to Draft',
		        type: 'success',
		        padding: '2em'
		    })
		    $_GET_mailItem_Draft();
			contentBoxPosition();
			stopPropagations();
			dynamicBadgeNotification('draftmail');
	});

/*
		fn. $_GET_mailItem_Draft ==> Trigger when clicked on Draft Button in Modal.
	*/
	function $_GET_mailItem_Draft() {
		$(".mail-item.draft").off('click').on('click', function(event) {

$('#btn-send').show();
			$('#btn-reply').hide();
			$('#btn-fwd').hide();
			// Save And Reply Save
			$('#btn-save').show();
			$('#btn-reply-save').hide();
			$('#btn-fwd-save').hide();
			
		    var $_mailFrom =  $(this).find('.f-body').attr('data-mailFrom');
		    var $_mailTo =  $(this).find('.f-body').attr('data-mailTo');
		    var $_mailCC =  $(this).find('.f-body').attr('data-mailCC');
		    var $_mailSubject =  $(this).find('.mail-title').attr('data-mailtitle');
		    var $_mailDataTarget =  $(this).find('.mail-item-heading').attr('data-target');
		    $_sendMail($_mailDataTarget);
		    var $_mailDescription =  JSON.parse($(this).find('.mail-content-excerpt').attr('data-maildescription'));

$('#m-form').val($_mailFrom);
		    $('#m-to').val($_mailTo);
		    $('#m-cc').val($_mailCC);
		    $('#m-subject').val($_mailSubject);
		    quill.setContents($_mailDescription);
		    $('#composeMailModal').modal('show');
		})
	}

/*
		fn. $_GET_mailItem_Reply ==> Trigger when clicked on Reply Button inside Mail Content.
	*/
	function $_GET_mailItem_Reply() {
		$(".reply").on('click', function(event) {

// Send And Reply
			$('#btn-reply').show();
			$('#btn-send').hide();
			$('#btn-fwd').hide();

// Save And Reply Save
			$('#btn-reply-save').show();
			$('#btn-fwd-save').hide();
			$('#btn-save').hide();

var $_mailFrom =  $(this).parents('.mail-content-container').attr('data-mailFrom');
		    var $_mailTo =  $(this).parents('.mail-content-container').attr('data-mailTo');
		    var $_mailCC =  $(this).parents('.mail-content-container').attr('data-mailCC');
			var $_mailSubject = $(this).parents('.mail-content-container').find('.mail-content').attr('data-mailtitle');
		    var $_mailDescription =  JSON.parse($(this).parents('.mail-content-container').find('.mail-content').attr('data-maildescription'));

$('#m-form').val($_mailFrom);
		    $('#m-to').val($_mailTo);
		    $('#m-cc').val($_mailCC);
		    $('#m-subject').val('Re: ' + $_mailSubject);
			quill.setContents($_mailDescription);
			$('#composeMailModal').modal('show');
		})
	}

/*
		fn. $_GET_mailItem_Forward ==> Trigger when clicked on Forward Button inside Mail Content.
	*/
	function $_GET_mailItem_Forward() {
		$(".forward").on('click', function(event) {

$('#btn-fwd').show();
			$('#btn-reply').hide();
			$('#btn-send').hide();

$('#btn-fwd-save').show();
			$('#btn-reply-save').hide();
			$('#btn-save').hide();

$('#m-form').val($_mailFrom);
		    $('#m-to').val($_mailTo);
		    $('#m-cc').val($_mailCC);
		    $('#m-subject').val('Fwd: ' + $_mailSubject);
			quill.setContents($_mailDescription);
			$('#composeMailModal').modal('show');
		})
	}

$_sendMail();
	$_GET_mailItem_Draft();
	$_GET_mailItem_Reply();
	$_GET_mailItem_Forward();
	contentBoxPosition();
	stopPropagations();

$('.tab-title .nav-pills a.nav-link').on('click', function(event) {
	  $(this).parents('.mail-box-container').find('.tab-title').removeClass('mail-menu-show')
	  $(this).parents('.mail-box-container').find('.mail-overlay').removeClass('mail-overlay-show')
	})
	
});