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

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

/* Layouts */
.directive('privacy', [function() {
	return {
		restrict: 'C',
		templateUrl: '/templates/layouts/privacy.dbdacademy',
	};
}])
.directive('copyright', [function() {
	return {
		restrict: 'C',
		templateUrl: '/templates/layouts/copyright.dbdacademy'
	};
}])
.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) {
					// scope.service.client.page().then(function(page) {
						// console.log(page)
						scope.navigation = 'templates/layouts/header.dbdacademy';
					// });
				}
            });
		}
	};
}])
.directive('header', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			scope.service.client.info().then(function(institute) {
				// console.log(institute)
				scope.institute['pages'] = institute.pages;
			});
		}
	}
}])
.directive('headbarLogo', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			var logo = scope.service.client.logo();
			// console.log(logo)
			// if(logo) {
				logo = '/public/img/logo/logo-dbdacademy-color.png';
				var $img = $('<div/>').append($('<img/>').attr('src', logo).height(48));
				element.append($img.addClass('valign-wrapper'));
			// }
		}
	}
}])
.directive('headbarLogoRight', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			var logo = '';//'//services.promptskill.com/app/program/public/img/logo/logo-dbdacademy.png';

			if(logo) {
				var $img = $('<div/>').append($('<img/>').attr('src', logo));
				element.append($img);
			}
		}
	}
}])
.directive('sideNavigator', ['$location', function($location) {
	return {
		restrict: 'C',
		link: function(scope, element, attrs) 
		{
			//
			scope.service.member.authorized().then(function(authorized) {
				//
				if(authorized) {
					$location.hash(null);
	
					if(authorized.permission) {
						// $location.path('/'+authorized.permission);
					} else {
						var sidenav = $('.sidenav');
						var $btLogout = $('<a/>').addClass('waves-effect waves-light btn btn-logout btn-reg bold large z-depth-0').text('ออกจากระบบ'); 
						$btLogout.on('click', function() {
							scope.logout();
						});
						sidenav.append($btLogout);
					}
				}
			});
			
			element.ready(function() {
				//
				var sidenav = $('.sidenav');
				sidenav.sidenav();
			});
			//
		}
	}
}])
.directive('prelaunch', ['$timeout', '$window', function($timeout, $window) {
	return {
		restrict: 'A',
		link: function link(scope, element, attrs)
		{
			scope.$parent.fullpage = true;
			//
			$timeout(function() {
				$('.copyright').hide();
				// $('.nav-wrapper').hide();
				//
				scope.service.client.banner().then(function(data) {
					scope.banner = data.banner;
					// console.log(scope.banner);
				});
				//
				if(!window.matchMedia("(max-width: 600px)").matches) {
					$('.nav-wrapper').hide();
				}
			}, 600);
			
			scope.toWebPage = function() {
				$window.location.href = '/';
			}
			//
		}
	}
}])
.directive('sitemap', [function() {
	return {
		restrict: 'A',
		templateUrl: '/templates/layouts/sitemap.dbdacademy',
		link: function(scope, element, attrs)
		{
			attrs.$observe('sitemap', function(program) {
				//scope.service.program.data('sitemap', institution).then(function(data) {
					//console.log(data)
				//	scope.sitemap = data;
				//});
			});
		}
	};
}])

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

/* Style */
.directive('fitBrief', ['$timeout', function($timeout) {
	return {
		restrict: 'A',
		priority: 10,
		link: function(scope, element, attrs)
		{
			scope.$watch(attrs.ngBindHtml, function(value)
			{
				var fontSize = parseInt(element.css('font-size'));
				var margin = element.parent().css('margin');
				//console.log(margin)
				$timeout(function() {
					if(value !=undefined) {
						var blockBrief = element.prev();
						var brief = blockBrief.find('.brief');
						var marginTop = (blockBrief.height() -brief.height()) /fontSize;
						element.children().children().children(':first-child').css('margin-top', -marginTop+'em').css('margin-left', '-4%');
					}
				})
			})
			
		}
	}
}])

/* Page */
.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('bannerPage', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) {
			attrs.$observe('bannerPage', function(image)
			{
				var $backgroundBanner = $('<div/>').addClass('bg-banner-page');
				var $contentBanner = $('<div/>').addClass('content-banner-page center-align-sm');
				var $titleBanner = $('<h2/>').addClass('title-banner-page black-text bold');

				if (attrs.color) {
					$contentBanner.css('background-color', attrs.color);
				}
				$backgroundBanner.css("background-image", "url('"+image+"')");
				$titleBanner.text(attrs.title);
				$contentBanner.append($titleBanner);
				element.append($backgroundBanner).append($contentBanner);
			});
		}
	}
}])

