/* 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('sitemap', [function() {
	return {
		restrict: 'A',
		templateUrl: '/templates/layouts/sitemap.promptskill',
	};
}])

/* promptskill element */
.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', [function() {
	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';
					} else {
						scope.navigation = '';
					}
                }	
            });
		}
	};
}])
.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('page', [function() {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs)
// 		{
// 			attrs.$observe('page', function(name) {
// 				scope.service.academy.page(name).then(function(data) {
// 					console.log($('header').outerHeight())
// 					scope.page = data;
// 				});
// 			});
// 			//scope.$parent.fullpage = false;
// 		}
// 	};
// }])
// .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.promptskill.page(name).then(function(data) {
// 					//console.log(data)
// 					scope.page = data;
// 					element.addClass(data.headbar)
// 					if($('header').outerHeight() <paddingTop) {
// 						paddingTop += $('header').outerHeight();
// 					} else {
// 						paddingTop = $('header').outerHeight();
// 					}
// 					element.css('padding-top', paddingTop);
// 				});
// 			});
// 		}
// 	};
// }])
// .directive('elementBanner', [function() {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs)
// 		{
// 			attrs.$observe('elementBanner', function(item) {
// 				if(item !=undefined && item >0) {
// 					var $content = $('<div/>').appendTo(element);
// 					var banner = scope.page.elements.banner;
// 					if(item >1) {
// 						
// 					} else {
// 						$content.html(banner[0].content);
// 					}
// 				}
// 			});
// 		}
// 	};
// }])
// .directive('elementContent', [function() {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs)
// 		{
// 			//console.log(attrs.content)
// 			attrs.$observe('elementContent', function(item) {
// 				if(item !=undefined && item >0) {
// 					var $content = $('<div/>').appendTo(element);
// 					var content = scope.page.elements[attrs.content];
// 					if(item >1) {
// 						
// 					} else {
// 						$content.html(content[0].content);
// 						if(content[0].attrs !="") {
// 							element.addClass('white-text');
// 							element.attr('style', content[0].attrs);
// 						}
// 						if(content[0].image) {
// 							element.css('position', 'relative');
// 							$('<img/>').attr('style', content[0].position).css('position','absolute')
// 							.css('height', '34em').attr('src', content[0].image).appendTo(element)
// 						}
// 					}
// 				}
// 			});
// 		}
// 	};
// }])

.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('headerLogo', [function() {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs)
// 		{
// 			attrs.$observe('headerLogo', function(logo) 
// 			{
// 				if(logo) {
// 					var $img = $('<img/>').attr('src', logo);
// 					/*var img = new Image();
// 					img.onload = function() {
// 						var ratio = this.width / this.height;
// 						if (ratio <1.25) {
// 							console.log(ratio)
// 							element.css('margin-right', '1em');
// 							element.parent().css({display:'flex',alignItems:'self-end'});
// 						}
// 					}
// 					img.src = 'https:' + logo;*/
// 					element.append($img.addClass('valign-wrapper'));
// 					/*if(element.hasClass('indent')) {
// 						element.parent().css('margin-left', $img.width())
// 					}*/
// 				}
// 			});
// 		}
// 	}
// }])
// .directive('pageElement', [function() {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs)
// 		{
// 			attrs.$observe('pageElement', function(page) {
// 				scope.$parent.headerBanner = 'banner';
// 				//console.log(scope.headerBanner)
// 				scope.service.academy.page(page).then(function(data) {
// 					//console.log(data)
// 					scope.$parent.headerBanner = 'banner';
// 					scope.page = data;
// 					
// 				});
// 			});
// 		}
// 	}
// }])
// .directive('collapsible', [function() {
// 	return {
// 		restrict: 'C',
// 		priority: 1000,
// 		link: function(scope, element, attrs)
// 		{
// 			angular.element(element).collapsible();
// 		}
// 	}
// }])
// .directive('inputAddress', [function() {
// 	return {
// 		restrict: 'A',
// 		templateUrl: '/templates/blocks/address-input.promptskill'
// 	}
// }])
/* content element */
.directive('tiny', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) {
			var $child = element.children();
		}
	}
}])
// .directive('minHeight', [function() {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs) {
// 			attrs.$observe('minHeight', function(height) {
// 				element.css('min-height', height);
// 			});
// 		}
// 	}
// }])
.directive('fitBrief', [function() {
	return {
		restrict: 'A',
		priority: 10,
		link: function(scope, element, attrs) {
			scope.$watch(attrs.ngBindHtml, function(newvalue) {
				var fontSize = parseInt(element.css('font-size'));
				if(newvalue !=undefined) {
					var blockBrief = element.parent().find('.row');
					var brief = blockBrief.find('.brief');	
					//
					//console.log(fontSize)
					//console.log(brief.height())
					//console.log(blockBrief.height())
					var marginTop = (blockBrief.height() -brief.height()) /fontSize;
					//element.css('margin-top', -marginTop +'em');
					element.children().children().children(':first-child').css('margin-top', -marginTop+'em');
				}
			})
			
		}
	}
}])
// .directive('bottom', [function() {
// 	return {
// 		restrict: 'C',
// 		link: function(scope, element, attrs)
// 		{
// 			var bottom = element.parent().css('padding-bottom');
// 			//console.log(bottom)
// 			element.css('bottom', bottom);
// 		}
// 	}
// }])
// .directive('height', [function() {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs)
// 		{
// 			attrs.$observe('height', function(height) {
// 				if(height=='auto') {
// 					element.css('height', height);
// 				}
// 			});
// 		}
// 	}
// }])
// .directive('padding', [function() {
// 	return {
// 		restrict: 'C',
// 		link: function(scope, element, attrs)
// 		{
// 			attrs.$observe('padding', function(padding) {
// 				element.css('padding', padding);
// 			});
// 		}
// 	}
// }])
// .directive('borderRadius', function() {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs)
// 		{
// 			attrs.$observe('borderRadius', function(radius) {
// 				element.css('border-radius', radius);
// 			});
// 		}
// 	}
// })
// .directive('textFit', [function() {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs)
// 		{
// 			var width = $(element).width();
// 			//console.log(attrs.font)
// 			element.addClass(attrs.font)
// 		}
// 	}
// }])
// .directive('banner', [function() {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs)
// 		{
// 			attrs.$observe('banner', function(image) 
// 			{
// 				//var vw = 100;
// 				var $img = $('<img/>').attr('src', image);
// 				//var img = new Image();
// 				//img.onload = function() {
// 				//	vw = this.width / 1920 * 100;
// 				if(attrs.width!=undefined) {
// 					$img.css('width', attrs.width)
// 				} else {
// 					$img.css('width', '100%');
// 				}
// 				//}
// 				//img.src = 'https:' + image;
// 				if(image!='')
// 					element.append($img);
// 			});
// 		}
// 	}
// }])
.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;
					element.css('padding-top', ratio *100+'%');
					element.css('position','relative');
				}
				img.src = 'https:' + image;
				element.css('background-image', "url('"+image+"')").addClass('cover');
			});
		}
	}
}])
.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('qrPay', [function() {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs)
// 		{
// 			var uri = scope.payment.info.gateway.qrCodeUrl;
// 			var $img = $('<img/>');
// 			if(attrs.width!=undefined) {
// 				$img.css('width', attrs.width)
// 			} else {
// 				$img.css('width', '100%');
// 			}
// 			scope.service.course.promptpay(uri, scope.payment.token).then(function(data) {
// 				//console.log(data)
// 				$img.attr('src', data.image);
// 				element.append($img)
// 			})
// 		}
// 	}
// }])
// .directive('promptPay', [function() {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs)
// 		{
// 			var uri = scope.payment.info.gateway.qrCodeUrl;
// 			var $img = $('<img/>');
// 			if(attrs.width!=undefined) {
// 				$img.css('width', attrs.width)
// 			} else {
// 				$img.css('width', '100%');
// 			}
// 			scope.service.course.promptpay(uri, scope.payment.token).then(function(data) {
// 				//console.log(data)
// 				$img.attr('src', data.image);
// 				element.append($img)
// 			})
// 		}
// 	}
// }])
// .directive('payinSlip', [function() {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs)
// 		{
// 			var uri = scope.payment.info.gateway.qrCodeUrl;
// 			var $img = $('<img/>');
// 			if(attrs.width!=undefined) {
// 				$img.css('width', attrs.width)
// 			} else {
// 				$img.css('width', '100%');
// 			}
// 			scope.service.course.promptpay(uri, scope.payment.token).then(function(data) {
// 				//console.log(data)
// 				$img.attr('src', data.image);
// 				element.append($img)
// 			})
// 		}
// 	}
// }])
.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')
				} else {
					$(element).parent().find('.toggle.current').removeClass('current');
					element.addClass('current')
				}
			});
		} 
	}
}])
.directive('stylePhoto', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			var $container = $('<i/>').css({position:'absolute',top:0,width:'100%',height:'100%'}).addClass(attrs.color);
			element.addClass('photo');
			attrs.$observe('stylePhoto', function(image) 
			{	
				element.addClass(attrs.color)
				//var img = new Image();
				//img.onload = function() {
				element.css('padding-top', attrs.height / attrs.width * 100+'%');
				element.css('position','relative');
				//}
				//img.src = 'https:' + image;
				element.css('background-image', "url('"+image+"')");
				if (attrs.color !='') {
					element.prepend($container);
				} else {
					element.html('')
				}
			});
		}
	}
}])
.directive('backgroundImage', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			attrs.$observe('backgroundImage', function(image)
			{
				var img = new Image();
				img.onload = function() {
					//console.log(this.width + ' x ' + this.height);
					var height = (this.height / this.width) * 100;
					//console.log(padTop);
					//element.css('min-height', height + 'vw');
					if(attrs.height !='auto')
						element.css('height', height + 'vw');
				}
				img.src = 'https:' + image;
				element.css("background-image", "url('"+image+"')");
				//element.css('padding-top', padTop + '%');
				element.addClass('background-image width');
			});
		}
	}
}])
.directive('headerBanner', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			//console.log('header banner')
			attrs.$observe('headerBanner', function (image) {
				console.log(image)
				if(image && image!='banner') {
					var img = new Image();
					img.onload = function() {
						//console.log(this.width + ' x ' + this.height);
						var height = (this.height / this.width) * 100;
						//console.log(padTop);
						//element.css('min-height', height + 'vw');
						element.css('height', '19em');
						//element.addClass('white-text');
					}
					img.src = 'https:' + image;
					element.css("background-image", "url('"+image+"')");
					//element.css('padding-top', padTop + '%');
					element.addClass('background-image width cover center');
				} else {
					element.removeAttr("style");
				}
			});
			//}
		}
	}
}])

