SOW : Core Plugins

SOW = Step Of Web (Smarty author).
SOW plugins are part of Smarty Core, written from scratch!

SOW : Form Advanced

Overview:
  • bulk options
  • numierc limit
  • character cont

/* 
	:: Plugin File
	src/js/sow.core/sow.form_advanced.js

	:: Plugin Init 
*/	$.SOW.core.form_advanced.init();
									

Lists/Expanders

1. required attribute is removed when containers are hidden so the form can work! The attribute is added back on visible visible containers!
2. disable attribute is added when containers are hidden. .js-form-advanced-list-ignore class added on element will cancel this feature!

3. AJAX content is loaded once on option click! SOW : Ajax : Content can also used to load the content (on page load).
Advanced Lists
.js-advanced-list-hidden-disable-class
.js-advanced-list-hidden-disable-class
Simple List
Simple & Advanced examples are woring exactly the same!
So this is just a very simple example!

<!-- Simple List -->
<div class="form-advanced-list px-4 py-2 shadow-primary-md rounded-xl">

	<!-- Trigger : 1 -->
	<label class="form-radio form-radio-primary d-block py-3">
		<input type="radio" name="adancedlist_1" class="form-advanced-list-reveal" checked>
		<i></i> Option 1
	</label>



	<!-- Trigger : 2 -->
	<label class="form-radio form-radio-danger d-block py-3">
		<input type="radio" name="adancedlist_1" class="form-advanced-list-reveal" data-form-advanced-target="#simple2_expand">
		<i></i> Option 2
	</label>

	<!-- Expand 3 -->
	<div id="simple2_expand" class="form-advanced-list-reveal-item bg-light rounded hide p-4">
		
		Simple & Advanced examples are woring exactly the same!

	</div>
	<!-- /Expand -->



	<!-- Trigger : 3 -->
	<label class="form-radio form-radio-warning d-block py-3">
		<input type="radio" name="adancedlist_1" class="form-advanced-list-reveal" data-form-advanced-target="#simple3_expand">
		<i></i> Option 3
	</label>

	<!-- Expand 3 -->
	<div id="simple3_expand" class="form-advanced-list-reveal-item bg-warning-soft rounded hide p-4">
		
		So this is just a very simple example! 

	</div>

</div>
<!-- Simple List -->
									