/* Content */
.directive('carouselSlider', ['$timeout', function($timeout) { /* need banner data form dinsorworks */
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			//
			$timeout(function() {
			scope.service.client.highlight().then(function(banner) {
				var highlight = banner.highlight;
				// console.log(highlight);

				if(highlight) {
					var	$carousel = $('<div/>').addClass('carousel carousel-slider relative');
					var $btnPrev = $('<a/>').addClass('btn-prev absolute').append($('<img/>').attr('src', '/public/img/icon/icon-prev-white.png'));
					var $btnNext = $('<a/>').addClass('btn-next absolute').append($('<img/>').attr('src', '/public/img/icon/icon-next-white.png'));
					//
					element.addClass('banner-wrapper').append($carousel.append($btnPrev).append($btnNext));
					
					angular.forEach(highlight, function(item) {
						var	$item = $('<a/>').addClass('carousel-item');
						var $image = $('<div/>').addClass('relative background-image fit');
						//
						$item.css('height', '100%').attr('href', item.url_link);
						$image.css('background-image', "url('"+ item.image +"')").css('height', '100%');
						$item.append($image);
						$carousel.append($item);
					});
					//
					element.ready(function() {
						$carousel.carousel({
							fullWidth: true,
							indicators: true
						});
						
						$carousel.find('.btn-prev').click(function(e) {
							e.preventDefault();
							e.stopPropagation();
							$carousel.carousel('prev');
						});
						
						$carousel.find('.btn-next').click(function(e) {
							e.preventDefault();
							e.stopPropagation();
							$carousel.carousel('next');
						});
						
						// auto next slide banner
						// setInterval(function () {
						// 	$carousel.carousel('next');
						// }, 7000);
					});
				}
				//
			});
			}, 900);
			//
		}
	}
}])
.directive('news', ['$routeParams', '$timeout', function($routeParams, $timeout) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			//
			var newsId = $routeParams.id;
			// console.log(newsId);
			
			$timeout(function() {
				//
				scope.service.client.news(newsId).then(function(news) {
					scope.news = news;
					// console.log(scope.news);
				})
				
			}, 900);
			//
		}
	}
}])
.directive('courseRecommend', ['$compile', '$timeout', function($compile, $timeout) {
	return {
		restruct: 'A',
		link: function link(scope, element, attrs) {
			//
			$timeout(function() {
			scope.service.client.recommend().then(function(courses) {
				// console.log(courses);
				
				if(courses) {
					var courseState = 'course-content';
					var categoryName = 'หลักสูตรแนะนำ';
					var cardStyle = "card-course";
					var btnPrevClass = 'btn-pagination prev-carousel normal';
					var btnNextClass = 'btn-pagination next-carousel normal';
					/* topic & pagination */
					var $section = $('<div/>').addClass('section-course course-recommend white valign-wrapper');
					var $container = $('<div/>').addClass('container');
					var $rowCourseName = $('<div/>').addClass('row hide-on-small-only');
					var $colCourseName = $('<div/>').addClass('col s8 m6 l6');
					var $courseName = $('<a/>').attr('href', '/courses');
					var $colPagination = $('<div/>').addClass('col s4 m6 l6 right-align');
					var $btnPrev = $('<a/>').addClass(btnPrevClass);
					var $btnNext = $('<a/>').addClass(btnNextClass);
					//
					$courseName.append($('<h3/>').addClass('course-name black-text bold').text(categoryName));
					$btnPrev.append($('<i/>').addClass('material-icons').text('navigate_before'));
					$btnNext.append($('<i/>').addClass('material-icons').text('navigate_next'));
					//
					$colPagination.append($btnPrev).append($btnNext);
					$rowCourseName.append($colCourseName.append($courseName)).append($colPagination);
					$container.append($('<h3/>').addClass('course-name black-text larger bold center-align hide-on-med-and-up').text(categoryName));
					$container.append($rowCourseName);
					
					/* program course */
					var	$programCourse = $('<div/>').addClass('relative');
					
					scope.courseRecommendContent = function() {
						//
						var	$carousel = $('<div/>').addClass('carousel carousel-slider course-carousel');
						var	$carouselItem = $('<div/>').addClass('carousel-item');
						var $rowCourse = $('<div/>').addClass('row');
						// responsive devices
						var countCourse = 0;
						var responsiveDevice = 4; // Desktop Devices
						if(window.matchMedia("(max-width: 600px)").matches) responsiveDevice = 1; // Mobile Devices
						else if (window.matchMedia("(min-width: 601px) and (max-width: 992px)").matches) responsiveDevice = 3; // Tablet Devices
						
						angular.forEach(courses, function(item) {
							
							if(countCourse == 0) {
								$carousel.append($carouselItem);
								$carouselItem.append($rowCourse);
							}
							//
							var $colCourse = $('<div/>').addClass('col s12 m4 l3');
							var $card = $('<div/>').addClass('card hoverable').addClass(cardStyle);
							var $cardImage = $('<div/>').addClass('card-image course-image');
							var $cardContent = $('<div/>').addClass('card-content');
							var $courseName = $('<div/>').addClass('course-title').text(item.name);
							var $courseBrief = $('<div/>').addClass('course-brief small').text(item.brief);
							var $cardAction = $('<div />').addClass('card-action').attr(courseState, item.code);
							//
							$cardImage.css('background-image', "url('"+item.thumbnail+"')");
							$cardContent.append($courseName).append($courseBrief);
							$card.append($cardImage).append($cardContent).append($cardAction);
							$rowCourse.append($colCourse.append($card));
							//
							countCourse++;
							if(countCourse == responsiveDevice) {
								countCourse = 0;
								$carouselItem = $('<div/>').addClass('carousel-item');
								$rowCourse = $('<div/>').addClass('row');
							}
						});
						$programCourse.append($carousel)
						
						// initialization carrousel program courses
						var carousel = element.find('.carousel');
						carousel.carousel({
							fullWidth: true,
							indicators: false
						});
						// move next carousel
						$btnNext.click(function(e) {
							e.preventDefault();
							e.stopPropagation();
							$carousel.carousel('next');
						});
						// move prev carousel
						$btnPrev.click(function(e){
							e.preventDefault();
							e.stopPropagation();
							$carousel.carousel('prev');
						});
						// mobile responsive pagination
						if(responsiveDevice == 1) {
							carousel.carousel({
								fullWidth: true,
								indicators: true
							});
							//
							$btnPrev.removeClass().addClass('btn-pagination-sm prev-carousel absolute valign-wrapper hide-on-med-and-up');
							$btnNext.removeClass().addClass('btn-pagination-sm next-carousel absolute valign-wrapper hide-on-med-and-up');
							$container.addClass('relative').append($btnPrev).append($btnNext);
						} else {
							$btnPrev.removeClass().addClass(btnPrevClass);
							$btnNext.removeClass().addClass(btnNextClass);
							$colPagination.append($btnPrev).append($btnNext);
						}
					}
					
					$container.append($programCourse);
					$section.append($container);
					element.append($section);
					//
					element.ready(function() {
						scope.courseRecommendContent();
						
						$(window).on('resize',function() {
							$programCourse.empty();
							scope.courseRecommendContent();
						});
					});
					//
					$compile(element.contents())(scope);
				}
				//
			});
			}, 900);
		}
	}
}])
.directive('courseCategory', ['$compile', '$timeout', function($compile, $timeout) {
	return {
		restrict: 'A',
		link: function link(scope, element, attrs) {
			
			$timeout(function() {
			var resourceUrl = scope.service.client.resource();
			//console.log(resourceUrl)
			scope.service.client.category(name).then(function(category) {
				/* console.log(category) */
				scope['category'] = category;
				var courseCount = 1;
				var button = 'ดูหลักสูตร';
				//
				angular.forEach(scope.category, function(category, index) {
					var $category = $('<div/>').addClass('relative');
					var $sectionCourse = $('<div/>').addClass('section-course white');
					var	$banner = $('<div/>').addClass('banner-course relative');
					var courseState = 'course-content';
					var categoryName = category.name;
					var paginationStyle = "";
					var cardStyle = "card-course";
					var $cardIcon = $('<span/>').hide();
					//
					if(category.permalink != 'podclass') {
						var position = courseCount % 2 == 0 ? 'right' : 'left';
						courseCount ++;
						//console.log(category)
						var $bannerContent = $('<div/>').addClass('banner-course-content absolute');
						var $bannerTitle = $('<h1/>').addClass('banner-course-title black-text bold').text(category.name);
						var $bannerNote = $('<p/>').addClass('banner-course-note black-text medium normal remark').text(category.remark);
						var $bannerDesc = $('<p/>').addClass('banner-course-desc black-text regular').html(category.brief);
						var $bannerBtn = $('<a/>').addClass('banner-course-btn waves-effect btn-signup btn-flat z-depth-1 medium').text(button);
						//	
						var banner = resourceUrl + '/category/' + category.background;
						var image = new Image();
						image.onload = function() {
							$banner.height(this.height);
						}
						image.src = 'https:' + banner;
						//
						$banner.css({backgroundImage: "url("+banner+")"});
						$banner.addClass('background-image banner-'+position);
						//
						$bannerContent.append($bannerTitle).append($bannerNote).append($bannerDesc).append($bannerBtn.attr('href', '/courses'));
						$banner.append($bannerContent);
						$category.append($banner);
					} else {
						//colPaginationClass = 'col s6 m6 l6 offset-s6 offset-m6 offset-l6 right-align';
						//courseState = 'course-state'
						categoryName = "";
						paginationStyle = 'white black-text';
						cardStyle = 'card-pod-class black';
						//
						$cardIcon = $('<img/>').attr('src', '/public/img/icon/icon-microphone-white.png');
						$sectionCourse.removeClass('section-course');
						$category.addClass('section-intro background-image white');
						
						var banner = resourceUrl + '/category/' + category.background;
						var img = new Image();
						img.onload = function() {
							$category.height(this.height);
						}
						img.src = banner;
						$category.css("background-image", "url('"+banner+"')");
						// $banner.css({backgroundImage: "url("+banner+")"});
						// $banner.addClass('background-image banner-'+position);
					}
					//
					// courses
					var $container = $('<div/>').addClass('container');
					var $rowCourseName = $('<div/>').addClass('row hide-on-small-only');
					var $colCourseName = $('<div/>').addClass('col s8 m6 l6');
					var $courseName = $('<a/>').attr('href', '/courses');
					var $colPagination = $('<div/>').addClass('col s4 m6 l6 right-align');
					var $btnPrev = $('<a/>').addClass('btn-pagination prev-carousel normal').addClass(paginationStyle);
					var $btnNext = $('<a/>').addClass('btn-pagination next-carousel normal').addClass(paginationStyle);
					//
					$courseName.append($('<h3/>').addClass('course-name black-text bold').text(categoryName));
					$btnPrev.append($('<i/>').addClass('material-icons').text('navigate_before'));
					$btnNext.append($('<i/>').addClass('material-icons').text('navigate_next'));
					//
					$colPagination.append($btnPrev).append($btnNext);
					$rowCourseName.append($colCourseName.append($courseName)).append($colPagination);
					$container.append($rowCourseName);
					//
					var	$programCourse = $('<div/>').addClass('relative');
					var	$carousel = $('<div/>').addClass('carousel carousel-slider course-carousel');
					var	$carouselItem = $('<div/>').addClass('carousel-item');
					var $rowCourse = $('<div/>').addClass('row');
					//
					// responsive devices
					var countCourse = 0;
					var responsiveDevice = 4; // Desktop Devices
					if(window.matchMedia("(max-width: 600px)").matches) responsiveDevice = 1; // Mobile Devices
					else if (window.matchMedia("(min-width: 601px) and (max-width: 992px)").matches) responsiveDevice = 3; // Tablet Devices
					//
					angular.forEach(category.courses, function(item) {
						
						if(countCourse == 0) {
							$carousel.append($carouselItem);
							$carouselItem.append($rowCourse);
						}
						//
						var $colCourse = $('<div/>').addClass('col s12 m4 l3');
						var $card = $('<div/>').addClass('card hoverable').addClass(cardStyle);
						var $cardImage = $('<div/>').addClass('card-image course-image');
						var $cardContent = $('<div/>').addClass('card-content');
						var $courseName = $('<div/>').addClass('course-title').text(item.name);
						var $courseBrief = $('<div/>').addClass('course-brief small').text(item.brief);
						if(category.permalink != 'podclass') {
							$cardImage.css('background-image', "url('"+resourceUrl + '../../../..' + item.thumbnail+"')");
							$cardContent.append($courseName).append($courseBrief);
						} else {
							$cardImage = $('<img/>').addClass('bg-card').attr('src', resourceUrl + '../../../..' + item.thumbnail);
							var $cardIcon = $('<img/>').attr('src', '/public/img/icon/icon-microphone-white.png');
							var $cardContent = $('<div/>').addClass('course-image course-podclass them-bg-yellow relative');
							$cardContent.append($cardIcon).append($courseName);
						}
						//
						var $cardAction = $('<div />').addClass('card-action').attr(courseState, item.code);
						$card.append($cardImage).append($cardContent).append($cardAction);
						$rowCourse.append($colCourse.append($card));
						//$colCourse.addClass(item.state);
						$cardAction.addClass(item.state)
						//
						countCourse++;
						if(countCourse == responsiveDevice) {
							countCourse = 0;
							$carouselItem = $('<div/>').addClass('carousel-item');
							$rowCourse = $('<div/>').addClass('row');
						}
					});
					$programCourse.append($carousel);
					$container.append($programCourse);
					//console.log($container)
					$category.append($sectionCourse.append($container));
					element.append($category);
					element.ready(function() {
						// initialization carrousel program courses
						var carousel = element.find('.carousel');
						carousel.carousel({
							fullWidth: true,
							indicators: false
						});
						// move next carousel
						$btnNext.click(function(e) {
							e.preventDefault();
							e.stopPropagation();
							$carousel.carousel('next');
						});
						// move prev carousel
						$btnPrev.click(function(e){
							e.preventDefault();
							e.stopPropagation();
							$carousel.carousel('prev');
						});
						// mobile responsive pagination
						if(responsiveDevice == 1) {
							carousel.carousel({
								fullWidth: true,
								indicators: true
							});
							//
							$btnPrev.removeClass().addClass('btn-pagination-sm prev-carousel absolute valign-wrapper hide-on-med-and-up');
							$btnNext.removeClass().addClass('btn-pagination-sm next-carousel absolute valign-wrapper hide-on-med-and-up');
							$container.addClass('relative').append($btnPrev).append($btnNext);
							var indicators = element.find('.indicators');
							if(index != Object.keys(scope.category).length) indicators.remove();
						}
					});
				});
				$compile(element.contents())(scope)
				//
			});
			}, 900);
			//
		}
	}
}])
.directive('categoryCourses', ['$compile', '$routeParams', function($compile, $routeParams) {
	return {
		restrict: 'A',
		link: function (scope, element, attrs) {
			//
			attrs.$observe('categoryCourses', function(name) {
				scope.bannerCourses = name =="";
				var castState = ['podclass'];
				var courseCount = 1;
				var courseType = $routeParams.category;
				var courseState = 'course-content';
				scope.service.client.category(name).then(function(category) {
					// console.log(category);
					//
					angular.forEach(category, function(item, index) {
						var type = item.permalink;
						if(!castState.includes(type) && !courseType) {
							//
							scope.bannerCourses = false;
							//
							var $section = $('<div/>').addClass('section');
							var $container = $('<div/>').addClass('container');
							var $rowCourseName = $('<div/>').addClass('row');
							var $colCourseName = $('<div/>').addClass('col s12 m12 l12');
							var $courseName = $('<h3/>').addClass('section-title black-text bold').text(item.name);
							var $courseNote = $('<p/>').addClass('section-note red-text regular').text(item.remark);
							if(courseCount % 2 == 1) $section.addClass('white'); 
							courseCount++;
							//
							$rowCourseName.append($colCourseName.append($courseName).append($courseNote));
							$container.append($rowCourseName);
							//
							var $rowCourses = $('<div/>').addClass('row');
							angular.forEach(item.courses, function(course) {
								var $col = $('<div/>').addClass('col s6 m4 l3');
								var $card = $('<div/>').addClass('card card-course hoverable');
								var $cardImage = $('<div/>').addClass('card-image course-image');
								var $cardContent = $('<div/>').addClass('card-content');
								var $courseTitle = $('<p/>').addClass('course-title').text(course.name);
								var $courseBrief = $('<p/>').addClass('course-brief small').text(course.brief);
								var $cardAction = $('<div/>').addClass('card-action').attr(courseState, course.code);
								//
								$cardImage.css('background-image', "url('"+course.thumbnail+"')");
								$cardContent.append($courseTitle).append($courseBrief);
								$card.append($cardImage).append($cardContent).append($cardAction);
								$rowCourses.append($col.append($card));
							});
							//
							$container.append($rowCourses);
							element.append($section.append($container));
							//
						}else if(castState.includes(type) && courseType=='podclass') {
							//
							var courseName = 'DBD<span class="them-text-yellow">POD</span>CLASS';
							var background = '/public/img/background/background-dbd-pod-class-fade.png';
							var backgroundColor = '#484A4B';
							// topic & background
							var $section = $('<div/>').addClass('section valign-wrapper bg-center-bottom');
							var $container = $('<div/>').addClass('container');
							var $courseName = $('<h1/>').addClass('course-media bold white-text relative center-align').html(courseName);
							
							$section.css("background-image", "url('"+background+"')");
							$section.css("background-color", backgroundColor);
							$container.append($courseName);
							// program
							var $rowCourse = $('<div/>').addClass('row');

							angular.forEach(item.courses, function(course) {
								var $colCourse = $('<div/>').addClass('col s6 m4 l3');
								var $card = $('<div/>').addClass('card card-pod-class hoverable black relative');
								var $cardImage = $('<img/>').addClass('bg-card').attr('src', course.thumbnail);
								var $cardIcon = $('<img/>').attr('src', '/public/img/icon/icon-microphone-white.png');
								var $courseImage = $('<div/>').addClass('course-image course-podclass them-bg-yellow relative');
								var $courseTitle = $('<p/>').addClass('course-title white-text').text(course.name);
								var $cardAction = $('<div/>').addClass('card-action').attr('course-state', course.code);
								var $cardTime = $('<div/>').addClass('icon-vertical course-time blue-grey-text text-lighten-3 medium right');
								var $icon = $('<i/>').addClass('material-icons').text('access_time');
								var $time = $('<span/>').addClass('italic').text(' 0 ชม.');
								//			
								$courseImage.append($cardIcon).append($courseTitle);
								$cardTime.append($icon).append($time);
								$cardAction.append($cardTime);
								$card.append($cardImage).append($courseImage).append($cardAction);
								$rowCourse.append($colCourse.append($card));
								//
							});
							$container.append($rowCourse);
							element.append($section.append($container));
						}
					});
					//
					$compile(element.contents())(scope)
				});
			}); 
		}
	}
}])
.directive('videoIntro', ['$timeout', function($timeout) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) {
			//
			var background = '/public/img/background/background-dbd-video.jpg';
			//
			$timeout(function() {
			scope.service.client.video().then(function(video) {
				// console.log(video);
				//
				if(video) {
					var btnCourseText = 'เริ่มดู';
					var btnPrevClass = 'btn-pagination prev-carousel normal white black-text';
					var btnNextClass = 'btn-pagination next-carousel normal white black-text';
					
					// background
					var $section = $('<div/>').addClass('section-intro relative background-image');
					var $container = $('<div/>').addClass('container');
					
					var img = new Image();
					img.onload = function() {
						$section.height(this.height);
					}
					img.src = background;
					$section.css("background-image", "url('"+background+"')");
					
					// pagination
					var $pagination = $('<div/>').addClass('right-align hide-on-small-only').css('padding', '0 0.75rem');
					var $btnPrev = $('<a/>').addClass(btnPrevClass).append($('<i/>').addClass('material-icons').text('navigate_before'));
					var $btnNext = $('<a/>').addClass(btnNextClass).append($('<i/>').addClass('material-icons').text('navigate_next'));
					$pagination.append($btnPrev).append($btnNext);
					$container.append($pagination);
					
					// program
					var $sectionCourse = $('<div/>').addClass('program-intro');
					
					scope.courseVideoContent = function() {
						//
						var	$carousel = $('<div/>').addClass('carousel carousel-slider course-carousel');
						var	$carouselItem = $('<div/>').addClass('carousel-item');
						var $rowCourse = $('<div/>').addClass('row');
						// responsive devices
						var countCourse = 1;
						var responsiveDevice = 5;
						if(window.matchMedia("(max-width: 600px)").matches) responsiveDevice = 2; // Mobile Devices
						else if (window.matchMedia("(min-width: 601px) and (max-width: 992px)").matches) responsiveDevice = 4; // Tablet Devices
						else responsiveDevice = 5; // Desktop Devices
	
						angular.forEach(video, function(item) {
							
							if(countCourse == 1) {
								$carousel.append($carouselItem);
								$carouselItem.append($rowCourse);
							}
							//
							var $colCourse = $('<div/>').addClass('col s12 m4 l3');
							var $card = $('<div/>').addClass('card card-video hoverable black relative');
							var $cardImage = $('<img/>').addClass('bg-card').attr('src', item.banner);
							var $cardIcon = $('<img/>').attr('src', '/public/img/icon/icon-play-video.png');
							var $courseImage = $('<div/>').addClass('course-image course-video them-bg-color relative');
							var $courseTitle = $('<p/>').addClass('course-title white-text').text(item.title);
							var $cardAction = $('<div/>').addClass('card-action');
							var $btnCourse = $('<a/>').addClass('waves-effect waves-light btn-small btn medium z-depth-0').text(btnCourseText);
							var $cardTime = $('<div/>').addClass('icon-vertical course-time blue-grey-text text-lighten-3 medium right');
							var $icon = $('<i/>').addClass('material-icons').text('access_time');
							var $time = $('<span/>').addClass('italic').text(' 0 ชม.');
							//			
							$courseImage.append($cardIcon).append($courseTitle);
							$btnCourse.attr('href', '/video/'+item.video_id);
							
							if(item.website_url){
								$btnCourse.attr('target', '_blank');
								$btnCourse.attr('href', item.website_url);
							}
							
							$btnCourse.click(function() {
								scope.scrollToTop();
							});	
							// $cardTime.append($icon).append($time);
							$cardAction.append($btnCourse).append($cardTime);
							$cardAction.append($cardTime);
							$card.append($cardImage).append($courseImage).append($cardAction);
							$rowCourse.append($colCourse.append($card));
							//
							countCourse++;
							if(countCourse == responsiveDevice) {
								countCourse = 1;
								$carouselItem = $('<div/>').addClass('carousel-item');
								$rowCourse = $('<div/>').addClass('row');
							}
						});
						
						$sectionCourse.append($carousel);
						
						// initialization carrousel program courses
						var carousel = element.find('.carousel');
						carousel.carousel({
							fullWidth: true,
							indicators: false
						});
						// move next carousel
						$btnNext.click(function(e) {
							e.preventDefault();
							e.stopPropagation();
							$carousel.carousel('next');
						});
						// move prev carousel
						$btnPrev.click(function(e){
							e.preventDefault();
							e.stopPropagation();
							$carousel.carousel('prev');
						});
						// mobile responsive pagination
						if(responsiveDevice == 2) {
							carousel.carousel({
								fullWidth: true,
								indicators: true
							});
							//
							$btnPrev.removeClass().addClass('btn-pagination-sm prev-carousel absolute valign-wrapper hide-on-med-and-up');
							$btnNext.removeClass().addClass('btn-pagination-sm next-carousel absolute valign-wrapper hide-on-med-and-up');
							$container.addClass('relative').append($btnPrev).append($btnNext);
						} else {
							$btnPrev.removeClass().addClass(btnPrevClass);
							$btnNext.removeClass().addClass(btnNextClass);
							$pagination.append($btnPrev).append($btnNext);
						}
					}
					//
					$container.append($sectionCourse);
					$section.append($container);
					element.append($section);
					
					element.ready(function() {
						scope.courseVideoContent();
						
						$(window).on('resize',function() {
							$sectionCourse.empty();
							scope.courseVideoContent();
						});
					});
					//
				}
			});
			}, 900);
			//
		}
	}
}])
.directive('programVideo', ['$routeParams', function($routeParams) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) {
			//
			var courseName = 'คลังความรู้<span class="them-text-yellow">ธุรกิจ</span>';
			var background = '/public/img/background/background-dbd-video-fade.png';
			var backgroundColor = '#0A0A12';
			var courseType = $routeParams.category;
			//
			if(courseType=='video') {
				scope.service.client.video().then(function(video) {
					// console.log(video);
					//
					// topic & background
					var $section = $('<div/>').addClass('section valign-wrapper bg-center-bottom');
					var $container = $('<div/>').addClass('container');
					var $courseName = $('<h1/>').addClass('course-media bold white-text relative center-align').html(courseName);

					$section.css("background-image", "url('"+background+"')");
					$section.css("background-color", backgroundColor);
					$container.append($courseName);
					// program
					var $rowCourse = $('<div/>').addClass('row');
					
					angular.forEach(video, function(item) {
						var $colCourse = $('<div/>').addClass('col s6 m4 l3');
						var $card = $('<div/>').addClass('card card-video hoverable black relative');
						var $cardImage = $('<img/>').addClass('bg-card').attr('src', item.banner);
						var $cardIcon = $('<img/>').attr('src', '/public/img/icon/icon-play-video.png');
						var $courseImage = $('<div/>').addClass('course-image course-video them-bg-color relative');
						var $courseTitle = $('<p/>').addClass('course-title white-text').text(item.title);
						var $cardAction = $('<div/>').addClass('card-action');
						var $btnCourse = $('<a/>').addClass('waves-effect waves-light btn-small btn medium z-depth-0').text('เริ่มดู');
						var $cardTime = $('<div/>').addClass('icon-vertical course-time blue-grey-text text-lighten-3 medium right');
						var $icon = $('<i/>').addClass('material-icons').text('access_time');
						var $time = $('<span/>').addClass('italic').text(' 0 ชม.');
						//			
						$courseImage.append($cardIcon).append($courseTitle);
						$btnCourse.attr('href', '/video/'+item.video_id);
						$btnCourse.click(function() {
							scope.scrollToTop();
						});	
						$cardTime.append($icon).append($time);
						// $cardAction.append($cardTime);
						$cardAction.append($btnCourse).append($cardTime);
						$card.append($cardImage).append($courseImage).append($cardAction);
						$rowCourse.append($colCourse.append($card));
					});
					$container.append($rowCourse);
					//
					$section.append($container);
					element.append($section);
				})
				//
			}
			//
		}
	}
}])
.directive('videoView', ['$routeParams', '$timeout', function($routeParams, $timeout) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) {
			//
				var video_id = $routeParams.id;
				
				$timeout(function() {
					scope.service.client.video(video_id).then(function(video) {
						scope.video = video;
						// console.log(scope.video);
						//
						var videContent = element.find('#vide_content');
						var $video = $('<video/>').addClass('responsive-video white').attr('controls', 'controls').css('width', '100%');
						var $source = $('<source/>').attr('type', 'video/mp4');
	
						$source.attr('src', scope.video.video_url);
						$video.append($source);
						//
						videContent.append($video);
					});
					
					scope.service.learner.videolog(video_id).then(function(data){
						
					});
				}, 400);
			//
		}
	}
}])
.directive('howToLearn', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			//
			scope.service.client.learn().then(function(learns) {
				// console.log(learns);
				//
				var $collapsible = $('<ul/>').addClass('collapsible grey lighten-3');
				$collapsible.attr('id', 'collapsible');
				element.append($collapsible);

				angular.forEach(learns, function(item) {
					var	$li = $('<li/>');
					var $header = $('<div/>').addClass('collapsible-header grey lighten-3 valign-wrapper');
					var $question = $('<h4/>').addClass('black-text').text(item.title);
					var $badge = $('<span/>').addClass('badge');
					var $body = $('<div/>').addClass('collapsible-body');
					var $answer = $('<div/>').addClass('black-text').html(item.content);
					//
					$badge.append($('<i/>').addClass('material-icons bold large').text('add'));
					$li.append($header.append($question).append($badge));
					$li.append($body.append($answer));
					$collapsible.append($li);
				});
				//
				$collapsible.collapsible();
			});
			//
		}
	}
}])
.directive('instructor', ['$routeParams', function($routeParams) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			//
			var instructorId = $routeParams.id;
			// console.log(instructorId);
			//
			if(_.isUndefined(instructorId)) { /* faculty of lecturers */
				scope.service.client.instructor().then(function(instructors) {
					// console.log(instructors);
					//
					if(instructors) {
						var $row = $('<div/>').addClass('row').css('margin', '0 -0.75rem');
						//
						angular.forEach(instructors, function(item) {
							var $col = $('<div/>').addClass('col s6 m4 l3');
							var $link = $('<a/>').attr('href', '/lecturer/' + item.instructor_id);
							var $card = $('<div/>').addClass('card-instructor');
							var $cardImage = $('<div/>').addClass('card-instructor-image');
							var $cardContent = $('<div/>').addClass('card-instructor-content');
							var $title = $('<h2/>').addClass('instructor-title').html(item.name + '<br />' + item.lastname);
							var $brief = $('<p/>').addClass('instructor-brief').html(item.title);
							//
							$cardImage.css('background-image', 'url("'+item.photo+'")');
							$cardContent.append($title).append($brief);
							$card.append($cardImage).append($cardContent);
							$link.click(function() {
								scope.scrollToTop();
							});
							$col.append($link.append($card));
							$row.append($col);
						});
						//
						element.append($row);
					}
				});
			}else { /* profile lecturer */
				scope.service.client.instructor(instructorId).then(function(instructor) {
					// console.log(instructor);
					//
					scope.instructor = instructor;
				});
			}
			//
		}
	}
}])
.directive('frequentlyAskedQuestion', [function() { /* need FAQ data from dinsorworks */
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			//
			scope.service.client.faq().then(function(faq) {
				// console.log(faq);
				// 
				var $collapsible = $('<ul/>').addClass('collapsible grey lighten-3');
				$collapsible.attr('id', 'collapsible');
				element.append($collapsible);
				
				angular.forEach(faq, function(item) {
					var	$li = $('<li/>');
					var $header = $('<div/>').addClass('collapsible-header grey lighten-3 valign-wrapper');
					var $question = $('<h4/>').addClass('black-text').text(item.question);
					var $badge = $('<span/>').addClass('badge');
					$badge.append($('<i/>').addClass('material-icons bold large').text('add'));
					$li.append($header.append($question).append($badge));
					
					var $body = $('<div/>').addClass('collapsible-body');
					var $answer = $('<div/>').addClass('black-text').html(item.answer);
					$li.append($body.append($answer));
					
					$collapsible.append($li);
				});
				//
				$collapsible.collapsible();
			});
			//
		}
	}
}])
.directive('knowledge', ['$routeParams', function($routeParams) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) {
			//
			var tipId = $routeParams.id;
			//
			if(_.isUndefined(tipId)) {
				scope.service.client.tip().then(function(tips) {
					// console.log(tips);
				
					if(tips) {
						
						scope.knowledgeContent = function() {
							var $container = $('<div/>').addClass('container');
							var $row = $('<div/>').addClass('row relative');
							var $boxShelf = $('<div/>').addClass('box-shelf white absolute');
							
							// responsive devices
							var count = 1;
							var responsiveDevice = 3;
							if(window.matchMedia("(max-width: 600px)").matches) responsiveDevice = 1; // Mobile Devices
							else if (window.matchMedia("(min-width: 601px) and (max-width: 992px)").matches) responsiveDevice = 3; // Tablet Devices
							else responsiveDevice = 3; // Desktop Devices
							
							angular.forEach(tips, function(item) {
								
								if(count == 1) {
									$container.append($row);
									$row.append($boxShelf);
								}
								//
								var $col = $('<div/>').addClass('col s12 m4 l4');
								var $link = $('<a/>').attr('href', '/practical-fact/' + item.tip_id);
								var $card = $('<div/>').addClass('card-trip bg-cover-center');
								//
								$card.css('background-image', 'url("'+ item.banner +'")');
								$link.append($card);
								$link.click(function() {
									scope.scrollToTop();
								});	
								$row.append($col.append($link));
								count++;
								//
								if(count == (responsiveDevice + 1)) {
									count = 1;
									$row = $('<div/>').addClass('row relative');
									$boxShelf = $('<div/>').addClass('box-shelf white absolute');
								}
							});
							element.append($container);
						}
						
						element.ready(function() {
							scope.knowledgeContent();
							
							// responsive resize
							$(window).on('resize',function() {
								element.empty();
								scope.knowledgeContent();
							});
						});
					}
					//
				});
			}else {
				//
				scope.service.client.tip(tipId).then(function(tip) {
					scope.tip = tip;
					// console.log(scope.tip);
				
					/* get thumbnail */
					element.find('.card-trip').css('background-image', 'url("'+ scope.tip.banner +'")');
					
					scope.knowledgeContent = function() {
						// responsive devices
						if(window.matchMedia("(max-width: 600px)").matches) { // Mobile Devices
							var boxTrip = element.find('.box-trip-topic');
							boxTrip.removeClass('valign-wrapper');
						}
					};
					
					element.ready(function() {
						scope.knowledgeContent();
						
						// responsive resize
						$(window).on('resize',function() {
							scope.knowledgeContent();
						});
					});
				});
				//
			}
			//
		}
	}
}])

