@if(!defined('LOAD_DUALLIST'))
	@push('scripts')
		<script src="/assets/plugins/multiselect/js/jquery.multi-select.js"></script>  

		<script>
			function initDualList(sel, model) {
				var model = (typeof(model) == 'undefined') ? '{{ $model ?? '' }}' : model;
				var selector = (typeof(sel) == 'undefined') ? '.duallist' : sel;
				var selectableHeader = "<div class='text-center'><label class='light'>{{ __('non_selected') }}</label></div>";
    			var selectionHeader = "<div class='text-center'><label class='green'>{{ __('selected') }}</label></div>";

				var settings = {
					selectableHeader: selectableHeader + "<input type='text' id='"+model+"_selectable_search' class='mb-2 form-control quicksearch selectable-search styled' autocomplete='off' placeholder='{{ __('search') }}'>",
					selectionHeader: selectionHeader + "<input type='text' id='"+model+"_selection_search' class='mb-2 form-control quicksearch selectable-search styled' autocomplete='off' placeholder='{{ __('search') }}'>",
					selectableFooter: "<button id='"+model+"_select_all' class='btn btn-alt btn-success btn-block mt-2 pr-3'><span>{{ __('select_all') }}</span><i class='fa fa-arrow-right pull-right'></i></button>",
					selectionFooter: "<button id='"+model+"_deselect_all' class='btn btn-alt btn-danger btn-block mt-2 pl-3'><i class='fa fa-arrow-left pull-left'></i><span>{{ __('deselect_all') }}</span></button>",
					selectableOptgroup: true,
					cssClass: "w-100 bg-darker",
				};

				$(selector).multiSelect(settings);
			}
		</script>

	@endpush

	@push('css')
		<link rel="stylesheet" href="/assets/plugins/multiselect/css/multi-select.css">  
	@endpush
	@php(define('LOAD_DUALLIST', true))
@endif