<!-- form-advanced-list -->
	<form novalidate class="bs-validate" id="listExpandersForm" method="post" action="#">

		<!--

			Disabled elements (within hidden containers) are not included in form submit (get or post)

			.js-form-advanced-list-ignore 		skip disable function within hidden container (inputs/textarea/etc)

			data-form-advanced-list-hidden-required="true"  	 									remove required when container is hidden 							(default: false)
			data-form-advanced-list-hidden-disable="true"  											disable when container is hidden (skipped if disable class used)	(default: false)
			data-form-advanced-list-hidden-disable-class=".js-advanced-list-hidden-disable-class"  	disable when container is hidden using a class 						(default: '')

		-->
		<div class="form-advanced-list p-4 shadow rounded" 
			data-form-advanced-list-hidden-required="true" 
			data-form-advanced-list-hidden-disable="true" 
			data-form-advanced-list-hidden-disable-class=".advanced-list-hidden-disable-class">



			<!-- Trigger 1 -->
			<label class="form-radio form-radio-primary d-block py-3">
				<input type="radio" name="form_advanced_list" class="form-advanced-list-reveal" value="1" checked="" data-form-advanced-target="#optionA_expand">
				<i></i> Using form reset!
			</label>

			<!-- Expand 1 -->
			<div id="optionA_expand" class="form-advanced-list-reveal-item border-bottom">

				<!-- 
					REQUIRED INPUT
					when this container is hidden, "required" is removed. 
					Is added back when/if the container is visible again!
					Only add the required param to any input, datepicker, etc
				-->
				<label class="d-block">Required input</label>
				<input required type="text" class="form-control" value="">

				<!-- 
					DISABLE BY A CLASS
					required input and also disabled
					disabled input using class
				-->
				<label class="d-block mt-4">Disabled when hidden, using a class<small></small></label>
				<input required type="text" class="form-control js-advanced-list-hidden-disable-class" value="">
				<code class="fs--12">.js-advanced-list-hidden-disable-class</code>

				<!-- 
					IGNORE (required/disabled are not affecting this field)
					disabled input and ignored by the plugin
					js-form-advanced-list-ignore = ignore plugin
				-->
				<label class="d-block mt-4">Always Disabled <small>.js-form-advanced-list-ignore</small></label>
				<input disabled type="text" class="form-control js-form-advanced-list-ignore" value="">

				<!-- 
					Reset Button 
					data-target-reset="" 	(id or class ; multiple separated by comma ; href might be used instead for a single #id)
					data-exclude-reset="" 	(id or class ; multiple separated by comma)
					.js-ignore  			(always visible ; also remove .hide-force)
				-->
				<div class="my-4">
					<a href="#optionA_expand" class="form-advanced-reset js-ignore btn btn-sm btn-light">
						<i class="fi fi-close"></i>
						reset section
					</a>
				</div>

			</div>



			<!-- Trigger 2 -->
			<label class="form-radio form-radio-primary d-block py-3">
				<input type="radio" name="form_advanced_list" class="form-advanced-list-reveal" value="2" data-form-advanced-target="#optionB_expand">
				<i></i> Required fields
			</label>

			<!-- Expand 2 -->
			<div id="optionB_expand" class="form-advanced-list-reveal-item border-bottom hide">
				
				<!-- 
					REQUIRED INPUT
					when this container is hidden, "required" is removed. 
					Is added back when/if the container is visible again!
					Only add the required param to any input, datepicker, etc
				-->
				<label class="d-block">Required input</label>
				<input required type="text" class="form-control" value="">

				<!-- 
					DISABLE BY A CLASS
					required input and also disabled
					disabled input using class
				-->
				<label class="d-block mt-4">Disabled when hidden, using a class<small></small></label>
				<input required type="text" class="form-control js-advanced-list-hidden-disable-class" value="">
				<code class="fs--12">.js-advanced-list-hidden-disable-class</code>

			</div>
			<!-- /Expand -->



			<!-- Trigger 3 : Ajax -->
			<label class="form-radio form-radio-primary d-block py-3">
				<input type="radio" name="form_advanced_list" class="form-advanced-list-reveal" value="3" data-form-advanced-target="#optionC_expand" data-form-advanced-ajax-url="_ajax/dummy_text2.html" data-form-advanced-ajax-icon="true">
				<i></i> Ajax Content
			</label>

			<!-- Expand 3 : Ajax -->
			<div id="optionC_expand" class="form-advanced-list-reveal-item border-top hide">
				<!-- populated by ajax -->
			</div>
		
		</div>


		<div class="mt-4">

			<!-- 
				SUBMIT FORM
			-->
			<button type="submit" class="btn btn-primary">submit</button>


			<!-- 
				Reset Button 
				data-target-reset="" 	(id or class ; multiple separated by comma)
				data-exclude-reset="" 	(id or class ; multiple separated by comma)
				.js-ignore  			(always visible ; also remove .hide-force)
			-->
			<a href="#" data-target-reset="#listExpandersForm" data-exclude-reset=".form-advanced-list-reveal" class="form-advanced-reset js-ignore btn btn-light">
				Reset All
			</a>

		</div>

	</form>
<!-- form-advanced-list -->
									

Required hidden fields

There are situations we have required fields but hidden inside a container.
This is solved by adding .js-form-advanced-required to the container that is hidden/visible.


<form novalidate class="bs-validate" action="#!" method="get">

	<!--
		TOGGLER
			Note: if multiple IDs used (data-target="#id1, id2")
			add class: .js-form-advanced-required-toggler
	-->
	<label class="form-checkbox form-checkbox-primary d-block">
		<input type="checkbox" value="1" data-toggle="collapse" data-target="#option_example">
		<i></i> <span>Hide/show option</span>
	</label>



	<!--
		CONTAINER
		.js-form-advanced-required  class
	-->
	<div id="option_example" class="collapse js-form-advanced-required">

		<!--
			REQUIRED
		-->
		<div class="form-label-group mb-3">
			<input required placeholder="Required" id="required_field" type="text" value="" class="form-control">
			<label for="required_field" class="w-100">
				Required 
			</label>
		</div>

		<!--
			NOT REQUIRED
		-->
		<div class="form-label-group mb-3">
			<input placeholder="Not Required" id="not_required_field" type="text" value="" class="form-control">
			<label for="not_required_field" class="w-100">
				Not Required
			</label>
		</div>

	</div>

	<button type="submit" class="btn btn-sm btn-primary mt-4">Submit</button>
</form>
									

Dynamic Table (Variants)

Useful to ecommerce admin to create variants or if dynamic inputs are needed!

SKU Barcode Price BS Select Date Image  
  SKU Barcode Size Material Price BS Select Date Image
Delete Cancel
Delete Cancel
Delete Cancel
drag and drop rows

<!-- 
	default 
		data-table-clone-method="append|prepend"
-->
<div class="js-form-advanced-table mb-6" 
	data-table-column-insert-before=".js-clone-before" 
	data-table-column-insert-element='<input type="text" class="form-control form-control-sm" value="">' 
	data-table-column-delete-button='<span class="btn-table-column-delete fi fi-close fs--15 cursor-pointer px-1 d-inline-block"></span>' 
	data-table-column-limit="3" 
	data-table-row-limit="5" 
	data-table-row-method="append">


	<!-- 
		
		ADD COLUMN

			The name of this input (name="option" in this demo) 
			is used to generate input fields with names like this:
				name="option[color]"
			
			if no input name used, field name is generated like this:
				name="color"

	-->
	<div class="js-form-advanced-table-column-add input-group mb-3 max-w-300">

		<!-- 
			Optional Plugin used:
			SOW : Search Inline
		-->
		<input type="text" name="variant" class="form-control form-control-sm input-suggest" 
			placeholder="Ex: color, size" 
			aria-label="Table Cloner" 
			aria-describedby="button-table-cloner"
			data-input-suggest-type="text" 
			data-input-suggest-name="variant" 
			data-input-suggest-ajax-url="_ajax/input_suggest_variants.json" 
			data-input-suggest-ajax-method="GET" 
			data-input-suggest-ajax-limit="100">

		<div class="input-group-append">
			<button class="btn btn-sm btn-outline-secondary" type="button" id="button-table-cloner">Add</button>
		</div>
	</div>


	<table class="table table-bordered table-align-middle table-sm">
		<thead>
			<tr>
				<th>SKU</th>
				<th>Barcode</th>
				<th class="js-clone-before">Price</th>
				<th>BS Select</th>
				<th>Date</th>
				<th class="w--90">Image</th>
				<th class="w--80"> </th>
			</tr>
		</thead>

		<tbody>

			<tr>
				<!-- SKU -->
				<td>
					<input type="text" class="form-control form-control-sm" name="variant[sku]" value="">
				</td>

				<!-- Barcode -->
				<td>
					<input type="text" class="form-control form-control-sm" name="variant[barcode]" value="">
				</td>

				<!-- Price -->
				<td class="js-clone-before">
					<input type="number" class="form-control form-control-sm" name="variant[price]" value="">
				</td>

				<!-- Select -->
				<td>
					<select class="form-control form-control-sm bs-select" name="variant[select]" title="Please Select...">
						<option value="0">Basic</option>
						<option value="1">Mustard</option>
						<option value="2">Ketchup</option>
						<option value="3">Barbecue</option>
					</select>
				</td>

				<!-- Date -->
				<td>
					<input autocomplete="off" type="text" name="variant[date]" class="form-control form-control-sm rangepicker" 
						data-layout-rounded="false" 
						data-single-datepicker="true" 
						data-timepicker="false" 
						data-timepicker-24h="true" 
						data-timepicker-show-seconds="false" 
						data-disable-past-dates="true" 
						data-date-format="MM/DD/YYYY" 
						data-disable-auto-update-input="true" 
						data-quick-locale='{
							"lang_apply"	: "Apply",
							"lang_cancel"	: "Cancel",
							"lang_crange"	: "Custom Range",
							"lang_months"	 : ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
							"lang_weekdays" : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
						}'>
				</td>

				<!-- Image -->
				<td>

					<!-- 

						AJAX IMAGE UPLOAD

					-->
					<label class="rounded text-center position-relative d-block cursor-pointer border border-secondary border-dashed mb-0 h--50">

						<!-- remove button -->
						<a href="#!" class="js-table-file-remove position-absolute absolute-top start-0 z-index-3 btn btn-sm btn-secondary p-0 w--20 h--20 m--1 line-height-1 text-center hide">
							<i class="fi fi-close m-0"></i>
						</a>

						<!-- image container -->
						<span class="js-table-file-preview z-index-2 d-block absolute-full z-index-1 hide-empty"></span>

						<!-- hidden file input -->
						<input	name="variant[image]" 
								type="file" 
								data-file-ext="jpg, jpeg, png" 
								data-file-max-size-kb-per-file="1024" 
								data-file-ext-err-msg="Allowed:" 
								data-file-size-err-item-msg="File too large!" 
								data-file-size-err-total-msg="Total allowed size exceeded!" 
								data-file-toast-position="top-center" 
								data-file-preview-container=".js-table-file-preview" 
								data-file-btn-clear=".js-table-file-remove" 
								data-file-preview-show-info="false" 
								data-file-preview-class="m-0 p-0 rounded" 
								data-file-preview-img-height="auto" 
								data-file-preview-img-cover="true" 

					    		data-file-ajax-upload-enable="true" 
					    		data-file-ajax-upload-url="../demo.files/php/demo.ajax_file_upload.php" 
					    		data-file-ajax-upload-params="['action','upload']['param2','value2']" 

					    		data-file-ajax-delete-enable="true" 
					    		data-file-ajax-delete-url="../demo.files/php/demo.ajax_file_upload.php" 
					    		data-file-ajax-delete-params="['action','delete_file']" 

					    		data-file-ajax-toast-success-txt="Successfully Uploaded!" 
					    		data-file-ajax-toast-error-txt="One or more files not uploaded!" 

								class="custom-file-input absolute-full">

						<!-- icon -->
						<span class="absolute-full d-middle">
							<i class="fi fi-image fs--30 text-muted"></i>
						</span>

					</label>

				</td>

				<!-- Option -->
				<td class="text-center">

					<a href="#" class="btn btn-sm btn-primary btn-table-clone rounded-circle">
						<span class="group-icon">
							<i class="fi fi-plus"></i>
							<i class="fi fi-thrash"></i>
						</span>
					</a>

				</td>

			</tr>

		</tbody>
	</table>


