/* global _, angular, i18n, Ladda, Odometer */
'use strict';

angular.module('PromptSkill.directives', [])

/* layouts */
.directive('promptskillBar', [function() {
	return {
		restrict: 'C',
		templateUrl: '/templates/layouts/promptskill-bar.promptskill'
	};
}])
.directive('privacy', ['$cookies', function($cookies) {
	return {
		restrict: 'C',
		templateUrl: '/templates/layouts/cookie-policy.promptskill',
		link: function(scope, element, attrs)
		{
			// Cookie Policy
			scope.checkCookie = function(){
				var accept = $cookies.get('cookie_policy');
				if(accept != 'accept'){
					scope.cookie_popup = true;
				}	
			}
			
			scope.acceptCookie = function(){
				let expire = new Date();
				const domain = '.promptskill.com';
				//
				expire.setDate(expire.getDate() + 360);
				$cookies.put('cookie_policy', 'accept', { 
					domain: domain,
					expires: expire,
					path: '/'
				});
				scope.cookie_popup = false;
			}
			//
		}
	};
}])
.directive('copyright', [function() {
	return {
		restrict: 'C',
		templateUrl: '/templates/layouts/copyright.promptskill'
	};
}])
.directive('promptskill', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			attrs.$observe('promptskill', function(logo) {
				var $logo = $('<img/>');
				if(logo) {
					$logo.attr('src', '//services.promptskill.com/app/public/img/logo/logo-topbar.png');
					if(logo=='id') {
						$logo.attr('src', '//services.promptskill.com/app/public/img/logo/logo-promptskill-id.png');
					} else {
						$logo.addClass('top-bar click')
						$logo.on('click', function() {
							// scope.promptSkill();
						})
					};
					element.append($logo);
				}
			});
		}
	}
}])
.directive('headBar', ['$location', '$timeout', function($location, $timeout) {
	return {
		restrict: 'A',
		template: '<div ng-include="navigation"></div>',
		link: function(scope, element, attrs)
		{
			scope.$watch('headbar', function(newValue, oldValue) {
				//console.log(newValue)
				if (newValue !=oldValue) {
					if(newValue) {
						scope.navigation = 'templates/layouts/header.promptskill';
						
						// Initialization Mobile Navigator
						$timeout(function() {
							$('.sidenav').sidenav();
						}, 1000);
						
					} else {
						scope.navigation = '';
					}
				}	
			});
			
			scope.menu = [
				{ "title": "หน้าหลัก", "path": "/", "state": "1" },
				{ "title": "หลักสูตร", "path": "/courses", "state": "1" },
				{ "title": "วิธีการเรียน", "path": "/how-to-learn", "state": "1" },
				{ "title": "วิทยากร", "path": "/faculty-of-lecturers", "state": "0" },
				{ "title": "คำถามที่พบบ่อย", "path": "/frequently-asked-questions", "state": "1" },
				{ "title": "เกี่ยวกับเรา", "path": "/about-us", "state": "1" },
				{ "title": "ติดต่อเรา", "path": "/contact-us", "state": "1" }
			];
			
			// Header Change
			scope.navigationChange = function() {
				//
				const path = $location.path().split('/');
				const pathArray = ['course', 'enrol', 'register'];
				//
				if(pathArray.includes(path[1])) {
					$('header').addClass('program-header');
					// $('header').css('position', 'absoluzte').find('.page-wrapper').css('padding', '0 2em');
				} else {
					$('header').removeClass('program-header');
					// $('header').css('position', 'relative').find('.page-wrapper').css('padding', '0 8.625rem');
				}
			}
			//
		}
	};
}])
.directive('headbarLogo', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			var logo = scope.service.program.logo();
			console.log(logo)
			if(logo) {
				var $img = $('<div/>').append($('<img/>').attr('height', '100%').attr('src', logo));
				element.append($img.addClass('valign-wrapper'));
			}
		}
	}
}])
.directive('headbarLogoRight', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			var logo = '';//'//services.promptskill.com/app/program/public/img/logo/logo-dbdacademy.png';

			if(logo) {
				var $img = $('<div/>').append($('<img/>').attr('src', logo));
				element.append($img);
			}
		}
	}
}])
.directive('sitemap', [function() {
	return {
		restrict: 'A',
		templateUrl: '/templates/layouts/sitemap.promptskill',
		link: function(scope, element, attrs) {
			//
			scope.service.program.info().then(function(program) {
				// console.log(program);
				scope.sitemap = program;
			});
			
			// attrs.$observe('sitemap', function(program) {
			// 	scope.service.program.data('sitemap', institution).then(function(data) {
			// 		console.log(data)
			// 		scope.sitemap = data;
			// 	});
			// });
			//
		}
	};
}])

/* elements */
.directive('image', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			attrs.$observe('image', function(image) 
			{
				var img = new Image();
				img.onload = function() {
					var ratio = this.height / this.width;
					if(attrs.height) {
						ratio = ratio * parseInt(attrs.height)/100;
					}
					console.log(ratio)
					element.css('padding-top', ratio *100+'%');
					element.css('position','relative');
				}
				img.src = 'https:' + image;
				element.removeAttr('image');
				element.css('background-image', "url('"+image+"')").addClass('cover');
				//
				element.removeAttr('image');
			});
		}
	}
}])
.directive('background', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			attrs.$observe('background', function(image)
			{
				var img = new Image();
				img.onload = function() {
					if(attrs.height =='fit') {
						//element.height(this.height);
						//element.css('height', this.height + '');
						//element.addClass('width');
						element.css('background-size', 'auto '+this.height+'px')
					}
					else if (attrs.height=='auto') {
						element.css('background-size', 'auto '+this.height+'px');
						element.removeClass('background-image');
					}
					//else 
					element.addClass(attrs.height);
				}
				img.src = 'https:' + image;
				element.removeAttr('background');
				element.css("background-image", "url('"+image+"')");
				element.addClass('background-image');
			});
		}
	}
}])
.directive('icon', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			attrs.$observe('icon', function(image) 
			{
				var $img = $('<img/>');
				var img = new Image();
				img.onload = function() {
					$img.attr('src', image);
					element.append($img);
				}
				img.src = image;
				element.removeAttr('icon');
			});
		}
	}
}])
.directive('aos', ['$timeout', function($timeout) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) {
			//
			$timeout(function() {
				AOS.init({
					// disable: 'mobile'
				});
			}, 900);
			//
		}
	}
}])