/* Course */
.directive('alertPanel', ['$timeout', function($timeout) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) {
			scope.$watch('alert.msg', function(msg, old) {
				//console.log(msg)
				//console.log(old)
				var $panel = angular.element('#course-navigator .panel');
				var $btnClose = angular.element('<i>').addClass('close-btn material-icons').text('close');
				$panel.addClass('relative').append($btnClose);
				//console.log($panel.innerWidth())
				if(msg) {
					//element.empty();
					angular.element('<div/>').css('width','100%').html(msg).appendTo(element);
					element.addClass('alert-panel valign-wrapper');
					$panel.addClass('show');
					//scope.timeout(3000, scope.$parent.alert = {});
					scope.hideAlert = function() {
						$panel.removeClass('show');
						scope.alert.msg = '';
						element.empty();
					}
					
					$timeout(function() {
						scope.hideAlert();
					}, 7000);
					
					$btnClose.on('click', function() {
						scope.hideAlert();
					});
				} 
				/*if(msg=="") {
					if($panel.hasClass('show')) {
						$panel.removeClass('show');
						element.empty();
						//console.log(msg)
					}
				}*/
			});
		}
	}
}])
// .directive('courseState', [function() {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs) {
// 			attrs.$observe('courseState', function(code) 
// 			{					
// 				if(code) {
// 					// scope.service.course.state(code).then(function(state) {
// 						// console.log(state);
// 						// if(state.code=='enrol') {
// 							element.on('click', function() {
// 								element.find('a').addClass('normal regular disabled').text('กำลังโหลด...').unbind("click");
// 							});
// 						// }
// 					// });
// 					//
// 				};
// 			});
// 		}
// 	}
// }])
.directive('courseOutlines', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) {
			attrs.$observe('courseOutlines', function(total)
			{
				// console.log(total)
				// console.log(scope.course)
				if(total) {
					var $container = $('<div/>').addClass('container');
					var $row = $('<div/>').addClass('row');
					
					var $title = $('<h2>').addClass('head-text underline-text')
					if(scope.course.title_text.outline) {
						$container.append($title.text(scope.course.title_text.outline))
					}
					//
					if(scope.course.outlines.length) {
						angular.forEach(scope.course.outlines, function(outline, key) {
							var $outline = $('<div/>').addClass('outline col s12 m4 l4');
							var $title = $('<h2/>').addClass('title dbadman bold relative');
							var $chapter = $('<big/>').addClass('outdent right-align').text(outline.item);
							var $brief = $('<div/>').addClass('brief normal light').text(outline.brief);
							var $btnReadMore = $('<a/>').addClass('btn-flat small them-text-color regular padding-0').text('อ่านต่อ');
							//
							$title.append($chapter).append($('<span/>').text(outline.title));
							$outline.append($title).append($brief).append($btnReadMore);
							$btnReadMore.on('click', function() {
								$('.outlines .outline .btn-flat').show();
								$('.outlines .outline .brief').css({
									overflow: 'hidden',
									height: '9em',
									marginBottom: '0',
									webkitBoxOrient: 'vertical',
									webkitLineClamp: '6'
								});
								//
								$brief.css({
									overflow: 'visible',
									height: 'fit-content',
									marginBottom: $btnReadMore.height(),
									webkitBoxOrient: 'unset',
									webkitLineClamp: 'unset'
								});
								$('.outlines .outline .btn-flat').css('margin-bottom', $brief.height() - 162 + 'px');
								$btnReadMore.hide();
							});
							$container.append($row.append($outline));
							if(scope.course.type=='live') {
								$outline.append($('<div/>').addClass('date-calendar normal medium').text(outline.type.textdate))
								$outline.append($('<div/>').addClass('time normal medium').text(outline.type.time))
								$outline.append($('<img/>').attr('src', outline.type.icon).css('margin-top', '1em'))
							}
						});
					}else {
						element.remove();
					}
					//
					element.css('background-image', 'url('+scope.course.bg_outline+')').addClass('cover');
					element.append($container);
				}
			});
		}
	}
}])
.directive('courseDocument', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) {
			attrs.$observe('courseDocument', function(code)
			{
				//
				if(code && !_.isUndefined(scope.course.books)) {
					// console.log(scope.course.books);
					
					if(Object.keys(scope.course.books).length) {
						var $container = $('<div/>').addClass('container').css('margin-top', '2em');
						var $header = $('<h2/>').addClass('black-text bold').text('เอกสารประกอบการเรียน');
						var $msg = $('<h4/>').addClass('red-text regular center-align').css('margin', '6rem 0');
						var $row = $('<div/>').addClass('row');
						$container.append($header);
						
						// check enroll course
						scope.service.course.state(code).then(function(response) {
							var state = response.code;
							// console.log(response);
							//
							if(code && !_.isUndefined(state)) {
								if(state=='continue' || state=='review' || state=='start') {
									//
									angular.forEach(scope.course.books, function(item) {
										if(item.file) {
											var cover = item.cover ? item.cover : '/public/img/background/background-no-picture-500x500.jpg';
											//
											var $col = $('<div/>').addClass('col s6 m3 l2');
											var $action = $('<a/>').attr('href', item.file).attr('target', '_blank').attr('download', item.title);
											var $image = $('<img/>').addClass('document-image').attr('src', cover).attr('alt', item.title);
											var $title = $('<p/>').addClass('document-title black-text regular truncate-3').text(item.title);
											//
											$action.append($image).append($title);
											$row.append($col.append($action));
										}
									});
									$container.append($row);
								} else {
									$msg.text('กรุณาลงทะเบียนเรียน เพื่อดาวน์โหลดเอกสารประกอบการเรียน');
									$container.append($msg);
								}
							} else {
								$msg.text('กรุณาลงทะเบียนเรียน เพื่อดาวน์โหลดเอกสารประกอบการเรียน');
								$container.append($msg);
							}
							element.append($container).show();
						});
						//
					} else element.hide();
				} else element.hide();
				//
			});
		}
	}
}])
.directive('timeCountdown', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) {
			attrs.$observe('timeCountdown', function(type)
			{
				if(type=='quiz' || type=='final_test') {
					var $card = $('<div/>').addClass('card-alert center-align z-depth-2'); 
					var $alertTitle = $('<div/>').addClass('card-alert-title regular valign-wrapper').text('บทเรียนมีคำถามระหว่างเรียน 20 คำถาม');
					var $alertTimeCountdown = $('<span/>').addClass('card-alert-time medium normal').css('margin', '0 0.5em').text('00 : 00 : 00');
					//
					$card.append($alertTitle.append($alertTimeCountdown));
					element.append($card);
					
					// countdown timer 
					var count = 30 * 60;
					var counter = setInterval(timer, 1000);
					
					function timer() {
						count = count - 1;
						if (count == -1) {
							// alert('finish');
							clearInterval(counter);
							return;
						}
					
						var seconds = count % 60;
						var minutes = Math.floor(count / 60);
						var hours = Math.floor(minutes / 60);
						minutes %= 60;
						hours %= 60;
		
						$alertTimeCountdown.text(
							(hours.toString().length==1 ? '0': '')+hours + " : " + 
							(minutes.toString().length==1 ? '0': '')+minutes + " : " + 
							(seconds.toString().length==1 ? '0': '')+seconds
						); 
					}
				}
				//
			});
		}
	}
}])
.directive('bookCover', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) {
			attrs.$observe('bookCover', function(cover)
			{
				if(cover!='') {
					var image = scope.activity.resource.cover;
					var title = scope.activity.resource.title;
					var file = scope.activity.resource.file;
					
					var $document = $('<div/>').css('padding', '1em');
					var $img = $('<img/>').css('width', '10em').attr('src', image);
					var $title = $('<h6/>').css('margin-bottom', '1.5em').text(title);
					var $download = $('<a/>').append($('<img/>').attr('src', '//services.promptskill.com/app/program/public/img/icon/icon-book-open.png'));
	 				$download.attr('href', 'https:'+file);
	 				$download.attr('target', '_blank');
					
					$document.append($img).append($title).append($download);
					
					element.append($document);
				}
			});
		}
	}
}])