</div>
									

<!-- 
	preadded columns 
		data-table-clone-method="append|prepend"
-->
<div class="js-form-advanced-table mb-6" 
	data-table-column-insert-before=".js-clone-before" 
	data-table-column-insert-element='<input type="text" class="form-control form-control-sm" value="">' 
	data-table-column-delete-button='<span class="btn-table-column-delete fi fi-close fs--15 cursor-pointer px-1 d-inline-block"></span>' 
	data-table-column-limit="3" 
	data-table-row-limit="5" 
	data-table-row-method="prepend">


	<!-- 
		
		ADD COLUMN

			The name of this input (name="option" in this demo) 
			is used to generate input fields with names like this:
				name="option[color]"
			
			if no input name used, field name is generated like this:
				name="color"

	-->
	<div class="js-form-advanced-table-column-add input-group mb-3 max-w-300">

		<!-- 
			Optional Plugin used:
			SOW : Search Inline
		-->
		<input type="text" name="variant" class="form-control form-control-sm input-suggest" 
			placeholder="Ex: color, size" 
			aria-label="Table Cloner" 
			aria-describedby="button-table-cloner"
			data-input-suggest-type="text" 
			data-input-suggest-name="variant" 
			data-input-suggest-ajax-url="_ajax/input_suggest_variants.json" 
			data-input-suggest-ajax-method="GET" 
			data-input-suggest-ajax-limit="100">

		<div class="input-group-append">
			<button class="btn btn-sm btn-outline-secondary" type="button" id="button-table-cloner">Add</button>
		</div>
	</div>


	<table class="table table-bordered table-align-middle table-sm">
		<thead>
			<tr>
				<th>SKU</th>
				<th>Barcode</th>
				<th data-id="column-size" class="js-table-option">Size</th>
				<th data-id="column-material" class="js-table-option">Material</th>
				<th class="js-clone-before">Price</th>
				<th>BS Select</th>
				<th>Date</th>
				<th class="w--90">Image</th>
				<th class="w--80 text-center">
					<a href="#" class="btn btn-sm btn-primary btn-table-clone rounded-circle">
						<i class="fi fi-plus"></i>
					</a>
				</th>
			</tr>
		</thead>

		<!-- 
			See Sortable doumentation if ajax reorder is needed
		-->
		<tbody class="sortable">

			<!-- 
				OPTIONAL
				ACTING AS A TEMPLATE TO CLONE
				IS REMOVED ON LOAD IF .hide CLASS IS PRESENT

				Else, the first TR is used by default!
				.js-ignore = optional, used by sortable to igore from drag/drop reorder
			-->
			<tr class="js-ignore hide">
				<!-- SKU -->
				<td>
					<input type="text" class="form-control form-control-sm" name="variant[sku]" value="">
				</td>

				<!-- Barcode -->
				<td>
					<input type="text" class="form-control form-control-sm" name="variant[barcode]" value="">
				</td>



				<!-- Preadded Option 1 -->
				<td class="js-table-option column-size">
					<input type="number" class="form-control form-control-sm" name="variant[size]" value="">
				</td>

				<!-- Preadded Option 2 -->
				<td class="js-table-option column-material">
					<input type="number" class="form-control form-control-sm" name="variant[material]" value="">
				</td>



				<!-- Price -->
				<td class="js-clone-before">
					<input type="number" class="form-control form-control-sm" name="variant[price]" value="">
				</td>

				<!-- Select -->
				<td>
					<select class="form-control form-control-sm bs-select" name="variant[select]" title="Please Select...">
						<option value="0">Basic</option>
						<option value="1">Mustard</option>
						<option value="2">Ketchup</option>
						<option value="3">Barbecue</option>
					</select>
				</td>

				<!-- Date -->
				<td>
					<input autocomplete="off" type="text" name="variant[date]" class="form-control form-control-sm rangepicker" 
						data-layout-rounded="false" 
						data-single-datepicker="true" 
						data-timepicker="false" 
						data-timepicker-24h="true" 
						data-timepicker-show-seconds="false" 
						data-disable-past-dates="true" 
						data-date-format="MM/DD/YYYY" 
						data-disable-auto-update-input="true" 
						data-quick-locale='{
							"lang_apply"	: "Apply",
							"lang_cancel"	: "Cancel",
							"lang_crange"	: "Custom Range",
							"lang_months"	 : ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
							"lang_weekdays" : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
						}'>
				</td>

				<!-- Image -->
				<td>

					<!-- 

						AJAX IMAGE UPLOAD

					-->
					<label class="rounded text-center position-relative d-block cursor-pointer border border-secondary border-dashed mb-0 h--50">

						<!-- remove button -->
						<a href="#!" class="js-table-file-remove-1 js-file-item-del position-absolute absolute-top start-0 z-index-3 btn btn-sm btn-secondary p-0 w--20 h--20 m--1 line-height-1 text-center hide">
							<i class="fi fi-close m-0"></i>
						</a>

						<!-- image container -->
						<span class="js-table-file-preview-1 z-index-2 d-block absolute-full z-index-1 hide-empty"></span>

						<!-- hidden file input -->
					    <input 	name="variant[image]" 
					    		type="file" 

					    		data-file-ext="jpg, png, gif" 
					    		data-file-max-size-kb-per-file="11500" 
					    		data-file-ext-err-msg="Allowed:" 
					    		data-file-size-err-item-msg="File too large!" 
					    		data-file-size-err-total-msg="Total allowed size exceeded!" 
					    		data-file-toast-position="bottom-center" 
					    		data-file-preview-container=".js-table-file-preview-1" 
					    		data-file-preview-show-info="false" 
					    		data-file-preview-class="rounded-circle m-0 p-0 animate-bouncein" 
					    		data-file-preview-img-height="auto" 
					    		data-file-btn-clear=".js-table-file-remove-1" 
					    		data-file-preview-img-cover="true" 

					    		data-file-ajax-upload-enable="true" 
					    		data-file-ajax-upload-url="../demo.files/php/demo.ajax_file_upload.php" 
					    		data-file-ajax-upload-params="['action','upload']['param2','value2']" 

					    		data-file-ajax-delete-enable="true" 
					    		data-file-ajax-delete-url="../demo.files/php/demo.ajax_file_upload.php" 
					    		data-file-ajax-delete-params="['action','delete_file']" 

					    		data-file-ajax-toast-success-txt="Successfully Uploaded!" 
					    		data-file-ajax-toast-error-txt="One or more files not uploaded!" 

					    		class="custom-file-input absolute-full">

						<!-- icon -->
						<span class="absolute-full d-middle">
							<i class="fi fi-image fs--30 text-muted"></i>
						</span>

					</label>

				</td>

				<!-- Option -->
				<td class="position-relative text-center">

					<!-- direct delete -->
					<!--
					<a href="#" class="btn btn-sm btn-light btn-table-clone-remove rounded-circle">
						<i class="fi fi-thrash"></i>
					</a>
					-->

					<!-- remove button (confirm trigger) -->
					<a href="#" class="btn btn-table-clone-remove-confirm btn-sm btn-light rounded-circle">
						<i class="fi fi-thrash"></i>
					</a>

					<!-- confirm -->
					<div class="position-absolute bg-warning shadow top-0 bottom-0 end-0 w--200 z-index-10 hide">
						<i class="arrow arrow-lg arrow-start arrow-center border-warning"></i>
						<label class="d-block fs--13 mb--2">Are you sure?</label>
						<a href="#!" class="btn btn-table-clone-remove btn-danger btn-sm px-2 pt--2 pb--2">Delete</a>
						<a href="#!" class="btn btn-table-clone-remove-cancel btn-secondary btn-sm px-2 pt--2 pb--2">Cancel</a>
					</div>

				</td>

			</tr>

			<!-- preadded -->
			<tr>
				<!-- SKU -->
				<td>
					<input type="text" class="form-control form-control-sm" name="variant[sku]" value="">
				</td>

				<!-- Barcode -->
				<td>
					<input type="text" class="form-control form-control-sm" name="variant[barcode]" value="">
				</td>



				<!-- Preadded Option 1 -->
				<td class="js-table-option column-size">
					<input type="number" class="form-control form-control-sm" name="variant[size]" value="">
				</td>

				<!-- Preadded Option 2 -->
				<td class="js-table-option column-material">
					<input type="number" class="form-control form-control-sm" name="variant[material]" value="">
				</td>



				<!-- Price -->
				<td class="js-clone-before">
					<input type="number" class="form-control form-control-sm" name="variant[price]" value="">
				</td>

				<!-- Select -->
				<td>
					<select class="form-control form-control-sm bs-select" name="variant[select]" title="Please Select...">
						<option value="0">Basic</option>
						<option value="1">Mustard</option>
						<option value="2">Ketchup</option>
						<option value="3">Barbecue</option>
					</select>
				</td>

				<!-- Date -->
				<td>
					<input autocomplete="off" type="text" name="variant[date]" class="form-control form-control-sm rangepicker" 
						data-layout-rounded="false" 
						data-single-datepicker="true" 
						data-timepicker="false" 
						data-timepicker-24h="true" 
						data-timepicker-show-seconds="false" 
						data-disable-past-dates="true" 
						data-date-format="MM/DD/YYYY" 
						data-disable-auto-update-input="true" 
						data-quick-locale='{
							"lang_apply"	: "Apply",
							"lang_cancel"	: "Cancel",
							"lang_crange"	: "Custom Range",
							"lang_months"	 : ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
							"lang_weekdays" : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
						}'>
				</td>

				<!-- Image -->
				<td>

					<!-- 

						AJAX IMAGE UPLOAD

					-->
					<label class="rounded text-center position-relative d-block cursor-pointer border border-secondary border-dashed mb-0 h--50">

						<!-- remove button -->
						<a href="#!" class="js-table-file-remove-1 js-file-item-del position-absolute absolute-top start-0 z-index-3 btn btn-sm btn-secondary p-0 w--20 h--20 m--1 line-height-1 text-center">
							<i class="fi fi-close m-0"></i>
						</a>

						<!-- image container -->
						<span class="js-table-file-preview-1 z-index-2 d-block absolute-full z-index-1 hide-empty">
							<span 	data-id="0" 
									data-file-name="mutzii-fmDCrqPQKog-unsplash-min.jpg" 
									style="background-image:url('../demo.files/images/unsplash/products/sneakers/thumb_330/mutzii-fmDCrqPQKog-unsplash-min.jpg')" 
									class="js-file-input-item d-inline-block position-relative overflow-hidden text-center m-0 p-0 animate-bouncein bg-cover w-100 h-100">
							</span>
						</span>

						<!-- hidden file input -->
					    <input 	name="variant[image]" 
					    		type="file" 

					    		data-file-ext="jpg, png, gif" 
					    		data-file-max-size-kb-per-file="11500" 
					    		data-file-ext-err-msg="Allowed:" 
					    		data-file-size-err-item-msg="File too large!" 
					    		data-file-size-err-total-msg="Total allowed size exceeded!" 
					    		data-file-toast-position="bottom-center" 
					    		data-file-preview-container=".js-table-file-preview-1" 
					    		data-file-preview-show-info="false" 
					    		data-file-preview-class="rounded-circle m-0 p-0 animate-bouncein" 
					    		data-file-preview-img-height="auto" 
					    		data-file-btn-clear=".js-table-file-remove-1" 
					    		data-file-preview-img-cover="true" 

					    		data-file-ajax-upload-enable="true" 
					    		data-file-ajax-upload-url="../demo.files/php/demo.ajax_file_upload.php" 
					    		data-file-ajax-upload-params="['action','upload']['param2','value2']" 

					    		data-file-ajax-delete-enable="true" 
					    		data-file-ajax-delete-url="../demo.files/php/demo.ajax_file_upload.php" 
					    		data-file-ajax-delete-params="['action','delete_file']" 

					    		data-file-ajax-toast-success-txt="Successfully Uploaded!" 
					    		data-file-ajax-toast-error-txt="One or more files not uploaded!" 

					    		class="custom-file-input absolute-full">

						<!-- icon -->
						<span class="absolute-full d-middle">
							<i class="fi fi-image fs--30 text-muted"></i>
						</span>

					</label>

				</td>

				<!-- Option -->
				<td class="position-relative text-center">

					<!-- direct delete -->
					<!--
					<a href="#" class="btn btn-sm btn-light btn-table-clone-remove rounded-circle">
						<i class="fi fi-thrash"></i>
					</a>
					-->

					<!-- remove button (confirm trigger) -->
					<a href="#" class="btn btn-table-clone-remove-confirm btn-sm btn-light rounded-circle">
						<i class="fi fi-thrash"></i>
					</a>

					<!-- confirm -->
					<div class="position-absolute bg-warning shadow top-0 bottom-0 end-0 w--200 z-index-10 hide">
						<i class="arrow arrow-lg arrow-start arrow-center border-warning"></i>
						<label class="d-block fs--13 mb--2">Are you sure?</label>
						<a href="#!" class="btn btn-table-clone-remove btn-danger btn-sm px-2 pt--2 pb--2">Delete</a>
						<a href="#!" class="btn btn-table-clone-remove-cancel btn-secondary btn-sm px-2 pt--2 pb--2">Cancel</a>
					</div>

				</td>

			</tr>

			<!-- preadded -->
			<tr>
				<!-- SKU -->
				<td>
					<input type="text" class="form-control form-control-sm" value="">
				</td>

				<!-- Barcode -->
				<td>
					<input type="text" class="form-control form-control-sm" value="">
				</td>



				<!-- Preadded Option 1 -->
				<td class="js-table-option column-size">
					<input type="number" class="form-control form-control-sm" name="variant[size]" value="">
				</td>

				<!-- Preadded Option 2 -->
				<td class="js-table-option column-material">
					<input type="number" class="form-control form-control-sm" name="variant[material]" value="">
				</td>



				<!-- Price -->
				<td class="js-clone-before">
					<input type="number" class="form-control form-control-sm" value="">
				</td>

				<!-- Select -->
				<td>
					<select class="form-control form-control-sm bs-select" title="Please Select...">
						<option value="0">Basic</option>
						<option value="1">Mustard</option>
						<option value="2">Ketchup</option>
						<option value="3">Barbecue</option>
					</select>
				</td>

				<!-- Date -->
				<td>
					<input autocomplete="off" type="text" name="my_daterange" class="form-control form-control-sm rangepicker" 
						data-layout-rounded="false" 
						data-single-datepicker="true" 
						data-timepicker="false" 
						data-timepicker-24h="true" 
						data-timepicker-show-seconds="false" 
						data-disable-past-dates="true" 
						data-date-format="MM/DD/YYYY" 
						data-disable-auto-update-input="true" 
						data-quick-locale='{
							"lang_apply"	: "Apply",
							"lang_cancel"	: "Cancel",
							"lang_crange"	: "Custom Range",
							"lang_months"	 : ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
							"lang_weekdays" : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
						}'>
				</td>

				<!-- Image -->
				<td>

					<!-- 

						AJAX IMAGE UPLOAD

					-->
					<label class="rounded text-center position-relative d-block cursor-pointer border border-secondary border-dashed mb-0 h--50">

						<!-- remove button -->
						<a href="#!" class="js-table-file-remove-2 js-file-item-del position-absolute absolute-top start-0 z-index-3 btn btn-sm btn-secondary p-0 w--20 h--20 m--1 line-height-1 text-center">
							<i class="fi fi-close m-0"></i>
						</a>

						<!-- image container -->
						<span class="js-table-file-preview-2 z-index-2 d-block absolute-full z-index-1 hide-empty">
							<span 	data-id="0" 
									data-file-name="nikita-kachanovsky-ad_0wMHtvlU-unsplash-min.jpg" 
									style="background-image:url('../demo.files/images/unsplash/products/sneakers/thumb_330/nikita-kachanovsky-ad_0wMHtvlU-unsplash-min.jpg')" 
									class="js-file-input-item d-inline-block position-relative overflow-hidden text-center m-0 p-0 animate-bouncein bg-cover w-100 h-100">
							</span>
						</span>

						<!-- hidden file input -->
					    <input 	name="name_avatar_ajax_circle" 
					    		type="file" 

					    		data-file-ext="jpg, png, gif" 
					    		data-file-max-size-kb-per-file="11500" 
					    		data-file-ext-err-msg="Allowed:" 
					    		data-file-size-err-item-msg="File too large!" 
					    		data-file-size-err-total-msg="Total allowed size exceeded!" 
					    		data-file-toast-position="bottom-center" 
					    		data-file-preview-container=".js-table-file-preview-2" 
					    		data-file-preview-show-info="false" 
					    		data-file-preview-class="rounded-circle m-0 p-0 animate-bouncein" 
					    		data-file-preview-img-height="auto" 
					    		data-file-btn-clear=".js-table-file-remove-2" 
					    		data-file-preview-img-cover="true" 

					    		data-file-ajax-upload-enable="true" 
					    		data-file-ajax-upload-url="../demo.files/php/demo.ajax_file_upload.php" 
					    		data-file-ajax-upload-params="['action','upload']['param2','value2']" 

					    		data-file-ajax-delete-enable="true" 
					    		data-file-ajax-delete-url="../demo.files/php/demo.ajax_file_upload.php" 
					    		data-file-ajax-delete-params="['action','delete_file']" 

					    		data-file-ajax-toast-success-txt="Successfully Uploaded!" 
					    		data-file-ajax-toast-error-txt="One or more files not uploaded!" 

					    		class="custom-file-input absolute-full">

						<!-- icon -->
						<span class="absolute-full d-middle">
							<i class="fi fi-image fs--30 text-muted"></i>
						</span>

					</label>

				</td>

				<!-- Option -->
				<td class="position-relative text-center">

					<!-- direct delete -->
					<!--
					<a href="#" class="btn btn-sm btn-light btn-table-clone-remove rounded-circle">
						<i class="fi fi-thrash"></i>
					</a>
					-->

					<!-- remove button (confirm trigger) -->
					<a href="#" class="btn btn-table-clone-remove-confirm btn-sm btn-light rounded-circle">
						<i class="fi fi-thrash"></i>
					</a>

					<!-- confirm -->
					<div class="position-absolute bg-warning shadow top-0 bottom-0 end-0 w--200 z-index-10 hide">
						<i class="arrow arrow-lg arrow-start arrow-center border-warning"></i>
						<label class="d-block fs--13 mb--2">Are you sure?</label>
						<a href="#!" class="btn btn-table-clone-remove btn-danger btn-sm px-2 pt--2 pb--2">Delete</a>
						<a href="#!" class="btn btn-table-clone-remove-cancel btn-secondary btn-sm px-2 pt--2 pb--2">Cancel</a>
					</div>

				</td>

			</tr>

		</tbody>
	</table>
	<small class="d-block text-muted mt-1">drag and drop rows</small>

