<?= $this->Form->create($section, ['enctype' => 'multipart/form-data', 'class'=>'form-horizontal row-fluid']) ?>
<div class="row form-area">
	<div class="col-sm-12">
		<div class="row form-group" id="parent_sections">
			<div class="col-sm-3 col-xs-12 field-label">
			 Category
			</div>
			<div class="col-sm-7 col-xs-12 select-input">
				<?= $this->Form->input('category_id', ['class' => 'form-control', 'options' => $pSections, 'label' => false, 'empty'=>'-- Select --','required','onChange'=>'updateSubCats(value)']);?>
				
			</div>
			
			
		</div>
		<div class="row form-group" id="parent_sections">
			<div class="col-sm-3 col-xs-12 field-label">
			 Sub Category
			</div>
			<div class="col-sm-7 col-xs-12 select-input">
				<?= $this->Form->input('parent_category_id', ['class' => 'form-control','id' => 'subcat', 'label' => false, 'empty'=>'-- Select --','required']);?>
				
			</div>
			
			
		</div>
		<div class="row form-group">
			<div class="col-sm-3 col-xs-12 field-label">
				Name
			</div>
			<div class="col-sm-7 col-xs-12 text-input">
				<?= $this->Form->input('name', ['class' => 'form-control', 'label' => false, 'required']);?>
			</div>
		</div>
		
		<div class="row form-group">
			<div class="col-sm-3 col-xs-12 field-label">
				Description
			</div>
			<div class="col-sm-7 col-xs-12 text-input">
				<?= $this->Form->input('description', ['class' => 'form-control', 'label' => false, 'required']);?>
			</div>
		</div>

		
		
		
		
		<div class="row form-group">
			
			<div class="col-sm-9 col-xs-12 col-sm-offset-3">
				<?= $this->Form->button('Save', ['class' => 'btn btn-primary']); ?>
			</div>
		</div>		
	</div>
</div>
<?= $this->Form->end() ?>
	<script type="text/javascript">
	function updateSubCats(str) {
	  var xhttp;
	  if (str == "") {
		return;
	  }

	  xhttp = new XMLHttpRequest();
	  xhttp.onreadystatechange = function() {
		if (xhttp.readyState == 4 && xhttp.status == 200) {
		  
		  // Sanitize all the json encodings make it a bare string : and ,
		  var myresult = xhttp.responseText.replace(/"/gi,'');
		  myresult = myresult.replace(/{/gi,'');
		  myresult = myresult.replace(/}/gi,'');
		  myresult = myresult.replace('[','');
		  myresult = myresult.replace(']','');
		  var mydata = myresult.split(',');
		  
		  var inneroptions = "";
		  //alert('mydata');
		   inneroptions = inneroptions + "<option value=''>-- Select --</option>";
		  for (var mainCat in mydata) {
			  if (mydata.hasOwnProperty(mainCat)) {
				  var current = mydata[mainCat].split(':');				 
				  inneroptions = inneroptions + "<option value='" + current[0] + "'>" + current[1] + "</option>";
			  }
			}
			
			document.getElementById("subcat").innerHTML = inneroptions;
		}
	  }
	  xhttp.open("GET", "<?= $this->Url->build(['controller' => 'autos', 'action' => 'updateSubCategories']) ?>/"+str, true);
	  xhttp.send();
	}
	
</script>