@php
echo "<pre>";
	//print_r($FirstMail);
	//print_r($FieldsList);
	// print_r($EmailAttachments);
echo "</pre>";
@endphp
<style>
	.tagify__input
	{
		color: #000 !important;
	}

	.form-groupC
	{
		margin:5px 0px;
	}
	.displayHide
	{
		display: none;
	}
</style>

<!---------------------tab start here--------------------------->
@php

if (array_key_exists('EmailId', $FirstMail)) {
    $FirstMailId=$FirstMail['EmailId'];
}else{
	$FirstMailId = '';
}

if (array_key_exists('MailBoxId', $FirstMail)) {
    $mailboxId=$FirstMail['MailBoxId'];
}else{
	$mailboxId = '';
}

$RAEmailId = $FirstMail['EmailId'] ?? ' ';
$replyallsub = "RE : " . ($FirstMail['EmailSubject'] ?? 'No Subject');

@endphp
<ul class="nav nav-tabs  mb-3 mt-3" id="simpletab" role="tablist">
	<li class="nav-item">
		<a class="nav-link active" id="ViewtheMail" data-bs-toggle="tab" href="#viewConversation" role="tab" aria-controls="viewConversation" aria-selected="true" onclick="viewConversation()">View Conversation</a>
	</li>
	<li class="nav-item">
		<a class="nav-link" id="MailView" data-bs-toggle="tab" href="#View" role="tab" aria-controls="View" aria-selected="false" onclick="viewMailtab('{{$FirstMailId}}')">View Ticket</a>
	</li>
	<li class="nav-item">
		<!-- 		<a class="nav-link" id="MailCompose" data-bs-toggle="tab" href="#Compose" role="tab" aria-controls="Compose" aria-selected="false" onclick="getSignature();ChangeEmailContent(1,'{{$FirstMailId}}'); ">Compose</a> -->
		<a class="nav-link" id="MailCompose" data-bs-toggle="tab" href="#Compose" role="tab" aria-controls="Compose" aria-selected="false" onclick="viewMailtab();defaultreplyall('{{$RAEmailId}}', '{{$replyallsub}}');ChangeEmailContent('{{$GetDefaultThreadType}}','{{$FirstMailId}}')">Compose</a>
	</li>
</ul>