/* Learner */
.directive('courseCertificate', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			scope.cert_title = 'กำลังตรวจสอบ...';
			//
			scope.service.course.certificate(scope.course.code).then(function(cert) {
				// console.log(cert);
				
				if(!cert.reference) {
					scope.cert_title = 'คุณได้เรียนหลักสูตรจบแล้ว';
					scope.cert_msg = 'ขออภัย คะแนนของคุณไม่ผ่านเงื่อนไขการรับหนังสือรับรอง';
				}
			})
		}
	}
}])
.directive('certificateVerification', ['$routeParams', '$window', function($routeParams, $window) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			//
			scope.code = $routeParams.code;
			//console.log(scope.code);
			
			if(scope.code) {
				scope.card = 'certificate';
				scope.service.learner.certificated(scope.code).then(function(cert) {
					scope.cert = cert;
					scope.service.course.info(cert.course).then(function(course) {
						scope.cert.course = course;
					});
				});
			} else scope.card = 'form';
			
			scope.checkCertificate = function() {
				const code = $('#certificate_id').val();
				$window.location.href = '/certified/' + code;
				
				// scope.card = 'certificate';
			}
			//
		}
	}
}])

/* LRS */
// .directive('activityEmbed', ['$timeout', function($timeout) {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs)
// 		{
// 			//
// 			attrs.$observe('activityEmbed', function(module)
// 			{
// 				if(module !='') {
// 					$timeout(function() {
// 						var $iframe = $('#moobed');
// 						$iframe.attr('scrolling', 'yes');
// 						
// 						// $iframe.on("load", function() {
// 						// 	$iframe.contents().find("body.h5p-embed").css('overflow', 'auto');
// 						// });
// 					}, 1000);
// 				}
// 			});
// 			//
// 		}
// 	}
// }])