/* style */
.directive('fitBrief', ['$timeout', '$sanitize', function($timeout, $sanitize) {
	return {
		restrict: 'A',
		priority: 10,
		link: function(scope, element, attrs)
		{
			scope.$watch(attrs.ngBindHtml, function(value)
			{
				var fontSize = parseInt(element.css('font-size'));
				var margin = element.parent().css('margin');
				//console.log(margin)
				$timeout(function() {
					if(value !=undefined) {
						var blockBrief = element.prev();
						var brief = blockBrief.find('.brief');
						var marginTop = (blockBrief.height() -brief.height()) /fontSize;
						element.children().children().children(':first-child').css('margin-top', -marginTop+'em').css('margin-left', '-4%');
						
						// catchphrase
						if(scope.course.catchphrase) {
							let catchphrase_text = scope.course.catchphrase;
							const tag = (/xhtml/i).test(document.doctype) ? '<br />' : '<br>';
							const $catchphrase = $('<h2/>').addClass('overline-text underline-text short dbadman bold');
							//
							catchphrase_text = (catchphrase_text + '').replace(/(\r\n|\n\r|\r|\n|&#10;&#13;|&#13;&#10;|&#10;|&#13;)/g, tag + '$1');
							
							$catchphrase.html($sanitize(catchphrase_text));
							$catchphrase.css('margin-top', '0.8em');
							element.children().children().children(':nth-child(2)').prepend($catchphrase);
						}
					}
				})
			})
			
		}
	}
}])

/* page */
.directive('page', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			var paddingTop = 64;
			attrs.$observe('page', function(name) {
				element.removeAttr('page').attr('id', name);
				scope.service.program.page(name).then(function(data) {
					console.log(data)
					scope.page = data;
					if(data) {
						element.addClass(data.headbar)
						if($('header').outerHeight() <paddingTop) {
							paddingTop += $('header').outerHeight();
						} else {
							paddingTop = $('header').outerHeight();
						}
						element.css('padding-top', paddingTop);
					}
				});
			});
		}
	};
}])
.directive('pageBanner', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			var designWidth = 1920;
			attrs.$observe('pageBanner', function(banner) 
			{
				if(banner) {
					element.removeAttr('page-banner')
					//if(attrs.fit=='width') {
					//var img = new Image();
					//img.onload = function() {
					//	var height = this.height / designWidth;
					//	element.css('height', height *100+'vw');
					//}
					//img.src = 'https:' + banner;
					element.css('background-image', "url('"+banner+"')").addClass(attrs.fit);
				}
			});
		}
	}
}])
.directive('bookCover', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) {
			attrs.$observe('bookCover', function(cover)
			{
				if(cover!='') {
					var image = scope.activity.resource.cover;
					var title = scope.activity.resource.title;
					var file = scope.activity.resource.file;
					
					var $document = $('<div/>').css('padding', '1em');
					var $img = $('<img/>').css('width', '10em').attr('src', image);
					var $title = $('<h6/>').css('margin-bottom', '1.5em').text(title);
					var $download = $('<a/>').append($('<img/>').attr('src', '//services.promptskill.com/app/program/public/img/icon/icon-book-open.png'));
					 $download.attr('href', 'https:'+file);
					 $download.attr('target', '_blank');
					
					$document.append($img).append($title).append($download);
					
					element.append($document);
				}
			});
		}
	}
}])

.directive('alertPanel', ['$timeout', function($timeout) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) {
			scope.$watch('alert.msg', function(msg, old) {
				//console.log(msg)
				//console.log(old)
				var $panel = angular.element('#course-navigator .panel')
				//console.log($panel.innerWidth())
				if(msg) {
					//element.empty();
					// console.log(msg);
					angular.element('<div/>').css('width','100%').html(msg).appendTo(element);
					element.addClass('alert-panel valign-wrapper');
					$panel.addClass('show');
					//scope.timeout(3000, scope.$parent.alert = {});
					$timeout(function() {
						$panel.removeClass('show');
						scope.alert.msg = '';
						element.empty();
					}, 7000);
				} 
				/*if(msg=="") {
					if($panel.hasClass('show')) {
						$panel.removeClass('show');
						element.empty();
						//console.log(msg)
					}
				}*/
			});
		}
	}
}])
.directive('timeCountdown', ['$timeout', function($timeout) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) {
			// scope.$watch('alert.time', function(msg, old) {
				var $iframe = angular.element('#moobed');
				var $card = $('<div/>').addClass('card-timecountdown orange lighten-5 white z-depth-1 valign-wrapper');
				var $icon = $('<img/>').addClass('icon-timecountdown').attr('src', '//services.promptskill.com/app/client/dbdacademy/public/img/icon/icon-alert-warning.png').attr('width', '30');
				var $title = $('<p/>').addClass('black-text normal regular').text('คุณมีเวลาในการทำข้อสอบ '+ '30' + ' นาที');
				var $time = $('<span/>').addClass('timecountdown bold').text('00 : 30 : 00');
				$title.append($time);
				$card.append($icon).append($title);
				// $iframe.append($card);
				element.append($card);
			// });
		}
	}
}])
.directive('toggle', [function() {
	return {
		restrict: 'C',
		link: function(scope, element, attr)
		{
			element.on('click', function() {
				//console.log(element)
				if (element.hasClass('current')) {
					element.removeClass('current')
					//element.addClass('done')
				} else {
					$(element).parent().find('.toggle.current').removeClass('current');
					element.addClass('current')
				}
			});
		} 
	}
}])