<div class="tab-content" id="simpletabContent">
	<div class="tab-pane fade" id="View" role="tabpanel" aria-labelledby="MailView">
		
		<!-------------------View mail starts------------------------->
		<div class="table-responsive">
			<input type="hidden" id="RowId" name="RowId" value="{{$RowId}}">
			<input type="hidden" id="thisModuleId" name="thisModuleId" value="{{$ModuleId}}">
			<input type="hidden" id="draftId" name="draftId" value="" placeholder="draftid">
			<input type="hidden" id="signatureAdded" name="signatureAdded" value="">

			@if(count($FirstMail))
			<table class="table table-bordered">
				<tr>
					<td>From Address</td>
					<td>{{$FirstMail['FromAddress']}}</td>
				</tr>
				<tr>
					<td>Sent To Address</td>
					<td>
						{{$FirstMail['MailBoxId']}}
						@php
						$SentToAddress=explode(",",$FirstMail['SentToAddress']);
						@endphp
						@foreach($SentToAddress as $SA)
						@if(trim($SA))
						,{{$SA}} 
						@endif
						@endforeach
					</td>
				</tr>

				<tr>
					<td>Cc Address</td>
					<td>
						@php
						$CcAddress=explode(",",$FirstMail['CcAddress']);
						@endphp
						@foreach($CcAddress as $CCA)
						@if(trim($CCA) && !in_array($CCA,$SentToAddress) && trim($CCA)!==$FirstMail['MailBoxId'])
						{{$CCA}}, 
						@endif
						@endforeach
					</td>
				</tr>

				<tr>
					<td>Sent On</td>
					<td>{{date('d/m/y h:i:s A',strtotime($FirstMail['SentDate'])) }}</td>
				</tr>
				<tr>
					<td colspan="2">Description</td>
				</tr>
				<tr>
					<td colspan="2">
						<textarea id="mailContentDisplay"> @php echo $EmailFullThread; @endphp </textarea>
						<script>
							CKEDITOR.replace('mailContentDisplay');
						</script>
					</td>
				</tr>

				<tr>
					<td>
						Attachments &nbsp;&nbsp;

						<span title="Load Email Attachments" >
							<svg style="cursor: pointer;color: #4361ee;" onclick="ViewAllAttachments('{{$RowId}}')" title="Load Email Attachments" 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-eye"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
							<span>
							</td>

							<td>
								<div id="viewAttachmentsDiv2"><buttton class="btn btn-primary" onclick="ViewAllAttachments('{{$RowId}}')">View Attachments</buttton></div>
								<div id="viewAttachmentsDiv"></div>
							</td>
						</tr>


					</table>
					@else
					No Mail!
					@endif

				</div>
				<!-------------------View mail Ends------------------------->	

			</div>
			<div class="tab-pane fade" id="Compose" role="tabpanel" aria-labelledby="MailCompose">
				<!----compose mail starts---------->
				<div class="table-responsive">
					@if(count($FirstMail))

					@php
					$EmailId=$FirstMail['EmailId'];
					@endphp

					<table class="table table-bordered">
						<tr>
							<td>Send Email From</td>
							<td>
								<select class="form-control customDropdown" name="FromAddress" id="FromAddress">
									@foreach($fromMailAddress as $fromAddress)

									@php
									$selected="";
									if($mailboxId==$fromAddress['FromAddress'])
									{
										$selected="selected";
									}
									@endphp

									<option value="{{$fromAddress['FromAddress']}}" {{$selected}}>{{$fromAddress['FromName']}}</option>
									@endforeach
								</select>
							</td>
						</tr>
						@php
							$EmailClientFlag=Auth::user()->EmailClientFlag;
							$ClientMailId=Auth::user()->email;
						@endphp
						@if($EmailClientFlag)
						<tr>
							<td>From Name</td>
							<td>
								<select class="form-control customDropdown" name="FromName" id="FromName">
									<option value="0">Default</option>
									<option value="1">{{$ClientMailId}}</option>
								</select>
							</td>
						</tr>
						@endif
						<tr>
							<td>
								<div class="form-check form-check-primary form-check-inline">
									<input class="form-check-input" type="radio" name="replyForward" id="replyForward" value="RE : {{$FirstMail['EmailSubject']}}" onchange="ReplyAll(this.value,'reply','{{$EmailId}}')" mailType="reply">
									<p class="form-check-label" for="form-check-radio-default">
										&nbsp;Reply
									</p>
								</div>
								&nbsp;&nbsp;&nbsp;
								<div class="form-check form-check-primary form-check-inline">
									<input class="form-check-input" type="radio" name="replyForward" id="replyForward" value="RE : {{$FirstMail['EmailSubject']}}"  onchange="ReplyAll(this.value,'replyAll','{{$EmailId}}')" mailType="replyAll" checked>
									<p class="form-check-label" for="form-check-radio-default">
										&nbsp;Reply All
									</p>
								</div>
								&nbsp;&nbsp;&nbsp;
								<div class="form-check form-check-primary form-check-inline">
									<!-- <input class="form-check-input" type="radio" name="replyForward" id="replyForward" value="FWD : {{$FirstMail['EmailSubject']}}" onchange="ChangeSubject(this.value,'forward')" mailType="forward"> -->
									<input class="form-check-input" type="radio" name="replyForward" id="replyForward" value="FWD : {{$FirstMail['EmailSubject']}}" onchange="ReplyAll(this.value,'forward','{{$EmailId}}')" mailType="forward">
									<p class="form-check-label" for="form-check-radio-default">
										&nbsp;Forward
									</p>
								</div>
								<input type="hidden" name="ReplyTypeSelection" id="ReplyTypeSelection" value="reply" />
							</td>
							<td>
								<b>Response With</b> &nbsp;&nbsp;&nbsp;
								<div class="form-check form-check-primary form-check-inline" id="ChangeEmailContent3Div">
									<input class="form-check-input" type="radio" name="ChangeEmailContent"  id="ChangeEmailContent3" onchange="ChangeEmailContent(3,'{{$EmailId}}')">
									<p class="form-check-label" for="form-check-radio-default">
										&nbsp;Complete Thread
									</p>
								</div>
								&nbsp;&nbsp;&nbsp;
								<div class="form-check form-check-primary form-check-inline" id="ChangeEmailContent1Div">
									<input class="form-check-input" type="radio" name="ChangeEmailContent" id="ChangeEmailContent1" onchange="ChangeEmailContent(1,'{{$EmailId}}')" checked>
									<p class="form-check-label" for="form-check-radio-default">
										&nbsp;Fresh Thread
									</p>
								</div>
								&nbsp;&nbsp;&nbsp;
								<div class="form-check form-check-primary form-check-inline" id="ChangeEmailContent2Div">
									<input class="form-check-input" type="radio" name="ChangeEmailContent" id="ChangeEmailContent2" onchange="ChangeEmailContent(2,'{{$EmailId}}')">
									<p class="form-check-label" for="form-check-radio-default">
										&nbsp;1<sup>st</sup> Email Thread
									</p>
								</div>
								&nbsp;&nbsp;&nbsp;
								<div class="form-check form-check-primary form-check-inline" id="ChangeEmailContent4Div">
									<input class="form-check-input" type="radio" name="ChangeEmailContent" id="ChangeEmailContent4" onchange="ChangeEmailContent(4,'{{$EmailId}}')">
									<p class="form-check-label" for="form-check-radio-default">
										&nbsp;Last Thread
									</p>
								</div>
							</td>
						</tr>

						<tr>
							<td> To </td> 
							<td>
								<span id="toLoader"></span>
								<input type="text" class="form-control" value="" id="toAdress" name="toAdress" value="{{$FirstMail['FromAddress']}}">
								<script>

									var typingTimer;                //timer identifier
var doneTypingInterval = 500;  //time in ms, 2 seconds for example

							// new Tagify(document.getElementById('toAdress'));
toAdress=document.getElementById('toAdress');

							// new Tagify(document.getElementById('ccAdress'));
