<?php
if (!isset($quick_data['selected'])) $quick_data['selected'] = array();

print "
<div class='table-cell quick ";
if (isset($quick_data['css']) && $quick_data['css']) print $quick_data['css'];
print "'>
	<span>".$quick_data['value']."</span>
	<div class='inline-form form tree-select'>
		<div class='".$quick_data['class']."'></div>
	</div><!-- /.form -->";
$script = array();
$script['js'] = NULL;
$script['options'] = json_encode(build_tree($data, true));
$script['value'] = json_encode($quick_data['selected']);
$script['placeholder'] = LABEL_SEARCH;
$script['empty'] = LABEL_NO_RESULTS;
$script['class'] = $quick_data['class'];

$script['js'] = <<<JS
	if ($('.{$quick_data['class']}').length != 0){
		const quickselect{$arr['id']} = new Treeselect({
		  parentHtmlContainer: document.querySelector('.{$script['class']}'),
		  options: {$script['options']},
		  value: {$script['value']},
		  id: '{$script['class']}',
		  openLevel: 5,
			placeholder: "{$script['placeholder']}",
			emptyText: "{$script['empty']}",
		  isSingleSelect: true,
		  iconElements: {
		  	arrowUp: "<i class='material-icons md-20'>expand_less</i>",
		  	arrowDown: "<i class='material-icons md-20'>expand_more</i>",
		  	arrowRight: "<i class='material-icons md-20'>chevron_right</i>",
		  	attention: "<i class='material-icons md-20 md-blue'>warning_amber</i>",
		  	clear: "<i class='material-icons out md-20'>cancel</i>",
		  	cross: "<i class='material-icons md-20'>close</i>",
		  	check: "<i class='material-icons md-16'>check</i>",
		  	partialCheck: "<i class='material-icons md-16'>remove</i>"
		  }
		})
		
		quickselect{$arr['id']}.srcElement.addEventListener('input', (e) => {
			var this_obj = $('.{$script['class']}');
			var module = $('.{$script['class']}').parents('.table-row').attr('data-module');
		  var backend_module = $('.{$script['class']}').parents('.table-row').attr('data-backend-module');
	    var id = $('.{$script['class']}').parents('.table-row').attr('data-id');
	    var before = '';
	    var after = '';
	    if (this_obj.attr('data-before')) before = this_obj.attr('data-before');
	    if (this_obj.attr('data-after')) after = this_obj.attr('data-after');
	
			var data_arr = Array();
			var key = 'quick[{$quick_data['name']}]';
			data_arr.push({name: key, value: e.detail });
			data_arr.push({name: 'key', value: key });
			data_arr.push({name: 'update', value: 1 });
	    
			$.post("ajax_form.php?module="+module+"&backend_module="+backend_module+"&id="+id+"&action=quick", data_arr, function(data){
				this_obj.parents('.table-cell').find('span').html(before+data+after).show();
				this_obj.parents('.inline-form').hide();
				this_obj.parents('.table-cell').removeClass('active');
				this_obj.parents('.table-row').nextAll().each(function(index) {
					if ($(this).children('.active').find('input[name="'+key+'"]').length){
						$(this).children('.active').find('input[name="'+key+'"]').focus();
						return false;
					}
				});
			});
		})
	}
	JS;
?>
<script>
if ($('.<?=$quick_data['class'];?>').length != 0){
	const treeselect = new Treeselect({
	  parentHtmlContainer: document.querySelector('.<?=$quick_data['class'];?>'),
	  options: <?=json_encode(build_tree($data, false));?>,
	  value: <?=json_encode($quick_data['selected']);?>,
	  id: '<?=$quick_data['class'];?>',
	  openLevel: 5,
	  placeholder: "<?=LABEL_SEARCH;?>",
	  emptyText: "<?=LABEL_NO_RESULTS;?>",
	  isSingleSelect: true,
	  iconElements: {
	  	arrowUp: "<i class='material-icons md-20'>expand_less</i>",
	  	arrowDown: "<i class='material-icons md-20'>expand_more</i>",
	  	arrowRight: "<i class='material-icons md-20'>chevron_right</i>",
	  	attention: "<i class='material-icons md-20 md-blue'>warning_amber</i>",
	  	clear: "<i class='material-icons out md-20'>cancel</i>",
	  	cross: "<i class='material-icons md-20'>close</i>",
	  	check: "<i class='material-icons md-16'>check</i>",
	  	partialCheck: "<i class='material-icons md-16'>remove</i>"
	  }
	})
	
	treeselect.srcElement.addEventListener('input', (e) => {
		var $this = $('.<?=$quick_data['class'];?>');
		var $module = $('.<?=$quick_data['class'];?>').parents('.table-row').attr('data-module');
	  var $backend_module = $('.<?=$quick_data['class'];?>').parents('.table-row').attr('data-backend-module');
    var $id = $('.<?=$quick_data['class'];?>').parents('.table-row').attr('data-id');
    var $before = '';
    var $after = '';
    if ($this.attr('data-before')) $before = $this.attr('data-before');
    if ($this.attr('data-after')) $after = $this.attr('data-after');

		var $data = Array();
		var $key = 'quick[<?=$quick_data['name'];?>]';
		$data.push({name: $key, value: e.detail });
		$data.push({name: 'key', value: $key });
		$data.push({name: 'update', value: 1 });
    
		$.post("ajax_form.php?module="+$module+"&backend_module="+$backend_module+"&id="+$id+"&action=quick", $data, function(data){
			$this.parents('.table-cell').find('span').html($before+data+$after).show();
			$this.parents('.inline-form').hide();
			$this.parents('.table-cell').removeClass('active');
			$this.parents('.table-row').nextAll().each(function(index) {
				if ($(this).children('.active').find('input[name="'+$key+'"]').length){
					$(this).children('.active').find('input[name="'+$key+'"]').focus();
					return false;
				}
			});
		});
	})
}
</script>
<?php
print "
</div><!-- /.table-cell -->";