/* 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').attr('target', '_self');
								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('carouselHighlight', ['$timeout', function($timeout) {
		/* need banner data form dinsorworks */
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				//
				$timeout(function() {
					scope.service.client.highlight().then(function(response) {
						// console.log(response);
						scope.carousel_highlight = response.highlight;
						//
					});
				}, 900);

				// Init Carousel
				scope.initCarouselHighlight = function() {
					// console.log('init carouse');
					const splide = new Splide('.carousel-highlight .splide', {
						autoplay: true
					});
					splide.mount();
				}
				//
			}
		}
	}])
	.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('courseSpecial', ['$compile', '$timeout', function($compile, $timeout) {
		return {
			restruct: 'A',
			link: function link(scope, element, attrs) {
				//
				const courses = [{
						'code': 'DBD68501',
						'name': 'การเริ่มต้นธุรกิจสำหรับ SME มือใหม่',
						'brief': 'เป็นหลักสูตรพื้นฐานโดยเริ่มต้นจากการถามตนเองว่าอยากทำธุรกิจเพราะอะไรมีเป้าหมายอะไรในการทำธุรกิจ การทำธุรกิจให้ประสบความสำเร็จต้องใช้ทั้งกำลังกายและกำลังใจต้องใช้เวลาในการเรียนรู้และไม่มีทางลัดแต่จะประสบความสำเร็จเร็วแค่ไหนขึ้นอยู่กับหลายปัจจัยโดยสิ่งที่ต้องนำมาใช้การหาวิธีทำอย่างไรให้มีโอกาสประสบความสำเร็จให้มากที่สุด โดยการเรียนรู้หลักการที่สำคัญก่อนใช้เครื่องมือใช้ข้อมูลที่เข้าถึงได้ให้เป็นประโยชน์มากที่สุดซึ่งเป็นแนวคิดและปัจจัยความสำเร็จของการเริ่มต้นธุรกิจเหมาะสำหรับผู้เริ่มประกอบธุรกิจและผู้สนใจทั่วไป',
						'thumbnail': '/public/resources/course/22/8920136a-582a-4321-9e03-470c1d7ceb15/image/65101.jpg',
						'banner': '/public/resources/course/22/8920136a-582a-4321-9e03-470c1d7ceb15/image/Banner65101-1.jpg',
						'duration': '180',
						'cpd': false,
						'certificate': true,
						'state': null,
					},
					{
						'code': 'DBD68502',
						'name': 'การตลาดด้าน e-commerce',
						'brief': 'ปฏิเสธไม่ได้เลยว่าโลกออนไลน์ในปัจจุบันมีผลต่อการใช้ชีวิตของคนเราเป็นอย่างมาก ทั้งการทำธุรกิจที่ต้องปรับตัวให้เข้ากับพฤติกรรมผู้บริโภค จึงมีร้านค้าที่ก้าวเข้าสู่โลก e-commerce (อีคอมเมิร์ซ) กันมากขึ้น ทำให้การศึกษาและการเรียนรี้ความเกี่ยวข้องกับการทำธุรกิจออนไลน์ และกลยุทธ์การตลาดในการโปรโมทสินค้าผ่านอินเตอร์เน็ตทั้งหมดนี้จึงเป็นเรื่องสำคัญ ที่จะทำให้สามารถขายสินค้าและเอาชนะคู่แข่งที่มีจำนวนมากได้',
						'thumbnail': '/public/resources/course/48/b385fac2-e916-431c-9666-bafaf8f69400/image/65302.jpg',
						'banner': '/public/resources/course/48/b385fac2-e916-431c-9666-bafaf8f69400/image/DBD65302-Banner.jpg',
						'duration': '180',
						'cpd': false,
						'certificate': true,
						'state': null,
					},
					{
						'code': 'DBD68503',
						'name': 'การตลาดยุคดิจิทัล',
						'brief': 'การทำการตลาดแบบดิจิทัลในปัจจุบันไม่เพียงแต่ช่วยให้ธุรกิจโปรโมทสินค้าและบริการได้เท่านั้น แต่ยังช่วยให้บริการลูกค้าออนไลน์ได้ตลอด 24 ชั่วโมง เพื่อให้ลูกค้ารู้สึกว่าได้รับการดูแลและเอาใจใส่เป็นอย่างดี ด้วยเหตุนี้การตลาดแบบดิจิทัลจึงเป็นประโยชน์สำหรับแบรนด์และธุรกิจต่างๆ ในหลักสูตรนี้เนื้อหาครอบคลุมเกี่ยวกับ เครื่องมือส่งเสริมการตลาดดิจิทัล ซึ่งเป็นหลักสูตรที่ช่วยให้ผู้เรียนสามารถเพิ่มยอดขายในการทำการค้าผ่านออนไลน์โดยการใช้เครื่องมือต่าง ๆ เข้ามาช่วยในการดำเนินธุรกิจให้ประสบความสำเร็จได้อย่างลงตัวเป็นอย่างดี',
						'thumbnail': '/public/resources/course/49/ceab3583-8ba0-4be7-afd5-e3c12849897d/image/65303.jpg',
						'banner': '/public/resources/course/49/ceab3583-8ba0-4be7-afd5-e3c12849897d/image/DBD65303-Banner.jpg',
						'duration': '180',
						'cpd': false,
						'certificate': true,
						'state': null,
					},
					{
						'code': 'DBD68504',
						'name': 'AI เปลี่ยนเกมธุรกิจ พลิก SME ไทยให้เติบโต',
						'brief': 'หลักสูตรนี้จะพาคุณเจาะลึกโลกของ AI ตั้งแต่พื้นฐาน ที่เข้าใจง่าย คลายทุกข้อสงสัย และพาไปรู้จัก เทรนด์ AI ที่กำลังพลิกโฉมธุรกิจ จากนั้นคุณจะได้เห็นว่า AI ช่วย ยกระดับการตลาด และการดำเนินงานได้อย่างไร พร้อมทำความเข้าใจ Generative AI อย่างลึกซึ้ง และเรียนรู้การนำไปใช้จริงในธุรกิจของคุณ ฝึกใช้งาน ChatGPT และ Gemini รวมถึงการวิเคราะห์ข้อมูลเชิงลึก สุดท้ายเราจะช่วยคุณ ประเมินความพร้อม วางแผน และเลือกใช้ AI ให้เหมาะสมกับธุรกิจ เพื่อให้ SME ไทยก้าวทันและเติบโตในยุค AI ได้อย่างยั่งยืน',
						'thumbnail': '/public/resources/course/79/2ca95863-ea8f-428f-9753-3d512975c866/image/DBD_Thum.png',
						'banner': '/public/resources/course/79/2ca95863-ea8f-428f-9753-3d512975c866/image/Banner_DBD%20AI_01.png',
						'duration': '180',
						'cpd': false,
						'certificate': true,
						'state': null,
					},
					{
						'code': 'DBD68505',
						'name': 'เส้นทางสู่ความสำเร็จธุรกิจร้านอาหาร',
						'brief': 'เป็นหลักสูตรที่ออกแบบมาเพื่อช่วยผู้ที่สนใจหรือกำลังทำธุรกิจร้านอาหารให้สามารถเดินทางไปสู่ความสำเร็จได้อย่างมีประสิทธิภาพและยั่งยืน โดยการถ่ายทอดประสบการณ์และความรู้จากผู้เชี่ยวชาญที่มีประสบการณ์ตรงในการทำธุรกิจร้านอาหาร',
						'thumbnail': '/public/resources/course/76/b05a3ea2-8bf8-4aec-9a23-5b1789fdb6c4/image/Thumb_Business3.png',
						'banner': '/public/resources/course/76/b05a3ea2-8bf8-4aec-9a23-5b1789fdb6c4/image/Banner_DBD68101.png',
						'duration': '180',
						'cpd': false,
						'certificate': true,
						'state': null,
					}
				];
				// console.log(courses);

				$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 lighten-5 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));
						$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.courseSpecialContent = 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.courseSpecialContent();

							$(window).on('resize', function() {
								$programCourse.empty();
								scope.courseSpecialContent();
							});

						});
						//
						$compile(element.contents())(scope);
					}
					//
					// });
				}, 1000);
			}
		}
	}])
	.directive('courseCampaign', ['$compile', '$timeout', function($compile, $timeout) {
		return {
			restruct: 'A',
			link: function link(scope, element, attrs) {
				//
				const courses = [{
						'code': 'DBD68104',
						'name': 'วางกลยุทธ์เพิ่มยอดขาย ลดต้นทุน',
						'brief': 'บทเรียนนี้ว่าด้วยการวางกลยุทธ์เพื่อ “เพิ่มยอดขาย และลดต้นทุน” โดยนำเสนอทั้งมุมมอง Beginner สำหรับผู้ที่เริ่มต้น สามารถทำตามได้ง่าย และ Advance สำหรับผู้ที่มีประสบการณ์และต้องการยกระดับการบริหารจัดการเชิงลึก เนื้อหาครอบคลุมตั้งแต่การวางแผน การปรับปรุงการขาย การจัดการต้นทุน ไปจนถึงเทคนิคการบริหารธุรกิจให้มีประสิทธิภาพและยั่งยืน',
						'thumbnail': '/public/resources/course/81/4aaee6fe-ff00-4340-901c-82ba3d3756ed/image/Thum_DBD68104.png',
						'banner': '/public/resources/course/81/4aaee6fe-ff00-4340-901c-82ba3d3756ed/image/Banner-DBD68104_1.png',
						'duration': '180',
						'cpd': false,
						'certificate': true,
						'state': null,
					},
					{
						'code': 'DBD68103',
						'name': 'หมัดเด็ดร้านอาหารขายดีกลยุทธ์เพิ่มยอดปังตลอดปี',
						'brief': 'เป็นหลักสูตรที่มีการเรียนรู้กลยุทธ์สำคัญที่จะช่วยให้ร้านอาหารมียอดขายต่อเนื่องทั้งปี ผ่านการรักษาคุณภาพ สร้างเมนูเด่น ทำการตลาดออนไลน์ จัดโปรโมชันตรงจังหวะ และใส่ใจบริการ เพื่อดึงดูดลูกค้าใหม่และรักษาลูกค้าเก่าไว้ได้อย่างยั่งยืน',
						'thumbnail': '/public/resources/course/80/8fb40c22-3529-4c39-8f97-205a8f72796b/image/Thum_DBD68103.png',
						'banner': '/public/resources/course/80/8fb40c22-3529-4c39-8f97-205a8f72796b/image/Banner_DBD68103.png',
						'duration': '180',
						'cpd': false,
						'certificate': true,
						'state': null,
					},
					{
						'code': 'DBD68402',
						'name': 'AI เปลี่ยนเกมธุรกิจ พลิก SME ไทยให้เติบโต',
						'brief': 'หลักสูตรนี้จะพาคุณเจาะลึกโลกของ AI ตั้งแต่พื้นฐาน ที่เข้าใจง่าย คลายทุกข้อสงสัย และพาไปรู้จัก เทรนด์ AI ที่กำลังพลิกโฉมธุรกิจ จากนั้นคุณจะได้เห็นว่า AI ช่วย ยกระดับการตลาด และการดำเนินงานได้อย่างไร พร้อมทำความเข้าใจ Generative AI อย่างลึกซึ้ง และเรียนรู้การนำไปใช้จริงในธุรกิจของคุณ ฝึกใช้งาน ChatGPT และ Gemini รวมถึงการวิเคราะห์ข้อมูลเชิงลึก สุดท้ายเราจะช่วยคุณ ประเมินความพร้อม วางแผน และเลือกใช้ AI ให้เหมาะสมกับธุรกิจ เพื่อให้ SME ไทยก้าวทันและเติบโตในยุค AI ได้อย่างยั่งยืน ',
						'thumbnail': '/public/resources/course/79/2ca95863-ea8f-428f-9753-3d512975c866/image/DBD_Thum.png',
						'banner': '/public/resources/course/79/2ca95863-ea8f-428f-9753-3d512975c866/image/Banner_DBD AI_01.png',
						'duration': '180',
						'cpd': false,
						'certificate': true,
						'state': null,
					},
					{
						'code': 'DBD68401',
						'name': 'Meta AI & Ads Solutions for SME Growth',
						'brief': 'ในหลักสูตรนี้ ทุกท่านจะได้เรียนรู้เกี่ยวกับ Meta Ads Solutions ที่จะช่วยเพิ่มประสิทธิภาพในการทำ ทำ โฆษณา และดึงดูดกลุ่มเป้าหมายได้อย่างแม่นยำ ยำ ยิ่งขึ้น พร้อมทั้งทำ ทำ ความรู้จักกับ Generative AI จาก Meta อีกหนึ่งเครื่องมือสำ สำ คัญที่จะเข้ามายกระดับงานการตลาดให้ดูเป็นมืออาชีพมากขึ้น อีกทั้งยังใช้งานง่าย และไม่ซับซ้อน',
						'thumbnail': '/public/resources/course/78/9c04f40c-b68d-4e4b-93b9-7e66b3c5cd32/image/Thum_DBD68401.png',
						'banner': '/public/resources/course/78/9c04f40c-b68d-4e4b-93b9-7e66b3c5cd32/image/0623%20-%20Banner%20Meta%20MOC_11_%20DBD%201920x640.jpg',
						'duration': '180',
						'cpd': false,
						'certificate': true,
						'state': null,
					},
					{
						'code': 'DBD68102',
						'name': 'รู้ทันภูมิรัฐศาสตร์สร้างโอกาสธุรกิจไทย',
						'brief': 'เป็นหลักสูตรที่เน้นการเรียนรู้เกี่ยวกับภูมิรัฐศาสตร์ในมุมมองที่สามารถนำไปใช้ในการวิเคราะห์และวางกลยุทธ์ทางธุรกิจในบริบทของการค้าและเศรษฐกิจในระดับภูมิภาคและโลก โดยเฉพาะในแง่ของโอกาสและความท้าทายที่ธุรกิจไทยสามารถใช้ประโยชน์จากการเปลี่ยนแปลงในภูมิรัฐศาสตร์ได้',
						'thumbnail': '/public/resources/course/77/c1d375dc-3fa9-49d1-8b42-c214fd5b3353/image/Thumb_DBD68102_4.png',
						'banner': '/public/resources/course/77/c1d375dc-3fa9-49d1-8b42-c214fd5b3353/image/Banner_DBD68102.png',
						'duration': '180',
						'cpd': false,
						'certificate': true,
						'state': null,
					},
					{
						'code': 'DBD68101',
						'name': 'เส้นทางสู่ความสำเร็จธุรกิจร้านอาหาร',
						'brief': 'เป็นหลักสูตรที่ออกแบบมาเพื่อช่วยผู้ที่สนใจหรือกำลังทำธุรกิจร้านอาหารให้สามารถเดินทางไปสู่ความสำเร็จได้อย่างมีประสิทธิภาพและยั่งยืน โดยการถ่ายทอดประสบการณ์และความรู้จากผู้เชี่ยวชาญที่มีประสบการณ์ตรงในการทำธุรกิจร้านอาหาร',
						'thumbnail': '/public/resources/course/76/b05a3ea2-8bf8-4aec-9a23-5b1789fdb6c4/image/Thumb_Business3.png',
						'banner': '/public/resources/course/76/b05a3ea2-8bf8-4aec-9a23-5b1789fdb6c4/image/Banner_DBD68101.png',
						'duration': '180',
						'cpd': false,
						'certificate': true,
						'state': null,
					},
					{
						'code': 'DBD67101',
						'name': 'Carbon Credit โอกาสธุรกิจไทยในยุคเศรษฐกิจสีเขียว',
						'brief': 'เรียนรู้กลยุทธ์การทำธุรกิจให้ SMEs ไทยเติบโตอย่างยั่งยืนในยุคโลกาภิวัตน์ ครอบคลุมสถานการณ์การค้าโลกปัจจุบัน แนวโน้มในอนาคต ผลกระทบต่อ SMEs การปรับตัวสู่ธุรกิจสีเขียว และการใช้ประโยชน์จากเทคโนโลยีดิจิทัล',
						'thumbnail': '/public/resources/course/73/732af718-53c8-4763-b608-a7f822dae4ed/image/Thumb_carbon3.png',
						'banner': '/public/resources/course/73/732af718-53c8-4763-b608-a7f822dae4ed/image/Banner_carbon.png',
						'duration': '180',
						'cpd': false,
						'certificate': true,
						'state': null,
					},
					{
						'code': 'DBD67102',
						'name': 'ESG สร้างมูลค่าสู่ธุรกิจยั่งยืน',
						'brief': 'เรียนรู้แนวคิด ESG (Environmental, Social, and Governance) ซึ่งเป็นแนวทางการดำเนินธุรกิจที่คำนึงถึงสิ่งแวดล้อม สังคม และการกำกับดูแลกิจการที่ดี เพื่อสร้างมูลค่าเพิ่มให้กับธุรกิจในระยะยาว พร้อมทั้งศึกษาตัวอย่างภาคปฏิบัติและเครื่องมือที่สามารถนำไปประยุกต์ใช้ในการดำเนินธุรกิจอย่างยั่งยืน',
						'thumbnail': '/public/resources/course/74/ba42ebe8-00e9-44e7-8b77-1ae5e156cae0/image/Thumb_ESG1.png',
						'banner': '/public/resources/course/74/ba42ebe8-00e9-44e7-8b77-1ae5e156cae0/image/Banner_ESG.png',
						'duration': '180',
						'cpd': false,
						'certificate': true,
						'state': null,
					},
					{
						'code': 'DBD67103',
						'name': 'การจัดการธุรกิจโฮมสเตย์',
						'brief': 'เรียนรู้หลักการและเทคนิคในการบริหารจัดการธุรกิจโฮมสเตย์อย่างมืออาชีพ ครอบคลุมตั้งแต่การวางแผนธุรกิจ การออกแบบที่พัก การให้บริการลูกค้า การตลาด และการสร้างรายได้เพิ่มเติม เพื่อให้ธุรกิจโฮมสเตย์เติบโตอย่างยั่งยืน',
						'thumbnail': '/public/resources/course/75/e341f934-3447-4a91-887f-cbeef04d5b6a/image/Thumb_Home1.png',
						'banner': '/public/resources/course/75/e341f934-3447-4a91-887f-cbeef04d5b6a/image/Banner_Home.png',
						'duration': '180',
						'cpd': false,
						'certificate': true,
						'state': null,
					}
				];
				// console.log(courses);

				$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 purple lighten-5 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));
						$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.courseCampaignContent = 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.courseCampaignContent();

							$(window).on('resize', function() {
								$programCourse.empty();
								scope.courseCampaignContent();
							});

						});
						//
						$compile(element.contents())(scope);
					}
					//
					// });
				}, 1000);
			}
		}
	}])
	.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);

								// check brief null
								if (outline.brief) {
									$outline.append($brief).append($btnReadMore);
								} else {
									$outline.css('min-height', 'unset');
								}

								$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 $alertTitle = $('<div/>').addClass('card-alert-title regular valign-wrapper');
						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;
					// console.log(text)
					// console.log(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')) {
							if (input != 'same_as_current_address')
								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++;
						}
					}

					// validate juristic id
					if (angular.element('#' + id).find('input[name=corporate_number]').length && scope.form['occupation'] === 'ธุรกิจส่วนตัว/เจ้าของกิจการ') {
						const inputId = 'corporate_number';
						const input = document.getElementById(inputId);
						const helper_text = document.getElementById(`helper_${inputId}`);
						const val = input.value.replace(/\D/g, '');

						if (val.length < 13) {
							validate++;
							input.classList.remove("valid");
							input.classList.add("invalid");
							if (helper_text) {
								helper_text.setAttribute('data-error', 'กรุณากรอกให้ครบ 13 หลัก');
							}
							return;
						}

						if (isValidJuristicId(val)) {
							input.classList.remove("invalid");
							input.classList.add("valid");
							if (helper_text) {
								helper_text.removeAttribute('data-error');
							}
						} else {
							validate++;
							input.classList.remove("valid");
							input.classList.add("invalid");
							if (helper_text) {
								helper_text.setAttribute('data-error', 'เลขทะเบียนนิติบุคคลไม่ถูกต้อง');
							}
						}
					}

					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]);
				});
				// valid juristic id
				function isValidJuristicId(id) {
					if (!id) return false;
					const digits = id.replace(/\D/g, '');
					if (digits.length !== 13) return false;

					const nums = digits.split('').map(n => parseInt(n, 10));
					let sum = 0;
					for (let i = 0; i < 12; i++) {
						const weight = 13 - i;
						sum += nums[i] * weight;
					}
					const checkDigit = (11 - (sum % 11)) % 10;
					return checkDigit === nums[12];
				}
				scope.checkJuristicId = function(inputId) {
					const input = document.getElementById(inputId);
					const helper_text = document.getElementById(`helper_${inputId}`);
					const val = input.value.replace(/\D/g, '');

					if (val.length < 13) {
						input.classList.remove("valid");
						input.classList.add("invalid");
						if (helper_text) {
							helper_text.setAttribute('data-error', 'กรุณากรอกให้ครบ 13 หลัก');
						}
						return;
					}

					if (isValidJuristicId(val)) {
						input.classList.remove("invalid");
						input.classList.add("valid");
						if (helper_text) {
							helper_text.removeAttribute('data-error');
						}
					} else {
						input.classList.remove("valid");
						input.classList.add("invalid");
						if (helper_text) {
							helper_text.setAttribute('data-error', 'เลขทะเบียนนิติบุคคลไม่ถูกต้อง');
						}
					}
				};
				// 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);
				// 							}
				// 						});
				// 					}
				// 
				// 				}
				// 			});
				$(document).ready(function() {
					let data_thai_address = null;

					function initProvinceSelects() {
						if (!data_thai_address) return;

						const provinces = data_thai_address.provinces || [];
						$('[data-group][data-role="province"]').each(function() {
							const $provinceSelect = $(this);
							if ($provinceSelect.children('option').length <= 1) {
								$provinceSelect.empty().append('<option value="" disabled selected>เลือกจังหวัด</option>');
								$.each(provinces, function(index, item) {
									$provinceSelect.append($('<option>', {
										value: item.name_th,
										text: item.name_th
									}).attr("data-province-id", item.code));
								});
							}
						});
					}

					$.ajax({
						url: `/resource/data/data_thailand_address.json`,
						type: 'GET',
						contentType: "application/json",
						dataType: "json",
						success: function(response) {
							// console.log("Loaded address JSON:", response);
							data_thai_address = response;
							initProvinceSelects();
						},
						error: function(error) {
							console.error("Error loading address data:", error);
						}
					});

					setTimeout(initProvinceSelects, 1000);

					$(document).on('change', '[data-role="province"]', function() {
						const $provinceSelect = $(this);
						const group = $provinceSelect.data('group');
						const $districtSelect = $(`[data-group="${group}"][data-role="district"]`);
						const $subDistrictSelect = $(`[data-group="${group}"][data-role="subdistrict"]`);
						const $zipCodeInput = $(`[data-group="${group}"][data-role="zipcode"]`);
						$zipCodeInput.val('');

						const provinceId = $provinceSelect.find('option:selected').attr("data-province-id");

						if (provinceId && data_thai_address) {
							$districtSelect.empty().append('<option value="" disabled selected>เลือกอำเภอ</option>');
							$subDistrictSelect.empty().append('<option value="" disabled selected>เลือกตำบล</option>');

							const districts = data_thai_address.district.filter(d => d.province_code == provinceId);
							$.each(districts, function(index, item) {
								$districtSelect.append($('<option>', {
									value: item.name_th,
									text: item.name_th
								}).attr("data-district-id", item.code));
							});
						}
					});

					$(document).on('change', '[data-role="district"]', function() {
						const $districtSelect = $(this);
						const group = $districtSelect.data('group');
						const $subDistrictSelect = $(`[data-group="${group}"][data-role="subdistrict"]`);
						const $zipCodeInput = $(`[data-group="${group}"][data-role="zipcode"]`);
						$zipCodeInput.val('');

						const districtId = $districtSelect.find('option:selected').attr("data-district-id");

						if (districtId && data_thai_address) {
							$subDistrictSelect.empty().append('<option value="" disabled selected>เลือกตำบล</option>');

							const subdistricts = data_thai_address.subdistrict.filter(d => d.district_code == districtId);
							$.each(subdistricts, function(index, item) {
								$subDistrictSelect.append($('<option>', {
									value: item.name_th,
									text: item.name_th
								}).attr("data-subdistrict-zipcode", item.zip_code));
							});
						}
					});

					$(document).on('change', '[data-role="subdistrict"]', function() {
						const $subDistrictSelect = $(this);
						const group = $subDistrictSelect.data('group');
						const $zipCodeInput = $(`[data-group="${group}"][data-role="zipcode"]`);

						const zipcode = $subDistrictSelect.find('option:selected').attr("data-subdistrict-zipcode");

						if (zipcode) {
							$zipCodeInput.val(zipcode);
						}
					});

					$(document).on('change', '[name="same_as_current_address"]', function() {
						const checked = $(this).is(':checked');
						let address = {
							address: '',
							province: '',
							district: '',
							subdistrict: '',
							zipcode: ''
						}
						if (checked) {
							address = {
								address: $('#address').val() ?? '',
								province: $('#province').val() ?? '',
								district: $('#district').val() ?? '',
								subdistrict: $('#subdistrict').val() ?? '',
								zipcode: $('#zipcode').val() ?? ''
							}

							if (address.province) {
								const provinceId = $('#province').find('option:selected').attr("data-province-id");
								const districts = data_thai_address.district.filter(d => d.province_code == provinceId);
								$.each(districts, function(index, item) {
									$('#corporate_district').append($('<option>', {
										value: item.name_th,
										text: item.name_th
									}).attr("data-district-id", item.code));
								});
							}
							if (address.district) {
								const districtId = $('#district').find('option:selected').attr("data-district-id");
								const subdistricts = data_thai_address.subdistrict.filter(d => d.district_code == districtId);
								$.each(subdistricts, function(index, item) {
									$('#corporate_subdistrict').append($('<option>', {
										value: item.name_th,
										text: item.name_th
									}).attr("data-subdistrict-zipcode", item.zip_code));
								});
							}
						}
						$('#corporate_address').val(address.address);
						$('#corporate_province').val(address.province);
						$('#corporate_district').val(address.district);
						$('#corporate_subdistrict').val(address.subdistrict);
						$('#corporate_zipcode').val(address.zipcode);
					});
				});

				/* 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;
						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;
				});

				// scope.service.course.cpd().then(function(courses){
				// 	console.log(courses)
				// 	scope.user['cpd'] = 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 currentYear = new Date().getFullYear();
				// 	end_date = end_date!=null ? end_date*1000 : Date.parse('30 Nov '+currentYear+' 17:00:00 GMT');
				// 	//
				// 	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);
				// 			var endDate = end_date;
				// 			// console.log(startDate + ' : ' + endDate + ' : ' + lastDate + ' : ' + duration)
				// 			if (endDate <lastDate) {
				// 				remaining = Math.ceil((endDate - currentDate) / (1000 * 3600 * 24));
				// 			}
				// 		}
				// 	}else {
				// 		remaining = '-';
				// 	}
				// 	// console.log(remaining)
				// 	return remaining;
				// }

				scope.remainingTime = function(duration, timestamp, learner) {
					var currentDate = new Date();
					var currentYear = new Date().getFullYear();
					var endDate = new Date(currentYear + '-11-30T00:00:00');
					// console.log(learner)
					if (learner != undefined) {
						if (learner.end_date != null) {
							endDate = new Date(learner.end_date * 1000);
							// console.log(duration)
						}
						if (duration < 180 && learner.cpd_date != null) {
							endDate = new Date(learner.cpd_date * 1000);
						}
						// console.log(endDate)
					}
					//
					var differenceTime = endDate.getTime() - currentDate.getTime();
					var remaining = Math.ceil(differenceTime / (1000 * 3600 * 24));
					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;
					scope.form = scope.info;
					//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++;
						}
					}

					// validate juristic id
					if (angular.element('#' + id).find('input[name=corporate_number]').length && scope.form['occupation'] === 'ธุรกิจส่วนตัว/เจ้าของกิจการ') {
						const inputId = 'corporate_number';
						const input = document.getElementById(inputId);
						const helper_text = document.getElementById(`helper_${inputId}`);
						const val = input.value.replace(/\D/g, '');

						if (val.length < 13) {
							validate++;
							input.classList.remove("valid");
							input.classList.add("invalid");
							if (helper_text) {
								helper_text.setAttribute('data-error', 'กรุณากรอกให้ครบ 13 หลัก');
							}
							return;
						}

						if (isValidJuristicId(val)) {
							input.classList.remove("invalid");
							input.classList.add("valid");
							if (helper_text) {
								helper_text.removeAttribute('data-error');
							}
						} else {
							validate++;
							input.classList.remove("valid");
							input.classList.add("invalid");
							if (helper_text) {
								helper_text.setAttribute('data-error', 'เลขทะเบียนนิติบุคคลไม่ถูกต้อง');
							}
						}
					}

					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) {
				// 	// console.log(data);
				// 	scope.address = data;
				// 	$timeout(function() {
				// 		// console.log(scope.info);
				// 		scope.district_address = scope.address.amphoe;
				// 		scope.subdistrict_address = scope.address.district;
				// 		//
				// 		scope.form.province = scope.address.province.find(p => p.province === scope.info.province);
				// 		scope.form.district = scope.address.amphoe.find(p => p.amphoe === scope.info.district);
				// 		scope.form.subdistrict = scope.address.district.find(p => p.district === scope.info.subdistrict);
				// 	}, 400);
				// 
				// 	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").off("keyup.restrict").on("keyup.restrict", 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]);
				});
				// valid juristic id
				function isValidJuristicId(id) {
					if (!id) return false;
					const digits = id.replace(/\D/g, '');
					if (digits.length !== 13) return false;

					const nums = digits.split('').map(n => parseInt(n, 10));
					let sum = 0;
					for (let i = 0; i < 12; i++) {
						const weight = 13 - i;
						sum += nums[i] * weight;
					}
					const checkDigit = (11 - (sum % 11)) % 10;
					return checkDigit === nums[12];
				}
				scope.checkJuristicId = function(inputId) {
					const input = document.getElementById(inputId);
					const helper_text = document.getElementById(`helper_${inputId}`);
					const val = input.value.replace(/\D/g, '');

					if (val.length < 13) {
						input.classList.remove("valid");
						input.classList.add("invalid");
						if (helper_text) {
							helper_text.setAttribute('data-error', 'กรุณากรอกให้ครบ 13 หลัก');
						}
						return;
					}

					if (isValidJuristicId(val)) {
						input.classList.remove("invalid");
						input.classList.add("valid");
						if (helper_text) {
							helper_text.removeAttribute('data-error');
						}
					} else {
						input.classList.remove("valid");
						input.classList.add("invalid");
						if (helper_text) {
							helper_text.setAttribute('data-error', 'เลขทะเบียนนิติบุคคลไม่ถูกต้อง');
						}
					}
				};

				$(document).ready(function() {
					let data_thai_address = null;

					function initProvinceSelects() {
						if (!data_thai_address) return;

						const provinces = data_thai_address.provinces || [];
						$('[data-group][data-role="province"]').each(function() {
							const $provinceSelect = $(this);
							if ($provinceSelect.children('option').length <= 1) {
								$provinceSelect.empty().append('<option value="" disabled selected>เลือกจังหวัด</option>');
								$.each(provinces, function(index, item) {
									$provinceSelect.append($('<option>', {
										value: item.name_th,
										text: item.name_th
									}).attr("data-province-id", item.code));
								});
							}
						});
					}
					
					function fillAddressGroup(profile, group, prefix) {
						if (!profile || !data_thai_address) return;
					
						const province = profile[prefix + 'province'];
						const district = profile[prefix + 'district'];
						const subdistrict = profile[prefix + 'subdistrict'];
						const zipcode = profile[prefix + 'zipcode'];
					
						if (!province) return;
					
						const $provinceSelect = $(`[data-group="${group}"][data-role="province"]`);
						const $districtSelect = $(`[data-group="${group}"][data-role="district"]`);
						const $subDistrictSelect = $(`[data-group="${group}"][data-role="subdistrict"]`);
						const $zipCodeInput = $(`[data-group="${group}"][data-role="zipcode"]`);
					
						// ตั้งค่า province แล้ว trigger change เพื่อโหลดอำเภอ
						$provinceSelect.val(province).trigger('change');
					
						// รอให้อำเภอโหลดก่อน
						setTimeout(() => {
							$districtSelect.val(district).trigger('change');
					
							// รอให้ตำบลโหลดก่อน
							setTimeout(() => {
								$subDistrictSelect.val(subdistrict).trigger('change');
								$zipCodeInput.val(zipcode || '');
							}, 400);
						}, 400);
					}

					$.ajax({
						url: `/resource/data/data_thailand_address.json`,
						type: 'GET',
						contentType: "application/json",
						dataType: "json",
						success: function(response) {
							// console.log("Loaded address JSON:", response);
							data_thai_address = response;
							initProvinceSelects();
						},
						error: function(error) {
							console.error("Error loading address data:", error);
						}
					});

					setTimeout(initProvinceSelects, 1000);
					
					scope.$watch('info', function(info) {
					  if (info && data_thai_address) {
						$timeout(() => {
						  fillAddressGroup(info, 'member', '');
						  fillAddressGroup(info, 'corporate', 'corporate_');
						}, 1000);
					  }
					}, true);

					element.on('change', '[data-role="province"]', function() {
						const $provinceSelect = $(this);
						const group = $provinceSelect.data('group');
						const $districtSelect = $(`[data-group="${group}"][data-role="district"]`);
						const $subDistrictSelect = $(`[data-group="${group}"][data-role="subdistrict"]`);
						const $zipCodeInput = $(`[data-group="${group}"][data-role="zipcode"]`);
						$zipCodeInput.val('');

						const provinceId = $provinceSelect.find('option:selected').attr("data-province-id");

						if (provinceId && data_thai_address) {
							$districtSelect.empty().append('<option value="" disabled selected>เลือกอำเภอ</option>');
							$subDistrictSelect.empty().append('<option value="" disabled selected>เลือกตำบล</option>');

							const districts = data_thai_address.district.filter(d => d.province_code == provinceId);
							$.each(districts, function(index, item) {
								$districtSelect.append($('<option>', {
									value: item.name_th,
									text: item.name_th
								}).attr("data-district-id", item.code));
							});
						}
					});

					element.on('change', '[data-role="district"]', function() {
						const $districtSelect = $(this);
						const group = $districtSelect.data('group');
						const $subDistrictSelect = $(`[data-group="${group}"][data-role="subdistrict"]`);
						const $zipCodeInput = $(`[data-group="${group}"][data-role="zipcode"]`);
						$zipCodeInput.val('');

						const districtId = $districtSelect.find('option:selected').attr("data-district-id");

						if (districtId && data_thai_address) {
							$subDistrictSelect.empty().append('<option value="" disabled selected>เลือกตำบล</option>');

							const subdistricts = data_thai_address.subdistrict.filter(d => d.district_code == districtId);
							$.each(subdistricts, function(index, item) {
								$subDistrictSelect.append($('<option>', {
									value: item.name_th,
									text: item.name_th
								}).attr("data-subdistrict-zipcode", item.zip_code));
							});
						}
					});

					element.on('change', '[data-role="subdistrict"]', function() {
						const $subDistrictSelect = $(this);
						const group = $subDistrictSelect.data('group');
						const $zipCodeInput = $(`[data-group="${group}"][data-role="zipcode"]`);

						const zipcode = $subDistrictSelect.find('option:selected').attr("data-subdistrict-zipcode");

						if (zipcode) {
							$zipCodeInput.val(zipcode);
						}
					});
				});
				// 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;
							registerData[nameInput] = key.value;

							// 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 = 'edit_info';
							$window.location.reload();
						});
						Swal.fire({
							title: 'บันทึกข้อมูลสำเร็จ',
							// text: scope.alert_text,
							icon: 'success',
							confirmButtonText: 'ตกลง',
							heightAuto: false
						});
					} else {
						scope.alert();
					}
					//
				}
				scope.setEditForm = function() {
					scope.form = scope.info;
				}

				// 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 = 'edit_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 = 'กรุณาตรวจสอบและกรอกข้อมูลใหม่ให้ถูกต้อง';
				}
				//


			}
		}
	}])