@extends('layouts.app')

@section('content')
<main class="py-8">

	<div class="container">
		<div class="row justify-content-center">

			<div class="col-md-12">
				<div class="card">
					<div class="card-header">Welcome</div>

					<div class="card-body">
						<form enctype="multipart/form-data" id="form">
							<div class="form-group">
							  <label for="builder">Builder name</label>
							  <input name="builder_name" class="form-control-file border border-secondary rounded" id="builder_name" placeholder="enter builder name" value="builder name">
							</div>
							<div class="form-group">
							  <label for="project">Project name</label>
							  <input name="project_name" class="form-control-file border border-secondary rounded" id="project_name" placeholder="enter project name" value="project name">
							</div>
							<div class="form-group">
							  <label for="bhk">BHK</label>
							  <input name="bhk" class="form-control-file border border-secondary rounded" id="bhk" placeholder="enter bhk name" type="number" value="1">
							</div>
							<div class="form-group">
							  <label for="location">Location</label>
							  <input name="location" class="form-control-file border border-secondary rounded" id="location" placeholder="enter location" value="bangalore">
							</div>
							<div class="form-group">
							  <label for="prthumb">Thumbnail</label>
							  <input name="prthumb"  type="file" class="form-control-file" id="prthumb" >
							</div>

							<div class="container mx-0 px-0">
								<div class="form-inline row">

									<div class="form-group col-sm-4">
										  <label for="primg">Project Image</label>
										  <input name="primg0"  type="file" class="form-control-file " class="primg" >
									</div>
									<div class="form-group col-sm-4">
										<label for="room_name0">Room name</label>
										<input type="text" name="room_name0" value="0" class="room_name form-control-file  border border-secondary rounded">
									</div>
									<div class="form-group col-sm-4">
										<label for="longitude0">longitude</label>
										<input type="text" name="longitude0" value="0" class="longitude form-control-file  border border-secondary rounded">
									</div>
									<div class="form-group col-sm-4">
										<label for="latitude0">latitude</label>
										<input type="text" name="latitude0" value="0" class="latitude form-control-file  border border-secondary rounded">
									</div>
									<div class="form-group col-sm-4">
										<label for="hotspot_name0">hotspot name 0</label>
										<input type="text" name="hotspot_name0" value="hotspot_name0" class="hotspot_name form-control-file  border border-secondary rounded">
									</div>
									<div class="form-group col-sm-4">
										<label for="hotspot_description1">hotspot_description 0</label>
										<input type="text" name="hotspot_description0" value="hotspo_description0" class="hotspot_description form-control-file  border border-secondary rounded">
										<input type="hidden" name="hotspot_type0" value="0" class="hotspot_type form-control-file  border border-secondary rounded">
									</div>
								</div>
							</div>

							<div class="container mx-0 px-0">
								<div class="form-inline row">

									<div class="form-group col-sm-4">
										  <label for="primg">Project Image</label>
										  <input name="primg1"  type="file" class="form-control-file " class="primg" >
									</div>
									<div class="form-group col-sm-4">
										<label for="room_name1">Room name</label>
										<input type="text" name="room_name1" value="1" class="room_name form-control-file  border border-secondary rounded">
									</div>
									<div class="form-group col-sm-4">
										<label for="longitude0">longitude</label>
										<input type="text" name="longitude1" value="1" class="longitude form-control-file  border border-secondary rounded">
									</div>
									<div class="form-group col-sm-4">
										<label for="latitude0">latitude</label>
										<input type="text" name="latitude1" value="1" class="latitude form-control-file  border border-secondary rounded">
									</div>
									<div class="form-group col-sm-4">
										<label for="hotspot_name0">hotspot name 0</label>
										<input type="text" name="hotspot_name0" value="hotspot_name1" class="hotspot_name form-control-file  border border-secondary rounded">
									</div>
									<div class="form-group col-sm-4">
										<label for="hotspot_description1">hotspot_description 0</label>
										<input type="text" name="hotspot_description1" value="hotspo_description1" class="hotspot_description form-control-file  border border-secondary rounded">
										<input type="hidden" name="hotspot_type1" value="1" class="hotspot_type form-control-file  border border-secondary rounded">
									</div>
								</div>
							</div>


							<button type="submit" class="btn btn-primary">Submit</button>
						</form>
					</div>
					<div class="">
					<div class="text-center container d-none"  id="spinner">
					  <div class="spinner-border " role="status">
					    <span class="sr-only">Loading...</span>
					  </div>
					</div>
					    <div class="progress-bar"></div>

					<div class="container d-none"  id="alert">
						<div class="alert alert-success alert-dismissible fade show" role="alert" id="uploadStatus" >
						  <strong>Project created successfully!</strong> <a href="#" id="alert-link" class="alert-link">click here</a> to access the spin view of project.

						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</main>