/* PromptSkill Home */
.directive('carouselSlider', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			attrs.$observe('carouselSlider', function() 
			{
				var	$carousel = $('<div/>').addClass('carousel news-carousel home-banner');
				element.append($carousel);
				
				var banners = [
					{
						"background": "//services.promptskill.com/app/promptskill/public/img/background/background-promptskill.jpg",
						"logo": "//dinsoradvertising.com/public/img/logo/dinsor-24years-logo.png",
						"configClass": "carousel-item-1",
						"title_th": "พร้อมเปลี่ยนโลก <br />การเรียนรู้ไปกับ <br />พรอมท์ สกิล",
						"title_en": "Get ready for new learning experience",
						"brief_th": "แพลตฟอร์มเรียนออนไลน์ที่จะพาสนุกไปกับคอนเทนต์ วิดีโอ ในบทเรียน ด้วยทีมงาน Learning Solution Provider ผลิต courseware ที่มีประสบการณ์มากกว่า 15 ปี",
						"brief_en": "An online learning platform that brings fun with video content in lessons with a Learning Solution Provider team producing courseware with more than 15 years of experience."
					},
					// {
					// 	"background": "//services.promptskill.com/app/promptskill/public/img/background/background-abac.jpg",
					// 	"logo": "//services.promptskill.com/app/promptskill/public/img/logo/logo-banner-abac.png",
					// 	"configClass": "carousel-item-2",
					// 	"title": "PROMPT SKILL <br />ร่วมกับ IIBD ABAC",
					// 	"brief": "ลงนามข้อตกลงทางวิชาการร่วมมือทางด้านวิชาการและนวัตกรรมเพื่อสนับสนุนการพัฒนาด้านการศึกษาในรูปแบบ e-Learning"
					// },
					// {
					// 	"background": "//services.promptskill.com/app/promptskill/public/img/background/background-promptskill.jpg",
					// 	"logo": "//services.promptskill.com/app/promptskill/public/img/logo/logo-dinsor22.png",
					// 	"configClass": "carousel-item-1",
					// 	"title": "พร้อมเปลี่ยนโลก <br />การเรียนรู้ไปกับ <br />พรอมท์ สกิล",
					// 	"brief": "แพลตฟอร์มเรียนออนไลน์ที่จะพาสนุกไปกับคอนเทนต์ วิดีโอ ในบทเรียน ด้วยทีมงาน Learning Solution Provider ผลิต courseware ที่มีประสบการณ์มากกว่า 15 ปี"
					// },
					// {
					// 	"background": "//services.promptskill.com/app/promptskill/public/img/background/background-abac.jpg",
					// 	"logo": "//services.promptskill.com/app/promptskill/public/img/logo/logo-banner-abac.png",
					// 	"configClass": "carousel-item-2",
					// 	"title": "PROMPT SKILL <br />ร่วมกับ IIBD ABAC",
					// 	"brief": "ลงนามข้อตกลงทางวิชาการร่วมมือทางด้านวิชาการและนวัตกรรมเพื่อสนับสนุนการพัฒนาด้านการศึกษาในรูปแบบ e-Learning"
					// }
				]
				
				var designWidth = 1920;
				angular.forEach(banners, function(banner, index) {
					var	$item = $('<div/>').addClass('carousel-item home-banner');
					$carousel.append($item);
					
					// background banner
					var img = new Image();
					img.onload = function() {
						var height = this.height / designWidth;
						$item.css('height', height *100+'vw');
					}
					img.src = 'https:' + banner.background;
					$item.css('background-image', "url('"+banner.background+"')").addClass('cover');
					
					// logo banner
					if(banner.logo) {
						var $logo = $('<img/>').addClass(banner.configClass).attr('src', banner.logo);
						$item.append($logo);
					}
					
					// content banner
					var $container = $('<div/>').addClass('container section-wrapper');
					var $row = $('<div/>').addClass('row').css('padding-top', '12em');
					var $col = $('<div/>').addClass('col s8 m6');
					var $title = $('<h2/>').addClass('black-text overline-text topic').html(scope.language=='en-US' ? banner.title_en : banner.title_th);
					var $brief = $('<p/>').addClass('black-text regular content-desc').html(scope.language=='en-US' ? banner.brief_en : banner.brief_th);
					$title.attr('data-aos', 'fade-right').attr('data-aos-delay', '1500').attr('data-aos-duration', '700');
					$brief.attr('data-aos', 'fade-up').attr('data-aos-delay', '2000').attr('data-aos-duration', '700');
					$col.append($title).append($brief);
					$container.append($row.append($col));
					$item.append($container);

				});
				
				// initialization carrousel news banner
				$carousel.carousel({
					fullWidth: true,
					indicators: true
				});
				
				//auto next slide banner
				setInterval(function () {
					$carousel.carousel('next');
				}, 6000);
			});
		}
	}
}])

.directive('animationService', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			attrs.$observe('animationService', function() 
			{
				// var	$wrapper = $('<div/>').addClass('wrapper');
				// element.append($wrapper);
				// 
				// var animations = [
				// 	{
				// 		"backgroundDesktop": "//services.promptskill.com/app/promptskill/public/img/background/background-notebook-1.jpg",
				// 		"backgroundAnime": "//services.promptskill.com/app/promptskill/public/img/background/background-notebook.png",
				// 		"title": "สนุกไปกับทุกการเรียนรู้",
				// 		"brief": "ด้วยการออกแบบหลักสูตรให้น่าสนใจ",
				// 		"descrption": '“พรอมท์ สกิล” เล็งเห็นถึงความสำคัญของการเรียนรู้ และความสุขในการเรียนรู้ ผ่านหน้าจออุปกรณ์ที่ผู้เรียนรู้ใช้งาน จึงเกิดเป็นการออกแบบส่วนประกอบหน้าเว็บไซต์และบทเรียนให้สวยงามในสไตล์ แม็กกาซีน เพื่อให้ผู้เรียนรู้ได้เพลิดเพลินไปกับบทเรียนที่น่าอ่านและวิดีโอบทเรียนที่น่าติดตาม',
				// 		"backgroundComponent": "//services.promptskill.com/app/promptskill/public/img/background/background-mobile-promptskill.png",
				// 		"styleBackgroundComponent": "bg-anime-1 anime1"
				// 		
				// 	},
				// ];
				
				//
				$(document).ready(function() {
					setTimeout(function() {
						
						// scroll trigger
						ScrollTrigger.defaults({
							markers:false
						})
						
						var points = gsap.utils.toArray('.point');
						var indicators = gsap.utils.toArray('.indicator');
						
						var height = 100 * points.length;
						
						gsap.set('.indicators', {display: "flex"});
						
						var tl = gsap.timeline({
							duration: points.length,
							scrollTrigger: {
								trigger: ".animation-service",
								start: "top center",
								end: "+="+height+"%",
								scrub: true,
								id: "points",
								onEnter: () => $('#background-desktop').css('display', 'none'),
								onLeaveBack: () => $('#background-desktop').css('display', 'block')
							}
						})
						
						var pinner = gsap.timeline({
							  scrollTrigger: {
								trigger: ".animation-service .wrapper",
								start: "top top",
								end: "+="+height+"%",
								scrub: true,
								pin: ".animation-service .wrapper",
								pinSpacing: true,
								id: "pinning",
								markers: false
							  }
						})
						
						points.forEach(function(elem, i) {
							
							gsap.set(elem, {position: "absolute", top: 0});
							
							tl.from(elem.querySelector('img'), {autoAlpha:0}, i)
							tl.from(elem.querySelector('article'), {autoAlpha:0, translateY: 100, duration: 0.55}, i)
							tl.from(elem.querySelector('.anime1'), {autoAlpha:0, translateY: 200}, i)
							tl.from(elem.querySelector('.anime2'), {autoAlpha:0, translateY: 100, duration: 1}, i)
							tl.from(elem.querySelector('.anime3'), {autoAlpha:0, translateX: 100}, i)
							
							if (i != points.length-1) {
								tl.to(elem.querySelector('article'), {autoAlpha:0}, i + 0.75)
								tl.to(elem.querySelector('img'), {autoAlpha:0}, i + 0.75)
								tl.to(elem.querySelector('.anime1'), {autoAlpha:0, translateY: -500, duration: 0.25}, i + 0.75)
								tl.to(elem.querySelector('.anime2'), {autoAlpha:0, translateY: 500, duration: 0.25}, i + 0.75)
								tl.to(elem.querySelector('.anime3'), {autoAlpha:0, translateX: 500, duration: 0.25}, i + 0.75)
							}
						
						});
						//
					}, 1000);
				});
				//

			});
		}
	}
}])

.directive('animationSeminar', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			attrs.$observe('animationSeminar', function() 
			{
				var	$container = $('<div/>').addClass('container section-wrapper');
				element.append($container);
				
				var $row = $('<div/>').addClass('row');
				$container.append($row);
				var col = $('<div/>').addClass('col s12 m12 right-align left-align-sm');
				var $topic = $('<h1/>').addClass('black-text medium underline-text title').text(scope.language=='en-US' ? "Can be applied in many ways" : "ประยุกต์ใช้ได้หลากหลาย");
				$row.append(col.append($topic));
				
				var $title = $('<h1/>').addClass('black-text medium topic').css('margin-top', '-0.1em');
				$title.html(scope.language=='en-US' ? 'Manage work <br/>Complete <span class="red-text">seminar</span>' : 'บริหารงาน<span class="red-text">สัมมนา</span>ครบ<br/>จบในคลิ๊กเดียว');
				$row.append(col.append($title));
				
				var $colContent = $('<div/>').addClass('col s12 m12 l5 offset-l7');
				var $desc = $('<p/>').addClass('black-text regular content-desc').css('margin-top', '2em');
				$desc.attr('data-aos', 'fade-up');
				$desc.attr('data-aos-delay', '300');
				$desc.text(scope.language=='en-US' ? 'PROMPT SKILL is more than general E-Learning because we take online learning management knowledge and apply it to a complete online seminar. You can click to register, study, take a test, and do a satisfaction assessment. and issue certificates in one link.' : 'PROMPT SKILL เป็นมากกว่า E-Learning ทั่วไป เพราะเรานำเอาองค์ความรู้การจัดการการเรียนออนไลน์มาปรับใช้กับงานสัมมนาออนไลน์ได้อย่างครบวงจร โดยสามารถคลิกลงทะเบียน เรียน ทำแบบทดสอบ ทำแบบประเมินความพึงพอใจ และออกใบประกาศนียบัตรได้ในลิงก์เดียว');
				$row.append($colContent.append($desc));
				
				var $bgSeminar = $('<img/>').css({
					width: '100%',
					position: 'absolute',
					right: '0',
					bottom: '0'
				});
				$bgSeminar.attr('src', '//services.promptskill.com/app/promptskill/public/img/background/background-seminar.png');
				$container.append($bgSeminar);
				
				var $bgScroll = $('<div/>').css({
					width: '23.177%',
					position: 'absolute',
					left: '46.198%',
					// top: '65.145%',
					borderRadius: '0.6em',
					backgroundImage: "url('//services.promptskill.com/app/promptskill/public/img/background/background-newagri-web.png')",
					backgroundSize: '100%',
					backgroundRepeat: 'no-repeat'
				});
				$bgScroll.attr('id', 'bg-scroll-position');
				$bgScroll.append($('<div/>').css('padding-top', '75%'));
				$container.append($bgScroll);
				
				//
				$(document).ready(function() {
					setTimeout(function() {
						
						// animate on scroll library
						AOS.init();
						
						// scroll trigger
						var position = '+=500';
						
						if (window.matchMedia('(max-width: 768px)').matches) {
							position = 'top top';
							$bgScroll.css('top', '81.5%');
						}
						
						gsap.utils.toArray('.content-img-seminar').forEach(layer => {
							  ScrollTrigger.create({
								trigger: layer,
								pin: layer,
								start: position,
								// end: ''
								pinSpacing: true,
								markers: false,
								scrub: true,
								onUpdate: self => {
									$('#bg-scroll-position').css('background-position-y', '-' + self.progress.toFixed(3)*200 + 'px');
								}
							  });
						});
						//
					}, 1000);
				});
				//
			});
		}
	}
}])