</div>
									

Bulk Options




<form class="bs-validate" novalidate id="form_id" method="post" action="#">

	<!-- 

		IMPORTANT
		The "action" hidden input is updated by javascript according to button params/action:
			data-js-form-advanced-hidden-action-id="#action"
			data-js-form-advanced-hidden-action-value="delete"

		In your backend, should process data like this (PHP example):

			if($_POST['action'] === 'delete') {

				foreach($_POST['item_id'] as $item_id) {
					// ... delete $item_id from database
				}

			}

	-->
	<input type="hidden" id="action" name="action" value=""><!-- value populated by js -->


	<label class="form-checkbox form-checkbox-primary d-block">
		<input class="checkall" data-checkall-container="#item_list" type="checkbox" name="checkbox">
		<i></i> Check All
	</label>

	<hr>

	<div id="item_list">

		<label class="form-checkbox form-checkbox-primary d-block">
			<input type="checkbox" name="item_id[]" value="1">
			<i></i> Item 1
		</label>

		<label class="form-checkbox form-checkbox-primary d-block">
			<input type="checkbox" name="item_id[]" value="2">
			<i></i> Item 2
		</label>

		<label class="form-checkbox form-checkbox-primary d-block">
			<input type="checkbox" name="item_id[]" value="3">
			<i></i> Item 3
		</label>

	</div>

	<hr>

	<label class="form-checkbox form-checkbox-primary d-block">
		<input class="checkall" data-checkall-container="#item_list" type="checkbox" name="checkbox">
		<i></i> Check All
	</label>


	<!-- options -->
	<div class="mt-4 text-center-xs">

		<!-- SELECTED ITEMS -->
		<div class="clearfix"><!-- using .dropdown, autowidth not working -->

			<a href="#" class="btn btn-sm btn-pill btn-light" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true">
				<span class="group-icon">
					<i class="fi fi-dots-vertical-full"></i>
					<i class="fi fi-close"></i>
				</span>
				<span>Selected Items</span>
			</a>

			<div class="dropdown-menu dropdown-menu-clean dropdown-click-ignore max-w-250">
				
				<div class="scrollable-vertical max-h-50vh">

					<a 	href="#" 
						class="dropdown-item text-truncate js-form-advanced-bulk"
						data-js-form-advanced-bulk-hidden-action-id="#action" 
						data-js-form-advanced-bulk-hidden-action-value="active" 
						data-js-form-advanced-bulk-container-items="#item_list" 
						data-js-form-advanced-bulk-required-selected="true" 
						data-js-form-advanced-bulk-required-txt-error="No Selected Items!" 
						data-js-form-advanced-bulk-required-txt-position="top-center" 
						data-js-form-advanced-bulk-required-custom-modal="" 
						data-js-form-advanced-bulk-required-custom-modal-content-ajax="" 
						data-js-form-advanced-bulk-required-modal-type="success" 
						data-js-form-advanced-bulk-required-modal-size="modal-md" 
						data-js-form-advanced-bulk-required-modal-txt-title="Please Confirm" 
						data-js-form-advanced-bulk-required-modal-txt-subtitle="Selected Products: {{no_selected}}" 
						data-js-form-advanced-bulk-required-modal-txt-body-txt="Set active {{no_selected}} selected products?" 
						data-js-form-advanced-bulk-required-modal-txt-body-info="" 
						data-js-form-advanced-bulk-required-modal-btn-text-yes="Confirm" 
						data-js-form-advanced-bulk-required-modal-btn-text-no="Cancel" 
						data-js-form-advanced-bulk-submit-without-confirmation="false" 
						data-js-form-advanced-form-id="#form_id">
						<i class="fi fi-check"></i>
						Set : Active
					</a>

					<a 	href="#" 
						class="dropdown-item text-truncate js-form-advanced-bulk" 
						data-js-form-advanced-bulk-hidden-action-id="#action" 
						data-js-form-advanced-bulk-hidden-action-value="inactive" 
						data-js-form-advanced-bulk-container-items="#item_list" 
						data-js-form-advanced-bulk-required-selected="true" 
						data-js-form-advanced-bulk-required-txt-error="No Selected Items!" 
						data-js-form-advanced-bulk-required-txt-position="top-center" 
						data-js-form-advanced-bulk-required-custom-modal="" 
						data-js-form-advanced-bulk-required-custom-modal-content-ajax="" 
						data-js-form-advanced-bulk-required-modal-type="warning" 
						data-js-form-advanced-bulk-required-modal-size="modal-md" 
						data-js-form-advanced-bulk-required-modal-txt-title="Please Confirm" 
						data-js-form-advanced-bulk-required-modal-txt-subtitle="Selected Products: {{no_selected}}" 
						data-js-form-advanced-bulk-required-modal-txt-body-txt="Set inactive {{no_selected}} selected products?" 
						data-js-form-advanced-bulk-required-modal-txt-body-info="" 
						data-js-form-advanced-bulk-required-modal-btn-text-yes="Confirm" 
						data-js-form-advanced-bulk-required-modal-btn-text-no="Cancel" 
						data-js-form-advanced-bulk-submit-without-confirmation="false" 
						data-js-form-advanced-form-id="#form_id">
						<i class="fi fi-close"></i>
						Set : Inactive
					</a>

					<a 	href="#" 
						class="dropdown-item text-truncate js-form-advanced-bulk" 
						data-js-form-advanced-bulk-hidden-action-id="#action" 
						data-js-form-advanced-bulk-hidden-action-value="delete" 
						data-js-form-advanced-bulk-container-items="#item_list" 
						data-js-form-advanced-bulk-required-selected="true" 
						data-js-form-advanced-bulk-required-txt-error="No Selected Items!" 
						data-js-form-advanced-bulk-required-txt-position="top-center" 
						data-js-form-advanced-bulk-required-custom-modal="" 
						data-js-form-advanced-bulk-required-custom-modal-content-ajax="" 
						data-js-form-advanced-bulk-required-modal-type="danger" 
						data-js-form-advanced-bulk-required-modal-size="modal-md" 
						data-js-form-advanced-bulk-required-modal-txt-title="Please Confirm" 
						data-js-form-advanced-bulk-required-modal-txt-subtitle="Selected Products: {{no_selected}}" 
						data-js-form-advanced-bulk-required-modal-txt-body-txt="Are you sure? Delete {{no_selected}} selected products?" 
						data-js-form-advanced-bulk-required-modal-txt-body-info="Please note: this is a permanent action!" 
						data-js-form-advanced-bulk-required-modal-btn-text-yes="Yes, Delete" 
						data-js-form-advanced-bulk-required-modal-btn-text-no="Cancel" 
						data-js-form-advanced-bulk-submit-without-confirmation="false" 
						data-js-form-advanced-form-id="#form_id">
						<i class="fi fi-thrash text-danger"></i>
						Set : Delete
					</a>

					<div class="dropdown-divider"></div>

					<a 	href="#" 
						class="dropdown-item text-truncate js-form-advanced-bulk" 
						data-js-form-advanced-bulk-hidden-action-id="#action" 
						data-js-form-advanced-bulk-hidden-action-value="myactionhere3" 
						data-js-form-advanced-bulk-container-items="#item_list" 
						data-js-form-advanced-bulk-required-selected="true" 
						data-js-form-advanced-bulk-required-txt-error="No Selected Items!" 
						data-js-form-advanced-bulk-required-txt-position="top-center" 
						data-js-form-advanced-bulk-submit-without-confirmation="true" 
						data-js-form-advanced-form-id="#form_id">
						<i class="fi fi-mollecules text-danger"></i>
						Submit : No Confirm.
					</a>

					<div class="dropdown-divider"></div>

					<a 	href="#" 
						class="dropdown-item text-truncate js-form-advanced-bulk" 
						data-js-form-advanced-bulk-hidden-action-id="#action" 
						data-js-form-advanced-bulk-hidden-action-value="myactionhere1" 
						data-js-form-advanced-bulk-container-items="#item_list" 
						data-js-form-advanced-bulk-required-selected="true" 
						data-js-form-advanced-bulk-required-txt-error="No Selected Items!" 
						data-js-form-advanced-bulk-required-custom-modal="#my_custom_modal" 
						data-js-form-advanced-bulk-required-custom-modal-content-ajax="" 
						data-js-form-advanced-bulk-submit-without-confirmation="false" 
						data-js-form-advanced-form-id="#form_id">
						<i class="fi fi-heart-slim text-success"></i>
						Inline Custom Modal
					</a>

					<a href="#" 
						class="dropdown-item text-truncate js-form-advanced-bulk" 
						data-js-form-advanced-bulk-hidden-action-id="#action"
						data-js-form-advanced-bulk-hidden-action-value="myactionhere2"
						data-js-form-advanced-bulk-container-items="#item_list" 

						data-js-form-advanced-bulk-required-selected="true" 
						data-js-form-advanced-bulk-required-txt-error="No Customers Selected!"

						data-js-form-advanced-bulk-required-custom-modal="#my_custom_modal_ajax" 
						data-js-form-advanced-bulk-required-custom-modal-content-ajax="../_ajax/form_advanced_bulk_custom_modal_content.html" 

						data-js-form-advanced-bulk-submit-without-confirmation="false"
						data-js-form-advanced-form-id="#form_id"
						>
						<i class="fi fi-heart-slim"></i> Inline + Ajax Content
					</a>

					<!-- 
						NO INLINE HTML CODE NEEDED!
						Fully customizable
						see html_frontend/ajax/form_advanced_bulk_custom_modal_content_full.html
					-->
					<a 	href="#" 
						class="dropdown-item text-truncate js-form-advanced-bulk" 
						data-js-form-advanced-bulk-hidden-action-id="#action" 
						data-js-form-advanced-bulk-hidden-action-value="myactionhere1" 
						data-js-form-advanced-bulk-container-items="#item_list" 
						data-js-form-advanced-bulk-required-selected="true" 
						data-js-form-advanced-bulk-required-txt-error="No Items Selected!" 
						data-js-form-advanced-bulk-required-txt-position="top-center" 
						data-js-form-advanced-bulk-submit-without-confirmation="false" 
						data-js-form-advanced-bulk-required-modal-size="modal-md" 

						data-js-form-advanced-bulk-required-modal-type="custom" 
						data-js-form-advanced-bulk-required-modal-backdrop="static" 
						data-js-form-advanced-bulk-required-custom-modal-content-ajax="../_ajax/form_advanced_bulk_custom_modal_content_full.html" 

						data-js-form-advanced-form-id="#form_id">
						<i class="fi fi-lightning text-warning"></i>
						Full Ajax Content
					</a>

				</div>

			</div>

		</div>
		<!-- /SELECTED ITEMS -->

	</div>
	<!-- /options -->



	<!-- Inline custom modal (should stay inside <form> to be able to post data) -->
	<div class="modal fade show" id="my_custom_modal" role="dialog" tabindex="-1" aria-labelledby="modal-title-confirm" aria-hidden="true">
		<div class="modal-dialog" role="document">
			<div class="modal-content">

				<!--

					Header color - optional
						.bg-[primary|danger|warning|success|info|pink|indigo]-soft
				-->
				<div class="modal-header b-0 bg-primary-soft">
					<h5 id="modal-title-confirm" class="modal-title font-weight-light fs--18">
						Inline custom modal
					</h5>

					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span class="fi fi-close fs--18" aria-hidden="true"></span>
					</button>

				</div>
				<!-- /header -->

				<!-- body -->
				<div class="modal-body pt--30 pb--30">

					Selected items: <span class="js-form-advanced-selected-items">0</span>


					<div class="fs--18">
						Customize as you like! <br><br>

						<!-- FILE UPLOADER -->
						<div class="clearfix">
							<!--

								2. AJAX UPLOAD : DYNAMIC PROGRESS UNDER BUTTON
								No any extra html code needed for the progress bar.

							-->
							<label class="btn btn-warning btn-sm cursor-pointer position-relative">

								<!-- 
									We use .absolute-full class instead of .viewport-out
									Just to make sure the element is working crossbrowser!

									.show-hover-container  	= show delete button only on hover (always visible on mobile)

								 -->
							    <input 	name="ajax_files_progress_dynamic[]" 
							    		multiple=""
							    		type="file" 

							    		data-file-ext="jpg,png,gif"
							    		data-file-max-size-kb-per-file="3000"
							    		data-file-max-size-kb-total="5000" 
							    		data-file-max-total-files="3"
							    		data-file-ext-err-msg="Allowed:" 
							    		data-file-exist-err-msg="File already exists:"
							    		data-file-size-err-item-msg="File too large!"
							    		data-file-size-err-total-msg="Total allowed size exceeded!"
							    		data-file-size-err-max-msg="Maximum allowed files:"
							    		data-file-toast-position="bottom-center"
							    		data-file-preview-container=".js-form-advanced-container-table-form-test" 
							    		data-file-preview-img-height="120" 
							    		data-file-preview-show-info="true" 
							    		data-file-preview-class="show-hover-container shadow-md m-2 rounded float-start" 
							    		data-file-preview-img-cover="false" 
							    		data-file-btn-clear="a.js-form-advanced-btn-multiple-ajax-remove"

							    		data-file-ajax-upload-enable="true"
							    		data-file-ajax-upload-url="../demo.files/php/demo.ajax_file_upload.php"
							    		data-file-ajax-upload-params="['action','upload']['param2','value2']"

							    		data-file-ajax-delete-enable="true"
							    		data-file-ajax-delete-url="../demo.files/php/demo.ajax_file_upload.php"
							    		data-file-ajax-delete-params="['action','delete_file']"

							    		data-file-ajax-reorder-enable="true"
							    		data-file-ajax-reorder-url="../demo.files/php/demo.ajax_file_upload.php"
							    		data-file-ajax-reorder-params="['action','reorder']"
										data-file-ajax-reorder-toast-success="Order Saved!" 
										data-file-ajax-reorder-toast-position="bottom-center" 

							    		data-file-ajax-toast-success-txt="Successfully Uploaded!"
							    		data-file-ajax-toast-error-txt="One or more files not uploaded!"
							    		data-file-ajax-callback-function=""
							    		data-file-ajax-progressbar-custom=""
							    		data-file-ajax-progressbar-disable="false"


							    		class="custom-file-input absolute-full">

								<span class="group-icon">
									<i class="fi fi-arrow-upload"></i>
									<i class="fi fi-circle-spin fi-spin"></i>
					    		</span> 

								<span>Ajax Uploader</span>

							</label>

							<div class="js-form-advanced-container-table-form-test position-relative mt-3 clearfix hide-empty"></div>
							<small class="d-block text-gray-400">Upload few images and then... reorder them :)</small>
						</div>	
						<!-- /FILE UPLOADER -->

						<br>
						<small>Yes, ajax content for modals also supported!</small><br>
						<small>Check <a href="plugins-sow-form-advanced.html" class="js-ajax link-muted">SOW : Form Advanced</a> for more & documentation!</small>
					</div>

				</div>
				<!-- /body -->

				<!-- footer ; buttons -->
				<div class="modal-footer">

					<!-- submit button - actually submitting the form -->
					<button type="submit" class="btn pt--10 pb--10 fs--16 btn-primary">
						<i class="fi fi-check"></i> Oh, Great!
					</button>

					<!-- cancel|close button -->
					<a href="#" class="btn pt--10 pb--10 fs--16 btn-light" data-dismiss="modal">
						<i class="fi fi-close"></i> Close
					</a>

				</div>
				<!-- /footer ; buttons -->

			</div>

		</div>
	</div>
	<!-- /Inline custom modal -->



	<!-- Inline custom modal + Ajax Content -->
	<div class="modal fade show" id="my_custom_modal_ajax" role="dialog" tabindex="-1" aria-labelledby="modal-title-confirm" aria-hidden="true">
		<div class="modal-dialog modal-lg" role="document">
			<div class="modal-content">

					<!-- Ajax content is added here -->
					<!--

						Content: ../_ajax/form_advanced_bulk_custom_modal_content.html
						Note: is full modal content: header, body and footer.
						So you can fully customize each ajax content.

					-->

					<!-- ajax loading icon : optional -->
					<div class="p--30 text-center">
						<i class="fi fi-circle-spin fi-spin fs--30 text-muted"></i>
					</div>
					<!-- /ajax loading icon : optional -->

			</div>

		</div>
	</div>
	<!-- /Inline custom modal + Ajax Content -->

