<section class="grid_12" id="main">
	<article>
		<h1><?php echo $this->navigation()->breadcrumbs()->setSeparator(' &raquo; ')->setRenderInvisible(true)->setMinDepth(0); ?></h1>
		<h4 style="margin-bottom: 0px;"><?= $this->bean->name ?> (<?= $this->bean->data ?>)</h4>
		<div class="formfields-groups">
			<?php $groupName = ''; ?>
			<?php foreach ($this->formFieldsBeans as $formField): ?>
				<?php if ($groupName != $formField->inputname): ?>
					<?php if ($groupName != ''): ?>
						</div>
					<?php endif; ?>
					<?php $groupName = $formField->inputname; ?>
					<div style="margin-top: 10px; width: 287px; float: left;" class="formfields-group" id="<?= $groupName ?>">
						<h6 style="margin-bottom: 5px;"><?= $formField->fieldname ?></h6>
					<?php endif; ?>

					<input type="checkbox" name="<?= $formField->label ?>" value="<?= $formField->id ?>" style="required:<?= $formField->required ?>;"><?= $formField->label ?><br>		
				<?php endforeach; ?>
			</div>
		</div>
		<div class="clear"></div>
		<a style="height: 14px;" id="save" class="button red" href="#">Zapisz</a>
		<a style="height: 14px;" id="cancel" class="button white" href="/Forms/admin_index/edit/id/<?= $this->bean->id ?>">Powrót</a>
		<div class="clear"></div>			
		<div id="created-form"></div>

	</article>
</section>

<script type="text/javascript">
	var elementsArray = [];

	function getInputsByValue(value)
	{
		var allInputs = document.getElementsByTagName("input");
		var results = [];
		for (var x = 0; x < allInputs.length; x++)
			if (allInputs[x].value == value)
				results.push(allInputs[x]);
		return results;
	}

	function getFormInputElement(id) {
		var element = getInputsByValue(id);
		if($(element).parents('.formfields-group').attr('id') == 'text'){
			var newInput = document.createElement("input");
			newInput.type=$(element).parents('.formfields-group').attr('id');
			newInput.name=$(element).attr('name');
			newInput.placeholder=$(element).attr('name');
			newInput.id=id + "-c";
		}else if($(element).parents('.formfields-group').attr('id') == 'textarea'){
			var newInput = document.createElement("textarea");
			newInput.placeholder=$(element).attr('name');
			newInput.id=id + "-c";
		}else if($(element).parents('.formfields-group').attr('id') == 'checkbox'){
			var newInput = document.createElement("div");
			newInput.id=id + "-c";
			
			var label = document.createElement('label')
			label.htmlFor = "id";
			label.appendChild(document.createTextNode($(element).attr('name')));
			newInput.appendChild(label);
			
			var newInput2 = document.createElement("input");
			newInput2.type="checkbox";
			newInput2.name=$(element).attr('name');
			newInput2.value=id + "-c";
			newInput.appendChild(newInput2);
		}else if($(element).parents('.formfields-group').attr('id') == 'submit'){
			var newInput = document.createElement("input");
			newInput.type=$(element).parents('.formfields-group').attr('id');
			newInput.value=$(element).attr('name');
			newInput.id=id + "-c";
		}else if($(element).parents('.formfields-group').attr('id') == 'file'){
			var newInput = document.createElement("input");
			newInput.type=$(element).parents('.formfields-group').attr('id');
//			newInput.value=$(element).attr('name');
			newInput.id=id + "-c";
		}
		return newInput;
	}
	
	function addInputElement(element){
		document.getElementById('created-form').appendChild(element);
		return true;
	}
	
	function removeElement(id){
		var element = document.getElementById(id + "-c");
		$(element).remove();
		return true;
	}
	
	function addElementToArray(id){
		elementsArray[elementsArray.length] = id;
		return true;
	}
	
	function removeElementFromArray(id){
		var idx = elementsArray.indexOf(id);
		elementsArray.splice(idx, 1);
		return true;
	}
	
	$(document).ready(function() {
		var fields = <?= $this->fields ?>;
		$.each(fields, function(i, v){
			console.log(v);
			var ele = getInputsByValue(v);
			$(ele).click();
				addInputElement(getFormInputElement($(ele).attr('value')));
				addElementToArray($(ele).attr('value'));
		});
		
		
		$(".formfields-groups input").on('change', function(){
			var checkbox = $(this);
			if(checkbox.is(':checked')){
				addInputElement(getFormInputElement(checkbox.attr('value')));
				addElementToArray(checkbox.attr('value'));
			}else{
				removeElement(checkbox.attr('value'));
				removeElementFromArray(checkbox.attr('value'));
			}
		});
		
		$("a#save").on('click', function(){
			var jObject={};
			for(i in elementsArray)
			{
			    jObject[i] = elementsArray[i];
			}
			$.ajax({
				url: '<?= $this->url(array('module' => 'Forms', 'controller' => 'admin_index', 'action' => 'ajax-save-form-fields', 'id' => $this->bean->id))?>',
				data: {jObject: jObject},
				success: function() {
						window.location.href = "/Forms/admin_index/edit/id/<?= $this->bean->id ?>";
                                        }
			});
			return false;
		});
	});
</script>

