@extends('layouts.app')
@section('title', 'Demo Order | Flood Certificate')
@section('content')

<style>
	label {
		margin-bottom: 0px;
		color:#000;
	}
	body {
		/* Set "my-sec-counter" to 0 */
		counter-reset: my-sec-counter;
	}
	.wizard1 {
		margin-left: 30px;
		position: relative;
	}
	.v-line {
		width: 1px;
		background-color: #ccc;
		position: absolute;
		margin-left: -15px;
		margin-top: 20px;
		height: 100%;
	}
	.steps {
		padding: 15px 0;
		position: relative;
	}
	.steps::before {
		counter-increment: my-sec-counter;
		content: counter(my-sec-counter);
		display: block;
		width: 20px;
		height: 20px;
		border-radius: 20px;
		background-color: #7680ff;
		position: absolute;
		margin-left: -25px;
		color: #fff;
		text-align:center;
	}
</style>
<div class="container mt-2">
	<div class="row">
		<div class="col-lg-12">
			<div class="card placeorders_top_border" >
				<div class="card-body">
					<div class="row">
						<div class="col-lg-12">
							<form class="form-parsley" action="" method="POST">
								<div class="pt-2">
									<div class="row">
										<!--div class="form-group col-lg-3">
											<label> State Code *</label>
											<select required name="state_code" id="state_code" onchange="get_counties()" class="form-control">
												<option value=""> Please Select State </option>
												
											</select>
										</div>
										<div class="form-group col-lg-3">
											<label> County *</label>
											<select required name="county" id="county" class="form-control">
												<option value=""> Please Select County</option>
												
											</select>
										</div-->
										<div class="form-group col-lg-12">
											<label> Enter Property Address </label>
											<input required name="property_address" id="property_address" type="text" class="form-control" placeholder="Enter Property Address"/>
										</div>
										<div class="form-group col-lg-12 pt-1 text-center">
											<button type="button" name="submit" id="submit" class="btn btn-primary waves-effect waves-light" onclick="placeorders()"> Submit </button>
											<button type="reset" class="btn btn-danger waves-effect waves-light m-l-5">
												Cancel
											</button>
										</div>
									</div>
								</div>
							</form>
						</div>
						<!--div class="col-lg-6 text-center">
							<img src="assets/images/place_orders.svg" width="50%"/>
						</div-->
					</div>
				</div>
			</div>
			<div class="card d-none" id="getdetails">
				<div class="card-body">
					<div class="row">
						<div class="col-lg-12">
							<div class="alert alert-secondary border-0 mb-0 text-center" role="alert">
								<strong>Order!</strong> uploaded successfully!!!
							</div>
							<div class="alert alert-light border-0 text-center text-dark" role="alert">
								<strong>Address - </strong> <span id="addedaddress"></span>
							</div>
						</div>
						<div class="col-lg-12">
							<div class="wizard1">
								<div class="v-line"></div>
								<div class="steps pb-0">
									<h4 class="m-0" id="color1" style="color:#c7c7c7"> Get Co-Ordinates 
										<span id="spinner1" style="margin: -4px;vertical-align: text-top ! important;display:none" class="spinner-grow text-secondary" role="status"> <i></i> </span>
									</h4>
									<div class="mt-2"></div>
									<div id="coordinateinfo"></div>
								</div>
								
								<div class="steps pb-0">
									<h4 class="m-0" id="color2" style="color:#c7c7c7"> 
										Get Flood Details
										<span id="spinner2" style="margin: -4px;vertical-align: text-top ! important;display:none" class="spinner-grow text-secondary" role="status"> <i></i> </span>
									</h4>
									<div class="mb-2"></div>
									<div id="floodresults"></div>
								</div>
								
								<div class="steps pb-0">
									<h4 class="m-0" id="color3" style="color:#c7c7c7">
										Supporting Docs
										<span id="spinner3" style="margin: -4px;vertical-align: text-top ! important;display:none" class="spinner-grow text-secondary" role="status"> <i></i> </span>
									</h4>
									<div class="mt-2"></div>
									<ul class="m-1 p-1" id="sortabletable"></ul>
								</div>
								
								<div class="steps pb-0">
									<h4 class="m-0" id="color4" style="color:#c7c7c7">
										Download Certificate
										<span id="spinner4" style="margin: -4px;vertical-align: text-top ! important;display:none" class="spinner-grow text-secondary" role="status"> <i></i> </span>
									</h4>
									<div class="mt-2"></div>
									<div id="certificate"></div>
								</div>
								
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script>
	function placeorders(){
		
		$("#coordinateinfo, #floodresults, #sortabletable, #certificate").html('');
		$("#getdetails").html('<div class="card-body">\
					<div class="row">\
						<div class="col-lg-12">\
							<div class="alert alert-secondary border-0 mb-0 text-center" role="alert">\
								<strong>Order!</strong> uploaded successfully!!!\
							</div>\
							<h4 class="alert alert-light border-0 text-center text-dark" role="alert">\
								<strong>Address - </strong> <span id="addedaddress"></span>\
							</h4>\
						</div>\
						<div class="col-lg-12">\
							<div class="wizard1">\
								<div class="v-line"></div>\
								<div class="steps pb-0">\
									<h4 class="m-0" id="color1" style="color:#c7c7c7"> Get Co-Ordinates \
										<span id="spinner1" style="margin: -4px;vertical-align: text-top ! important;display:none" class="spinner-grow text-secondary" role="status"> <i></i> </span>\
									</h4>\
									<div class="mt-2"></div>\
									<div id="coordinateinfo"></div>\
								</div>\
								<div class="steps pb-0">\
									<h4 class="m-0" id="color2" style="color:#c7c7c7">\
										Get Flood Details\
										<span id="spinner2" style="margin: -4px;vertical-align: text-top ! important;display:none" class="spinner-grow text-secondary" role="status"> <i></i> </span>\
									</h4>\
									<div class="mb-2"></div>\
									<div id="floodresults"></div>\
								</div>\
								<div class="steps pb-0">\
									<h4 class="m-0" id="color3" style="color:#c7c7c7">\
										Supporting Docs\
										<span id="spinner3" style="margin: -4px;vertical-align: text-top ! important;display:none" class="spinner-grow text-secondary" role="status"> <i></i> </span>\
									</h4>\
									<div class="mt-2"></div>\
									<ul class="m-1 p-1" id="sortabletable"></ul>\
								</div>\
								<div class="steps pb-0">\
									<h4 class="m-0" id="color4" style="color:#c7c7c7">\
										Download Certificate\
										<span id="spinner4" style="margin: -4px;vertical-align: text-top ! important;display:none" class="spinner-grow text-secondary" role="status"> <i></i> </span>\
									</h4>\
									<div class="mt-2"></div>\
									<div id="certificate"></div>\
								</div>\
							</div>\
						</div>\
					</div>\
				</div>');
		
		$("#getdetails").removeClass('d-none');
		
		var address = $('#property_address').val();
		
		$('#addedaddress').html( address );
		
		if( address == '' )
			Swal.fire('', "Property address details are missing, please enter...", 'warning');
		
		$.ajax({
			url: "/demoorderplacement",
			method: "post",
			data: "action=placedemoorder&address="+address+"&_token={{ csrf_token() }}",
			beforeSend: function(  ) {
				$("#color1").css("color", "#000");
				$("#spinner1").css('display', '');
			},
			success: function( response ){
			},
			error: function( response ){  
				Swal.fire('', response, 'warning');
			},
			complete:function( response ){
				
				//$("#spinner1").removeClass("spinner-grow text-secondary");
				//$("#spinner1 i").addClass("btn-success btn-circle mdi mdi-check-all ml-2").css('width', '20px').css('height', '20px');
				
				fillnfipdata( address, response.responseJSON.id );
				
			}
		});
	}
	
	var coordinates = regiondata = '';
	function fillnfipdata( address, id ){
		
		if(address != '')
		{
			$.ajax({
				url: "/getcoordinates",
				method: "post",
				data: "action=getcoordinates&address="+address+"&_token={{ csrf_token() }}",
				beforeSend: function(  ) {
					//$("#color1").css("color", "#000");
					//$("#spinner1").css('display', '');
				},
				success: function( response ){
						
					regiondata = response;
					var json = JSON.parse( response );
					var communityInfo = '<div class="blue_top_border"><table class="table table-bordered table-striped">\
						<thead><tr><th colspan="2">Coordinates</th></tr></thead>\
						<tbody>\
							<tr>\
								<td>X</td>\
								<td><div class="font-weight-bold">'+ json.x +'</div></td>\
							</tr>\
							<tr>\
								<td>Y</td>\
								<td><div class="font-weight-bold">'+ json.y +'</div></td>\
							</tr>\
						</tbody>\
					</table><table class="table table-bordered table-striped">\
						<thead><tr><th colspan="2">National Flood Insurance Program (NFIP) Community Jurisdiction</th></tr></thead>\
						<tbody>\
							<tr>\
								<td>Community Name</td>\
								<td><div id="communityname" class="font-weight-bold"></div></td>\
							</tr>\
							<tr>\
								<td>County</td>\
								<td><div class="font-weight-bold">'+ json.region +'</div></td>\
							</tr>\
							<tr>\
								<td>State</td>\
								<td class="font-weight-bold">'+ json.statecode +'</td>\
							</tr>\
							<tr>\
								<td>Community Number</td>\
								<td><div id="communityno" class="font-weight-bold"></div></td>\
							</tr>\
						</tbody>\
					</table></div>';
					
					$('#coordinateinfo').html( communityInfo );
					
				},
				error: function( response ){  
					Swal.fire('', response, 'warning');
				},
				complete:function( response ){
					
					$("#spinner1").removeClass("spinner-grow text-secondary");
					$("#spinner1 i").addClass("btn-success btn-circle mdi mdi-check-all ml-2").css('width', '20px').css('height', '20px');
					
					coordinates = JSON.parse( response.responseText );
					
					$.ajax({
						url: "/getcoordinates",
						method: "post",
						data: "ordertype=demo&action=usecoordinates&x="+coordinates.x+"&y="+coordinates.y+"&_token={{ csrf_token() }}&orderId="+id,
						beforeSend: function() {
							$("#color2").css("color", "#000");
							$("#spinner2").css('display', '');
						},
						success: function( response ){
							
							var json = JSON.parse( response );
							
							/* if( json.code != 200)
							{
								$("#spinner2").removeClass("spinner-grow text-secondary");
								$("#spinner2 i").addClass("btn-success btn-circle mdi mdi-check-all ml-2").css('width', '20px').css('height', '20px');
							
								$("#floodresults").html( '<div><strong>'+ json.message +'</strong></div>' );
								return false;
							} */
							
							$("td div#communityname").html( json.name );
							$("td div#communityno").html( json.cid );
							
							var floodzonematch = '';
							if(json.fldzone.match('A') || json.fldzone.match('V'))
							{
								floodzonematch = 'Yes';
							}
							else
							{
								floodzonematch = 'No';
							}
							
							var insav = insntav = regularpgm = emgpgm = '';
							if(json.setinsav == 1)
							{
								insav = 'Yes';
								insntav = 'No';
							}
							else if(json.setinsav == 2)
							{
								insav = 'No';
								insntav = 'Yes';
							}
							if(json.setemergencydt == 1)
							{
								emgpgm = 'Yes';
								regularpgm = 'No';
							}
							else if(json.setemergencydt == 2)
							{
								emgpgm = 'No';
								regularpgm = 'Yes';
							}
							else if(json.setemergencydt == '')
							{
								emgpgm = 'No';
								regularpgm = 'No';
							}
								
							var detailsinfo = '<div class="row p-2"><div class="col-6 green_top_border"><table class="table table-bordered table-striped">\
										<thead><tr><th colspan="2">National Flood Insurance Program (NFIP) Data Affecting Building/Mobile Home</th></tr></thead>\
										<tbody>\
											<tr>\
												<td>NFIP Map Number or Community-Panel Number (Community name, if not the same as "A")</td>\
												<td class="font-weight-bold">'+ (json.firmpan != '' ? json.firmpan : '') +'</td>\
											</tr>\
											<tr>\
												<td>NFIP Map Panel Effective / Revised Date:</td>\
												<td><div class="font-weight-bold">'+ (json.effdate != '' ? json.effdate : '') +'</div></td>\
											</tr>\
											<tr>\
												<td>Flood Zone</td>\
												<td class="font-weight-bold">'+ (json.fldzone != '' ? json.fldzone : '') +'</td>\
											</tr>\
											<tr>\
												<td>Is there a Letter of Map Change (LOMC)?</td>\
												<td class="font-weight-bold">'+ (json.caseno != '' ? 'Yes' : 'No') +'</td>\
											</tr>\
											<tr>\
												<td>Date</td>\
												<td class="font-weight-bold">'+ json.effectivedate +'</td>\
											</tr>\
											<tr>\
												<td>Case no</td>\
												<td class="font-weight-bold">'+ json.caseno +'</td>\
											</tr>\
										</tbody>\
									</table></div>\
									<div class="col-xl-1 p-0 m-0" style="width: 4px !important;flex: 4px !important;max-width: 4px !important;"></div>\
									<div style="max-width: 49.5% !important;flex: auto !important;" class="col-xl-6 p-0 m-0 orange_top_border "><table class="table table-bordered table-striped">\
									<thead><tr><th colspan="2"> Federal Flood Insurance Availability(Check all that apply.) </th></tr></thead>\
										<tbody>\
											<tr>\
												<td>Federal Flood Insurance is available (community participates in the NFIP).</td>\
												<td class="font-weight-bold">'+ insav +'</td>\
											</tr>\
											<tr>\
												<td>Federal Flood Insurance is not available (community does not participate in the NFIP).</td>\
												<td class="font-weight-bold">'+ insntav +'</td>\
											</tr>\
											<tr>\
												<td>Regular Program</td>\
												<td class="font-weight-bold">'+ regularpgm +'</td>\
											</tr>\
											<tr>\
												<td>Emergency Program of NFIP</td>\
												<td class="font-weight-bold">'+ emgpgm +'</td>\
											</tr>\
											<tr>\
												<td>Building/Mobile Home is in a Coastal Barrier Resources Area (CBRA) or Otherwise Protected Area (OPA). Federal Flood Insurance may not be available.</td>\
												<td class="font-weight-bold">'+ (json.cbraresponse == 1 ? 'Yes' : 'No') +'</td>\
											</tr>\
											<tr>\
												<td>CBRA/OPA Designation Date:</td>\
												<td class="font-weight-bold">'+ json.cbrasudate +'</td>\
											</tr>\
										</tbody>\
									</table></div></div>';
								
								detailsinfo += '<div class="row p-2"><div class="red_top_border col-12"><table class="table table-bordered table-striped w-100">\
									<thead><tr><th colspan="2"> Determination </th></tr></thead>\
										<tbody>\
											<tr>\
												<td>IS BUILDING/MOBILE HOME IN SPECIAL FLOOD HAZARD AREA (ZONES CONTAINING THE LETTERS "A" OR "V")?</td>\
												<td class="font-weight-bold">'+ floodzonematch +'</td>\
											</tr>\
										</tbody>\
									<tfoot><tr><td colspan="2"> If yes, flood insurance is required by the Flood Disaster Protection Act of 1973. If no, flood insurance is not required by the Flood Disaster Protection Act of 1973. Please note, the risk of flooding in this area is only reduced, not removed. </td></tr></tfoot>\
									</table></div></div>';
									
								if(json.firmpaneldetails != '')
								{
									detailsinfo += json.firmpaneldetails;
								}
							
								$('#floodresults').html( detailsinfo );
								
								if(json.firmpaneldetails != '')
								{
									$('table#firmpanelslisttable tr#'+json.firmpan).css('background', 'bisque');
								}
						},
						error: function( response ){
							
						},
						complete:function( response ){
							
							$.ajax({
								url: "{{url('updateorderdetails')}}",
								type: 'POST',
								data: "ordertype=demo&data="+response.responseText+"&regiondata="+regiondata+"&_token={{ csrf_token() }}&orderId="+id+"&property_address="+$("#property_address").val(),
								success: function (responses) {
								},
								error: function (xhr, status, error) {
									console.error('File upload failed.');
								}
							});
							
							$("#spinner2").removeClass("spinner-grow text-secondary");
							$("#spinner2 i").addClass("btn-success btn-circle mdi mdi-check-all ml-2").css('width', '20px').css('height', '20px');
					
							$.ajax({
								url: "{{url('getmappdetails')}}",
								type: 'POST',
								data: "ordertype=demo&x="+coordinates.x+"&y="+coordinates.y+"&_token={{ csrf_token() }}&orderId="+id,
								beforeSend: function() {
									$("#color3").css("color", "#000");
									$("#spinner3").css('display', '');
								},
								success: function (responses) {
									
								},
								error: function (xhr, status, error) {
									console.error('File upload failed.');
								},
								complete:function( response ){
									
									$("#spinner3").removeClass("spinner-grow text-secondary");
									$("#spinner3 i").addClass("btn-success btn-circle mdi mdi-check-all ml-2").css('width', '20px').css('height', '20px');
							
									$.ajax({
										url: "{{url('getsupportingdocs')}}",
										type: 'POST',
										data: "_token={{ csrf_token() }}&orderId="+id,
										success: function (responses) {
											if (responses.length > 0) {
												$('.support_docs').show();
												responses.forEach(function (response) {
													var id = response.id;
													var orderId = response.order_id;
													var pdf_file = response.pdf_file;
													
													var listItem = '<li id="' + id + '">' +
														'<a style="cursor:pointer;color:#0a58ca" onclick="openSupportingDoc(' +
														id + ', '+ orderId +', \'newWindow\')"><u> <i class="dripicons-paperclip">' + pdf_file +
														'</i></u></a>' +
														'</li>';
													$('#sortabletable').append(listItem);
												});
											} else {
												$('.support_docs').hide();
											}
										},
										error: function (xhr, status, error) {
											console.error('File upload failed.');
										},
										complete:function( response ){
											
											$("#color4").css("color", "#000");
											$("#spinner4").css('display', '');
											
											$('#certificate').html('<a style="cursor:pointer;color:#0a58ca" onclick="viewSupportingDoc('+ id +')"><u> <i class="dripicons-paperclip">View Certificate</i></u></a>');
											
											$("#spinner4").removeClass("spinner-grow text-secondary");
											$("#spinner4 i").addClass("btn-success btn-circle mdi mdi-check-all ml-2").css('width', '20px').css('height', '20px');
												
											
										}
									});
								}
							});
							
						}
					});
				}
			})
			.done(function( data ) {
				if ( console && console.log ) {
				}
			});
		}
		else
		{
			Swal.fire('', "Property address details are missing, please update...", 'warning');
		}
	}
	
	function openSupportingDoc(docId, orderId, option, customFilename = '') {
		var xhr = new XMLHttpRequest();
		xhr.open('POST', "{{ route('open_supporting_doc') }}", true);
		xhr.responseType = 'blob';

		xhr.onload = function () {
			if (xhr.status === 200) {
				var blob = xhr.response;

				var url = URL.createObjectURL(blob);

				if (option === 'newWindow') {
					var windowFeatures = 'height=' + screen.height + ',width=750,scrollbars=yes,status=yes';
					window.open(url, '_blank', windowFeatures);
				} else if (option === 'newTab') {
					window.open(url, '_blank');
				} else if (option === 'download') {
					var a = document.createElement('a');
					a.href = url;
					a.target = '_blank';
					a.download = customFilename !== '' ? customFilename : 'custom_filename.pdf';
					a.click();
				}

				// Clean up the object URL after opening or downloading
				URL.revokeObjectURL(url);
			}
		};

		var formData = new FormData();
		formData.append('docid', docId);
		formData.append('orderid', orderId);
		formData.append('_token', "{{ csrf_token() }}");
		formData.append('baseDirPath', "SFHDF_Form_Output");

		xhr.send(formData);
	}
	
	function viewSupportingDoc(orderId) {
		var xhr = new XMLHttpRequest();
		xhr.open('GET', "getcert/"+orderId, true);
		xhr.responseType = 'blob';

		xhr.onload = function () {
			if (xhr.status === 200) {
				var blob = xhr.response;

				var url = URL.createObjectURL(blob);
				option = 'newWindow';
				if (option === 'newWindow') {
					var windowFeatures = 'height=' + screen.height + ',width=750,scrollbars=yes,status=yes';
					window.open(url, '_blank', windowFeatures);
				} else if (option === 'newTab') {
					window.open(url, '_blank');
				} else if (option === 'download') {
					var a = document.createElement('a');
					a.href = url;
					a.target = '_blank';
					a.download = customFilename !== '' ? customFilename : 'custom_filename.pdf';
					a.click();
				}

				// Clean up the object URL after opening or downloading
				URL.revokeObjectURL(url);
			}
		};

		var formData = new FormData();
		formData.append('orderid', orderId);
		formData.append('_token', "{{ csrf_token() }}");
		formData.append('baseDirPath', "SFHDF_Form_Output");

		xhr.send(formData);
	}
</script>
@endsection