@extends('layouts.header')
@section('content')
@php

if(Auth::user()->RefId==1)
{
	//echo "<pre>";
		//	print_r($FetchTemplates);
	//echo "</pre>";
}
//die();
//$TemplateId=$FetchTemplates->EmailTemplatesId;
$Name=$FetchTemplates->Name;
$Status=$FetchTemplates->Status;
$Description=$FetchTemplates->Description;
$Description=$FetchTemplates->DescriptionHtml;
$statusvaluea="";
$statusvalueI="";
@endphp
<!--  BEGIN CONTENT AREA  -->
<br>
<div class="page-header">
	<div class="breadcrumb-four">
		<ul class="breadcrumb">
			@php
			$Dashboard=url('dashboard');
			$Listurl=url('EmailTemplates');
			@endphp

			<li><a href="{{$Dashboard}}"><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-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg></a></li>
			<li >
				<a href="{{$Listurl}}" title="List Email  Template">
					<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-list"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg>List Email  Template</a>
				</li>
				<li class="active">
					<a href="" title="Create Email Template ">
						<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-plus"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>Update Email Template </a>
					</li>

				</ul>
			</div>
		</div>
		<div class="row">
			<div class="col-lg-12 col-md-12 layout-spacing">
				<div class="statbox widget box box-shadow">
					<div class="widget-header">
						<div class="row">
							<div class="col-xl-12 col-md-12 col-sm-12 col-12">
								<h4>Update Email-Templates</h4>
							</div>          
						</div>
					</div>
					<div class="widget-content widget-content-area">
						<div class="row">
							<div class="col-md-4">
								<label>Template Name</label> <br>
								<input type="text" class="form-control" name="TemplateName" id="TemplateName" value="{{$Name}}" placeholder="TemplateName">
								<input type="hidden" class="form-control" name="TemplateId" id="TemplateId" value="{{$FetchTemplates->EmailTemplatesId}}" >
							</div>
							<div class="col-md-4">
								<label>Status</label> <br>
								<select class="form-control" name="Status" id="Status">
									<option>--Select--</option>
									@if($Status==1)
									@php
									$statusvaluea="selected";
									$statusvalueI="";
									@endphp
									@elseif($Status==0)
									@php
									$statusvalueI="selected";
									$statusvaluea="";
									@endphp
									@endif
									<option value="1" {{$statusvaluea}}>Active</option>
									<option value="2" {{$statusvalueI}}>InActive</option>
								</select>
							</div>
						</div>

						<br>

						<div class="row">
							<div class="col-md-12">
								<label style="margin: 0px !important">Insert Variable</label> 
								<hr >
							</div>
						</div>
						<div class="row">
							<div class="col-md-4">
								<label>Modules</label>
								<select class="form-control" name="ModuleId" id="ModuleId" onchange="GetModuleFields ()">
									<option value="">--Select--</option>
									@foreach($allModules as $module)
									<option value="{{$module['ModuleId']}}">{{$module['ModuleName']}}</option>
									@endforeach
								</select>
							</div>
							<div class="col-md-4">
								<label>Field Name</label>
								<select class="form-control" name="FieldName" id="FieldName" style="margin-top: 10px !important" onchange="UpdateInsertVariable()">
									<option value="">--Select--</option>
								</select>
							</div>
							<div class="col-md-4">
								<label>Variable Name</label> <span class="text-primary"title="Insert Variable" onclick="insertTextAtCaret()"><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-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>
								<input type="text" name="VariableName" id='VariableName'class="form-control" onchange="updateTemplateVariable()"> 
							</div>
						</div>
						<!-- <div class="row">
							<div class="col-md-12" align="center">
								<button id='insertBtn' name="insertBtn"class="btn btn-primary" onclick="insertTextAtCaret()">Insert Variable</button>
							</div>
						</div> -->
						<br>
						<div class="row">
							<!-- <div class="col-lg-12 col-md-12 layout-spacing"> -->
								<div class="col-md-12">
									<!-- <div class="widget-content widget-content-area"> -->
										<label>Description</label> <br>
										<textarea id="TemplateContent" name="TemplateContent">{{$Description}}</textarea>
									</div>
									<!-- </div> -->
								</div>
								<br>
								<div class="row">
									<div class="col-md-12 text-center">
										<div class="form-group">
											<button type="button" class="btn btn-primary" id="mySubBtn" onclick="UpdateTemplates()">Submit</button> 
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!--  END CONTENT AREA  -->
				@endsection
				@php
				$siteurl=$_SERVER['HTTP_HOST'];
				//$url=explode(".",$siteurl);	// crm.bpm360.net
				@endphp
				<!-- <script type="text/javascript" src="https://{{$siteurl}}/cloud/public/cork/HTML/ltr/demo6/plugins/editors/quill/quill.js"></script>
					<script type="text/javascript" src="https://{{$siteurl}}/cloud/public/cork/HTML/ltr/demo6/plugins/editors/quill/custom-quill.js"></script> -->
					<script type="text/javascript">
						document.addEventListener('DOMContentLoaded',function(){
							CKEDITOR.replace("TemplateContent");
						})
						function UpdateTemplates()
						{
	//LoadWebDemogprahyFields
	var TemplateId=document.getElementById('TemplateId').value;
	var TemplateName=document.getElementById('TemplateName').value;
	var Status=document.getElementById('Status').value;

	Desc=CKEDITOR.instances["TemplateContent"].getData();

	// var Desc=$('#Description').html();
	var ModuleId=$('#ModuleId :selected').val();
	var FieldName=$('#FieldName :selected').val();
	var VariableName=$('#VariableName').val();
	var redirectUrl="{{url('EmailTemplates')}}";
	var formData = {
		TemplateId: TemplateId,
		TemplateName: TemplateName,
		Status: Status,
		Description: Desc,
		ModuleId,
		FieldName,
		VariableName
	};
	$.ajax({
		type: "POST",
		url: "{{url('UpdateTemplate')}}",
		data: formData,
		beforeSend:function()
		{
			
		},
		headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
		dataType: 'json',
		success: function () {
			
		},
		complete: function (response) {
			//window.location("{{ url('Admin-Panel') }}");
			var txt = response.responseJSON;
			if(txt.Status=="Success"){
				Snackbar.show({
					text: txt.Message,
					pos: 'top-right',
				});
			}
			else if(txt.Status=="Fail")
			{
				Snackbar.show({
					text: txt.Message,
					actionTextColor: '#fff',
					backgroundColor: '#e2a03f',
					pos: 'top-right',
				});
			}
			window.location=redirectUrl;
			
			// setTimeout(function(){ window.location='{{$Listurl}}'}, 1500);
		},
		error: function (response) {
			
			console.log(response);
			
		}
	}); 
}