/* register */
.directive('registerInfo', ['$location', function($location) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) {
			//console.log($location.hash());
			setTimeout(function() {
				scope.service.member.register($location.hash()).then(function(info) {
					console.log(info)
					//
					var data = JSON.parse(info.data);
					$("#prefix").val(data.prefix);
					$("#firstname").val(data.firstname);
					$("#lastname").val(data.lastname);
					$("#company").val(data.company);
					$("#province").val(data.province);
					$("#contact").val(data.contact);
				})
			}, 1000);
		}
	}
}])
.directive('register', ['$location', function($location) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			// if(scope.service.user.token()=='')
				//scope.gotoUrl('/');

			var program = '';
			scope.$parent.promptskill = true;
			scope.$parent.headbar = false;
			scope.$parent.fullpage = true;
			scope.$parent.member = false;
			//
			attrs.$observe('register', function(action) {
				scope.service.program.info(action).then(function(data) {
					// console.log(data)
					scope.program = data;
					program = data.domain.toLowerCase();
					scope.formUrl = '/register-form/'+program+'.'+action;
					//
					scope.name = data.name;
					scope.background = data.background;
					scope.banner = data.banner;
					scope.register['code'] = data.registration;
				});	
			});
			//
			let formdata = new FormData();
			let files = [];
			var upload = false;
			var valid_national_id = false;
			scope.formReady = function() {
				//
				upload = angular.element('input.input-file').length ==0;
				angular.element('input#email').on('change', function() {
					angular.element('input[name="username"]').val($(this).val()).prop('readonly', true)
						.removeClass('validate invalid').removeAttr('required');
				});

				// input file drag & drop image
				if(angular.element('input.input-file').length) {
					let button = document.querySelector('.title-top button'),
					form = document.getElementById("file_img"),
					section = document.getElementById(".card-input-file section"),
					container = document.querySelector('.container-image'),
					text = document.querySelector('.inner'),
					browse = document.querySelector('.select'),
					input = document.querySelector('.card-input-file section input');
					
					browse.addEventListener('click', () => input.click());
					
					//input change event
					input.addEventListener('change', () => {
						let file = input.files;
					
						for(let i=0; i< file.length; i++) {
							if (files.every(e => e.name != file[i].name)) {
								if(file[i].size > 16000000) {
									scope.alert('รูปภาพมีขนาดใหญ่เกินไป');
								}else {
									files.push(file[i]);
								}
							}
						}
						//document.getElementById("file_img").value = "";
						showImage();
						if(files.length > 0) {
							upload = true;
						}
						//console.log(files);
					})
					
					function showImage() {
						let images = '';
						files.forEach((e, i) => {
							images += `<div class="image">
											 <img src="${URL.createObjectURL(e)}" alt="image">
											<span onclick="delImage(${i})">&times;</span>
									   </div>`
						})
						container.innerHTML = images;
					}
					
					//delete image
					// function delImage(index) {
					// 	files.splice(index, 1);
					// 	showImage();
					// 	console.log(files);
					// }
					window.delImage = (index) => {
						files.splice(index, 1);
						showImage();
						//console.log(files);
						
						if(files.length == 0) {
							upload = false;
						}
					};
					
					//drag and drop image
					document.getElementById("section-file").addEventListener('dragover', e => {
						e.preventDefault();
					
						$('#section-file').addClass('dragover');
						$('.inner').css('display', 'none');
						$('.drop-here').css('display', 'block');
					})
					
					document.getElementById("section-file").addEventListener('dragleave', e => {
						e.preventDefault();
					
						$('#section-file').removeClass('dragover');
						$('.inner').css('display', 'block');
						$('.drop-here').css('display', 'none');
					})
					
					document.getElementById("section-file").addEventListener('drop', e => {
						e.preventDefault();
						
						$('#section-file').removeClass('dragover');
						$('.inner').css('display', 'block');
						$('.drop-here').css('display', 'none');
					
						let file = e.dataTransfer.files;
						for(let i=0; i< file.length; i++) {
							// if (files.every(e => e.name != file[i].name)) files.push(file[i])
							if (files.every(e => e.name != file[i].name)) {
								if(file[i].size > 16000000) {
									scope.alert('รูปภาพมีขนาดใหญ่เกินไป');
								}else {
									files.push(file[i]);
								}
							}
						}
						
						showImage();
						if(files.length > 0) {
							upload = true;
						}
						console.log(files);
					})
				}
				//
				
				// angular.element('input.input-file').on('change', function() {
				// 	var file = $(this)[0].files[0];
				// 	//formdata.append('files[]', file);
				// 	files.forEach((e, i) => formdata.append('files[]', e));
				// 	upload = true;
				// })
				
				//valid national ID
				if(angular.element('input[name="id_card_number"]').length) {
					
					$("#id_card_number").keyup(function(e) {
						var input = $("#id_card_number");
						var id = input.val();
						
						if(id.length >= 13) {
							for (var i = 0, sum = 0; i < 12; i++) {
							  sum += parseInt(id.charAt(i)) * (13 - i);
							}
							let mod = sum % 11;
							let check = (11 - mod) % 10;
					
							if (check == parseInt(id.charAt(12))) {
								valid_national_id = false;
								input.removeClass("invalid");
								input.addClass("valid");
								$("#helper").attr('data-error','ต้องการ');
							}else {
								valid_national_id = true;
								input.removeClass("valid");
								input.addClass("invalid");
								$("#helper").attr('data-error','เลขประจำตัวประชาชนไม่ถูกต้อง');
							}
						  }
					});
				}
					
			}
			//
			scope.register = function(state) {
				var accepted = true;
				var national_id = true;
				var confirm_password = true;
				var formCheck = angular.element('.form-checkbox').find('input');
				angular.forEach(formCheck, function(input) {
					   accepted = accepted && angular.element(input).prop("checked"); 
				   });
				//
				if(upload) {
				if(accepted) {
					var required = 0;
					var $formregister = angular.element('.form-register').find(':input');
					angular.forEach($formregister, function(input) {
						var $input = angular.element(input);
						if($input.prop('required') && $input.val() =='') {
							if(!$input.prop('disabled')) {
								$input.addClass('invalid');
								required++;
							}
						}
					});
					//
					var $formselect = angular.element('.form-register').find('select');
					angular.forEach($formselect, function(input) {
						var $input = angular.element(input);
						if($input.prop('required') && $input.val() == null) {
							if(!$input.prop('disabled')) {
								$input.addClass('invalid');
								required++;
							}
						}
					});
					// check input length national id
					if(angular.element('input[name="id_card_number"]').length) {
						if(angular.element('input[name="id_card_number"]').val().length != 13) {
							national_id = false;
							scope.alert('เลขประจำตัวประชาชนไม่ครบ 13 หลัก');
						}
					}
					//check confirm password
					if(angular.element('.promptskill-id').length) {
						if(angular.element('input[name="password"]').val() != angular.element('input[name="confirm_password"]').val()) {
							confirm_password = false;
							scope.alert('รหัสยืนยันไม่ถูกต้อง');
						}
					}
					//		
					var $forminput = angular.element('.promptskill-id').find('input');
					angular.forEach($forminput, function(input) {
					var $input = angular.element(input);
					switch($input.attr('name')) {
						case 'firstname':
						case 'lastname':
							var value = angular.element('input#'+$input.attr('name')).val();
							$input.val(value);
							break;
						default:
							if($input.prop('required') && $input.val() =='') {
								$input.addClass('invalid');
								required++;
							}
						}
					});
					//
					if(required != 0) {
						scope.alert('กรุณากรอกข้อมูลให้ครบทุกช่อง');
						//scope.helper = {'msg':'กรุณากรอกข้อมูลให้ครบทุกช่อง'};
					}else {
						if(national_id && confirm_password) {
							// check valid national id
							if (valid_national_id) {
								scope.alert('เลขประจำตัวประชาชนไม่ถูกต้อง');
							}else {
								// save data registration
								var $btnReg = angular.element('.btn-register').find('button');
								$btnReg.attr('disabled', true).text('กำลังบันทึกข้อมูล..');
								
								// get files upload
								if($('.file-field input[type="file"]').length) {
									$('.file-field input[type="file"]').each(function(i, e) {
										// if (e.files.length > 0) {
										// 	const inputName = $(e).attr('name');
										// 	// const filename = e.files[0].name;
										// 	// const newFilename = inputName + '_' + filename;
										// 	//
										// 	files.push(new File([e.files[0]], inputName));
										// }
										files.push(e.files[0]);
									});
								}
								// console.log(files);
								
								if(scope.program.type!='seminar') {
									scope.service.member.signup($forminput).then(function(data) {
										scope.service.member.registration($formregister, data.userid).then(function(id) {
											//console.log(id)
											files.forEach((e, i) => formdata.append(`file[${i}]`, e));
											scope.service.member.upload(formdata, id).then(function(result) {
												//console.log(result)
												scope.result = result;
												scope.scrollToTop().then(function() {
													scope.state = 'completed';
													scope.stateUrl = '/register-form/'+program+'.result';
												});
											})
										})
									});
								} else {
									scope.service.member.registration(scope.program.program_id, $formregister, null).then(function(id) {
										// console.log(id)
										$btnReg.attr('disabled', true).text('กำลังอัปโหลดไฟล์..');
										
										files.forEach((e, i) => formdata.append(`file[${i}]`, e));
										scope.service.member.upload(formdata, id).then(function(result) {
											// console.log(result)
											scope.result = result;
											scope.scrollToTop().then(function() {
												scope.state = 'completed';
												scope.stateUrl = '/register-form/'+program+'.result';
											});
										})
									})
								}
							}
							//
						}
					}
				} else scope.alert('ยอมรับเงื่อนไขการให้บริการ');
				} else scope.alert('ต้องการอัปโหลดรูปภาพ');
			}
			//
			scope.alert = function(text) {
				Swal.fire({
					title: 'มีบางอย่างผิดพลาด',
					text: text,
					icon: 'warning',
					confirmButtonText: 'ตกลง',
					confirmButtonColor: "#9E9E9E",
					heightAuto: false
				})
			}
			//
		}
	};
}])