</form>
									

Limit & Counters

please, order between 1 and 48.
155 chars limit
characters left: 155

1000 chars limit
characters left: 1000
100 chars limit
characters: 0 / 100

100 chars limit
characters: 0 / 100

<!-- input limit + hidden message -->
<div class="position-relative">
	<span class="js-form-advanced-limit-info badge badge-warning hide animate-bouncein position-absolute absolute-top m--2">
		please, order between 1 and 48.
	</span>

	<input type="number" value="8" min="1" max="48" class="form-control js-form-advanced-limit">
</div>






<!-- char count down : input -->
<div class="position-relative">
	<span class="js-form-advanced-limit-info badge badge-warning hide animate-bouncein position-absolute absolute-top m--2">
		155 chars limit
	</span>

	<input type="text" name="-" class="form-control js-form-advanced-char-count-down" data-output-target=".js-form-advanced-char-left" value="" maxlength="155">
	
	<div class="fs--12 text-muted text-align-end mt--3">
		characters left: <span class="js-form-advanced-char-left">155</span>
	</div>
</div>


<!-- char count down : textarea -->
<div class="position-relative">
	<span class="js-form-advanced-limit-info badge badge-warning hide animate-bouncein position-absolute absolute-top m--2">
		1000 chars limit
	</span>
	
	<textarea class="js-form-advanced-char-count-down form-control" data-output-target=".js-form-advanced-char-left2" maxlength="1000"></textarea>
	
	<div class="fs--12 text-muted text-align-end mt--3">
		characters left: <span class="js-form-advanced-char-left2">1000</span>
	</div>