.directive('clientService', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			attrs.$observe('clientService', function() 
			{
				//
				var clients = [
					{
						"image": "//services.promptskill.com/app/promptskill/public/img/logo/clients/logo-abac.png",
						"progress": true
					},
					{
						"image": "//services.promptskill.com/app/promptskill/public/img/logo/clients/logo-nida.png",
						"progress": false
					},
					{
						"image": "//services.promptskill.com/app/promptskill/public/img/logo/clients/logo-tu.png",
						"progress": false
					},
					{
						"image": "//services.promptskill.com/app/promptskill/public/img/logo/clients/logo-dbd.png",
						"progress": true
					},
					{
						"image": "//services.promptskill.com/app/promptskill/public/img/logo/clients/logo-ditp.png",
						"progress": false
					},
					{
						"image": "//services.promptskill.com/app/promptskill/public/img/logo/clients/logo-nea.png",
						"progress": false
					},
					{
						"image": "//services.promptskill.com/app/promptskill/public/img/logo/clients/logo-domaster.png",
						"progress": false
					},
					{
						"image": "//services.promptskill.com/app/promptskill/public/img/logo/clients/logo-newagri.png",
						"progress": false
					},
					{
						"image": "//services.promptskill.com/app/promptskill/public/img/logo/clients/logo-smart-exporter.png",
						"progress": true
					}
				];
				
				//
				var	$container = $('<div/>').addClass('container section-wrapper');
				element.append($container);
				
				var	$row = $('<div/>').addClass('row');
				var	$col = $('<div/>').addClass('col s12 m12');
				var $topic = $('<h3/>').addClass('black-text medium underline-text topic').text(scope.$eval("'Customers and courses that use the service' | phrase:locale"));
				$row.append($col.append($topic));
				$container.append($row);
				
				// clients list
				$row = $('<div/>').addClass('row').css('margin-top', '3em');
				var count = 1;
				angular.forEach(clients, function(client) {
					
					$col = $('<div/>').addClass('col s4 m4 center');
					var $logo = $('<img/>').attr('src', client.image);
					$col.append($logo);
					if(client.progress) {
						var $progress = $('<p/>').addClass('grey-text small content-desc').text('*'+scope.$eval("'In progress' | phrase:locale"));
						$col.append($progress);
					}
					$row.append($col);
					$container.append($row);
					
					count++;
					
					if(count == 4) {
						count = 1;
						$row = $('<div/>').addClass('row').css('margin-top', '5em');
					}
				});
				//
			});
		}
	}
}])

.directive('scrollAnimate', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			attrs.$observe('scrollAnimate', function() 
			{
					
				// animate on scroll library
				AOS.init();

			});
		}
	}
}])

/* course */
.directive('programCourse', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			attrs.$observe('programCourse', function() 
			{
				//mockup
				var nameCourse = scope.$eval("'Examples of our courses' | phrase:locale");
				var type = attrs.type;
				var courses = [
					{
						"background": "//services.promptskill.com/app/promptskill/public/img/courses/course-first-aid.jpg",
						"name_th": "หลักสูตร การปฐมพยาบาลและดูแลตัวเองเบื้องต้น (FIRST AID)",
						"name_en": "First Aid and Basic Self-Care Course (FIRST AID)",
						"lecturer_th": "พว.พิมพ์ใจ ปราชญ์ชลชาญ",
						"lecturer_en": "P.W. Pimjai Prachonchan"
					},
					{
						"background": "//services.promptskill.com/app/promptskill/public/img/courses/course-ikigai.jpg",
						"name_th": "หลักสูตร IKIGAI เคล็ดลับความสุขในการตั้งเป้าหมายชีวิตของคนญี่ปุ่น",
						"name_en": "IKIGAI Course: The Secret to Happiness in Setting Life Goals for Japanese People",
						"lecturer_th": "นัททินี วงศ์เฉลิมทานต์",
						"lecturer_en": "Natthinee Wongchalermthan"
					},
					{
						"background": "//services.promptskill.com/app/promptskill/public/img/courses/course-teach-thai.jpg",
						"name_th": "หลักสูตร Teach Thai ภาษาไทยเพื่อชาวต่างชาติ",
						"name_en": "Teach Thai course, Thai language for foreigners",
						"lecturer_th": "ศศพร สุนทรพาณิชย์",
						"lecturer_en": "Sasaporn Sunthornphanit"
					},
					{
						"background": "//resourcespace.promptskill.com/resources/course/71/baeb2e0e-5c78-4c63-9b20-0825dbec404d/image/Happineering_600x300.jpg",
						"name_th": "Happineering : Empower Happiness Hormone in building Team Leadership",
						"name_en": "Happineering : Empower Happiness Hormone in building Team Leadership",
						"lecturer_th": "กฤษณ์ รุยาพร และสุภาวดี รุยาพร",
						"lecturer_en": "Krit Ruyaporn and Supawadee Ruyaporn"
					}
				];
				
				//
				var $container = $('<div/>').addClass('container section-course');
				element.append($container);
				
				var $rowTopic = $('<div/>').addClass('row');
				var $colTopic = $('<div/>').addClass('col s12 m12');
				var $nameCourse = $('<h3/>').addClass('black-text medium underline-text topic').text(nameCourse);
				$rowTopic.append($colTopic.append($nameCourse));
				$container.append($rowTopic);
				
				// program courses
				var $rowCourse = $('<div/>').addClass('row');
				$container.append($rowCourse);
				
				angular.forEach(courses, function(course) {
					var $colCourse = $('<div/>').addClass('col s6 m3');
					var $card = $('<div/>').addClass('card-course hoverable');
					var $cardImage = $('<div/>').addClass('card-image course-image');
					var background = new Image();
					background.onload = function() { 
						$cardImage.css('padding-top', this.height / this.width *100+'%');
						$cardImage.css('background-image', "url('"+course.background+"')").addClass('cover');
						$cardImage.css('background-repeat', 'no-repeat');
						$cardImage.css('background-size', 'contain');
					}
					background.src = 'https:'+ course.background;
					
					var $cardContent = $('<div/>').addClass('card-content').css('min-height', '160px');
					var $courseName = $('<p/>').addClass('course-title truncate-2 dbadman bold').text(scope.language=='en-US' ? course.name_en : course.name_th);
					var $courseBrief = $('<p/>').addClass('course-instructor truncate-1 grey-text text-darken-1 dbadman bold').text(scope.language=='en-US' ? course.lecturer_en : course.lecturer_th);
					var $btnCourse = $('<a/>').addClass('waves-effect waves-light btn btn-small z-depth-1 btn-theme dbadman bold text-transform-none disabled').text(scope.$eval("'Coming soon' | phrase:locale"));
					$btnCourse.css('margin-top', '0.5em');
					$cardContent.append($courseName).append($courseBrief).append($btnCourse);
					
					$card.append($cardImage).append($cardContent);
					$rowCourse.append($colCourse.append($card));
				});
				//
			});
		}
	}
}])