/* form input */
.directive('formHelper', ['$window',function($window) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			attrs.$observe('formHelper', function(text) {
				var helper = scope.helper;
				if(text) {
					if(!helper.hasOwnProperty('type')) {
						helper.title = 'มีบางอย่างผิดพลาด';
						helper.type = 'warning';
					}
					Swal.fire({
						title: helper.title,
						text: text,
						icon: helper.type,
						confirmButtonText: 'ตกลง',
						confirmButtonColor: "#9E9E9E",
						heightAuto: false
					}).then(function() {
						//console.log(text)
						if(scope.helper.close) {
							$window.top.close();
						}
						if(scope.helper.redirect) {
							$window.href = '/'+scope.helper.redirect;
						}
						scope.helper = {}
					});
				}
			});
		}
	}
}])
.directive('textField', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			element.addClass('input-field')
			attrs.$observe('textField', function(label) 
			{
				if(label) {
					var $input = $('<input readonly/>').attr({type:'text'}).val(attrs.value);
					var $label = $('<label/>').addClass('dbadman normal bold black-text').text(label);
					//
					if(attrs.type =='textarea') {
						$input = $('<textarea readonly/>').text(attrs.value).addClass('materialize-textarea').attr('rows', attrs.line).css('height', attrs.line+'em')
					}
					$input.addClass('dbadman')
					element.append($input).append($label);
				}
			});
		}
	}
}])
.directive('inputField', [function() {
	return {
		restrict: 'C',
		link: function(scope, element, attrs)
		{
			var $input = angular.element('<input/>').attr({name:attrs.name, type:attrs.type,});
			var $select = angular.element('<select/>').attr({name:attrs.name,});
			var $label = angular.element('<label/>').addClass('bold black-text');
			 var $helper  = angular.element('<span/>').attr('data-error', 'ต้องการ').addClass('helper-text');
			//console.log(attrs.type)
			switch(attrs.type) {
				case 'radio':
					$input.addClass('with-gap red');
				case 'checkbox':
					var $text = angular.element('<span/>').text(attrs.label);
					$input.removeClass('validate').addClass('filled-in');
					$label.append($input).append($text);
					$input.prop('checked', attrs.checked).addClass(attrs.check);
					element.append($label).removeClass('input-field');
					break;
				case 'switch':
					var $switch = angular.element('<div/>').addClass('switch row dbadman large bold').append($label).css('margin', '0.75em');
					var $level = angular.element('<span/>').addClass('lever');
					$input.attr('type', 'checkbox');
					$label.addClass('smaller right').append($input).append($level).append(attrs.switchOn).prepend(attrs.switchOff);
					$switch.prepend(attrs.label);
					element.append($switch).removeClass('input-field').prepend();
					break;
				case 'submit':
					var $button = angular.element('<button/>').addClass('btn red waves-effect waves-light dbadman bold large').text(attrs.label);//.attr({type:attrs.type}).css({width:'100%',borderRadius:'0.25em'});
					element.append($button).removeClass('input-field');
					break;
				case 'button':
					var $button = angular.element('<button/>').addClass('btn-large waves-effect waves-light dbadman bold large'+attrs.name).text(attrs.label);//.css({width:'100%',borderRadius:'0.25em'});
					element.append($button).removeClass('input-field');
					$button.addClass(attrs.name)
					break;
				case 'link':
					var $link = angular.element('<a/>').addClass('waves-effect btn-flat dbadman bold small slim center').text(attrs.label).attr('href',attrs.link);
					element.append($link).removeClass('input-field');
					break;
				case 'textarea':
					var $text = angular.element('<textarea/>').attr({id:attrs.name, name:attrs.name}).addClass('materialize-textarea');
					$text.attr('rows', attrs.line).css('height', attrs.line+'em').text(attrs.value);
					$label.text(attrs.label).attr('for', attrs.name).addClass('dbadman normal bold');
					element.append($text).append($label);
					break;	
				case 'password':
					var icon = 'visibility';
					var $icon = angular.element('<i/>').text(icon+'_off').addClass('material-icons suffix grey-text')
					.on('click', function() {
						if(angular.element(this).text().indexOf('_off')>-1) {
							angular.element(this).text(icon).addClass('black-text');	
							$input.attr('type', 'text');
						} else {
							angular.element(this).text(icon+'_off').removeClass('black-text');
							$input.attr('type', 'password');
						}
					})
					$input.attr('autocomplete', 'off');
					element.append($icon);
					$input.addClass('dbadman validate').attr('required', true);
					$label.text(attrs.label).attr('for', attrs.name).addClass('dbadman normal bold');
					element.append($input).append($label).append($helper);
					break;
				case 'hidden':
					element.append($input);
					break;
				case 'email':
					$helper.attr('data-error', 'อีเมลไม่ถูกต้อง')
				case 'text':
				case 'date':
				case 'time':
					if(attrs.type !='password') {
						//$input.attr('type', 'text');
					}
					$input.addClass('dbadman validate').attr('required', true);
					$label.text(attrs.label).attr('for', attrs.name).addClass('dbadman normal bold');
					element.append($input).append($label).append($helper);
					//if(attrs.type =='date') $input.datepicker();
					//if(attrs.type =='time') $input.timepicker();
					break;
				case 'file':
					var icon = 'attach_file';
					var $icon = angular.element('<i/>').text(icon).addClass('Medium material-icons suffix grey-text click')
					.on('click', function() {
						$input.click()
					});
					var $filepath = angular.element('<input/>').attr('type', 'text');//.attr('placeholder', 'attach file');
					$label.text(attrs.label).attr('for', attrs.name).addClass('dbadman normal bold');
					$input.width(0).on('change', function() {
						//console.log(angular.element(this).val())
						var filename = angular.element(this).val().split(/[\\/]/).pop();
						$filepath.val(filename)
					});
					element.append($label).append($filepath).append($input);
					element.append($icon);
					//$input.attr('type', 'text')
					//$label.text(attrs.label).attr('for', attrs.name).addClass('dbadman normal bold');
					//element.append($input).append($label);
					//$input.datepicker();
					//break;
				case 'select':
					$select.addClass('browser-default').attr('required', true);
					$select.css({margin: '0', border: '0', borderRadius: '0', borderBottom: '1px solid #707070'})
					var $optionDisabled = angular.element('<option/>').addClass('dbadman normal');
					$optionDisabled.attr('disabled', true).attr('selected', true).text('เลือก');
					$select.append($optionDisabled);
					 var value_option = JSON.parse(attrs.option);
					angular.forEach(value_option, function(item) {
						var $option = angular.element('<option/>').addClass('dbadman normal');
						$option.text(item).attr('value', item);
						$select.append($option);
					});
					$label.text(attrs.label).attr('for', attrs.name).addClass('dbadman normal bold');
					element.append($select).append($label).append($helper);
					break;
			} 
			if(attrs.disabled) {
				$input.attr('disabled',false)
				$input.addClass('validate');
				//$input.addClass('disabled');
				$input.addClass(attrs.disabled);
			}
			if(attrs.enabled) {
				$input.attr('disabled',true)
				$input.removeClass('validate');
				//$input.addClass('enabled');
				$input.addClass(attrs.enabled);
			}
			if(attrs.same) {
				//$input.prop('readonly', true);
				$input.addClass(attrs.same);
			}
			//
			$input.on('change', function() {
				if(angular.element(this).attr('type')=='checkbox') {
					var parent = angular.element(this).attr('name');
					var state = angular.element(this).hasClass('enabled') ?!angular.element(this).is(':checked') :angular.element(this).is(':checked');
					if(angular.element(this).hasClass('same')) {
						//console.log(angular.element('input.'+angular.element(this).attr('name')))
						//var same = angular.element(this).attr('name');
						angular.forEach(angular.element('input.'+parent), function(input) {
							var value = angular.element('form#'+parent+' [name="'+angular.element(input).attr('name')+'"]').val();
							//console.log(value)
							angular.element(input).val(value).prop('readonly',true)
							if(!state) {
								angular.element(input).val(null).prop('readonly',false)
							}
						})
					} else {
						//console.log(angular.element(this).is(':checked'))
						//var parent = angular.element(this).attr('name');
						//console.log(angular.element(this))
						//var state = angular.element(this).hasClass('enabled') ?!angular.element(this).is(':checked') :angular.element(this).is(':checked');
						//console.log(state)
						angular.element('.'+parent).attr('disabled', state);
						if(!state) {
							$input.addClass('validate');
						} else {
							$input.removeClass('validate');
						}
						//
					}
				} else {
					$input.addClass('updated');
				}
			});
		}
	}
}])
.directive('value', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			attrs.$observe('value', function(value) 
			{
				if(value) {
					var $input = element.children('input');
					//console.log(element.children('input').attr('name'))
					$input.val(value)
					if(element.hasClass('readonly')) {
						$input.prop('readonly', true).removeClass('validate');
					}
					//scope.formdata[$input.attr('name')] = $input.val();
				}
				//console.log(scope.formdata)
			})
		}
	}
}])

