@php
use App\Http\Controllers\TestController;

@endphp
 <style type="text/css">
 	.captcha
 	{
 		background: url("{{url('CustomCaptcha-Generate')}}");
 		background-repeat: no-repeat;
 		/*height:50px;*/
 		/*width:100px;*/
 		height:60px;
 		margin-top:7px; 
 	}

 	.cstmDiv
 	{
 		margin: 0px;
 		padding: 0px;
 	}

 	.captcha-container
 	{
 		border: 1px solid #d9d9d9;
 		border-radius: 5px;
 		padding-bottom: 37px;
 		padding-top: 14px;

 	}
 </style>

 <div class="d-sm-flex justify-content-between ">

 	<div class="col-md-12 captcha-container row">
 		<div  class="captcha col-md-6" id="captchaImg">
 		</div> 

 		<div class="col-md-2 text-primary" style="padding-top: 8px;cursor:pointer" title="Refresh Captcha" onclick="RefreshCaptcha()">
 			<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-rotate-ccw"><polyline points="1 4 1 10 7 10"></polyline><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path></svg>
 		</div>

 		<div class="col-md-12 cstmDiv">
 			<input type="text" class="form-control" id="CaptchaText" value="">
 			<div class="InvalidCaptcha" style="display: none">
 				<label> <font color="red"> Invalid Captcha</font></label>
 			</div>
 		</div>

 	</div>
 </div>

 <script>
 	RefreshCaptcha=()=>
 	{
 		// $(".captcha").attr('src', "{{url('Test3')}}");
 		

	var element = document.getElementById('captchaImg');


 		// Create a new AJAX request
 		var xhr = new XMLHttpRequest();

// Set an event listener to trigger when the AJAX request is complete
xhr.addEventListener('load', function() {
  // Create a new Blob object from the response data
  var blob = new Blob([xhr.response], { type: xhr.getResponseHeader('Content-Type') });



  // Create a new Blob URL from the Blob object
  var blobURL = URL.createObjectURL(blob);

  // Set the background image of the element to the Blob URL
  element.style.backgroundImage = 'url(' + blobURL + ')';
});

// Open the AJAX request
xhr.open('POST', "{{url('CustomCaptcha-Generate')}}");
xhr.setRequestHeader('X-CSRF-TOKEN', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));

// Set the responseType of the AJAX request to 'blob'
xhr.responseType = 'blob';

// Send the AJAX request
xhr.send();


}


validateCaptcha=()=>
{
	$.ajax({
		type:"post",
		url:"{{url('Test')}}",
		headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
		beforeSend:()=>{},
		success:res=>{
			alert(res);
		}
	});

}
</script>