@props(['assignedtolist','relatedmodulelistarray','emailtemplateslist','contactmodules'])

@php
$siteurl=$_SERVER['HTTP_HOST'];
$AssignedToList1=$assignedtolist;
$RelatedModuleListArray=$relatedmodulelistarray;
$EmailTemplatesList=$emailtemplateslist;
$ContactModules=$contactmodules;

$userdetails = Auth::user();
@endphp

<script type="text/javascript">
	function FindDuplicate(source,ModuleId){
		var RowId = $('#RowId').val();
		var url="../../"+source+"/"+ModuleId+"/"+RowId+"";
		var href="{{'"+url+"'}}";
		window.location.href = url;
	}
	function duplicatetoCreate()
	{
		var RowId = $('#RowId').val();
		var ModuleId = $('#ModuleId').val();
		var formData = {
			ModuleId: ModuleId,
			RowId: RowId,
		};

		Swal.fire({
			title: 'Are you sure?',
			text: "You want to Duplicate this Record!",
			icon: 'warning',
			showCancelButton: true,
			confirmButtonColor: '#3085d6',
			cancelButtonColor: '#d33',
			confirmButtonText: 'Duplicate',
		}).then((result) => {
			if (result.isConfirmed) {

				$.ajax({
					type: "POST",
					url: "{{url('CreateDuplicate')}}",
					data: formData,
					beforeSend:function()
					{
					},
					headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
					dataType: 'json',
					success: function () {
					},
					complete: function (response) {
						var txt = response.responseJSON;
						if(txt.Status=="Success"){
							Snackbar.show({
								text: txt.Message,
								pos: 'top-right',
							});
							var RowId=txt.RowId;
							var url="../../ShowEditView/"+ModuleId+"/"+RowId+"";
							var href="{{'"+url+"'}}";
							window.location.href = url;

						}
						else if(txt.Status=="Fail")
						{
							Snackbar.show({
								text: txt.Message,
								actionTextColor: '#fff',
								backgroundColor: '#e2a03f',
								pos: 'top-right',
							});
						}
					},
					error: function (data) {
						console.log(data);
					}
				});  
			}
			else
			{
				RowId="817541b5-f4a4-4f52-ac58-2fe6367fb925";

				Snackbar.show({
					text: 'Warning',
					actionTextColor: '#fff',
					backgroundColor: '#e2a03f',
					text: 'You have not Duplicate this Record!',
					pos: 'top-right',
				});
			}
		})
	}
	function duplicateaRecord()
	{
		var RowId = $('#RowId').val();
		var ModuleId = $('#ModuleId').val();

		Swal.fire({
			title: 'Are you sure?',
			text: "You want to Duplicate this Record!",
			icon: 'warning',
			showCancelButton: true,
			confirmButtonColor: '#3085d6',
			cancelButtonColor: '#d33',
			confirmButtonText: 'Duplicate',
		}).then((result) => {
			if (result.isConfirmed) {
				var url="../../DuplicateaRecord/"+ModuleId+"/"+RowId;
				console.log("Opening "+url);
				window.location.href = url;
				/*$.ajax({
					type: "POST",
					url: "{{url('CreateDuplicate')}}",
					data: formData,
					beforeSend:function()
					{
					},
					headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
					dataType: 'json',
					success: function () {
					},
					complete: function (response) {
						var txt = response.responseJSON;
						if(txt.Status=="Success"){
							Snackbar.show({
								text: txt.Message,
								pos: 'top-right',
							});
							var RowId=txt.RowId;
							var url="../../ShowEditView/"+ModuleId+"/"+RowId+"";
							var href="{{'"+url+"'}}";
							window.location.href = url;

						}
						else if(txt.Status=="Fail")
						{
							Snackbar.show({
								text: txt.Message,
								actionTextColor: '#fff',
								backgroundColor: '#e2a03f',
								pos: 'top-right',
							});
						}
					},
					error: function (data) {
						console.log(data);
					}
				});  */
			}
			else
			{
				RowId="817541b5-f4a4-4f52-ac58-2fe6367fb925";

				Snackbar.show({
					text: 'Warning',
					actionTextColor: '#fff',
					backgroundColor: '#e2a03f',
					text: 'You have not Duplicate this Record!',
					pos: 'top-right',
				});
			}
		})
	}
	function GetSubPanelfromdetailview(module_name,SecondaryModuleId,subpanel_loop,mode,field_name,page_num,AssociationType,PrimaryModuleId){

		var RowId = $('#RowId').val();
		console.log( "Getting ListView Data... "+RowId+" = "+module_name+" -> "+SecondaryModuleId+" | "+subpanel_loop+" / "+mode);

		if(mode==3)
		{
			var limit=5;
			var sort_order="DESC";
		}
		else
		{
			var limit = $('#limit').val();
			//var sort_order=mode;
			var sort_order="DESC";
		}
		var ajax_url = "{{ url('GetListViewPagination') }}";
		var formData = {

			RowId: RowId,
			module_name: module_name,
			SecondaryModuleId: SecondaryModuleId,
			page_num: page_num,
			limit: limit,
			field_name: field_name,
			sort_order: sort_order,
			subpanel_loop: subpanel_loop,
			mode: mode,
			ModuleId: PrimaryModuleId,
			AssociationType: AssociationType
		};
		$.ajaxSetup({
			headers: {
				'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
			}
		});
		$.ajax({
			url: ajax_url,
			type: 'POST',
			data: formData,
			beforeSend:function() {
				$('#SubPanel'+subpanel_loop).html("<div class='loader dual-loader mx-auto'></div>");
			},
			success: function(result) {
				console.log("Success...");

				$('#SubPanel'+subpanel_loop).html(result);
			},
			error: function (data) {
				console.log("Error:"+data);
				var na='<div class="alert alert-arrow-right alert-icon-right alert-light-danger mb-4" role="alert"><button type="button" class="close" data-bs-dismiss="alert" aria-label="Close"><svg xmlns="http://www.w3.org/2000/svg" data-bs-dismiss="alert" 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-x close"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button><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-alert-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12" y2="16"></line></svg><strong>Not Available!</strong></div>';
				$('#SubPanel'+subpanel_loop).html(na);
			}
		});
	}
	function RemoveMe(ModuleId,RowId,Source){

		Swal.fire({
			title: 'Are you sure?',
			text: "You won't be able to revert this!",
			icon: 'warning',
			showCancelButton: true,
			confirmButtonColor: '#3085d6',
			cancelButtonColor: '#d33',
			confirmButtonText: 'Yes, delete it!'
		}).then((result) => {
			if (result.isConfirmed) {
				$.ajaxSetup({
					headers: {
						'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
					}
				});
				var formData = {
					ModuleId: ModuleId,
					RowId: RowId,
					Source: Source,
				};
				var type = "POST";
				var ajaxurl = "{{ url('DeleteMe') }}";
				$.ajax({
					type: type,
					url: ajaxurl,
					data: formData,
					dataType: 'json',
					success: function () {

					},
					complete: function (result) {
						var obj = result.responseJSON;
						var msg=obj.Message;

						Snackbar.show({
							text: msg,
							pos: 'top-right',
						});
						var url="../../ListView/"+ModuleId+"";
						var href="{{'"+url+"'}}";
						window.location.href = url;
					},
					error: function (data) {
						console.log(data);
					}
				});
				swalWithBootstrapButtons.fire(
					'Deleted!',
					'Your file has been deleted.',
					'success'
					)
			}
			else
			{
				Snackbar.show({
					text: 'Warning',
					actionTextColor: '#fff',
					backgroundColor: '#e2a03f',
					text: 'You have not deleted this record!',
					pos: 'top-right',
				});
			}
		})
	}

	function AuditLog(ModuleId,RowId,Source){
		$('#response_div').text("");
		$('#exampleModalLabel2').text("View Change Log");
		console.log( "Getting Audit Data... "+RowId+" = "+ModuleId);
		$.ajaxSetup({
			headers: {
				'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
			}
		});
		var formData = {
			ModuleId: ModuleId,
			RowId: RowId,
			Source: Source,
		};
		var ajaxurl = "../../ViewChangeLog/"+ModuleId+"/"+RowId+"";
		$.ajax({
			type: 'POST',
			url: ajaxurl,
			data: formData,
			success: function (response) {
				$('#response_div').html(response);
			},
			complete: function () {
			},
			error: function (data) {
				console.log(data);
			}
		});
	}

	function open_me(obj){
		var ModuleId=obj.ModuleId;
		var RowId=obj.RowId;
		var url="../../ShowDetailView/"+ModuleId+"/"+RowId;
		var href="{{'"+url+"'}}";
		console.log("Opening "+url);
		window.location.href = url;
	}

	function popUp(ModuleId,row_id,display_type,field_name,LabelValue){

		$('#response_div').text("");
		$('#exampleModalLabel').text(LabelValue);
		$.ajaxSetup({
			headers: {
				'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
			}
		});
		var form_Data = {
			Source: 'DetailView'
		};
		var ajax_url = "../../PopUpView/"+ModuleId+"/"+row_id+"/"+display_type+"/"+field_name;
		$.ajax({
			type: 'POST',
			url: ajax_url,
			data: form_Data,
			success: function (response) {
				$('#response_div').html(response);
			},
			complete: function () {
			},
			error: function (data) {
				console.log(data);
			}
		});
	}

	downloadDoc=(src)=>
	{
		var link=document.createElement('a');
		document.body.appendChild(link);
		link.href= src;
		link.download = '';
		link.click();
	}

	function QuickCreateV2(SecondaryModuleId,subpanel_loop)
	{
		moduleID=$('#ModuleId').val();
		RowId=$('#RowId').val();


		// alert(RowId);

		// return;

		$.ajaxSetup({
			headers:{
				'X-CSRF-TOKEN':$('meta[name="csrf-token"]').attr('content')
			}
		});
		$.ajax({
			type:"POST",
			data:{ModuleId:SecondaryModuleId,RowId:RowId,subpanel_loop:subpanel_loop,PrimaryModuleId:moduleID},
			url:"{{url('GetQuickCreateFields')}}",
			success:function(response)
			{
				$('#response_div').html(response);
				$('#exampleModalLabel').html("Create "+$('#ModuleName').val());
			}

		});
	}
	
	function DisplayContentofNotification(SystemNotificationId)
	{
		$.ajaxSetup({
			headers:{
				'X-CSRF-TOKEN':$('meta[name="csrf-token"]').attr('content')
			}
		});
		$.ajax({
			type:"POST",
			data:{SystemNotificationId:SystemNotificationId},
			url:"{{url('DisplayContentofNotification')}}",
			success:function(response)
			{
				$('#response_div').html(response);
				$('#exampleModalLabel').html("System Notification ");
			}

		});
	}

	
	function PopUpLinking(module_name,SecondaryModuleId,subpanel_loop,mode,field_name,page_num,AssociationType,PrimaryModuleId)
	{

		var ModuleName=$('#ModuleName').val();
		var ModuleName_txt="Associate Records to "+ModuleName;
		$('#exampleModalLabel').text(ModuleName_txt);
		var RowId = $('#RowId').val();

		var limit=5;
		var sort_order="DESC";

		console.log( "Popup... "+RowId+" = "+module_name+" -> "+SecondaryModuleId+" | "+subpanel_loop+" / "+mode);
		var ajax_url = "{{ url('GetQuickLinking') }}";

		var formData = {
			RowId: RowId,
			module_name: module_name,
			PrimaryModuleId: PrimaryModuleId,
			SecondaryModuleId: SecondaryModuleId,
			page_num: page_num,
			limit: limit,
			field_name: field_name,
			sort_order: sort_order,
			subpanel_loop: subpanel_loop,
			mode: mode,
			AssociationType: AssociationType
		};
		$.ajaxSetup({
			headers: {
				'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
			}
		});
		$.ajax({
			url: ajax_url,
			type: 'POST',
			data: formData,
			beforeSend:function() {
				$('#response_div').html("<div class='loader dual-loader mx-auto'></div>");
			},
			success: function(result) {
				console.log("Via PopUp");
				$('#response_div').html(result);
			},
			error: function (data) {
				console.log("Error:"+data);
				var na='<div class="alert alert-arrow-right alert-icon-right alert-light-danger mb-4" role="alert"><button type="button" class="close" data-bs-dismiss="alert" aria-label="Close"><svg xmlns="http://www.w3.org/2000/svg" data-bs-dismiss="alert" 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-x close"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button><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-alert-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12" y2="16"></line></svg><strong>Not Available!</strong></div>';
				$('#SubPanel'+subpanel_loop).html(na); 
			}
		});
	}

	function LinkMe(PrimaryModuleId, SecondaryModuleId, UniqueId, AssociationType, Source, subpanel_loop,mode,field_name,page_num)
	{
		Swal.fire({
			title: 'Are you sure?',
			text: "Do you want to link this record?",
			icon: 'warning',
			showCancelButton: true,
			confirmButtonText: 'Associate!',
			cancelButtonText: 'No, cancel!',
			reverseButtons: true
		}).then((result) => {
			if (result.isConfirmed) {

				$.ajaxSetup({
					headers: {
						'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
					}
				});

				var module_name=$('#ModuleName').val();
				var RowId = $('#RowId').val();
				var formData = {
					UniqueId: RowId,
					PrimaryModuleId: PrimaryModuleId,
					SecondaryModuleId: SecondaryModuleId,
					RowId: UniqueId,
					AssociationType: AssociationType,
					Source: Source,
				};
				var type = "POST";
				var ajaxurl = "{{ url('LinkSaveAssociation') }}";
				$.ajax({
					type: type,
					url: ajaxurl,
					data: formData,
					dataType: 'json',
					success: function () {

					},
					complete: function (result) {

						var obj = result.responseJSON;
						var msg=obj.Message;
						var Success=obj.Status;

						Snackbar.show({
							text: msg,
							pos: 'top-right',
						});

						if(Success=='Success')
						{
							$('#exampleModal').modal('hide');
							//GetSubPanelfromdetailview(module_name,SecondaryModuleId,subpanel_loop,'Auto','UpdatedDate','1',AssociationType,PrimaryModuleId);
							GetSubPanelfromdetailview(module_name,SecondaryModuleId,subpanel_loop,3,'UpdatedDate','1',AssociationType,PrimaryModuleId);
						}

					},
					error: function (data) {
						console.log(data);
					}
				});
				swalWithBootstrapButtons.fire(
					'Associated!',
					'Associated Successfully!',
					'success'
					)

			} else{

				Snackbar.show({
					text: 'Warning',
					actionTextColor: '#fff',
					backgroundColor: '#e2a03f',
					text: 'You have not linked this record!',
					pos: 'top-right',
				});
			}
		})

	}

	function Click2Call(ModuleId,click_to_call)
	{
		var RowId = $('#RowId').val();
		var ajaxurl = "{{ url('ClickToCall') }}";
		var form_Data = {
			ModuleId: ModuleId,
			RowId: RowId,
			click_to_call: click_to_call,
			Source: 'DetailView'
		};

		$.ajaxSetup({
			headers: {
				'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
			}
		});

		$.ajax({
			url: ajaxurl,
			type: 'POST',
			data: form_Data,
			dataType: 'json',
			beforeSend:function() {
				$('#Click2Call_Response').html("<div class='loader dual-loader mx-auto'></div>");
			},
			success: function () {
				$('#Click2Call_Response').html("");
			},
			complete: function (result) {
				var obj = result.responseJSON;
				var Success_text=obj.Status;
				var msg_text=obj.Message;

				Snackbar.show({
					text: msg_text,
					pos: 'top-right',
				});

				$('#Click2Call_Response').html(msg_text);
			},
			error: function (data) {
				console.log("Error:"+data);
				var na='<div class="alert alert-arrow-right alert-icon-right alert-light-danger mb-4" role="alert"><button type="button" class="close" data-bs-dismiss="alert" aria-label="Close"><svg xmlns="http://www.w3.org/2000/svg" data-bs-dismiss="alert" 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-x close"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button><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-alert-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12" y2="16"></line></svg><strong>Not Available!</strong></div>';
				$('#Click2Call_Response').html(na);
			}
		});
	}

	GetDateFields=(ModuleId,RowId)=>{

		return new Promise((resolve,reject)=>{
			$.ajax({
				type:"POST",
				url:"{{url('GetDateFields')}}",
				data:{ModuleId,RowId},
				success:response=>{
					resolve(response);
				}
			});
		});
	}


	AddRemainder=async()=>{
		var currentdate = new Date(); 
		var datetime = currentdate.getFullYear() + "-"
		+ (currentdate.getMonth()+1)  + "-" 
		+currentdate.getDate() + " "
		+ currentdate.getHours() + ":"  
		+ currentdate.getMinutes();


		var DateTimeDisplay=currentdate.getDate()+"-"
		+ (currentdate.getMonth()+1)  + "-" 
		+ currentdate.getFullYear() + " "
		+ currentdate.getHours() + ":"  
		+ currentdate.getMinutes();

		ModuleId=$('#ModuleId').val();
		RowId=$('#RowId').val();
		AssignedToList=JSON.parse('');
		RelatedModuleListArray=JSON.parse('');
		EmailTemplatesList=JSON.parse('');
		ContactModules=JSON.parse('');

		AllRelatedModules=[];

		try{
			DateFields=await GetDateFields(ModuleId,RowId);
		}
		catch(e)
		{
			console.log("error",e);
		}

		var uniqId = (new Date()).getTime();
		RemainderIds=[];
		RemainderIdvals=$('#remainderIds').val();
		if(RemainderIdvals)
		{
			RemainderIds=RemainderIdvals.split(",");
		}



		DateFields=JSON.parse(DateFields);
		dateoptions='';
		for(let [key,value] of Object.entries(DateFields))
		{
			dateoptions+=`<option value="${value}">${key}</option>`
		}

		AssignedToOptions='<option value="">Select User</option>';
		loggeduserMail='{{$userdetails->email}}';
		for(let [key,value] of Object.entries(AssignedToList))
		{   
			selected='';
			if(loggeduserMail==value.email)
			{
				selected="selected";
			}
			AssignedToOptions+=`<option value="${value.email}" ${selected}> ${value.name} </option>`;
		}

		RelatedModuleListArray.forEach((RelatedModuleList)=>{
			key=RelatedModuleList.SecondaryModuleId;
			value=RelatedModuleList.ModuleName;
			AllRelatedModules[key]=value;
		});
		EmailTemplateOptions='<option value="">Select Template</option>';
		EmailTemplatesList.forEach((EmailTemplate)=>{
			EmailTemplateOptions+=`
			<option value="${EmailTemplate.EmailTemplatesId}">${EmailTemplate.Name}</option>
			`;
		});

		for(let [key,value] of Object.entries(ContactModules))
		{
			AllRelatedModules[key]=value;
		}
		AllRelatedModulesList='';
		for(let [key,value] of Object.entries(AllRelatedModules))
		{
			AllRelatedModulesList+=`<option value="${key}">${value}</option> `;
		}
		RemainderIds.push(uniqId);
		$('#remainderIds').val(RemainderIds);

		const div=
		`<div class="from-group row" id="RemDiv${uniqId}" style="margin-top:10px;border: 1px solid #e0e6ed;padding: 5px 0px;border-radius: 5px">
		<div class="col-md-12"style="margin:10px 0px">
		<div class="icon-container" style="float: right;cursor:pointer" onclick="RemoveRemainder('${uniqId}')">
		<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg><span class="icon-name"></span>
		</div>
		</div>
		<div class="col-md-12"style="margin:10px 0px">

		<div class="col-md-3" style="float:left !important">
		<label>Invite type</label>
		<select name="InviteType${uniqId}" name="InviteType${uniqId}" id='InviteType${uniqId}' class="form-control" onchange="DisplayInviteType('${uniqId}',this.value)">
		<option value="1" selected>Assigned To</option>
		<option value="2">Relate To</option>

		</select>
		</div>

		<div class="col-md-3" style="float:left !important" id='AssignedToValDiv${uniqId}'>
		<label style="">Assigned To</label>
		<select name="invitee${uniqId}" id='invitee${uniqId}' class="form-control" onchange="DisplayEmailsList(${uniqId})">
		${AssignedToOptions}
		</select>
		</div>

		<div class="col-md-3" style="float:left !important;display:none" id='RelatedModuleDiv${uniqId}'>
		<label>Related Module</label>
		<select name="RelatedModule${uniqId}" name="RelatedModule${uniqId}" id='RelatedModule${uniqId}' class="form-control" onchange="GetRelatedRows('${uniqId}')">
		<option value="">Select Module</option>
		${AllRelatedModulesList}
		</select>
		</div>



		<div class="col-md-3" style="float:left !important;" id='EmailTemplatesDiv${uniqId}'>
		<label>Email Templates
		<div class="icon-container" style="cursor:pointer;display: inline-block;margin-top: -18px;" onclick="createEmailTEmplate()">
		<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg><span class="icon-name"></span>
		</div>
		</label>
		<select name="EmailTemplates${uniqId}" id='EmailTemplates${uniqId}' class="form-control emailtemplate" onchange="">
		${EmailTemplateOptions}
		</select>
		</div>



		</div>

		<div class="col-md-12" id="relatemodal${uniqId}" style="display:none">
		<!------------------------------------------------->

		<div class="col-lg-12 layout-spacing">
		<div id="iconsAccordion" class="accordion-icons">

		<div class="card">
		<div class="card-header" id="headingThree8">
		<section class="mb-0 mt-0">
		<div role="menu" class="" data-toggle="collapse" data-target="#iconAccordionThree" aria-expanded="false" aria-controls="iconAccordionThree">
		<div class="accordion-icon"><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-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
		Search Filters <div class="icons"><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-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg></div>
		</div>
		</section>
		</div>
		<div id="iconAccordionThree" class="collapse" aria-labelledby="headingThree8" data-parent="#iconsAccordion">
		<div class="card-body">
		<div class="col-xs-12 col-sm-12 col-md-12" name="ShowFields${uniqId}" id="ShowFields${uniqId}">
		</div>
		<input type="button" name="FindTicket" id="FindTicket" value="Search" class="btn btn-primary" onclick="SearchAll('${uniqId}')" />
		<input type="button" name="Clear" id="Clear" value="Clear" class="btn btn-primary"  onclick="SearchFilters('${uniqId}')" />
		<p id="loading"></p>
		</div>

		<div class="col-md-12">
		<div id="ShowResults${uniqId}">
		</div>
		</div>

		</div>
		</div>
		</div>

		</div>

		<!------------------------------------------------->
		</div>
		<!------------Table content------------------------------------->

		<div class="col-md-12" style="margin-top: 10px;padding-left: 30px;" id="EmailPhoneDiv${uniqId}">

		<table class="table table-bordered table-hover">
		<thead>
		<tr>
		<th>Names</th><th>E-mail Ids</th><th>Phone Numbers</th>
		</tr>

		<thead>
		<tbody id="EmailPhoneTable${uniqId}">
		</tbody>
		</table>
		</div>


		<!-------------------------------------------------------------->


		<div class="col-md-12"style="margin:10px 0px">
		<div class="col-md-3" style="float:left !important">
		<label>Date type</label>
		<select name="DateField${uniqId}" id='DateField${uniqId}' class="form-control" onchange="SetReminderDate(this.value,'${uniqId}')">
		<option value="">Select Date</option>
		${dateoptions}
		</select>
		</div>
		<div class="col-md-3" style="float:left !important">
		<label style="">Date</label>



		<div class="form-group mb-0">
		<input name="RemDate${uniqId}" id="RemDate${uniqId}" value="${datetime}" class="form-control flatpickr flatpickr-input active" type="text" readonly="readonly" onclick="removeSelectPicker()"onchange="updateTime('${uniqId}')">
		</div>
		</div>

		<div class="col-md-3" style="float:left !important">
		<label style="">Time</label>
		<select class="form-control" name="RemTime${uniqId}" id='RemTime${uniqId}' onchange="calculateReminderTime('${uniqId}')">
		<option value="">Select Time</option>
		<option  value="60" >1 minute prior</option>
		<option  value="300">5 minutes prior</option>
		<option  value="600">10 minutes prior</option>
		<option  value="900">15 minutes prior</option>
		<option value="1800">30 minutes prior</option>
		<option  value="3600">1 hour prior</option>
		<option  value="7200">2 hours prior</option>
		<option  value="10800">3 hours prior</option>
		<option  value="18000">5 hours prior</option>
		<option  value="86400">1 day prior</option>
		<option  value="604800">1 week prior</option>
		<option  value="1209600">2 weeks prior</option>
		<option  value="2592000">1 month prior</option>
		</select>
		</div>

		<div class="col-md-3" style="float:left !important">
		<label style="">Reminder Time</label>
		<input type="" class="form-control" name="ReminderTime${uniqId}" id='ReminderTime${uniqId}' readonly value="${DateTimeDisplay}">
		</div>

		</div>



		<div class="col-md-12">

		<div class="col-md-2" style="float:left !important">
		<div class="n-chk">
		<label class="new-control new-checkbox checkbox-info" style="padding-left:0px">
		<input type="checkbox" class="new-control-input" name="popup${uniqId}" id="popup${uniqId}">
		<span class="new-control-indicator"></span>Popup
		</label>
		</div>

		</div>

		<div class="col-md-2" style="float:left !important">
		<div class="n-chk">
		<label class="new-control new-checkbox checkbox-info" style="padding-left:0px">
		<input type="checkbox" class="new-control-input" name="desktop${uniqId}" id="desktop${uniqId}">
		<span class="new-control-indicator"></span>Desktop
		</label>
		</div>
		</div>

		<div class="col-md-2" style="float:left !important">
		<div class="n-chk">
		<label class="new-control new-checkbox checkbox-info" style="padding-left:0px">
		<input type="checkbox" class="new-control-input" name="email${uniqId}" id="email${uniqId}">
		<span class="new-control-indicator"></span>E-Mail
		</label>
		</div>
		</div>

		<div class="col-md-2" style="float:left !important">
		<div class="n-chk">
		<label class="new-control new-checkbox checkbox-info" style="padding-left:0px">
		<input type="checkbox" class="new-control-input" name="sms${uniqId}" id="sms${uniqId}" >
		<span class="new-control-indicator"></span>SMS
		</label>
		</div>
		</div>

		<div class="col-md-2" style="float:left !important">
		<div class="n-chk">
		<label class="new-control new-checkbox checkbox-info" style="padding-left:0px">
		<input type="checkbox" class="new-control-input" name="whatsapp${uniqId}" id="whatsapp${uniqId}">
		<span class="new-control-indicator"></span>WhatsApp
		</label>
		</div>
		</div>

		<div class="col-md-2" style="float:left !important">
		<div class="n-chk">
		<label class="new-control new-checkbox checkbox-info" style="padding-left:0px">
		<input type="checkbox" class="new-control-input" id="mobileapp${uniqId}" name="mobileapp${uniqId}">
		<span class="new-control-indicator"></span>MobileApp
		</label>
		</div>
		</div>

		</div>


		<!--<div class="col-md-12" style="margin-top: 10px;padding-left: 30px;" align="center">
		<button class="btn btn-danger" onclick="RemoveRemainder('${uniqId}')">Remove Reminder</button>
		</div>-->
		</div>`;
		$('#RemaindersDiv').append(div);
		var f2 = flatpickr(document.getElementById('RemDate'+uniqId), {
			enableTime: true,
			dateFormat: "Y-m-d H:i",
			minDate: datetime,
			minuteIncrement:1
		});
		DisplayEmailsList(uniqId);
	}

	RemoveRemainder=(id)=>{
		var elem = document.getElementById('RemDiv'+id);
		elem.parentNode.removeChild(elem);

		RemainderIds=$('#remainderIds').val().split(",");

		newremainderIds=RemainderIds.filter((remid)=>{
			return remid!=id;
		});

		RemainderIds=$('#remainderIds').val(newremainderIds);
	}

	SetReminderDate=(value,uniqid)=>{

		if(value=='')
		{
			var currentdate = new Date(); 
			var value = currentdate.getFullYear() + "-"
			+ (currentdate.getMonth()+1)  + "-" 
			+currentdate.getDate() + " "
			+ currentdate.getHours() + ":"  
			+ currentdate.getMinutes();
		}

		$('#RemDate'+uniqid).val(value);

		$('#RemDate'+uniqid).trigger("change");

		$('#RemTime'+uniqid).val('').change();
	}

	SaveReminders=()=>{
		ModuleId=$('#ModuleId').val();
		RowId=$('#RowId').val();
		remaindersForm=document.getElementById('remaindersForm');
		formData=new FormData(remaindersForm);
		formData.append("ModuleId",ModuleId);
		formData.append("RowId",RowId);
		$.ajax({
			type:"post",
			url:"{{url('SaveReminders')}}",
			data:formData,
			processData:false,
			cache:false,
			contentType: false,
			beforeSend:()=>{
				$('#SaveReminderbtn').attr("disabled",true);
			},
			success:response=>{
				res=JSON.parse(response);
				if(res.type=="success")
				{
					swalWithBootstrapButtons.fire(
						'Reminders',
						res.status,
						'success'
						)
				}
				else
				{

					swalWithBootstrapButtons.fire(
						'Reminders',
						res.status,
						'error'
						)
				}
				$('#remainderIds').val('');
				$('#SaveReminderbtn').attr("disabled",false);
				$('#RemaindersDiv').html('');
				$('#RemainderModal .close').click();
			}

		});
	}

	GetRelatedRows=(reminderId)=>{

		if($('#RelatedModule'+reminderId+' :selected').val()=='')
		{
			$('#relatemodal'+reminderId).css("display","none");
		}
		else
		{
			$('#relatemodal'+reminderId).css("display","block");
		}
		$('#relatedNameVal'+reminderId).val('');
		$('#relatedName'+reminderId).val('');
		SearchFilters(reminderId);
	}
	function SearchFilters(reminderId)
	{

		var ModuleId = $('#RelatedModule'+reminderId+' :selected').val();
		console.log("Getting Filters...");
		$.ajaxSetup({
			headers: {
				'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
			}
		});

		var formData = {
			ModuleId: ModuleId,
			source: "Search",
		};
		var type = "POST";
		var urls = "{{ url('SearchGetFields') }}";
		$.ajax({
			type: type,
			url: urls,
			data: formData,
			beforeSend:function() {
				$('#ShowFields'+reminderId).html("<div class='loader dual-loader mx-auto'></div>");
			},
			success: function (results) {
				$('#ShowFields'+reminderId).html(results);
			},
			error: function (data) {
				$('#ShowFields').html("");
			}
		});
	}

	function SearchAll(reminderId)
	{
		var ModuleId = $('#RelatedModule'+reminderId+' :selected').val();
		var limit = $('#limit').val();
		var field_name = $('#field_name').val();
		var sort_order = $('#sort_order').val();
		var page_num = $('#page_num').val();
		var mode='RelatedReminderSearch';
		var RemId=reminderId;
		if(limit==undefined || limit=="")
			limit=10;

		if(page_num==undefined || page_num=="")
			page_num=1;

		if(sort_order==undefined || sort_order=="")
			sort_order="DESC";

		if(field_name==undefined || field_name=="")
			field_name="CreatedDate";

		var searchForm = JSON.stringify( $('#SearchForm').serializeArray() );

		var formData = {
			data: searchForm,
			source: ModuleId,
			ModuleId: ModuleId,
			page_num: page_num,
			limit: limit,
			field_name: field_name,
			sort_order: sort_order,
			mode: mode,
			RemId:RemId
		};

		var ajax_url = "{{ url('FindMePagination') }}";
		$.ajax({
			url: ajax_url,
			type: 'POST',
			data: formData,
			headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
			beforeSend:function() {
				$('#loading').html("<div class='loader dual-loader mx-auto'></div>");
			},
			success: function(result) {
				console.log("Success...");
				$('#loading').html('');
				$('#ShowResults'+reminderId).html(result);
			},
			error: function (data) {
				$('#ShowResults'+reminderId).html("");
			}
		});
	}

	function Select_me(result,reminderId)
	{
		rowId=result.RowId;
		displayVal=result.DisplayName;
		$('#relatedNameVal'+reminderId).val(rowId);
		$('#relatedName'+reminderId).val(displayVal);
		Snackbar.show({
			text: "Selected", 
			pos: 'top-right',
		});
		$('#relatemodal'+reminderId).css("display","none");
	}

	DisplayInviteType=(reminderId,value)=>
	{
		if(value=="1")
		{
			$('#AssignedToValDiv'+reminderId).css("display","block");
			$('#RelatedModuleDiv'+reminderId).css("display","none");
			$('#RelatedModuleValDiv'+reminderId).css("display","none");
			$('#RelatedModule'+reminderId).val('').change();
		}
		else
		{
			$('#AssignedToValDiv'+reminderId).css("display","none");
			$('#RelatedModuleDiv'+reminderId).css("display","block");
			$('#RelatedModuleValDiv'+reminderId).css("display","block");
		}
		$('#EmailPhoneTable'+reminderId).html('');

		if(value=="1")
		{
			DisplayEmailsList(reminderId);
		}
	}

	DisplayEmailsList=(reminderId)=>{
		emailids=$("#invitee"+reminderId+" :selected").val();
		emailName=$("#invitee"+reminderId+" :selected").html();
		Emails=`
		<div class="n-chk">
		<label class="new-control new-checkbox checkbox-info" style="padding-left:0px">
		<input type="checkbox" class="new-control-input" name="Emails${reminderId}" value='${emailids}' checked readonly>
		<span class="new-control-indicator"></span>${emailids}
		</label>
		</div>
		`;
		if(emailids!='')
		{
			$('#EmailPhoneTable'+reminderId).html(`<tr class="tr${ModuleId}${reminderId}"><td>${emailName}</td><td>${Emails}</td><td></td></tr>`);
		}
		else
		{
			$('#EmailPhoneTable'+reminderId).html('');

		}
	}

	GetEmailPhone=(ModuleId,RowId,RemId)=>{
		if($('#'+ModuleId+RowId+RemId).is(" :checked"))
		{
			$.ajax({
				type:"post",
				url:"{{url('GetEmailPhone')}}",
				data:{ModuleId,RowId,RemId},
				success:response=>{
					emailPhone=JSON.parse(response);
					phoneArray=emailPhone.Phone;
					EmailArray=emailPhone.emails;
					ReFerenceFieldValue=emailPhone.ReFerenceFieldValue;
					Emails='';
					Phones='';
					EmailArray.forEach((emailId)=>
					{
						Emails+=`
						<div class="n-chk Emails${ModuleId}${RowId}${RemId}">
						<label class="new-control new-checkbox checkbox-info" style="padding-left:0px">
						<input type="checkbox" class="new-control-input" name="Emails${RemId}[]" value='${emailId},${ModuleId},${RowId}' checked readonly>
						<span class="new-control-indicator"></span>${emailId}
						</label>
						</div>
						`;
					});
					phoneArray.forEach((PhoneNum)=>
					{
						Phones+=`
						<div class="n-chk Phones${ModuleId}${RowId}${RemId}">
						<label class="new-control new-checkbox checkbox-info" style="padding-left:0px">
						<input type="checkbox" class="new-control-input" name="Phones${RemId}[]" value='${PhoneNum},${ModuleId},${RowId}' checked readonly>
						<span class="new-control-indicator"></span>${PhoneNum}
						</label>
						</div>
						`;
					});

					if(phoneArray.length!=0 || EmailArray.length!=0)
					{
						$('#EmailPhoneTable'+RemId).append(`<tr class="tr${ModuleId}${RowId}${RemId}"><td>${ReFerenceFieldValue}</td><td>${Emails}</td><td>${Phones}</td></tr>`);
					}
				}
			});
		}
		else
		{
			$(`.tr${ModuleId}${RowId}${RemId}`).remove();
		}
	}

	updateTime=(uniqId)=>{
		currentValue=$('#RemDate'+uniqId).val();
		newDate=currentValue.split(" ");
		DatesArray=newDate[0].split("-");
		TimeArray=[];
		if(newDate[1]===undefined)
		{
			TimeArray[0]=00;
			TimeArray[1]=00;
		}
		else
		{
			TimeArray=newDate[1].split(":");
		}

		dispDate=DatesArray[2];
		dispMonth=DatesArray[1];
		dispyear=DatesArray[0];

		DispHour=TimeArray[0];
		DispMin=TimeArray[1];

		DispDateTime=dispDate+"-"+dispMonth+"-"+dispyear+" "+DispHour+":"+DispMin;

		dateField=document.getElementById("ReminderTime"+uniqId);
		dateField.value=DispDateTime;
	}

	calculateReminderTime=(uniqId)=>
	{

		RemTime=$('#RemTime'+uniqId+" :selected").val();

		if(RemTime=='')
		{
			RemTime=0;
		}
		currentValue=$('#RemDate'+uniqId).val();

		newDate=currentValue.split(" ");

		DatesArray=newDate[0].split("-");

		TimeArray=[];
		if(newDate[1]===undefined)
		{
			TimeArray[0]=00;
			TimeArray[1]=00;
		}
		else
		{
			TimeArray=newDate[1].split(":");
		}

		dispDate=DatesArray[2];
		dispMonth=DatesArray[1];
		dispyear=DatesArray[0];

		DispHour=TimeArray[0];
		DispMin=TimeArray[1];

		myRemDate= new Date(dispyear, dispMonth-1, dispDate, DispHour, DispMin, 0, 0);
		myRemDate=myRemDate.getTime()/1000;
		myRemDate=(Number(myRemDate)-Number(RemTime))*1000;
		myNewRemtime=new Date(myRemDate);
		updateNewTime(myNewRemtime,uniqId);
	}

	updateNewTime=(currentdate,uniqId)=>
	{
		var datetime = currentdate.getFullYear() + "-"
		+ (currentdate.getMonth()+1)  + "-" 
		+currentdate.getDate() + " "
		+ currentdate.getHours() + ":"  
		+ currentdate.getMinutes();
		$('#RemDate'+uniqId).val(datetime);

		var DateTimeDisplay=currentdate.getDate()+"-"
		+ (currentdate.getMonth()+1)  + "-" 
		+ currentdate.getFullYear() + " "
		+ currentdate.getHours() + ":"  
		+ currentdate.getMinutes();
		$('#ReminderTime'+uniqId).val(datetime);
	}

	checkparent=(fieldname,fieldValue)=>
	{
		if(fieldValue=="")
		{
			return false;
		}
		var ModuleId = $('#ModuleId').val();
		$.ajax({
			type:"post",
			url:'{{url("verifyChildExists")}}',
			data:{fieldname:fieldname,fieldValue:fieldValue,ModuleId:ModuleId},
			headers:{'X-CSRF_TOKEN':$('meta[name="csrf-token"]').attr('content')},
			dataType: "json",
			success:function(response)
			{
				if(response.field!="")
				{
					$('#'+response.field).empty();
					$('#'+response.field).append(response.dropdown);
				}
			},
			error:function(error)
			{
				console.log("error:"+JSON.stringify(error))
			}
		});
	}

	createEmailTEmplate=()=>{

		url="{{url('Create-EmailTemplates')}}"+"?source=Reminder";
		new_window=window.open(url,"","left=100,top=100,width=800,height=800");
		new_window.onbeforeunload = function()
		{ 

			$.ajax({
				type:"post",
				url:"{{url('GetEmailTemplates')}}",
				beforeSend:()=>{

				},
				success:(response)=>{
					templatesList=JSON.parse(response);
					templateOptionsList='<option value="">Select Template</option>';
					templatesList.forEach((template)=>{

						templateOptionsList+=`<option value="${template.EmailTemplatesId}"> ${template.Name}</option>`;
					}); 

					$('.emailtemplate').each(function(){

						$(this).empty();
						$(this).append(templateOptionsList);
					});

				}
			});
		}
	}

	LoadReminders=()=>{
		RowId=$('#RowId').val();
		ModuleId=$('#ModuleId').val();
		$.ajax({
			type:"post",
			url:"{{url('RemindersList')}}",
			data:{ModuleId,RowId},
			beforeSend:()=>{

			},
			success:(response)=>{
				reminders=`<table class="table table-bordered table-h0ver">
				<thead>
				<tr>
				<th>Slno</th>
				<th>Phone/E-mail</th>
				<th>Reminder Type</th>
				<th>Template</th>
				<th>Date & Time</th>
				<th>Delete</th>
				</tr>
				</thead>
				`;

				var currentdate = new Date(); 
				var datetime = currentdate.getFullYear() + "-"
				+ (currentdate.getMonth()+1)  + "-" 
				+currentdate.getDate() + " "
				+ currentdate.getHours() + ":"  
				+ currentdate.getMinutes();
				EmailTemplatesList=JSON.parse('');

				Notification=["PopUp","Desktop","E-mail","SMS","WhatsApp","MobileApp"];
				reminderOptions="";
				res=JSON.parse(response);
				slno=0;
				res.forEach(function(Reminder){
					slno++;

					reminderType=Reminder.Type;
					i=0;
					reminderOptions=`<select class="form-control" onchange="UpdateReminderType('${Reminder.ReminderId}',this.value)">`;
					Notification.forEach(function(noti){
						i++;
						if(i==reminderType)
						{
							selected="selected";
						}
						else
						{
							selected="";
						}
						reminderOptions+=`<option value="${i}" ${selected}>${noti}</option>`;
					});
					reminderOptions+="</select>"

					EmailTemplateOptions=`<select name="RemTemplate" id="RemTemplate" class="form-control" onchange="UpdateReminderTemplate('${Reminder.ReminderId}',this.value)">`;
					EmailTemplatesList.forEach((EmailTemplate)=>{

						if(EmailTemplate.EmailTemplatesId==Reminder.TemplateId)
						{
							selected="selected";
						}
						else
						{
							selected="";
						}

						EmailTemplateOptions+=`
						<option value="${EmailTemplate.EmailTemplatesId}" ${selected}>${EmailTemplate.Name}</option>
						`;
					});
					EmailTemplateOptions+="</select>";
					reminders+=`
					<tr>
					<td>${slno}</td>
					<td>${Reminder.NotifyTo}</td>
					<td>${reminderOptions}</td>
					<td>${EmailTemplateOptions}</td>
					<td>
					<div class="form-group mb-0">
					<input name="RemDate" id="RemDate" value="${Reminder.NotifyOn}" class="form-control flatpickr flatpickr-input active remtime" type="text" readonly="readonly" onchange="UpdateReminderTime('${Reminder.ReminderId}',this.value)">
					</div>
					</div>
					</td>
					<td>
					<div class="icon-container" style="text-align: center;" onclick="DeleteReminder('${Reminder.ReminderId}')">
					<svg  style="cursor:pointer" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg><span class="icon-name"></span>
					</div>
					</td>
					</tr>
					`;

				});
				reminders+=`</table>`;
				$('#Remainderslist').html(reminders);

				$('.remtime').each(function(){
					picker=$(this);
					var timePicker = flatpickr(picker, {
						enableTime: true,
						dateFormat: "Y-m-d H:i",
						minDate: datetime,
						minuteIncrement:1
					});
				});
			}
		});
	}

	UpdateReminderType=(id,value)=>
	{
		$.ajax({
			type:"POST",
			url:"{{url('UpdateReminderType')}}",
			data:{id,value},
			success:(response)=>{
				res=JSON.parse(response);

				swalWithBootstrapButtons.fire(
					'Reminders',
					res.type,
					'error'
					)
			}   
		});
	}

	UpdateReminderTemplate=(id,value)=>
	{
		$.ajax({
			type:"POST",
			url:"{{url('UpdateReminderTemplate')}}",
			data:{id,value},
			success:(response)=>{
				res=JSON.parse(response);
				swalWithBootstrapButtons.fire(
					'Reminders',
					res.type,
					'error'
					)
			}   
		});
	}

	DeleteReminder=(id)=>
	{
		Swal.fire({
			title: 'Are you sure?',
			text: "You won't be able to revert this!",
			icon: 'warning',
			showCancelButton: true,
			confirmButtonText: 'Yes, delete it!',
			cancelButtonText: 'No, cancel!',
			reverseButtons: true
		}).then((result) => {
			if (result.isConfirmed) {
				$.ajax({
					type:"POST",
					url:"{{url('UpdateReminderTime')}}",
					data:{id},
					success:(response)=>{
						res=JSON.parse(response);
						swalWithBootstrapButtons.fire(
							'Reminders',
							res.type,
							'error'
							)
						LoadReminders();
					}   
				});
			} 
		})
	}

	UpdateReminderTime=(id,value)=>
	{
		$.ajax({
			type:"POST",
			url:"{{url('UpdateReminderTime')}}",
			data:{id,value},
			success:(response)=>{
				res=JSON.parse(response);

				swalWithBootstrapButtons.fire(
					'Reminders',
					res.type,
					'error'
					)
			}   
		});
	}

	composeMail=async (EmailId,source,ModuleId,RowId)=>{
		$('#m-to').empty();

		if(EmailId)
		{
			$('#m-to').append(`<option value="${EmailId}" selected>${EmailId}</option>`);
		}



		$('#ComposeMailModal').modal("show");


		

		if(ModuleId)
		{
			await getAssociatedMailIds(ModuleId,RowId);
			await getMailSubject(ModuleId,RowId);
			await getMailContent(ModuleId,RowId);
		}
		
		CKEDITOR.replace("editor-container");
		CKEDITOR.instances['editor-container'].on('blur',UpdateEmailContent_d);

		



		$('#viewMailsDiv').css("display","none");
		$('#viewMailsDiv2').css("display","block");


		// return;

		try
		{
			DraftMail=await getDraftEmail();
			// return;
			try{
				await getDraftContents();
			}
			catch(e)
			{
				await CreateDraft_d();
				await UpdateMailSubject_d();
				await getSignature();
				
			}
		}
		catch(e){

			try
			{  

				await CreateDraft_d();
				await UpdateMailSubject_d();
				await getSignature();
				$('#m-cc').empty();
			}catch(e){}
		}

		try{

			RowId=$('#RowId').val();
			await UpdateEmailData('RowId',RowId);
			if(source)
			{
				await CustomMailData();
			}

			

			await UpdateToMailId_d();
			await UpdateMailSubject_d();


		}catch(e){}
	}


	getMailSubject=(ModuleId,RowId)=>
	{
		return new Promise((resolve,reject)=>{

			if(ModuleId=="806867ab-96a5-11eb-948a-56b1773fd56f")//ticketModule
			{
				$.ajax({
					type:"post",
					url:"{{url('getMailSubject')}}",
					data:{ModuleId,RowId},
					beforeSend:()=>{},
					success:response=>{

						// console.log(response);
						$('#m-subject').val(response);
						resolve();


					}
				});
			}
			else
			{
				resolve();
			}

		});
	}


	getMailContent=(ModuleId,RowId)=>
	{
		return new Promise((resolve,reject)=>{



			if(ModuleId=="806867ab-96a5-11eb-948a-56b1773fd56f")//ticketModule
			{

				$.ajax({
					type:"post",
					url:`{{url('GetMailContent')}}/${ModuleId}/${RowId}`,
					data:{ModuleId,RowId},
					beforeSend:()=>{},
					success:response=>{
						console.clear();
						// console.log('Email COntent');
						// console.log(response);

						$('#editor-container').html(response);
						resolve();


					}
				});
			}
			else
			{
				resolve();
			}

		});
	}

	getSignature=()=>
	{
		// console.log("get signature called");

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

			if(!$('#signatureAdded').val())
			{

			// console.log("getting signature..");

				$.ajax({
					type:"post",
					url:"{{url('GetUserSignature')}}",
					beforeSend:()=>{},
					success:response=>{

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

						resolve();


					}
				});

			}
			else
			{
				resolve();
			}


		})

		



	}

	getAssociatedMailIds=(ModuleId,RowId)=>
	{
		toAddressList="";
		return new Promise((resolve,reject)=>{

			console.log(`ModuleId=${ModuleId} RowId ${RowId}`)

			$.ajax({
				type:"post",
				url:"{{url('getAssociatedMailIds')}}",
				data:{ModuleId,RowId},
				beforeSend:()=>{},
				success:response=>{

					res=JSON.parse(response);
					console.log(`response ${res}`);

					res.map((to)=>{
						toAddressList+=`<option >${to}</option>`;
					});

					$('#m-to').append(toAddressList)

					resolve();
				}
			});

		});
	}


	CustomMailData=()=>
	{
		return new Promise((resolve,reject)=>{
			RowId=$('#RowId').val();
			ModuleId=$('#ModuleId').val();

			if(ModuleId=="806867ab-96a5-11eb-948a-56b1773fd56f")
			{
				$.ajax({
					type:"post",
					url:"{{url('GetResult')}}",
					data:{RowId,ModuleId},
					beforeSend:()=>{},
					success:response=>{
						$('#m-subject').val(response);
						UpdateMailSubject_d();
						resolve();
					}
				});
			}

		})
	}

	getDraftEmail=()=>
	{
		return new Promise((resolve,reject)=>{
			CKEDITOR.instances['editor-container'].on('blur',UpdateEmailContent_d);
			const draftId=$('#draftId').val();

			if(draftId=='')
			{
				reject();

			}
			else
			{
				resolve();
			}
		});
	}

	getDraftContents=()=>
	{
		return new Promise((resolve,reject)=>{
			draftId=$('#draftId').val();
			if(draftId!='')
			{
				var type = "POST";
				var ajaxurl = "{{url('GetDraft')}}";
				$.ajax({
					type: type,
					url: ajaxurl,
					data:{draftId},
					success: function (result) 
					{
						res=JSON.parse(result);
						to=res.ToAddress;
						cc=res.CcAddress;
						Subject=res.Subject;
						content=res.ContentTags;
						tempto=$('#m-to').val();
						if(to!=tempto)
						{
							$('#draftId').val('');
							reject();
							return false;
						}

						if(to)
						{
							$('#m-to').empty();
							$('#m-to').append(`<option value="${to}" selected>${to}</option>`);

						}



						// $('#m-to').val(to);
						$('#m-cc').val(cc);
						$('#m-subject').val(Subject);
						CKEDITOR.instances['editor-container'].setData(content);
						resolve();
					}
				});
			}
		});
	}

	UpdateMailFrom=()=>{
		draftId=$('#draftId').val();
		from=$('#m-form').val();
		if(from!='')
		{
			var type = "POST";
			var ajaxurl = "{{url('UpdateMailFrom')}}";
			$.ajax({
				type: type,
				url: ajaxurl,
				data:{from,draftId},
				success: function (result) 
				{
					console.log(result);
				}
			});
		}

	}

	UpdateToCCId_d=()=>
	{
		toCCId=[];
		$('#m-cc :selected').each(function(){
			toCCId.push($(this).val());
		});
		toCCId=toCCId.join(",");
		draftId=$('#draftId').val();
		if(toCCId!='')
		{
			var type = "POST";
			var ajaxurl ="{{url('UpdateToCCId')}}";
			$.ajax({
				type: type,
				url: ajaxurl,
				data:{toCCId,draftId},
				success: function (result) 
				{
					console.log(result);
				}
			});
		}
	}

	UpdateToBCCId=()=>{
		toBCCId=[];

		$('#m-bcc :selected').each(function(){

			toBCCId.push($(this).val());

		});

		toBCCId=toBCCId.join(",");

		draftId=$('#draftId').val();
		if(toBCCId!='')
		{
			var type = "POST";
			var ajaxurl ="{{url('UpdateToBCCId')}}";
			$.ajax({
				type: type,
				url: ajaxurl,
				data:{toBCCId,draftId},
				success: function (result) 
				{
					console.log(result);
				}
			});
		}
	}

	UpdateEmailContent_d=()=>
	{
		draftId=$('#draftId').val();
		messagetype = CKEDITOR.instances['editor-container'].getData();
		message=CKEDITOR.instances['editor-container'].editable().getText();
		if(message!='')
		{
			var type = "POST";
			var ajaxurl = "{{url('UpdateMailContent')}}";
			$.ajax({
				type: type,
				url: ajaxurl,
				data:{message,messagetype,draftId},
				success: function (result) 
				{
					console.log(result);
				}
			});
		}
	}

	CreateDraft_d=()=>
	{
		return new Promise((resolve,reject)=>{
			from=$('#m-form :selected').val();
			RowId=$('#RowId').val();
			ModuleId= $('#ModuleId').val();
			var type = "POST";
			var ajaxurl ="{{url('SaveDraft')}}";



			$.ajax({
				type: type,
				url: ajaxurl,
				data:{from,RowId,ModuleId},
				success: function (result) 
				{
					$('#draftId').val(result);
					resolve();
				}
			});
		});

	}

	UpdateToMailId_d=()=>
	{
		return new Promise((resolve,reject)=>{
			toAddress=[];
			$('#m-to :selected').each(function(){
				toAddress.push($(this).val());
			});
			toMailId=toAddress.join(',');

			draftId=$('#draftId').val();
			if(toMailId!='')
			{

				console.log(`updating to mail id ${toMailId}`)

				var type = "POST";
				var ajaxurl = "{{url('UpdateToMailId')}}";
				$.ajax({
					type: type,
					url: ajaxurl,
					data:{toMailId,draftId},
					success: function (result) 
					{
						resolve();
					}
				});
			}
		});

	}

	UpdateMailSubject_d=()=>
	{
		
		subject=$('#m-subject').val();
		draftId=$('#draftId').val();
		if(subject!='')
		{
			var type = "POST";
			var ajaxurl ="{{url('UpdateMailSubject')}}";
			$.ajax({
				type: type,
				url: ajaxurl,
				data:{subject,draftId},
				success: function (result) 
				{
					console.log(result);
				}
			});
		}
	}

	SaveEmail=()=>
	{
		subject=$('#m-subject').val();
		messagetype = CKEDITOR.instances['editor-container'].getData();
		message=CKEDITOR.instances['editor-container'].editable().getText();

		to=[];
		cc=[];
		$('#m-to :selected').each(function(){

			to.push($(this).val());

		});
		$('#m-cc :selected').each(function(){

			cc.push($(this).val());

		});
		to=to.join(',');
		cc=cc.join(',');

		if(to=="" || subject=="" || message=="")
		{

			swalWithBootstrapButtons.fire(
				'Error',
				"Please fill all the fields!",
				'error'
				)
			return false;
		}

		$.ajaxSetup({
			headers: {
				'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
			}
		});


		const draftId=$('#draftId').val();
		var type = "POST";
		var ajaxurl = "{{url('SaveEmail')}}";
		$.ajax({
			type: type,
			url: ajaxurl,
			data:{ to,cc,subject,messagetype,message,draftId},
			success: function (result) 
			{
				swalWithBootstrapButtons.fire(
					'Email!',
					"Saved Successfully!",
					'success'
					)

				$('#ComposeMailModal .close').click();

				$('#draftId').val('');
			},

		});
	}

	DiscardMail=()=>
	{
		draftId=$('#draftId').val();
		var type = "POST";
		var ajaxurl = "{{url('DiscardMail')}}";
		$.ajax({
			type: type,
			url: ajaxurl,
			data:{draftId},
			success: function (result) 
			{
				swalWithBootstrapButtons.fire(
					'Email!',
					result,
					'success'
					)

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

	UpdateSendMail=()=>
	{
		draftId=$('#draftId').val();
		var type = "POST";
		var ajaxurl = "{{url('UpdateSendMail')}}";

		to=[];
		cc=[];
		$('#m-to :selected').each(function(){
			to.push($(this).val());
		});
		$('#m-cc :selected').each(function(){
			cc.push($(this).val());

		});
		to=to.join(',');
		cc=cc.join(',');

		subject=$('#m-subject').val();

		messagetype = CKEDITOR.instances['editor-container'].getData();
		message=CKEDITOR.instances['editor-container'].editable().getText();

		if(to=="")
		{
			Swal.fire({
				icon: 'error',
				title: 'Please fill To mail address!',
			});

			return false;
		}

		if(subject=="")
		{
			Swal.fire({
				icon: 'error',
				title: 'Please fill mail Subject!',
			});
			return false;
		}

		if(message=="")
		{
			Swal.fire({
				icon: 'error',
				title: 'Please fill  mail Content!',
			});

			return false;
		}

		$.ajax({
			type: type,
			url: ajaxurl,
			data:{draftId},
			success: function (result) 
			{ 
				Swal.fire({
					icon: 'success',
					title: result,
				});

				$('#draftId').val('');
				$('#AttachmentsList').html('');
				$('#ComposeMailModal .close').click();
				templateId=$('#template :selected').val();
				$('#template').val('').change();
				SendNewMail(draftId,templateId);
			}
		});
	}

	SendNewMail=(draftId,templateId='')=>
	{
		source="compose";
		$.ajax({
			type: "post",
			url: "{{url('SendNewMail')}}",
			data:{draftId,templateId,source},
			success: function (result) 
			{
				Swal.fire({
					icon: 'success',
					title: result,
				});
				$('#draftId').val('');
			}
		});
	}

	ShowTimeInput=()=>
	{

		to=[];
		cc=[];
		$('#m-to :selected').each(function(){

			to.push($(this).val());

		});
		$('#m-cc :selected').each(function(){

			cc.push($(this).val());

		});
		to=to.join(',');
		cc=cc.join(',');


		subject=$('#m-subject').val();
		messagetype = CKEDITOR.instances['editor-container'].getData();
		message=CKEDITOR.instances['editor-container'].editable().getText();

		if(to=="")
		{
			Swal.fire({
				icon: 'error',
				title: "Please fill To mail address!",
			});

			return false;
		}

		if(subject=="")
		{

			Swal.fire({
				icon: 'error',
				title: "Please fill mail Subject!",
			});
			return false;
		}

		if(message=="")
		{
			Swal.fire({
				icon: 'error',
				title:"Please fill mail Content!",
			});

			return false;
		}
		$('#timePickerDiv').css("display","block");
	}
	SendLater=()=>{
		draftId=$('#draftId').val();
		sendDate=$('#MailTime').val();
		$.ajax({
			type: "post",
			url: "{{url('SendMailLater')}}",
			data:{draftId,sendDate},
			success: function (result) 
			{
				Swal.fire({
					icon: 'success',
					title:result
				});

				$('#draftId').val('');
			}
		});
		$('#ComposeMailModal .close').click();
		$('#timePickerDiv').val("");
		$('#timePickerDiv').css("display","none");
	}

	UpdateDraftId=(draftId)=>
	{
		$('#draftId').val(draftId);
	}


	uploadAttachments=(attachmentsFile)=>{

		EmailForm=new FormData;
		draftId=$('#draftId').val();
		for(i=0;i<attachmentsFile.files.length;i++)
		{
			EmailForm.append("Attachments"+i,attachmentsFile.files[i]);
		}
		EmailForm.append("DraftId",draftId);

		$.ajax({
			url:"{{url('UploadAttachments')}}" ,
			type: 'POST',
			data: EmailForm,
			mimeType: "multipart/form-data",
			contentType: false,
			cache: false,
			processData: false,
			beforeSend:function()
			{
				$('#btn-send1').attr("disabled",true);
			},
			success:function(response)
			{

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

				res.forEach((attch)=>{
					console.log(attch.fileName);

					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);
				$('#mail_File_attachment').val('');
				$('#btn-send1').attr("disabled",false);

			}
		});
	}

	RemoveAttachment=(id)=>
	{
		draftId=$('#draftId').val();
		Swal.fire({
			title: 'Are you sure?',
			text: "You won't be able to revert this!",
			icon: 'warning',
			showCancelButton: true,
			confirmButtonColor: '#3085d6',
			cancelButtonColor: '#d33',
			confirmButtonText: 'Remove'
		}).then((result) => {
			if (result.isConfirmed) {
				$.ajax({
					url: "{{url('RemoveAttachments')}}" ,
					type: 'POST',
					data: {id,draftId},
					beforeSend:function()
					{
					},
					success:function(response)
					{
						console.log(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>`;
						});
						$('#AttachmentsList').html(attachmenstDiv);

					}
				});
			}
		})
	}

	GetDependentFieldsDetailView=(FieldName,DependentFieldId)=>
	{
		ModuleId=$('#ModuleId').val();
		RowId=$('#RowId').val();

		$.ajax({
			type:"post",
			url:"{{url('GetDependentFieldsDetailView')}}",
			data:{ModuleId,RowId,DependentFieldId},
			beforeSend:function(){},
			success:function(response)
			{
				$('#'+FieldName).html(response);
			}
		});
	}

	ViewMail= (draftId)=>{
		$.ajax({
			type:"post",
			url:"{{url('GetDraft')}}",
			data:{draftId},
			beforeSend:function(){
				$(`.font${draftId}`).removeClass('unread');
			},
			success:async function(response)
			{
				$('#LinkedMailId').val(draftId);

				$('#draftId').val('');
				$('#viewMailsDiv').css("display","block");
				$('#viewMailsDiv2').css("display","none");

				mail=JSON.parse(response);

				Content=mail.ContentTags;
				FromAddress=mail.FromAddress;

				To=mail.ToAddress;
				Subject=mail.Subject;
				$('#m-subject').val(Subject);

				CKEDITOR.replace("editor-container");

				CKEDITOR.instances['editor-container'].setData(Content);

				console.log(Content);

				try{
					await getDraftEmail();
				}
				catch(e)
				{
					await CreateDraft_d();
				}
			}
		});
	}

	getToMailAddress=(type)=>{
		draftId=$('#LinkedMailId').val();
		$.ajax({
			type:"post",
			url:"{{url('GetDraft')}}",
			data:{draftId},
			beforeSend:function(){

			},
			success:response=>{
				res=JSON.parse(response);
				toAddress=[];
				ccAddress=[];

				if(type=="reply")
				{
					toAddress.push(res.FromAddress);

					$('#m-subject').val(`RE : ${res.Subject}`);
				}
				else if(type=="replyAll")
				{

					toAddress=[];
					if(res.FromAddress!='')
					{
						toAddress.push(res.FromAddress);
					}

					if(res.CcAddress!='')
					{
						ccAddress=res.CcAddress.split(",");
					}

					if(res.SentToAddress!='')
					{
						SentTo=res.SentToAddress.split(",");
						SentTo.map(function(mailAdresss){
							ccAddress.push(mailAdresss);
						});
					}

					$('#m-subject').val(`RE : ${res.Subject}`);

				}
				else if(type=="forward")
				{
					$('#m-subject').val(`FWD : ${res.Subject}`);
					LoadMailAttachments();

				}

				mailAddressList=``;
				ccAddressList=``;
				$('#m-to').empty();
				$('#m-cc').empty();

				toAddress.map((to)=>{
					mailAddressList+=`<option selected>${to}</option>`;
				});

				ccAddress.map((to)=>{
					ccAddressList+=`<option selected>${to}</option>`;
				});


				$('#m-to').append(mailAddressList);
				$('#m-cc').append(ccAddressList);
				UpdateEmailContent_d();
				UpdateToMailId_d();
				UpdateToCCId_d();
				UpdateMailSubject_d();
			}
		});
	}

	document.addEventListener("DOMContentLoaded",()=>{
		setTimeout(()=>{
			$("#ComposeMailModal").on('hidden.bs.modal',()=> {
			});
			$("#m-to").select2({
				tags: true,
			});

			$("#m-cc").select2({
				tags: true,
			});
			$("#m-bcc").select2({
				tags: true,
			});

		},200);
	})

	displayMailAddresses=()=>{
		mails=[];
		$('#mailaddressess :selected').each(function(){

			mails.push($(this).val());

		});
	}

	LoadMailAttachments=()=>{
		LinkedMailId=$('#LinkedMailId').val();
		draftId=$('#draftId').val();
		$.ajax({
			type:"post",
			url:"{{url('LoadEmailAttachments')}}",
			data:{LinkedMailId,draftId},
			beforeSend:()=>{  console.log("Loading Attachments");},
			success:response=>{
				attachmenstDiv='';
				res=JSON.parse(response);

				res.forEach((attch)=>{
					console.log(attch.fileName);

					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);
				$('#mail_File_attachment').val('');
			}
		});
	}

	Mcube_Click2Call=(phoneNumber,exenumber,apiKey)=>{  

		url1="{{url('')}}"+"/api/Mcube_Click2Call";


		url=`https://mcube.vmc.in/api/outboundcall?apikey=${apiKey}&exenumber=${exenumber}&custnumber=${phoneNumber}&url=${url1}`;

		if(isNaN(phoneNumber) || phoneNumber.length!=10)
		{
			Snackbar.show({
				text: 'Invalid Phone Number',
				pos: 'top-right',
				actionTextColor: '#fff',
				backgroundColor: '#e7515a'
			});

			return false;
		}

		if(isNaN(exenumber) || exenumber.length!=10)
		{
			Snackbar.show({
				text: 'Invalid Executive Number',
				pos: 'top-right',
				actionTextColor: '#fff',
				backgroundColor: '#e7515a'
			});

			return false;
		}

		$.ajax({
			type:"get",
			url:url,
			beforeSend:()=>{
				console.clear();
			},
			success:response=>{
				console.log(response);
			}
		});
	}

	UpdateEmailData=(ColumnName,ColumnValue)=>{
		return new Promise((resolve,reject)=>{
			const draftId=$('#draftId').val();
			$.ajax({
				type: "post",
				url: "{{url('UpdateEmailData')}}",
				data:{draftId,ColumnName,ColumnValue},
				beforeSend:()=>{},
				success:response=>{
					if(ColumnName=="EmailTemplatesId")
					{
						res=JSON.parse(response);

						if(ColumnValue)
						{
							MailTemplateContent=res.MailTemplateContent;

							TemplateContent=MailTemplateContent.DescriptionHtml;
							TemplateSubject=MailTemplateContent.Name;
							console.clear();
							console.log('Email Rowid',TemplateContent);
							CKEDITOR.instances['editor-container'].setData(TemplateContent);
							$('#m-subject').val(TemplateSubject);
						}
						else
						{
							CKEDITOR.instances['editor-container'].setData('');
							$('#m-subject').val('');
						}
						setTimeout(()=>{
							UpdateEmailContent_d();
							UpdateMailSubject_d();
						},250)

					}
					resolve();
				},
			});
		});
	}
	
	//Email view conversation code and Compose Code
	
	ViewMailfromDetailView=(RowId,ModuleId)=>
	{
		$('#TempRowId').val(RowId);
		$('#TempModuleId').val(ModuleId);
		$('#EmailModuleId').val(ModuleId);
		console.log("{{$_SERVER['REMOTE_ADDR']}}");
		$.ajax({
			type:"post",
			url:"{{url('EmailTickets-ViewMail')}}",
			data:{ModuleId,RowId},
			beforeSend:()=>{
				$('#EmailBody').html(`<center> <div class="spinner-border text-primary align-self-center loader-lg">Loading...</div><center>`);

			},
			success:response=>{
				$('#EmailBody').html(response);
			}
		});
	}
	ConfigUsertModuleAssoc=(ModuleId,RowId)=>
	{
		$.ajax({
			type:"post",
			url:"{{url('ConfigUsertModuleAssoc')}}",
			data:{ModuleId,RowId},
			beforeSend:()=>{
				$('#DisplayUsers').html(`<center> <div class="spinner-border text-primary align-self-center loader-lg">Loading...</div><center>`);
			},
			success:response=>{
				$('#DisplayUsers').html(response);
			}
		});
	}
	SaveUserModAsso=(UserId,ModuleId,RowId)=>
	{
		var DisplayName="userMod"+UserId;
		var DeletedStatus=1;
		if(document.getElementById(DisplayName).checked == true){
			DeletedStatus = 0;
		}else{
			DeletedStatus=1;
		}
		$.ajax({
			type:"post",
			url:"{{url('SaveUserModAsso')}}",
			data:{ModuleId,RowId,UserId,DeletedStatus},
			beforeSend:()=>{
			},
			success:response=>{
				var txt = JSON.parse(response);
				Snackbar.show({
					text: txt.Message,
					pos: 'top-right'
				});
			}
		});
	}
	GetWhatsAppConversationLink=(UserNumber)=>
	{
		$.ajax({
			type:"post",
			url:"{{url('GetWhatsAppConversationLink')}}",
			data:{UserNumber},
			beforeSend:()=>{
				$('#DisplayWhatsAppConversationChat').html(`<center> <div class="spinner-border text-primary align-self-center loader-lg">Loading...</div><center>`);
			},
			success:response=>{
				$('#DisplayWhatsAppConversationChat').html(response);
			}
		});
	}
	GetWhatsAppMessage=(UserNumber,Page_num)=>
	{
		$.ajax({
			type:"post",
			url:"{{url('GetWhatsAppMessage')}}",
			data:{UserNumber,Page_num},
			beforeSend:()=>{
				$('#DisplayWhatsAppConversationChat').html(`<center> <div class="spinner-border text-primary align-self-center loader-lg">Loading...</div><center>`);
			},
			success:response=>{
				$('#DisplayWhatsAppConversationChat').html(response);
			}
		});
	}
	DisplayWhatsAppChat=(conversationLinkingId,Page_num)=>
	{
		$.ajax({
			type:"post",
			url:"{{url('DisplayWhatsAppChat')}}",
			data:{conversationLinkingId,Page_num},
			beforeSend:()=>{
				$('#DisplayWhatsAppChat').html(`<center> <div class="spinner-border text-primary align-self-center loader-lg">Loading...</div><center>`);
			},
			success:response=>{
				$('#DisplayWhatsAppChat').html(response);
			}
		});
	}
	GetWhatsAppMessageonTickets=(conversationLinkingId,Page_num)=>
	{
		$.ajax({
			type:"post",
			url:"{{url('GetWhatsAppMessageonTickets')}}",
			data:{conversationLinkingId,Page_num},
			beforeSend:()=>{
				$('#DisplayWhatsAppConversationChat').html(`<center> <div class="spinner-border text-primary align-self-center loader-lg">Loading...</div><center>`);
			},
			success:response=>{
				$('#DisplayWhatsAppConversationChat').html(response);
			}
		});
	}
</script>