/* Form */
.directive('formValidate', ['$window',function($window) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			/* Validation Form */
			scope.validateForm = function(id) {
				var status = false;
				var validate = 0;
				
				// validate input
				var formCheck = angular.element(id).find('input');
				angular.forEach(formCheck, function(input) {
					var $input = angular.element(input);
					if($input.prop('required') && $input.val() =='') {
						validate++;
					}
				});
				
				// validate select
				formCheck = angular.element(id).find('select');
				angular.forEach(formCheck, function(input) {
					var $input = angular.element(input);
					if($input.prop('required') && $input.val() == null) {
						validate++;
					}
				});
				
				// validate radio
				formCheck = angular.element(id).find('input[type=radio]');
				var inputRadio = [];
				angular.forEach(formCheck, function(input) {
					var nameInput = angular.element(input).attr('name');
					//
					if(!inputRadio.includes(nameInput)) {
						inputRadio.push(nameInput);
					}
				});
				angular.forEach(inputRadio, function(input) {
					if(!$('input[name='+input+']').is(':checked')) {
						validate++;
					}
				});
				
				// validate checkbox
				formCheck = angular.element(id).find('input[type=checkbox]');
				var inputCheckbox = [];
				angular.forEach(formCheck, function(input) {
					var nameInput = angular.element(input).attr('name');
					
					if(!inputCheckbox.includes(nameInput)) {
						inputCheckbox.push(nameInput);
					}
				});
				angular.forEach(inputCheckbox, function(input) {
					if(!$('input[name='+input+']').is(':checked')) {
						validate++;
					}
				});
				
				// validate username
				if(angular.element(id).find('input[name=username]').length) {
					var username = $('input[name=username]').val();
					var pattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
					
					if (pattern.test(username) == false) {
						scope.alert_text = 'Invalid email format';
						validate++;
					}
				}
				
				// validate password
				if(angular.element(id).find('input[name=password]').length) {
					//
					var password = $('input[name=password]').val();
					var confirm_password = $('input[name=confirm_password]').val();
					//
					if(password.length < 8 || confirm_password < 8) {
						scope.alert_text = 'Please set a password according to the specified conditions';
						validate++;
					}
					
					if(password != confirm_password) {
						scope.alert_text = 'Passwords do not match';
						validate++;
					}	
				}
				
				//
				if(validate == 0) status = true;
				return status;
			}
			
			/* Form Condition */
			// limit length input
			scope.limitLength = function(event, limit) {
				var char = String.fromCharCode(event.which);
				var length = event.target.value.length;
			
				if (length >= limit || !(/[0-9]/.test(char))) {
					event.preventDefault();
				}
			}
			// valid ID card
			scope.validIdCard = function(inputId) {
				var input = $('#'+inputId);
				var id = input.val();
				var disabled = true;
				
				if(id.length >= 13) {
					for (var i = 0, sum = 0; i < 12; i++) {
						sum += parseInt(id.charAt(i)) * (13 - i);
					}
					let mod = sum % 11;
					let check = (11 - mod) % 10;
			
					if (check == parseInt(id.charAt(12))) {
						disabled = false;
						input.removeClass("invalid").addClass("valid");
						scope.alert_helper = false;
					}else {
						disabled = true;
						input.removeClass("valid").addClass("invalid");
						scope.alert_helper = true;
					}
				}
				return disabled;
			}
			// only english characters
			scope.onlyEnglishCharacters = function(e) {
				var orgi_text="ๅภถุึคตจขชๆไำพะัีรนยบลฃฟหกดเ้่าสวงผปแอิืทมใฝ๑๒๓๔ู฿๕๖๗๘๙๐ฎฑธํ๊ณฯญฐฅฤฆฏโฌ็๋ษศซฉฮฺ์ฒฬฦ";
				var chk_text = e.target.value.split("");
				chk_text.filter(function(s) {        
					if(orgi_text.indexOf(s) != -1){
						e.target.value = e.target.value.replace(RegExp(s, "g"),'');
					}           
				}); 
			}
			// only thai characters
			scope.onlyThaiCharacters = function(e) {
				var orgi_text="ๅภถุึคตจขชๆไำพะัีรนยบลฃฟหกดเ้่าสวงผปแอิืทมใฝ๑๒๓๔ู฿๕๖๗๘๙๐ฎฑธํ๊ณฯญฐฅฤฆฏโฌ็๋ษศซฉฮฺ์ฒฬฦ";
				var chk_text = e.target.value.split("");
				chk_text.filter(function(s) {        
					if(orgi_text.indexOf(s) == -1){
						e.target.value = e.target.value.replace(RegExp(s, "g"),'');
					}           
				}); 
			}
			$(":input").on("keyup", function(e) {
				var orgi_text="<>";
				var chk_text = e.target.value.split("");
				chk_text.filter(function(s) {        
					if(orgi_text.indexOf(s) != -1){
						e.target.value = e.target.value.replace(RegExp(s, "g"),'');
					}           
				}); 
			})
			//
		}
	}
}])

/* Alert */
.directive('alert', ['$timeout', '$window', function ($timeout, $window) {
	return {
		restrict: 'A',
		link: function (scope, element, attrs) {
			
			// Parameter Config
			const confirmButtonText = 'ตกลง';
			const confirmButtonColor = '#616161';
			const cancelButtonText = 'ยกเลิก';
			const cancelButtonColor = '#d33';
			const timer = 2500;
			
			//
			scope.alert = function(type, icon, title, msg, path) {
				//
				switch (type) {
					case 'basic':
						Swal.fire({
							title: title,
							text: msg,
							icon: icon,
							heightAuto: true,
							showCloseButton: false,
							showCancelButton: false,
							showConfirmButton: true,
							confirmButtonText: confirmButtonText,
							confirmButtonColor: confirmButtonColor,
							cancelButtonText: cancelButtonText,
							cancelButtonColor: cancelButtonColor,
							customClass: {}
						});
						break;
						//
					case 'toast':
						const Toast = Swal.mixin({
							toast: true,
							position: 'top-end',
							showConfirmButton: false,
							timer: timer,
							timerProgressBar: true,
							didOpen: (toast) => {
								toast.addEventListener('mouseenter', Swal.stopTimer)
								toast.addEventListener('mouseleave', Swal.resumeTimer)
							}
						})
						//
						Toast.fire({
							icon: icon,
							title: msg
						})
						break;
						//
				}
				//
				if(path!=null) {
					if(path=='reload') {
						$timeout(function() {
							$window.location.reload();
						}, timer);
					}
					else {
						$timeout(function() {
							$window.location.href = path;
						}, timer);
					}
				}
			}
			//
		}
	}
}])

/* Program Course */
.directive('programCourse', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs){
			//
			scope.service.program.info().then(function(program) {
				scope.program_course = program.course;
				// console.log(scope.program_course);
				
				attrs.$observe('programCourse', function(type) {
					// Random Course
					if(type=='random') {
						function getRandomElements(arr, count) {
						  const shuffled = arr.slice();
						  let i = arr.length;
						  while (i--) {
							const randomIndex = Math.floor(Math.random() * (i + 1));
							[shuffled[i], shuffled[randomIndex]] = [shuffled[randomIndex], shuffled[i]];
						  }
						  return shuffled.slice(0, count);
						}
						//
						scope.program_course = getRandomElements(scope.program_course, 8);
						// console.log(scope.program_course);
					}
				});
				//
			});
		}
	}
}])

/* Member */
.directive('avatarPhoto', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{	  
			attrs.$observe('avatarPhoto', function(type) {
				// element.addClass('avatar-photo');
				scope.service.user.avatar(null, type).then(function(response) {
					// console.log(response);
					if(!response.error) {
						element.attr('src', response.data);
					}
					if(response.avatar==false) {
						// create avatar
						function getRandomColor() {
							const letters = '0123456789ABCDEF';
							let color = '#';
							for (let i = 0; i < 6; i++) {
							  color += letters[Math.floor(Math.random() * 16)];
							}
							return color;
						}

						function createAvatar(text) {
							const font = 'bold 150px Prompt';
							const canvas = document.createElement('canvas');
							const context = canvas.getContext('2d');
							canvas.width = 300;
							canvas.height = 300;
							//
							const backgroundColor = getRandomColor();
							context.fillStyle = backgroundColor;
							context.fillRect(0, 0, canvas.width, canvas.height);
							//
							context.font = font;
							context.fillStyle = '#ffffff';
							//
							const textMetrics = context.measureText(text);
							const x = (canvas.width - textMetrics.width) / 2;
							const y = (canvas.height + textMetrics.actualBoundingBoxAscent - textMetrics.actualBoundingBoxDescent) / 2;
							context.fillText(text, x, y);
							//
							return new Promise((resolve) => {
								canvas.toBlob((blob) => {
									const file = new File([blob], 'avatar.png', { type: 'image/png' });
									resolve(file);
								});
							});
						}
						//
						scope.service.member.authorized().then(function(authorized) {
							if(authorized) {
								const firstname = authorized.user.firstname;
								const avatarText = firstname.charAt(0).toUpperCase();
								//
								createAvatar(avatarText).then((file) => {
									const formData = new FormData();
									formData.append('file', file);

									// Upload Avatar Photo
									scope.service.user.avatar(formData, null).then(function(response) {
										// console.log(response);
										if(!response.error) {
											element.attr('src', response.data.photo);
										}
									});
									//
								});
							}
						});
						//
					}
				})
			});
		}
	}
}])

