<div id="createVisitTemplateProAccess">
	<div moe>
		<a start show href="#">Create</a>
		<form url="/api/visitTemplateAccess/createBulk" class="mt-2">
			<input type="hidden" name="visitTemplateUid" value="{{ $visitTemplate->uid }}">
			<input type="hidden" name="proUids" />

			<div class="sm-section" style="width: 250px !important;">
				<div class="">
					<label class="mb-1 text-secondary">Pro:</label>
					<select id="searchForProInput" name="proUid" class="form-control input-sm" multiple></select>
				</div>
			</div>

			<div class="mt-3">
				<button submit class="btn btn-sm btn-primary mr-2">Update</button>
				<button cancel class="btn btn-default border">Cancel</button>
			</div>
		</form>
	</div>
</div>


<script>
	(function() {
		function init() {
			var select2 = $("#searchForProInput").select2({
				placeholder: "Search Pro(s) by Name",
				minimumInputLength: 2,
				ajax: {
					url: '/pro-suggest',
					dataType: 'json',
					type: "GET",
					quietMillis: 50,
					data: function(params) {
						return {
							term: params.term,
							json: true
						};
					},
					processResults: function(response) {
						var data = response.results;
						return {
							results: $.map(data, function(item) {
								return {
									text: item.text,
									id: item.uid
								}
							})
						};
					}
				}
			}).on('change', function(e) {
				var proUids = $('#searchForProInput').val();
				proUids = proUids.join('|');
				$('input[name=proUids]').val(proUids);
			});
		}
		addMCInitializer('createVisitTemplateProAccess', init, '#createVisitTemplateProAccess');
	}).call(window);
</script>