</div>




<!-- char count up : input -->
<div class="position-relative">
	<span class="js-form-advanced-limit-info badge badge-warning hide animate-bouncein position-absolute absolute-top m--2">
		100 chars limit
	</span>

	<input type="text" name="-" class="form-control js-form-advanced-char-count-up" data-output-target=".js-form-advanced-char-total" value="" maxlength="100">
	
	<div class="fs--12 text-muted text-align-end mt--3">
		characters: <span class="js-form-advanced-char-total">0</span> / 100
	</div>
</div>

<!-- char count up : textarea -->
<div class="position-relative">
	<span class="js-form-advanced-limit-info badge badge-warning hide animate-bouncein position-absolute absolute-top m--2">
		100 chars limit
	</span>

	<textarea class="js-form-advanced-char-count-up form-control" data-output-target=".js-form-advanced-char-total2" maxlength="100"></textarea>
	
	<div class="fs--12 text-muted text-align-end mt--3">
		characters: <span class="js-form-advanced-char-total2">0</span> / 100
	</div>
</div>
									

Formatters

<!-- 
	credit card type : autodetected on user type 

	amex
	diners
	jcb
	laser
	visa
	mastercard
	maestro
	discover

-->
<input type="text" name="cc_type" id="cc_type" value="" class="form-control form-control-sm mb-3" readonly="">

