(function($) {
	"use strict";

	KirilKirkovWPInvoicesMainInit();

	function KirilKirkovWPInvoicesMainInit() {
		
		// sortable settings params
		$('#kirilkirkov .dynamic-container').sortable({ handle: '.dashicons-sort' });

		const infoBtns = document.querySelectorAll('.show-info');
		let infoBox = document.getElementsByClassName('ft-modal')[0];

		// listen click info modal
		infoBtns.forEach(el => el.removeEventListener('click', event => { }));
		infoBtns.forEach(el => el.addEventListener('click', event => {
			infoBox.style.visibility = 'visible';
			infoBox.style.opacity = 1;
			document.getElementsByClassName('info-box')[0].innerHTML = el.getAttribute("data-info");
		}));

		// close info modal
		jQuery('.ft-modal-close').on('click', function() {
			infoBox.style.visibility = 'hidden';
			infoBox.style.opacity = 0;
		});

		// Create input texts dynamically
		const addInput = document.querySelectorAll('#kirilkirkov .add-input');
		// listen click add input text
		addInput.forEach(el => el.removeEventListener('click', event => { }));
		addInput.forEach(el => el.addEventListener('click', event => {
			let main_container = document.querySelectorAll('.' + el.dataset.container);
			
			// create element container
			let el_container = document.createElement("div");
			el_container.className = 'mb-4';

			// append input
			let input = document.createElement("input");
			input.type = "text";
			input.name = el.dataset.name;
			input.value = "";
			el_container.appendChild(input);

			// append removal icon
			let removal = document.createElement("a");
			removal.href = "javascript:;";
			removal.className = "remove-dynamic-element";
			el_container.appendChild(removal);

			// append sortable icon
			let sortable = document.createElement("span");
			sortable.className = "dashicons dashicons-sort";
			el_container.appendChild(sortable);

			main_container[0].appendChild(el_container);
		}));

		jQuery(document).on('click', '#kirilkirkov .remove-dynamic-element', function() {
			jQuery(this).parent().remove();
		});

		// Generate Api Token (random string generator)
		jQuery(document).on('click', '#kirilkirkov .generate-token', function() {

			let tokenCharacters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890".split("");
			let tokenArr = [];  
			for (let i=0; i<32; i++) {
				let j = (Math.random() * (tokenCharacters.length-1)).toFixed(0);
				tokenArr[i] = tokenCharacters[j];
			}
			
			jQuery('#kirilkirkov .wp-invoices-rest-api-token-field').val(tokenArr.join(""));
		});
		jQuery(document).on('click', '#kirilkirkov .show-endpoint-docs', function() {
			jQuery(this).next().toggleClass('hidden');
			jQuery(this).find('.dashicons-arrow-down-alt2').toggleClass('hidden');
			jQuery(this).find('.dashicons-arrow-up-alt2').toggleClass('hidden');
		});
		
		// init callendar
		jQuery(document).ready(function() {
			if($.isFunction($.fn.datepicker)) {
				jQuery( "#kirilkirkov .datepicker" ).datepicker({ dateFormat: kkpdfim_datepicker_data.datepicker_format });
			}
		});
	}
	
})(jQuery);