@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 Configuration</h2>

		<div class="form-group row">

			<div class="col-md-3">
				<label>From Module <font color="red">*</font></label>
				<select class="form-control customDropdown" name="FromModule" id="FromModule" required onchange="GetPhoneColumns(this.value)">
					<option value="">--Select Module--</option>
					@foreach($ModulesArray as $key=>$value)
					<option value="{{$key}}">{{$value}}</option>
					@endforeach
				</select>

				<div class="invalid-feedback">
					Please select From Module
				</div>
			</div>

			<div class="col-md-3">
				<label>Phone Column <font color="red">*</font></label>
				<select class="form-control customDropdown" name="PhoneColumn" id="PhoneColumn" required>
					<option value="">--Select Column--</option>
				</select>

				<div class="invalid-feedback">
					Please select Phone Column
				</div>
			</div>


			<div class="col-md-3">
				<label>Scheduler Module <font color="red">*</font></label>
				<select class="form-control customDropdown" name="SchedulerModule" id="SchedulerModule" required>
					<option value="">--Select Module--</option>
					@foreach($ModulesArray as $key=>$value)
					<option value="{{$key}}">{{$value}}</option>
					@endforeach
				</select>
				<div class="invalid-feedback">
					Please select Scheduler Module
				</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 FromModule=$('#FromModule :selected').val();
		const SchedulerModule=$('#SchedulerModule :selected').val();

		const formData=new FormData(form);

		if(FromModule==SchedulerModule)
		{
			Snackbar.show({
				text: 'From Module And Schedule Calls Module Should Not be same!',
				pos: 'top-right',
				actionTextColor: '#fff',
				backgroundColor: '#e7515a'
			});

			return;
		}

		$.ajax({
			type:"post",
			url:"{{url('ProgressiveDialer-SaveMap')}}",
			data:formData,
			mimeType: "multipart/form-data",
			contentType: false,
			cache: false,
			processData: false,
			beforeSend:()=>{},
			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 GetPhoneColumns=(ModuleId)=>{
		if(ModuleId)
		{
				DisplayTypes=['11','20','30'];//for phone columns

				DisplayTypes=JSON.stringify(DisplayTypes);
				$.ajax({
					type:"post",
					url:"{{url('ProgressiveDialer-GetColumns')}}",
					data:{DisplayTypes,ModuleId},
					beforeSend:()=>{
						$('#PhoneColumn').empty();
					},
					success:response=>{
						results=JSON.parse(response);
						var options=`<option value="">--Select Column--</option>`;
						results.map(result=>{
							options+=`<option value="${result}">${result}</option>`;
						})
						$('#PhoneColumn').append(options);
					}
				});
			}
			else
			{
				$('#PhoneColumn').empty();
			}
		}
		const LoadConfigurations=()=>{
			$.ajax({
				type:"post",
				url:"{{url('ProgressiveDialer-ConfiguredModules')}}",
				beforeSend:()=>{
					$('#ConfiguredModules').html(`<center><div class="spinner-border text-primary  align-self-center loader-lg">Loading...</div></center>`);
				},
				success:response=>{
					$('#ConfiguredModules').html(response);
				}
			});
		}
	</script>