@extends('layouts.header')
@section('content')
<!--  BEGIN CONTENT AREA  -->
	<br />
	<div class="page-header">
		<div class="breadcrumb-four">
			<ul class="breadcrumb">
				<li><a href="{{url('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><span>Create Report</span></li> -->
				<li >
					<a href="{{url('Admin-Panel')}}"  title="Administration">
						<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-unlock"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 9.9-1"></path></svg>
						Admin Panel
					</a>
				</li>
				<li ><a href="{{url('ListWhatsAppConfiguration')}}">List WhatsApp Configuration</a></li>
				<li ><a href="{{url('WhatsAppConfiguration')}}">Create WhatsApp Configuration</a></li>
				<li class="active"><a href="{{url('WhatsAppAutoResponseConfigure')}}">Auto Response Configuration</a></li>
			</ul>
		</div>
	</div>
	<br />
	<div class="row">
		<div class="col-lg-12 col-md-12 layout-spacing">
			<div class="widget-content widget-content-area" height="800">
			<form id="AutoResponseConfig" id="AutoResponseConfig">
				<input type="hidden" id="UUID" name="UUID" value="{{$UUID}}">
				<div class="row">
					<div class="col-md-4">
						<font color="blue">Name</font><font color="red">*</font>
						<br>
						<input class="form-control" type="text" id="Name" name="Name" >
					</div>
				</div><br>
				<div class="row">		
					<div class="col-md-4">
						<font color="blue">Module</font><font color="red">*</font>
						<select class="form-control"  name="ModuleId" id="ModuleId" onchange="DisplayFields()" >
							<option value=''>--select--</option>
							@foreach($ModulesArray as $ModuleId=>$ModuleName)
								<option value="{{$ModuleId}}">{{$ModuleName}}</option>
							@endforeach
						</select>
						</select>
					</div>
					<div class="col-md-4">
						<font color="blue">Fields</font><font color="red">*</font><br>
						<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><br>
				<div class="row">
					<div class="col-md-12">
						<font color="blue">Auto Response Message</font><font color="red">*</font><br>
						<textarea id="AutoResponseMessage" name="AutoResponseMessage" class="form-control"></textarea>
					</div> 
				</div><br>
				<div class="row">
					<div class="col-md-12" align="center">
						<button type="button" class="btn btn-primary mb-2 mr-2" onclick="ConfigureAutoResponse()"> Configure </button>
					</div>
				</div><br>
				</form>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-lg-12 col-md-12 layout-spacing">
			<div class="widget-content widget-content-area" height="800">
				<div id="DisplayListAutoReponse"></div>
			</div
		</div>
	</div>
	
	<div class="modal fade " id="EditAutoResponse" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-xl" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="exampleModalLabel">Edit Auto Response Message</h5>
				</div>
				<div class="modal-body">
					<div id="EditAutoResponsediv"></div>
				</div>
				<div class="modal-footer">
					<button class="btn" data-dismiss="modal"><i class="flaticon-cancel-12"></i> Discard</button>
				</div>
			</div>
		</div>
	</div>
<script>

document.addEventListener('DOMContentLoaded',()=>
{
	setTimeout(GetConfiguredAutoResponse,200)
});

document.addEventListener('DOMContentLoaded',function(){
	CKEDITOR.replace("AutoResponseMessage");
CKEDITOR.instances["AutoResponseMessage"].on('change',function(){
	document.getElementById("AutoResponseMessage").value=CKEDITOR.instances["AutoResponseMessage"].getData();
});

	})
