SOW : Utils

<!-- 
	
	Attributes 

	data-clone-target="..."  				what to clone
	data-clone-destination="..."  		where to append the clone
	data-clone-sortable="true" 				true = reorder on drag/drop
	data-clone-limit="0"  				max no. of clones
	data-clone-method="append"  			append|prepend (default: append)

	.sow-util-cloner class is required on "+" button/link
	.btn-clone-remove class is required only for the second example (not for self cloning)


	IMPORTANT! (see example 2)
		If a field is datepicker, colorpicker (or anything else),
		the plugin should know what to reinit for each clone! Will not work for "self cloning"
		so the second example with a hidden element should be used instead.

		We can't add .datepicker class directly because will be initialized on
		page load and the clone will be wrong! So we add this attribute instead of a direct class:
	 		data-cloned-replace-class="datepicker"

	 Other examples:
	 	data-cloned-replace-class="bs-select"	(for selects)
	 	data-cloned-replace-class="rangepicker"
	 	data-cloned-replace-class="colorpicker"
	 	... and so on
-->





<!-- 1. Self Cloning -->
<div id="container_clone_example">

	<div class="input-group mb-3">
		<input type="text" class="form-control" placeholder="Recipient's username">

		<div class="input-group-append">
			<a href="#" 

				data-clone-target="#container_clone_example" 
				data-clone-destination="#container_clones"  
				data-clone-sortable="true" 
				data-clone-limit="0" 
			
				class="sow-util-cloner btn btn-outline-secondary">
				<!-- 
					note: icon class replaced when cloned
					attribute not limited to icon - can be added to any element inside clone
				 -->
				<i class="fi fi-plus m-0" data-cloned-replace-class="fi fi-close m-0"></i>
			</a>
		</div>
	</div>

</div>

<div id="container_clones"><!-- clones appended here --></div>
									

<!-- 2. Outside Cloning (hidden element as `template`) -->
<a href="#" 

	data-clone-target="#container_tpl_hidden>div" 
	data-clone-destination="#container_clones2"  
	data-clone-sortable="true" 
	data-clone-limit="5" 

	class="sow-util-cloner">
	ADD ELEMENT
</a>

<div id="container_clones2"><!-- clones appended here --></div>

<!-- hidden container containing the `template` to be cloned -->
<div id="container_tpl_hidden" class="hide">
	
	<!-- this will be cloned -->
	<div class="clearfix mb-3"><!-- always wrap elements inside a div/container -->
		<input type="text" class="form-control" data-cloned-replace-class="form-control rangepicker">
		<a href="#" class="btn-clone-remove">remove</a>
	</div>

</div>
									

<!-- PREADDED ITEMS 
Preadded items should be present inside the clone container and 
this is the strucuture (for the first example):
-->
<div id="container_clones">
	<div class="js-cloned">

		<input type="text" class="form-control">

		<a href="#" data-clone-target="#container_clone_example">remove</a>

	</div>
</div>
									

<!--

	NOTE

		Because clonned elements are arrays, fields are replaced (input, select, etc)!

			[$] is replaced with group number like this: [1], [2], etc
			according to group number (each box is a group)

			1. Replace form field name ; example:  name="group_on[1]"
				data-cloned-replace-name="group_on[$]"

			2. Replace data attribute (used by input-suggest in this example)
				this will replace the attribute (similar to previous example, but for data attributes)
				replaced attribute is used then to apply ajax rules - so is dynamically applied.
			data-name="product_id[]" 
			data-cloned-replace-attribute-name="data-name" 
			data-cloned-replace-attribute-value="product_id[$][]" 


		Please use inspect element to see it working.

		Dependencies in this demo:
			SOW : Input Suggest 
			Vendor : Sortable

-->





<!--

	CLONE MAIN CONTAINER

