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

<style type="text/css">
	#iframeDiv
	{
		background: url("{{asset('images/bpmloader.gif')}}") center center no-repeat;
		min-height: 110px;

	}
</style>

<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>

		</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="form-group row">
				<div class="col-md-4">
					<button type="button" class="btn btn-primary" onclick="GetCallDetails()">Get Details</button>
				</div>
			</div>

			<div class="form-group row">
				<div class="col-md-12" id="iframeDiv">
					<center>No Calls!</center>
				</div>
				<!-- <input type="hidden" id="instance" value="{{$_SERVER['HTTP_HOST']}}"> -->
			</div>
		</div>
	</div>
</div>
@endsection

<script type="text/javascript">
	GetCallDetails=()=>{
		$.ajax({
			type:"post",
			url:"{{url('GetCallDetails')}}",
			beforeSend:()=>{
					// $('#iframeDiv').html("<div class='loader dual-loader mx-auto'></div>");
				},
				success:response=>{
					console.log('response',response);
					res=JSON.parse(response);
					phone=res.phone;
					monitorUcid=res.monitorUcid;
					agentID=res.agentID;
					PhoneNo=res.PhoneNo;

					if(phone)
					{			
						url="{{url('')}}"+`/api/ScreenPop?phone=${phone}&agentID=${PhoneNo}&customer=vedam_ayurveda&type=Manual&monitorUcid=${monitorUcid}`;
						Popiframe=`<iframe src="${url}" id="PopupIframe" width="100%" height="800px" style="border:none;"></iframe>`
						$('#iframeDiv').html(Popiframe);
					}
					else
					{
						Snackbar.show({
							text: 'No New Calls!',
							pos: 'top-right'
						});
					}

				},
			});
	}
</script>