toAdresstagify = new Tagify(toAdress, {
delimiters          : ",| ",        // add new tags when a comma or a space character is entered
whitelist           : ["React","Angular","TypeScript","Vue","Python","Wordpress","Svelte","PHP","Javascript","HTML","CSS","JSON","XML","Markdown","Go","C++","C#","Java","Docker","Perl","Ruby","Rust","NodeJS","SQL","SQLite","MonogDB","MYSQL","Swift","SCSS","SASS"],
transformTag        : transformTag,
backspace           : "edit",
placeholder         : "Type something",
dropdown : {
enabled: 2,            // show suggestion after 1 typed character
fuzzySearch: false,    // match only suggestions that starts with the typed characters
position: 'text',      // position suggestions list next to typed text
},
templates: {
	dropdownItemNoMatch: function(data) {

		clearTimeout(typingTimer);
		typingTimer = setTimeout(getNewSuggestions, doneTypingInterval,data.value,toAdresstagify)

		// getNewSuggestions(data.value,toAdresstagify);
		return `<div class='${this.settings.classNames.dropdownItem}' tabindex="0" role="option">
		No suggestion found for: <strong>${data.value}..</strong>
		</div>`


	},
},
});

$('#toAdress').val("{{$FirstMail['FromAddress']}}")
</script>	
</td>
</tr>

<tr>
	<td> CC </td> 
	<td>
		<span id="ccLoader"></span>

		<input type="text" class="form-control" value="" id="ccAdress" name="ccAdress">
		<script>

			ccAdress=document.getElementById('ccAdress');

							// new Tagify(document.getElementById('ccAdress'));
			ccAdresstagify = new Tagify(ccAdress, {
delimiters          : ",| ",        // add new tags when a comma or a space character is entered
transformTag        : transformTag,
backspace           : "edit",
placeholder         : "Type something",
dropdown : {
enabled: 2,            // show suggestion after 1 typed character
fuzzySearch: false,    // match only suggestions that starts with the typed characters
position: 'text',      // position suggestions list next to typed text
},
templates: {
	dropdownItemNoMatch: function(data) {

		clearTimeout(typingTimer);
		typingTimer = setTimeout(getNewSuggestions, doneTypingInterval,data.value,ccAdresstagify)

		// getNewSuggestions(data.value,ccAdresstagify);
		return `<div class='${this.settings.classNames.dropdownItem}' tabindex="0" role="option">
		No suggestion found for: <strong>${data.value}..</strong>
		</div>`


	},
},
});
</script>	
</td>
</tr>

<tr>
	<td> Subject </td> 
	<td>
		<input type="text" class="form-control"  id="mailSubject" name="mailSubject" value="RE : {{$FirstMail['EmailSubject']}}">
	</td>
</tr>

<tr>
	<td>Email Template</td>

	<td>
		<select class="form-control customDropdown" name="TemplateId" id="TemplateId" onchange="LoadEmailTemplate(this.value)">
			<option value="">--Select Template--</option>	
			@foreach($EmailTemplates as $TemplateId=>$TemplateName)
			<option value="{{$TemplateId}}">{{$TemplateName}}</option>	
			@endforeach
		</select>
	</td>
</tr>


<tr>
	<td>  Upload Attachments </td>

	<td>
		<input class="form-control file-upload-input" type="file" id="formFile" multiple="multiple" onchange="uploadAttachment()">
		<br>
		<div id="AttachmentsListView" style="max-width: 730px;overflow-x: scroll;scrollbar-width: thin;"></div>
	</td>
</tr>

<tr>
	<td colspan="2"> Your Reply </td> 
</tr>
<tr>
	<td colspan="2">
		<button class="btn btn-primary  mb-2 me-4 btn-sm blockBtn" id="SaveContentBtn" onclick="SaveContent()">Save Content as Draft</button>
		<button class="btn btn-primary  mb-2 me-4 btn-sm blockBtn" id="getContentBtn" onclick="GetContent()">Get Content from Draft</button>
		<br>
		<textarea id="mailContent"></textarea>
		<script>
			CKEDITOR.replace('mailContent');
		</script>
		<br>

	</td>

</tr>
</table>
@endif
</div>
<!----compose mail ends---------->

</div>
<div class="tab-pane fade show active" id="viewConversation" role="tabpanel" aria-labelledby="ViewtheMail">
	<script>
	//viewConversation();
	</script>
	<div class="table-responsive">
		<div id='EmailBodyNew'></div>
	</div>