@endsection
@section('scripts')
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.js"></script>
<script>
$(document).ready(function() {
	const currentDate = new Date();
	const timestamp = currentDate.getTime();

	$('#registration_no').val(timestamp);

	$.ajaxSetup({
		headers: {
			'Authorization': 'Bearer DV8ol7OCygrWTN48CG4HVYJL5cJuRb4QgpBBAw6V0EMls7YOvVWmtyOnNQF6'
		}
	});
	// process the form
	$('form').submit(function(event) {
		$('#spinner').removeClass('d-none');
		event.preventDefault();
		setTimeout(function(){ processForm(); },5000);


			// stop the form from submitting the normal way and refreshing the page
			event.preventDefault();
	});

// let percent = $('progress-bar');

});

function processForm() {
		// console.log($('input[type=file]').val());
		var form = $('#form')[0];
		var form_data = new FormData();

		// Read selected files
		// var totalfiles = document.getElementById('files').files.length;
		var totalImages = $('.room_name').length;
		// console.log(document.getElementById('files').files);
		const currentDate = new Date();
		const timestamp = currentDate.getTime();
		const builder_name = $('#builder_name').val();
		form_data.append('user','{{ Auth::user()->email }}');
		form_data.append('thumbnail',$('#prthumb').prop('files')[0]);
		form_data.append('builder_name',$('#builder_name').val());
		form_data.append('project_name',$('#project_name').val());
		form_data.append('bhk',$('#bhk').val());
		form_data.append('location',$('#location').val());
		for (var index = 0; index < totalImages; index++) {
		   form_data.append("images[]", $('form').find('input[name="primg'+index+'"]').prop('files')[0]);
		   form_data.append('room_names[]', $('form').find('input[name="room_name'+index+'"]').val());
		   form_data.append('hotspot_longitudes[]', $('form').find('input[name="longitude'+index+'"]').val());
		   form_data.append('hotspot_latitudes[]', $('form').find('input[name="latitude'+index+'"]').val());
		   form_data.append('hotspot_names[]', $('form').find('input[name="hotspot_name'+index+'"]').val());
		   form_data.append('hotspot_descriptions[]', $('form').find('input[name="hotspot_description'+index+'"]').val());
		   form_data.append('hotspot_types[]', $('form').find('input[name="hotspot_type'+index+'"]').val());
		   // form_data.append('registration_no', registration_no);
		}
console.log(form_data);
			// process the form
			$.ajax({
				type        : 'POST', // define the type of HTTP verb we want to use (POST for our form)
				enctype: 'multipart/form-data',
				url         : '{{ url("/api/project") }}', // the url where we want to POST
				data: form_data,
				processData: false,
				contentType: false,
				cache: false,
				dataType: 'text',
				timeout: 600000,
				async: false,
				// progress bar
                // xhr: function () {
                //     var xhr = new window.XMLHttpRequest();
                //     xhr.upload.addEventListener("progress", function (evt) {
                //         if (evt.lengthComputable) {
                //             var percentComplete = evt.loaded / evt.total;
                //             percentComplete = parseInt(percentComplete * 100);
                //             $('.progress-bar').text(percentComplete + '%');
                //             $('.progress-bar').css('width', percentComplete + '%');
                //         }
                //     }, false);
                //     return xhr;
                // },
			}).done (function(data, textStatus, jqXHR) {
				$('#alert').removeClass('d-none');
				$('#spinner').addClass('d-none');

				// var obj = JSON.parse(data);
				   //Handle the response data here
					// alert(obj.success);
					console.log(JSON.parse(data));
					$('#alert-link').attr('href','/api/projects/'+JSON.parse(data).data.proid);

					// alert(JSON.stringify(data));
				}).fail (function(jqXHR, textStatus, errorThrown) {
					// alert("Error");
						$('#uploadStatus').html('<p style="color:#EA4335;">File upload failed, please try again.</p>');
				})
				.always (function(jqXHROrData, textStatus, jqXHROrErrorThrown) {
				});
}
</script>
@endsection