/* member service */
.directive('member', ['$window','$location','$timeout', '$filter', function($window, $location, $timeout, $filter) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			scope.$parent.promptskill = true;
			scope.$parent.headbar = false;
			scope.$parent.fullpage = true;
			scope.$parent.member = false;
			
			let program = $location.search().f;
			let filter_email = false;
			let email_domain = null;
			
			//
			attrs.$observe('member', function(action) {
				scope.service.promptskill.page('member').then(function(data) {
					// console.log(data)
					scope.page = data;
				});
				
				// Filter Email
				if(!_.isUndefined(program) && (action=='signin' || action=='signup')) {
					//
					scope.service.program.info(program).then(function(response) {
						// console.log(response);
						if(response) {
							email_domain = response.email_domain;
							if(email_domain!=null && email_domain!='') {
								filter_email = true;
								$("#authen form").css('height', '34.5em');
								$("input[name='username']").attr('placeholder', `@${email_domain}`);
							}
						}
					});
				}
				
				/* Sign In with Google for Web */
				// if(action=='signin' || action=='signup') {
				// 	// const $clientLibrary = $('<script/>').attr('src', 'https://accounts.google.com/gsi/client').attr('async', '');
				// 	// const clientId = '306093552103-ats013f1a2m4jvp155ibm1n9pf8tbbbk.apps.googleusercontent.com';
				// 	// const btnSignin = document.getElementById("btn_signin_google");
				// 	// element.append($clientLibrary);
				// 	//
				// 	$timeout(function() {
				// 		if(!filter_email) {
				// 			google.accounts.id.initialize({
				// 				client_id: clientId,
				// 				callback: handleCredentialResponse,
				// 				auto_select: false,
				// 				auto_prompt: false,
				// 				// ux_mode: 'popup',
				// 				context: 'signin'
				// 			});
				// 	    	google.accounts.id.renderButton(btnSignin, { 
				// 				type: 'standard',
				// 				theme: 'filled_blue', 
				// 				size: 'large',
				// 				text: 'signin_with',
				// 				// width: '1000'
				// 			});
				// 	    	google.accounts.id.prompt();
				// 		}
				// 	}, 1000);
				// 	
				// 	function handleCredentialResponse(response) {
				// 		// console.log(response.credential);
				// 		scope.service.member.identity(response.credential).then(function(response) {
				// 			// console.log(response);
				// 			if(!response.error) {
				// 				redirectSignin(response.token);
				// 			} else {
				// 				const title = $filter('phrase')(response.title, scope.locale);
				// 				const msg = $filter('phrase')(response.msg, scope.locale);
				// 				//
				// 				Swal.fire({
				// 				  icon: 'error',
				// 				  title: title,
				// 				  html: msg,
				// 				  confirmButtonText: $filter('phrase')('OK', scope.locale),
				// 				  confirmButtonColor: "#9E9E9E",
				// 				  heightAuto: false,
				// 				  timer: 5000
				// 				});
				// 			}
				// 		});
				// 	}
				// 	//
				// }
				
			});
			scope.service.member.authorized().then(function(authorized) {
				// console.log(authorized)
				if(authorized) scope.permission = authorized.user;
			})
			//
			scope.formInput = function() {
				var valid = true;
				//var $forminput = angular.element('.form-input').find('input');
				angular.forEach(angular.element('.form-input').find('input'), function(input) {
					//console.log(input)
					if(angular.element(input).val() =='') {
						angular.element(input).addClass('invalid');
						valid = false;
					}
				});
				return valid;
			}
			scope.signup = function() {
				var accepted = true;
				var $formCheck = angular.element('.form-checkbox').find('input');
				angular.forEach($formCheck, function(input) {
					accepted = accepted && angular.element(input).prop("checked"); 
				});
				if (accepted) {
					if(scope.formInput()) {
						const $btnSignup = angular.element('.form-submit').find('#btn_signup');
						$btnSignup.prop('disabled', true);
						
						// Filter Email
						const username = $("input[name='username']").val().replace(/.*@/, "@");
						const signup = filter_email && username!=`@${email_domain}` ? false : true;
						
						if(signup) {
							scope.service.member.signup(angular.element('.form-input').find('input'), scope.parameterUrl).then(function(result) {
								if(result.err) {
									scope.helper = result;
									const msg = $filter('phrase')(result.err, scope.locale);
									scope.helper = {'msg': msg};
									$btnSignup.prop('disabled', false);
								}else {
									const title = $filter('phrase')('The system has received the application information', scope.locale);
									const msg = $filter('phrase')(result.msg, scope.locale);
									//
									Swal.fire({
								  	icon: 'success',
								  	title: title,
								  	html: msg,
								  	confirmButtonText: $filter('phrase')('OK', scope.locale),
								  	confirmButtonColor: "#9E9E9E",
								  	heightAuto: false,
								  	timer: 5000,
								  	timerProgressBar: true
									}).then(() => {
										// if (result.isConfirmed) {
										scope.$apply(function() {
											// console.log(scope.otp);
											scope.$parent.otp = result.otp;
											$location.path('/activate');
										});
										// }
									})
								}
							});
						} else {
							const title = $filter('phrase')('Something went wrong', scope.locale);
							const msg = $filter('phrase')('Invalid email format', scope.locale);
							$btnSignup.prop("disabled", false);
							//
							Swal.fire({
								icon: 'warning',
								title: title,
								html: `${msg}<br />@${email_domain}`,
								confirmButtonText: $filter('phrase')('OK', scope.locale),
								confirmButtonColor: "#9E9E9E",
								heightAuto: false,
								timer: 5000,
								timerProgressBar: true
							})
						}
					}
				} else {
					const msg = $filter('phrase')('Please accept the terms of service.', scope.locale);
					scope.helper = { "msg": msg };
				}
			}
			scope.signin = function() {
				const $btnSubmit = element.find('#btn_signin');
				$btnSubmit.prop("disabled", true);
				//
				if(scope.formInput()) {
					
					// Filter Email
					const username = $("input[name='username']").val().replace(/.*@/, "@");
					const signin = filter_email && username!=`@${email_domain}` ? false : true;
					
					if(signin) {
						scope.service.member.signin(angular.element('.form-input').find('input'), scope.parameterUrl).then(function(data) {
							// console.log(data);
							if(data.err==undefined) {
								// $window.location = 'https://'+scope.service.program.domain()+'#'+data.token;
								redirectSignin(data.token);
							}else if(data.type == 'warning'){
								const title = $filter('phrase')('Warn', scope.locale);
								const msg = $filter('phrase')(data.msg, scope.locale);
								//
								Swal.fire({
									icon: 'warning',
									title: title,
									html: msg,
									confirmButtonText: $filter('phrase')('OK', scope.locale),
									confirmButtonColor: "#9E9E9E",
									heightAuto: false,
									timer: 5000,
									timerProgressBar: true
								}).then((result) => {
									// if (result.isConfirmed) {
									scope.$apply(function() {
										scope.$parent.otp = data.otp;
										$location.path('/activate');
									});
									// }
								})
								// $timeout(function() {
								// 	scope.$parent.otp = data.otp;
								// 	$location.path('/activate');
								// }, 5000);
								
								// scope.setSessionOtp(data);
								let min = 5;
								let maxTimeCount = min * 60;
								const otp = data.otp;
								const otp_invalid_time = new Date(otp.datetime)/1000 + maxTimeCount;
								window.sessionStorage.setItem('OTP_DATA', JSON.stringify(otp));
								window.sessionStorage.setItem('OTP_VALID',parseInt(otp_invalid_time));
								
							} else {
								$btnSubmit.prop("disabled", false);
								const msg = $filter('phrase')('Your email or password is incorrect.', scope.locale);
								scope.helper = { "msg": msg };
							}
						});
					} else {
						const title = $filter('phrase')('Something went wrong', scope.locale);
						const msg = $filter('phrase')('Invalid email format', scope.locale);
						$btnSubmit.prop("disabled", false);
						//
						Swal.fire({
							icon: 'warning',
							title: title,
							html: `${msg}<br />@${email_domain}`,
							confirmButtonText: $filter('phrase')('OK', scope.locale),
							confirmButtonColor: "#9E9E9E",
							heightAuto: false,
							timer: 5000,
							timerProgressBar: true
						})
					}
				}
			}
			scope.forgotPassword = function() {
				if(scope.formInput()) {
					var email = angular.element('.form-input').find('input[name="email"]').val();
					//console.log(email)
					scope.service.member.password(email, scope.parameterUrl).then(function(data) {
						//console.log(data)
						const title = $filter('phrase')(data.title, scope.locale);
						const msg = $filter('phrase')(data.msg, scope.locale);
						//
						Swal.fire({
							icon: data.type,
							title: title,
							html: msg,
							confirmButtonText: $filter('phrase')('OK', scope.locale),
							confirmButtonColor: "#9E9E9E",
							heightAuto: false,
							timer: 5000,
							timerProgressBar: true
						}).then((result) => {
							if(data.type=='success') $window.location.href = '/signin' + scope.parameterUrl;
						})
					});
				}
			}
			scope.resetPassword = function() {
				if(scope.formInput()) {
					var passwd = angular.element('.form-input').find('input[name="password"]').val();
					if(angular.element('.form-input').find('input[name="confirm_password"]').val()==passwd) {
						var email = angular.element('.form-input').find('input[name="username"]').val();
						scope.service.member.resetpassword(email, passwd).then(function(data) {
							//console.log(data)
							const title = $filter('phrase')(data.title, scope.locale);
							const msg = $filter('phrase')(data.msg, scope.locale);
							//
							Swal.fire({
								icon: data.type,
								title: title,
								html: msg,
								confirmButtonText: $filter('phrase')('OK', scope.locale),
								confirmButtonColor: "#9E9E9E",
								heightAuto: false,
								timer: 5000,
								timerProgressBar: true
							}).then((result) => {
								if(data.type=='success') $window.location.href = '/signin' + scope.parameterUrl;
								$location.hash(null);
								scope.service.member.clear();
							})
						});
					} else {
						const msg = $filter('phrase')('The new password and confirm password do not match', scope.locale);
						scope.helper = {'msg': msg}
					}
				}
			}
			
			/* Modal Policy */
			scope.modalPolicy = function(policy) {
				scope.policy = false;
				const valid = $("input[name="+policy+"]").is(":checked");
				
				// Refuse Policy Action
				scope.refusePolicy = function() {
					$("input[name="+policy+"]").prop('checked', false);
				}
				const $modal = $('#modal_policy');
				$modal.modal({
					dismissible: false
				});
				//
				if(policy && valid) {
					let title = '';
					let template = '/templates/blocks/';
					if(policy=='term') {
						title = 'Prompt Skill Service Conditions';
						template += scope.language=='en-US' ? 'terms-of-use-content-en' : 'terms-of-use-content-th';
					} else if(policy=='privacy') {
						title = 'Prompt Skill Privacy Policy';
						template += scope.language=='en-US' ? 'privacy-policy-content-en' : 'privacy-policy-content-th';
					}
					scope.modal_template = template + '.promptskill';
					$modal.find('.modal-title').text($filter('phrase')(title, scope.locale));
					$modal.modal('open');
				}
			}
			
			function redirectSignin(token) {
				const domain = $location.host();
				if($location.search().f) {
					const subdomain = $location.search().f;
					$window.location = 'https://'+subdomain+'.'+domain+'#'+token;
				}else {
					// $window.location = 'https://'+domain+'/dashboard#'+data.token;
					$window.location = 'https://'+domain+'/dashboard#'+token;
				}
			}
			//
		}
	};
}])
.directive('socialAuthentication', ['$location', '$window', function($location, $window) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) {
			//
			const providers = [
				{
					'provider': 'Google',
					'icon': 'icon-google.png',
					'status': 1
				},
				{
					'provider': 'Facebook',
					'icon': 'icon-facebook.png',
					'status': 0
				},
				{
					'provider': 'Apple',
					'icon': 'icon-apple.png',
					'status': 1
				},
			]
			// console.log(providers);
			angular.forEach(providers, function(item) {
				if(item.status==1) {
					const $btn = $('<a/>').addClass('btn btn-theme btn-authen btn-authen-other waves-effect waves-light dbadman bold large width-max');
					const $icon = $('<img/>').attr('src', `/public/img/icon/${item.icon}`);
					const $text = $('<span/>').text(item.provider);
					//
					$btn.append($icon).append($text);
					$btn.on('click', function() {
						authenticate(item.provider);
					});
					element.append($btn);
				}
			});
			
			function authenticate(type) {
				let provider;
				if (type=='Google') {
					provider = new firebase.auth.GoogleAuthProvider();
				} else if (type=='Facebook') {
					provider = new firebase.auth.FacebookAuthProvider();
					provider.addScope('email').addScope('public_profile');
				} else if (type=='Apple') {
					provider = new firebase.auth.OAuthProvider('apple.com');
					provider.addScope('email').addScope('name');
				} else 
					provider = null;
				//
				if(provider!=null) {
					firebase.auth().signInWithPopup(provider).then((result) => {
						const user = result.user;
						// console.log(user);
						user.getIdToken().then(function(idToken) {
							// console.log(idToken);
							scope.service.member.authenticate(provider.providerId, idToken).then(function(response) {
								// console.log(response);
								if(!response.error) {
									redirectSignin(response.token);
								} else {
									const title = $filter('phrase')(response.title, scope.locale);
									const msg = $filter('phrase')(response.msg, scope.locale);
									//
									Swal.fire({
										icon: 'error',
										title: title,
										html: msg,
										confirmButtonText: $filter('phrase')('OK', scope.locale),
										confirmButtonColor: "#9E9E9E",
										heightAuto: false,
										timer: 5000
									});
								}
							});
						});
					})
					.catch((error) => {
						console.error(`Auth${type}:`, error);
					});
				}
			}
			
			function redirectSignin(token) {
				const domain = $location.host();
				if($location.search().f) {
					const subdomain = $location.search().f;
					$window.location = 'https://'+subdomain+'.'+domain+'#'+token;
				}else {
					// $window.location = 'https://'+domain+'/dashboard#'+data.token;
					$window.location = 'https://'+domain+'/dashboard#'+token;
				}
			}
			//
		}
	}
}])
.directive('memberActivate', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) {
			//
			scope.$parent.promptskill = true;
			scope.$parent.headbar = false;
			scope.$parent.fullpage = true;
			scope.$parent.member = true;
			
			attrs.$observe('memberActivate', function(passKey) {
				scope.service.member.activate(passKey).then(function(result) {
					console.log(result)
					if(result) {
						element.append($('<h2/>').addClass('card-msg').text(result.msg));
						if(result.state) {
							element.prepend($('<img/>').addClass('card-icon').attr('src', '/public/img/icon/icon-accept.png'));
							element.append(
								$('<ul/>').addClass('card-action')
								.append($('<a/>').addClass('waves-effect waves-light btn btn-small z-depth-1 btn-theme regular').text('เข้าสู่ระบบ').attr('href', '/signin'))
								.append($('<a/>').addClass('waves-effect waves-light btn-flat z-depth-0 regular').text('กลับไปหน้าแรก').attr('href', '/'))
							);
						}
					}
				});
			});
		}
	}
}])
.directive('memberAuthorized', ['$location', '$window', '$compile', function($location, $window, $compile) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) {
			//
			const $btnLanguage = $('<a/>').text(scope.language=='en-US' ? 'TH' : 'EN').addClass('btn-flat z-depth-0 medium small display-flex align-items-center').attr('href', '');
			$btnLanguage.html($('<img/>').attr('src', `/public/img/icon/icon-globe-${scope.language=='en-US' ? 'th' : 'en'}.png`).css('height', '65%'));
			$btnLanguage.css({ marginLeft: '1rem', padding: '0 4px' });
			$btnLanguage.on('click', function() {
				let lang = scope.language == 'th-TH' ? 'en-US' : 'th-TH';
				let subdomain = $location.search().f ? `&f=${$location.search().f}` : '';
				$window.location.href = `${$location.path()}?l=${lang}${subdomain}`;
			});
			
			scope.service.member.authorized().then(function(authorized) {
				// console.log(authorized);
				if(authorized) {
					//
					$location.hash(null);
					
					// if(authorized.course != undefined) {
					// 	if($location.path().indexOf('/course')!=0) {
					// 		$location.path('/course/'+authorized.course);
					// 	}
					// }
					
					/* Profile */
					const $userAvatar = $('<img/>').addClass('user-avatar').attr('src', authorized.user.avatar ? authorized.user.avatar : '/public/img/icon/icon-profile.png').attr('avatar-photo', 'avatar');
					const $userFullname = $('<a/>').text(scope.mobile ? authorized.user.firstname : authorized.user.fullname).addClass('user-fullname black-text btn-flat z-depth-0 truncate-1');
					const $btnLogout = $('<a/>').text(scope.$eval("'Sign out' | phrase:locale")).addClass('waves-effect waves-light btn btn-small z-depth-1 btn-theme btn-logout regular');
					$userFullname.on('click', function() {
						$window.location.href = '/dashboard'+scope.parameterUrl;
					});
					$btnLogout.on('click', function() {
						scope.logout();
					});
					if(scope.mobile) {
						$btnLogout.html('<i class="material-icons">logout</i>');
					}
					//
					element.append($btnLogout).append($btnLanguage);
					element.prepend($userFullname).prepend($userAvatar);
					$compile(element.contents())(scope);
				} else {
					//
					const $btnSignin = $('<a/>').text(scope.$eval("'Log in' | phrase:locale")).addClass('waves-effect waves-light btn z-depth-1 btn-theme regular normal').attr('href', "/signin"+scope.parameterUrl);
					const $btnSignup = $('<a/>').text(scope.$eval("'Sign up' | phrase:locale")).addClass('waves-effect waves-light btn-flat z-depth-0 regular normal').attr('href', "/signup"+scope.parameterUrl);
					//
					element.append($btnSignin).prepend($btnSignup).append($btnLanguage);
				}
			});
			//
		}
	}
}])

