{combine_script id='jquery.dataTables' load='footer' path='themes/default/js/plugins/jquery.dataTables.js'}
{combine_css path="themes/default/js/plugins/datatables/css/jquery.dataTables.css"}
{combine_css path=$MPS_PATH|@cat:"admin/template/style.css"}
{combine_script id='jquery.ui.sortable' load='footer' path='themes/default/js/ui/minified/jquery.ui.sortable.min.js'}


{footer_script}{literal}
(function($) {
	$(document).ready(function(){
	
		var $oTable,
			$nEditing = null, 
			$select	  = $('#select').html();
			$val	  = $('.val').html();
	
		$('#table_option input[type=checkbox]').each(function(){
			$(this).prop('checked', false)
		});

		$('.addedit').click(function() {
			$('.Tadd').show();
			$('.add_content').css('top','100px')
			$('#add_option').fadeIn();
			$("input[name=name]").focus();
			_verif_type_opt();
			return false;
		});
		
		$('#close_addoption').click(function() {  
			$('#add_option').fadeOut(function(){
				$('.tit').hide();
				$('#add_option input[type=text]').attr('value','');
				$('.val').remove();
				$('.valeur').append($('<div/>').addClass('val').append($val));
				$('select#optType option').each(function(){
					$(this).removeAttr('selected');
				});
			});
			return false
		});
		
		$('#addopt_form').submit(function(){
			var $return = true;
			if($.trim($('input#optName',this).val()).length==0){
				$return = false;
				$('.errors').show();
				setTimeout(function(){
					$('.errors').hide()
				},3000);
			}
			if($('.valeur').is(':hidden')){
				$('.valeur').remove();
			}
			return $return
		})

		$(document).on('change','#optType',function(){	
			 _verif_type_opt();
		});
				
		function _verif_type_opt(){
			var	$valSel = $('.addopt_table select#optType option:selected').attr('value');
			if($valSel=="text" || $valSel=="textarea"){
				$('.valeur').fadeOut('fast');
			} else {
				$('.valeur').fadeIn('fast')
			}
		}
		
		$('#option_add').click(function(){
			if($('.valeur').is(':hidden')){
				$('.valeur').remove();
			}
			$('#addopt_form').submit();
			return false
		})
		
		$('.addVal').click(function() {
			$('.valeur').append($('<div/>').addClass('val').append($val));
			return false;
		})
				
		
		$(document).on('click','.delVal',function(){
			if (confirm("{/literal}{'Are you sure?'|translate|escape:javascript}{literal}")) {
					var $Nval = $('.addopt_table .valeur input').length;
				if($Nval>1){
					$(this).parents('div.val').remove();
				}else{
					var $val = $(this).parents('div.val');
					$('input', $val).val('').attr('value','');
				}
			}
			return false
		});
		
		$oTable = $('#table_option').dataTable({
			"bAutoWidth":   false,
			"bStateSave": true,
			"aoColumns" : [
                          { sWidth: '2%','sClass': 'center', 'bSortable': false, },
                          { sWidth: '35%'},
                          { sWidth: '36%'},
                          { sWidth: '15%', 'bSortable': false},
                          { sWidth: '7%' },
                          { sWidth: '4%','sClass': 'center', 'bSortable': false, },
                         ],
			"oLanguage": {
				"sProcessing":     "{/literal}{'Loading...'|translate|escape:'javascript'}{literal}",
				"sSearch":         '<span class="icon-search"></span>'+"{/literal}{'Search'|translate|escape:'javascript'}{literal}",
				"sLengthMenu":     "{/literal}{'Display _MENU_ records per page'|translate|escape:'javascript'}{literal}",
				"sInfo":           "{/literal}{'Showing _START_ to _END_ of _TOTAL_ records'|translate|escape:'javascript'}{literal}",
				"sInfoEmpty":      "{/literal}{'Showing 0 to 0 of 0 records'|translate|escape:'javascript'}{literal}",
				"sInfoFiltered":   "{/literal}{'(filtered from _MAX_ total records)'|translate|escape:'javascript'}{literal}",
				"sInfoPostFix":    "",
				"sLoadingRecords": "{/literal}{'Loading...'|translate|escape:'javascript'}{literal}",
				"sZeroRecords":    "{/literal}{'No matching option found'|translate|escape:'javascript'}{literal}",
				"oPaginate": {
					"sFirst":    "{/literal}{'First'|translate|escape:'javascript'}{literal}",
					"sPrevious": '&larr; '+"{/literal}{'Previous'|translate|escape:'javascript'}{literal}",
					"sNext":     "{/literal}{'Next'|translate|escape:'javascript'}{literal}"+' &rarr;',
					"sLast":     "{/literal}{'Last'|translate|escape:'javascript'}{literal}",
				},
			},
		});
		
		$(document).on('click','#table_option .optEdit', function () {
			var $this 	=$(this),
				$pos	= $(document).scrollTop(),
				$pos 	= $pos + 100;
				
			$('.add_content').css('top',$pos)
			$('.Tedit').show();
			_rempform($this);
			$('#add_option').fadeIn();
	
			return false;
		});	
		
		$(document).on('click','#table_option .optDupli', function () {
			var $this 	=$(this);
				$pos	= $(document).scrollTop(),
				$pos 	= $pos + 100;
				
			$('.add_content').css('top',$pos)
			$('.Tdupli').show();
			_rempform($this);
			$('input#optId').attr('value','');
			$('#add_option').fadeIn();
	
			return false;
		});	

		function _rempform($this){
			var $nRow 	  = $this.parents('tr')[0],
				$jqInputs = $('input', $nRow),
				$id 	  = $jqInputs[0].value,
				$opt      = $('#optvar').data('option'),
				$id		  = $opt[$id].id,
				$name	  = $opt[$id].name,
				$title	  = $opt[$id].title,
				$type	  = $opt[$id].type,
				$requi	  = $opt[$id].requi,
				$value    = $opt[$id].val;
				
			$('input#optId').attr('value',$id);
			$('input#optName').attr('value',$name);
			$('input#optTitle').attr('value',$title);
			if($requi==1){
				$('input#optRequi').attr('checked','checked');
			};
			$('select#optType').remove();
			
			$('#typeOpt span:last').append($select)
			$('select#optType option[value=' +$type+']').attr('selected','selected');
			
			if($value.length != 0){
				$('.val').remove();
				$.each($value,function(e,val){
					$('.valeur').append($('<div />').addClass('val').append($val));
					$('.val').last().find('input').attr('value',val)
				});
			}
			_verif_type_opt();
		
		}
		
		$('#selectAll').click(function () {
			$('#table_option input[type=checkbox]').prop('checked', true);
			_delet_button()
			return false;
		});

		$('#selectNone').click(function () {
			$('#table_option input[type=checkbox]').prop('checked', false);
			_delet_button()
			return false;
		});

		$('#selectInvert').click(function () {
			$('#table_option input[type=checkbox]').each(function(){
				if($(this).is (':checked')){
					$(this).prop('checked', false);
				}else{
					$(this).prop('checked', true);
				}
				_delet_button()
			});
			return false;
		});
		
		$('#table_option td.del input[type=checkbox]').change(function () {
			_delet_button()
		});
				
		function _delet_button(){
			if($('#table_option td.del input[type=checkbox]:checked').length > 0){
				$('#forbidAction').css('display','none');
				$('#permitAction').css('display','block');
			}else{
				$('#forbidAction').css('display','block');
				$('#permitAction').css('display','none');
			}
		};

		$("#listOrder").sortable({ 
			placeholder: 'highlight', 
			update: function() {  
				var $order = $("#listOrder").sortable("toArray");
                $('#newOrder').val($order.join(","));	
			}
		});
		
		$("#listOrder").disableSelection();
		
		$('#ChangeOrder').click(function() {
			$("#change_Order").fadeIn(
			);
			return false;
		});
		
		$('#close_changeOrder').click(function() {
			$("#change_Order").fadeOut();

			return false;
		});
		
		
	})
	
})(jQuery);
{/literal}{/footer_script}		
		
