{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'}
{combine_script id='jquery.chosen' load='footer' path='themes/default/js/plugins/chosen.jquery.min.js'}
{combine_css path="themes/default/js/plugins/chosen.css"}


{footer_script}{literal}
(function($) {
	$(document).ready(function(){
		
		
		var $oTable,
			$nEditing = null,
			$val	  = $('.val').html(),
			$add_opt  = $('#add_option_prod').html();
			
		$('#product_list input[type=checkbox]').each(function(){
			$(this).prop('checked', false)
		});
		
		$('#AddProd').click(function() {
			$('.add_content').css('top','100px')
			$('.Tadd').show();
			$('#Add_product').fadeIn();
			$('#showAddProd .infos').hide();
			$('input[name=product]').focus();
			return false;
		});

		$('#close_Add_product').click(function() {
			$('#Add_product').fadeOut(function(){
				$('#add_option_prod').hide();
				$('.tit').hide();
				$('#AddProdForm input[type=text]').attr('value','');
				$('#AddProdForm textarea#noteAdmin').val('');
				$('li.search-choice').remove();
				$('select.chzn-select option').each(function(){
					$(this).removeAttr('selected');
				})
			});
			return false;
		});
		
		$('#AddProdForm').submit(function(){
			var $return = true;
			if($.trim($('input#product',this).val()).length==0 || $.trim($('input#price',this).val()).length==0){
				$return = false;
				$('.errors').show();
				setTimeout(function(){
					$('.errors').hide()
				},3000);
			}
			return $return
		})
		
		$('#permitAction input[type="submit"]').click(function() {
			if (!confirm("{/literal}{'Are you sure?'|translate|escape:javascript}{literal}")) {
				$('#product_list input[type=checkbox]').each(function(){
					$(this).prop('checked', false);
					delet_button()
				});
			} else {
				$('#formTab_prod').submit();
			}
			return false;
		} );  
		
			$oTable = $('#product_list').dataTable({
				"bAutoWidth":   false,
				"bStateSave": true,
				"aoColumns" : [
                           { sWidth: '2%','sClass': 'center', 'bSortable': false},
                           { sWidth: '38%','sClass': 'product_row'  },
                           { sWidth: '38%'},
                           { sWidth: '12%', 'bSortable': false,  },
						   { sWidth: '8%', },
                          ],
				"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}",
					},
				},
			});
		
		function _rempform($this){
			var $nRow 		= $this.parents('tr')[0],
				$jqInputs 	= $('input', $nRow),
				$id 		= $jqInputs[0].value,
				$prod		= $('#prodvar').data('product'),
				$product	= $prod[$id].product,
				$Nadmin		= $prod[$id].noteAdmin,
				$price		= $prod[$id].price,
				$option		= $prod[$id].option;
			for(key in $option) {
				$('.chzn-select option').each(function(){
					if($(this).text()==$option[key]){
						$(this).attr('selected','selected');
					}
				});
			}
			$('.chzn-select').trigger("chosen:updated");
			
			$('input#product_id').attr('value',$id);
			$('input#product').attr('value',$product);
			$('textarea#noteAdmin').val($Nadmin);
			$('input#price').attr('value',$price);
		} 
		
		$(document).on('click','#formTab_prod .prodEdit', function () {
			var $this	= $(this),
				$pos	= $(document).scrollTop(),
				$pos 	= $pos + 100;
				
			$('.add_content').css('top',$pos)
			$('.Tedit').show();
			_rempform($this);
			$('#Add_product').fadeIn();
	
			return false;
		});
	    
		$(document).on('click','#formTab_prod .prodDupli', function () {
			var $this	= $(this);
				$pos	= $(document).scrollTop(),
				$pos 	= $pos + 100;
				
			$('.add_content').css('top',$pos)
			$('.Tdupli').show();
			_rempform($this);
			$('input#product_id').attr('value','');
			$('#Add_product').fadeIn();
			
			return false
		});

		$(document).on('click', '#selectAll', function () {
			$('#product_list input[type=checkbox]').prop('checked', true);
			delet_button()
			return false;
		});

		$(document).on('click', '#selectNone', function () {
			$('#product_list input[type=checkbox]').prop('checked', false);
			delet_button()
			return false;
		});

		$(document).on('click', '#selectInvert', function () {
			$('#product_list input[type=checkbox]').each(function(){
				if($(this).is (':checked')){
					$(this).prop('checked', false);
				}else{
					$(this).prop('checked', true);
				}
				delet_button()
			});
			return false;
		});
		
		$(document).on('change','#product_list input[type=checkbox]', function () {
			delet_button()
		});
				
		function delet_button(){
			if($('#product_list 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;
		});
				
		$('.chzn-select').chosen({width:"400px"})
		
		$('.addopt').click(function(){
			$('#add_option_prod').show();
			$('#sub_add_product').hide();
		});
				
		$(document).on('change','#optType',function(){
			var	$valSel = $('.addopt_table select#optType option:selected').attr('value');
			if($valSel=="text" || $valSel=="textarea"){
				$('.valeur').fadeOut('fast');
			} else {
				$('.valeur').fadeIn('fast')
			}
		});
		
		$('.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
		});
		
		$(document).on('submit','#addopt_form',function(){
			if($.trim($('input#optName',this).val()).length==0){
				$('.erroropt').show();
				setTimeout(function(){
					$('.erroropt').hide()
				},3000);
			}else{
				var $optecour = $('input#optName').val();
				if($('.valeur').is(':hidden')){
					$('.valeur').remove();
				}
				$('.optadded').show();
				setTimeout(function(){
					$('.optadded').hide()
				},3000);
				$.ajax({
					type:"POST",
					data: $(this).serialize(),
					success: function(html){
						var $idlo = $(html).find('#idlastopt').text();
						console.debug($idlo);
						$('#opt select').append($('<option />').attr({'value':$idlo,'selected':'selected'}).text($optecour));
						$('.chzn-select').trigger("chosen:updated");
					}
				});
				$('#sub_add_product').show();
				$('#add_option_prod input[type=text]').attr('value','');
				$('.val').remove();
				$('.valeur').append($('<div/>').addClass('val').append($val));
				$('select#optType option').each(function(){
					$(this).removeAttr('selected');
				});

				$('#add_option_prod').hide().html($add_opt);
			}
			return false
		})

	});
})(jQuery);
{/literal}{/footer_script}