/* User Service */
.directive('userDashboard', ['$location', '$window', '$filter', function($location, $window, $filter) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) {
			//
			/* User Courses */
			scope.service.user.courses().then(function(response) {
				console.log(response);
				scope.user_learner = response;
				// scope.user['learner'] = courses;
			});
			//
		}
	}
}])
.directive('userProfile', ['$location', '$window', '$filter', function($location, $window, $filter) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) {
			//
			
			/* Get Profile */
			scope.service.user.profile().then(function(response) {
				console.log(response);
				if(!response.error) scope.profile = response.data;
			});

			/* Avatar Photo */
			$('.avatar-photo .icon-edit').on( "click", async function() {
				const { value: file } = await Swal.fire({
					title: $filter('phrase')('Upload your profile picture', scope.locale),
					confirmButtonText: $filter('phrase')('OK', scope.locale),
					confirmButtonColor: "#9E9E9E",
					input: "file",
					inputAttributes: {
						"accept": "image/*",
						"aria-label": "Upload your profile picture"
					}
				});
				if (file) {
					const formData = new FormData();
					formData.append('file', file);
					// const reader = new FileReader();
					// reader.onload = (e) => {
					// 	Swal.fire({
					// 		title: $filter('phrase')('Your uploaded picture', scope.locale),
					// 		confirmButtonText: $filter('phrase')('OK', scope.locale),
					// 		confirmButtonColor: "#9E9E9E",
					// 		timer: 5000,
					// 		timerProgressBar: true,
					// 		imageUrl: e.target.result
					// 	});
					// };
					// reader.readAsDataURL(file);

					// Upload Avatar Photo
					scope.service.user.avatar(formData, null).then(function(response) {
						// console.log(response);
						if(!response.error) {
							$('.avatar-photo .photo, .nav-member .user-avatar').attr('src', response.data.photo);
							//
							const title = $filter('phrase')('Warn', scope.locale);
							const msg = $filter('phrase')(response.msg, scope.locale);
							Swal.fire({
								icon: !response.error ? 'success' : 'warning',
								title: title,
								html: msg,
								confirmButtonText: $filter('phrase')('OK', scope.locale),
								confirmButtonColor: "#9E9E9E",
								heightAuto: false,
								timer: 5000,
								timerProgressBar: true
							}).then((result) => {
								// $window.location.reload();
							})
						}
					});
				}
			});
			
			/* Edit Profile */
			scope.updateProfile = function() {
				const formId = '#form_profile';
				const formData = [];
				
				$.each($(formId).serializeArray(), function(index, key) {
					formData[key.name] = key.value;
				});
				// console.log(formData);
				scope.service.user.profile(formData).then(function(response) {
					// console.log(response);
					if(!response.error) {
						const title = $filter('phrase')('Warn', scope.locale);
						const msg = $filter('phrase')(response.msg, scope.locale);
						//
						Swal.fire({
							icon: !response.error ? 'success' : 'warning',
							title: title,
							html: msg,
							confirmButtonText: $filter('phrase')('OK', scope.locale),
							confirmButtonColor: "#9E9E9E",
							heightAuto: false,
							timer: 5000,
							timerProgressBar: true
						}).then((result) => {
							// $window.location.reload();
						})
					}
				});
				//
			}
			
			/* Change Password */
			scope.changePassword = function() {
				const new_password = $('#new_password').val();
				const confirm_password = $('#confirm_password').val();
				//
				if(new_password != confirm_password) {
					const title = $filter('phrase')('Something went wrong', scope.locale);
					const msg = $filter('phrase')('Password and Confirm Password do not match', scope.locale);
					//
					Swal.fire({
						icon: 'warning',
						title: title,
						html: msg,
						confirmButtonText: $filter('phrase')('OK', scope.locale),
						confirmButtonColor: "#9E9E9E"
					})
				} else {
					scope.service.user.changepassword(new_password).then(function(response) {
						// console.log(response)
						const title = $filter('phrase')(response.title, scope.locale);
						const msg = $filter('phrase')(response.msg, scope.locale);
						//
						Swal.fire({
							icon: response.type,
							title: title,
							html: msg,
							confirmButtonText: $filter('phrase')('OK', scope.locale),
							confirmButtonColor: "#9E9E9E",
							heightAuto: false,
							timer: 5000,
							timerProgressBar: true
						}).then((result) => {
							$window.location.href = '/profile';
						})
					});
				}
			}
			//
		}
	}
}])
.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);
										}
									});
									//
								});
							}
						});
						//
					}
				})
			});
		}
	}
}])
.directive('user', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			scope.user.editText = 'แก้ไข';
			scope.editProfile = function() {
				scope.user.edit = true;
				//scope.user.editText = scope.user.edit ?'ยกเลิก' :'แภ้ไข';
			};
			scope.updateProfile = function() {
				var $profiles = angular.element('#profile input.updated');
				//console.log($profiles)
				angular.forEach($profiles, function(input) {
					var $input = angular.element(input);
					scope.service.user.update($input.attr('name'), $input.val());
				});
				//
				scope.service.user.profile(scope.service.academy.aid()).then(function(data) {
					scope.user['profile'] = data;
					scope.user.edit = false;
				});
			};
			scope.updatePasswd = function() {
				var $passwd = angular.element('#password input');
				var passwd = {}
				angular.forEach($passwd, function(input) {
					var $input = angular.element(input);
					if($input.val()=='') {
						$input.addClass('invalid');
					}
					passwd[$input.attr('name')] = $input.val();
				});
				//console.log(passwd);
				scope.user.password = passwd;
				scope.service.user.changePassword(passwd).then(function(data) {
					scope.formdata.helper = data.msg	
				});
			};
			scope.user.edit = false;
			scope.service.user.profile(scope.service.academy.aid()).then(function(data) {
				//console.log(data)
				scope.user['profile'] = data;
				scope.user.photo = scope.service.user.avatar();
				//console.log(scope.user)	
				//scope.user.fullname = scope.user.profile.firstname+' '+scope.user.profile.lastname;
			});
		}
	}
}])
.directive('userPhoto', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			var $photo = angular.element('<input type="file"/>').attr('name', 'photo').css('width',0)
			.on('change', function() {
				var file = this.files[0];
				var reader = new FileReader();
				//
				reader.onloadend = function () {
					element.css('background-image', 'url("' + reader.result + '")');
            	}
            	reader.readAsDataURL(file);
			});
			//$('<i/>').addClass('material-icons red-text lighten-2 right click').text('photo')
			angular.element('<a/>').addClass('btn-flat normal').text('แก้ไข').css({marginTop:element.height()})
			.on('click', function() {
				$photo.click();
			}).appendTo(element);
			$photo.on('change', function() {
				var file = $photo[0].files[0];
				var formdata = new FormData();
				//console.log(file)
				formdata.append('file', file);
				scope.service.user.photo(formdata).then(function(data) {
					scope.service.user.avatar(undefined, data.avatar);
					angular.element('.small.avatar').css('background-image', "url('"+scope.service.user.avatar('small')+"')");
				});
			})
			//
			element.append($photo)
			scope.$watch('user.photo', function (photo) {
				element.addClass('background-image')
				element.css('background-image', 'url('+photo+')')
			});
		}
	}
}])

// .directive('forgotPassword', [function() {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs)
// 		{
// 			scope.formdata = {}
// 			scope.forgotPassword = function() {
// 				var email = angular.element('.form-input').find('input[name="email"]').val()
// 				scope.service.user.password(email, 'passwd').then(function(data) {
// 					console.log(data)
// 				});
// 			}
// 		}
// 	}
// }])
// .directive('dashboard', [function() {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs)
// 		{
// 			var $userInfo = $('<nav/>').addClass('nav-wrapper relative transparent z-depth-0 black-text');
// 			$('<a/>').addClass('circle avatar large brand-logo center').css('bottom', 0).css('background-image', "url('"+scope.service.user.avatar()+"')").appendTo($userInfo);
// 			element.addClass('dashboard')
// 			scope.service.user.dashboard().then(function(data) {
// 				//console.log(data)
// 				scope.dashboard = data;
// 				scope.$parent.headerBanner = data.element.header.background
// 				//console.log(scope.headerBanner)
// 			});
// 			element.prepend($userInfo)
// 		}
// 	}
// }])
// .directive('inputAddress', [function() {
// 	return {
// 		restrict: 'A',
// 		templateUrl: '/templates/form/address.promptskill',
// 		link: function(scope, element, attrs) 
// 		{
// 			
// 		}
// 	}
// }])
// .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);
// 				}
// 			});
// 		}
// 	}
// }])


/* Course Program */
.directive('courseState', ['$location', '$window', function($location, $window) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) {
			var $btState = $('<a/>').addClass('waves-effect waves-light btn z-depth-1 btn-theme normal medium');
			element.append($btState);
			scope.course_state = false;
			attrs.$observe('courseState', function(code) {					
				if(code) {
					// $btState.text(!scope.course.free_course ? scope.$eval("'Buy now' | phrase:locale") : scope.$eval("'Enroll' | phrase:locale"));
					element.removeAttr('course-state');
					scope.service.member.authorized().then(function(authorized) {
						if(authorized) {
							scope.service.course.state(code).then(function(state) {
								// console.log(state)
								// console.log(scope.service.user.token())
								if(scope.service.user.token()=='' && !scope.course.invitation) {
									state.text = 'Register';//scope.$eval("'Register' | phrase:locale");
									state.code = 'register';
								}
								// console.log(scope.course)
								if(state.code=='enrol') {
									scope.course_state = true;
									if(scope.course.invitation) {
										// scope.service.member.authorized().then(function(authorized) {
											// console.log(authorized)
											if(authorized.invite !=code) {
												element.remove();
											}
										// });
										// console.log(element)
										//.addClass('disabled invisible')
									} else {
										if(!scope.course.free_course) {
											state.code = 'order';
										}
									}
								}
								// console.log(state.text)
								$btState.addClass(state.code).text(scope.$eval("'"+state.text+"'| phrase:locale"));
								// if(scope.course.free_course && (state.code=='enrol' || state.code=='order')) {
								// 	$btState.addClass(state.code).text(scope.$eval("'Enroll'| phrase:locale"));
								// }
								//
								$btState.on('click', function() {
									// scope.service.course.apply(code, state)
									const domain = `//${ element.attr('data-domain') }.promptskill.com`;
									let activity = state.activity ? domain+'/course/'+code+'/'+state.activity : domain+'/course/'+code;
									$window.location = activity;
								});
							});
						} else {
							scope.course_state = true;
							$btState.on('click', function() {
								$window.location.href = scope.gotoParamUrl('https://promptskill.com/signin');
								// scope.gotoUrl('signin')
							});
						}
					});
				}
			});
		}
	}
}])


