@extends('layouts.header')
@section('content')
<br>
@php
echo "<pre>";
	//print_r($ModulesArray);
echo "</pre>";
@endphp
<div class="statbox widget box box-shadow">
	
	<form  id="ProgressiveDialerConfig" name="ProgressiveDialerConfig" class="simple-example">

		<h2>Progressive Dialer Api's Config</h2>

		<div class="form-group row">

			<div class="col-md-3">
				<label>Api Key <font color="red">*</font></label>

				<input class="form-control" name="ApiKey" id="ApiKey" required>

				<div class="invalid-feedback">
					Please fill Api Key
				</div>
			</div>

			<div class="col-md-3">
				<button type="button" class="btn btn-primary" style="margin-top: 35px" onclick="SaveConfiguration()">Save</button>
			</div>

		</div>

	</form>

</div>

<br>
<div class="statbox widget box box-shadow">
	<div class="form-group row" id="ConfiguredModules"></div>	
</div>

@endsection

<script>

	document.addEventListener('DOMContentLoaded',()=>{

		setTimeout(()=>{
			LoadConfigurations();
		},100);
	})

	const SaveConfiguration=()=>
	{
		var form = document.getElementById('ProgressiveDialerConfig');
		var invalid = $('#ProgressiveDialerConfig .invalid-feedback');

		if (form.checkValidity() === false) {
			event.preventDefault();
			event.stopPropagation();
			invalid.css('display', 'block');
			form.classList.add('was-validated');
			return;
		} else {

			invalid.css('display', 'none');
			form.classList.add('was-validated');
		}

		const formData=new FormData(form);
		$.ajax({
			type:"post",
			url:"{{url('ProgressiveDialer-SaveApiKeysConfig')}}",
			data:formData,
			mimeType: "multipart/form-data",
			contentType: false,
			cache: false,
			processData: false,
			beforeSend:()=>{
				form.reset();
			},
			success:response=>{
				res=JSON.parse(response);

				console.clear();
				console.log(`response11`,response)

				if(res.status=="success")
				{
					Snackbar.show({
						text: res.msg,
						pos: 'top-right',

					});
				}
				else
				{
					Snackbar.show({
						text:res.msg,
						pos: 'top-right',
						actionTextColor: '#fff',
						backgroundColor: '#e7515a'
					});
				}

				LoadConfigurations();
			}
		});


	}

	
	const LoadConfigurations=()=>{
		$.ajax({
			type:"post",
			url:"{{url('ProgressiveDialer-GetApiKeys')}}",
			beforeSend:()=>{
				$('#ConfiguredModules').html(`<center><div class="spinner-border text-primary  align-self-center loader-lg">Loading...</div></center>`);
			},
			success:response=>{
				$('#ConfiguredModules').html(response);
			}
		});
	}
</script>