@extends('layouts.app')

@section('content')
<div class="page-header"><h2>  {{ $pageTitle }} <small>Configuration</small> </h2></div>


		@include('sximo.module.tab',array('active'=>'form','type'=> 'addon'))
<ul class="nav nav-tabs" style="margin-bottom:10px;">
    <li class="nav-item" ><a class="nav-link " href="{{ url('sximo/module/form/'.$module_name)}}">Form Configuration </a></li>
    <li class="nav-item" ><a class="nav-link " href="{{ url('sximo/module/subform/'.$module_name)}}">Sub Form </a></li> 
  <li class="nav-item"><a class="nav-link active" href="{{ url('sximo/module/formdesign/'.$module_name)}}">Form Layout</a></li> 
  
</ul>

	
	<div class="infobox infobox-success ">
		<button type="button" class="close" data-dismiss="alert"> x </button>
		<strong>Tips !</strong> Drag and drop rows to re ordering lists </p>
	</div>
			
 {!! Form::open(array('url'=>'sximo/module/formdesign/'.$module_name,'id'=>'doReorder', 'class'=>'form-vertical ','parsley-validate'=>'','novalidate'=>' ')) !!}
 
 <div class="row">
 <div class="col-md-4">
	  <div class="form-group ">
		<label> Number Of Block : </label>
		
		<select class="form-control"  required name="column" style="width:200px;" onchange="location.href='?block='+this.value">
			
				<option value="1"  >1 Block </option>	
			
				<option value="2"  >2 Block </option>	
			
				<option value="3"  >3 Block </option>	
			
				<option value="4"  >4 Block </option>	
			
		</select>
		
	</div>

 </div>
 

 <div class="col-md-4">
	<div class="form-group">
		<label> Display Form As : </label>
		<div class="radio-group">		
			<input type="radio" name="format" value="grid" class="filled-in" id="r-grid"
						  /> <label for="r-grid"> Grid </label>		
			<input type="radio" name="format" value="tab" class="filled-in" id="r-tab"
						  /> <label for="r-tab"> Tab </label>		
			<input type="radio" name="format" value="groupped" class="filled-in" id="r-groupped"
						  /> <label for="r-groupped"> Grouped </label>		
			<input type="radio" name="format" value="wizzard" class="filled-in" id="r-wizzard"
						  /> <label for="r-wizzard"> Wizzard / Step Form </label>	 	  	
		</div>		
	</div> 
	
	<div class="form-group">
		<label> Form Layout : </label>
		<div class="radio-group">
		
			<input type="radio" name="display" value="horizontal" class="minimal-green"  id="c-horizontal"
						  /> <label for="c-horizontal"> Normal </label>	
		
			<input type="radio" name="display" value="vertical" class="minimal-green" id="c-vertical"
						  /> <label for="c-vertical"> Vertical </label>	
		
		</div>				
	</div>		

 </div>
 <div class="col-md-4">
	<div class="form-group">
	
			<label> Once you made changes on layout , please rebuild Form Files to take affect </label>
			<input type="hidden" name="reordering" id="reordering" value="" class="form-control" />
			<input type="hidden" name="module_id" value="{{ $row->module_id }}" />
			<button type="button" class="btn btn-primary" id="saveLayout"> Save Layout </button>
	
	 </div>	 
 </div>


</div>
<div style="margin-bottom:20px; clear:both; border-bottom:dashed 1px #ddd; padding:5px;"></div>
 


				 
			<!-- BEGIN: XHTML for example 1.2 -->
			
			<div id="FormLayout" class="row">
				
				<div class="clearer">&nbsp;</div>
				<div class="col-md-12" style="margin:10px 0;">

				</div>	
				

			</div>
 {!! Form::close() !!}


<script>
$(document).ready(function() {
	$('#saveLayout').click(function(){
		val = getItems('#FormLayout');
		$('#reordering').val(val);
		$('#doReorder').submit();

		//alert('Items saved (' + val + ')');
	});
	// Example 1.2: Sortable and connectable lists
	$('#FormLayout .sortable-list').sortable({
		connectWith: '#FormLayout .sortable-list'
	});
	

});

	function getItems(exampleNr)
	{
		var columns = [];

		$(exampleNr + ' ul.sortable-list').each(function(){
			columns.push($(this).sortable('toArray').join(','));				
		});

		return columns.join('|');
	}
</script>
<style>

/* Floats */


.clear,.clearer {clear: both;}
.clearer {
	display: block;
	font-size: 0;
	height: 0;
	line-height: 0;
}


/*
	Example specifics
------------------------------------------------------------------- */

/* Layout */





/* Sortable items */

.sortable-list {
	background-color: #fff; border: 1px solid #ddd;
	list-style: none;
	margin: 0;
	min-height: 60px;
	padding: 10px;
}
.sortable-item {
	background-color: #fafafa;
	border: 1px solid #ddd;
	cursor: move;
	display: block;
	margin-bottom: 5px;
	padding: 5px 20px;
}

/* Containment area */

#containment {
	background-color: #FFA;
	height: 230px;
}


/* Item placeholder (visual helper) */

.placeholder {
	background-color: #ddd;
	border: 1px dashed #666;
	height: 58px;
	margin-bottom: 5px;
}
</style>
@stop