insertTextAtCaret=()=> {
	text=$('#VariableName').val();
	CKEDITOR.instances.AutoResponseMessage.insertText(text);
	insertTemplateModule();
}
function insertTemplateModule()
{
	var ModuleId=document.getElementById('ModuleId').value;
	var FieldName=document.getElementById('FieldName').value;
	var UUID=document.getElementById('UUID').value;
	var VariableName=document.getElementById('VariableName').value;
	var formData = {
		UUID: UUID,
		ModuleId: ModuleId,
		FieldName: FieldName,
		VariableName: VariableName,
	};
	console.log(formData);
	$.ajax({
			type:"post",
			url: "{{url('insertAutoTemplateModuleinWhatsApp')}}",
			data: formData,
			beforeSend:function() {
			},
			headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
			//dataType: 'json',
			success:function(result)
			{
			},
			complete: function() {
			},
			error:function(response)
			{
				alert("error:"+response);
			}
		});
}
ConfigureAutoResponse=()=>
{
	var Name=document.getElementById('Name').value;
	var AutoResponseMessage=CKEDITOR.instances["AutoResponseMessage"].getData();
	
	if(Name=='' || AutoResponseMessage=='' )
	{
		Snackbar.show({
			text: 'Please Fill the Mandatory Fields',
			pos: 'top-right',
			actionTextColor: '#fff',
			backgroundColor: '#e7515a'
		});
		return false;
	}
	
	var AutoResponseConfig=document.getElementById('AutoResponseConfig');
	formdata=new FormData(AutoResponseConfig);
		$.ajax({
			type:"post",
			url: "{{url('ConfigureAutoResponse')}}",
			data: formdata,
			cache:false,
			processData:false,
			contentType:false,
			beforeSend:function() {
			},
			headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
			//dataType: 'json',
			success:function(result)
			{
				var Response=JSON.parse(result);
				Snackbar.show({
					text: Response.Message,
					pos: 'top-right'
				});
			},
			complete: function() {
				document.getElementById('Name').value='';
				document.getElementById('AutoResponseMessage').value='';
			},
			error:function(response)
			{
				alert("error:"+response);
			}
		});
}
GetConfiguredAutoResponse=()=>
{
	$.ajax({
		type:"post",
		url: "{{url('GetConfiguredAutoResponse')}}",
		beforeSend:function() {
		},
		headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
		//dataType: 'json',
		success:function(result)
		{
			$('#DisplayListAutoReponse').html(result);
		},
		complete: function() {
		},
		error:function(response)
		{
			alert("error:"+response);
		}
	});
}
UpdateAutoResponse=()=>
{
	var EditName=document.getElementById('EditName').value;
	var EditAutoResponseMessage=document.getElementById('EditAutoResponseMessage').value;
	
	if(EditName=='' || EditAutoResponseMessage=='' )
	{
		Snackbar.show({
			text: 'Please Fill the Mandatory Fields',
			pos: 'top-right',
			actionTextColor: '#fff',
			backgroundColor: '#e7515a'
		});
		return false;
	}
	
	var EditAutoResponseConfig=document.getElementById('EditAutoResponseConfig');
	formdata=new FormData(EditAutoResponseConfig);
		$.ajax({
			type:"post",
			url: "{{url('UpdateAutoResponse')}}",
			data: formdata,
			cache:false,
			processData:false,
			contentType:false,
			beforeSend:function() {
			},
			headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
			//dataType: 'json',
			success:function(result)
			{
				var Response=JSON.parse(result);
				Snackbar.show({
					text: Response.Message,
					pos: 'top-right'
				});
			},
			complete: function() {
			},
			error:function(response)
			{
				alert("error:"+response);
			}
		});
}
EditAutoResponse=(WhatsAppAutoResponseConfigId)=>
{
	var formData = {
			WhatsAppAutoResponseConfigId: WhatsAppAutoResponseConfigId,
		};
	$.ajax({
		type:"post",
		url: "{{url('EditAutoResponse')}}",
		data: formData,
		beforeSend:function() {
		},
		headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
		//dataType: 'json',
		success:function(result)
		{
			$('#EditAutoResponsediv').html(result);
		},
		complete: function() {
		},
		error:function(response)
		{
			alert("error:"+response);
		}
	});
	
}
DisplayFields=()=>
{
	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);
		},
	});
}
UpdateInsertVariable=(fieldId)=>
{
	variableName='';
	if(fieldId=='')
	{
		variableName='';
	}
	else
	{
		variableName=$('#FieldName :selected').html();
		variableName='$'+variableName.replace(/ /g,'_');
		$('#VariableName').val(variableName);
	}
}
</script>

@endsection