<div id="optvar" class="titrePage" data-option='{$mps_option|@json_encode}'>
	<h2>{'Options'|translate}</h2>
</div>

<p class="showCreateAlbum" id="showAddProd">
  <a href="#" class="addedit icon-plus-circled">{'Add a option'|translate}</a>
</p>

<div id="add_option" class="add_wrap" style="display:none">
<div class="add_content">
	<div class="boxtitre"><h1>
	<span class="tit Tadd">{'Add '|translate}</span>
	<span class="tit Tedit">{'Edit '|translate}</span>
	<span class="tit Tdupli">{'Duplicate '|translate}</span>
	<span class="tit Tedit Tdupli">{'the option'|translate}</span>
	<span class="tit Tadd">{'a option'|translate}</span>
	</h1></div>
	<span id="close_addoption" class="close_box_add"></span>

<form id="addopt_form" method="post" name="add_opt" action="">
 <div style="margin: 0 0 10px 5px" >
	<div class="addopt_table">
    <div>
		<span>{'Name'|translate}</span>
		<span><input id="optId" type="hidden" name="id"></span>
		<span><input id="optName" type="text" name="name" size="40"></span>
	</div>
    
	<div id="typeOpt">
      <span valign="top">{'Type of option'|translate}</span>
      <span id="select">{html_options name=type options=$mps_type_opt selected="select" id="optType"}</span>
    </div>
 
	<div>
      <span><label>{'The field is required'|@translate}
      <input id="optRequi" type="checkbox" name="requi" value="1">
	  </label><span>
    </div>
	<div>
      <span>{'Note administrator'|@translate}</span>
      <span><input id="optTitle" type="text" name="title" size="40"></span>
    </div>

	<div class="valeur">
	<div>
	<span>{'Option value'|@translate}</span>
	<span><a class="icon-plus-circled addVal" href="#">{'add value'|@translate}</a></span>
	</div>
	
	<div class="val">
	<span>{'Value'|@translate}</span>
	<span><input type="text" name="val[]" size="20"></span>
	<span><a class="icon-cancel-circled delVal"  href="#">{'delete'|@translate}</a></span>
	</div>
	</div>
	
	</div>
 </div>
 
    <span class="actionButtons">
	  <input name="option_add" type="hidden" value="{'Submit'|@translate}">
      <input id="option_add" class="submit" type="submit" value="{'Submit'|@translate}">
    </span>
	  <span class="errors" style="display:none">{'you must enter the name of the option'|@translate}</span>

