PHP Classes

File: public/assets/local/js/component.min.js

Recommend this page to a friend!
  Classes of Aby Dahana  >  Aksara  >  public/assets/local/js/component.min.js  >  Download  
File: public/assets/local/js/component.min.js
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Aksara
A CodeIgniter based API and CRUD generator
Author: By
Last change: Update the missing limit for SQL Server and selection of pagination
Initial commit for update 4.2.8

Fix the missing token when ordering the column
Initial commit for update 4.2.8

The update under this commit:
1. Core: refine the grid view and validation statement;
2. Enlarge the group privileges modal;
3. Add the sample individual user privileges;
4. Refine the core module views;
5. Change the login component to use view instead.
Initial commit for update 4.2.8

1. Adds the token to the json response when it's requested from CRUD form;
2. Core: Refine the permission redirection, adds the parameter to the grid_view method;
3. Templates, add the ID to the menu element to keep the active links;
4. Refine the core modules order;
5.
Initial commit for update 4.2.8

1. Core improvements;
2. Menu generator improvements;
3. Validation for file upload improvements;
4. Adds the failed login attempts blocking with customizable attempt count and blocking time;
5. Login page improvements, removing the login component due to the easy customization;
6. Removing unused JS plugins;
7. Routing machine preparation for maps rendering;
8. Preparing the market addons to be able to auto update the installed modules and themes;
9. Changes for uploader plugin with Aksara custom uploader since the previous version used to be paid version (fileuploader by innostudio);
10. Improve the carousel slideshow CMS that previously missing the order when uploaded file is skipping the first slide;
Initial commit for update 4.2.8

1. Refine addons views;
2. Refine grid view;
3. Refine require.js;
4. Add the capability to reload the page after CRUD action from outside the data table
Correct the size of search filter
Add missing image check to grid view
Initial commit for update 4.2.8

Refine the core modules
Initial commit for update 4.2.8

Updating the grid view
Update component.min.js

Add nested object check
Initial commit for update 4.2.8

Add the grid view option
Initial commit for update 4.2.8

1. Template core, add the limit number to the pagination;
2. Addons, capability to import the module and theme. Refine the market addon fetching;
3. Installer, correct the migration.
Initial commit for update version 4.2.8

This update correcting the following mistake:
1. Core, rewrite "where" on query builder add capability to escape the complex query on where;
2. Model, change the query escape to match with given parameter;
3. Template (including component.min.js), add the per-page result option;
4. Add checker to ignore the parameter when the value is null on "unique" validation;
5. User module, add the validation to username and email;
6. Store session_id to variable before destroy;
7. Migration, remove the default value for datetime that causing error on Postgre.
Initial commit for update 4.2.8

Change the phrase
Initial commit for update 4.1.8
Remove the separator between description and form field when using map drawing
Initial commit for update version 4.2.8

1. \aksara\Laboratory\Core.php: assign the method of "parent_module" related to view template and permission, add the option parameter for "set_title" to set the individual title for current action (index, create, read, update), improve the autocomplete function;

2. \aksara\Laboratory\Model.php: add the method to get error message, throwing an error message than error exception;

3. \aksara\Laboratory\Permission.php: change the thrown error method when validate AJAX request;

4. \aksara\Laboratory\Template.php: correct the view path finder of sub-modules;

5. Change the template of core modules;

6. Add the reverse geocoding for openlayers when updating the layer feature;

7. Minor updates for core plugins.
Revert "Initial commit for updat 4.2.8"

This reverts commit 5d2eaabba9d42ad8dc108eaf4303b2d58a50a735.
Initial commit for update 3.2.8

1. \aksara\Laboratory\Core.php: assign the method of "parent_module" related to view template and permission, add the option parameter for "set_title" to set the individual title for current action (index, create, read, update), improve the autocomplete function;

2. \aksara\Laboratory\Model.php: add the method to get error message, throwing an error message than error exception;

3. \aksara\Laboratory\Permission.php: change the thrown error method when validate AJAX request;

4. \aksara\Laboratory\Template.php: correct the view path finder of sub-modules;

5. Change the template of core modules;

6. Add the reverse geocoding for openlayers when updating the layer feature;

7. Minor updates for core plugins.
Revert "Revert "Revert "Initial commit for updat 4.2.8"""

This reverts commit 73226fbaf324b253ed2c3888e8eabd81ca8ef946.
Revert "Revert "Initial commit for updat 4.2.8""

This reverts commit 94a714c958f637d932a6bea4bb15a884ddef733e.
Revert "Initial commit for updat 4.2.8"

This reverts commit 5d2eaabba9d42ad8dc108eaf4303b2d58a50a735.
Revert "Revert "Initial commit for updat 4.2.8""

This reverts commit 91ca274f4924f2ba97344ab5d80cb64f6a1a1274.
Revert "Initial commit for updat 4.2.8"

This reverts commit 5d2eaabba9d42ad8dc108eaf4303b2d58a50a735.
Initial commit for updat 4.2.8

1. \aksara\Laboratory\Core.php: assign the method of "parent_module" related to view template and permission, add the option parameter for "set_title" to set the individual title for current action (index, create, read, update), improve the autocomplete function;

2. \aksara\Laboratory\Model.php: add the method to get error message, throwing an error message than error exception;

3. \aksara\Laboratory\Permission.php: change the thrown error method when validate AJAX request;

4. \aksara\Laboratory\Template.php: correct the view path finder of sub-module;

5. Change the template of core module;

6. Add the reverse geocoding for openlayers when updating the layer feature;

7. Minor update for core plugins.
Update component.min.js
Initial commit for update 4.2.8

1. Add the partial content related to account management;
2. Add the language selection to the sidebar;
3. Remove the profile component from the component.min.js;
4. Add the function to forcing modal to be opened in small screen.
Date: 5 days ago
Size: 106,966 bytes
 

Contents

Class file image Download
/**
 * Component Module
 *
 * This component is translated from the context that running in PHP, the return data
 * of rest server were JSON Object. Style of writing is valid with ES5, so it must be
 * compatible with outdated browser.
 *
 * @author			Aby Dahana
 * @profile			abydahana.github.io
 *
 * Property of Aksara Laboratory
 * www.aksaracms.com
 */