/* form input */
.directive('formHelper', ['$window', '$filter', function($window, $filter) {
	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 = $filter('phrase')('Something went wrong', scope.locale);
						helper.type = 'warning';
					}
					Swal.fire({
						title: helper.title,
						html: text,
						icon: helper.type,
						confirmButtonText: $filter('phrase')('OK', scope.locale),
						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('showHidePassword', ['$compile', function($compile) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			const $suffixIcon = element.find('.suffix');
			const $input = element.find('input');
			
			// toggle password visibility function
			$suffixIcon.on( "click", function() {
				if($input.attr('type')=='password') {
					$input.attr('type', 'text');
					$suffixIcon.text('visibility').addClass('black-text');
				}else {
					$input.attr('type', 'password');
					$suffixIcon.text('visibility_off').removeClass('black-text');
				}
			});
			//
		}
	}
}])

.directive('otpActivate',['$window', '$timeout', '$location', '$filter', function($window, $timeout, $location, $filter) {
	return{
		restrict: 'A',
		link: function(scope, element, attrs) {
			
			scope.$parent.promptskill = true;
			scope.$parent.headbar = false;
			scope.$parent.fullpage = true;
			scope.$parent.member = false;
			
			var min = 5;
			var minutes,seconds;
			var maxTimeCount = min * 60;
			var disableBtn = false;
			var $time = $('<span/>').addClass('countdown').css({width:'2.8em',display:'inline-block'});
			
			var otp_lenght = 6;
			var $otp_field = $('<div/>').addClass('otp-field');
			var $input = $('<input/>').attr({type:'number'});
			var $send_otp_link = $('<a/>').text($filter('phrase')('Resend verification code again', scope.locale)).css({textDecoration:'underline',cursor:'pointer'});
			var $confirm_btn = $('<a/>').addClass('btn otp-btn medium').text($filter('phrase')('Confirm OTP code', scope.locale));
			
			scope.setSessionOtp = function(response){
				let min = 5;
				let maxTimeCount = min * 60;
				const otp = response.otp;
				const otp_invalid_time = new Date(otp.datetime)/1000 + maxTimeCount;
				window.sessionStorage.setItem('OTP_DATA', JSON.stringify(otp));
				window.sessionStorage.setItem('OTP_VALID',parseInt(otp_invalid_time));
			}
			
			// console.log(window.sessionStorage.getItem('OTP_DATA') == '{}');
			// console.log(scope.otp);
			if(window.sessionStorage.getItem('OTP_DATA') != null && window.sessionStorage.getItem('OTP_DATA') != '{}' && window.sessionStorage.getItem('OTP_DATA').ref == scope.otp.ref){
				scope.$parent.otp = JSON.parse(window.sessionStorage.getItem('OTP_DATA'));
			}else{
				window.sessionStorage.setItem('OTP_DATA',JSON.stringify(scope.otp));
			}
			
			if(window.sessionStorage.getItem('OTP_VALID') != null && window.sessionStorage.getItem('OTP_VALID') != 'NaN' && window.sessionStorage.getItem('OTP_DATA').ref == scope.otp.ref){
				var otp_invalid_time = window.sessionStorage.getItem('OTP_VALID');
			}else{
				var otp_invalid_time = new Date(scope.otp.datetime)/1000 + maxTimeCount;
				window.sessionStorage.setItem('OTP_VALID',parseInt(otp_invalid_time));
			}
			
			
			for(var i=0;i<otp_lenght;i++){
				
				if(i>0){
					var $input = $('<input/>').attr({type:'number',disabled:''});
				}
				$otp_field.append($input);
				
			}
			
			var formatTime = function(number){
				if(number < 10){
					return '0' + number;
				}
				return number;
			}
			// 
			var countdown = function(){
				var interval = setInterval(function(){
					let current_time = new Date()/1000;
					let timeCount = window.sessionStorage.getItem('OTP_VALID') - current_time;
					minutes = formatTime(parseInt(timeCount % 3600 / 60));
					seconds = formatTime(parseInt(timeCount % 60));
					
					$time.text(minutes + ':' + seconds);
					
					if(timeCount <= 0){
						clearInterval(interval);
						disableBtn = true;
						$confirm_btn.attr({disabled:"disabled"});
						$time.text('00:00');
						window.sessionStorage.removeItem('OTP_VALID');
						$alert_text.addClass('center-align').html($filter('phrase')('The verification code (OTP) has exceeded the specified time.<br />Please press send to confirm again.', scope.locale));
					}
				},1000);
			}
			
			countdown();
			
			var $text = scope.language=='en-US' ? $('<p/>').text('Please enter OTP within '+ min +' minutes. ').append($time).append($('<span/>').text(' remaining.')) : $('<p/>').text('กรุณากรอกรหัส OTP ภายใน '+ min +' นาที เหลืออีก ').append($time);
			var $alert_text = $('<p/>').css({color:'red'});
			
			// countdown();
			
			element.append($otp_field).append($alert_text).append($text).append($send_otp_link).append($confirm_btn);
			
			$send_otp_link.on("click",function () {
				scope.service.member.resend(scope.otp, scope.parameterUrl).then(function(response) {
					console.log(response);
					if(response.msg) {
						const title = $filter('phrase')('Warn', scope.locale);
						const msg = $filter('phrase')(response.msg, scope.locale);
						//
						Swal.fire({
							title: title,
							html: msg,
							icon: 'success',
							confirmButtonText: $filter('phrase')('OK', scope.locale),
							confirmButtonColor: "#9E9E9E",
							heightAuto: false,
							timer: 5000,
							timerProgressBar: true
						}).then((result) => {
					  		// if (result.isConfirmed) {
								$window.location.reload();
					  		// }
						})
					}
					scope.setSessionOtp(response);
				});
			});
			
			$confirm_btn.on("click",function(){
				
				var otp_text = '';
				
				$(document).ready(function(){
					const inputs = $(".otp-field > input");
					
					inputs.each(function(index,input){
						otp_text += $(input).val();
					})
				});
				
				scope.otp['code'] = otp_text;
				// console.log(scope.otp);
				scope.service.member.activate(scope.otp).then(function(response) {
					console.log(response);
					if(response.type != 'error') {
						sessionStorage.clear();
						scope.$parent.otp = {};
						//
						const title = $filter('phrase')('Membership Confirmation', scope.locale);
						const msg = $filter('phrase')(response.msg, scope.locale);
						Swal.fire({
							title: title,
							html: msg,
							icon: 'success',
							showConfirmButton: false,
							// confirmButtonText: 'ตกลง',
							// confirmButtonColor: "#9E9E9E",
							heightAuto: false,
							timer: 5000,
							timerProgressBar: true
						}).then((result) => {
							$window.location.href = '/signin' + scope.parameterUrl;
						})
					}else {
						$alert_text.html($filter('phrase')(response.msg, scope.locale));
					}
				});
				
			});
			
			//////////////////////
			$(document).ready(function() {
			  const inputs = $(".otp-field > input");
			  const button = $(".otp-btn");
			  
			  element.ready(function(){
				  inputs.first().focus();
			  })
			  
			  button.attr("disabled", "disabled");
			  
			  inputs.first().on("paste", function(event) {
				event.preventDefault();
				
				const pastedValue = event.originalEvent.clipboardData.getData('text');
				const otpLength = inputs.length;
				
				for (let i = 0; i < otpLength; i++) {
				  if (i < pastedValue.length) {
					inputs.eq(i).val(pastedValue[i]);
					inputs.eq(i).removeAttr("disabled");
					inputs.eq(i).focus();
				  } else {
					inputs.eq(i).val(""); // Clear any remaining inputs
					inputs.eq(i).focus();
				  }
				}
			  });
			  
			  inputs.each(function(index1, input) {
				$(input).on("keyup", function(e) {
				  const currentInput = $(input);
				  const nextInput = currentInput.next();
				  const prevInput = currentInput.prev();
				  
				  if (currentInput.val().length > 1) {
					nextInput.val(currentInput.val().substr(1,2));
					currentInput.val(currentInput.val().substr(0, 1));
					nextInput.focus();
					// return;
				  }
				  
				  if (nextInput.attr("disabled") && currentInput.val() !== "") {
					nextInput.removeAttr("disabled");
					nextInput.focus();
				  }
				  
				  if (e.key === "Backspace" && index1 > 0) {
					inputs.each(function(index2, input) {
					  if (index1 <= index2 && prevInput) {
						$(input).attr("disabled", true);
						$(input).val("");
						prevInput.focus();
					  }
					});
				  }
				  
				  button.removeClass("active");
				  button.attr("disabled", "disabled");
				  
				  // console.log(!disableBtn);
				  const inputsNo = inputs.length;
				  if (!inputs.last().attr("disabled") && inputs.last().val() !== "" && !disableBtn) {
					button.addClass("active");
					button.removeAttr("disabled");
					return;
				  }
				});
			  });
			});
			
		}
	}
}])
.directive('inputField', ['$filter', function($filter) {
	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', $filter('phrase')('Required', scope.locale)).addClass('helper-text');
			const labelTitle = attrs.label ? $filter('phrase')(attrs.label, scope.locale) : '';
			//console.log(attrs.type)
			switch(attrs.type) {
				case 'radio':
					$input.addClass('with-gap red');
				case 'checkbox':
					var $text = angular.element('<span/>').text(labelTitle);
					$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(labelTitle);
					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(labelTitle);//.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(labelTitle);//.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-transform-unset').text(labelTitle).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(labelTitle).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(labelTitle).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', $filter('phrase')('Invalid email', scope.locale));
				case 'text':
				case 'date':
				case 'time':
					if(attrs.type !='password') {
						//$input.attr('type', 'text');
					}
					$input.addClass('dbadman validate').attr('required', true);
					// $input.attr('autocomplete', 'off');
					$label.text(labelTitle).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(labelTitle).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(labelTitle).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(labelTitle).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)
					//scope.formdata[$input.attr('name')] = $input.val();
				}
				//console.log(scope.formdata)
			})
		}
	}
}])