<div class="form-label-group">
	<input placeholder="Card Number" id="cc_number" type="text" data-card-type="#cc_type" class="form-control cc-format cc-number">
	<label for="cc_number">Card Number</label>
</div>




<!-- date -->
<div class="form-label-group">
	<input placeholder="MM / YY" id="cc_date" type="text" value="" class="form-control cc-format cc-expire" maxlength="5">
	<label for="cc_date">MM / YY</label>
</div>
									

Reset Form

Type/select something

<!-- form content example -->
<div id="form_content">

	<div class="form-label-group mb-3">
		<input placeholder="Full Name" id="full_name" type="text" class="form-control">
		<label for="full_name">Full Name</label>
	</div>

	<div class="form-label-group mb-3">
		<textarea placeholder="Textarea" id="description" class="form-control" rows="3"></textarea>
		<label for="description">Textarea</label>
	</div>

	<label class="form-radio form-radio-primary clearfix d-block">
		<input type="radio" name="radio_form" value="1">
		<i></i> option 1
	</label>

	<label class="form-radio form-radio-primary clearfix d-block">
		<input type="radio" name="radio_form" value="1">
		<i></i> option 2
	</label>

</div>



<!-- 
	Reset Button 
	data-target-reset="" 	(id or class ; multiple separated by comma)
	data-exclude-reset="" 	(id or class ; multiple separated by comma)
	.js-ignore  			(always visible ; also remove .hide-force)
-->
<a href="#" data-target-reset="#form_content" data-exclude-reset="" class="form-advanced-reset hide-force btn btn-light">
	reset form
</a>