var UA												= ($(window).outerWidth() < 1024 ? 'mobile' : 'desktop'),
	component										= {
	/**
	 * CRUD: table list
	 */
	table: function(response)
	{
		if(typeof response.results !== 'undefined' && typeof response.results.grid !== 'undefined')
		{
			return this.grid(response)
		}
		
		var	primary									= {},
			extra_toolbar							= '',
			fields									= '',
			search_columns							= '',
			items									= '',
			colspan									= ($.inArray('delete', response.unset_action) === -1 ? 2 : 1);
		
		/**
		 * Add the extra toolbar / option button if any
		 */
		if(response.results.extra_action.toolbar)
		{
			/* loop, the jQuery is required */
			$.each(response.results.extra_action.toolbar, function(key, val)
			{
				/* toolbar button is available */
				extra_toolbar						+= '<a href="' + go_to(val.url, val.parameter) + '" class="btn btn-sm ' + (val.class ? val.class : 'btn-default ajax') + '"' + (val.new_tab && val.new_tab == 1 ? ' target="_blank"' : null) + '><i class="' + (val.icon ? val.icon : 'mdi mdi-link') + '"></i> ' + val.label + '</a>';
			})
		}
		
		/**
		 * Check the permission of module include create, read, update, delete and export
		 */
		if(response.results.extra_action.option || $.inArray('read', response.results.unset_action) === -1 || $.inArray('update', response.results.unset_action) === -1 || $.inArray('delete', response.results.unset_action) === -1 || $.inArray('print', response.results.unset_action) === -1 || $.inArray('pdf', response.results.unset_action) === -1)
		{
			/* check if delete is allowed */
			if($.inArray('delete', response.results.unset_action) === -1)
			{
				/* delete action is allowed, create checkbox to add bulk delete */
				fields								+= '<th width="1" class="border-top-0"><input type="checkbox" role="checker" data-parent="table" class="bulk-delete" /></th>';
			}
			
			/* some of action is allowed, add column to table row */
			fields									+= '<th width="1" class="border-top-0">' + (phrase.options ? phrase.options : 'Options') + '</th>';
		}
		
		/**
		 * loop to initialize the list of fields, jQuery is required
		 */
		if(typeof response.results.columns !== 'undefined')
		{
			$.each(response.results.columns, function(key, val)
			{
				/* add new field to list */
				var parameter						= $.extend({}, response.query_string, {'aksara': val.aksara, 'order': val.field, 'sort': val.sort});
				
				search_columns						+= '<option value="' + val.field + '"' + (val.field == get_query_string('column') ? ' selected' : null) + '>' + val.label + '</option>';
				fields								+= '<th class="border-top-0' + ('right' == val['align'] ? ' text-right' : '') + '"><a href="' + go_to('', parameter) + '" class="--xhr' + (key == get_query_string('order') ? ' text-primary' : ' text-default') + '"><i class="mdi mdi-sort-' + (key == get_query_string('order') && 'asc' == get_query_string('sort') ? 'ascending' : 'descending') + ' float-right' + (key == get_query_string('order') ? ' text-primary' : ' text-muted') + '"></i> ' + val['label'] + '</a></th>';
				colspan++;
			})
		}
		
		if(typeof response.total !== 'undefined' && response.total && typeof response.results.table_data !== 'undefined')
		{
			/**
			 * loop to initialize the item list, jQuery is required
			 */
			$.each(response.results.table_data, function(key, val)
			{
				/* add new item to list */
				var columns							= '',
					options							= '',
					extra_option					= '',
					extra_dropdown					= '',
					reading							= true,
					updating						= true,
					deleting						= true;
					
				if(typeof response.results.extra_action.option[key] !== 'undefined')
				{
					$.each(response.results.extra_action.option[key], function(extra_key, extra_val)
					{
						var _class					= null,
							label					= null,
							icon					= null;
							
						if(typeof extra_val.new_tab === 'object')
						{
							if(typeof extra_val.new_tab.restrict !== 'undefined')
							{
								var id				= Object.keys(extra_val.new_tab.restrict)[0];
								
								if($.inArray(val[id].original, extra_val.new_tab.restrict[id]) !== -1) return;
							}
							else if(typeof extra_val.new_tab.key !== 'undefined' && typeof extra_val.new_tab.value !== 'undefined' && typeof val[extra_val.new_tab.key] !== 'undefined' && typeof val[extra_val.new_tab.key]['original'] !== 'undefined' && val[extra_val.new_tab.key]['original'] == extra_val.new_tab.value)
							{
								_class				= (typeof extra_val.new_tab.class !== 'undefined' ? extra_val.new_tab.class : null);
								label				= (typeof extra_val.new_tab.label !== 'undefined' ? extra_val.new_tab.label : null);
								icon				= (typeof extra_val.new_tab.icon !== 'undefined' ? extra_val.new_tab.icon : null);
							}
						}
						
						/* extra option found, add to item */
						extra_option				+= '<a href="' + go_to(extra_val.url, extra_val.parameter) + '" class="btn btn-xs ' + (_class ? _class : (extra_val.class ? extra_val.class : 'btn-secondary --xhr')) + '" data-toggle="tooltip" title="' + (label ? label : extra_val.label) + '"' + (extra_val.new_tab && extra_val.new_tab == 1 ? ' target="_blank"' : '') + '><i class="' + (icon ? icon : (extra_val.icon ? extra_val.icon : 'mdi mdi-link')) + '"></i> </a>';
					})
				}
				
				if(typeof response.results.extra_action.dropdown[key] !== 'undefined')
				{
					$.each(response.results.extra_action.dropdown[key], function(extra_key, extra_val)
					{
						/* extra dropdown found, add to item */
						extra_dropdown				+= '<a href="' + go_to(extra_val.url, extra_val.parameter) + '" class="list-group-item pt-1 pr-0 pb-1 pl-0 ' + (extra_val.class ? extra_val.class.replace('btn', 'unused-btn') : '--xhr') + '" data-toggle="tooltip" title="' + extra_val.label + '"' + (extra_val.new_tab ? ' target="_blank"' : '') + '><i class="' + (extra_val.icon ? extra_val.icon : 'mdi mdi-link') + '"></i> ' + extra_val.label + '</a>';
					})
				}
				
				/**
				 * loop the row to get formatted columns
				 */
				var primary_key						= {};
				
				$.each(val, function(field, params)
				{
					/* check the primary key */
					if(params.primary)
					{
						/* primary key found, use it as primary id */
						primary_key[field]			= params.original;
						
						/* check if the item row is individually restricted */
						if(typeof response.results.unset_read[field] !== 'undefined' && $.isArray(response.results.unset_read[field]) && $.inArray(params.original, response.results.unset_read[field].toString()) !== -1)
						{
							/* unset read */
							reading					= false;
						}
						
						if(typeof response.results.unset_update[field] !== 'undefined' && $.isArray(response.results.unset_update[field]) && $.inArray(params.original, response.results.unset_update[field].toString()) !== -1)
						{
							/* unset update */
							updating				= false;
						}
						
						if(typeof response.results.unset_delete[field] !== 'undefined' && $.isArray(response.results.unset_delete[field]) && $.inArray(params.original, response.results.unset_delete[field].toString()) !== -1)
						{
							/* unset delete */
							deleting				= false;
						}
					}
					
					/* continue if column is marked as unset / hidden */
					if(params.hidden) return;
					
					/* push to columns to displayed in next step */
					columns							+= '<td id="__c_' + field + '">' + params.content + '</td>';
				});
				
				/* check if there are option button */
				options								= ($.inArray('delete', response.results.unset_action) === -1 ? '<td>' + (deleting ? '<input type="checkbox" name="bulk_delete[]" class="checker-children" value="' + htmlspecialchars(JSON.stringify(primary_key)) + '" />' : '') + '</td>' : '') +
				(response.results.extra_action.option || $.inArray('read', response.results.unset_action) === -1 || $.inArray('update', response.results.unset_action) === -1 || $.inArray('print', response.results.unset_action) === -1 || $.inArray('pdf', response.results.unset_action) === -1 ?
				'<td>' +
					'<div class="btn-group">' +
						
						/* update button if action is allowed */
						(reading && $.inArray('read', response.results.unset_action) === -1 ?
						'<a href="' + go_to('read', response.results.query_string[key]) + '" class="btn btn-primary btn-xs --open-modal-read" data-toggle="tooltip" title="' + (phrase.read ? phrase.read : 'Read') + '">' +
							'<i class="mdi mdi-magnify"></i>' +
						'</a>' : '') +
						
						/* update button if action is allowed */
						(updating && $.inArray('update', response.results.unset_action) === -1 ? '<a href="' + go_to('update', response.results.query_string[key]) + '" class="btn btn-info btn-xs ' + (response.modal_html ? '--modal' : '--open-modal-form') + '" data-toggle="tooltip" title="' + (phrase.update ? phrase.update : 'Update') + '"><i class="mdi mdi-square-edit-outline"></i></a>' : '') +
						
						/* add extra option to button group */
						extra_option +
						
						/* print button if action is allowed */
						(extra_dropdown || (reading && $.inArray('print', response.results.unset_action) === -1) || (reading && $.inArray('pdf', response.results.unset_action) === -1) ? '<button type="button" class="btn btn-xs btn-secondary toggle-tooltip" data-title="' + (phrase.more_options ? phrase.more_options : 'More options') + '" data-toggle="popover" data-trigger="focus" data-content=\'' +
						
							/* add extra action to the popover */
							'<div class="list-group list-group-flush">' +
						
								/* add extra dropdown to dropdown group */
								extra_dropdown +
							
								/* print button if action is allowed */
								(reading && $.inArray('print', response.results.unset_action) === -1 ? '<a href="' + go_to('print', response.results.query_string[key]) + '" class="list-group-item pt-1 pr-0 pb-1 pl-0" target="_blank"><i class="mdi mdi-printer" style="width:22px"></i> ' + (phrase.print ? phrase.print : 'Print') + '</a>' : '') +
							
								/* pdf button if action is allowed */
								(reading && $.inArray('pdf', response.results.unset_action) === -1 ? '<a href="' + go_to('pdf', response.results.query_string[key]) + '" class="list-group-item pt-1 pr-0 pb-1 pl-0" target="_blank"><i class="mdi mdi-file-pdf text-danger" style="width:22px"></i> ' + (phrase.pdf ? phrase.pdf : 'PDF') + '</a>' : '') + 
							'</div>\' ' +
							/* end of popover wrapping */
						'data-container="body" data-html="true"><i class="mdi mdi-chevron-down"></i></button>' : '') +
						
						/* delete button if action is allowed */
						(deleting && $.inArray('delete', response.results.unset_action) === -1 ? '<a href="' + go_to('delete', response.results.query_string[key]) + '" class="btn btn-danger btn-xs --open-delete-confirm" data-toggle="tooltip" title="' + (phrase.delete ? phrase.delete : 'Delete') + '"><i class="mdi mdi-trash-can-outline"></i></a>' : '') +
					'</div>' +
				'</td>' : '');
				
				/* push columns include the action button into table row */
				items								+= '<tr id="item__' + response.results.query_string[key].aksara + '">' + ($.inArray('read', response.results.unset_action) === -1 || $.inArray('update', response.unset_action) === -1 || $.inArray('delete', response.results.unset_action) === -1 || $.inArray('print', response.results.unset_action) === -1 || $.inArray('pdf', response.results.unset_action) === -1 ? options : '') + columns + '</tr>';
			})
		}
		else
		{
			/**
			 * Uh oh! No data were found, throw the notification into table row
			 */
			items									= '<tr class="no-hover"><td colspan="' + colspan + '"><div class="text-center pt-5 pb-5"><i class="mdi mdi-text mdi-5x text-muted"></i><br /><p class="lead text-muted">' + (phrase.no_matching_record_were_found ? phrase.no_matching_record_were_found : 'No matching record were found') + '</p></div></td></tr>';
		}
		
		/**
		 * Add the form format into the local storage
		 */
		if($.inArray('create', response.results.unset_action) === -1)
		{
			/* generate the response data */
			$.ajax
			({
				method: 'POST',
				url: go_to('create', response.query_string),
				data:
				{
					prefer: 'modal'
				},
				beforeSend: function()
				{
					sessionStorage.setItem('form', '')
				}
			})
			.done(function(data)
			{
				sessionStorage.setItem('form', JSON.stringify(data));
			})
		}
		else if($.inArray('update', response.results.unset_action) === -1)
		{
			/* generate the response data */
			$.ajax
			({
				method: 'POST',
				url: go_to('update', response.query_string),
				data:
				{
					prefer: 'modal'
				},
				beforeSend: function()
				{
					sessionStorage.setItem('form', '')
				}
			})
			.done(function(data)
			{
				sessionStorage.setItem('form', JSON.stringify(data));
			})
		}
		
		/**
		 * Add the view format into the local storage
		 */
		if($.inArray('read', response.results.unset_action) === -1)
		{
			$.ajax
			({
				method: 'POST',
				url: go_to('read', response.query_string),
				data:
				{
					prefer: 'modal'
				},
				beforeSend: function()
				{
					sessionStorage.setItem('read', '')
				}
			})
			.done(function(data)
			{
				sessionStorage.setItem('read', JSON.stringify(data));
			})
		}
		
		var input_exists							= '';
		
		if(response.query_string)
		{
			$.each(response.query_string, function(key, val)
			{
				if($.inArray(key, ['aksara', 'q', 'per_page', 'column']) === -1)
				{
					input_exists					+= '<input type="hidden" name="' + key + '" value="' + val + '" />';
				}
			})
		}
		
		/**
		 * return the result to the temporary DOM
		 */
		return (
			'<div class="container-fluid">' +
				'<div class="alias-table-toolbar pt-1 pb-1 border-bottom">' +
					'<div class="row">' +
						'<div class="col">' +
							'<div class="btn-group btn-group-sm">' +
								/* add create button if action is allowed */
								($.inArray('create', response.results.unset_action) === -1 ?
								'<a href="' + go_to('create', response.query_string) + '" class="btn btn-primary --btn-create ' + (response.modal_html ? '--modal' : '--open-modal-form') + '">' +
									'<i class="mdi mdi-plus"></i> ' +
									(phrase.create ? phrase.create : 'Create') +
								'</a>' : '') +
								
								/* add extra button if available */
								extra_toolbar +
								
								/* add export button if action is allowed */
								($.inArray('export', response.results.unset_action) === -1 ?
								'<a href="' + go_to('export', response.query_string) + '" class="btn btn-success --btn-export" target="_blank">' +
									'<i class="mdi mdi-file-excel"></i> ' +
									(phrase.export ? phrase.export : 'Export') +
								'</a>' : '') +
								
								/* add print button if action is allowed */
								($.inArray('print', response.results.unset_action) === -1 ?
								'<a href="' + go_to('print', response.query_string) + '" class="btn btn-warning --btn-print" target="_blank">' +
									'<i class="mdi mdi-printer"></i> ' +
									(phrase.print ? phrase.print : 'Print') +
								'</a>' : '') +
								
								/* add pdf button if action is allowed */
								($.inArray('pdf', response.results.unset_action) === -1 ?
								'<a href="' + go_to('pdf', response.query_string) + '" class="btn btn-info --btn-pdf" target="_blank">' +
									'<i class="mdi mdi-file-pdf"></i> ' +
									(phrase.pdf ? phrase.pdf : 'PDF') +
								'</a>' : '') +
								
								/* add de;ete button if action is allowed */
								($.inArray('delete', response.results.unset_action) === -1 ?
								'<a href="' + go_to('delete', response.query_string) + '" class="btn btn-danger disabled d-none --open-delete-confirm" data-toggle="tooltip" title="' + (phrase.delete_checked ? phrase.delete_checked : 'Delete Checked') + '" data-bulk-delete="true">' +
									'<i class="mdi mdi-trash-can-outline"></i>' +
								'</a>' : '') +
							'</div>' +
						'</div>' +
						'<div class="col' + (typeof response.results !== 'undefined' && typeof response.results.filter !== 'undefined' && !response.results.filter ? '-4' : '') + '">' +
							'<form action="' + go_to('', response.query_string) + '" method="POST" class="--xhr-form">' +
								input_exists +
								'<div class="input-group input-group-sm">' +
									(typeof response.results !== 'undefined' && typeof response.results.filter !== 'undefined' ? response.results.filter : '') +
									'<input type="text" name="q" class="form-control" placeholder="' + (phrase.keyword_to_search ? phrase.keyword_to_search : 'Keyword to search') + '" value="' + (get_query_string('q') ? decodeURIComponent(decodeURI(get_query_string('q'))).replace(/\+/g, ' ') : '') + '" role="autocomplete" autocomplete="off" />' +
									'<select name="column" class="form-control form-control-sm">' +
										'<option value="all">' + (phrase.all_columns ? phrase.all_columns : 'All Columns') + '</option>' +
										search_columns +
									'</select>' +
									'<span class="input-group-append">' +
										'<button type="submit" class="btn btn-primary">' +
											'<i class="mdi mdi-magnify"></i>' +
										'</button>' +
									'</span>' +
								'</div>' +
							'</form>' +
						'</div>' +
					'</div>' +
				'</div>' +
				'<div class="table-responsive alias-table-index">' +
					'<table class="table table-sm table-hover">' +
						'<thead>' +
							'<tr>' +
								/* the above field loop is placed here */
								fields +
							'</tr>' +
						'</thead>' +
						'<tbody>' +
							/* the column and row looping, including the action button above is placed here */
							items +
						'</tbody>' +
					'</table>' +
				'</div>' +
				'<div class="alias-pagination border-top pt-2 pb-2">' +
					this.pagination(response.pagination) +
				'</div>' +
			'</div>'
		)
	},
	
	grid: function(response)
	{
		var	primary									= {},
			extra_toolbar							= '',
			fields									= '',
			search_columns							= '',
			items									= '',
			colspan									= ($.inArray('delete', response.unset_action) === -1 ? 2 : 1),
			array_map								= {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#039;'};
		
		/**
		 * Add the extra toolbar / option button if any
		 */
		if(response.results.extra_action.toolbar)
		{
			/* loop, the jQuery is required */
			$.each(response.results.extra_action.toolbar, function(key, val)
			{
				/* toolbar button is available */
				extra_toolbar						+= '<a href="' + go_to(val.url, val.parameter) + '" class="btn btn-sm ' + (val.class ? val.class : 'btn-dark --xhr') + '"' + (val.new_tab && val.new_tab == 1 ? ' target="_blank"' : null) + '><i class="' + (val.icon ? val.icon : 'mdi mdi-link') + '"></i> ' + val.label + '</a> ';
			})
		}
		
		if(typeof response.total !== 'undefined' && response.total && typeof response.results.table_data !== 'undefined')
		{
			grid									= '';
			
			/**
			 * loop to initialize the item list, jQuery is required
			 */
			$.each(response.results.table_data, function(key, val)
			{
				var item_option						= '',
					extra_option					= [],
					reading							= true,
					updating						= true,
					deleting						= true;
				
				if(typeof response.results.extra_action.option[key] !== 'undefined')
				{
					var num							= 0;
					
					$.each(response.results.extra_action.option[key], function(_key, _val)
					{
						if(typeof _val.new_tab.restrict !== 'undefined')
						{
							var id					= Object.keys(_val.new_tab.restrict);
							if($.inArray(val[id].original, _val.new_tab.restrict[id]) !== -1) return;
						}
						
						extra_option.push
						({
							url: go_to(_val.url, _val.parameter),
							class: 'btn ' + _val.class.replace('btn', 'btn-ignore'),
							icon: _val.icon,
							label: _val.label,
							new_tab: _val.new_tab
						})
					})
				}
				
				var primary_key						= [],
					hash							= '',
					columns							= '',
					slideshow						= '',
					slideshow_count					= 0;
				
				$.each(val, function(field, params)
				{
					if(typeof params.token)
					{
						hash						= params.token;
					}
					
					if(params.primary)
					{
						primary_key[field]			= params.primary;
						
						if(typeof response.results.unset_read[field] !== 'undefined' && $.isArray(response.results.unset_read[field]) && $.inArray(params.original, response.results.unset_read[field]) !== -1)
						{
							reading					= false;
						}
						
						if(typeof response.results.unset_update[field] !== 'undefined' && $.isArray(response.results.unset_update[field]) && $.inArray(params.original, response.results.unset_update[field]) !== -1)
						{
							updating				= false;
						}
						
						if(typeof response.results.unset_delete[field] !== 'undefined' && $.isArray(response.results.unset_delete[field]) && $.inArray(params.original, response.results.unset_delete[field]) !== -1)
						{
							deleting				= false;
						}
					}
					
					if(params.hidden) return;
					
					if(typeof response.results.grid.thumbnail !== 'undefined' && field == response.results.grid.thumbnail && params.type.filter(function(n){return ['image', 'images'].indexOf(n) !== -1}))
					{
						var images					= params.original;
						
						try
						{
							images					= JSON.parse(params.original);
						}
						catch(e)
						{
							
						}
						
						if(typeof images === 'object')
						{
							var num					= 0;
							
							$.each(images, function(src, alt)
							{
								if(num == 3)
								{
									return;
								}
								
								if($.inArray(src.split('.').pop(), ['jpg', 'jpeg', 'png', 'gif']) !== -1)
								{
									slideshow		+= '<div class="carousel-item rounded' + (!num ? ' active' : '') + '"><a href="' + (typeof response.results.grid.url[key] !== 'undefined' ? response.results.grid.url[key] : config.base_url + 'uploads/' + response.results.grid.path + '/thumbs/' + src) + '"' + (typeof response.results.grid.url[key] !== 'undefined' && !response.results.grid.new_tab ? ' class="--xhr"' : ' target="_blank"') + '><div class="clip gradient-top rounded-top"></div><img src="' + config.base_url + 'uploads/' + response.results.grid.path + '/thumbs/' + src + '" class="d-block rounded w-100" alt="' + alt + '"></a><div class="carousel-caption"><p>' + alt + '</p></div></div>';
									
									num++;
								}
							});
						
							slideshow_count			= num;
						}
						else
						{
							slideshow				= '<div class="carousel-item rounded active"><a href="' + (typeof response.results.grid.url[key] !== 'undefined' ? response.results.grid.url[key] : config.base_url + 'uploads/' + response.results.grid.path + '/thumbs/' + images) + '"' + (typeof response.results.grid.url[key] !== 'undefined' && !response.results.grid.new_tab ? ' class="--xhr"' : ' target="_blank"') + '><div class="clip gradient-top rounded-top"></div><img src="' + config.base_url + 'uploads/' + response.results.grid.path + '/thumbs/' + images + '" class="d-block rounded w-100" alt="..."></a><div class="carousel-caption"></div></div>';
						}
					}
					else
					{
						columns						+= '<li class="list-group-item pt-1 pb-1" data-toggle="tooltip" title="' + params.label + '">' + params.content + '</li>';
					}
				});
				
				if(reading && $.inArray('read', response.results.unset_action) === -1)
				{
					extra_option.push
					({
						url: go_to('read', response.results.query_string[key]),
						class: 'btn --modal',
						icon: 'mdi mdi-magnify',
						label: (phrase.view ? phrase.view : 'View'),
						new_tab: false
					})
				}
				
				if(updating && $.inArray('update', response.results.unset_action) === -1)
				{
					extra_option.push
					({
						url: go_to('update', response.results.query_string[key]),
						class: 'btn --modal',
						icon: 'mdi mdi-square-edit-outline',
						label: (phrase.update ? phrase.update : 'Update'),
						new_tab: false
					})
				}
				
				if(deleting && $.inArray('delete', response.results.unset_action) === -1)
				{
					extra_option.push
					({
						url: go_to('delete', response.results.query_string[key]),
						class: 'btn --open-delete-confirm',
						icon: 'mdi mdi-trash-can-outline',
						label: (phrase.delete ? phrase.delete : 'Delete'),
						new_tab: false
					})
				}
				
				if(extra_option.length > 0)
				{
					$.each(extra_option, function(_key, _val)
					{
						if(_key > 2 || !_val) return;
						
						item_option					+= '<a href="' + _val['url'] + '" class="text-truncate pt-2 pb-2 ' + _val['class'] + '" data-toggle="tooltip" title="' + _val['label'] + '"' + (typeof _val['new_tab'] !== 'undefined' && _val['new_tab'] ? ' target="_blank"' : '') + '><i class="' + _val['icon'] + '"></i></a>';
					}),
					
					extra_option.splice(0, 3)
				}
				
				grid								+= '<div class="col-sm-6 col-md-4 col-lg-3"><div class="card shadow-sm rounded-more overflow-hidden border-0 mb-3">' + (slideshow ? '<div id="slideshow_' + key + '" class="carousel slide" data-ride="carousel"><div class="carousel-inner">' + slideshow + '</div>' + (slideshow_count > 1 ? '<a class="carousel-control-prev gradient-right" href="#slideshow_' + key + '" role="button" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">' + (phrase.previous ? phrase.previous : 'Previous') + '</span></a><a class="carousel-control-next gradient-left" href="#slideshow_' + key + '" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">' + (phrase.next ? phrase.next : 'Next') + '</span></a>' : '') + '</div>' : '') + '<div class="card-body pr-0 pb-0 pl-0"><ul class="list-group list-group-flush">' + columns + '</ul><div class="btn-group d-flex bg-white border-top">' + item_option + (extra_option.length ? '<a href="javascript:void(0)" class="btn --open-item-option pt-2 pb-2" data-additional-option="' + JSON.stringify(extra_option).replace(/[&<>"']/g, function(str){return array_map[str]}) + '" data-toggle="tooltip" title="' + (phrase.more ? phrase.more : 'More') + '"><i class="mdi mdi-dots-horizontal-circle-outline"></i></a>' : '') + '</div></div></div></div>';
			})
		}
		else
		{
			/**
			 * Uh oh! No data were found, throw the notification into table row
			 */
			grid									= '<div class="text-center pt-5 pb-5"><i class="mdi mdi-dropbox mdi-5x text-muted"></i><br /><p class="lead text-muted">' + (phrase.no_matching_record_were_found ? phrase.no_matching_record_were_found : 'No matching record were found') + '</p></div></div>';
		}
		
		/**
		 * return the result to the temporary DOM
		 */
		return (
			'<div class="alias-table-toolbar">' +
				'<div class="container-fluid pt-3 pb-3">' +
					'<div class="row">' +
						'<div class="col-md-10 text-center text-md-left">' +
							/* add create button if action is allowed */
							($.inArray('create', response.results.unset_action) === -1 ?
							'<a href="' + go_to('create', response.query_string) + '" class="btn btn-primary btn-sm rounded-pill --btn-create ' + (response.modal_html ? '--modal' : '--open-modal-form') + '">' +
								'<i class="mdi mdi-plus"></i> ' +
								(phrase.create ? phrase.create : 'Create') +
							'</a> ' : '') +
							
							/* add extra button if available */
							extra_toolbar +
							
							/* add export button if action is allowed */
							($.inArray('export', response.results.unset_action) === -1 ?
							'<a href="' + go_to('export', response.query_string) + '" class="btn btn-success btn-sm rounded-pill --btn-export" target="_blank">' +
								'<i class="mdi mdi-file-excel"></i> ' +
								(phrase.export ? phrase.export : 'Export') +
							'</a> ' : '') +
							
							/* add print button if action is allowed */
							($.inArray('print', response.results.unset_action) === -1 ?
							'<a href="' + go_to('print', response.query_string) + '" class="btn btn-warning btn-sm rounded-pill --btn-print" target="_blank">' +
								'<i class="mdi mdi-printer"></i> ' +
								(phrase.print ? phrase.print : 'Print') +
							'</a> ' : '') +
							
							/* add pdf button if action is allowed */
							($.inArray('pdf', response.results.unset_action) === -1 ?
							'<a href="' + go_to('pdf', response.query_string) + '" class="btn btn-info btn-sm rounded-pill --btn-pdf" target="_blank">' +
								'<i class="mdi mdi-file-pdf"></i> ' +
								(phrase.pdf ? phrase.pdf : 'PDF') +
							'</a> ' : '') +
							
							/* add delete button if action is allowed */
							($.inArray('delete', response.results.unset_action) === -1 ?
							'<a href="' + go_to('delete', response.query_string) + '" class="btn btn-danger btn-sm rounded-pill disabled d-none --open-delete-confirm" data-toggle="tooltip" title="' + (phrase.delete_checked ? phrase.delete_checked : 'Delete Checked') + '" data-bulk-delete="true">' +
								'<i class="mdi mdi-trash-can-outline"></i>' +
							'</a> ' : '') +
						'</div>' +
						'<div class="col-md-2">' +
							'<a href="javascript:void(0)" class="btn btn-success btn-sm btn-block rounded-pill"data-toggle="modal" data-target="#searchModal">' +
								'<i class="mdi mdi-magnify"></i>' +
								(phrase.search ? phrase.search : 'Search') +
							'</a>' +
						'</div>' +
					'</div>' +
				'</div>' +
			'</div>' +
			'<div class="alias-grid-container">' +
				'<div class="container-fluid">' +
					'<div class="row">' +
						grid +
					'</div>' +
				'</div>' +
			'</div>' +
			'<div class="alias-pagination">' +
				'<div class="container-fluid pt-3 pb-3">' +
					this.pagination(response.pagination) +
				'</div>' +
			'</div>'
		)
	},
	
	pagination: function(response)
	{
		var output									= '';
		$.each(response.results, function(key, val)
		{
			output									+= '<li class="' + val.parentClass + '"><a href="' + val.href + '" class="' + val.class + '">' + val.label + '</a></li>';
		});
		
		return (
			'<div class="row">' +
				'<div class="col-sm-6 text-center-sm">' +
					'<label class="text-muted">' +
						'<small class="result-for">' +
							'<i class="mdi mdi-information-outline"></i> ' +
							response.text +
						'</small>' +
					'</label>' +
				'</div>' +
				'<div class="col-sm-6">' +
					'<nav class="d-flex justify-content-center justify-content-sm-end justify-content-md-end justify-content-lg-end justify-content-xl-end" aria-label="Page navigation">' +
						'<ul class="pagination pagination-sm">' +
							output +
						'</ul>' +
						'<form action="' + response.url + '" method="POST" class="--xhr-form ml-2 d-none d-sm-none d-md-block d-lg-block d-xl-block">' +
							'<div class="input-group">' +
								'<select name="limit" class="form-control form-control-sm">' +
									'<option value="' + response.limit + '"' + (!response.per_page ? ' selected' : '') + '>' + response.limit + '</option>' +
									'<option value="' + (response.limit * 2) + '"' + ((response.limit * 2) == response.per_page ? ' selected' : '') + '>' + (response.limit * 2) + '</option>' +
									'<option value="' + (response.limit * 4) + '"' + ((response.limit * 4) == response.per_page ? ' selected' : '') + '>' + (response.limit * 4) + '</option>' +
									'<option value="' + (response.limit * 8) + '"' + ((response.limit * 8) == response.per_page ? ' selected' : '') + '>' + (response.limit * 8) + '</option>' +
									'<option value="' + (response.limit * 20) + '"' + ((response.limit * 20) == response.per_page ? ' selected' : '') + '>' + (response.limit * 20) + '</option>' +
								'</select>' +
								'<input type="number" name="per_page" class="form-control form-control-sm text-center" value="' + (get_query_string('per_page') ? get_query_string('per_page') : 1) + '" min="1" max="' + response.last_page + '" />' +
								'<div class="input-group-append">' +
									'<button type="submit" class="btn btn-sm btn-primary">' +
										(phrase.go ? phrase.go : 'Go') +
									'</button>' +
								'</div>' +
							'</div>' +
						'</form>' +
					'</nav>' +
				'</div>' +
			'</div>'
		);
	},
	
	form: function(_this, response, modal_id)
	{
		if(modal_id && typeof response.method !== 'undefined')
		{
			return component.templates(response, response.method, modal_id);
		}
		
		if(response && typeof response._token !== 'undefined')
		{
			sessionStorage.setItem('_token', response._token)
		}
		
		if(response)
		{
			/* loop the result */
			var output								= '',
				col									= '',
				column_1							= '',
				column_2							= '',
				column_3							= '',
				column_4							= '',
				merged								= new Array(),
				extra_submit						= '',
				map									= '';
				
			if(response.results.extra_action.submit)
			{
				/* loop, the jQuery is required */
				$.each(response.results.extra_action.submit, function(key, val)
				{
					/* submit button is available */
					extra_submit					+= '<a href="' + go_to(val.url, val.parameter) + '" class="' + (val.class ? val.class : 'btn-dark --xhr') + ' float-right ml-1"' + (val.new_tab ? ' target="_blank"' : null) + '><i class="' + (val.icon ? val.icon : 'mdi mdi-link') + '"></i>' + val.label + '</a>';
				})
			}
			
			$.each(response.results.form_data, function(field, params)
			{
				if($.inArray('coordinate', params.type) !== -1 || $.inArray('point', params.type) !== -1 || $.inArray('polygon', params.type) !== -1 || $.inArray('linestring', params.type) !== -1)
				{
					map								= '<div class="form-group" style="margin-left:-1rem; margin-right:-1rem">' + params.content + '</div>';
					return;
				}
				
				if(typeof response.results.merged_field[field] !== 'undefined')
				{
					var col							= '';
					
					$.each(response.results.merged_field[field], function(key, val)
					{
						if($.inArray(val, merged) !== -1 || typeof response.results.form_data[val] === 'undefined') return;
						
						col							+= 
						'<div class="' + (typeof response.results.field_size[val] !== 'undefined' ? response.results.field_size[val] : 'col') + '">' +
							'<div class="form-group">' +
								'<label class="text-muted d-block mb-0" for="' + val + '_input">' +
									response.results.form_data[val]['label'] +
									(response.results.form_data[val]['tooltip'] ? ' <i class="mdi mdi-information-outline text-primary" data-toggle="tooltip" title="' + response.results.form_data[val]['tooltip'] + '"></i>' : '') +
									(response.results.form_data[val]['required'] ? '<b class="text-danger"> *</b>' : '') +
								'</label>' +
								(response.results.form_data[val]['prepend'] || response.results.form_data[val]['append'] ? '<div class="input-group">' : '') +
									(response.results.form_data[val]['prepend'] ?
									'<div class="input-group-prepend">' +
										'<span class="input-group-text">' +
											response.results.form_data[val]['prepend'] +
										'</span>' +
									'</div>' : '') +
									
									response.results.form_data[val]['content'] +
									
									(response.results.form_data[val]['append'] ?
									'<div class="input-group-append">' +
										'<span class="input-group-text">' +
											response.results.form_data[val]['append'] +
										'</span>' +
									'</div>' : '') +
								(response.results.form_data[val]['prepend'] || response.results.form_data[val]['append'] ? '</div>' : '') +
							'</div>' +
						'</div>';
						
						merged.push(val);
					});
					
					if(4 == params.position)
					{
						if(typeof response.results.set_heading !== 'undefined' && typeof response.results.set_heading[field] !== 'undefined')
						{
							column_4				+= '<h5>' + response.results.set_heading[field] + '</h5>';
						}
						
						column_4					+= '<div class="row">' + col + '</div>';
					}
					else if(3 == params.position)
					{
						if(typeof response.results.set_heading !== 'undefined' && typeof response.results.set_heading[field] !== 'undefined')
						{
							column_3				+= '<h5>' + response.results.set_heading[field] + '</h5>';
						}
						
						column_3					+= '<div class="row">' + col + '</div>';
					}
					else if(2 == params.position)
					{
						if(typeof response.results.set_heading !== 'undefined' && typeof response.results.set_heading[field] !== 'undefined')
						{
							column_2				+= '<h5>' + response.results.set_heading[field] + '</h5>';
						}
						
						column_2					+= '<div class="row">' + col + '</div>';
					}
					else
					{
						if(typeof response.results.set_heading !== 'undefined' && typeof response.results.set_heading[field] !== 'undefined')
						{
							column_1				+= '<h5>' + response.results.set_heading[field] + '</h5>';
						}
						
						column_1					+= '<div class="row">' + col + '</div>';
					}
				}
				else
				{
					if($.inArray(field, merged) !== -1) return;
					
					output							= '<div class="form-group"><label class="text-muted d-block mb-0" for="' + field + '_input">' + params.label + (params.tooltip ? ' <i class="mdi mdi-information-outline text-primary" data-toggle="tooltip" title="' + params.tooltip + '"></i>' : '') + (params.required ? '<b class="text-danger"> *</b>' : '') + '</label>' + (params.prepend || params.append ? '<div class="input-group">' : '') + (params.prepend ? '<div class="input-group-prepend"><span class="input-group-text">' + params.prepend + '</span></div>' : '') + params.content + (params.append ? '<div class="input-group-append"><span class="input-group-text">' + params.append + '</span></div>' : '') + (params.prepend || params.append ? '</div>' : '') + '</div>';
					
					if(4 == params.position)
					{
						if(typeof response.results.set_heading !== 'undefined' && typeof response.results.set_heading[field] !== 'undefined')
						{
							column_4				+= '<h5>' + response.results.set_heading[field] + '</h5>';
						}
						
						column_4					+= output;
					}
					else if(3 == params.position)
					{
						if(typeof response.results.set_heading !== 'undefined' && typeof response.results.set_heading[field] !== 'undefined')
						{
							column_3				+= '<h5>' + response.results.set_heading[field] + '</h5>';
						}
						
						column_3					+= output;
					}
					else if(2 == params.position)
					{
						if(typeof response.results.set_heading !== 'undefined' && typeof response.results.set_heading[field] !== 'undefined')
						{
							column_2				+= '<h5>' + response.results.set_heading[field] + '</h5>';
						}
						
						column_2					+= output;
					}
					else
					{
						if(typeof response.results.set_heading !== 'undefined' && typeof response.results.set_heading[field] !== 'undefined')
						{
							column_1				+= '<h5>' + response.results.set_heading[field] + '</h5>';
						}
						
						column_1					+= output;
					}
				}
			});
			
			if(4 == response.results.column_total)
			{
				modal_size							= 'modal-xl';
				
				output								= 
					'<div class="row">' +
						'<div class="' + (response.results.column_size[0] ? response.results.column_size[0] : (col ? 'col-md-3' : 'col')) + '">' +
							column_1 +
						'</div>' +
						'<div class="' + (response.results.column_size[1] ? response.results.column_size[1] : (col ? 'col-md-3' : 'col')) + '">' +
							column_2 +
						'</div>' +
						'<div class="' + (response.results.column_size[2] ? response.results.column_size[2] : (col ? 'col-md-3' : 'col')) + '">' +
							column_3 +
						'</div>' +
						'<div class="' + (response.results.column_size[3] ? response.results.column_size[3] : (col ? 'col-md-3' : 'col')) + '">' +
							column_4 +
						'</div>' +
					'</div>';
			}
			else if(3 == response.results.column_total)
			{
				modal_size							= 'modal-xl';
				
				output								= 
					'<div class="row">' +
						'<div class="' + (response.results.column_size[0] ? response.results.column_size[0] : (col ? 'col-md-4' : 'col')) + '">' +
							column_1 +
						'</div>' +
						'<div class="' + (response.results.column_size[1] ? response.results.column_size[1] : (col ? 'col-md-4' : 'col')) + '">' +
							column_2 +
						'</div>' +
						'<div class="' + (response.results.column_size[2] ? response.results.column_size[2] : (col ? 'col-md-4' : 'col')) + '">' +
							column_3 +
						'</div>' +
					'</div>';
			}
			else if(2 == response.results.column_total)
			{
				modal_size							= 'modal-lg';
				
				output								= 
					'<div class="row">' +
						'<div class="' + (response.results.column_size[0] ? response.results.column_size[0] : (col ? 'col-md-6' : 'col')) + '">' +
							column_1 +
						'</div>' +
						'<div class="' + (response.results.column_size[1] ? response.results.column_size[1] : (col ? 'col-md-6' : 'col')) + '">' +
							column_2 +
						'</div>' +
					'</div>';
			}
			else
			{
				modal_size							= '';
				
				output								= column_1 + column_2 + column_3 + column_4;
			}
			
			$(config.content_wrapper).html
			(
				'<div class="container-fluid ' + (map ? 'pb-3' : 'pt-3 pb-3') + '">' +
					'<form action="' + response.current_page + '" method="POST" class="--validate-form" enctype="multipart/form-data">' +
						(map ? map : '<br />') +
						'<div class="row">' +
							'<div class="col-md-' + (1 == response.results.column_total ? 6 : (2 == response.results.column_total ? 10 : 10)) + '">' +
								output +
								'<div class="--validation-callback mb-0"></div>' +
							'</div>' +
						'</div>' +
						'<div class="opt-btn-overlap-fix"></div><!-- fix the overlap -->' +
						'<div class="row opt-btn">' +
							'<div class="col-md-' + (1 == response.results.column_total ? 6 : (2 == response.results.column_total ? 10 : 10)) + '">' +
								'<a href="' + go_to('../', response.results.query_string) + '" class="btn btn-link --xhr">' +
									'<i class="mdi mdi-arrow-left"></i> ' +
									(phrase.back ? phrase.back : 'Back') +
								'</a>' +
								extra_submit +
								'<button type="submit" class="btn btn-primary float-right">' +
									'<i class="mdi mdi-check"></i> ' +
									(phrase.submit ? phrase.submit : 'Submit') +
									' <em class="text-sm">(ctrl+s)</em>' +
								'</button>' +
							'</div>' +
						'</div>' +
					'</form>' +
				'</div>'
			),
			
			_reactivate();
			
			return;
		}
		else if(sessionStorage.getItem('form'))
		{
			this.load_modal(JSON.parse(sessionStorage.getItem('form')), 'form')
		}
		else
		{
			/* fire modal to show */
			$(
				'<div class="modal" id="form-modal" role="dialog" aria-labelledby="form-modal-title" aria-hidden="true">' +
					'<div class="modal-dialog modal-dialog-centered" role="document">' +
						'<form action="' + _this.attr('href') + '" method="POST" class="modal-content" enctype="multipart/form-data">' +
							'<div class="modal-header">' +
								'<h5 class="modal-title" id="form-modal-title">' +
									'<i class="mdi mdi-loading mdi-spin"></i> ' +
									'<span class="modal-title-text">' +
										(phrase.loading ? phrase.loading : 'Loading...') +
									'</span>' +
								'</h5>' +
								'<button type="button" class="close" data-dismiss="modal" aria-label="' + (phrase.close ? phrase.close : 'Close') + '">' +
									'<span aria-hidden="true"><i class="mdi mdi-window-close"></i></span>' +
								'</button>' +
							'</div>' +
							'<div class="modal-body">' +
								'<div class="d-flex justify-content-center">' +
									'<div class="spinner-border text-primary" role="status">' +
										'<span class="sr-only">' + (phrase.loading ? phrase.loading : 'Loading...') + '</span>' +
									'</div>' +
								'</div>' +								
							'</div>' +
							'<div class="modal-footer">' +
								'<button type="button" class="btn btn-light mr-1" data-dismiss="modal">' +
									(phrase.close ? phrase.close : 'Close') +
									' <em class="text-sm">(esc)</em>' +
								'</button>' +
								'<button type="submit" class="btn btn-primary disabled" disabled>' +
									'<i class="mdi mdi-check"></i> ' +
									(phrase.submit ? phrase.submit : 'Submit') +
									' <em class="text-sm">(ctrl+s)</em>' +
								'</button>' +
							'</div>' +
						'</form>' +
					'</div>' +
				'</div>'
			)
			.appendTo('body')
			.modal({backdrop:'static', keyboard: false})
		}
		
		$.ajax
		({
			method: 'POST',
			url: _this.attr('href'),
			data:
			{
				prefer: 'modal'
			},
			beforeSend: function()
			{
			},
			complete: function(progress)
			{
			},
			statusCode:
			{
				301: function(response, status, error)
				{
					if(typeof response.responseJSON !== 'undefined')
					{
						response					= response.responseJSON;
					}
					
					if(typeof response.redirect !== 'undefined' && response.redirect)
					{
						return window.location.replace(response.target);
					}
					
					$('.modal').modal('hide');
					
					return throw_exception(response.status, (typeof response.message !== 'undefined' ? response.message : error));
				},
				403: function(response, status, error)
				{
					if(typeof response.responseJSON !== 'undefined')
					{
						response					= response.responseJSON;
					}
					
					if(typeof response.redirect !== 'undefined' && response.redirect)
					{
						return window.location.replace(response.target);
					}
					
					$('.modal').modal('hide');
					
					return throw_exception(response.status, (typeof response.message !== 'undefined' ? response.message : error));
				},
				404: function(response, status, error)
				{
					if(typeof response.responseJSON !== 'undefined')
					{
						response					= response.responseJSON;
					}
					
					if(typeof response.redirect !== 'undefined' && response.redirect)
					{
						return window.location.replace(response.target);
					}
					
					$('.modal').modal('hide');
					
					return throw_exception(response.status, (typeof response.message !== 'undefined' ? response.message : error));
				},
				500: function(response, status, error)
				{
					$('#form-modal').find('.modal-body').addClass('bg-dark text-center p-3').html('<p><code>' + response + '</code></p><p class="mt-5"><a href="#" class="btn btn-outline-light btn-sm --report-to-admin">' + (phrase.report_to_admin ? phrase.report_to_admin : 'Report to Admin') + '</a></p>');
					
					return throw_exception(500, (typeof response.message !== 'undefined' ? response.message : error));
				}
			}
		})
		.done(function(response)
		{
			component.templates(response, response.method, '#form-modal');
		})
	},
	
	/**
	 * CRUD: read modal
	 */
	view: function(_this, response, modal_id)
	{
		if(modal_id && typeof response.method !== 'undefined')
		{
			return component.templates(response, response.method, modal_id);
		}
		
		if(response)
		{
			var output								= '',
				col									= '',
				column_1							= '',
				column_2							= '',
				column_3							= '',
				column_4							= '',
				merged								= new Array(),
				map									= '';
			
			$.each(response.results.form_data, function(field, params)
			{
				if($.inArray('coordinate', params.type) !== -1 || $.inArray('point', params.type) !== -1 || $.inArray('polygon', params.type) !== -1 || $.inArray('linestring', params.type) !== -1)
				{
					map								= '<div class="form-group" style="margin-left:-1rem; margin-right:-1rem">' + params.content + '</div>';
					
					return;
				}
				if(typeof response.results.merged_field[field] !== 'undefined')
				{
					var col							= '';
					
					$.each(response.results.merged_field[field], function(key, val)
					{
						if($.inArray(val, merged) !== -1 || typeof response.results.form_data[val] === 'undefined') return;
						
						col							+= 
						'<div class="' + (typeof response.results.field_size[val] !== 'undefined' ? response.results.field_size[val] : 'col') + '">' +
							'<div class="form-group">' +
								'<label class="text-muted d-block mb-0" for="' + val + '_label">' +
									response.results.form_data[val]['label'] +
								'</label>' +
								'<p id="' + val + '_label" class="text-break-word">' +
									response.results.form_data[val]['content'] +
								'</p>' +
							'</div>' +
						'</div>';
						
						merged.push(val)
					});
					
					if(4 == params.position)
					{
						if(typeof response.results.set_heading !== 'undefined' && typeof response.results.set_heading[field] !== 'undefined')
						{
							column_4				+= '<h5>' + response.results.set_heading[field] + '</h5>';
						}
						
						column_4					+= '<div class="row">' + col + '</div>';
					}
					else if(3 == params.position)
					{
						if(typeof response.results.set_heading !== 'undefined' && typeof response.results.set_heading[field] !== 'undefined')
						{
							column_3				+= '<h5>' + response.results.set_heading[field] + '</h5>';
						}
						
						column_3					+= '<div class="row">' + col + '</div>';
					}
					else if(2 == params.position)
					{
						if(typeof response.results.set_heading !== 'undefined' && typeof response.results.set_heading[field] !== 'undefined')
						{
							column_2				+= '<h5>' + response.results.set_heading[field] + '</h5>';
						}
						
						column_2					+= '<div class="row">' + col + '</div>';
					}
					else
					{
						if(typeof response.results.set_heading !== 'undefined' && typeof response.results.set_heading[field] !== 'undefined')
						{
							column_1				+= '<h5>' + response.results.set_heading[field] + '</h5>';
						}
						
						column_1					+= '<div class="row">' + col + '</div>';
					}
				}
				else
				{
					if($.inArray(field, merged) !== -1) return;
					
					output							= '<div class="form-group"><label class="text-muted d-block mb-0" for="' + field + '_label">' + params.label + '</label><p id="' + field + '_label" class="text-break-word">' + params.content + '</p></div>';
					
					if(4 == params.position)
					{
						if(typeof response.results.set_heading !== 'undefined' && typeof response.results.set_heading[field] !== 'undefined')
						{
							column_4				+= '<h5>' + response.results.set_heading[field] + '</h5>';
						}
						
						column_4					+= output;
					}
					else if(3 == params.position)
					{
						if(typeof response.results.set_heading !== 'undefined' && typeof response.results.set_heading[field] !== 'undefined')
						{
							column_3				+= '<h5>' + response.results.set_heading[field] + '</h5>';
						}
						
						column_3					+= output;
					}
					else if(2 == params.position)
					{
						if(typeof response.results.set_heading !== 'undefined' && typeof response.results.set_heading[field] !== 'undefined')
						{
							column_2				+= '<h5>' + response.results.set_heading[field] + '</h5>';
						}
						
						column_2					+= output;
					}
					else
					{
						if(typeof response.results.set_heading !== 'undefined' && typeof response.results.set_heading[field] !== 'undefined')
						{
							column_1				+= '<h5>' + response.results.set_heading[field] + '</h5>';
						}
						
						column_1					+= output;
					}
				}
			});
			
			if(4 == response.results.column_total)
			{
				modal_size							= 'modal-xl';
				
				output								= 
					'<div class="row">' +
						'<div class="column ' + (response.results.column_size[0] ? response.results.column_size[0] : (col ? 'col-md-3' : 'col')) + '">' +
							column_1 +
						'</div>' +
						'<div class="column ' + (response.results.column_size[1] ? response.results.column_size[1] : (col ? 'col-md-3' : 'col')) + '">' +
							column_2 +
						'</div>' +
						'<div class="column ' + (response.results.column_size[2] ? response.results.column_size[2] : (col ? 'col-md-3' : 'col')) + '">' +
							column_3 +
						'</div>' +
						'<div class="column ' + (response.results.column_size[3] ? response.results.column_size[3] : (col ? 'col-md-3' : 'col')) + '">' +
							column_4 +
						'</div>' +
					'</div>';
			}
			else if(3 == response.results.column_total)
			{
				modal_size							= 'modal-xl';
				
				output								= 
					'<div class="row">' +
						'<div class="column ' + (response.results.column_size[0] ? response.results.column_size[0] : (col ? 'col-md-4' : 'col')) + '">' +
							column_1 +
						'</div>' +
						'<div class="column ' + (response.results.column_size[1] ? response.results.column_size[1] : (col ? 'col-md-4' : 'col')) + '">' +
							column_2 +
						'</div>' +
						'<div class="column ' + (response.results.column_size[2] ? response.results.column_size[2] : (col ? 'col-md-4' : 'col')) + '">' +
							column_3 +
						'</div>' +
					'</div>';
			}
			else if(2 == response.results.column_total)
			{
				modal_size							= 'modal-lg';
				
				output								= 
					'<div class="row">' +
						'<div class="column ' + (response.results.column_size[0] ? response.results.column_size[0] : (col ? 'col-md-6' : 'col')) + '">' +
							column_1 +
						'</div>' +
						'<div class="column ' + (response.results.column_size[1] ? response.results.column_size[1] : (col ? 'col-md-6' : 'col')) + '">' +
							column_2 +
						'</div>' +
					'</div>';
			}
			else
			{
				modal_size							= '';
				
				output								= column_1 + column_2 + column_3 + column_4;
			}
			
			$(config.content_wrapper).html
			(
				'<div class="container-fluid ' + (map ? 'pb-3' : 'pt-3 pb-3') + '">' +
					(map ? map : '<br />') +
					'<div class="row">' +
						'<div class="column col-md-' + (1 == response.results.column_total ? 6 : (2 == response.results.column_total ? 10 : 10)) + '">' +
							output +
						'</div>' +
					'</div>' +
					'<div class="opt-btn-overlap-fix"></div><!-- fix the overlap -->' +
					'<div class="row opt-btn">' +
						'<div class="col-md-' + (1 == response.results.column_total ? 6 : (2 == response.results.column_total ? 10 : 10)) + ' col-md-offset-1">' +
							'<a href="' + go_to('../', response.results.query_string) + '" class="btn btn-link --xhr">' +
								'<i class="mdi mdi-arrow-left"></i> ' +
								(phrase.back ? phrase.back : 'Back') +
							'</a>' +
							'<a href="' + response.current_page.replace('/read?', '/update?') + '" class="btn btn-primary float-right --open-modal-form">' +
								'<i class="mdi mdi-square-edit-outline"></i> ' +
								(phrase.update ? phrase.update : 'Update') +
							'</a>' +
						'</div>' +
					'</div>' +
				'</div>'
			),
			
			_reactivate();
			
			return;
		}
		else if(sessionStorage.getItem('read'))
		{
			this.load_modal(JSON.parse(sessionStorage.getItem('read')), 'read');
		}
		else
		{
			/* fire modal to show */
			$(
				'<div class="modal" id="read-modal" role="dialog" aria-labelledby="read-modal-title" aria-hidden="true">' +
					'<div class="modal-dialog modal-dialog-centered" role="document">' +
						'<div class="modal-content">' +
							'<div class="modal-header">' +
								'<h5 class="modal-title" id="read-modal-title">' +
									'<i class="mdi mdi-information-outline"></i> ' +
									'<span class="modal-title-text">' +
										(phrase.showing_data ? phrase.showing_data : 'Showing Data') +
									'</span>' +
								'</h5>' + 
								'<button type="button" class="close" data-dismiss="modal" aria-label="' + (phrase.close ? phrase.close : 'Close') + '">' +
									'<span aria-hidden="true"><i class="mdi mdi-window-close"></i></span>' +
								'</button>' +
							'</div>' +
							'<div class="modal-body">' +
								'<div class="d-flex justify-content-center">' +
									'<div class="spinner-border text-primary" role="status">' +
										'<span class="sr-only">' + (phrase.loading ? phrase.loading : 'Loading...') + '</span>' +
									'</div>' +
								'</div>' +
							'</div>' +
							'<div class="modal-footer">' +
								'<button type="button" class="btn btn-light" data-dismiss="modal">' +
									(phrase.close ? phrase.close : 'Close') +
									' <em class="text-sm">(esc)</em>' +
								'</button>' +
							'</div>' +
						'</div>' +
					'</div>' +
				'</div>'
			)
			.appendTo('body')
			.modal({backdrop:'static', keyboard: false})
		}
		
		/* generate the response data */
		$.ajax
		({
			method: 'POST',
			data:
			{
				prefer: 'modal'
			},
			url: _this.attr('href'),
			statusCode:
			{
				301: function(response, status, error)
				{
					if(typeof response.responseJSON !== 'undefined')
					{
						response					= response.responseJSON;
					}
					
					if(typeof response.redirect !== 'undefined' && response.redirect)
					{
						return window.location.replace(response.target);
					}
					
					$('.modal').modal('hide');
					
					return throw_exception(response.status, (typeof response.message !== 'undefined' ? response.message : error));
				},
				403: function(response, status, error)
				{
					if(typeof response.responseJSON !== 'undefined')
					{
						response					= response.responseJSON;
					}
					
					if(typeof response.redirect !== 'undefined' && response.redirect)
					{
						return window.location.replace(response.target);
					}
					
					$('.modal').modal('hide');
					
					return throw_exception(response.status, (typeof response.message !== 'undefined' ? response.message : error));
				},
				404: function(response, status, error)
				{
					if(typeof response.responseJSON !== 'undefined')
					{
						response					= response.responseJSON;
					}
					
					if(typeof response.redirect !== 'undefined' && response.redirect)
					{
						return window.location.replace(response.target);
					}
					
					$('.modal').modal('hide');
					
					return throw_exception(response.status, (typeof response.message !== 'undefined' ? response.message : error));
				},
				500: function(response, status, error)
				{
					/* throw warning exception */
					$('#read-modal').find('.modal-body').addClass('bg-dark text-center p-3').html('<p><code>' + response + '</code></p><p class="mt-5"><a href="#" class="btn btn-outline-light btn-sm --report-to-admin">' + (phrase.report_to_admin ? phrase.report_to_admin : 'Report to Admin') + '</a></p>');
					
					return throw_exception(500, (typeof response.message !== 'undefined' ? response.message : error));
				}
			}
		})
		.done(function(response)
		{
			component.templates(response, response.method, '#read-modal')
		})
	},
	
	/**
	 * CRUD: delete confirm
	 */
	delete: function(_this)
	{
		/* delete button. it will open the bootstrap 4 modal */
		$(
			'<div class="modal" id="delete-modal" role="dialog" aria-labelledby="delete-modal-title" aria-hidden="true">' +
				'<div class="modal-dialog modal-dialog-centered" role="document" style="max-width:400px">' +
					'<div class="modal-content border">' +
						'<div class="modal-header">' +
							'<h5 class="modal-title" id="delete-modal-title">' +
								'<i class="mdi mdi-trash-can-outline"></i> ' +
								'<span class="modal-title-text">' +
									(phrase.delete_data ? phrase.delete_data : 'Delete Data') +
								'</span>' +
							'</h5>' +
							'<button type="button" class="close" data-dismiss="modal" aria-label="' + (phrase.close ? phrase.close : 'Close') + '">' +
								'<span aria-hidden="true"><i class="mdi mdi-window-close"></i></span>' +
							'</button>' +
						'</div>' +
						'<div class="modal-body text-center">' +
							(_this.attr('data-bulk-delete') ? $('input[name^=bulk_delete]:checked').length + ' ' + (phrase.data_will_be_deleted ? phrase.data_will_be_deleted : 'Data will be deleted') : (phrase.are_you_sure_want_to_delete_this_data ? phrase.are_you_sure_want_to_delete_this_data : 'Are you sure want to delete this data?')) +
						'</div>' +
						'<div class="modal-footer" style="display:block">' +
							'<div class="row">' +
								'<div class="col-6">' +
									'<button type="button" class="btn btn-light btn-block" data-dismiss="modal">' +
										(phrase.cancel ? phrase.cancel : 'Cancel') +
									'</button>' +
								'</div>' +
								'<div class="col-6">' +
									'<a href="' + _this.attr('href') + '" class="btn btn-danger btn-block --delete-anyway"' + (_this.attr('data-bulk-delete') ? ' data-bulk-delete="true"' : '') + '>' +
										'<i class="mdi mdi-check"></i> ' +
										(phrase.delete ? phrase.delete : 'Delete') +
									'</a>' +
								'</div>' +
							'</div>' +
						'</div>' +
					'</div>' +
				'</div>' +
			'</div>'
		)
		.appendTo('body')
		.modal({keyboard: false})
	},
	
	/**
	 * CRUD: open modal
	 */
	load_modal: function(response, method)
	{
		if(response && typeof response.results !== 'undefined' && typeof response.results.form_data !== 'undefined')
		{
			/* loop the result */
			var output								= '',
				column_1							= '',
				column_2							= '',
				column_3							= '',
				column_4							= '',
				merged								= new Array(),
				extra_submit						= '',
				map									= '';
				
			if(typeof response.results.extra_action !== 'undefined' && typeof response.results.extra_action.submit !== 'undefined')
			{
				/* loop, the jQuery is required */
				$.each(response.results.extra_action.submit, function(key, val)
				{
					/* submit button is available */
					extra_submit					+= '<a href="' + go_to(val.url, val.parameter) + '" class="' + (val.class ? val.class : 'btn-dark --xhr') + '"' + (val.new_tab ? ' target="_blank"' : null) + '><i class="' + (val.icon ? val.icon : 'mdi mdi-link') + '"></i>' + val.label + '</a>';
				})
			}
			
			$.each(response.results.form_data, function(field, params)
			{
				$('#' + field + '_input, #' + field + '_label').remove();
				
				if($.inArray('coordinate', params.type) !== -1 || $.inArray('point', params.type) !== -1 || $.inArray('polygon', params.type) !== -1 || $.inArray('linestring', params.type) !== -1)
				{
					map								= '<div class="form-group" style="margin-left:-1rem; margin-right:-1rem"><div id="' + field + ('form' == method ? '_input' : '_label') + '"></div></div>';
					
					return;
				}
				
				if(typeof response.results.merged_field[field] !== 'undefined')
				{
					var col							= '';
					
					$.each(response.results.merged_field[field], function(key, val)
					{
						if($.inArray(val, merged) !== -1 || typeof response.results.form_data[val] === 'undefined') return;
						
						col							+= 
						'<div class="' + (typeof response.results.field_size[val] !== 'undefined' ? response.results.field_size[val] : 'col') + '">' +
							'<div class="form-group">' +
								'<label class="text-muted d-block mb-0" for="' + val + ('form' == method ? '_input' : '_label') + '">' +
									response.results.form_data[val]['label'] +
									('form' == method && response.results.form_data[val]['tooltip'] ? ' <i class="mdi mdi-information-outline text-primary" data-toggle="tooltip" title="' + response.results.form_data[val]['tooltip'] + '"></i>' : '') +
									('form' == method && response.results.form_data[val]['required'] ? '<b class="text-danger"> *</b>' : '') +
								'</label>' +
								('form' == method ? (response.results.form_data[val]['prepend'] || response.results.form_data[val]['append'] ? '<div class="input-group">' : '') + (response.results.form_data[val]['prepend'] ? '<div class="input-group-prepend"><span class="input-group-text">' + response.results.form_data[val]['prepend'] + '</span></div>' : '') + '<input type="text" class="form-control disabled" id="' + val + '_input" placeholder="' + (phrase.loading ? phrase.loading : 'Loading...') + '" disabled />' + (response.results.form_data[val]['append'] ? '<div class="input-group-append"><span class="input-group-text">' + response.results.form_data[val]['append'] + '</span></div>' : '') + (response.results.form_data[val]['prepend'] || response.results.form_data[val]['append'] ? '</div>' : '') : '<p id="' + val + '_label" class="text-break-word">' + (phrase.loading ? phrase.loading : 'Loading...') + '</p>') +
							'</div>' +
						'</div>';
						
						merged.push(val)
					});
					
					if(4 == params.position)
					{
						column_4					+= '<div class="row">' + col + '</div>';
					}
					else if(3 == params.position)
					{
						column_3					+= '<div class="row">' + col + '</div>';
					}
					else if(2 == params.position)
					{
						column_2					+= '<div class="row">' + col + '</div>';
					}
					else
					{
						column_1					+= '<div class="row">' + col + '</div>';
					}
				}
				else
				{
					if($.inArray(field, merged) !== -1) return;
					
					output							= '<div class="form-group"><label class="text-muted d-block mb-0" for="' + field + ('form' == method ? '_input' : '_label') + '">' + params.label + ('form' == method && params.tooltip ? ' <i class="mdi mdi-information-outline text-primary" data-toggle="tooltip" title="' + params.tooltip + '"></i>' : '') + ('form' == method && params.required ? '<b class="text-danger"> *</b>' : '') + '</label>' + ('form' == method ? (params.prepend || params.append ? '<div class="input-group">' : '') + (params.prepend ? '<div class="input-group-prepend"><span class="input-group-text">' + params.prepend + '</span></div>' : '') + '<input type="text" class="form-control disabled" id="' + field + '_input" placeholder="' + (phrase.loading ? phrase.loading : 'Loading...') + '" disabled />' + (params.append ? '<div class="input-group-append"><span class="input-group-text">' + params.append + '</span></div>' : '') + (params.prepend || params.append ? '</div>' : '') : '<p id="' + field + '_label" class="text-break-word">' + (phrase.loading ? phrase.loading : 'Loading...') + '</p>') + '</div>';
					
					if(4 == params.position)
					{
						column_4					+= output;
					}
					else if(3 == params.position)
					{
						column_3					+= output;
					}
					else if(2 == params.position)
					{
						column_2					+= output;
					}
					else
					{
						column_1					+= output;
					}
				}
			});
			
			if(4 == response.results.column_total)
			{
				modal_size							= 'modal-xl';
				
				output								= 
					'<div class="row">' +
						'<div class="column ' + (response.results.column_size[0] ? response.results.column_size[0] : 'col') + '">' +
							column_1 +
						'</div>' +
						'<div class="column ' + (response.results.column_size[1] ? response.results.column_size[1] : 'col') + '">' +
							column_2 +
						'</div>' +
						'<div class="column ' + (response.results.column_size[2] ? response.results.column_size[2] : 'col') + '">' +
							column_3 +
						'</div>' +
						'<div class="column ' + (response.results.column_size[3] ? response.results.column_size[3] : 'col') + '">' +
							column_4 +
						'</div>' +
					'</div>';
			}
			else if(3 == response.results.column_total)
			{
				modal_size							= 'modal-xl';
				
				output								= 
					'<div class="row">' +
						'<div class="column ' + (response.results.column_size[0] ? response.results.column_size[0] : 'col') + '">' +
							column_1 +
						'</div>' +
						'<div class="column ' + (response.results.column_size[1] ? response.results.column_size[1] : 'col') + '">' +
							column_2 +
						'</div>' +
						'<div class="column ' + (response.results.column_size[2] ? response.results.column_size[2] : 'col') + '">' +
							column_3 +
						'</div>' +
					'</div>';
			}
			else if(2 == response.results.column_total)
			{
				modal_size							= 'modal-lg';
				
				output								= 
					'<div class="row">' +
						'<div class="column ' + (response.results.column_size[0] ? response.results.column_size[0] : 'col') + '">' +
							column_1 +
						'</div>' +
						'<div class="column ' + (response.results.column_size[1] ? response.results.column_size[1] : 'col') + '">' +
							column_2 +
						'</div>' +
					'</div>';
			}
			else
			{
				modal_size							= '';
				
				output								= '<div class="column">' + column_1 + column_2 + column_3 + column_4 + '</div>';
			}
			
			$(
				'<div class="modal" id="' + ('form' == method ? 'form' : 'read') + '-modal" role="dialog" aria-labelledby="' + ('form' == method ? 'form' : 'read') + '-modal-title" aria-hidden="true">' +
					'<div class="modal-dialog modal-dialog-centered' + (response.meta.modal_size ? ' ' + response.meta.modal_size : (modal_size ? ' ' + modal_size : '')) + '" role="document">' +
						('form' == method ? '<form action="#" method="POST" class="modal-content" enctype="multipart/form-data">' : '<div class="modal-content">') +
							'<div class="modal-header">' +
								'<h5 class="modal-title" id="' + ('form' == method ? 'form' : 'read') + '-modal-title">' +
									'<i class="' + response.meta.icon + '"></i> ' +
									'<span class="modal-title-text">' +
										response.meta.title +
									'</span>' +
								'</h5>' + 
								'<button type="button" class="close" data-dismiss="modal" aria-label="' + (phrase.close ? phrase.close : 'Close') + '">' +
									'<span aria-hidden="true"><i class="mdi mdi-window-close"></i></span>' +
								'</button>' +
							'</div>' +
							'<div class="modal-body' + (map ? ' pt-0' : '') + '">' +
								
								(map ? map : '<br />') +
								
								output +
								
								'<div class="--validation-callback mb-0"></div>' +
								
							'</div>' +
							'<div class="modal-footer">' +
								'<button type="button" class="btn btn-light mr-1' + (extra_submit ? ' mr-auto' : '') + '" data-dismiss="modal">' +
									(phrase.close ? phrase.close : 'Close') +
									' <em class="text-sm">(esc)</em>' +
								'</button>' +
								('form' == method ?
								extra_submit +
								'<button type="submit" class="btn btn-primary disabled" disabled>' +
									'<i class="mdi mdi-check"></i> ' +
									(phrase.submit ? phrase.submit : 'Submit') +
									' <em class="text-sm">(ctrl+s)</em>' +
								'</button>' : '') +
							'</div>' +
						'</div>' +
					'</div>' +
				'</div>'
			)
			.appendTo('body')
			.modal({backdrop:'static', keyboard: false})
		}
	},
	
	/**
	 * Load content inside modal
	 */
	modal: function(_this)
	{
		var identifier								= Date.now();
		
		/* it will open the bootstrap 4 modal */
		$(
			'<div class="modal" id="dynamic-modal-' + identifier +'" role="dialog" aria-labelledby="dynamic-modal-title" aria-hidden="true">' +
				'<div class="modal-dialog modal-dialog-centered" role="document">' +
					'<div class="modal-content' + ($('.modal').length ? ' border shadow' : '') + '">' +
						'<div class="modal-header">' +
							'<h5 class="modal-title" id="dynamic-modal-title">' +
								'<i class="mdi mdi-loading mdi-spin"></i> ' +
								'<span class="modal-title-text">' +
									(phrase.loading ? phrase.loading : 'Loading') +
								'</span>' +
							'</h5>' +
							'<button type="button" class="close" data-dismiss="modal" aria-label="' + (phrase.close ? phrase.close : 'Close') + '">' +
								'<span aria-hidden="true"><i class="mdi mdi-window-close"></i></span>' +
							'</button>' +
						'</div>' +
						'<div class="modal-body p-0">' +
							'<div class="d-flex justify-content-center pt-5 pb-5">' +
								'<div class="spinner-border" role="status">' +
									'<span class="sr-only">' + (phrase.loading ? phrase.loading : 'Loading...') + '</span>' +
								'</div>' +
							'</div>' +
						'</div>' +
					'</div>' +
				'</div>' +
			'</div>'
		)
		.appendTo('body')
		.modal({backdrop:'static', keyboard: false}),
		
		$.ajax
		({
			url: _this.attr('href'),
			context: this,
			method: 'POST',
			data:
			{
				prefer: 'modal'
			},
			statusCode:
			{
				301: function(response, status, error)
				{
					if(typeof response.responseJSON !== 'undefined')
					{
						response					= response.responseJSON;
					}
					
					if(response.redirect)
					{
						return window.location.replace(response.target);
					}
					
					$('.modal').modal('hide');
					
					return throw_exception(response.status, (typeof response.message !== 'undefined' ? response.message : error));
				},
				403: function(response, status, error)
				{
					if(typeof response.responseJSON !== 'undefined')
					{
						response					= response.responseJSON;
					}
					
					if(response.redirect)
					{
						return window.location.replace(response.target);
					}
					
					$('.modal').modal('hide');
					
					return throw_exception(response.status, (typeof response.message !== 'undefined' ? response.message : error));
				},
				404: function(response, status, error)
				{
					if(typeof response.responseJSON !== 'undefined')
					{
						response					= response.responseJSON;
					}
					
					if(response.redirect)
					{
						return window.location.replace(response.target);
					}
					
					$('.modal').modal('hide');
					
					return throw_exception(response.status, (typeof response.message !== 'undefined' ? response.message : error));
				}
			}
		})
		.done(function(response)
		{
			if(response && typeof response._token !== 'undefined')
			{
				sessionStorage.setItem('_token', response._token)
			}
			
			if(response)
			{
				if(typeof response.html !== 'undefined')
				{
					$('#dynamic-modal-' + identifier).find('.modal-body').html(response.html),
					(response && typeof response.meta !== 'undefined' && typeof response.meta.modal_size !== 'undefined' ? $('.modal-dialog').addClass(response.meta.modal_size) : null),
					
					(!_this.hasClass('--prevent-remove') && !_this.hasClass('--prevent-reactivate') ? _reactivate() : null)
				}
				else
				{
					sessionStorage.removeItem('read'),
					sessionStorage.removeItem('create'),
					sessionStorage.removeItem('update');
					
					if($.inArray(response.method, ['read']) !== -1)
					{
						$('#dynamic-modal-' + identifier).find('.modal-content').append
						(
							'<div class="modal-footer">' +
								'<button type="button" class="btn btn-light" data-dismiss="modal">' +
									(phrase.close ? phrase.close : 'Close') +
									' <em class="text-sm">(esc)</em>' +
								'</button>' +
							'</div>'
						);
						
						this.view(_this, response, '#dynamic-modal-' + identifier)
					}
					else if($.inArray(response.method, ['create', 'update']) !== -1)
					{
						$('#dynamic-modal-' + identifier).find('.modal-content').replaceWith('<form action="' + response.current_url + '" method="POST" class="modal-content" enctype="multipart/form-data">' + $('#dynamic-modal-' + identifier).find('.modal-content').html() + '</form>'),
						$('#dynamic-modal-' + identifier).find('.modal-content').append
						(
							'<div class="modal-footer">' +
								'<button type="button" class="btn btn-light mr-1" data-dismiss="modal">' +
									(phrase.close ? phrase.close : 'Close') +
									' <em class="text-sm">(esc)</em>' +
								'</button>' +
								'<button type="submit" class="btn btn-primary disabled" disabled>' +
									'<i class="mdi mdi-check"></i> ' +
									(phrase.submit ? phrase.submit : 'Submit') +
									' <em class="text-sm">(ctrl+s)</em>' +
								'</button>' +
							'</div>'
						);
						
						this.form(_this, response, '#dynamic-modal-' + identifier)
					}
				}
			}
			else
			{
				$('#dynamic-modal-' + identifier).find('.modal-body').html
				(
					'<div class="container-fluid">' +
						'<div class="row bg-dark full-height">' +
							'<div class="col-12">' +
								'<div class="pt-3 pb-3 text-success text-monospace">' +
									'<p class="mb-0">' +
										'[info@localhost ~]# aksara -tell readonly' +
									'</p>' +
									'<p class="mb-0 text-danger">' +
										(phrase.no_response_could_be_loaded ? phrase.no_response_could_be_loaded : 'No response could be loaded') +
										'<br />' +
										(phrase.make_sure_to_check_the_following_mistake ? phrase.make_sure_to_check_the_following_mistake : 'Make sure to check the following mistake') + ':' +
										'<ol class="text-danger">' +
											'<li>' +
												(phrase.module_structure ? phrase.module_structure : 'Module structure') + ',' +
											'</li>' +
											'<li>' +
												(phrase.incorrect_view_path ? phrase.incorrect_view_path : 'Incorrect view path') + ',' +
											'</li>' +
											'<li>' +
												(phrase.database_table_existence ? phrase.database_table_existence : 'Database table existence') + ',' +
											'</li>' +
											'<li>' +
												(phrase.something_caused_by_typo ? phrase.something_caused_by_typo : 'Something caused by typo') + '.' +
											'</li>' +
										'</ol>' +
									'</p>' +
									'<p class="mb-0">' +
										'[info@localhost ~]# <blink>_</blink>' +
									'</p>' +
								'</div>' +
							'</div>' +
						'</div>' +
					'</div>'
				)
			}
			
			$('#dynamic-modal-' + identifier).find('.modal-title').find('.mdi').removeClass('mdi mdi-loading mdi-spin').addClass((response && typeof response.meta !== 'undefined' && typeof response.meta.icon !== 'undefined' ? response.meta.icon : 'mdi mdi-alert-outline')),
			$('#dynamic-modal-' + identifier).find('.modal-title').find('.modal-title-text').text((response && typeof response.meta !== 'undefined' && typeof response.meta.title !== 'undefined' ? response.meta.title : (phrase.untitled ? phrase.untitled : 'Title was not set')))
		})
	},
	
	/**
	 * CRUD: option menu that visible to mobile browser
	 */
	option: function(_this)
	{
		var extra_opt								= '';
		
		if(_this.attr('data-additional-option'))
		{
			var opt									= JSON.parse(_this.attr('data-additional-option'));
			
			$.each(opt, function(key, val)
			{
				extra_opt							+= '<a href="' + val['url'] + '" class="list-group-item list-group-item-action border-left-0 border-right-0 ' + (val['class'] ? val['class'] : '--xhr') + '"' + (val['new_tab'] ? ' target="_blank"' : null) + '><i class="' + (val['icon'] ? val['icon'] : 'mdi mdi-link') + '"></i> ' + val['label'] + '</a>';
			})
		}
		
		/* it will open the option modal to control clicked item */
		$(
			'<div class="modal" id="option-modal" role="dialog" aria-labelledby="option-modal-title" aria-hidden="true">' +
				'<div class="modal-dialog modal-dialog-centered modal-sm" role="document">' +
					'<div class="modal-content">' +
						'<div class="modal-header">' +
							'<h5 class="modal-title" id="option-modal-title">' +
								'<i class="mdi mdi-cogs"></i> ' +
								'<span class="modal-title-text">' +
									(phrase.options ? phrase.options : 'Options') +
								'</span>' +
							'</h5>' +
						'</div>' +
						'<div class="modal-body pr-0 pl-0">' +
							'<div class="list-group list-group-flush">' +
								
								extra_opt +
								
							'</div>' +
						'</div>' +
					'</div>' +
				'</div>' +
			'</div>'
		)
		.appendTo('body')
		.modal({keyboard: false})
	},
	
	/**
	 * breadcrumb
	 */
	breadcrumb: function(response)
	{
		if(!response) return;
		
		var content									= '';
		
		$.each(response, function(key, val)
		{
			content									+= '<li class="breadcrumb-item"><a href="' + val.url + '" class="--xhr">' + (val.icon ? '<i class="' + val.icon + '"></i> ' : ' ') + val.label + '</a></li>';
		}),
		
		$('.breadcrumb').html('').html(content)
	},
	
	/**
	 * templates
	 */
	templates: function(response, method, modal_id)
	{
		if($.inArray(method, ['read']) !== -1)
		{
			if(sessionStorage.getItem('read'))
			{
				/* loop response */
				$.each(response.results.form_data, function(key, val)
				{
					$('#' + key + '_label').replaceWith(val.content)
				}),
				
				/* looping is done. now show in the element */
				_reactivate()
			}
			else
			{
				/* loop the result */
				var output							= '',
					col								= '',
					column_1						= '',
					column_2						= '',
					column_3						= '',
					column_4						= '',
					merged							= new Array(),
					map								= '';
				
				$.each(response.results.form_data, function(field, params)
				{
					if($.inArray('coordinate', params.type) !== -1 || $.inArray('point', params.type) !== -1 || $.inArray('polygon', params.type) !== -1 || $.inArray('linestring', params.type) !== -1)
					{
						map							= '<div class="form-group" style="margin-left:-1rem; margin-right:-1rem">' + params.content + '</div>';
						
						return;
					}
					
					if(typeof response.results.merged_field[field] !== 'undefined')
					{
						var col						= '';
						
						$.each(response.results.merged_field[field], function(key, val)
						{
							if($.inArray(val, merged) !== -1 || typeof response.results.form_data[val] === 'undefined') return;
							
							col						+= 
							'<div class="' + (typeof response.results.field_size[val] !== 'undefined' ? response.results.field_size[val] : 'col') + '">' +
								'<div class="form-group">' +
									'<label class="text-muted d-block mb-0" for="' + val + '_label">' +
										response.results.form_data[val]['label'] +
									'</label>' +
									'<p id="' + val + '_label" class="text-break-word">' +
										response.results.form_data[val]['content'] +
									'</p>' +
								'</div>' +
							'</div>';
							
							merged.push(val)
						});
						
						if(4 == params.position)
						{
							if(typeof response.results.set_heading !== 'undefined' && typeof response.results.set_heading[field] !== 'undefined')
							{
								column_4			+= '<h5>' + response.results.set_heading[field] + '</h5>';
							}
							
							column_4				+= '<div class="row">' + col + '</div>';
						}
						else if(3 == params.position)
						{
							if(typeof response.results.set_heading !== 'undefined' && typeof response.results.set_heading[field] !== 'undefined')
							{
								column_3			+= '<h5>' + response.results.set_heading[field] + '</h5>';
							}
							
							column_3				+= '<div class="row">' + col + '</div>';
						}
						else if(2 == params.position)
						{
							if(typeof response.results.set_heading !== 'undefined' && typeof response.results.set_heading[field] !== 'undefined')
							{
								column_2			+= '<h5>' + response.results.set_heading[field] + '</h5>';
							}
							
							column_2				+= '<div class="row">' + col + '</div>';
						}
						else
						{
							if(typeof response.results.set_heading !== 'undefined' && typeof response.results.set_heading[field] !== 'undefined')
							{
								column_1			+= '<h5>' + response.results.set_heading[field] + '</h5>';
							}
							
							column_1				+= '<div class="row">' + col + '</div>';
						}
					}
					else
					{
						if($.inArray(field, merged) !== -1) return;
						
						output						= '<div class="form-group"><label class="text-muted d-block mb-0" for="' + field + '_input">' + params.label + (params.tooltip ? ' <i class="mdi mdi-information-outline text-primary" data-toggle="tooltip" title="' + params.tooltip + '"></i>' : '') + (params.required ? '<b class="text-danger"> *</b>' : '') + '</label>' + params.content + '</div>';
						
						if(4 == params.position)
						{
							if(typeof response.results.set_heading !== 'undefined' && typeof response.results.set_heading[field] !== 'undefined')
							{
								column_4			+= '<h5>' + response.results.set_heading[field] + '</h5>';
							}
							
							column_4				+= output;
						}
						else if(3 == params.position)
						{
							if(typeof response.results.set_heading !== 'undefined' && typeof response.results.set_heading[field] !== 'undefined')
							{
								column_3			+= '<h5>' + response.results.set_heading[field] + '</h5>';
							}
							
							column_3				+= output;
						}
						else if(2 == params.position)
						{
							if(typeof response.results.set_heading !== 'undefined' && typeof response.results.set_heading[field] !== 'undefined')
							{
								column_2			+= '<h5>' + response.results.set_heading[field] + '</h5>';
							}
							
							column_2				+= output;
						}
						else
						{
							if(typeof response.results.set_heading !== 'undefined' && typeof response.results.set_heading[field] !== 'undefined')
							{
								column_1			+= '<h5>' + response.results.set_heading[field] + '</h5>';
							}
							
							column_1				+= output;
						}
					}
				});
				
				if(4 == response.results.column_total)
				{
					modal_size						= 'modal-xl';
					
					output							= 
						'<div class="row">' +
							'<div class="column ' + (response.results.column_size[0] ? response.results.column_size[0] : (col ? 'col-md-3' : 'col')) + '">' +
								column_1 +
							'</div>' +
							'<div class="column ' + (response.results.column_size[1] ? response.results.column_size[1] : (col ? 'col-md-3' : 'col')) + '">' +
								column_2 +
							'</div>' +
							'<div class="column ' + (response.results.column_size[2] ? response.results.column_size[2] : (col ? 'col-md-3' : 'col')) + '">' +
								column_3 +
							'</div>' +
							'<div class="column ' + (response.results.column_size[3] ? response.results.column_size[3] : (col ? 'col-md-3' : 'col')) + '">' +
								column_4 +
							'</div>' +
						'</div>';
				}
				else if(3 == response.results.column_total)
				{
					modal_size						= 'modal-xl';
					
					output							= 
						'<div class="row">' +
							'<div class="column ' + (response.results.column_size[0] ? response.results.column_size[0] : (col ? 'col-md-4' : 'col')) + '">' +
								column_1 +
							'</div>' +
							'<div class="column ' + (response.results.column_size[1] ? response.results.column_size[1] : (col ? 'col-md-4' : 'col')) + '">' +
								column_2 +
							'</div>' +
							'<div class="column ' + (response.results.column_size[2] ? response.results.column_size[2] : (col ? 'col-md-4' : 'col')) + '">' +
								column_3 +
							'</div>' +
						'</div>';
				}
				else if(2 == response.results.column_total)
				{
					modal_size						= 'modal-lg';
					
					output							= 
						'<div class="row">' +
							'<div class="column ' + (response.results.column_size[0] ? response.results.column_size[0] : (col ? 'col-md-6' : 'col')) + '">' +
								column_1 +
							'</div>' +
							'<div class="column ' + (response.results.column_size[1] ? response.results.column_size[1] : (col ? 'col-md-6' : 'col')) + '">' +
								column_2 +
							'</div>' +
						'</div>';
				}
				else
				{
					modal_size						= '';
					
					output							= '<div class="column">' + column_1 + column_2 + column_3 + column_4 + '</div>';
				}
				
				output								= (map ? map : '<br />') + output + '<div class="--validation-callback mb-0"></div>';
				
				$(modal_id).find('.modal-title').find('i').removeClass('mdi-plus mdi-square-edit-outline mdi-loading mdi-spin').addClass((typeof response.meta !== 'undefined' && typeof response.meta.icon !== 'undefined' ? response.meta.icon : 'mdi-alert-outline')),
				$(modal_id).find('.modal-title').find('.modal-title-text').text((typeof response.meta !== 'undefined' && typeof response.meta.title !== 'undefined' ? response.meta.title : (phrase.error ? phrase.error : 'Error'))),
				$(modal_id).find('.modal-dialog').addClass((response.meta.modal_size ? response.meta.modal_size : modal_size)),
				$(modal_id).find('form').attr('action', response.current_page).addClass('--validate-form'),
				$(modal_id).find('form').find('button[type=submit]').removeClass('disabled').attr('disabled', null),
				(output ? $(modal_id).find('.modal-body').removeClass('p-0').html(output) : null),
				(typeof response.meta !== 'undefined' && typeof response.meta.description !== 'undefined' ? $(modal_id).find('.modal-body').addClass('pt-0').prepend(response.meta.description) : null),
				
				_reactivate()
			}
		}
		else if($.inArray(method, ['create', 'update']) !== -1)
		{
			if(response && typeof response._token !== 'undefined')
			{
				sessionStorage.setItem('_token', response._token)
			}
			
			if(sessionStorage.getItem('form'))
			{
				/* variable to check if form already rendered */
				var rendered						= true,
					output							= null;
				
				$.each(response.results.form_data, function(field, params)
				{
					/* check if form if already rendered, otherwise mark it as invisible and use second method */
					if(!$('#' + field + '_input').length)
					{
						rendered					= false;
						
						/* break the loop */
						return;
					}
					
					$('#' + field + '_input').replaceWith(params.content)
				});
				
				/* form is not rendered, use second method */
				if(!rendered)
				{
					/* loop the result */
					var col							= '',
						column_1					= '',
						column_2					= '',
						column_3					= '',
						column_4					= '',
						merged						= new Array(),
						map							= '',
						method						= ($.inArray(response.method, ['create', 'update']) !== -1 ? 'form' : 'view');
					
					$.each(response.results.form_data, function(field, params)
					{
						if($.inArray('coordinate', params.type) !== -1 || $.inArray('point', params.type) !== -1 || $.inArray('polygon', params.type) !== -1 || $.inArray('linestring', params.type) !== -1)
						{
							map						= '<div class="form-group" style="margin-left:-1rem; margin-right:-1rem">' + params.content + '</div>';
							
							return;
						}
						
						if(typeof response.results.merged_field[field] !== 'undefined')
						{
							var col					= '';
							
							$.each(response.results.merged_field[field], function(key, val)
							{
								if($.inArray(val, merged) !== -1 || typeof response.results.form_data[val] === 'undefined') return;
								
								col					+= 
								'<div class="' + (typeof response.results.field_size[val] !== 'undefined' ? response.results.field_size[val] : 'col') + '">' +
									'<div class="form-group">' +
										'<label class="text-muted d-block mb-0" for="' + val + ('form' == method ? '_input' : '_label') + '">' +
											response.results.form_data[val]['label'] +
											('form' == method && response.results.form_data[val]['tooltip'] ? ' <i class="mdi mdi-information-outline text-primary" data-toggle="tooltip" title="' + response.results.form_data[val]['tooltip'] + '"></i>' : '') +
											('form' == method && params.required ? '<b class="text-danger"> *</b>' : '') +
										'</label>' +
										('form' == method ? (response.results.form_data[val]['prepend'] || response.results.form_data[val]['append'] ? '<div class="input-group">' : '') + (response.results.form_data[val]['prepend'] ? '<div class="input-group-prepend"><span class="input-group-text">' + response.results.form_data[val]['prepend'] + '</span></div>' : '') + response.results.form_data[val]['content'] + (response.results.form_data[val]['append'] ? '<div class="input-group-append"><span class="input-group-text">' + response.results.form_data[val]['append'] + '</span></div>' : '') + (response.results.form_data[val]['prepend'] || response.results.form_data[val]['append'] ? '</div>' : '') : '<p id="' + val + '_label" class="text-break-word">' + (phrase.loading ? phrase.loading : 'Loading...') + '</p>') +
									'</div>' +
								'</div>';
								
								merged.push(val)
							});
							
							if(4 == params.position)
							{
								if(typeof response.results.set_heading !== 'undefined' && typeof response.results.set_heading[field] !== 'undefined')
								{
									column_4		+= '<h5>' + response.results.set_heading[field] + '</h5>';
								}
								
								column_4			+= '<div class="row">' + col + '</div>';
							}
							else if(3 == params.position)
							{
								if(typeof response.results.set_heading !== 'undefined' && typeof response.results.set_heading[field] !== 'undefined')
								{
									column_3		+= '<h5>' + response.results.set_heading[field] + '</h5>';
								}
								
								column_3			+= '<div class="row">' + col + '</div>';
							}
							else if(2 == params.position)
							{
								if(typeof response.results.set_heading !== 'undefined' && typeof response.results.set_heading[field] !== 'undefined')
								{
									column_2		+= '<h5>' + response.results.set_heading[field] + '</h5>';
								}
								
								column_2			+= '<div class="row">' + col + '</div>';
							}
							else
							{
								if(typeof response.results.set_heading !== 'undefined' && typeof response.results.set_heading[field] !== 'undefined')
								{
									column_1		+= '<h5>' + response.results.set_heading[field] + '</h5>';
								}
								
								column_1			+= '<div class="row">' + col + '</div>';
							}
						}
						else
						{
							if($.inArray(field, merged) !== -1) return;
							
							output					= '<div class="form-group"><label class="text-muted d-block mb-0" for="' + field + ('form' == method ? '_input' : '_label') + '">' + params.label + ('form' == method && params.tooltip ? ' <i class="mdi mdi-information-outline text-primary" data-toggle="tooltip" title="' + params.tooltip + '"></i>' : '') + (params.required ? '<b class="text-danger"> *</b>' : '') + '</label>' + ('form' == method ? (params.prepend || params.append ? '<div class="input-group">' : '') + (params.prepend ? '<div class="input-group-prepend"><span class="input-group-text">' + params.prepend + '</span></div>' : '') + params.content + (params.append ? '<div class="input-group-append"><span class="input-group-text">' + params.append + '</span></div>' : '') + (params.prepend || params.append ? '</div>' : '') : params.content) + '</div>';
							
							if(4 == params.position)
							{
								if(typeof response.results.set_heading !== 'undefined' && typeof response.results.set_heading[field] !== 'undefined')
								{
									column_4		+= '<h5>' + response.results.set_heading[field] + '</h5>';
								}
								
								column_4			+= output;
							}
							else if(3 == params.position)
							{
								if(typeof response.results.set_heading !== 'undefined' && typeof response.results.set_heading[field] !== 'undefined')
								{
									column_3		+= '<h5>' + response.results.set_heading[field] + '</h5>';
								}
								
								column_3			+= output;
							}
							else if(2 == params.position)
							{
								if(typeof response.results.set_heading !== 'undefined' && typeof response.results.set_heading[field] !== 'undefined')
								{
									column_2		+= '<h5>' + response.results.set_heading[field] + '</h5>';
								}
								
								column_2			+= output;
							}
							else
							{
								if(typeof response.results.set_heading !== 'undefined' && typeof response.results.set_heading[field] !== 'undefined')
								{
									column_1		+= '<h5>' + response.results.set_heading[field] + '</h5>';
								}
								
								column_1			+= output;
							}
						}
					});
					
					if(4 == response.results.column_total)
					{
						modal_size					= 'modal-xl';
						
						output						= 
							'<div class="row">' +
								'<div class="' + (response.results.column_size[0] ? response.results.column_size[0] : (col ? 'col-md-3' : 'col')) + '">' +
									column_1 +
								'</div>' +
								'<div class="' + (response.results.column_size[1] ? response.results.column_size[1] : (col ? 'col-md-3' : 'col')) + '">' +
									column_2 +
								'</div>' +
								'<div class="' + (response.results.column_size[2] ? response.results.column_size[2] : (col ? 'col-md-3' : 'col')) + '">' +
									column_3 +
								'</div>' +
								'<div class="' + (response.results.column_size[3] ? response.results.column_size[3] : (col ? 'col-md-3' : 'col')) + '">' +
									column_4 +
								'</div>' +
							'</div>';
					}
					else if(3 == response.results.column_total)
					{
						modal_size					= 'modal-xl';
						
						output						= 
							'<div class="row">' +
								'<div class="' + (response.results.column_size[0] ? response.results.column_size[0] : (col ? 'col-md-4' : 'col')) + '">' +
									column_1 +
								'</div>' +
								'<div class="' + (response.results.column_size[1] ? response.results.column_size[1] : (col ? 'col-md-4' : 'col')) + '">' +
									column_2 +
								'</div>' +
								'<div class="' + (response.results.column_size[2] ? response.results.column_size[2] : (col ? 'col-md-4' : 'col')) + '">' +
									column_3 +
								'</div>' +
							'</div>';
					}
					else if(2 == response.results.column_total)
					{
						modal_size					= 'modal-lg';
						
						output						= 
							'<div class="row">' +
								'<div class="' + (response.results.column_size[0] ? response.results.column_size[0] : (col ? 'col-md-6' : 'col')) + '">' +
									column_1 +
								'</div>' +
								'<div class="' + (response.results.column_size[1] ? response.results.column_size[1] : (col ? 'col-md-6' : 'col')) + '">' +
									column_2 +
								'</div>' +
							'</div>';
					}
					else
					{
						modal_size					= '';
						
						output						= column_1 + column_2 + column_3 + column_4;
					}
					
					output							= (map ? map : '<br />') + output + '<div class="--validation-callback mb-0"></div>';
				}
				
				$(modal_id).find('.modal-title').find('i').removeClass('mdi-plus mdi-square-edit-outline mdi-loading mdi-spin').addClass((typeof response.meta !== 'undefined' && typeof response.meta.icon !== 'undefined' ? response.meta.icon : 'mdi-alert-outline')),
				$(modal_id).find('.modal-title').find('.modal-title-text').text((typeof response.meta !== 'undefined' && typeof response.meta.title !== 'undefined' ? response.meta.title : (phrase.error ? phrase.error : 'Error'))),
				$(modal_id).find('.modal-dialog').addClass((response.meta.modal_size ? response.meta.modal_size : modal_size)),
				$(modal_id).find('form').attr('action', response.current_page).addClass('--validate-form'),
				$(modal_id).find('form').find('button[type=submit]').removeClass('disabled').attr('disabled', null),
				(output ? $(modal_id).find('.modal-body').removeClass('p-0').html(output) : null),
				(typeof response.meta !== 'undefined' && typeof response.meta.description !== 'undefined' ? $(modal_id).find('.modal-body').addClass('pt-0').prepend(response.meta.description) : null),
				
				_reactivate()
			}
			else
			{
				/* loop the result */
				var output							= '',
					col								= '',
					column_1						= '',
					column_2						= '',
					column_3						= '',
					column_4						= '',
					merged							= new Array(),
					map								= '',
					method							= ($.inArray(response.method, ['create', 'update']) !== -1 ? 'form' : 'view');
				
				$.each(response.results.form_data, function(field, params)
				{
					if($.inArray('coordinate', params.type) !== -1 || $.inArray('point', params.type) !== -1 || $.inArray('polygon', params.type) !== -1 || $.inArray('linestring', params.type) !== -1)
					{
						map							= '<div class="form-group" style="margin-left:-1rem; margin-right:-1rem">' + params.content + '</div>';
						
						return;
					}
					
					if(typeof response.results.merged_field[field] !== 'undefined')
					{
						var col						= '';
						
						$.each(response.results.merged_field[field], function(key, val)
						{
							if($.inArray(val, merged) !== -1 || typeof response.results.form_data[val] === 'undefined') return;
							
							col						+= 
							'<div class="' + (typeof response.results.field_size[val] !== 'undefined' ? response.results.field_size[val] : 'col') + '">' +
								'<div class="form-group">' +
									'<label class="text-muted d-block mb-0" for="' + val + ('form' == method ? '_input' : '_label') + '">' +
										response.results.form_data[val]['label'] +
										('form' == method && response.results.form_data[val]['tooltip'] ? ' <i class="mdi mdi-information-outline text-primary" data-toggle="tooltip" title="' + response.results.form_data[val]['tooltip'] + '"></i>' : '') +
										('form' == method && params.required ? '<b class="text-danger"> *</b>' : '') +
									'</label>' +
									('form' == method ? (response.results.form_data[val]['prepend'] || response.results.form_data[val]['append'] ? '<div class="input-group">' : '') + (response.results.form_data[val]['prepend'] ? '<div class="input-group-prepend"><span class="input-group-text">' + response.results.form_data[val]['prepend'] + '</span></div>' : '') + response.results.form_data[val]['content'] + (response.results.form_data[val]['append'] ? '<div class="input-group-append"><span class="input-group-text">' + response.results.form_data[val]['append'] + '</span></div>' : '') + (response.results.form_data[val]['prepend'] || response.results.form_data[val]['append'] ? '</div>' : '') : '<p id="' + val + '_label" class="text-break-word">' + (phrase.loading ? phrase.loading : 'Loading...') + '</p>') +
								'</div>' +
							'</div>';
							
							merged.push(val)
						});
						
						if(4 == params.position)
						{
							if(typeof response.results.set_heading !== 'undefined' && typeof response.results.set_heading[field] !== 'undefined')
							{
								column_4			+= '<h5>' + response.results.set_heading[field] + '</h5>';
							}
							
							column_4				+= '<div class="row">' + col + '</div>';
						}
						else if(3 == params.position)
						{
							if(typeof response.results.set_heading !== 'undefined' && typeof response.results.set_heading[field] !== 'undefined')
							{
								column_3			+= '<h5>' + response.results.set_heading[field] + '</h5>';
							}
							
							column_3				+= '<div class="row">' + col + '</div>';
						}
						else if(2 == params.position)
						{
							if(typeof response.results.set_heading !== 'undefined' && typeof response.results.set_heading[field] !== 'undefined')
							{
								column_2			+= '<h5>' + response.results.set_heading[field] + '</h5>';
							}
							
							column_2				+= '<div class="row">' + col + '</div>';
						}
						else
						{
							if(typeof response.results.set_heading !== 'undefined' && typeof response.results.set_heading[field] !== 'undefined')
							{
								column_1			+= '<h5>' + response.results.set_heading[field] + '</h5>';
							}
							
							column_1				+= '<div class="row">' + col + '</div>';
						}
					}
					else
					{
						if($.inArray(field, merged) !== -1) return;
						
						output						= '<div class="form-group"><label class="text-muted d-block mb-0" for="' + field + ('form' == method ? '_input' : '_label') + '">' + params.label + ('form' == method && params.tooltip ? ' <i class="mdi mdi-information-outline text-primary" data-toggle="tooltip" title="' + params.tooltip + '"></i>' : '') + (params.required ? '<b class="text-danger"> *</b>' : '') + '</label>' + ('form' == method ? (params.prepend || params.append ? '<div class="input-group">' : '') + (params.prepend ? '<div class="input-group-prepend"><span class="input-group-text">' + params.prepend + '</span></div>' : '') + params.content + (params.append ? '<div class="input-group-append"><span class="input-group-text">' + params.append + '</span></div>' : '') + (params.prepend || params.append ? '</div>' : '') : params.content) + '</div>';
						
						if(4 == params.position)
						{
							if(typeof response.results.set_heading !== 'undefined' && typeof response.results.set_heading[field] !== 'undefined')
							{
								column_4			+= '<h5>' + response.results.set_heading[field] + '</h5>';
							}
							
							column_4				+= output;
						}
						else if(3 == params.position)
						{
							if(typeof response.results.set_heading !== 'undefined' && typeof response.results.set_heading[field] !== 'undefined')
							{
								column_3			+= '<h5>' + response.results.set_heading[field] + '</h5>';
							}
							
							column_3				+= output;
						}
						else if(2 == params.position)
						{
							if(typeof response.results.set_heading !== 'undefined' && typeof response.results.set_heading[field] !== 'undefined')
							{
								column_2			+= '<h5>' + response.results.set_heading[field] + '</h5>';
							}
							
							column_2				+= output;
						}
						else
						{
							if(typeof response.results.set_heading !== 'undefined' && typeof response.results.set_heading[field] !== 'undefined')
							{
								column_1			+= '<h5>' + response.results.set_heading[field] + '</h5>';
							}
							
							column_1				+= output;
						}
					}
				});
				
				if(4 == response.results.column_total)
				{
					modal_size						= 'modal-xl';
					
					output							= 
						'<div class="row">' +
							'<div class="' + (response.results.column_size[0] ? response.results.column_size[0] : (col ? 'col-md-3' : 'col')) + '">' +
								column_1 +
							'</div>' +
							'<div class="' + (response.results.column_size[1] ? response.results.column_size[1] : (col ? 'col-md-3' : 'col')) + '">' +
								column_2 +
							'</div>' +
							'<div class="' + (response.results.column_size[2] ? response.results.column_size[2] : (col ? 'col-md-3' : 'col')) + '">' +
								column_3 +
							'</div>' +
							'<div class="' + (response.results.column_size[3] ? response.results.column_size[3] : (col ? 'col-md-3' : 'col')) + '">' +
								column_4 +
							'</div>' +
						'</div>';
				}
				else if(3 == response.results.column_total)
				{
					modal_size						= 'modal-xl';
					
					output							= 
						'<div class="row">' +
							'<div class="' + (response.results.column_size[0] ? response.results.column_size[0] : (col ? 'col-md-4' : 'col')) + '">' +
								column_1 +
							'</div>' +
							'<div class="' + (response.results.column_size[1] ? response.results.column_size[1] : (col ? 'col-md-4' : 'col')) + '">' +
								column_2 +
							'</div>' +
							'<div class="' + (response.results.column_size[2] ? response.results.column_size[2] : (col ? 'col-md-4' : 'col')) + '">' +
								column_3 +
							'</div>' +
						'</div>';
				}
				else if(2 == response.results.column_total)
				{
					modal_size						= 'modal-lg';
					
					output							= 
						'<div class="row">' +
							'<div class="' + (response.results.column_size[0] ? response.results.column_size[0] : (col ? 'col-md-6' : 'col')) + '">' +
								column_1 +
							'</div>' +
							'<div class="' + (response.results.column_size[1] ? response.results.column_size[1] : (col ? 'col-md-6' : 'col')) + '">' +
								column_2 +
							'</div>' +
						'</div>';
				}
				else
				{
					modal_size						= '';
					
					output							= column_1 + column_2 + column_3 + column_4;
				}
				
				output								= (map ? map : '<br />') + output + '<div class="--validation-callback mb-0"></div>';
				
				$(modal_id).find('.modal-title').find('i').removeClass('mdi-plus mdi-square-edit-outline mdi-loading mdi-spin').addClass((typeof response.meta !== 'undefined' && typeof response.meta.icon !== 'undefined' ? response.meta.icon : 'mdi-alert-outline')),
				$(modal_id).find('.modal-title').find('.modal-title-text').text((typeof response.meta !== 'undefined' && typeof response.meta.title !== 'undefined' ? response.meta.title : (phrase.error ? phrase.error : 'Error'))),
				$(modal_id).find('.modal-dialog').addClass((response.meta.modal_size ? response.meta.modal_size : modal_size)),
				$(modal_id).find('form').attr('action', response.current_page).addClass('--validate-form'),
				$(modal_id).find('form').find('button[type=submit]').removeClass('disabled').attr('disabled', null),
				(output ? $(modal_id).find('.modal-body').removeClass('p-0').html(output) : null),
				(typeof response.meta !== 'undefined' && typeof response.meta.description !== 'undefined' ? $(modal_id).find('.modal-body').addClass('pt-0').prepend(response.meta.description) : null),
				
				_reactivate()
			}
		}
	}
};
For more information send a message to info at phpclasses dot org.