// .directive('fileUpload', [function() {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs)
// 		{
// 			var $file = $('<input type="file"/>').css('opacity', 0);
// 			element.append($file)
// 			scope.browseFile = function() {
// 				
// 			}
// 		}
// 	}
// }])
/* course directive */
/*.directive('courseApply', ['user', function(user) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			var stateText = {
				'signin':'ลงทะเบียน',
				'enroll':'เริ่มเรียน',
				'start':'เริ่มเรียน',
				'continue':'เรียนต่อ',
				'review':'ทบทวนบทเรียน',
			};
			attrs.$observe('courseApply', function(code) {
				//
				if(code !='') {
					//var state = ;
					var $btApply = $('<a/>').addClass('waves-effect waves-light btn-large z-depth-1 white-text red')
					//
					user.stateCourse(code).then(function(course) {
						//console.log(course)
						$btApply.text(stateText[course.state]);
						element.append($btApply);
						//
						$btApply.on('click', function() {
							user.applyCourse(code, course);
							//.then(function(data) {
							//	console.log(data)
							//});
						});
					});
					//
				}
			});
		}
	}
}])*/
// .directive('courseMascot', [function() {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs)
// 		{
// 			var bottom = element.parent().css('padding-bottom');
// 			var right = element.parent().css('padding-right');
// 			//console.log(bottom)
// 			element.css({position:"absolute",bottom:bottom,right:right});
// 			attrs.$observe('courseMascot', function(mascot)
// 			{
// 				var img = new Image();
// 				img.onload = function() {
// 					var width = (this.width / 1920) * 100;
// 					var height = (this.height / 1920) * 100;
// 					//console.log(padTop);
// 					element.css('width', width + 'vw');
// 					element.css('height', height + 'vw');
// 					//element.css('right', width + 'vw');
// 				}
// 				img.src = 'https:' + mascot;
// 				element.css("background-image", "url('"+mascot+"')");
// 				//element.css('padding-top', padTop + '%');
// 				element.addClass('background-image');
// 			});
// 		}
// 	}
// }])
// .directive('courseNavigator', [function() {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs)
// 		{
// 
// 		}
// 	}
// }])
// .directive('chatMessage', [function() {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs)
// 		{
// 
// 		}
// 	}
// }])
// .directive('videoEmbed', [function() {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs)
// 		{
// 			attrs.$observe('videoEmbed', function(video)
// 			{
// 				var $video = $('<video controls/>').css({width:'100%',height:'100%',position:'absolute',top:0});
// 				var height = (9 / 16) * 100;
// 				$video.append($('<source/>').attr('src', video).attr('type','video/mp4'))
// 				element.css('padding-bottom', height + '%');
// 				element.css("background-color", "#CCCCCC");
// 				element.css('position', 'relative');
// 				//
// 				if(video!='')
// 					element.append($video);
// 			});
// 		}
// 	}
// }])
// .directive('videoPoster', [function() {
// 	return {
// 		restrict: 'A',
// 		priority: 1000,
// 		link: function(scope, element, attrs)
// 		{
// 			attrs.$observe('videoPoster', function(poster)
// 			{
// 				var $video = element.children('video');
// 				if(poster) {
// 					$video.attr('poster', poster);
// 				}
// 			});
// 		}
// 	}
// }])
// .directive('embedSrc', [function() {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs)
// 		{
// 			//var $script = $('<script/>').attr('src', '//lrs.promptskill.com/mod/hvp/library/js/h5p-resizer.js');
// 			var $iframe = $('<iframe scrolling="no" frameborder="0"/>').css({width:'100%',height:'100%',border:'none',position:'absolute',top:0});
// 			//var src = 'https://lrs.promptskill.com/mod/hvp/embed.php?id=';
// 			attrs.$observe('embedSrc', function(src)
// 			{
// 				var height = (10 / 16) * 100;
// 				element.css('padding-bottom', height + '%');
// 				//element.css('margin-bottom', "-2em");
// 				//element.css("background-color", "#ffffff");
// 				element.css('position', 'relative');
// 				//
// 				element.append($iframe);
// 				$iframe.attr('src', src);
// 			});
// 		}
// 	}
// }])
// 
// .directive('embedPayin', [function() {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs)
// 		{
// 			//var $script = $('<script/>').attr('src', '//lrs.promptskill.com/mod/hvp/library/js/h5p-resizer.js');
// 			var $iframe = $('<iframe  id="print-iframe" scrolling="no" frameborder="0"/>').css({width:'100%',height:'100%',border:'none',position:'absolute',top:0, left:0});
// 			attrs.$observe('embedPayin', function(src)
// 			{
// 				//var height = (10 / 16) * 100;
// 				element.css('padding-bottom', 1100 + 'px');
// 				//element.css('margin-bottom', "-2em");
// 				//element.css("background-color", "#ffffff");
// 				element.css('position', 'relative');
// 				//
// 				element.append($iframe);
// 				$iframe.attr('src', src);
// 			});
// 		}
// 	}
// }])
// 
// .directive('embedCert', [function() {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs)
// 		{
// 			//var $script = $('<script/>').attr('src', '//lrs.promptskill.com/mod/hvp/library/js/h5p-resizer.js');
// 			var $iframe = $('<iframe scrolling="no" frameborder="0"/>').css({width:'100%',height:'100%',border:'none',position:'absolute',top:0, left:0});
// 			attrs.$observe('embedCert', function(src)
// 			{
// 				var height = (10.5 / 16) * 100;
// 				element.css('padding-bottom', height + '%');
// 				//element.css('margin-bottom', "-2em");
// 				//element.css("background-color", "#ffffff");
// 				element.css('position', 'relative');
// 				//
// 				element.append($iframe);
// 				$iframe.attr('src', src);
// 			});
// 		}
// 	}
// }])