</form>
</div>
</div>


	
<div class="optionCreate">
<form id="formOption" method="post" name="formOption" action="">
	<table id="table_option">
		<thead>
		<tr>
			<th></th>
			<th>{'Name'|@translate}</th>
			<th>{'Note administrator'|@translate}</th>
			<th></th>
			<th>{'Type'|@translate}</th>
			<th>{'Required'|@translate}</th>
		</tr>
	</thead>
	<tbody>
	{foreach from=$mps_option item=option name=option}
	<tr>
		<td class="del"><input type="checkbox" name="check[]" value={$option.id}></td>
		<td>{$option.name} <a title="{'edit'|translate|escape:'javascript'}" class="optEdit icon-pencil tabact">{'edit'|translate}</a> <a title="{'duplicate'|translate|escape:'javascript'}" class="optDupli icon-pencil tabact">{'duplicate'|translate}</a></td>
		<td>{$option.title}</td>
		<td>
		{if $option.type=="select"}
		{html_options name=option options=$option.val}</td>
		{/if}
		{if $option.type=="radio"}
		{html_radios name='option' options=$option.val separator='<br />'}</td>
		{/if}
		{if $option.type=="checkbox"}
		{html_checkboxes name='option' options=$option.val separator='<br />'}</td>
		{/if}

		{if $option.type=="text"}
		<input type="text" size="20"></td>
		{/if}
		{if $option.type=="textarea"}
		<textarea rows="4" cols="50"></textarea></td>
		{/if}
		<td>{$option.type}</td>
		<td>{if $option.requi=="1"}{'Yes'|@translate}{else}{'No'|@translate}{/if}</td>
	</tr>
		{/foreach}
	</table>
<div style="clear:right"></div>

<p class="checkActions">
  {'Select:'|@translate}
  <a href="#" id="selectAll">{'All'|@translate}</a>,
  <a href="#" id="selectNone">{'None'|@translate}</a>,
  <a href="#" id="selectInvert">{'Invert'|@translate}</a>
</p>

</div>

  <div id="forbidAction">{'No product selected'|@translate}</div>
  <div id="permitAction" style="display:none">
			
<input type=submit name="delete" value="{'Delete'|@translate}">
<br></br>
  </div>
</form>  	

<p class="showCreateAlbum" id="showChangeOrder">
  <a href="#" id="ChangeOrder" class="icon-plus-circled">{'Change the display order of options in the form'|translate}</a>
</p>

<div id="change_Order" class="add_wrap" style="display:none">
<div class="add_content">
<span id="close_changeOrder" class="close_box_add"></span>
<div class="boxtitre"><h1>{'Change the display order of options in the form'|translate}</h1>
	<p> {'drag / drop to change the order'|translate}</p></div>
<div id="form_order">
<form id="changeOrder"  method="post" name="add_prod" action="">
<fieldset>   
	
 <ul id="listOrder">
   	{foreach from=$mps_option item=option name=option}
	<li id="{$option.id}">{$option.name} -> {$option.type}</li>
	{/foreach}
    <br />
</fieldset>
<input id="newOrder" type="hidden" value="" name="newOrder">
<input id="sortable" type="submit" name="submit" value="{'Submit'|@translate}">

</form>
</div>
</div>
</div>