/* Form */
.directive('formHelper', ['$window',function($window) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			attrs.$observe('formHelper', function(text) {
				var helper = scope.helper;
				if(text) {
					if(!helper.hasOwnProperty('type')) {
						helper.title = 'มีบางอย่างผิดพลาด';
						helper.type = 'warning';
					}
					Swal.fire({
						title: helper.title,
						html: text,
						icon: helper.type,
						confirmButtonText: 'ตกลง',
						// confirmButtonColor: "#9E9E9E",
						heightAuto: false
					}).then(function() {
						//console.log(text)
						if(scope.helper.close) {
							$window.top.close();
						}
						if(scope.helper.redirect) {
							$window.location.href = '/'+scope.helper.redirect;
						}
						scope.helper = {}
					});
				}
			});
		}
	}
}])
.directive('formSignup', ['$window', function($window) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			// 
			scope.step = 'memberTypeStep';
			scope.member_type = 'กรุณาเลือกประเภทสมาชิก';
			scope.alert_text = 'กรุณาตรวจสอบและกรอกข้อมูลใหม่ให้ถูกต้อง';
			scope.policyModal = true;

			/* modal policy */
			element.ready(function() {
				if(scope.policyModal) {
					var modal = element.find('.modal');
					modal.modal({
						dismissible: false
					}).modal('open');

					scope.toWebPage = function() {
						$window.location.href = '/';
					}
				}
			});

			/* signup form multiple steps */
			scope.nextStep = function(id, step) {
				var status = false;
				
				if(id != 'null') {
					if(scope.validateForm(id)) {
						status = true;
					}else {
						Swal.fire({
							title: 'มีบางอย่างผิดพลาด',
							text: scope.alert_text,
							icon: 'warning',
							confirmButtonText: 'ตกลง',
							heightAuto: false
						});
						scope.alert_text = 'กรุณาตรวจสอบและกรอกข้อมูลใหม่ให้ถูกต้อง';
					}
				}else status = true;
				
				if(status) scope.step = step;
			}
			scope.prevStep = function(step) {
				scope.step = step;
			}
			
			/* validation form */
			scope.validateForm = function(id) {
				var status = false;
				var validate = 0;
				
				// validate input
				var formCheck = angular.element('#' + id).find('input');
				angular.forEach(formCheck, function(input) {
					var $input = angular.element(input);
					if($input.prop('required') && $input.val() =='') {
						validate++;
					}
				});

				// validate select
				formCheck = angular.element('#' + id).find('select');
				angular.forEach(formCheck, function(input) {
					var $input = angular.element(input);
					if($input.prop('required') && $input.val() == null) {
						validate++;
					}
				});

				// validate radio
				formCheck = angular.element('#' + id).find('input[type=radio]');
				var inputRadio = [];
				angular.forEach(formCheck, function(input) {
					// var $input = angular.element(input);
					var nameInput = angular.element(input).attr('name');
					
					if(!inputRadio.includes(nameInput)) {
						inputRadio.push(nameInput);
					}
				});
				angular.forEach(inputRadio, function(input) {
					if(!$('input[name='+input+']').is(':checked')) {
						validate++;
					}
				});
				
				// validate checkbox
				formCheck = angular.element('#' + id).find('input[type=checkbox]');
				var inputCheckbox = [];
				angular.forEach(formCheck, function(input) {
					var nameInput = angular.element(input).attr('name');
					
					if(!inputCheckbox.includes(nameInput)) {
						inputCheckbox.push(nameInput);
					}
				});
				angular.forEach(inputCheckbox, function(input) {
					if(!$('input[name='+input+']').is(':checked')) {
						validate++;
					}
				});
				
				// validate username
				if(angular.element('#' + id).find('input[name=username]').length) {
					var username = $('input[name=username]');
					var pattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
					var $helper = username.next().next();
					
					if (pattern.test(username.val()) == false) {
						scope.alert_text = 'รูปแบบอีเมลไม่ถูกต้อง';
						validate++;
					}
					
					// check member account
					// scope.service.member.valid(username.val()).then(function(data) {
					// 	console.log(data);
					// 	if(data) {
					// 		validate++;
					// 		scope.alert_text = data.msg;
					// 		username.removeClass("valid").addClass("invalid");
					// 		$helper.attr('data-error', data.msg);
					// 	}else {
					// 		username.removeClass("invalid").addClass("valid");
					// 		$helper.attr('data-error','รูปแบบอีเมลไม่ถูกต้อง');
					// 	}
					// });
					// console.log(validate);
				}
				
				// validate password
				if(angular.element('#' + id).find('input[name=password]').length) {
					//
					var password = $('input[name=password]').val();
					var confirm_password = $('input[name=confirm_password]').val();
					//
					if((password.length < 8 || confirm_password < 8) ||
					(password.search(/[A-Z]/) < 0 || confirm_password.search(/[A-Z]/) < 0) ||
					(password.search(/[a-z]/) < 0 || confirm_password.search(/[a-z]/) < 0) ||
					(password.search(/[0-9]/) < 0 || confirm_password.search(/[0-9]/) < 0)) {
						scope.alert_text = 'กรุณาตั้งรหัสผ่านให้เป็นไปตามเงื่อนไขที่กำหนด';
						validate++;
					}
					if(password != confirm_password) {
						scope.alert_text = 'รหัสผ่านไม่ตรงกัน';
						validate++;
					}	
				}
				
				if(validate == 0) status = true;
				return status;
			}

			/* Form Condition */
			// limit length input
			scope.limitLength = function(event, limit) {
				var char = String.fromCharCode(event.which);
				var length = event.target.value.length;

				if (length >= limit || !(/[0-9]/.test(char))) {
					event.preventDefault();
				}
			}
			// only english characters
			scope.onlyEnglishCharacters = function(e) {
				var orgi_text="ๅภถุึคตจขชๆไำพะัีรนยบลฃฟหกดเ้่าสวงผปแอิืทมใฝ๑๒๓๔ู฿๕๖๗๘๙๐ฎฑธํ๊ณฯญฐฅฤฆฏโฌ็๋ษศซฉฮฺ์ฒฬฦ";
				var chk_text = e.target.value.split("");
				chk_text.filter(function(s) {        
					if(orgi_text.indexOf(s) != -1){
						e.target.value = e.target.value.replace(RegExp(s, "g"),'');
					}           
				}); 
			}
			// only thai characters
			scope.onlyThaiCharacters = function(e) {
				var orgi_text="ๅภถุึคตจขชๆไำพะัีรนยบลฃฟหกดเ้่าสวงผปแอิืทมใฝ๑๒๓๔ู฿๕๖๗๘๙๐ฎฑธํ๊ณฯญฐฅฤฆฏโฌ็๋ษศซฉฮฺ์ฒฬฦ";
				var chk_text = e.target.value.split("");
				chk_text.filter(function(s) {        
					if(orgi_text.indexOf(s) == -1){
						e.target.value = e.target.value.replace(RegExp(s, "g"),'');
					}           
				}); 
			}
			// validation username
			$('#username').on('blur', function() {
				var input = $("#username");
				var $helper = input.next().next();
				scope.validationUsername = true;
				//
				if(input.val() && input.hasClass('valid')) {
					scope.service.member.valid(input.val()).then(function(data) {
						// console.log(data);
						if(data) {
							scope.validationUsername = true;
							input.removeClass("valid").addClass("invalid");
							$helper.attr('data-error', data.msg);
						}else {
							scope.validationUsername = false;
							input.removeClass("invalid").addClass("valid");
							$helper.attr('data-error','รูปแบบอีเมลไม่ถูกต้อง');
						}
					});
				}
			});
			// valid ID card
			scope.validIdCard = function() {
				var input = $("#id_card_number");
				var id = input.val();
				var disabled = true;
				
				if(id.length >= 13 && $("#id_card_number").hasClass('valid')) {
					for (var i = 0, sum = 0; i < 12; i++) {
						sum += parseInt(id.charAt(i)) * (13 - i);
					}
					let mod = sum % 11;
					let check = (11 - mod) % 10;
			
					if (check == parseInt(id.charAt(12))) {
						disabled = false;
						input.removeClass("invalid").addClass("valid");
						$("#helper").attr('data-error','กรุณากรอกให้ถูกต้อง');
					}else {
						disabled = true;
						input.removeClass("valid").addClass("invalid");
						$("#helper").attr('data-error','เลขประจำตัวประชาชนไม่ถูกต้อง');
					}
				}
				return disabled;
			}
			$("#id_card_number").on("keyup", function(e) {
				var input = $("#id_card_number");
				scope.validationIdCard = true;
				//
				if(e.target.value.length == 13) {
					scope.service.member.valid(e.target.value).then(function(data) {
						// console.log(data);
						if(data) {
							scope.validationIdCard = true;
							input.removeClass("valid").addClass("invalid");
							$("#helper").attr('data-error', data.msg);
						}else {
							scope.validationIdCard = false;
							input.removeClass("invalid").addClass("valid");
							$("#helper").attr('data-error','กรุณากรอกให้ถูกต้อง');
						}
					});
				}
			})
			
			$(":input").on("keyup", function(e) {
				var orgi_text="<>";
				var chk_text = e.target.value.split("");
				chk_text.filter(function(s) {        
					if(orgi_text.indexOf(s) != -1){
						e.target.value = e.target.value.replace(RegExp(s, "g"),'');
					}           
				}); 
			})
			// input upload and preview profile image
			$('#profile').on("change", function(event) { 
				var reader = new FileReader();
				reader.onload = function() {
					$( ".user-profile" ).each(function() {
						$(this).attr('src', reader.result);
					});
				}
				reader.readAsDataURL(event.target.files[0]);
			});
			// dropdown address
			scope.service.member.address().then(function(data) {
				scope.address = data;
				
				scope.addressChange = function(selectId) {
					scope.subdistrict_address = [];
					
					// search district by province id
					if(selectId== 'province' && scope.form.province) {
						scope.district_address = [];

						angular.forEach(scope.address.amphoe, function(item) {
							if(item.province_id == scope.form.province.province_id) {
								scope.district_address.push(item);
							}
						});
					}

					// search subdistrict by district id
					if(selectId== 'district' && scope.form.district) {
						angular.forEach(scope.address.district, function(item) {
							if(item.amphoe_id == scope.form.district.amphoe_id) {
								scope.subdistrict_address.push(item);
							}
						});
					}

				}
			});

			/* submit form function */
			scope.submitForm = function() {
				var registerData = {};
				registerData['type'] = scope.member_type;
				registerData['derivation'] = [];

				$.each($('#signup_form').serializeArray(), function(index, key) {
					var nameInput = key.name;
					
					if(nameInput == 'province') registerData[nameInput] = scope.form.province.province;
					else if(nameInput == 'district') registerData[nameInput] = scope.form.district.amphoe;
					else if(nameInput == 'subdistrict') registerData[nameInput] = scope.form.subdistrict.district;
					else if(nameInput == 'derivation') {
						// get value checkbox is checked
						$('input[name=derivation]:checked').each(function() {
							if(!registerData['derivation'].includes($(this).val())) {
								registerData['derivation'].push($(this).val());
							}
						});
					}
					else registerData[nameInput] = key.value;
				});
				//console.log(registerData);
				scope.service.member.signup(registerData).then(function(completed) {
					scope.step = 'completeyStep';
				})
				//if(registerData) scope.step = 'completeyStep';
			}
			//
		}
	}
}])
.directive('showHidePassword', ['$compile', function($compile) {
	return {
		restrict: 'C',
		link: function(scope, element, attrs)
		{
			var $prefixeVisibility = $('<span/>').addClass('prefixe-password').attr('ng-click', 'toggleVisibility()');
			var $prefixeIcon = $('<i/>').addClass('material-icons grey-text text-darken-2').text('visibility');
			//
			$prefixeVisibility.append($prefixeIcon);
			element.append($prefixeVisibility);
			
			// toggle password visibility function
			scope.toggleVisibility = function() {
				var input = $('.show-hide-password input');
				var prefixe = $('.show-hide-password .prefixe-password .material-icons');
				
				if(input.attr('type')=='password') {
					input.attr('type', 'text');
					prefixe.text('visibility_off');
				}else {
					input.attr('type', 'password');
					prefixe.text('visibility');
				}
			}
			$compile(element.contents())(scope);
			//
		}
	}
}])
.directive('formChangeInfo', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			
			/* get user profile */
			scope.service.user.profile().then(function(response) {
				var info = response;
				$("input[name='name']").val(info.name);
				$("input[name='lastname']").val(info.lastname);
			});
			
			/* change information function */
			scope.changeInfo = function() {
				
				var formId = '#form_info';
				var formData = {};
				var file = $('#identity_card')[0].files[0];
				
				if(file) {
					// disabled button
					$('.btn-submit').attr("disabled", true);
					
					$.each($(formId).serializeArray(), function(index, key) {
						formData[key.name] = key.value;
					});
					console.log(formData);
					
					// upload file
					var fileData = new FormData();
					fileData.append('file', file);
					
					// change info
					scope.service.user.changeInfo(formData, fileData).then(function(result) {
						// complete state
						if(result)
							scope.form_state = 'complete';
					});
					
				} else {
					Swal.fire({
						title: 'มีบางอย่างผิดพลาด',
						text: 'กรุณาอัพโหลดบัตรประชาชน',
						icon: 'warning',
						confirmButtonText: 'ตกลง',
						heightAuto: false
					});
				}
			}
			
			// upload attachment
			// scope.uploadAttach = function() {
			// 	var file = $('#profile')[0].files[0];
			// 	var formdata = new FormData();
			// 	//console.log(file)
			// 	formdata.append('file', file);
			// 	//console.log(formdata);
			// 	scope.service.user.upload(formdata).then(function(attach) {
			// 		//console.log(photo);
			// 		//$window.location.reload();
			// 	});
			// }
			
			// input upload and preview profile image
			$('#identity_card').on("change", function(event) { 
				var reader = new FileReader();
				reader.onload = function() {
					$( ".upload-form" ).each(function() {
						$(this).attr('src', reader.result);
					});
				}
				reader.readAsDataURL(event.target.files[0]);
			});
			//
		}
	}
}])