-->
<div id="clone_group_list" class="row sortable">

	<!--

		PREADDED

	-->
	<div class="col-12 col-lg-6 mt-3 py-3 rounded js-cloned">

		<div class="border border-primary rounded border-dashed p--15">

			<!-- header -->
			<div class="clearfix mb-2 sortable-handle">

				<!-- on/off -->
				<label class="form-switch form-switch-pill form-switch-primary">
					<input type="checkbox" value="1" checked="" name="group_on[0]">
					<i data-on="✔" data-off="✕"></i>
					Enable
				</label>

				<!-- remove button -->
				<a href="#" class="sow-util-cloner close mt--n8 float-end" data-clone-target="#clone_group_list" tabindex="-1">
					<i class="fi fi-close m-0"></i>
				</a>

			</div>

			<!-- group name -->
			<div class="form-label-group mb-3">
				<input type="text" placeholder="Group Name" class="form-control" name="group_name[0]" value="">
				<label>Group Name</label>
				<small class="d-block text-gray-500">Example: <span class="font-weight-medium">Memory Upgrade</span></small>
			</div>

			<!-- 
				See the console for Ajax request 

				Params sent to URL:
					{ajax: "true", action: "input_search", key: "_USER_KEYWORDS_", limit: 20}

				Note: in this demo, there are always the same results
				because the active search is done by the backend!

			-->
			<div class="input-suggest-group">
				<div class="form-label-group">

					<!--
						
						NOTE:
							data-name="product_id[]"
							Is used to generate hidden input fields for each item added to the list
							If not provided, name="..." attribute is used!
							If none of them found, "item[]" is used by default for input hidden fields!
					-->
					<input type="text" class="form-control input-suggest" value="" 
						data-cloned-replace-class="form-control input-suggest" 
						placeholder="Product Search..." 
						data-name="product_id[0][]" 
						data-input-suggest-mode="append" 
						data-input-suggest-typing-delay="300" 
						data-input-suggest-typing-min-char="3" 
						data-input-suggest-append-container="parent:group" 
						data-input-suggest-max-items="2" 
						data-input-suggest-ajax-url="_ajax/input_suggest_append.json" 
						data-input-suggest-ajax-method="GET" 
						data-input-suggest-ajax-limit="10">
					<label>Product Search...</label>
				</div>

				<!-- append data -->
				<div class="input-suggest-container sortable hide-empty mt-3"></div>
			</div>

		</div>
	</div>

</div>




<!--

	CLONE TPL

-->
<div id="configurator_tpl" class="hide">

	<div class="col-12 col-lg-6 mt-3 py-3 rounded">

		<div class="border border-primary rounded border-dashed p--15">

			<!-- header -->
			<div class="clearfix mb-2 sortable-handle">

				<!-- on/off -->
				<label class="form-switch form-switch-pill form-switch-primary">
					<input type="checkbox" value="1" checked="" name="group_on[]" data-cloned-replace-name="group_on[$]">
					<i data-on="✔" data-off="✕"></i>
					Enable
				</label>

				<!-- remove button -->
				<a href="#" class="sow-util-cloner close mt--n8 float-end" data-clone-target="#clone_group_list" tabindex="-1">
					<i class="fi fi-close m-0"></i>
				</a>

			</div>

			<!-- group name -->
			<div class="form-label-group mb-3">
				<input type="text" placeholder="Group Name" class="form-control" id="group_name" name="group_name[]" data-cloned-replace-name="group_name[$]" value="">
				<label for="group_name">Group Name</label>
				<small class="d-block text-gray-500">Example: <span class="font-weight-medium">Memory Upgrade</span></small>
			</div>

			<!-- 
				See the console for Ajax request 

				Params sent to URL:
					{ajax: "true", action: "input_search", key: "_USER_KEYWORDS_", limit: 20}

				Note: in this demo, there are always the same results
				because the active search is done by the backend!

			-->
			<div class="input-suggest-group">
				<div class="form-label-group">

					<!--
						
						NOTE:
							data-name="product_id[]"
							Is used to generate hidden input fields for each item added to the list
							If not provided, name="..." attribute is used!
							If none of them found, "item[]" is used by default for input hidden fields!
					-->
					<input type="text" class="form-control" value="" 
						data-cloned-replace-class="form-control input-suggest" 
						placeholder="Product Search..." 
						data-name="product_id[]" 
						data-cloned-replace-attribute-name="data-name" 
						data-cloned-replace-attribute-value="product_id[$][]" 
						data-input-suggest-mode="append" 
						data-input-suggest-typing-delay="300" 
						data-input-suggest-typing-min-char="3" 
						data-input-suggest-append-container="parent:group" 
						data-input-suggest-max-items="2" 
						data-input-suggest-ajax-url="_ajax/input_suggest_append.json" 
						data-input-suggest-ajax-method="GET" 
						data-input-suggest-ajax-limit="10">
					<label>Product Search...</label>
				</div>

				<!-- append data -->
				<div class="input-suggest-container hide-empty mt-3" data-cloned-replace-class="input-suggest-container sortable hide-empty mt-3"></div>
			</div>

		</div>
	</div>

</div>


<!--

	CLONE TRIGGER

-->
<div class="mt-3">
	<a href="#" 
		data-clone-target="#configurator_tpl>div" 
		data-clone-destination="#clone_group_list"	
		data-clone-limit="5" 
		class="sow-util-cloner btn btn-sm btn-secondary">
		ADD GROUP
	</a>
</div>
									

