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

@php

//echo "<pre>";
	//print_r($allModules);
	//	print_r($templateId);
//echo "</pre>";

@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>Create 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>Create Email-Templates </h4>
							</div>          
						</div>
					</div>
					<div class="widget-content widget-content-area">
						<div class="row">
							<input type="hidden" name="TemplateId" id='TemplateId'value="{{$templateId}}">
							<div class="col-md-4">
								<label>Template Name</label> <br>
								<input type="text" class="form-control" name="TemplateName" id="TemplateName" value="" placeholder="TemplateName">
							</div>
							<div class="col-md-4">
								<label>Status</label> <br>
								<select class="form-control" name="Status" id="Status">
									<option>--Select--</option>
									<option value="1" >Active</option>
									<option value="2" >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>Module</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>Variale 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"> 
							</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-md-12">
								<label>Description</label> <br>
								<!-- <div id="editor-container" class="ql-container ql-snow">
									<div class="ql-editor" id="Description" data-gramm="false" data-placeholder="Compose an epic..." contenteditable="true"></div><div class="ql-clipboard" tabindex="-1" contenteditable="true"></div><div class="ql-tooltip ql-hidden"><a class="ql-preview" target="_blank" href="about:blank"></a><input type="text" data-formula="e=mc^2" data-link="https://quilljs.com" data-video="Embed URL"><a class="ql-action"></a><a class="ql-remove"></a>
									</div>
								</div> -->
								
								<textarea id="TemplateContent" name="TemplateContent"></textarea>

							</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()">Save Template</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()
			{
				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) {
						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',
							});
						}

						source='{{$source}}';
						if(source=="Reminder")
						{
							window.opener = self;
							window.close();
						}
						else
						{
							window.location=redirectUrl;
							
						}
					},
					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);

		//----for quill Editor starts--------

		// 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));
		// 		}
		// 	}
		// }

		//----for quill Editor Ends--------

	}

	updateTemplateVariable=(ModuleId,DemographyConfigId,Variable,TemplateId)=>
	{
		$.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>