/* Member */
.directive('memberAuthorized', ['$location', function($location) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			scope.service.member.authorized().then(function(authorized) {
				//if($location.hash() && $location.path().indexOf('/register')<0) {
					//console.log($location.hash())
				//	$location.hash(null);
				//}
				//console.log(authorized)
				if(authorized.userid) {
					//console.log(authorized)
					$location.hash(null)
					/* if(authorized.course !=undefined) {
						if($location.path().indexOf('/course')!=0) {
							$location.path('/course/'+authorized.course);
						}
					} */
					if(authorized.permission) {
						//$location.path('/'+authorized.permission);//.hash(null)
					} else {
						var $btLogout = $('<a/>').text('ออกจากระบบ').addClass('waves-effect waves-light btn-small z-depth-0 white-text medium');
						//
						if(window.matchMedia("(max-width: 600px)").matches) { // button logout mobile
							$btLogout = $('<img/>').addClass('btn-logout').attr('src', '/public/img/icon/icon-logout.png');
						}
						$btLogout.on('click', function() {
							scope.logout();
						});
						element.append($btLogout);
						// element.prepend($('<a/>').text(authorized.user.fullname).addClass('black-text btn-flat z-depth-1').attr('href', '/dashboard'));
						var $btProfile = $('<a/>').addClass('btn-profile icon-vertical black-text').attr('href', '/dashboard');
						scope.service.user.avatar().then(function(avatar) {
							// console.log(avatar);
							if(avatar) {
								$('#avatar').attr('src', avatar);
							}
						});
						$btProfile.append($('<img id="avatar"/>').attr('src', '/public/img/icon/icon-dashboard-profile.png'));
						$btProfile.append($('<span/>').text(authorized.user.fullname));
						element.prepend($btProfile);
					}
				} else {
					if($location.path().split('/')[1] =='course') {
						// scope.logout();
					}
					var $btSignin = $('<a/>').text('เข้าระบบ').addClass('waves-effect waves-light btn z-depth-0 white-text medium')
					var $btSignup = $('<a/>').text('สมัครสมาชิก').addClass('waves-effect waves-light btn-flat z-depth-0 black-text white-trans-3 medium');
					element.append($btSignin).prepend($btSignup);
					// action
					$btSignin.attr('href', "/signin");
					$btSignup.attr('href', "/signup");
					/* attrs.$observe('memberAuthorize',function(position) {
						if(position=='promptskill') {
							$btSignup.removeClass('white-text').addClass('black-text')
						}
					}); */
				} 
				//
			});
		}
	}
}])