/* Web Content */
.directive('carouselBanner', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			//
			var highlight = [
				{
					"image": "//resourcespace.promptskill.com/resources/course/78/7e459350-2116-4856-98d6-9f297e01ccdd/image/Banner-Highlight-01.png",
					"link": ""
				},
				{
					"image": "//resourcespace.promptskill.com/resources/course/78/7e459350-2116-4856-98d6-9f297e01ccdd/image/Banner-Highlight-02.png",
					"link": "https://futureskills.promptskill.com/courses"
				},
				{
					"image": "//resourcespace.promptskill.com/resources/course/78/7e459350-2116-4856-98d6-9f297e01ccdd/image/Banner-Highlight-03.png",
					"link": "https://futureskills.promptskill.com/frequently-asked-questions"
				}
			];
			// console.log(highlight);
			//
			
			if(highlight) {
				var	$carousel = $('<div/>').addClass('carousel carousel-slider carousel-banner');
				element.append($carousel);
				
				angular.forEach(highlight, function(item) {
					var	$item = $('<a/>').addClass('carousel-item').attr('href', item.link);
					var $image = $('<div/>').addClass('relative carousel-background');
					//
					$image.css('background-image', "url('"+ item.image +"')");
					$item.append($image);
					$carousel.append($item);
				});
				//
				element.ready(function() {
					
					$carousel.carousel({
						fullWidth: true,
						indicators: true
					});
					
					const img = new Image();
					img.onload = function() {
						const ratio = this.height / this.width;
						$carousel.height($carousel.width()*ratio);
					}
					img.src = 'https:' + highlight[0].image;
					
					// auto next slide banner
					setInterval(function () {
						$carousel.carousel('next');
					}, 7000);
				});
			}
			//
		}
	}
}])