GetModuleFields=()=>
{
	moduleid=$('#ModuleId :selected').val();
	$.ajax({
		type: "POST",
		url: "{{url('GetModuleFields')}}",
		data: {moduleid},
		beforeSend:function()
		{
			$('#FieldName').html('');
		},
		headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
		success: response=>{
			response=JSON.parse(response);
			optionsList=`<option value="">--Select--</option>`;
			for(const [key,value] of Object.entries(response))
			{	
				optionsList+=`<option value="${key}">${value}</option>`;
			}
			
			$('#FieldName').html(optionsList);
			UpdateEmailTemplateModuleId(moduleid);
		},
	});
}

UpdateInsertVariable=(fieldId)=>
{
	variableName='';
	if(fieldId=='')
	{
		variableName='';
	}
	else
	{
		variableName=$('#FieldName :selected').html();
		variableName='$'+variableName.replace(/ /g,'_');
		$('#VariableName').val(variableName);

		// ModuleId=$('#ModuleId :selected').val();
		DemographyConfigIds=$('#FieldName :selected').val();
		DemographyConfigIds=DemographyConfigIds.split("_");
		DemographyConfigId=DemographyConfigIds[0];
		ModuleId=DemographyConfigIds[1];


		Variable=$('#VariableName').val();
		TemplateId=$('#TemplateId').val();

		// $('#VariableName').trigger('change');
		// console.log(TemplateId);
		updateTemplateVariable(ModuleId,DemographyConfigId,Variable,TemplateId);
	}
}


</script>

<script>
	insertTextAtCaret=()=> {

		text=$('#VariableName').val();
		CKEDITOR.instances.TemplateContent.insertText(text);
		// var sel, range;
		// if (window.getSelection) {
		// 	sel = window.getSelection();
		// 	if (sel.getRangeAt && sel.rangeCount) {
		// 		range = sel.getRangeAt(0);
		// 		parentNode = range.commonAncestorContainer.parentNode;
		// 		// console.log(parentNode);
		// 		if($(parentNode).parents().is('#Description') || $(parentNode).is('#Description') || (parentNode.id=="editor-container"))
		// 		{
		// 			range.deleteContents();
		// 			range.insertNode( document.createTextNode(text));
		// 		}
		// 	}
		// }
		// else if (document.selection && document.selection.createRange) {
		// 	document.selection.createRange().text = text;
		// }
	}
	updateTemplateVariable=(ModuleId,DemographyConfigId,Variable,TemplateId)=>
	{
		var test="hai";
		$.ajax({
			type:"post",
			url:"{{url('UpdateEmailTemplateVariables')}}",
			data:{ModuleId,DemographyConfigId,Variable,TemplateId},
			success:function(data)
			{
				// console.log(data);
			}
		});
	}
	UpdateEmailTemplateModuleId=(ModuleId)=>
	{
		TemplateId=$('#TemplateId').val();
		$.ajax({
			type:"post",
			url:"{{url('UpdateEmailTemplateModuleId')}}",
			data:{ModuleId,TemplateId},
			success:function(data)
			{
				console.log(data);
			}
		});
	}
</script>