/* User */
.directive('userDashboard', ['$location', function($location) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			scope.type = 'total';
			scope.courseType = function(type, event) {
				scope.type = type;
				//
				$('.tabs-dashboard a.red-text').removeClass('red-text');
				var targetElement = angular.element(event.currentTarget);
				targetElement.addClass('red-text');
			}
			//
			scope.service.user.courses().then(function(courses) {
				console.log(courses)
				scope.user['learner'] = courses;
			});
			
			// remaining time filter function
			scope.remainingTime = function(duration, timestamp, end_date) {
				var remaining = 0;
				var startDate = new Date(timestamp * 1000);
				var lastDate = new Date(timestamp * 1000 + parseInt(duration) * (1000 * 3600 * 24));
				var currentDate = new Date();
				//
				var differenceTime = currentDate.getTime() - startDate.getTime();
				var differenceDays = differenceTime / (1000 * 3600 * 24);
				if(duration && timestamp) {
					remaining = parseInt(duration) - Math.floor(differenceDays);
					if(end_date) {
						var endDate = new Date(end_date * 1000);
						// console.log(startDate + ' : ' + endDate + ' : ' + lastDate + ' : ' + duration)
						if (endDate <lastDate) {
							remaining = Math.ceil((endDate - currentDate) / (1000 * 3600 * 24));
						}
					}
				}else {
					remaining = '-';
				}
				// console.log(remaining)
				return remaining;
			}
			//
		}
	}
}])
.directive('avatarPhoto', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			element.addClass('avatar-photo');
			scope.service.user.avatar('photo').then(function(photo) {
				if(photo) {
					element.attr('src', photo);
				}
			})
		}
	}
}])
// .directive('userLearner', [function() {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs)
// 		{
// 			if(scope.user.course == undefined) {
// 				scope.service.user.learner().then(function(courses) {
// 					// console.log(courses)
// 					scope.user['courses'] = courses;
// 					scope.noneLearner = Object.keys(scope.user.courses).length > 0;
// 					if(Object.keys(scope.user.courses).length == 0) {
// 						element.find('.course-learner-none .learner-msg').text('ขณะนี้ไม่มีหลักสูตรที่กำลังเรียน');
// 					}
// 					// console.log(scope.user);
// 				});
// 			}
// 
// 			// remaining time filter function
// 			scope.remainingTime = function(duration, timestamp, end_date) {
// 				var remaining = 0;
// 				var startDate = new Date(timestamp * 1000);
// 				var lastDate = new Date(timestamp * 1000 + parseInt(duration) * (1000 * 3600 * 24));
// 				var currentDate = new Date();
// 				//
// 				var differenceTime = currentDate.getTime() - startDate.getTime();
// 				var differenceDays = differenceTime / (1000 * 3600 * 24);
// 				if(duration && timestamp) {
// 					remaining = parseInt(duration) - Math.floor(differenceDays);
// 					if(end_date) {
// 						var endDate = new Date(end_date * 1000);
// 						// console.log(startDate + ' : ' + endDate + ' : ' + lastDate + ' : ' + duration)
// 						if (endDate <lastDate) {
// 							remaining = Math.floor((endDate - currentDate) / (1000 * 3600 * 24));
// 						}
// 					}
// 				}else {
// 					remaining = '-';
// 				}
// 				// console.log(remaining)
// 				return remaining;
// 			}
// 			//
// 		}
// 	}
// }])
.directive('userPodclass', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			if(scope.user.course == undefined) {
				scope.service.user.podclass().then(function(courses) {
					// console.log(courses);
					scope.podclass = courses;
					scope.nonePodclass = Object.keys(scope.podclass).length > 0;
					if(Object.keys(scope.podclass).length == 0) {
						element.find('.course-podclass-none .learner-msg').text('ขณะนี้ไม่มีหลักสูตรที่กำลังเรียน');
					}
				})
			}
			//
		}
	}
}])
// .directive('userCompletion', [function() {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs)
// 		{
// 			if(scope.user.course ==undefined) {
// 				scope.service.user.completed().then(function(courses) {
// 					scope.user['completion'] = courses;
// 					scope.noneCompletion = Object.keys(scope.user.completion).length > 0;
// 					if(Object.keys(scope.user.completion).length == 0) {
// 						element.find('.course-completed-none .completed-msg').text('ขณะนี้ยังไม่มีหลักสูตรที่ท่านเรียนจบแล้ว');
// 					}
// 					// console.log(scope.user);
// 				});
// 			}
// 		}
// 	}
// }])
.directive('userProfile', ['$window', '$timeout', function($window, $timeout) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			/* get user profile */
			//if(scope.user.course ==undefined) {
				scope.service.user.profile().then(function(profile) {
					// console.log(profile)
					scope.user['profile'] = profile;
					//console.log(scope.user);
					scope.info = scope.user.profile;
					//console.log(scope.info);
				});
			//}
			
			/* validation form */
			scope.validateForm = function(id) {
				var status = false;
				var validate = 0;
				
				// validate input
				var formCheck = angular.element('#' + id).find('input');
				angular.forEach(formCheck, function(input) {
					var $input = angular.element(input);
					if($input.prop('required') && $input.val() =='') {
						validate++;
					}
				});
			
				// validate select
				formCheck = angular.element('#' + id).find('select');
				angular.forEach(formCheck, function(input) {
					var $input = angular.element(input);
					if($input.prop('required') && $input.val() == null) {
						validate++;
					}
				});
			
				// validate radio
				formCheck = angular.element('#' + id).find('input[type=radio]');
				var inputRadio = [];
				angular.forEach(formCheck, function(input) {
					// var $input = angular.element(input);
					var nameInput = angular.element(input).attr('name');
					
					if(!inputRadio.includes(nameInput)) {
						inputRadio.push(nameInput);
					}
				});
				angular.forEach(inputRadio, function(input) {
					if(!$('input[name='+input+']').is(':checked')) {
						validate++;
					}
				});
				
				// validate checkbox
				formCheck = angular.element('#' + id).find('input[type=checkbox]');
				var inputCheckbox = [];
				angular.forEach(formCheck, function(input) {
					var nameInput = angular.element(input).attr('name');
					
					if(!inputCheckbox.includes(nameInput)) {
						inputCheckbox.push(nameInput);
					}
				});
				angular.forEach(inputCheckbox, function(input) {
					if(!$('input[name='+input+']').is(':checked')) {
						validate++;
					}
				});
				
				// validate password
				if(angular.element('#' + id).find('input[name=new_password]').length) {
					//
					var password = $('input[name=new_password]').val();
					var confirm_password = $('input[name=confirm_password]').val();
					//
					if((password.length < 8 || confirm_password < 8) ||
					(password.search(/[A-Z]/) < 0 || confirm_password.search(/[A-Z]/) < 0) ||
					(password.search(/[a-z]/) < 0 || confirm_password.search(/[a-z]/) < 0) ||
					(password.search(/[0-9]/) < 0 || confirm_password.search(/[0-9]/) < 0)) {
						scope.alert_text = 'กรุณาตั้งรหัสผ่านให้เป็นไปตามเงื่อนไขที่กำหนด';
						validate++;
					}
					if(password != confirm_password) {
						scope.alert_text = 'รหัสผ่านไม่ตรงกัน';
						validate++;
					}	
				}
				
				if(validate == 0) status = true;
				return status;
			}
			
			/* Form Condition */
			// limit length input
			scope.limitLength = function(event, limit) {
				var char = String.fromCharCode(event.which);
				var length = event.target.value.length;
			
				if (length >= limit || !(/[0-9]/.test(char))) {
					event.preventDefault();
				}
			}
			// only thai characters
			scope.onlyThaiCharacters = function(e) {
				var orgi_text="ๅภถุึคตจขชๆไำพะัีรนยบลฃฟหกดเ้่าสวงผปแอิืทมใฝ๑๒๓๔ู฿๕๖๗๘๙๐ฎฑธํ๊ณฯญฐฅฤฆฏโฌ็๋ษศซฉฮฺ์ฒฬฦ";
				var chk_text = e.target.value.split("");
				chk_text.filter(function(s) {        
					if(orgi_text.indexOf(s) == -1){
						e.target.value = e.target.value.replace(RegExp(s, "g"),'');
					}           
				}); 
			}
			// valid ID card
			scope.validIdCard = function() {
				var input = $("#id_card_number");
				var id = input.val();
				var disabled = true;
				
				if(id.length >= 13) {
					for (var i = 0, sum = 0; i < 12; i++) {
						sum += parseInt(id.charAt(i)) * (13 - i);
					}
					let mod = sum % 11;
					let check = (11 - mod) % 10;
			
					if (check == parseInt(id.charAt(12))) {
						disabled = false;
						input.removeClass("invalid").addClass("valid");
						$("#helper").attr('data-error','กรุณากรอกให้ถูกต้อง');
					}else {
						disabled = true;
						input.removeClass("valid").addClass("invalid");
						$("#helper").attr('data-error','เลขประจำตัวประชาชนไม่ถูกต้อง');
					}
				}
				return disabled;
			}
			
			// dropdown address
			scope.service.member.address().then(function(data) {
				scope.address = data;
				
				scope.addressChange = function(selectId) {
					scope.subdistrict_address = [];
					
					// search district by province id
					if(selectId== 'province' && scope.form.province) {
						scope.district_address = [];
			
						angular.forEach(scope.address.amphoe, function(item) {
							if(item.province_id == scope.form.province.province_id) {
								scope.district_address.push(item);
							}
						});
					}
					// search subdistrict by district id
					if(selectId== 'district' && scope.form.district) {
						angular.forEach(scope.address.district, function(item) {
							if(item.amphoe_id == scope.form.district.amphoe_id) {
								scope.subdistrict_address.push(item);
							}
						});
					}
				}
			});
			$(":input").on("keyup", function(e) {
				var orgi_text="<>";
				var chk_text = e.target.value.split("");
				chk_text.filter(function(s) {        
					if(orgi_text.indexOf(s) != -1){
						e.target.value = e.target.value.replace(RegExp(s, "g"),'');
					}           
				}); 
			})
			// input upload and preview profile image
			$('#profile').on("change", function(event) { 
				var reader = new FileReader();
				reader.onload = function() {
					$( ".upload-form .user-profile" ).each(function() {
						$(this).attr('src', reader.result);
					});
				}
				reader.readAsDataURL(event.target.files[0]);
			});
			// element.ready(function() {
			// 	const elem = document.getElementById('birthday');
			// 	const datepicker = new Datepicker(elem, {
			// 		format: "dd/mm/yyyy",
			// 		autohide: true,
			// 		isBuddhist: true, 
			// 		defaultDate: 'toDay'
			// 	}); 
				
			// 	var datepicker = $('.datepicker');
			// 	datepicker.datepicker({
			// 		autoClose: true,
			// 		format: 'dd/mm/yyyy',
			// 		i18n: {
			// 			cancel: 'ยกเลิก',
			// 			done: 'ตกลง',
			// 			clear: 'ล้างข้อมูล',
			// 			months: ['มกราคม','กุมภาพันธ์','มีนาคม','เมษายน','พฤษภาคม','มิถุนายน','กรกฎาคม','สิงหาคม','กันยายน','ตุลาคม','พฤศจิกายน','ธันวาคม'],
			// 			monthsShort: ['ม.ค.','ก.พ.','มี.ค.','เม.ย.','พ.ค.','มิ.ย.','ก.ค.','ส.ค.','ก.ย.','ต.ค.','พ.ย.','ธ.ค.'],
			// 			weekdays:['วันอาทิตย์','วันจันทร์','วันอังคาร','วันพุธ','วันพฤหัสบดี','วันศุกร์','วันเสาร์'],
			// 			weekdaysShort:['อา','จ','อ','พ','พฤ','ศ','ส'],
			// 			weekdaysAbbrev: ['อา', 'จ', 'อ', 'พ', 'พฤ', 'ศ', 'ส']
			// 		},
			// 		onOpen: function() {
			// 			console.log('open');
			// 			// document.querySelector('.dropdown-content.select-dropdown > li > span').forEach(function(e) {
			// 			$timeout(function() {
			// 				// $('.dropdown-content.select-dropdown > li > span').each(function(index, element) {
			// 				// 	// element.html('500');
			// 				// 	console.log(element);
			// 				// });
			// 				// var listItems = $("#productList li");
			// 				$('.dropdown-content.select-dropdown li').each(function(index, element) {
			// 					console.log(element.find('span').html());
			// 				});
			// 			}, 400);
			// 		}
			// 	});
			// });
			
			/* upload photo */
			scope.uploadProfile = function() {
				var file = $('#profile')[0].files[0];
				var formdata = new FormData();
				//console.log(file)
				formdata.append('file', file);
				//console.log(formdata);
				scope.service.user.photo(formdata).then(function(photo) {
					//console.log(photo);
					$window.location.reload();
				});
			}

			// edit profile function
			scope.editProfile = function() {
				// console.log('edit profile')
				if(scope.validateForm('edit_profile')) {
					var registerData = {};
					
					$.each($('#edit_profile').serializeArray(), function(index, key) {
						var nameInput = key.name;
						
						if(nameInput == 'province') registerData[nameInput] = scope.form.province.province;
						else if(nameInput == 'district') registerData[nameInput] = scope.form.district.amphoe;
						else if(nameInput == 'subdistrict') registerData[nameInput] = scope.form.subdistrict.district;
						else registerData[nameInput] = key.value;
					});
					//console.log(registerData);
					scope.service.user.profile(registerData).then(function(profile) {
						//console.log(profile)
						scope.page = 'info';
						$window.location.reload();
					});
				}else {
					scope.alert();
				}
				//
			}
			
			// change password function
			scope.changePassword = function() {
				
				if(scope.validateForm('change_password')) {
					console.log('changePassword');
					var newPassword = $('#new_password').val();
					//
					scope.service.user.changepassword(newPassword).then(function() {
						scope.page = 'info';
					});
				}else {
					scope.alert();
				}
				//
			}
			
			// alert function
			scope.alert_text = 'กรุณาตรวจสอบและกรอกข้อมูลใหม่ให้ถูกต้อง';
			scope.alert = function() {
				Swal.fire({
					title: 'มีบางอย่างผิดพลาด',
					text: scope.alert_text,
					icon: 'warning',
					confirmButtonText: 'ตกลง',
					heightAuto: false
				});
				scope.alert_text = 'กรุณาตรวจสอบและกรอกข้อมูลใหม่ให้ถูกต้อง';
			}
			//
		}
	}
}])