//var formData = new FormData();
var fileArray = [];


const dropArea = document.getElementById('drop-area');
const previewFile = document.querySelector('.drop-file-name');
if(dropArea) {

['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
	dropArea.addEventListener(eventName, preventDefaults, false)
	document.body.addEventListener(eventName, preventDefaults, false)
});

function preventDefaults (e) {
	e.preventDefault()
	e.stopPropagation()
}

dropArea.addEventListener('drop', handleDrop, false);


function handleDrop(e) {
	let dt = e.dataTransfer
	var files = dt.files

	handleFiles(files)
}

function handleFiles(files) {
	files = [...files]
	files.forEach(uploadFile)
}



var listFile = document.createElement('ul');
previewFile.appendChild(listFile);

function uploadFile(file) {

  //const uploadFiles = input.files;

  const check = fileArray.push(file);
  console.log(check);

  //for (x = 0; x < uploadFiles.length; x++) {    
      	
      	const listItemFile = document.createElement('li');
		const fileType = document.createElement('i');

		const fileName = document.createElement('span');
		fileName.classList.add('d-inline-block', 'text-truncate');

		const fileValue = fileName.textContent = `${file.name}`;
		const extensionFile = fileValue.split(".")[1].toLowerCase();
		fileType.classList.add('fs-4', 'fw-bold', 'bi', 'bi-filetype-'+ extensionFile);
			
		const removeFile = document.createElement('div');
		removeFile.classList.add('remove-file','text-extra-light-gray', 'd-flex', 'align-items-center');
		removeFile.innerHTML = '<img src="../assets/img/icon/trash.svg" class="me-1" width="20"><span class="d-none d-sm-inline-block pt-1 ms-0"> Remove</span>';
		//removeFile.innerHTML = '<i class="bi bi-trash3 me-0 me-sm-2"></i><span class="d-none d-sm-inline-block pt-1 ms-0"> Remove</span>';
		
		const fileN = fileName.textContent = `${file.name}`; 
		listItemFile.innerHTML+= fileType.outerHTML + fileName.outerHTML + removeFile.outerHTML;
		listFile.appendChild(listItemFile);

		listItemFile.querySelector('.remove-file').addEventListener("click", function() {
			this.parentNode.remove();
		});


      	// const fileName = document.createElement('p');      
       //  fileName.textContent = `${uploadFiles[x].name}`;        
       //  uploadFileName.appendChild(fileName);     

       
  //}  
}











	 	

} 






var formContacts = document.getElementsByClassName("contactForm");

Array.from(formContacts).forEach((contactForm) => {

	contactForm.addEventListener("submit", function(event) {
		event.preventDefault();		

		var formData = new FormData();

		fileArray.forEach((fileUp) => {
			// for (let u = 0; u < fileUp.length; u++) {
				console.log(fileUp);
				formData.append(fileUp.name, fileUp);
			// }
		});

		var elements = Array.from(contactForm.elements);

		for (const element of elements) {		
			
			if (element.getAttribute('type') === 'checkbox') {
				if (element.checked) {
					formData.append(element.getAttribute("name"), element.value);
				}
			} 
			else if (element.getAttribute('type') === 'radio') {
				if (element.checked) {
					formData.append(element.getAttribute("name"), element.value);
				}
			} 
			else if (element.getAttribute('type') !== 'file') {
				formData.append(element.getAttribute("name"), element.value);
				
			}
		}

		grecaptcha.ready(function() {
			grecaptcha.execute('6LdMLa4cAAAAALe3fZb0afV_C_TMjLxsMwqDqD_l', {action:'submit'}).then(function(token) {

				formData.append('wa-recaptcha', token);

				var req = new XMLHttpRequest();
				req.open('POST', 'https://mailer.apps.webarray.com/post/HOvoMpaz5gZPEKZ5e2Zfapn6AcJ6l9yk', false);
				
				req.onreadystatechange = function() {

					if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
						const applicationForm = document.getElementById('applicationForm');
						const quoteForm = document.getElementById('quoteForm')
						if(applicationForm) {
							Swal.fire({
								html: '<h4 class="fw-bolder mb-3">Thank You for Your Application!</h4>' +
								'<p class="mb-0">We are thrilled that you are interested in joining our team. We will review your submission and reach out if we think we would be a great fit for one another.</p>',	
								confirmButtonColor: '#E90A8A',				
							});
						} else if(quoteForm) {
							Swal.fire({
								html: '<h4 class="fw-bolder mb-3">Thank You for Requesting a Quote</h4>' +
								'<p class="mb-0">A member of our team will review your information and reach out with a quote.</p>',	
								confirmButtonColor: '#E90A8A',				
							});
						}

						else {
							Swal.fire({
								html: '<h4 class="fw-bolder mb-3">Thank You for Contacting Us!</h4>' +
								'<p class="mb-0">Your message has been submitted. A member of our team will be in touch.</p>',	
								confirmButtonColor: '#E90A8A',				
							});
							
						}		

						contactForm.reset();
						if(previewFile) {
							while (previewFile.firstChild) {
						 	 previewFile.removeChild(previewFile.firstChild);
							}	
						}	
									
					}	
					else {
						Swal.fire({
							icon: 'error',
							title: 'Oops...',
							text: 'Something went wrong!'
						})
					}
				}
				req.send(formData);
			});
		});
	});
});