<div id="prodvar" class="titrePage" data-product='{$mps_product|@json_encode}'>
  <h2>{'Products'|@translate}</h2>
</div>
<p class="showCreateAlbum" id="showAddProd">
  <a href="#" id="AddProd" class="icon-plus-circled">{'Add a product'|translate}</a>
  <span class="infos" style="display:none"></span>
</p>

<div id="Add_product" class="add_wrap" style="display:none">
<div class="add_content">
<span id="close_Add_product" class="close_box_add"></span>
	<div class="boxtitre"><h1>
	<span class="tit Tadd">{'Add '|translate}</span>
	<span class="tit Tdupli">{'Duplicate '|translate}</span>
	<span class="tit Tedit">{'Edit '|translate}</span>
	<span class="tit Tedit Tdupli">{'the product'|translate}</span>
	<span class="tit Tadd">{'a product'|translate}</span>
	</h1></div>
<form id="AddProdForm"  method="post" name="add_prod" action="">
 <div style="margin: 0 0 10px 5px">
	<div class="addprod_table">
    <div>
		<span>{'Product'|translate}</span>
		<span><input id="product" type="text" name="product" size="100"></span>
		<span><input id="product_id" type="hidden" name="id"></span>
	</div>
    
	<div>
      <span valign="top">{'Note administrator'|translate}</span>
      <span><textarea id="noteAdmin" rows="8" cols="50" name="noteAdmin" maxlength="50"></textarea></span>
    </div>
    <div>
      <span>{'Price'|@translate}</span>
      <span><input id="price" type="text" name="price"> {$mps_conf.currency}</span>
    </div>
	<div id="opt">
	  <span>{'Options'|@translate}</span>
	  <span>
      <select data-placeholder="{'select a option'|@translate}" class="chzn-select" multiple style="width:700px;" name="opt[]">
	  {html_options options=$mps_option }
	  </select>
	  </span>
<p class="showCreateAlbum" id="showAddProd">
  <a href="#" class="addopt icon-plus-circled">{'Add a option'|translate}</a><span class="infos optadded" style="display:none">{'option registered'|translate}</span>

</p>
	</div>

 </div>	
 </div>
    <span class="actionButtons">
	  
	  <input type="hidden" name="product_add">
      <input id="sub_add_product" class="submit" name="product_add" type="submit" value="{'Submit'|@translate}">
    </span>
	<span class="errors" style="display:none">{'you must enter the product and not the price'|@translate}</span>
</form>


<div id="add_option_prod"  style="display:none">
<div>

<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 erroropt" style="display:none">{'you must enter the name of the option'|@translate}</span>

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

</div>
</div>

<div id=prod_table>
<form id="formTab_prod" method="post" name="add_prod" action="">
	<table id="product_list">
	<thead>
		<tr>
			<th></th>
			<th>{'Product'|@translate}</th>
			<th>{'Note administrator'|@translate}</th>
			<th>{'Options'|@translate}</th>
			<th>{'Price'|@translate}</th>
			
		</tr>
	</thead>
	<tbody>
	{foreach from=$mps_product item=product name=product}
		<tr class="{if $smarty.foreach.product.index is odd}row1{else}row2{/if}">
			<td><input type="checkbox" name="check[]" value={$product.id}></td>
			<td><span>{$product.product}</span> <a title="{'edit'|translate|escape:'javascript'}" class="prodEdit icon-pencil tabact">{'edit'|translate}</a> <a title="{'duplicate'|translate|escape:'javascript'}" class="prodDupli icon-pencil tabact">{'duplicate'|translate}</a></td>
			<td>{$product.noteAdmin} </td>
			<td>{foreach from=$product.option item=option name=option}{$option}/{/foreach}</td>
			<td>{$product.price} {$mps_conf.currency}</td>
		</tr>


	{/foreach}
	</tbody>
	</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 products 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 products 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_product item=product name=product}
	<li id="{$product.id}">{$product.product} -> {$product.noteAdmin} -> {$product.price} {$mps_conf.currency}</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>