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

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

	/* layouts */
	.directive('dinsorBar', [function() {
		return {
			restrict: 'C',
			templateUrl: '/templates/layouts/dinsor-bar.valuecreation'
		};
	}])
	.directive('privacy', [function() {
		return {
			restrict: 'C',
			templateUrl: '/templates/layouts/privacy.valuecreation',
		};
	}])
	.directive('copyright', [function() {
		return {
			restrict: 'C',
			templateUrl: '/templates/layouts/copyright.valuecreation'
		};
	}])
	.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.navigation = 'templates/layouts/header.valuecreation';
					}
				});
			}
		};
	}])
	.directive('headbarLogo', [function() {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				var logo = '';
				//console.log(logo)
				if (logo) {
					var $img = $('<div/>').append($('<img/>').attr('src', logo));
					element.append($img.addClass('valign-wrapper'));
				}
			}
		}
	}])
	.directive('sitemap', [function() {
		return {
			restrict: 'A',
			templateUrl: '/templates/layouts/sitemap.valuecreation',
			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() {
						var height = (this.height / this.width) * 100;
						if (attrs.height) {
							element.css('height', attrs.height + 'px');
						} else {
							element.css('height', height + 'vw');
						}
					}

					if (image.indexOf("http://") != 0 || image.indexOf("https://") != 0) {
						img.src = 'https:' + image;
					}
					img.src = image;
					element.css("background-image", "url('" + image + "')");

					// background position
					if (attrs.position == 'center') {
						element.addClass('bg-cover-center');
					} else {
						element.addClass('background-image width');
					}
					element.removeAttr('background');
				});
			}
		}
	}])
	.directive('icon', [function() {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				attrs.$observe('icon', function(image) {
					var $img = $('<img/>');
					var img = new Image();
					img.onload = function() {
						$img.attr('src', image);
						element.append($img);
					}
					img.src = image;
					element.removeAttr('icon');
				});
			}
		}
	}])
	.directive('language', [function() {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				attrs.$observe('language', function(lang) {
					if (lang == '') {
						lang = 'th';
					}

					var $icon = $('<img/>').attr('width', '35').attr('src', '/public/img/icon/icon-globe-' + lang + '.png');
					element.append($icon);

				});
			}
		}
	}])
	.directive('tabBar', [function() {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {

				$(document).ready(function() {
					element.find('.tabs').tabs();
				});
				//
			}
		}
	}])
	.directive('carouselSlider', [function() {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				var resourceUrl = scope.resourceUrl;
				var $carousel = $('<div/>').addClass('carousel carousel-slider');
				element.append($carousel);

				scope.service.app.banners().then(function(banners) {
					// console.log(banners);
					angular.forEach(banners, function(item) {
						// if(item.banner_status == 1) {
						var bannerUrl = resourceUrl + item.banner_img;

						var $item = $('<a/>').addClass('carousel-item').attr('href', item.banner_link);
						var $image = $('<div/>').addClass('relative');
						var $gradient = $('<div/>').addClass('bg-gradient');
						$item.attr('aria-label', item.banner_title);

						// var img = new Image();
						// img.onload = function() {
						//     var ratio = this.height / this.width;
						//     $image.css('padding-top', ratio *100+'%');
						//     $carousel.css('padding-top', ratio *100+'%');
						// }
						// img.src = 'https:' + bannerUrl;

						$carousel.css('padding-top', '56.25%');
						$image.css('height', '100%');
						$image.css('background-image', "url('" + bannerUrl + "')").addClass('background-image width center-bottom');

						$item.append($image.append($gradient));
						$carousel.append($item);
						// }

					});

					$(document).ready(function() {
						// initialization carrousel slider
						$carousel.carousel({
							fullWidth: true,
							indicators: true
						});

						// auto next slide banner
						setInterval(function() {
							$carousel.carousel('next');
						}, 6000);
					});
					//
				});
				//
			}
		}
	}])

	/* 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');
							//
							//console.log(blockBrief);
							//console.log(blockBrief.outerHeight());

							//console.log(brief.height())
							var marginTop = (blockBrief.height() - brief.height()) / fontSize;
							element.children().children().children(':first-child').css('margin-top', -marginTop + 'em').css('margin-left', '-4%');
						}
					})
				})

			}
		}
	}])

	/* page */
	.directive('page', [function() {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				var paddingTop = 64;
				attrs.$observe('page', function(name) {
					element.removeAttr('page').attr('id', name);
				});
			}
		};
	}])
	.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('popupIntro', ['$timeout', function($timeout) {
		return {
			restrict: 'A',
			templateUrl: '/templates/blocks/modal-dialog.valuecreation',
			link: function(scope, element, attrs) {
				// 
				$(document).ready(function() {
					$timeout(function() {
						const $modal = $('#modal_dialog');
						$modal.modal({
							inDuration: 300
						});
						$modal.modal('open');
					}, 1000);
				});

				//mockup
				// var banners = [{
				// 		"banner_img": "https://valuecreation.ditp.go.th/uploads/iLHfXi0jwCAuPY6.jpg",
				// 		"banner_url": "https://valuecreation.ditp.go.th/"
				// 	},
				// 	{
				// 		"banner_img": "https://valuecreation.ditp.go.th/uploads/gES9Vsu4DoIryWz.jpg",
				// 		"banner_url": "https://valuecreation.ditp.go.th/"
				// 	}
				// ];
				// 
				// //
				// var $modal = $('<div/>').addClass('modal');
				// var $btnClose = $('<a/>').addClass('modal-close btn-floating red');
				// $btnClose.append($('<i/>').addClass('material-icons').text('close'));
				// var $slider = $('<div/>').addClass('slider relative');
				// var $ul = $('<ul/>').addClass('slides');
				// 
				// angular.forEach(banners, function(banner) {
				// 	var $li = $('<li/>');
				// 	var $link = $('<a/>').attr('href', banner.banner_url);
				// 	var $img = $('<img/>').attr('src', banner.banner_img);
				// 	$link.append($img);
				// 	$ul.append($li.append($link));
				// });
				// 
				// $modal.append($slider.append($ul).append($btnClose));
				// element.append($modal);
				// 
				// $(document).ready(function() {
				// 	var sliderHeight = 750;
				// 
				// 	$slider.slider({
				// 		height: sliderHeight
				// 	});
				// 	$slider.css('height', sliderHeight);
				// 
				// 	$modal.modal({
				// 		inDuration: 300
				// 	});
				// 	$modal.modal('open');
				// });
				//
			}
		}
	}])

	/* form input */
	.directive('formHelper', ['$window', function($window) {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				attrs.$observe('formHelper', function(text) {
					var helper = scope.helper;
					if (text) {
						if (!helper.hasOwnProperty('type')) {
							helper.title = 'มีบางอย่างผิดพลาด';
							helper.type = 'warning';
						}
						Swal.fire({
							title: helper.title,
							text: text,
							icon: helper.type,
							confirmButtonText: 'ตกลง',
							confirmButtonColor: "#9E9E9E",
							heightAuto: false
						}).then(function() {
							//console.log(text)
							if (scope.helper.close) {
								$window.top.close();
							}
							if (scope.helper.redirect) {
								$window.href = '/' + scope.helper.redirect;
							}
							scope.helper = {}
						});
					}
				});
			}
		}
	}])
	.directive('formSurvey', ['$location', '$timeout', function($location, $timeout) {
		return {
			restrict: 'A',
			templateUrl: '/templates/blocks/form-survey.valuecreation',
			link: function(scope, element, attrs) {
				scope.step = 1;
				var delay = 600;

				scope.next_step = function(step) {

					$timeout(function() {
						scope.step = step;
					}, delay);

				}

				scope.survey_submit = function() {

					$timeout(function() {
						var surveyObj = {};
						$.each($('#survey-form').serializeArray(), function(index, key) {
							surveyObj[key.name] = key.value;
						});
						// console.log(surveyObj);
						$location.path('/result-summary').search(surveyObj);
					}, delay);

				}
				//
			}
		}
	}])


	// -- //
	.directive('programPartner', [function() {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				var resourceUrl = scope.resourceUrl;
				var $row = $('<div/>').addClass('row');
				element.append($row);

				var query = { type: 'logo' }
				scope.service.app.partner(query).then(function(data) {
					// console.log(data);
					angular.forEach(data, function(item) {
						var $col = $('<div/>').addClass('col s4 m4 l4');
						var $box = $('<div/>').addClass('reward-box center-align');
						var $link = $('<a/>').attr('href', item.partner_url).attr('target', '_blank').attr('title', item.partner_title);
						var $logo = $('<img/>').attr('src', resourceUrl + item.partner_image).attr('loading', 'lazy').attr('alt', item.partner_title);
						var $name = $('<p/>').addClass('white-text light center-align').text(item.partner_title);
						$box.append($link.append($logo).append($name));
						$row.append($col.append($box));
					});

				});
				//
			}
		}
	}])
	.directive('programWeblink', [function() {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				var resourceUrl = scope.resourceUrl;

				var $box = $('<div/>').addClass('related-box related-wrapper relative');
				var $title = $('<h1/>').addClass('related-title bold white-text uppercase').text('E-LEARNING');
				var $content = $('<div/>').addClass('related-content absolute');
				var $row = $('<div/>').addClass('row relative');
				$box.append($title).append($content.append($row));
				element.append($box);

				var query = { type: 'weblink' }
				scope.service.app.partner(query).then(function(data) {
					// console.log(data);

					for (var i = data.length - 2; i < data.length; i++) {
						var $col = $('<div/>').addClass('col s6 m6 l6');
						var $link = $('<a/>').addClass('display-flex flex-direction-column').attr('href', data[i].partner_url).attr('target', '_blank');
						var $title = $('<p/>').addClass('related-site white-text extra-light larger flex-auto').text(data[i].partner_title);
						var $image = $('<img/>').addClass('flex-auto').attr('src', resourceUrl + data[i].partner_image).attr('width', '100%');
						$link.append($title).append($image);
						$row.append($col.append($link));
					}
				});
				//
			}
		}
	}])
	.directive('programProject', [function() {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				var programs = ["design", "brand", "innovations", "branding"];
				var resourceUrl = scope.resourceUrl;

				scope.service.app.projects().then(function(projects) {
					// console.log(projects);
					angular.forEach(programs, function(program) {
						var $tab = $('<div/>').attr('id', program).addClass('tab-item');
						var $row = $('<div/>').addClass('row');
						var $rowActive = $('<div/>').addClass('row');
						var $rowPast = $('<div/>').addClass('row');
						var $colActive = $('<div/>').addClass('col s12 m9 l9');
						var $colPast = $('<div/>').addClass('col s12 m3 l3');
						element.append($tab);

						if (projects[program]['active'].length || projects[program]['activity'].length) {
							// project active
							angular.forEach(projects[program]['active'], function(data) {
								var $col = $('<div/>').addClass('col s12 m12 l12');
								var $link = $('<a/>').attr('href', '/project-activity/' + data.ID);
								var $card = $('<div/>').addClass('card-activities hoverable');
								var thumbnailUrl = data.Activity_Logo_Thumb == null ? scope.defaultBanner : data.Activity_Logo_Thumb;
								var $img = $('<div/>').css('background-image', "url('" + thumbnailUrl + "')").addClass('bg-cover-center').css('height', '500px');
								var $cardType = $('<div/>').addClass('card-activities-type');
								var $type = $('<span/>').addClass('grey-text uppercase').text(program.toUpperCase());
								var $status = $('<span/>').addClass('badge green darken-3 white-text small').text('อยู่ในช่วงการรับสมัคร');
								var $title = $('<h4/>').addClass('card-activities-title white-text regular larger truncate-3').text(data.Activity_Topic);

								$cardType.append($type).append($status);
								$card.append($img).append($cardType).append($title);
								$col.append($link.append($card));
								$rowActive.append($col);

								// check start-end time project
								// var currentTime = new Date();
								// var timeStart = new Date(data.Activity_Start_Regis);
								// var timeEnd = new Date(data.Activity_End_Regis);
								// if(timeStart <= currentTime) {
								// 	if((timeStart <= currentTime) && (timeEnd >= currentTime)) {
								// 		$status.addClass('green darken-3').text('อยู่ในช่วงการรับสมัคร');
								// 		$rowActive.append($col);
								// 	}else {
								// 		$title.removeClass('larger');
								// 		$img.css('height', '150px');
								// 		$status.addClass('red darken-3').text('ปิดรับสมัครแล้ว');
								// 		$rowPast.append($col);
								// 	}
								// }
							});

							// project past
							angular.forEach(projects[program]['activity'], function(data) {
								var $col = $('<div/>').addClass('col s12 m12 l12');
								var $link = $('<a/>').attr('href', '/project-activity/' + data.ID);
								var $card = $('<div/>').addClass('card-activities hoverable');
								var thumbnailUrl = data.Activity_Logo_Thumb == null ? scope.defaultBanner : data.Activity_Logo_Thumb;
								var $img = $('<div/>').css('background-image', "url('" + thumbnailUrl + "')").addClass('bg-cover-center').css('height', '150px');
								var $cardType = $('<div/>').addClass('card-activities-type');
								var $type = $('<span/>').addClass('grey-text uppercase').text(program.toUpperCase());
								var $status = $('<span/>').addClass('badge red darken-3 white-text small').text('ปิดรับสมัครแล้ว');
								var $title = $('<h4/>').addClass('card-activities-title white-text regular').text(data.Activity_Topic);

								$cardType.append($type).append($status);
								$card.append($img).append($cardType).append($title);
								$col.append($link.append($card));
								$rowPast.append($col);
							});

							$row.append($colActive.append($rowActive)).append($colPast.append($rowPast));
							$tab.append($row);
						} else {
							// no related projects
							var $box = $('<div/>').addClass('card-activities-none black relative').css('height', '56.25rem');
							var $alertText = $('<h2/>').addClass('regular white-text absolute absolute-center').text('ขณะนี้ยังไม่มีโครงการที่เกี่ยวข้อง');
							$box.append($alertText);
							$tab.append($box);
						}

						if (projects[program]['active'].length == 0) {
							const $box = $('<div/>').addClass('card-activities-none black relative').css('height', '30.25rem');
							const $alertText = $('<h2/>').addClass('regular white-text absolute absolute-center margin-0').css('text-wrap', 'nowrap').text('ขณะนี้ยังไม่มีโครงการที่เปิดรับสมัคร');
							$box.append($alertText);
							$colActive.append($box);
						}
					});
					//

					$(document).ready(function() {
						$('.tabs').tabs({
							duration: 400
						});

						$(".tabs .tab a").mouseover(function() {
							// $('.tabs .tab a').removeClass('active');
							// $(this).addClass('active');
							// $(this).click();
							// $('.tab-item').css('display', 'none');
							// $($(this).attr('href')).css('display', 'block');
							// $('.tabs').tabs('select', $(this).attr('href').substring(1));
						});
					});
				});
				//
			}
		}
	}])
	.directive('programArticle', [function() {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				var resourceUrl = scope.resourceUrl;

				var $articles = $('<div/>').addClass('articles-box relative');
				var $arrowNavigation = $('<div/>').addClass('absolute arrow-navigation');
				$arrowNavigation.append($('<a/>').addClass('white-text light medium').attr('href', '/knowledge-hub#read').text('➔'));
				var $row = $('<div/>').addClass('row');

				scope.service.app.knowledges().then(function(knowledges) {

					angular.forEach(knowledges['read'], function(knowledge) {
						var $col = $('<div/>').addClass('col s6 m6 l6');
						var $card = $('<a/>').addClass('card-articles hoverable').attr('href', '/knowledge-hub/' + knowledge.article_id + '#read');
						var $cardImage = $('<div/>').addClass('card-articles-image');
						var $image = $('<div/>').addClass('cover').css('background-position', 'center').css('height', '245px');
						$image.css('background-image', "url('" + resourceUrl + knowledge.article_img_cover + "')")
						var $cardContent = $('<div/>').addClass('card-articles-content black white-text').css('min-height', '10em');
						var $title = $('<p/>').addClass('card-articles-title medium normal').text(knowledge.article_title);
						var $desc = $('<p/>').addClass('card-articles-brief light truncate-2').html(knowledge.article_caption);
						$cardImage.append($image);
						$cardContent.append($title).append($desc);
						$card.append($cardImage).append($cardContent);

						$row.append($col.append($card));
					});

				});

				element.append($articles.append($row).append($arrowNavigation));
				//
			}
		}
	}])
	.directive('programVideo', [function() {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				var $card = $('<div/>').addClass('knowledge-video relative');

				scope.service.app.knowledges().then(function(knowledges) {
					// console.log(knowledges);

					scope.watch = knowledges['watch'][0];

					var $catchphrase = $('<div/>').addClass('card-knowledge absolute catchphrase-left');
					var $title = $('<p/>').addClass('card-knowledge-title white-text medium larger truncate-2').css('line-height', '2.265rem').html(scope.watch.vdo_title);
					var $desc = $('<p/>').addClass('card-knowledge-desc white-text light').text(scope.watch.vdo_detail);

					var $iframe = $('<iframe/>').attr('src', 'https://www.youtube.com/embed/' + scope.watch.vdo_ref_id);
					$iframe.attr('title', scope.watch.vdo_title);
					$iframe.attr('width', '100%').attr('height', '500');
					$iframe.attr('frameborder', '0').attr('allowfullscreen', true);
					$iframe.attr('loading', 'lazy');

					var $arrowNavigation = $('<div/>').addClass('absolute arrow-navigation');
					$arrowNavigation.append($('<a/>').addClass('white-text light medium').attr('href', '/knowledge-hub#watch').text('➔'));

					$catchphrase.append($title).append($desc);
					$card.append($catchphrase).append($iframe).append($arrowNavigation);
				});

				element.append($card);
				//
			}
		}
	}])
	.directive('programPodcast', [function() {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				var $podcast = $('<div/>').addClass('knowledge-podclass relative').css('padding-bottom', '10em');

				scope.service.app.knowledges().then(function(knowledges) {
					var listen = knowledges['listen'][0];
					// console.log(listen);

					var $iconImg = $('<div/>').addClass('absolute knowledge-section-listen-mc');
					$iconImg.append($('<img/>').attr('src', '/public/img/mockup/background/background-microphone.png').attr('width', '100%').attr('loading', 'lazy').attr('alt', 'Podclass Microphone'));

					// podcast data content
					var $row = $('<div/>').addClass('row relative');
					var $colContent = $('<div/>').addClass('col s12 m12 l12 line-bottom relative');
					var $link = $('<a/>').attr('href', '/knowledge-hub/' + listen.pod_id + '#listen');
					var $bgGrey = $('<div/>').addClass('bg-grey');
					var $listenContent = $('<div/>').addClass('knowledge-section-listen center-align relative');
					var $image = $('<img/>').attr('src', '//services.dinsor.co.th/app/client/valuecreation/public/img/background/background-wave-sound.png').attr('width', '80%').attr('loading', 'lazy').attr('alt', 'Podclass Wave Sound');
					var $title = $('<h2/>').addClass('card-knowledge-title white-text regular left-align truncate-3').text(listen.pod_title);
					$listenContent.append($image).append($title);
					$colContent.append($link.append($bgGrey).append($listenContent));

					// narrator content
					var $colNarrator = $('<div/>').addClass('col s12 m12 l12 line-bottom');
					var $listenNarrator = $('<div/>').addClass('knowledge-section-narrator');
					var $narrator = $('<span/>').addClass('white-text normal').text(listen.pod_narrator ? listen.pod_narrator : '-');
					var $playArrow = $('<span/>').addClass('white-text normal right valign-wrapper');
					$playArrow.append($('<i/>').addClass('material-icons normal').text('play_arrow')).append($('<span/>').text(listen.pod_video_length ? listen.pod_video_length : '--:--'));
					$listenNarrator.append($narrator).append($playArrow);
					$colNarrator.append($listenNarrator);

					// arrow navigation
					var $arrowNavigation = $('<div/>').addClass('absolute arrow-navigation');
					$arrowNavigation.append($('<a/>').addClass('white-text light medium').attr('href', '/knowledge-hub#listen').text('➔'));

					$row.append($colContent).append($colNarrator).append($arrowNavigation);
					$podcast.append($iconImg).append($row);
				});

				element.append($podcast);
				//
			}
		}
	}])
	.directive('projectsActivities', [function() {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {

				// get data institutions
				scope.service.app.institutions().then(function(response) {
					// console.log(response);

					if (response) {
						scope.institutions = response;
					}
				});

				var query = { type: 'all' }
				scope.service.app.projects(query).then(function(projects) {
					// console.log(projects);

					// project owner
					var $projectOwner = $('<div/>').addClass('row');
					element.find('#project_owner').append($projectOwner);

					angular.forEach(projects['activities']['owner'], function(data) {
						var $col = $('<div/>').addClass('col s12 m6 l6');
						var $link = $('<a/>').attr('href', '/project-activity/' + data.ID);
						var $card = $('<div/>').addClass('card-activities hoverable');
						var thumbnailUrl = data.Activity_Logo_Thumb == null ? scope.defaultThumbnail : data.Activity_Logo_Thumb;
						var $img = $('<div/>').addClass('bg-cover-center').css('height', '500px').css('width', '100%');
						$img.css('background-image', "url('" + thumbnailUrl + "')");
						var $cardType = $('<div/>').addClass('card-activities-type');
						var $type = $('<span/>').addClass('grey-text uppercase').text(data.inst_type);
						var $status = $('<span/>').addClass('badge darken-3 white-text small ' + (data.status_reg ? 'green' : 'red')).text(data.status_reg ? 'อยู่ในช่วงการรับสมัคร' : 'ปิดรับสมัครแล้ว');
						var $title = $('<h4/>').addClass('card-activities-title white-text regular larger truncate-3').text(data.Activity_Topic);

						$cardType.append($type).append($status);
						$card.append($img).append($cardType).append($title);
						$col.append($link.append($card));
						$projectOwner.append($col);
					});

					// project ditp
					var $projectDitp = $('<div/>').addClass('row');
					element.find('#project_ditp').append($projectDitp);

					angular.forEach(projects['activities']['ditp'], function(data, index) {
						var $link = $('<a/>').attr('href', '/project-activity/' + data.ID);
						var $card = $('<div/>').addClass('card-listen hoverable');
						var $row = $('<div/>').addClass('row');
						var $colImage = $('<div/>').addClass('col s12 m4 l4');
						var $colContent = $('<div/>').addClass('col s12 m8 l8 card-listen-content');
						var thumbnailUrl = data.Activity_Logo_Thumb == null ? scope.defaultThumbnail : data.Activity_Logo_Thumb;
						var $img = $('<div/>').addClass('bg-cover-center').css('height', '350px').css('width', '100%');
						$img.css('background-image', "url('" + thumbnailUrl + "')");
						var $title = $('<h4/>').addClass('listen-title white-text regular larger').text(data.Activity_Topic);
						var $desc = $('<p/>').addClass('listen-desc grey-text normal light truncate-5').css('margin-top', '1em').text(data.Activity_Desc);

						if (index % 2 == 0) {
							$card.addClass('black');
						}

						$colImage.append($img);
						$colContent.append($title).append($desc);
						$card.append($row.append($colImage).append($colContent));
						$projectDitp.append($link.append($card));
					});

				});
				//
			}
		}
	}])
	.directive('programCategory', [function() {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				// scope.scrollToTop();
				var resourceUrl = scope.resourceUrl;
				// var programs = [{
				// 		"key": "design",
				// 		"banner_title": "DESIGN",
				// 		"banner_image": "/public/img/mockup/background/background-design-activities.jpg",
				// 		"banner_desc": "โครงการและกิจกรรมที่จะช่วยยกระดับและสร้างมูลค่าเพิ่มสินค้าไทย ให้เทียบเท่าสินค้าที่ออกแบบดีจากนานาชาติ"
				// 	},
				// 	{
				// 		"key": "brand",
				// 		"banner_title": "BRAND",
				// 		"banner_image": "/public/img/mockup/background/background-brand-activities.jpg",
				// 		"banner_desc": "โครงการและกิจกรรมที่ส่งเสริมการสร้างภาพลักษณ์ผ่านตราสัญลักษณ์ Thailand Trust Mark (T Mark) และพัฒนาผู้ประกอบการแบรนด์ไทยให้มีการสร้างแบรนด์และภาพลักษณ์ที่ดีเป็นที่ยอมรับในตลาดโลก"
				// 	},
				// 	{
				// 		"key": "innovations",
				// 		"banner_title": "INNOVATION",
				// 		"banner_image": "/public/img/mockup/background/background-innovation-activities.jpg",
				// 		"banner_desc": "กลุ่มงานที่พัฒนา ส่งเสริม และผลักดันผู้ประกอบการไทยให้มีขีดความสามารถทางการแข่งขันทางการค้าในเวทีสากลด้วยการสร้างมูลค่าจากนวัตกรรม BCG ตลอดจนเผยแพร่ประชาสัมพันธ์ผู้ประกอบการ BCG ให้เป็นที่รู้จักทั่วโลก เสริมสร้างภาพลักษณ์ทางการค้าอันดีของไทย"
				// 	},
				// 	{
				// 		"key": "branding",
				// 		"banner_title": "BRANDING THAILAND",
				// 		"banner_image": "/public/img/mockup/background/background-banding-thailand-activities.jpg",
				// 		"banner_desc": "โครงการและกิจกรรมที่สร้างภาพลักษณ์สินค้าและบริการส่งออกของไทยในเวทีการค้าโลก"
				// 	},
				// 	{
				// 		"key": "other",
				// 		"banner_title": "โครงการและกิจกรรมอื่นๆ",
				// 		"banner_image": "/public/img/mockup/background/background-design-activities.jpg",
				// 		"banner_desc": "ขณะนี้ยังไม่มีโครงการที่เกี่ยวข้อง"
				// 	}
				// ];

				// get data institutions
				scope.service.app.institutions().then(function(response) {
					// console.log(response);

					if (response) {
						const institutions = response;

						// add other
						institutions.push({
							"type": "other",
							"title": "โครงการและกิจกรรมอื่นๆ",
							"image": "tLBLdlNmUMl3wfn.jpg",
							"caption": "ขณะนี้ยังไม่มีโครงการที่เกี่ยวข้อง"
						});

						var query = { type: 'all' }
						scope.service.app.projects(query).then(function(projects) {
							// console.log(projects);
							angular.forEach(institutions, function(program) {

								// banner category
								var $tab = $('<div/>').attr('id', program.type);
								var $banner = $('<div/>').addClass('institution-banner relative');
								var $bannerContent = $('<div/>').addClass('absolute-center center-align').css('width', '100%');
								var $bannerTitle = $('<h1/>').addClass('institution-title purple-text text-lighten-1 bold uppercase').text(program.title);
								var $bannerDesc = $('<h3/>').addClass('institution-desc white-text light').text(program.caption);
								var img = new Image();
								img.onload = function() {
									var height = (this.height / this.width) * 100;
									$banner.css('height', height + 'vw');
								}
								img.src = 'https:' + resourceUrl + program.image;
								$banner.css("background-image", "url('" + resourceUrl + program.image + "')");
								$banner.removeAttr('background').addClass('background-image width');
								$banner.append($('<div/>').addClass('bg-gradient'));
								$banner.append($bannerContent.append($bannerTitle).append($bannerDesc));
								$tab.append($banner);

								// program institutions
								var $section = $('<div/>').addClass('section institution-box');
								var $container = $('<div/>').addClass('container');
								var $row = $('<div/>').addClass('row');

								if (projects[program.type]) {
									angular.forEach(projects[program.type]['category'], function(data, index) {
										var $col = $('<div/>').addClass('col');
										var $link = $('<a/>').attr('href', '/project-activities/' + program.type + '/' + data.cat_id);
										var thumbnailUrl = resourceUrl + data.cat_banner;
										var $image = $('<div/>').addClass('bg-cover-center');
										$image.css('width', '100%').css('border', '1px solid #424242');
										$image.css('background-image', "url('" + thumbnailUrl + "')");

										if (index == 0) {
											$col.addClass('s12 m12 l12');
											$image.css('height', '675px');
										} else {
											$col.addClass('s12 m6 l6');
											$image.css('height', '335px');
										}

										$col.append($link.append($image));
										$row.append($col);
									});
								}
								$section.append($container.append($row));
								$tab.append($section);

								element.append($tab);
							});

							$(document).ready(function() {
								$('.tabs').tabs();
							});
						});
						//
					}
				});
				//
			}
		}
	}])
	.directive('categoryView', ['$routeParams', function($routeParams) {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {

				var resourceUrl = scope.resourceUrl;
				var query = $routeParams;
				// console.log(query);
				scope.category = {};

				scope.service.app.projects(query).then(function(data) {
					// console.log(data);

					// get banner data
					scope.category.name = data.cat_name;
					scope.category.caption = data.cat_caption;
					scope.category.logo = resourceUrl + data.cat_img;
					scope.category.banner = resourceUrl + data.cat_banner;

					//-- get program activity -- //
					if (data.active.length || data.activity.length) {
						var $row = $('<div/>').addClass('row');
						var $rowActive = $('<div/>').addClass('row');
						var $rowPast = $('<div/>').addClass('row');
						var $colActive = $('<div/>').addClass('col s12 m9 l9');
						var $colPast = $('<div/>').addClass('col s12 m3 l3');

						// project active
						if (data.active.length) {
							angular.forEach(data.active, function(item) {
								var $col = $('<div/>').addClass('col s12 m12 l12');
								var $link = $('<a/>').attr('href', '/project-activity/' + item.ID);
								var $card = $('<div/>').addClass('card-activities hoverable');
								var thumbnailUrl = item.Activity_Logo_Thumb == null ? scope.defaultBanner : item.Activity_Logo_Thumb;
								var $img = $('<div/>').css('background-image', "url('" + thumbnailUrl + "')").addClass('bg-cover-center').css('height', '500px');
								var $cardType = $('<div/>').addClass('card-activities-type');
								var $type = $('<span/>').addClass('grey-text uppercase').text(item.inst_type);
								var $status = $('<span/>').addClass('badge green darken-3 white-text small').text('อยู่ในช่วงการรับสมัคร');
								var $title = $('<h4/>').addClass('card-activities-title white-text regular larger truncate-3').text(item.Activity_Topic);

								$cardType.append($type).append($status);
								$card.append($img).append($cardType).append($title);
								$col.append($link.append($card));
								$rowActive.append($col);

							});
						} else {
							const $box = $('<div/>').addClass('card-activities-none black relative').css('height', '30.25rem');
							const $alertText = $('<h2/>').addClass('regular white-text absolute absolute-center margin-0').css('text-wrap', 'nowrap').text('ขณะนี้ยังไม่มีโครงการที่เปิดรับสมัคร');
							$box.append($alertText);
							$colActive.append($box);
						}

						// project past
						angular.forEach(data.activity, function(item) {
							var $col = $('<div/>').addClass('col s12 m12 l12');
							var $link = $('<a/>').attr('href', '/project-activity/' + item.ID);
							var $card = $('<div/>').addClass('card-activities hoverable');
							var thumbnailUrl = item.Activity_Logo_Thumb == null ? scope.defaultBanner : item.Activity_Logo_Thumb;
							var $img = $('<div/>').css('background-image', "url('" + thumbnailUrl + "')").addClass('bg-cover-center').css('height', '150px');
							var $cardType = $('<div/>').addClass('card-activities-type');
							var $type = $('<span/>').addClass('grey-text uppercase').text(item.inst_type);
							var $status = $('<span/>').addClass('badge red darken-3 white-text small').text('ปิดรับสมัครแล้ว');
							var $title = $('<h4/>').addClass('card-activities-title white-text regular').text(item.Activity_Topic);

							$cardType.append($type).append($status);
							$card.append($img).append($cardType).append($title);
							$col.append($link.append($card));
							$rowPast.append($col);
						});

						$row.append($colActive.append($rowActive)).append($colPast.append($rowPast));
						element.find('#program_activity').append($row);
						// -- end get program activity -- //
					} else {
						var $box = $('<div/>').addClass('card-activities-none black relative').css('height', '56.25rem');
						var $alertText = $('<h2/>').addClass('regular white-text absolute absolute-center').text('ขณะนี้ยังไม่มีโครงการที่เกี่ยวข้อง');
						$box.append($alertText);
						element.find('#program_activity').append($box);
					}
				});
				//
			}
		}
	}])
	.directive('projectView', ['$routeParams', function($routeParams) {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				scope.routeParam = $routeParams;
				//	
				var query = $routeParams;
				// console.log(query);
				scope.service.app.projects(query).then(function(data) {
					scope.project = data;
					// console.log(data);
				});

				// Format Location
				scope.formatLocation = function(location) {
					const toJson = JSON.parse(location)[0];
					// console.log(toJson);
					return `${toJson.Activity_Location_TH}, ${toJson.City_Name_TH}, ${toJson.Country_Name_Th}`;
				}
				//
			}
		}
	}])
	.directive('programNews', ['$filter', function($filter) {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				var resourceUrl = scope.resourceUrl;
				var programs = [{
						"category": "ข่าวสารและความเคลื่อนไหวของ VALUE CREATION",
						"key": "owner"
					},
					{
						"category": "ข่าวสารและความเคลื่อนไหวที่ผ่านมาแล้ว",
						"key": "past"
					},
					{
						"category": "ข่าวสารและความเคลื่อนไหวของ DITP",
						"key": "ditp"
					}
				];
				//

				scope.service.app.news().then(function(data) {
					// console.log(data);

					angular.forEach(programs, function(program, index) {

						var key = 'news-updates/news';
						if (program.key != 'owner') {
							key = 'project-activity';
						}
						if (data[program.key].length) {
							var $box = $('<div/>').addClass('news-box border-bottom-grey');
							var $container = $('<div/>').addClass('container');
							var $category = $('<h2/>').addClass('news-topic grey-text regular').text(program.category);
							var $row = $('<div/>').addClass('row');

							// remove border bottom last child
							if (index == programs.length - 1) {
								$box.removeClass('border-bottom-grey');
							}

							var news = data[program.key];
							if (news) {
								angular.forEach(news, function(item) {
									var resourceUrl = scope.resourceUrl;

									var $col = $('<div/>').addClass('col s6 m4 l4');
									var $link = $('<a/>').attr('href', '/' + key + '/' + item.news_id);
									var $card = $('<div/>').addClass('card-news hoverable');
									var $title = $('<h4/>').addClass('card-news-title white-text regular truncate-3').text(item.news_title);
									var $date = $('<p/>').addClass('card-news-date grey-text').text($filter('date_format')(item.news_date));
									var $cardimage = $('<div/>').addClass('box-bg-zoom overflow-hidden').css('height', '220px');
									var $image = $('<img/>').addClass('background-zoom').css('object-fit', 'cover');
									if (item.news_img.indexOf("http://") == 0 || item.news_img.indexOf("https://") == 0) {
										resourceUrl = item.news_thumbnail ? item.news_thumbnail : item.news_img;
									} else {
										resourceUrl = resourceUrl + (item.news_thumbnail ? item.news_thumbnail : item.news_img);
									}
									$image.attr('src', resourceUrl);

									$link.click(function() {
										scope.scrollToTop();
									});
									$card.append($cardimage.append($image)).append($date).append($title);
									$row.append($col.append($link.append($card)));
								});
							}
							$box.append($container.append($category).append($row));
							element.append($box);
						}
					});
				});
				//
			}
		}
	}])
	.directive('newsView', ['$routeParams', 'ngMeta', function($routeParams, ngMeta) {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				var newsId = $routeParams.id;
				var resourceUrl = scope.resourceUrl;

				if (newsId != 'undefined') {
					scope.service.app.news('owner', newsId).then(function(data) {
						scope.news = data;
						scope.news.news_img = resourceUrl + data.news_img;

						// Meta Tags
						ngMeta.setTag('description', scope.news.news_title);
						ngMeta.setTag('og:type', 'news');
						ngMeta.setTag('og:image', scope.news.news_img);
						//
					});
				}
				//
			}
		}
	}])
	.directive('knowledgeHub', ['$location', function($location) {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				//
				var query = { type: 'all' }
				scope.service.app.knowledges(query).then(function(data) {
					scope.knowledges = data;
					scope.banner_watch = data.banner_watch;
					console.log(scope.knowledges);
				});

				// scope.more = function(type, offset) {
				// 	console.log($location.hash());
				// 	console.log(offset);
				// }

				$(document).ready(function() {
					$('.tabs').tabs();
				});
				//
				scope.loadMore = function(type) {
					var query = { type: type, offset: scope.knowledges[type].length };
					scope.service.app.knowledges(query).then(function(data) {
						//scope.knowledges = data;
						console.log(data);
						if (data[type].length > 0) {
							scope.knowledges[type].push(...data[type]);
							console.log(scope.knowledges);
						}
					});
				}
			}
		}
	}])
	.directive('knowledgeView', ['$location', '$routeParams', '$timeout', 'ngMeta', function($location, $routeParams, $timeout, ngMeta) {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				var type = $location.hash();
				var id = $routeParams.id;

				if (id != 'undefined') {
					var query = { type: type, id: id };
					scope.service.app.knowledges(query).then(function(data) {
						scope.knowledges = data;
						// console.log(data);

						// Meta Tags
						ngMeta.setTag('og:type', 'article');
						// ngMeta.setTag('description', scope.knowledges.article_title);
						// ngMeta.setTag('og:image', scope.resourceUrl + scope.knowledges.article_img_cover);
						//
					});
				}

				$(document).ready(function() {
					// $('.collapsible').collapsible();

					var tabs = element.find('.tabs');
					tabs.tabs();
					$(".tabs .tab a").each(function() {
						var href = $(this).attr('href');
						// $(this).attr('href', '/knowledge-hub' + href);
						$(this).attr('href', '/knowledge-hub' + href).attr('target', '_self');
					});
					// tabs.tabs('destroy');
					// tabs.append('<li/>');
				});
				//
			}
		}
	}])
	.directive('cardListen', [function() {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				attrs.$observe('cardListen', function() {
					var $visualization = element.find(".card-listen-visualization");

					$visualization.css({
						height: "8.125em",
						backgroundImage: "url('/public/img/background/background-audio-visualization.png')",
						backgroundPosition: "center",
						backgroundRepeat: "no-repeat",
						backgroundSize: "contain"
					});
					//
					element.on({
						mouseenter: function(event) {
							$visualization.css("background-image", "url('/public/img/background/background-audio-visualization-gif.gif')");
						},
						mouseleave: function(event) {
							$visualization.css("background-image", "url('/public/img/background/background-audio-visualization.png')");
						}
					});
					//
				});
			}
		}
	}])
	.directive('programGallery', ['$filter', function($filter) {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				var query = { type: 'all' }
				scope.service.app.galleries(query).then(function(data) {
					console.log(data);

					angular.forEach(data, function(gallery, index) {
						if (gallery.gallery.length) {
							var $section = $('<div/>').addClass('section border-bottom-grey');
							if (index == Object.keys(data).length) {
								$section.removeClass('border-bottom-grey');
							}
							element.append($section);

							var $container = $('<div/>').addClass('container gallery-box');
							var $category = $('<h2/>').addClass('section-title grey-text medium').css('margin-bottom', '1.5em').text(gallery.category.cat_name);
							var $row = $('<div/>').addClass('row').css('margin', '-0.5rem');
							$section.append($container);
							$container.append($category).append($row);
							//
							angular.forEach(gallery.gallery, function(item) {
								var $col = $('<div/>').addClass('col s6 m4 l4');
								var $link = $('<a/>').attr('href', '/gallery/' + item.gallery_id);
								var $card = $('<div/>').addClass('card-gallery relative hoverable');
								var $gradient = $('<div/>').addClass('card-gallery-gradient');
								var $cardContent = $('<div/>').addClass('bottom').css('padding', '1em 2em');
								var $title = $('<h3/>').addClass('card-gallery-title white-text light truncate-4').text(item.gallery_title);
								var $date = $('<p/>').addClass('card-gallery-date grey-text').text($filter('date_format')(item.gallery_date_publish));

								var resourceUrl = scope.resourceUrl + item.gallery_img_cover;
								$card.css('background-image', "url('" + resourceUrl + "')").addClass('bg-cover-center').css('height', '390px');

								$cardContent.append($date).append($title);
								$card.append($gradient).append($cardContent);
								$row.append($col.append($link.append($card)));
							});
						}
						//
					});
				});
				//
			}
		}
	}])
	.directive('galleryView', ['$routeParams', '$timeout', '$filter', 'ngMeta', function($routeParams, $timeout, $filter, ngMeta) {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {

				var galleryId = $routeParams.id;
				var query = { type: 'all', id: galleryId }
				scope.service.app.galleries(query).then(function(data) {
					// console.log(data);
					scope.photo = data.photo;

					var $title = $('<h2/>').addClass('gallery-title white-text medium').text(data.gallery_title);
					var $date = $('<p/>').addClass('gallery-date grey-text normal').text($filter('date_format')(data.gallery_date_publish));
					var $section = $('<div/>').addClass('section gallery-section relative hide-on-small-only');
					element.append($title).append($date).append($section);

					var resourceUrl = scope.resourceUrl + data.photo[0].photo_img;
					// var $imgFull = $('<img/>').attr('src', resourceUrl).attr('width', '100%').attr('height', '670px').css('object-fit', 'cover');
					var $imgFull = $('<div/>').addClass('relative bg-cover-center').css('background-image', "url('" + resourceUrl + "')");
					// $imgFull.css('height', '670px').css('margin', '2em 0');
					$imgFull.css({
						height: '670px',
						margin: '2em 0',
						backgroundSize: 'contain',
						backgroundColor: 'white'
					});
					var $gradient = $('<div/>').addClass('gallery-gradient');
					var $captionContent = $('<div/>').addClass('bottom').css('padding', '1em 2em');
					var $caption = $('<h3/>').addClass('white-text light truncate-3').text(data.gallery_caption);
					var $tabGallery = $('<div/>').addClass('relative');
					var $carousel = $('<div/>').addClass('carousel carousel-slider carousel-gallery relative');
					var $carouselItem = $('<div/>').addClass('carousel-item');
					var $navigation = $('<div/>').addClass('absolute arrow-navigation');
					var $arrow = $('<div/>').addClass('white-text light medium').text('➔');
					$arrow.css('cursor', 'pointer');
					$imgFull.append($gradient).append($captionContent.append($caption));
					$navigation.append($arrow);
					$tabGallery.append($carousel).append($navigation);

					var $row = $('<div/>').addClass('row');
					var countItem = 1;

					angular.forEach(data.photo, function(gallery) {
						if (countItem == 1) {
							$carousel.append($carouselItem);
							$carouselItem.append($row);
						}

						var $col = $('<div/>').addClass('col s4 m4 l4').css('height', '220px');
						var $img = $('<img/>').addClass('img-gallery').attr('src', scope.resourceUrl + gallery.photo_img);
						$img.attr('width', '100%').attr('height', '100%').css('object-fit', 'cover');
						$img.css('cursor', 'pointer');

						$row.append($col.append($img));

						countItem++;
						if (countItem == 4) {
							countItem = 1;
							$carouselItem = $('<div/>').addClass('carousel-item');
							$row = $('<div/>').addClass('row');
						}

						// expand image
						$img.mouseover(function(e) {
							$imgFull.css('background-image', "url('" + scope.resourceUrl + gallery.photo_img + "')");
							$('.img-gallery').css('border', 'none');
							$(this).css('border', '1px solid #707070');
						});
					});
					$section.append($imgFull).append($tabGallery);

					$(document).ready(function() {

						$timeout(function() {
							$carousel.carousel({
								fullWidth: true,
								indicators: false
							});

							// next carousel item
							$arrow.click(function(e) {
								e.preventDefault();
								e.stopPropagation();
								$carousel.carousel('next');
							});

							// material box
							$('.materialboxed').materialbox();

						}, 800);

					});

					// Meta Tags
					ngMeta.setTag('description', data.gallery_title);
					ngMeta.setTag('og:type', 'gallery');
					ngMeta.setTag('og:image', resourceUrl);
					//
				});
				//
			}
		}
	}])
	.directive('surveyView', ['$location', '$filter', function($location, $filter) {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				// get parameters from url
				var type = $location.search().business_type;
				scope.business_size = $location.search().business_size;
				var show_product = $location.search().show_product;
				var attend = $location.search().attend;

				var business_type = [{
						"key": "designer_owner",
						"title": "Designer และเจ้าของสินค้า/บริการ",
						"desc": "เจ้าของกิจการที่เป็นผู้ออกแบบสินค้า/บริการด้วยตัวเองและต้องการพัฒนาหรือสร้างความน่าเชื่อถือให้มากขึ้น",
						"image": "/public/img/icon/icon-business-type-designer.png"
					},
					{
						"key": "business_owner",
						"title": "ผู้ประกอบการที่มีสินค้า/บริการ",
						"desc": "เจ้าของกิจการที่มีสินค้า/บริการ และต้องการเพิ่มมูลค่าให้สินค้า/บริการอย่างรอบด้าน",
						"image": "/public/img/icon/icon-business-type-owner.png"
					},
					{
						"key": "design_provider",
						"title": "ผู้ให้บริการออกแบบ",
						"desc": "เจ้าของกิจการที่ให้บริการด้านการออกแบบ",
						"image": "/public/img/icon/icon-business-type-provider.png"
					}
				];

				scope.business_type = {};
				scope.show_product = show_product == 'y' ? 'ต้องการ' : 'ไม่ต้องการ';
				scope.attend = attend == 'y' ? 'เคย' : 'ไม่เคย';

				angular.forEach(business_type, function(data) {
					if (data.key == type) {
						scope.business_type.title = data.title;
						scope.business_type.desc = data.desc;
						scope.business_type.image = data.image;
					}
				});

				// get projects
				var query = { type: 'all' }
				scope.service.app.projects(query).then(function(data) {

					var $row = $('<div/>').addClass('row');

					angular.forEach(data.activities.owner, function(item) {
						var resourceUrl = scope.resourceUrl;

						var $col = $('<div/>').addClass('col s4 m4 l4');
						var $link = $('<a/>').attr('href', '/project-activity/' + item.ID);
						var $card = $('<div/>').addClass('card-news hoverable');
						var $title = $('<h4/>').addClass('card-news-title white-text regular truncate-3').text(item.Activity_Topic);
						var $date = $('<p/>').addClass('card-news-date grey-text').text($filter('date_format')(item.Activity_Start_Regis));
						var $cardimage = $('<div/>').addClass('box-bg-zoom overflow-hidden').css('height', '220px');
						var $image = $('<img/>').addClass('background-zoom').css('object-fit', 'cover');
						if (item.Activity_Logo_Thumb.indexOf("http://") == 0 || item.Activity_Logo_Thumb.indexOf("https://") == 0) {
							resourceUrl = item.Activity_Logo_Thumb;
						} else {
							resourceUrl = resourceUrl + item.Activity_Logo_Thumb;
						}
						$image.attr('src', resourceUrl);

						$link.click(function() {
							scope.scrollToTop();
						});
						$card.append($cardimage.append($image)).append($date).append($title);
						$row.append($col.append($link.append($card)));
					});

					element.find('#result-summary').append($row);
				});
				//
			}
		}
	}])

	/* User */
	.directive('memberAuthorized', ['$window', '$location', function($window, $location) {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				element.hide();

				scope.service.member.authorized().then(function(authorized) {
					//console.log(authorized)
					element.show();

					if (authorized && !authorized.error) {
						scope.authorized = authorized;
						const data = authorized.data;
						element.empty();
						//
						var $space = $('<li><a class="light">|</a></li>')
						var $name = $('<a/>').text(data.user_name);
						var $logout = $('<a/>').text('ออกจากระบบ');
						element.append($('<li/>').append($name)).append($space)
							.append($('<li/>').append($logout));
						//
						$name.on('click', function() {
							scope.$apply(function() {
								$location.path('/profile');
							});
						});
						$logout.on('click', function() {
							scope.logout();
						});
					}
				});
			}
		}
	}])
	// .directive('memberAuthorized', ['$location', function($location) {
	// 	return {
	// 		restrict: 'A',
	// 		link: function(scope, element, attrs)
	// 		{
	// 			/* var query = {};
	// 			query = $location.hash().split('&').map((str) => str.split('=')[1]);
	// 				//query[str.split('=')[0]] = str.split('=')[1];
	// 				//str.split('='));
	// 			console.log(query) */
	// 			/* scope.service.member.authorized().then(function(user) {
	// 				//console.log(user)
	// 				if(user.user_name !=undefined) {
	// 					//element.empty();
	// 					var $user = $('<a/>').text(user.user_name);
	// 					var $logout = $('<li/>').append($('<a/>').attr('href','/logout').text('ออกจากระบบ'));
	// 					//
	// 					element.empty().append($('<li/>').append($user)).append($('<li/>').append($('<a/>').text('|'))).append($logout);
	// 				}
	// 			});
	// 			$location.path('/') */
	// 			/* scope.service.member.authorized().then(function(authorized) {
	// 				//if($location.hash() && $location.path().indexOf('/register')<0) {
	// 					//console.log($location.hash())
	// 				//	$location.hash(null);
	// 				//}
	// 				if(authorized) {
	// 					//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-1 white-text red'); 
	// 						$btLogout.on('click', function() {
	// 							scope.logout();
	// 						});
	// 						element.append($btLogout);
	// 						element.prepend($('<a/>').text(authorized.user.fullname).addClass('black-text btn-flat z-depth-1'));
	// 					}
	// 				} else {
	// 					var $btSignin = $('<a/>').text('เข้าระบบ').addClass('waves-effect waves-light btn z-depth-0 white-text red normal')
	// 					var $btSignup = $('<a/>').text('สมัครสมาชิก').addClass('waves-effect waves-red btn z-depth-0 black-text white-trans-3 normal');
	// 					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')
	// 						}
	// 					});
	// 					//scope.service.program.info().then(function(program) {
	// 					//	if(program.registration) {
	// 							//element.prepend($btSignup);
	// 					//		$btSignup.attr('href', '/register/'+program.registration);
	// 					//	}
	// 					//})
	// 				} 
	// 				//
	// 				//scope.service.program.info().then(function(program) {
	// 					//if(program.signin) {
	// 						//if($location.path().indexOf('course')==-1) 
	// 							//$location.path('/course/'+program.signin);
	// 					//}
	// 				//})
	// 				//$location.hash(null);
	// 				
	// 			}); */
	// 			/*	
	// 			if (!user.logged()) {
	// 				//
	// 				var $btSignin = $('<a/>').text('เข้าระบบ').addClass('waves-effect waves-light btn z-depth-0 white-text red')
	// 				var $btSignup = $('<a/>').text('ลงทะเบียน').addClass('waves-effect waves-red btn z-depth-0 white-text white-trans-3');
	// 				element.append($btSignin).prepend($btSignup);
	// 				// action
	// 				$btSignin.attr('href', "/signin");
	// 				$btSignup.attr('href', "/signup");
	// 				//
	// 			} else {
	// 				//
	// 				var $avatar = $('<a/>').addClass('circle small avatar').css('background-image', "url('"+user.avatar('small')+"')");
	// 				var $name = $('<a/>').text(user.name()).addClass('waves-effect waves-light btn-flat z-depth-1 balck-text transparent');
	// 				var $btLogout = $('<a/>').text('ออกจากระบบ').addClass('waves-effect waves-light btn-small z-depth-1 white-text red');
	// 				element.append($avatar).append($name).append($btLogout);
	// 				// action
	// 				$btLogout.on('click', function() {
	// 					scope.logout();
	// 				});
	// 				$name.attr('href', '/dashboard');
	// 				$avatar.attr('href', '/user').addClass('link');
	// 			}
	// 			*/
	// 		}
	// 	}
	// }])
	.directive('formRender', [function() {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				attrs.$observe('formRender', function(id) {
					scope.service.member.form(id).then(function(form) {
						//console.log(form)
						if (form) {
							element.append(form)
						}
					});
				});
			}
		};
	}])