<!-- EMAIL ADDRESS -->
<div class="input-group-over">

	<div class="form-label-group">
		<input required readonly placeholder="Email Address" id="account_email" name="account[email]" type="email" class="form-control" value="john.doe@gmail.com">
		<label for="account_email"><span class="text-danger">Email</span> Address</label>
	</div>

	<a id="email_edit_show" href="#!" class="btn transition-none sow-util-action" 
		data-util-self-ignore="true" 
		data-util-target-hide="#email_edit_show" 
		data-util-target-show="#email_edit_hide, #email_edit_password_request" 
		data-util-target-readonly-off="#account_email" 

		data-util-target-input="#account_email" 
		data-util-target-input-val="" 

		data-util-target-focus="#account_email">
		<i class="fi fi-pencil m-0"></i>
	</a>

	<a id="email_edit_hide" href="#!" class="btn transition-none sow-util-action hide" 
		data-util-self-ignore="true" 
		data-util-target-hide="#email_edit_hide, #email_edit_password_request" 
		data-util-target-show="#email_edit_show" 
		data-util-target-readonly-on="#account_email" 

		data-util-target-input="#account_email" 
		data-util-target-input-val="john.doe@gmail.com">
		<i class="fi fi-close m-0"></i>
	</a>

</div>


<div id="email_edit_password_request" class="mt-3 hide">

	<!-- password -->
	<div class="input-group-over">
		<div class="form-label-group mb-3">
			<input placeholder="Account Password" id="account_password" name="account[current_password]" type="password" class="form-control">
			<label for="account_password">Account Password</label>
		</div>

		<!-- Show Password -->
		<a href="#" class="btn btn-password-type-toggle" data-target="#account_password">
			<span class="group-icon">
				<i class="fi fi-eye m-0"></i>
				<i class="fi fi-close m-0"></i>
			</span>
		</a>
	</div>
	<!-- /password -->

</div>
											

<!-- AVAILABLE OPTIONS -->


<!-- Do not toggle self "active" class : on button click -->
data-util-self-ignore="true"

<!-- Show/Hide -->
data-util-target-hide="#container" 
data-util-target-show="#container" 

<!-- Add Class -->
data-util-target-class-add="#container" 
data-util-target-class-add-val="someclass" 

<!-- Remove Class -->
data-util-target-class-remove="#container" 
data-util-target-class-remove-val="someclass" 

<!-- Toggle Class -->
data-util-target-class-toggle="#container" 
data-util-target-class-toggle-val="someclass" 

<!-- Input/Textarea Value -->
data-util-target-input="#inputElement" 
data-util-target-input-val="someValue" 

<!-- Input/Textarea Placeholder -->
data-util-target-placeholder="#inputElement" 
data-util-target-placeholder-val="someValue" 

<!-- Readonly Attribute -->
data-util-target-readonly-on="#inputElement" 
data-util-target-readonly-off="#inputElement" 
data-util-target-readonly-toggle="#inputElement" 

<!-- Disabled Attribute -->
data-util-target-disable-on="#element" 
data-util-target-disable-off="#element" 
data-util-target-disable-toggle="#element" 

<!-- Remove Container -->
data-util-target-remove="#container" 

<!-- Focus Input/Textarea -->
data-util-target-focus="#inputElement" 

<!-- Toast Message on click (different then ajax toast) -->
data-util-toast-msg="Item Changed" 
data-util-toast-position="top-center" 
data-util-toast-type="success" 
data-util-toast-timeout="2500" 

<!-- Ajax Request -->
data-util-ajax-request="URL_HERE" 
data-util-ajax-method="GET" 
data-util-ajax-params="['param1','value1']['param2','value2']" 
data-util-ajax-toast-success="Successfully Updated!" 
data-util-ajax-toast-position="top-center" 
data-util-ajax-toast-timeout="2500" 
data-util-ajax-append-response="#container" 

Group Util

<!-- checkbox like -->
<div id="group_checkbox">

	<a href="#!" class="form-checkbox form-checkbox-primary clearfix d-block mb-2 sow-util-action" 
		data-util-group-active="#group_checkbox>a.form-checkbox" 
		data-util-group-active-class="active">
		<i></i> Option 1
	</a>

	<a href="#!" class="form-checkbox form-checkbox-primary clearfix d-block mb-2 sow-util-action" 
		data-util-group-active="#group_checkbox>a.form-checkbox" 
		data-util-group-active-class="active">
		<i></i> Option 2
	</a>

</div>

<!-- radio like -->
<div id="group_radio">

	<a href="#!" class="form-radio form-radio-primary clearfix d-block mb-2 sow-util-action" 
		data-util-group-active="#group_radio>a.form-radio" 
		data-util-group-active-class="active">
		<i></i> Option 1
	</a>

	<a href="#!" class="form-radio form-radio-primary clearfix d-block mb-2 sow-util-action" 
		data-util-group-active="#group_radio>a.form-radio" 
		data-util-group-active-class="active">
		<i></i> Option 2
	</a>

</div>