</div>
</div>
<!---------------------tab ends here--------------------------->
<div id="DisplayingForm">
	<div class="col-md-12">
		DisplayingForm
		<input type="hidden" name="TicketRowId" id="TicketRowId" value="{{$RowId}}">
		<form id="TicketForm" name="TicketForm" class="row">
			@foreach($FieldsList as $FieldList)
			@php

			$ColumnName=$FieldList->ColumnName;
			//echo "-----<br>----------";
			$DemographyConfigId=$FieldList->DemographyConfigId;
			$DisplayType=$FieldList->DisplayType;
			$LabelValue=$FieldList->LabelValue;
			$RowId=$Record->$primaryKeyName;

			if($FieldList->ColumnName==$primaryKeyName)
			{
				continue;
			}
			$mandatoryValue=0;
			if(in_array($ColumnName,$mandatoryFields))
			{
				$mandatoryValue=1;
			}
			@endphp

			@switch($DisplayType)
			@case(1)
			<x-editviewnew.displaytype1 :demographyconfigId="$DemographyConfigId" :results="$Record" :rowid="$RowId" :moduleid="$ModuleId" :mandatory="$mandatoryValue" />
			@break
			@case(2)
			<x-editviewnew.displaytype2 :demographyconfigId="$DemographyConfigId" :results="$Record" :rowid="$RowId" :moduleid="$ModuleId" :mandatory="$mandatoryValue" />
			@break
			@case(3)
			<x-editviewnew.displaytype3 :demographyconfigId="$DemographyConfigId" :results="$Record" :rowid="$RowId" :moduleid="$ModuleId" :mandatory="$mandatoryValue" />
			@break
			@case(4)
			<x-editviewnew.displaytype4 :demographyconfigId="$DemographyConfigId" :results="$Record" :rowid="$RowId" :moduleid="$ModuleId" :mandatory="$mandatoryValue" />
			@break
			@case(5)
			<x-editviewnew.displaytype5 :demographyconfigId="$DemographyConfigId" :results="$Record" :rowid="$RowId" :moduleid="$ModuleId" :mandatory="$mandatoryValue" />
			@break
			@case(6)
			<x-editviewnew.displaytype6 :demographyconfigId="$DemographyConfigId" :results="$Record" :rowid="$RowId" :moduleid="$ModuleId" :mandatory="$mandatoryValue" />
			@break
			@case(7)
			<x-editviewnew.displaytype7 :demographyconfigId="$DemographyConfigId" :results="$Record" :rowid="$RowId" :moduleid="$ModuleId" :mandatory="$mandatoryValue" />
			@break
			@case(8)
			<x-editviewnew.displaytype8n :demographyconfigId="$DemographyConfigId" :results="$Record" :rowid="$RowId" :moduleid="$ModuleId" :mandatory="$mandatoryValue" displaysearch="0" />
			@break
			@case(9)
			<x-editviewnew.displaytype9 :demographyconfigId="$DemographyConfigId" :results="$Record" :rowid="$RowId" :moduleid="$ModuleId" :mandatory="$mandatoryValue" />
			@break
			@case(10)
			<x-editviewnew.displaytype10 :demographyconfigId="$DemographyConfigId" :results="$Record" :rowid="$RowId" :moduleid="$ModuleId" :mandatory="$mandatoryValue" />
			@break
			@case(11)
			<x-editviewnew.displaytype11 :demographyconfigId="$DemographyConfigId" :results="$Record" :rowid="$RowId" :moduleid="$ModuleId" :mandatory="$mandatoryValue" />
			@break
			@case(12)
			<x-editviewnew.displaytype12n :demographyconfigId="$DemographyConfigId" :results="$Record" :rowid="$RowId" :moduleid="$ModuleId" :mandatory="$mandatoryValue" />
			@break
			@case(13)
			<x-editviewnew.displaytype13 :demographyconfigId="$DemographyConfigId" :results="$Record" :rowid="$RowId" :moduleid="$ModuleId" :mandatory="$mandatoryValue" />
			@break
			@case(14)
			<x-editviewnew.displaytype14 :demographyconfigId="$DemographyConfigId" :results="$Record" :rowid="$RowId" :moduleid="$ModuleId" :mandatory="$mandatoryValue" />
			@break
			@case(15)
			<x-editviewnew.displaytype15 :demographyconfigId="$DemographyConfigId" :results="$Record" :rowid="$RowId" :moduleid="$ModuleId" :mandatory="$mandatoryValue" />
			@break
			@case(16)
			<x-editviewnew.displaytype16 :demographyconfigId="$DemographyConfigId" :results="$Record" :rowid="$RowId" :moduleid="$ModuleId" :mandatory="$mandatoryValue" />
			@break
			@case(17)
			<x-editviewnew.displaytype17 :demographyconfigId="$DemographyConfigId" :results="$Record" :rowid="$RowId" :moduleid="$ModuleId" :mandatory="$mandatoryValue" />
			@break
			@case(18)
			<x-editviewnew.displaytype18 :demographyconfigId="$DemographyConfigId" :results="$Record" :rowid="$RowId" :moduleid="$ModuleId" :mandatory="$mandatoryValue" />
			@break
			@case(19)
			<x-editviewnew.displaytype19 :demographyconfigId="$DemographyConfigId" :results="$Record" :rowid="$RowId" :moduleid="$ModuleId" :mandatory="$mandatoryValue" />
			@break
			@case(20)
			<x-editviewnew.displaytype1 :demographyconfigId="$DemographyConfigId" :results="$Record" :rowid="$RowId" :moduleid="$ModuleId" :mandatory="$mandatoryValue" />
			@break
			@case(21)
			<x-editviewnew.displaytype1 :demographyconfigId="$DemographyConfigId" :results="$Record" :rowid="$RowId" :moduleid="$ModuleId" :mandatory="$mandatoryValue" />
			@break
			@case(22)
			<x-editviewnew.displaytype1 :demographyconfigId="$DemographyConfigId" :results="$Record" :rowid="$RowId" :moduleid="$ModuleId" :mandatory="$mandatoryValue" />
			@break
			@case(23)
			<x-editviewnew.displaytype23 :demographyconfigId="$DemographyConfigId" :results="$Record" :rowid="$RowId" :moduleid="$ModuleId" :mandatory="$mandatoryValue" />
			@break
			@case(25)
			<x-editviewnew.displaytype25 :demographyconfigId="$DemographyConfigId" :results="$Record" :rowid="$RowId" :moduleid="$ModuleId" :mandatory="$mandatoryValue" />
			@break
			@case(26)
			<x-editviewnew.displaytype26 :demographyconfigId="$DemographyConfigId" :results="$Record" :rowid="$RowId" :moduleid="$ModuleId" :mandatory="$mandatoryValue" />
			@break
			@case(28)
			<x-editviewnew.displaytype28 :demographyconfigId="$DemographyConfigId" :results="$Record" :rowid="$RowId" :moduleid="$ModuleId" :mandatory="$mandatoryValue" />
			@break
			@case(29)
			<x-editviewnew.displaytype1 :demographyconfigId="$DemographyConfigId" :results="$Record" :rowid="$RowId" :moduleid="$ModuleId" :mandatory="$mandatoryValue" />
			@break
			@case(32)
			<x-editviewnew.displaytype32 :demographyconfigId="$DemographyConfigId" :results="$Record" :rowid="$RowId" :moduleid="$ModuleId" :mandatory="$mandatoryValue" />
			@break
			@case(33)
			<x-editviewnew.displaytype33 :demographyconfigId="$DemographyConfigId" :results="$Record" :rowid="$RowId" :moduleid="$ModuleId" :mandatory="$mandatoryValue" />
			@break
			@case(34)
			<x-editviewnew.displaytype34 :demographyconfigId="$DemographyConfigId" :results="$Record" :rowid="$RowId" :moduleid="$ModuleId" :mandatory="$mandatoryValue" />
			@break
			@case(36)
			<x-editviewnew.displaytype36 :demographyconfigId="$DemographyConfigId" :results="$Record" :rowid="$RowId" :moduleid="$ModuleId" :mandatory="$mandatoryValue" />
			@break
			@case(37)
			<x-editviewnew.displaytype37 :demographyconfigId="$DemographyConfigId" :results="$Record" :rowid="$RowId" :moduleid="$ModuleId" :mandatory="$mandatoryValue" />
			@break
			@default
			<x-editviewnew.displaytype1 :demographyconfigId="$DemographyConfigId" :results="$Record" :rowid="$RowId" :moduleid="$ModuleId" :mandatory="$mandatoryValue" />
			@break
			@endswitch

			@endforeach
		</form>

	</div>

	<br>

	<div class="col-md-12">
		<a href="{{url('ShowDetailView',[$ModuleId,$RowId])}}" target="_blank" class="btn btn-primary  mb-2  me-4 btn-sm">View  Ticket</a>

		@if(count($FirstMail))
		@if($AccessforthisRecord==1)
		<button class="btn btn-primary  mb-2 me-4 btn-sm blockBtn" id= "UpdateAndReplyBtn" onclick="UpdateAndReply()">Update and Reply</button>
		@endif
		@endif
		@if($AccessforthisRecord==1)
		<button class="btn btn-primary  mb-2 me-4 btn-sm blockBtn" id="updateRecordBtn" onclick="updateRecord(1)">Update Without Reply</button>
		@endif
		@if(count($FirstMail))
		<!-- <button class="btn btn-primary  mb-2 me-4 btn-sm" onclick="EmailReply()">Reply</button> -->
		@endif
		@if($AccessforthisRecord==0)
		You Do not have Access to Edit this Record
		@endif

		<div id="ContentLoaderDiv"></div>

	</div>