// .directive('carouselCourse', [function() {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs) {
// 			//
// 			var category = [
// 				{
// 					"category": "หลักสูตรออนไลน์",
// 					"background": "/public/img/mockup/background/background-course.jpg",
// 					"courses": [
// 						{
// 							"code": "SKN66101",
// 							"thumbnail": "https://resourcespace.promptskill.com/resources/course/68/a50134c2-5ea5-40d1-a600-6b988d0506a3/image/Banner_Portforio1.png",
// 							"title": "หลักสูตรเบื้องต้นสำหรับการเขียน Portfolio",
// 							"instructor": "พลีธรรม ตริยะเกษม"
// 						}
// 					]
// 				}
// 			];
// 			console.log(category);
// 			//
// 			
// 			if(category) {
// 
// 				var btnCategory = 'All COURSES';
// 				var iconCategory = '/public/img/icon/icon-promptright.png';
// 				var btnCourse = 'ลงทะเบียน';
// 				//
// 				angular.forEach(category, function(category) {
// 					
// 					/* Header and Button Category */
// 					var	$sectionCourse = $('<div/>').addClass('section-course');
// 					var	$container = $('<div/>').addClass('container');
// 					var	$sectionHeader = $('<div/>').addClass('section-header');
// 					var	$sectionTitle = $('<h2/>').addClass('section-title underline-text').text(category.category);
// 					var	$sectionAction = $('<a/>').addClass('waves-effect btn-flat section-action medium valign-wrapper right-align').attr('href', '/courses');
// 					//
// 					$sectionAction.click(function() {
// 						scope.scrollToTop();
// 					});
// 					$sectionAction.append($('<span/>').text(btnCategory)).append($('<img/>').attr('src', iconCategory).height(25));
// 					$sectionHeader.append($('<div/>').addClass('col').append($sectionTitle));
// 					$sectionHeader.append($('<div/>').addClass('col').append($sectionAction));
// 					$container.append($sectionHeader);
// 					
// 					/* Program Course */
// 					var	$carousel = $('<div/>').addClass('carousel carousel-slider carousel-course');
// 					var	$carouselItem = $('<div/>').addClass('carousel-item');
// 					var $row = $('<div/>').addClass('row');
// 					
// 					// responsive devices
// 					var count = 0;
// 					var responsiveDevice = 4; // Desktop Devices
// 					if(window.matchMedia("(max-width: 600px)").matches) responsiveDevice = 1; // Mobile Devices
// 					else if (window.matchMedia("(min-width: 601px) and (max-width: 992px)").matches) responsiveDevice = 3; // Tablet Devices
// 					
// 					angular.forEach(category.courses, function(course) {
// 						
// 						if(count == 0) {
// 							$carousel.append($carouselItem);
// 							$carouselItem.append($row);
// 						}
// 						//
// 						var $col = $('<div/>').addClass('col s6 m4 l3');
// 						var $card = $('<div/>').addClass('card card-course hoverable');
// 						var $cardImage = $('<div/>').addClass('card-image');
// 						var $cardContent = $('<div/>').addClass('card-content');
// 						var $courseTitle = $('<div/>').addClass('course-title').text(course.title);
// 						var $courseInstructor = $('<div/>').addClass('course-instructor').text(course.instructor);
// 						var $cardAction = $('<div/>').addClass('card-action flex-center');
// 						var $btnCourse = $('<a/>').addClass('btn btn-course medium').attr('href', '/course/'+course.code).text(btnCourse);
// 						//
// 						$cardImage.css('background-image', "url('"+course.thumbnail+"')");
// 						$cardContent.append($courseTitle).append($courseInstructor);
// 						$cardAction.append($btnCourse);
// 						$card.append($cardImage).append($cardContent).append($cardAction);
// 						$row.append($col.append($card));
// 						//
// 						count++;
// 						if(count == responsiveDevice) {
// 							count = 0;
// 							$carouselItem = $('<div/>').addClass('carousel-item');
// 							$row = $('<div/>').addClass('row');
// 						}
// 						
// 					});
// 					$container.append($carousel);
// 					
// 					$sectionCourse.css('background-image', "url('"+category.background+"')");
// 					element.append($sectionCourse.append($container));
// 					//
// 				});
// 				//
// 			}
// 			
// 			element.ready(function() {
// 				var carousel = element.find('.carousel-course');
// 				carousel.carousel({
// 					fullWidth: true,
// 					indicators: true
// 				});
// 				
// 				element.find('.btn-course').click(function() {
// 					scope.scrollToTop();
// 				});
// 				//
// 			});
// 		}
// 	}
// }])
// .directive('carouselInstructor', [function() {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs) {
// 			//
// 			var instructors = [
// 				{
// 					"image": "//resourcespace.promptskill.com/resources/course/15/06bb2d3e-af6e-4266-a582-900b8a564277/instructor/K_Papusarapron.png",
// 					"name": {
// 						"firstname": "คุณปภัสราภรณ์",
// 						"lastname": "เหรียญทอง"
// 					}
// 					
// 				},
// 				{
// 					"image": "//resourcespace.promptskill.com/resources/course/15/06bb2d3e-af6e-4266-a582-900b8a564277/instructor/K_Nubpada.png",
// 					"name": {
// 						"firstname": "คุณนพดา",
// 						"lastname": "อธิกากัมพู"
// 					}
// 					
// 				},
// 				{
// 					"image": "//resourcespace.promptskill.com/resources/course/15/06bb2d3e-af6e-4266-a582-900b8a564277/instructor/K_Nubpada.png",
// 					"name": {
// 						"firstname": "คุณนพดา",
// 						"lastname": "อธิกากัมพู"
// 					}
// 					
// 				},
// 				{
// 					"image": "//resourcespace.promptskill.com/resources/course/15/06bb2d3e-af6e-4266-a582-900b8a564277/instructor/K_Nubpada.png",
// 					"name": {
// 						"firstname": "คุณนพดา",
// 						"lastname": "อธิกากัมพู"
// 					}
// 					
// 				},
// 				{
// 					"image": "//resourcespace.promptskill.com/resources/course/15/06bb2d3e-af6e-4266-a582-900b8a564277/instructor/K_Nubpada.png",
// 					"name": {
// 						"firstname": "คุณนพดา",
// 						"lastname": "อธิกากัมพู"
// 					}
// 					
// 				}
// 			];
// 			// console.log(instructors);
// 			
// 			var	$carousel = $('<div/>').addClass('carousel carousel-slider carousel-instructor');
// 			var	$carouselItem = $('<div/>').addClass('carousel-item');
// 			var $row = $('<div/>').addClass('row');
// 			
// 			// responsive devices
// 			var count = 0;
// 			var responsiveDevice = 4; // Desktop Devices
// 			if(window.matchMedia("(max-width: 600px)").matches) responsiveDevice = 1; // Mobile Devices
// 			else if (window.matchMedia("(min-width: 601px) and (max-width: 992px)").matches) responsiveDevice = 3; // Tablet Devices
// 			
// 			angular.forEach(instructors, function(instructor, key) {
// 				
// 				if(count == 0) {
// 					$carousel.append($carouselItem);
// 					$carouselItem.append($row);
// 				}
// 				//
// 				var $col = $('<div/>').addClass('col s3');
// 				var $photo = $('<div/>').addClass('photo');
// 				var $gradient = $('<i/>').addClass('gradient').css({position:'absolute',top:0, width:'100%',height:'100%'});
// 				var $fullname = $('<h4/>').addClass('name regular').html(instructor.name.firstname + '<br />' + instructor.name.lastname);
// 				var $instructor = $('<div/>').addClass('bottom wrapper center white-text').append($fullname);
// 				//
// 				$photo.css('background-color', 'white');
// 				$photo.css('background-image', "url('"+instructor.image+"')");
// 				$photo.css('padding-top', 670 / 400 * 100+'%');
// 				$photo.css('position','relative');
// 				$photo.append($gradient).append($instructor);
// 				$row.append($col.append($photo));
// 				//
// 				count++;
// 				if(count == responsiveDevice) {
// 					count = 0;
// 					$carouselItem = $('<div/>').addClass('carousel-item');
// 					$row = $('<div/>').addClass('row');
// 				}
// 			});
// 			element.append($carousel);
// 			
// 			//
// 			element.ready(function() {
// 				var carousel = element.find('.carousel-instructor');
// 				carousel.carousel({
// 					fullWidth: true,
// 					indicators: true
// 				});
// 			});
// 		}
// 	}
// }])
// .directive('courseCategory', [function() {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs) 
// 		{
// 			//
// 			var courses = [
// 				{
// 					"name": "หลักสูตรการเริ่มต้นธุรกิจ",
// 					"course": [
// 						{
// 							"code": "SKN66101",
// 							"thumbnail": "https://resourcespace.promptskill.com/resources/course/68/a50134c2-5ea5-40d1-a600-6b988d0506a3/image/Banner_Portforio1.png",
// 							"title": "หลักสูตรเบื้องต้นสำหรับการเขียน Portfolio",
// 							"instructor": "พลีธรรม ตริยะเกษม"
// 						},
// 						{
// 							"code": "SKN66101",
// 							"thumbnail": "https://resourcespace.promptskill.com/resources/course/68/a50134c2-5ea5-40d1-a600-6b988d0506a3/image/Banner_Portforio1.png",
// 							"title": "หลักสูตรเบื้องต้นสำหรับการเขียน Portfolio",
// 							"instructor": "พลีธรรม ตริยะเกษม"
// 						},
// 						{
// 							"code": "SKN66101",
// 							"thumbnail": "https://resourcespace.promptskill.com/resources/course/68/a50134c2-5ea5-40d1-a600-6b988d0506a3/image/Banner_Portforio1.png",
// 							"title": "หลักสูตรเบื้องต้นสำหรับการเขียน Portfolio",
// 							"instructor": "พลีธรรม ตริยะเกษม"
// 						},
// 						{
// 							"code": "SKN66101",
// 							"thumbnail": "https://resourcespace.promptskill.com/resources/course/68/a50134c2-5ea5-40d1-a600-6b988d0506a3/image/Banner_Portforio1.png",
// 							"title": "หลักสูตรเบื้องต้นสำหรับการเขียน Portfolio",
// 							"instructor": "พลีธรรม ตริยะเกษม"
// 						},
// 						{
// 							"code": "SKN66101",
// 							"thumbnail": "https://resourcespace.promptskill.com/resources/course/68/a50134c2-5ea5-40d1-a600-6b988d0506a3/image/Banner_Portforio1.png",
// 							"title": "หลักสูตรเบื้องต้นสำหรับการเขียน Portfolio",
// 							"instructor": "พลีธรรม ตริยะเกษม"
// 						}
// 					]
// 				},
// 				{
// 					"name": "หลักสูตรการเริ่มต้นธุรกิจ",
// 					"course": [
// 						{
// 							"code": "SKN66101",
// 							"thumbnail": "https://resourcespace.promptskill.com/resources/course/68/a50134c2-5ea5-40d1-a600-6b988d0506a3/image/Banner_Portforio1.png",
// 							"title": "หลักสูตรเบื้องต้นสำหรับการเขียน Portfolio",
// 							"instructor": "พลีธรรม ตริยะเกษม"
// 						},
// 						{
// 							"code": "SKN66101",
// 							"thumbnail": "https://resourcespace.promptskill.com/resources/course/68/a50134c2-5ea5-40d1-a600-6b988d0506a3/image/Banner_Portforio1.png",
// 							"title": "หลักสูตรเบื้องต้นสำหรับการเขียน Portfolio",
// 							"instructor": "พลีธรรม ตริยะเกษม"
// 						},
// 						{
// 							"code": "SKN66101",
// 							"thumbnail": "https://resourcespace.promptskill.com/resources/course/68/a50134c2-5ea5-40d1-a600-6b988d0506a3/image/Banner_Portforio1.png",
// 							"title": "หลักสูตรเบื้องต้นสำหรับการเขียน Portfolio",
// 							"instructor": "พลีธรรม ตริยะเกษม"
// 						},
// 						{
// 							"code": "SKN66101",
// 							"thumbnail": "https://resourcespace.promptskill.com/resources/course/68/a50134c2-5ea5-40d1-a600-6b988d0506a3/image/Banner_Portforio1.png",
// 							"title": "หลักสูตรเบื้องต้นสำหรับการเขียน Portfolio",
// 							"instructor": "พลีธรรม ตริยะเกษม"
// 						},
// 						{
// 							"code": "SKN66101",
// 							"thumbnail": "https://resourcespace.promptskill.com/resources/course/68/a50134c2-5ea5-40d1-a600-6b988d0506a3/image/Banner_Portforio1.png",
// 							"title": "หลักสูตรเบื้องต้นสำหรับการเขียน Portfolio",
// 							"instructor": "พลีธรรม ตริยะเกษม"
// 						}
// 					]
// 				}	
// 			];
// 			// console.log(courses);
// 			
// 			/* Course Category */
// 			angular.forEach(courses, function(category, key) {
// 				// default parameter
// 				var categoryTitle = category.name;
// 				var programCourse = category.course;
// 				//
// 				var $section = $('<section/>').addClass('section-category');
// 				var $container = $('<div/>').addClass('container');
// 				var $sectionTitle = $('<h2/>').addClass('section-title underline-text').text(categoryTitle);
// 				var $programCourse = $('<div/>').addClass('program-course row');
// 				
// 				// change background section
// 				if(key%2 != 0) {
// 					$section.addClass('red lighten-5');
// 				}
// 				
// 				/* Program Course */
// 				angular.forEach(programCourse, function(course) {
// 					// default parameter
// 					var code = course.code;
// 					var title = course.title;
// 					var instructor = course.instructor;
// 					var thumbnail = course.thumbnail;
// 					var button = 'ลงทะเบียน';
// 					//
// 					var $col = $('<div/>').addClass('col s6 m4 l3');
// 					var $card = $('<div/>').addClass('card card-course hoverable');
// 					var $cardImage = $('<div/>').addClass('card-image');
// 					var $cardContent = $('<div/>').addClass('card-content');
// 					var $courseTitle = $('<div/>').addClass('course-title').text(title);
// 					var $courseInstructor = $('<div/>').addClass('course-instructor').text(instructor);
// 					var $cardAction = $('<div/>').addClass('card-action flex-center');
// 					var $btnCourse = $('<a/>').addClass('btn btn-course medium').attr('href', '/course/'+ code).text(button);
// 					//
// 					$cardImage.css('background-image', "url('"+thumbnail+"')");
// 					$cardContent.append($courseTitle).append($courseInstructor);
// 					$btnCourse.click(function() {
// 						scope.scrollToTop();
// 					});
// 					$cardAction.append($btnCourse);
// 					$card.append($cardImage).append($cardContent).append($cardAction);
// 					$programCourse.append($col.append($card));
// 				});
// 				//
// 				$container.append($sectionTitle).append($programCourse);
// 				$section.append($container);
// 				element.append($section);
// 			});
// 			//
// 		}
// 	}
// }])
// .directive('facultyLecturers', [function() {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs) {
// 			//
// 			var instructors = [
// 				{
// 					"image": "//resourcespace.promptskill.com/resources/course/15/06bb2d3e-af6e-4266-a582-900b8a564277/instructor/K_Papusarapron.png",
// 					"name": {
// 						"firstname": "คุณปภัสราภรณ์",
// 						"lastname": "เหรียญทอง"
// 					}
// 					
// 				},
// 				{
// 					"image": "//resourcespace.promptskill.com/resources/course/15/06bb2d3e-af6e-4266-a582-900b8a564277/instructor/K_Nubpada.png",
// 					"name": {
// 						"firstname": "คุณนพดา",
// 						"lastname": "อธิกากัมพู"
// 					}
// 					
// 				},
// 				{
// 					"image": "//resourcespace.promptskill.com/resources/course/15/06bb2d3e-af6e-4266-a582-900b8a564277/instructor/K_Nubpada.png",
// 					"name": {
// 						"firstname": "คุณนพดา",
// 						"lastname": "อธิกากัมพู"
// 					}
// 					
// 				},
// 				{
// 					"image": "//resourcespace.promptskill.com/resources/course/15/06bb2d3e-af6e-4266-a582-900b8a564277/instructor/K_Nubpada.png",
// 					"name": {
// 						"firstname": "คุณนพดา",
// 						"lastname": "อธิกากัมพู"
// 					}
// 					
// 				},
// 				{
// 					"image": "//resourcespace.promptskill.com/resources/course/15/06bb2d3e-af6e-4266-a582-900b8a564277/instructor/K_Nubpada.png",
// 					"name": {
// 						"firstname": "คุณนพดา",
// 						"lastname": "อธิกากัมพู"
// 					}
// 					
// 				}
// 			];
// 			// console.log(instructors);
// 			
// 			var $row = $('<div/>').addClass('row').css('margin', '0 -0.75rem');
// 			//
// 			angular.forEach(instructors, function(instructor) {
// 				// default parameter
// 				var id = '0';
// 				var firstname = instructor.name.firstname;
// 				var lastname = instructor.name.lastname;
// 				var image = instructor.image;
// 				//
// 				var $link = $('<a/>').attr('href', '/lecturer/' + id);
// 				var $col = $('<div/>').addClass('col s3');
// 				var $photo = $('<div/>').addClass('photo');
// 				var $gradient = $('<i/>').addClass('gradient').css({position:'absolute',top:0, width:'100%',height:'100%'});
// 				var $fullname = $('<h4/>').addClass('name regular').html(firstname + '<br />' + lastname);
// 				var $instructor = $('<div/>').addClass('bottom wrapper center white-text').append($fullname);
// 				//
// 				$photo.css('background-color', 'white');
// 				$photo.css('background-image', "url('"+image+"')");
// 				$photo.css('padding-top', 670 / 400 * 100+'%');
// 				$photo.css('position','relative');
// 				$photo.append($gradient).append($instructor);
// 				$link.click(function() {
// 					scope.scrollToTop();
// 				});
// 				$link.append($col.append($photo));
// 				$row.append($link);
// 			});
// 			element.append($row);
// 		}
// 	}
// }])
// .directive('howToLearn', [function() {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs)
// 		{
// 			//
// 			var learns = [
// 				{
// 					"title": "คู่มือการสมัครสมาชิก",
// 					"content": "คู่มือการสมัครสมาชิก"
// 				},
// 				{
// 					"title": "การเข้าสู่ระบบสำหรับผู้ที่มีบัญชีเข้าเรียนกับเว็บไซต์เดิม",
// 					"content": "การเข้าสู่ระบบสำหรับผู้ที่มีบัญชีเข้าเรียนกับเว็บไซต์เดิม"
// 				},
// 				{
// 					"title": "แนะนำการเรียน",
// 					"content": "แนะนำการเรียน"
// 				}
// 			];
// 			var $collapsible = $('<ul/>').addClass('collapsible grey lighten-3').attr('id', 'collapsible');
// 			//
// 			angular.forEach(learns, function(item) {
// 				// default parameter
// 				var title = item.title;
// 				var content = item.content;
// 				//
// 				var	$li = $('<li/>');
// 				var $header = $('<div/>').addClass('collapsible-header grey lighten-3 valign-wrapper');
// 				var $question = $('<h4/>').addClass('black-text').text(title);
// 				var $badge = $('<span/>').addClass('badge');
// 				var $body = $('<div/>').addClass('collapsible-body');
// 				var $answer = $('<div/>').addClass('black-text').html(content);
// 				//
// 				$badge.append($('<i/>').addClass('material-icons bold large').text('add'));
// 				$li.append($header.append($question).append($badge));
// 				$li.append($body.append($answer));
// 				$collapsible.append($li);
// 			});
// 			element.append($collapsible);
// 			//
// 			element.ready(function() {
// 				$collapsible.collapsible();
// 			});
// 			//
// 		}
// 	}
// }])
// .directive('frequentlyAskedQuestion', [function() {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs)
// 		{
// 			//
// 			var faq = [
// 				{
// 					"question": "การใช้โปรแกรมในการเรียนผ่านระบบ (e-learning)",
// 					"answer": "การใช้โปรแกรมในการเรียนผ่านระบบ (e-learning)"
// 				},
// 				{
// 					"question": "การขอเปลี่ยนข้อมูลผู้เรียน (ประวัติส่วนตัวผู้เรียน)",
// 					"answer": "การขอเปลี่ยนข้อมูลผู้เรียน (ประวัติส่วนตัวผู้เรียน)"
// 				},
// 				{
// 					"question": "ผู้เรียนลืมรหัสผ่านในการเข้าใช้งาน",
// 					"answer": "ผู้เรียนลืมรหัสผ่านในการเข้าใช้งาน"
// 				}
// 			];
// 			var $collapsible = $('<ul/>').addClass('collapsible grey lighten-3').attr('id', 'collapsible');
// 			//
// 			angular.forEach(faq, function(item) {
// 				// default parameter
// 				var question = item.question;
// 				var answer = item.answer;
// 				//
// 				var	$li = $('<li/>');
// 				var $header = $('<div/>').addClass('collapsible-header grey lighten-3 valign-wrapper');
// 				var $question = $('<h4/>').addClass('black-text').text(question);
// 				var $badge = $('<span/>').addClass('badge');
// 				var $body = $('<div/>').addClass('collapsible-body');
// 				var $answer = $('<div/>').addClass('black-text').html(answer);
// 				//
// 				$badge.append($('<i/>').addClass('material-icons bold large').text('add'));
// 				$li.append($header.append($question).append($badge));
// 				$li.append($body.append($answer));
// 				$collapsible.append($li);
// 			});
// 			element.append($collapsible);
// 			//
// 			element.ready(function() {
// 				$collapsible.collapsible();
// 			});
// 			//
// 		}
// 	}
// }])