/* course directive */
// .directive('courseNavigator', [function() {
// 	return {
// 		restrict: 'A',
// 		templateUrl: '/templates/blocks/course-navigator.promptskill'
// 	}
// }])
// .directive('courseProgress', [function() {
// 	return {
// 		restrict: 'A',
// 		templateUrl: 'templates/blocks/course-progress.promptskill',
// 		link: function(scope, element, attrs)
// 		{
// 			//console.log(attrs.scale)
// 			attrs.$observe('courseProgress', function(code) {
// 				scope.service.user.courseProgress(code).then(function(data) {
// 					scope.scale = attrs.scale;
// 					scope.progress = data.progress;
// 					scope.scored = data.scored;
// 				});				
// 			});
// 		}
// 	}
// }])
// .directive('courseInfos', [function() {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs)
// 		{
// 			var score = 0;
// 			var scored = 0;
// 			attrs.$observe('courseInfos', function(course) {
// 				
// 			});
// 		}
// 	}
// }])
// 
// /* academy directive */
// .directive('programCourse', [function() {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs)
// 		{
// 			attrs.$observe('programCourse', function(program) {
// 				//
// 				if(program.length >0) {
// 					//
// 					//academy.courses(program)
// 				}
// 			});
// 		}
// 	}
// }])
// .directive('teacherPhoto', [function() {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs)
// 		{
// 			angular.forEach(scope.academy.page.teachers, function(teacher) {
// 				//console.log(teacher)
// 			})
// 		}
// 	}
// }])
/*.directive('swiperContainer', ['$timeout', function($timeout) {
	return {
		//
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			var perView = attrs.swiperContainer;
			//console.log(perView)
			$timeout(function ()
			{
				var $parent = element.parent();
				var $container = $('<div/>').addClass('swiper-wrapped');
				var type = element.attr('class');
				var id = element.attr('id');
				//
				var $swiper = $('<div/>').addClass('swiper-container');
				var $slides = $('<div/>').addClass('swiper-wrapper');
				var $slide = element.children();
				if (id == 'photos') {
					var $pagination = $('<div/>').addClass('swiper-pagination');
				}
				var $next = $('<div/>').addClass('swiper-button-next');
				var $prev = $('<div/>').addClass('swiper-button-prev');

				element.remove();
				$parent.append($container);
				$container.append($swiper);

				//
				$slide.addClass('swiper-slide ' + type)
				$slides.append($slide)
				//console.log($slides)
				$swiper.append($slides).append($pagination);
				//
				$container.append($prev).append($next).attr('id', id);
				
				var perView_mobile = 1;
				if(perView == 5){
					perView_mobile = 2;
				}else if(perView == 4){
					perView_mobile = 1;					
				}else{
					perView_mobile = 1;
				}				
				//
				var mySwiper = new Swiper($swiper, {
					slidesPerView: perView_mobile,

					breakpoints: {
						// when window width is <= 320px
						1024: {
							slidesPerView: perView,
    					},
						// when window width is <= 480px
						600: {
							slidesPerView: perView,
    					}
  					},

					 navigation: {
				        nextEl: '#'+id+' .swiper-button-next',
				        prevEl: '#'+id+' .swiper-button-prev',
				    },
					pagination:{
						el: '#'+id+' .swiper-pagination',
					}
					
				});
				//swiper.navigation.nextEl = '.swiper-button-next';

			}, 250);
		}
	}
}])
/*
.directive('signUp', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			var $header = $('<h3/>').text('ลงทะเบียน').addClass('underline-text');
			
			element.addClass('col');
			element.append($header);
		}
	}
}])
.directive('hamMenu', [function() {
	return {
		restrict: 'A',
		link: function($scope, element, attrs)
		{
			var $this = $(element);
			var $navigation = $('.navigation');
			var $menu = $('.main-menu .text');
			$menu.css('top', $navigation.height()+'px');
			element.on('click', function() {
				if($menu.hasClass('show')) {
					$menu.removeClass('show');
				} else {
					$menu.addClass('show');
					$menu.children('a').on('click', function() {
						$menu.removeClass('show');
					});
				}
			});
			
			//$('.navigation').prepend('<div class="overlay" />')
			//$scope.updateScrollbar('disable');
			//
			console.log($menu)
		}
	}
}])
.directive('searchFilter', ['$http', function($http) {
	return {
		restrict: 'A',
		link: function($scope, element, attrs)
		{
			var $input = $('<input id="search-text" name="search-text" />').attr('placeholder', 'SEARCH');
			var $search = $('<button id="search" />').append('<i/>');
			var $filter = $('<button id="filter" />').text('FILTERS').prepend('<i/>');
			var $sort = $('<button id="sort" />').text('SORT BY').append('<i/>');
			//
			element.append($input);
			element.prepend($sort).append($search).append($filter);
			//
			var $sorts = $('<ul id="sorts"/>').addClass('checklist').hide();
			var sort = '';
			var filters = '';
			$http.get('templates/sorts.json').success(function(data) {
				//console.log(data)
				angular.forEach(data, function(text, value) {
					//console.log(text)
					var $item = $('<li/>').addClass('item');
					var $checkbox = $('<input type="radio" name="sort"/>').val(value)
					var $checkLabel = $('<label/>').text(text);
					//
					$item.append($checkbox).append($checkLabel)
					$sorts.append($item);
					$checkbox.on('change', function() {
						//console.log($scope.basepath + 'program/index?sort='+$checkbox.val())
						$http.get($scope.basepath + 'program/index?sort='+$checkbox.val())
						.success(function(data) {
							//console.log(data)
							$scope.programs = data;
						})
					})
				});
			});
			$sorts.on('mouseleave', function() {
				//console.log('mouseleave');
				//$sorts.hide();
			})
			$sort.append($sorts);
			// filtering
			var $filters = $('<div id="filters"/>').hide();
			var $title = $('<h4/>').text('filters');
			var $close = $('<a/>').addClass('icon close').on('click', function(event) {
				//console.log($filters)
				event.preventDefault();
				$filters.hide();
			});
			//
			$title.append($close)
			$filters.append($title);
			$http.get($scope.basepath + 'program/filters')
			  .success(function(data) {
				//console.log(data)
				angular.forEach(data, function(type, index) {
					//console.log(type.title)
					var $items = $('<ul/>').addClass('checklist');
					var $head = $('<h3/>').text(type.title);
					$items.append($head);
					angular.forEach(type.filters, function(filter, index) {
						//console.log(filter.title)
						var $item = $('<li/>').addClass('item');
						var $checkbox = $('<input type="checkbox" name="filters[]"/>').val(filter.title);
						var $checkLabel = $('<label/>').text(filter.title);
						//
						$item.append($checkbox).append($checkLabel)
						$items.append($item);
						$filters.append($items); 
						$checkbox.on('change', function() {
							filters = $('[name="filters[]"]:checked').map(function () {return this.value;}).get().join(",");
							//console.log(filters)
							$http.post($scope.basepath + 'program/filter?sort='+sort, {
								filter: filters
							}).success(function(data) {
								console.log(data)
								$scope.programs = data;
							})
						})
					});
				});
			});
			$filter.append($filters)
			$filters.on('mouseleave', function() {
				//console.log('mouseleave');
				$filters.hide();
			});
			// action
			$input.on('keyup', function(event) {
				if(event.keyCode === 13){					
					$search.click()
				}
				$sorts.hide()
			})
			
			$sort.on('click', function() {
				//$sort.addClass('idle');
				
				if($sorts.is(':hidden')) {
					$sorts.show()
				} else {
					$sorts.hide()
				}
				$filters.hide()
			})
			
			$filter.on('click', function() {
				//console.log('filters')
				$filters.show();
				$sorts.hide();
			})
			$input.on('focus', function() {
				
			})
			
			$search.on('click', function() {
				//console.log($input.val())
				$http.post($scope.basepath + 'program/search?sort='+sort, {
					filter: filters,
					text: $input.val()
				}).success(function(data) {
				  	$scope.programs = data 
				})
			})
		}
	}
}])
.directive('backgroundImage', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			attrs.$observe('backgroundImage', function(image)
			{
				//console.log(image)

				element.css("background-image", "url('"+image+"')");
				element.addClass('background-image');
				//console.log(element);

			});
			//var backgroundImage = attrs.backgroundImage;
			//console.log(backgroundImage)
		}
	}
}])
.directive('watchProgram', ['$http', function($http) {
	return {
		restrict: 'A',
		link: function($scope, element, attrs)
		{
			var text = attrs.text;
			var play = '/entertainment/#/program/watch/';
			var btWatch = $('<a class="play"/>').addClass('button');
			var btSeason = $('<a/>').addClass('button ').text('ซีซั่นทั้งหมด');
			//
			attrs.$observe('watchProgram', function(referrer)
			{
				//console.log(referrer)
				if(referrer !='')
				{
					element.addClass('watch');
					//
					$http.get($scope.basepath + 'program/latest/' + referrer)
				    	.success(function(data)
				    	{
					    	if(element.hasClass('seasons'))
					    	{
						    	btSeason.attr('href', '/entertainment/#/program/detail/' + referrer);
						    	element.append(btSeason);
						    	text += ' S' + data.season;
						    	play = '/entertainment/#/program/watch/' + referrer + '/' + data.season + '/' + data.episode;

					    	} else {
						    	if(data.season >0) 
						    	{
							    	text += ' S' + data.season + ' EP1';
							    	play += referrer + '/' + data.season + '/1';
						    	} else {
							    	play += referrer + '/' + data.season + '/' + data.episode;
						    	}
					    	}
					    	//
					    	btWatch.text(text).prepend('<i/>');
					    	btWatch.attr('href', play);
					    	//
					    	element.prepend(btWatch);
				    	});
			    	/*
					element.addClass('watch');
					if(element.hasClass('seasons'))
					{
						text = attrs.text + ' S' + attrs.season;

						element.append(btSeason);
					} else {
						//element.append(btWatch);
					}
					btWatch.text(text).prepend('<i/>');
					element.prepend(btWatch);
					*
				}
			});
		}
	}
}])
.directive('weekdays', ['$http', function($http) {
	return {
		restrict: 'C',
		link: function($scope, element, attrs)
		{
			var weekDays = ['จันทร์','อังคาร','พุธ','พฤหัสบดี','ศุกร์','เสาร์','อาทิตย์'];
			var monthText = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
			var adjYear = 0;
			var today = new Date();
			//
			function onairProgram(weekday) {
				//console.log(weekday)
				$http.get($scope.basepath + '/program/schedule/' + weekday)
				.success(function(data)
				{
					$scope.programs = data;
// 					console.log($scope.programs)
				})
			}
			weekDays.forEach(function(day, index)
			{
				var $dayText = $('<h2>').text(day);
				var $day = $('<div/>').addClass('day-week').append($dayText);
				if(today.getDay()==(index+1)%7)
				{
					var date = today.getDate()+' '+monthText[today.getMonth()]+' '+(today.getFullYear()+adjYear);
					var $date = $('<div/>').text(date).addClass('date-text');
					//
					$day.append($date).addClass('today active');
					onairProgram((index+1)%7);
				} 
				//else {
					$day.on('click', function() {
						//var thisdate = today.add
						$('.day-week').removeClass('active')
						//
						$day.addClass('active')
						onairProgram((index+1)%7);
					});
				//}
				element.append($day);
			});
			//console.log(today.getDay());
		}
	}
}])
.directive('programEpisode', ['$http', function($http) {
	return {
		//
		restrict: 'A',
		link: function($scope, element, attrs)
		{
			var referrer = $scope.referrer;
			//console.log(referrer)
			attrs.$observe('programEpisode', function(season)
			{
				//if(referrer !=undefined) {
				//console.log('Season: '+season);
				if(season !='')
				{
					referrer = $scope.referrer + '/' + season;
				}
				console.log(referrer)
				//
				//console.log($scope.basepath + 'program/season/' + referrer)
				$http.get($scope.basepath + 'program/season/' + referrer)
		    		.success(function(data)
					{
						console.log(data)
						var loop = true;
				    	data.forEach(function(item)
				    	{
					    	if(loop)
					    	{
						    	var $season = $('<div/>');
						    	var seasonText = item.season >0 ?'ซีซั่น ' + item.season :'ปี ' + (parseInt(item.year) +543);
						    	var $seasonText = $('<h3/>').text(seasonText);
						    	//

						    	if(season =='')
						    	{
							    	console.log(item.season)
							    	//season = item.season;
							    	$scope.season = item.season;
							    	loop = false;
							    	//
							    	return false;
						    	}
						    	//
						    	if(item.season == season)
						    	{
							    	$season.addClass('active');
						    	}
						    	//
						    	if(season !=item.season)
						    	{
							    	//console.log('scope:'+$scope.season+' item:'+item.season);
							    	$seasonText.on('click', function()
							    	{
								    	if(season !=item.season)
										{
											element.empty();
										}
										$scope.$apply(function()
										{
											$scope.season = item.season;
											$scope.episode = '';
											//console.log('season: '+$scope.season)

										})
									});
								}
								//
								$season.append($seasonText);
								//

						    	if(item.episodes !=undefined)
						    	{
							    	item.episodes.forEach(function(epitem)
							    	{
								    	var episodeText = item.season >0 ?'ตอนที่ ' + epitem.episode :'' + epitem.title;
										var $episode = $('<h4/>').text(episodeText);
										//
								    	if($scope.episode =='')
								    	{
									    	$scope.episode = epitem.episode;
								    	}
								    	//
								    	if(epitem.episode==$scope.episode)
								    	{
									    	$episode.addClass('active');
								    	}
								    	//if($scope.episode !=epitem.episode && season ==item.season)
								    	//{
								    	$episode.on('click', function()
								    	{
									    	//console.log($(this))
									    	$(this).parent().children().removeClass('active');
									    	$(this).addClass('active')
									    	$scope.$apply(function()
									    	{
										    	$scope.episode = epitem.episode;
									    	})
								    	});
								    	//}
								    	$season.append($episode);
							    	});
						    	}
						    	element.append($season);
					    	}
				    	});
		    	});
		    	//}

			});
		}
	}
}])
.directive('programVideos', ['$http', function($http) {
	return {
		//
		restrict: 'A',
		link: function($scope, element, attrs)
		{
			var referrer = $scope.referrer;
			console.log(referrer)
			//
			attrs.$observe('programVideos', function(episode)
			{
				var season = $scope.season;
				console.log(season);
				element.empty();
				if(episode !='')
				{
					console.log('episode:' + episode)
					referrer = $scope.referrer + '/' + $scope.season + '/' + episode;

					console.log(referrer)
					$http.get($scope.basepath + 'program/videos/' + referrer)
			    	.success(function(data)
			    	{
				    	console.log(data)
				    	//if(episode !='')
				    	//{
					    console.log(element)
				    		//element.empty();
				    	//}
				    	data.forEach(function(video, item)
				    	{
					    	var $video = $('<div/>').addClass('col thumb');
					    	var $thumb = $('<a/>').attr('href', '/entertainment/#/play/video/'+video.videoid)
					    		.addClass('background-image').css("background-image", "url('"+video.thumb+"')");
					    	var $play = $('<i/>');
					    	var	$info = $('<div/>').addClass('text');
					    	var $title = $('<h3/>').text(video.title);
					    	var $part = $('<h3/>').text('Ep. ' + video.episode + ' Part ' + video.part + '/' + data.length);
					    	//
					    	$thumb.append($play);
					    	$info.append($title);
					    	if(season >0) {
					    		$info.append($part);
					    	}
					    	$video.append($thumb).append($info);
							//
							element.append($video);
				    	});
			    	});
		    	}
			});
		}
	}
}])
.directive('swiperContainer', ['$timeout', function($timeout) {
	return {
		//
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			var perView = attrs.swiperContainer;
			//console.log(perView)
			$timeout(function ()
			{
				var $parent = element.parent();
				var $container = $('<div/>').addClass('swiper-wrapped');
				var type = element.attr('class');
				var id = element.attr('id');
				//
				var $swiper = $('<div/>').addClass('swiper-container');
				var $slides = $('<div/>').addClass('swiper-wrapper');
				var $slide = element.children();
				if (id == 'photos') {
					var $pagination = $('<div/>').addClass('swiper-pagination');
				}
				var $next = $('<div/>').addClass('swiper-button-next');
				var $prev = $('<div/>').addClass('swiper-button-prev');

				element.remove();
				$parent.append($container);
				$container.append($swiper);

				//
				$slide.addClass('swiper-slide ' + type)
				$slides.append($slide)
				//console.log($slides)
				$swiper.append($slides).append($pagination);
				//
				$container.append($prev).append($next).attr('id', id);
				
				var perView_mobile = 1;
				if(perView == 5){
					perView_mobile = 2;
				}else if(perView == 4){
					perView_mobile = 1;					
				}else{
					perView_mobile = 1;
				}				
				
				var perView_mobile = 2;
				if(perView == 5){
					perView_mobile = 3;
				}else {
					perView_mobile = 2;
				}
				if(perView == 4){
					perView_mobile = 2;
				}else {
					perView_mobile = 2;
				}
				if(perView == 1){
					perView_mobile = 1;
				}

				//
				var mySwiper = new Swiper($swiper, {
					slidesPerView: perView_mobile,

					breakpoints: {
						// when window width is <= 320px
						1024: {
							slidesPerView: perView,
    					},
						// when window width is <= 480px
						600: {
							slidesPerView: perView,
    					}
  					},

					 navigation: {
				        nextEl: '#'+id+' .swiper-button-next',
				        prevEl: '#'+id+' .swiper-button-prev',
				    },
					pagination:{
						el: '#'+id+' .swiper-pagination',
					}
					
				});
				//swiper.navigation.nextEl = '.swiper-button-next';

			}, 250);
		}
	}
}])

/*
.directive("menu", function ($window) {
    return function(scope, element, attrs) {
        angular.element($window).bind("menu", function() {
             if (this.pageYOffset >= 100) {
                 element.addClass('scrolled');
                 console.log('Scrolled below header.');
             } else {
                 element.removeClass('scrolled');
                 console.log('Header is in view.');
             }
        });
    };
});
*/
/*
.directive('setClassWhenScrolled', [function() {
	
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			$(window).scroll(function(){
			    if ($(this).scrollTop() > 50) {
			       $('#menu').addClass('scrolled');
			    } else {
			       $('#menu').removeClass('scrolled');
			    }
			});
		}
	}
}])
*/

/*
.directive('autoScroll', function ($document, $timeout, $location) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            scope.okSaveScroll = true;

            scope.scrollPos = {};

            $document.bind('scroll', function () {
                if (scope.okSaveScroll) {
                    scope.scrollPos[$location.path()] = $(window).scrollTop();
                }
            });

            scope.scrollClear = function (path) {
                scope.scrollPos[path] = 0;
            };

            scope.$on('$locationChangeSuccess', function (route) {
                $timeout(function () {
                    $(window).scrollTop(scope.scrollPos[$location.path()] ? scope.scrollPos[$location.path()] : 0);
                    scope.okSaveScroll = true;
                }, 0);
            });

            scope.$on('$locationChangeStart', function (event) {
                scope.okSaveScroll = false;
            });
        }
    };
})
*/