</div>
<style>
	label
	{
		display: block !important;
	}
	.col-md-4.form-group
	{
		margin-bottom: 10px !important;
	}
</style>
<script>
	

	
	$( document ).ready(function() {
		viewConversation();
		//document.getElementById("DisplayingForm").style.display = "none";
		//alert("View Conversation");
	});
	SaveContent=async()=>
	{
		// if(!$('#draftId').val())
		// {
			// draftId=await CreateDraft();
			// $('#draftId').val(draftId);
		// }
		// EmailContentStatus=await UpdateEmailContent();
		// alert('Draft Saved Successfully');
		messagetype = CKEDITOR.instances['mailContent'].getData();
		message=CKEDITOR.instances['mailContent'].editable().getText();
		RowIdNew=$('#RowId').val();
		ModuleId=$('#EmailModuleId').val();
		$.ajax({
			type:"post",
			url:"{{url('CreateContentasDraft')}}",
			data:{message:message,messagetype:messagetype,ModuleId:ModuleId,RowIdNew:RowIdNew},
			headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
			success:function(response)
			{
				Snackbar.show({
					text: response, 
					pos: 'top-right'
				});
			}
		});
		
	}
	
	function GetContent()
	{
		RowIdNew=$('#RowId').val();
		ModuleId=$('#EmailModuleId').val();
		var draftId=$('#draftId').val();
		$.ajax({
			type:"post",
			url:"{{url('GetContentfromDraft')}}",
			data:{draftId:draftId,ModuleId:ModuleId,RowIdNew:RowIdNew},
			headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
			success:function(response)
			{
				if(response)
				{
					Swal.fire({
						title: 'Load Draft ? ',
						text: "Content will be Overwritten (changed) as per the content saved in Draft previously!",
						icon: 'warning',
						showCancelButton: true,
						confirmButtonColor: '#3085d6',
						cancelButtonColor: '#d33',
						confirmButtonText: 'Yes, Change Content!'
					}).then((result) => {
						if (result.isConfirmed) {
							CKEDITOR.instances['mailContent'].setData(`<br> ${response} <br> ` );
							Snackbar.show({
								text: "Email Content has Changed from the Draft", 
								pos: 'top-right'
							});
						}
						else
						{
							Snackbar.show({
								text: "Haven't change the Content", 
								pos: 'top-right'
							});
						}
					})
					
				}
			}
		});
	}
	
	function getChildRelateTo(ParentModuleId,listId,DependentRelateToGroupId)
	{
		if(listId=='')
		{
			return false;
		}
		ModuleId=$('#thisModuleId').val();
		$.ajax({
			type:"post",
			url:"{{url('GetChildRelateTo')}}",
			data:{ParentModuleId:ParentModuleId,ModuleId:ModuleId,DependentValueId:listId,GroupId:DependentRelateToGroupId},
			headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
			success:function(response)
			{
            // alert(response);
				res=JSON.parse(response);
				columnList=res.colList;
				for(i=0;i<columnList.length;i++)
				{
					$('#'+columnList[i]).empty();
					$('#'+columnList[i]).append(res.optList);
				}
            // console.log(res.colList);
			}

		});

	}
	function viewConversation()
	{
		document.getElementById("DisplayingForm").style.display = "none";
		var ModuleId=document.getElementById('thisModuleId').value;
		var RowId=document.getElementById('RowId').value;
		ViewEmailConversationNew(ModuleId,RowId);
	}
	
	function defaultreplyall(RAEmailId, replyallsub){
		//alert("Reply All");
		//alert(RAEmailId);
		//alert(replyallsub);
		ReplyAll(replyallsub,'replyAll',RAEmailId);
	}
	
	function viewMailtab(FirstMailId='')
	{

		if(FirstMailId)
		{
			MailBody=CKEDITOR.instances['mailContentDisplay'].getData();

			if(MailBody=="")
			{
				ChangeEmailContentView(3,FirstMailId);
			}

		}

		document.getElementById("DisplayingForm").style.display = "block";
	}
	ViewEmailConversationNew=(ModuleId,RowId)=>{


		$.ajax({
			type:"post",
			url:"{{url('ViewEmailConversation')}}",
			data:{ModuleId,RowId,source:"listview"},
			headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
			beforeSend:()=>{

				$('.conversation-container').remove();
				$('#EmailBodyNew').html("<center><div class='spinner-border text-primary align-self-center'>Loading...</div></center>")
				$('#CurrentPage').val(1);
			},
			success:response=>
			{
				$('#EmailBodyNew').html(response);

				setTimeout(()=>{
					// $('#EmailConversationContainer').scrollTop(0);
					$('#TempRowId').val(RowId);
					$('#TempModuleId').val(ModuleId);
					console.clear();
					divHeight=$('#EmailConversationContainer').innerHeight();
					newHeight=parseInt(divHeight)-1;
					// console.log(`divHeight ${divHeight} NewHeight ${newHeight}`)
					$('#EmailConversationContainer').css('height',newHeight);
					//.height() - returns the height of element excludes padding, border and margin.
		//.innerHeight() - returns the height of element includes padding but excludes border and margin.
		//.outerHeight() - returns the height of the div including border but excludes margin.
		//.outerHeight(true) - returns the height of the div including margin.

					$('#EmailConversationContainer').scrollTop(1);
					$('#EmailConversationContainer').on('scroll', EmailConversationScroll);
				},500);
			}
		});
	}
	getSignature=()=>
	{
		// console.log("get	 signature called");
		document.getElementById("DisplayingForm").style.display = "block";
		$('#signatureAdded').val("");
		if(!$('#signatureAdded').val())
		{
			// console.log("getting signature..");

			
			$.ajax({
				type:"post",
				url:"{{url('GetUserSignature')}}",
				headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
				beforeSend:()=>{},
				success:response=>{

					if(response)
					{
						messagetype = CKEDITOR.instances['mailContent'].getData()
						CKEDITOR.instances['mailContent'].setData(`<br><br><br><br> ${response} <br> ` );
						$('#signatureAdded').val(response);
						
						//messagetype = CKEDITOR.instances['mailContent'].getData()
						//CKEDITOR.instances['mailContentNew'].setData(`<br><br><br><br> ${response} <br> ${messagetype}` );
					}
					else
					{
						messagetype = CKEDITOR.instances['mailContent'].getData()
						CKEDITOR.instances['mailContent'].setData(`<br><br><br><br> ${messagetype}` );
						$('#signatureAdded').val("1212");
					}

					
				}
			});	
		}
	}
	
	getSignaturewithall=()=>
	{
		// console.log("get signature called");
		document.getElementById("DisplayingForm").style.display = "block";
		$.ajax({
			type:"post",
			url:"{{url('GetUserSignature')}}",
			headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
			beforeSend:()=>{},
			success:response=>{

				if(response)
				{
					// messagetype = CKEDITOR.instances['mailContentNew'].getData()
					messagetype = $('#mailContentNew').val();
					CKEDITOR.instances['mailContent'].setData(`<br><br><br><br> ${response} <br> ${messagetype}` );
					$('#signatureAdded').val('');

						//messagetype = CKEDITOR.instances['mailContent'].getData()
						//CKEDITOR.instances['mailContentNew'].setData(`<br><br><br><br> ${response} <br> ${messagetype}` );
				}
				else
				{
					messagetype = CKEDITOR.instances['mailContent'].getData()
					CKEDITOR.instances['mailContent'].setData(`<br><br><br><br> ${messagetype}` );
					$('#signatureAdded').val("1212");
				}


			}
		});	
	}

	getSignatureWithTemplate=()=>
	{
		return new Promise((resolve,reject)=>{
			$.ajax({
				type:"post",
				url:"{{url('GetUserSignature')}}",
				headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
				beforeSend:()=>{},
				success:response=>{
					if(response)
					{
						messagetype = CKEDITOR.instances['mailContent'].getData()
						CKEDITOR.instances['mailContent'].setData(`${messagetype} <br> ${response}` );
						$('#signatureAdded').val('2123');	
						resolve();
					}
					else
					{
						resolve();
					}
				}
			});	
		})
		
	}

	ReplyAll=async (EmailSubject,replyType,EmailId)=>{
		//alert(replyType);
		document.getElementById('ReplyTypeSelection').value = replyType;
		try{
			await ChangeSubject(EmailSubject,replyType);
			await GetToCCIds(EmailSubject,replyType,EmailId); 
			
			mailType=$("input[name='replyForward']:checked").attr("mailtype");
			await removeAllAttachments();

		}
		catch(e)
		{

			try
			{
				if(!$('#draftId').val())
				{
					draftId=await CreateDraft();
					$('#draftId').val(draftId);
				}
				await addAttachments();	
			}catch(e){}
		}


	}



	GetToCCIds=(EmailSubject,replyType,EmailId)=>
	{
		return new Promise((resolve,reject)=>{
			FromEmailIds=[];
			CcEmailIds=[];
			$.ajax({
				type:"post",
				url:"{{url('GetToCCIds')}}",
				data:{EmailId},
				headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
				beforeSend:()=>{
					$('#ccLoader').html("<div class='spinner-border text-primary align-self-center'>Loading...</div>")
					$('#toLoader').html("<div class='spinner-border text-primary align-self-center'>Loading...</div>")

				},
				success:response=>{
				// console.log(response);
					res=JSON.parse(response);
				// getSignature();
					res['FromMail'].map((eid)=>{
						FromEmailIds.push(eid);
					});

					try
					{
						res['CcMail'].map((eid)=>{
							CcEmailIds.push(eid);
						});
					}
					catch(e){}


					new Tagify(document.getElementById('toAdress'));
					$('#toAdress').val(FromEmailIds)


					if(replyType=="replyAll")
					{
						if(CcEmailIds.length)
						{
							new Tagify(document.getElementById('ccAdress'));
							$('#ccAdress').val(CcEmailIds);

						}
					}
					else
					{
						$('#ccAdress').val('');
					}


					console.clear();
					console.log(res['CcMail']);
					console.log(res['FromMail']);

					$('#ccLoader').html('');
					$('#toLoader').html('');

					resolve();
				}
			});
		});
	}


	removeAllAttachments=()=>{
		return new Promise((resolve,reject)=>{

			draftId=$('#draftId').val();

			if(!draftId)
			{
				resolve();
			}

			$.ajax({
				type:'post',
				url:"{{url('removeAllAttachments')}}",
				data:{draftId},
				headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
				beforeSend:()=>{
					$('#UpdateAndReplyBtn').attr('disabled',true);
					$('#updateRecordBtn').attr('disabled',true);

					$('#ContentLoaderDiv').html(`<center> <div class="spinner-border text-primary align-self-center loader-lg">Loading...</div><center>`);
				},
				success:response=>{

					attachmenstDiv='';
					res=JSON.parse(response);

					res.forEach((attch)=>{

						attachmenstDiv+=`
						<a href="${attch.path}" target="_blank">${attch.fileName}</a>-<span style="cursor:pointer;margin-right:10px" onclick="RemoveAttachment('${attch.fileId}')">X</span>\t\t
						`;
					});
					$('#AttachmentsList').html(attachmenstDiv);
					$('#UpdateAndReplyBtn').attr('disabled',false);
					$('#updateRecordBtn').attr('disabled',false);
					$('#ContentLoaderDiv').html(``);

					resolve();
				}
			})
		});
	}



	addAttachments=()=>{
		return new Promise((resolve,reject)=>{
			RowId=$('#TicketRowId').val();
			draftId=$('#draftId').val();
			$.ajax({
				type:'post',
				url:"{{url('addAttachments')}}",
				data:{RowId,draftId},
				headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
				beforeSend:()=>{
					$('#UpdateAndReplyBtn').attr('disabled',true);
					$('#updateRecordBtn').attr('disabled',true);

					$('#ContentLoaderDiv').html(`<center> <div class="spinner-border text-primary align-self-center loader-lg">Loading...</div><center>`);
				},
				success:response=>{

					attachmenstDiv='';
					res=JSON.parse(response);

					res.forEach((attch)=>{

						attachmenstDiv+=`
						<a href="${attch.path}" target="_blank">${attch.fileName}</a>-<span style="cursor:pointer;margin-right:10px" onclick="RemoveAttachment('${attch.fileId}')">X</span>\t\t
						`;
					});
					$('#AttachmentsList').html(attachmenstDiv);

					$('#UpdateAndReplyBtn').attr('disabled',false);
					$('#updateRecordBtn').attr('disabled',false);
					$('#ContentLoaderDiv').html(``);

					resolve();
				}
			})


		});
	}



	function SearchAll(PageNum,mode)
	{
		var ModuleId ='806867ab-96a5-11eb-948a-56b1773fd56f';
		var page_num=1;
		//var total_records = $('#total_records').val();
		var limit=10;
		var field_name="CreatedDate";
		var sort_order="DESC";
		
		var searchForm = JSON.stringify( $('#SearchForm').serializeArray() );

		var formData = {
			data: searchForm,
			source: ModuleId,
			ModuleId: ModuleId,
			page_num: PageNum,
			limit: limit,
			field_name: field_name,
			sort_order: sort_order,
			mode: mode
		};
		var ajax_url = "{{ url('EmailTickets-View') }}";
		console.log(`Search All function called  ${ajax_url}`);


		$.ajax({
			url: ajax_url,
			type: 'POST',
			data: formData,
			headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
			beforeSend:function() {
				$('#emailTickets').html(`<center><div class="spinner-border text-primary  align-self-center loader-lg">Loading...</div></center>`);
			},
			success: function(results) {
				console.log("Success...");
				$('#loading').html('');
				$('#emailTickets').html(results);
			},
			error: function (data) {
				$('#emailTickets').html("");
			}
		});
	}


	getNewSuggestions=(EmailAddressLike,TagifyName)=>
	{

		$.ajax({
			type:"post",
			url:"{{url('EmailAddressSuggestion')}}",
			data:{EmailAddressLike},
			headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
			success:response=>{
				console.clear();
				NewWhiteListArray=JSON.parse(response);
				TagifyName.whitelist=NewWhiteListArray;
			}
		});
	}

	LoadEmailTemplate=(TemplateId)=>
	{
		// console.clear();
		console.log(`TemplateId=${TemplateId}`);
		$.ajax({
			type:"post",
			url:"{{url('GetEmailTemplate')}}",
			data:{TemplateId},
			headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
			success:async (response)=>{
				// console.clear();
				res=JSON.parse(response);
				// console.log(res);
				templateContent=res[0].DescriptionHtml;
				// console.log(res.Description);
				CKEDITOR.instances['mailContent'].setData(templateContent);
				// $('#signatureAdded').val('');s
				await getSignatureWithTemplate();
				// setTimeout(getSignature,500);
			}
		});
	}

	ChangeEmailContent = async (ChangeType,EmailId)=>
	{
		//alert("Email content");
		document.getElementById('ChangeEmailContent'+ChangeType).checked="true" ;
		try
		{
			CKEDITOR.instances['mailContent'].setData('');
			await getSignatureWithTemplate();
			TicketRowId=$('#TicketRowId').val();
			$.ajax({
				type:"post",
				url:"{{url('ChangeEmailContent')}}",
				data:{ChangeType,EmailId,TicketRowId},
				headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
				beforeSend:()=>{
					$('#UpdateAndReplyBtn').attr('disabled',true);
					$('#updateRecordBtn').attr('disabled',true);

					$('#ContentLoaderDiv').html(`<center> <div class="spinner-border text-primary align-self-center loader-lg">Loading...</div><center>`);

				},
				success:response=>
				{
					console.clear();
					console.log(response);

					messagetype = CKEDITOR.instances['mailContent'].getData()
					CKEDITOR.instances['mailContent'].setData(`${messagetype} <br> ${response}` );
					$('#UpdateAndReplyBtn').attr('disabled',false);
					$('#updateRecordBtn').attr('disabled',false);
					$('#ContentLoaderDiv').html(``);

				}
			});
		}
		catch(e){}

	}



	ChangeEmailContentView = (ChangeType,EmailId)=>
	{
		try
		{
			TicketRowId=$('#TicketRowId').val();
			$.ajax({
				type:"post",
				url:"{{url('ChangeEmailContent')}}",
				data:{ChangeType,EmailId,TicketRowId},
				headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
				beforeSend:()=>{
					$('#UpdateAndReplyBtn').attr('disabled',true);
					$('#updateRecordBtn').attr('disabled',true);

					$('#ContentLoaderDiv').html(`<center> <div class="spinner-border text-primary align-self-center loader-lg">Loading...</div><center>`);

				},
				success:response=>
				{

					CKEDITOR.instances['mailContentDisplay'].setData(`${response}`);
					$('#UpdateAndReplyBtn').attr('disabled',false);
					$('#updateRecordBtn').attr('disabled',false);
					$('#ContentLoaderDiv').html(``);

				}
			});
		}
		catch(e){}

	}

	ViewAllAttachments=(RowId)=>{


		if($('#viewAttachmentsDiv').html())
		{
			return;
		}

		attachmentsList="";
		$.ajax({
			type:'post',
			url:"{{url('ViewAllAttachments')}}",
			data:{RowId},
			headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
			beforeSend:()=>{
				$('#viewAttachmentsDiv2').remove();
				$('#viewAttachmentsDiv').html(`<center> <div class="spinner-border text-primary align-self-center loader-lg">Loading...</div><center>`);
			},
			success:response=>{
				res=JSON.parse(response);

				res.map((al)=>{
					attachmentsList+=`<li> <a href='${al.FilePath}' target='_blank' > ${al.OriginalName} </a> </li>`
				});

				if(res.length)
				{
					$('#viewAttachmentsDiv').html(attachmentsList);
				}
				else
				{
					$('#viewAttachmentsDiv').html("No Attachments");
				}


				// console.log(attachmentsList);
			}

		});
	}

	
</script>