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

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

/* Layouts */
.directive('promptskillBar', [function() {
	return {
		restrict: 'C',
		templateUrl: '/templates/layouts/dinsor-bar.creativethailand'
	};
}])
.directive('cookiePolicy', [function() {
	return {
		restrict: 'C',
		templateUrl: '/templates/layouts/cookie-policy.creativethailand',
	};
}])
.directive('copyright', [function() {
	return {
		restrict: 'C',
		templateUrl: '/templates/layouts/copyright.creativethailand'
	};
}])
.directive('headBar', ['$routeParams', '$timeout', function($routeParams, $timeout) {
	return {
		restrict: 'A',
		template: '<div ng-include="navigation"></div>',
		link: function(scope, element, attrs) {
			//
			scope.$watch('headbar', function(newValue, oldValue) {
				// console.log(newValue)
				console.log($routeParams)
				if(newValue) {
					scope.navigation = 'templates/layouts/header.creativethailand';
				}
            });
		}
	};
}])
.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('sideNavigator', [function() {
	return {
		restrict: 'C',
		link: function(scope, element, attrs) 
		{
			//
			element.ready(function() {
				//
				var sidenav = $('.sidenav');
				sidenav.sidenav();
			});
			//
		}
	}
}])
.directive('sitemap', [function() {
	return {
		restrict: 'A',
		templateUrl: '/templates/layouts/sitemap.creativethailand',
		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;
				//});
			});
		}
	};
}])
.directive('prelaunch', ['$window', function($window) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			//
			scope.$parent.headbar = false;
			scope.$parent.footer = true;
			
			const redirectUrl = 'https://creativethailand.net/happening/c27a2796-ce0f-4590-acda-8c539082cbad';
			$( ".banner-intro" ).click(function() {
				$window.location.href = redirectUrl;
			});
			
			// to weppage function
			scope.toWebPage = function() {
				$window.location.href = '/';
			}
		}
	}
}])

/* 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('background-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('gallery', ['$timeout', function($timeout) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			attrs.$observe('gallery', function(portfolio) {
				// card gallery
				if(portfolio) {
					var portfolio = JSON.parse(portfolio);
					//
					if(portfolio.length) {
						// gallery carousel
						var $carousel = $('<div/>').addClass('card-gallery carousel carousel-slider relative');
						var $gradient = $('<div/>').addClass('background-gradient-left-right');
						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'));
						
						angular.forEach(portfolio, function(item) {
							var	$item = $('<div/>').addClass('carousel-item relative');
							var $image = $('<img/>').attr('src', item.image);
							//
							$item.append($image);
							$carousel.append($item);
						});
						element.append($carousel.append($btnPrev).append($btnNext));
						element.removeAttr('gallery');
						//
						
						element.ready(function() {
							// carousel
							var carousel = element.find('.carousel.carousel-slider');
							$timeout(function() {
								carousel.carousel({
									fullWidth: true
								});
							}, 1000);
							
							element.find('.btn-prev').click(function(e) {
								e.preventDefault();
								e.stopPropagation();
								carousel.carousel('prev');
							});
							
							element.find('.btn-next').click(function(e) {
								e.preventDefault();
								e.stopPropagation();
								carousel.carousel('next');
							});
						});
						//
					}
				}
			});
		}
	}
}])
.directive('video', ['$timeout', function($timeout) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			attrs.$observe('video', function(url) {
				// card video
				if(url) {
					var videoUrl = url;
					//
					$timeout(function() {
						if(videoUrl.search("youtube") != -1) {
							var url = new URL(videoUrl);
							var videoId = url.searchParams.get("v");
							var $iframe = $('<iframe/>').attr('src', 'https://www.youtube.com/embed/' + videoId).attr('width', '100%').attr('height', '600').attr('frameborder', '0').attr('allowfullscreen', 'allowfullscreen');
							//
							element.append($iframe);
						}
						else if(videoUrl.search("facebook") != -1 || videoUrl.search("fb") != -1) {
							var $scriptSdk = $('<script/>').attr('src', 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2').attr('async', 'async').attr('defer', 'defer');
							var $video = $('<div/>').addClass('fb-video').attr('data-href', videoUrl).attr('data-width', 'auto').attr('data-allowfullscreen', true);
							//
							$('body').append($scriptSdk);
							element.append($video);
						}
						else {
							var $source = $('<source/>').attr('type', 'video/mp4').attr('src', videoUrl);
							var $video = $('<video/>').addClass('card-video responsive-video').attr('controls', 'controls').attr('muted', 'muted').attr('width', '100%');
							//
							// $video.attr('poster', scope.creative_hub.background);
							$video.append($source);
							element.append($video);
						}
					}, 2000);
				}
				//
			});
		}
	}
}])

/* 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('bannerPage', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			attrs.$observe('bannerPage', function(banner) 
			{
				if(banner) {
					var $bannerPage = $('<div/>').addClass('relative background-image');
					var $backgroundBlack = $('<div/>').addClass('background-black');
					var $container = $('<div/>').addClass('container relative').css('height', '100%');
					var $title = $('<h1/>').addClass('banner-title them-text-yellow helvetica-neue condensed-black uppercase margin-0').html(attrs.title);
					var $brief = $('<span/>').addClass('banner-brief white-text fc-iconic light absolute').html(attrs.brief);
					 
					if (banner.indexOf("http://") != 0 || banner.indexOf("https://") != 0) {
						banner = 'https:' + banner;
					}
					
					// load background
					var img = new Image();
					img.onload = function() {
						var height = (this.height / this.width) * 100;
						$bannerPage.css('height', height + 'vw');
					}
					img.src = banner;
					
					// text color
					if(attrs.color) {
						$title.css('color', attrs.color);
					}
					
					$bannerPage.css("background-image", "url('"+banner+"')");
					$container.append($title.append($brief));
					element.append($bannerPage.append($backgroundBlack).append($container));
				}
				//
			});
		}
	}
}])

/* Web Content */
.directive('searchBox', ['$window', function($window) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			//
			var $search = $('<div/>').addClass('display-flex').css('align-items', 'center');
			var $title = $('<span/>').addClass('search-title helvetica-neue condensed-black white-text uppercase margin-0').text('SEARCH FOR CREATIVE');
			var $inputField = $('<div/>').addClass('input-field').css('flex', '1');
			var $input = $('<input/>').addClass('validate').attr('name', 'search').attr('type', 'text').attr('placeholder', 'E.g. Type of Business');
			var $button = $('<button/>').addClass('btn waves-effect waves-light helvetica-neue condensed-black z-depth-0').text('SEARCH');
			//
			$button.click(function() {
				$window.location.href = '/search-result?search=' + $input.val();
			});
			//
			$inputField.append($input);
			$search.append($title).append($inputField).append($button);
			element.append($search);
			//
		}
	}
}])
.directive('search', ['$location', function($location) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			//
			scope.search = $location.search().search;
			console.log(scope.search);
			//
			scope.service.app.creative().then(function(data) {
				var creative_hub = data;
				if(creative_hub) {
					angular.forEach(creative_hub, function(item) {
						if(item.code=='industrial-design') {
							
							// banner category
							var bannerCategory = element.find('#banner_category');
							var $containerBanner = $('<div/>').addClass('container relative');
							var $content = $('<div/>').addClass('banner-category-content');
							var $note = $('<p/>').addClass('banner-category-note white-text').text('TRUSTED THAI CREATIVE DESIGNERS DIRECTORY');
							var $title = $('<h1/>').addClass('banner-category-title helvetica-neue condensed-black uppercase relative').text(item.category);
							var $subtitle = $('<h1/>').addClass('banner-category-subtitle helvetica-neue condensed-black white-text uppercase').text('DESIGN');
							var $brief = $('<span/>').addClass('banner-category-brief fc-iconic regular').html(item.brief);
							
							$title.css('color', item.color).append($brief);
							$content.append($note).append($title).append($subtitle);
							bannerCategory.append($containerBanner.append($content));
							
							// program category
							var sectionProgram = element.find('#section_program');
							var $programCategory = $('<div/>').addClass('relative background-image width');
							
							// - load background program
							var img = new Image();
							img.onload = function() {
								var height = (this.height / this.width) * 100;
								$programCategory.css('min-height', height + 'vw');
							}
							img.src = item.background;
							$programCategory.css("background-image", "url('/public/img/background/background-search-result.jpg')");
							$programCategory.append($('<div/>').addClass('background-black').css('opacity', '0.45'));
							$programCategory.append($('<div/>').addClass('background-gradient-bottom'));
							
							// - load program
							var $container = $('<div/>').addClass('container relative').css('z-index', '3');
							var $row = $('<div/>').addClass('row');
							
							var contact = [
								{ "key": "website", "icon": "/public/img/icon/icon-website-black.png" },
								{ "key": "instagram", "icon": "/public/img/icon/icon-instagram-black.png" },
								{ "key": "twitter", "icon": "/public/img/icon/icon-twitter-black.png" },
								{ "key": "facebook", "icon": "/public/img/icon/icon-facebook-black.png" }
							];
							
							angular.forEach(item.program, function(program, index) {
								var $col = $('<div/>').addClass('col s12 m6 l6');
								var $link = $('<a/>').attr('href', '/creative-hub/view/' + program.uuid);
								var $card = $('<div/>').addClass('card-creative-hub white overflow-hidden');
								var $rowCard = $('<div/>').addClass('row');
								var $cardImage = $('<div/>').addClass('col s6 m6 l6 card-creative-hub-image background-cover-center');
								var $cardContent = $('<div/>').addClass('col s6 m6 l6 card-creative-hub-content');
								var $title = $('<p/>').addClass('card-creative-hub-title truncate fc-iconic bold uppercase').text(program.title);
								var $brief = $('<p/>').addClass('card-creative-hub-brief truncate-8 fc-iconic regular').html(program.brief);
								var $socail = $('<ul/>').addClass('card-creative-hub-socail');
								
								// - get data contact
								angular.forEach(contact, function(type) {
									if(program[type.key]) {
										var $li = $('<li/>');
										var $link = $('<a/>').attr('href', program[type.key]).attr('target', '_blank');
										var $icon = $('<img/>').attr('src', type.icon);
										$link.append($icon);
										$socail.append($li.append($link));
									}
								});
								
								$link.click(function() {
									scope.scrollToTop();
								});
								
								$cardImage.css("background-image", "url('"+program.thumbnail+"')");
								$cardContent.append($title).append($brief).append($socail);
								$card.append($rowCard.append($cardImage).append($cardContent));
								$row.append($col.append($link.append($card)));
								
								if(index%2 != 0) $col.addClass('offset-m6 offset-l6');
							});
							
							sectionProgram.append($programCategory).append($container.append($row));
						}
					});
				}
			});
		}
	}
}])
.directive('featureSlider', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			//
			scope.service.app.feature().then(function(data) {
				var features = data;
				console.log(features);
				
				if(features) {
					var $slider = $('<div/>').addClass('slider feature-slider relative');
					var $slides = $('<ul/>').addClass('slides');
					$slider.append($slides);
					
					angular.forEach(features, function(item) {
						var $li = $('<li/>').addClass('relative');
						var $link = $('<a/>').attr('href', item.link + '?category=industrial-design');
						var $gradient = $('<div/>').addClass('background-gradient-top-bottom');
						var $image = $('<img/>').attr('src', item.image);
						var $caption = $('<div/>').addClass('caption white-text center-align');
						var $topic = $('<h5/>').addClass('slider-topic fc-iconic regular white-text').text('Feature Designers');
						var $title = $('<h3/>').addClass('slider-title fc-iconic medium').text(item.title);
						var $brief = $('<h5/>').addClass('slider-brief fc-iconic').text(item.brief);
						
						$caption.append($title).append($brief);
						$link.append($gradient).append($image).append($topic).append($caption);
						$slides.append($li.append($link));
					});
					element.append($slider);
					
					element.ready(function() {
						$('.slider').slider();
					});
				}
			});
			//
		}
	}
}])
.directive('successCaseHighlight', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			//
			scope.service.app.mockup().then(function(data) {
				var highlight = data.success_case_highlight[0];
				// console.log(highlight);
				//
				if(highlight) {
					var $link = $('<a/>').attr('href', highlight.link);
					var $banner = $('<div/>').addClass('banner-highlight relative background-image width');
					var $gradient = $('<div/>').addClass('background-gradient-bottom');
					var $content = $('<div/>').addClass('banner-content center-align');
					var $catchphrase = $('<p/>').addClass('banner-catchphrase fc-iconic medium white-text').text(highlight.catchphrase);
					var $name = $('<p/>').addClass('banner-name fc-iconic white-text').text(highlight.name);
					var $position = $('<p/>').addClass('banner-position fc-iconic white-text').text(highlight.position);
					
					// - load background
					var img = new Image();
					img.onload = function() {
						var height = (this.height / this.width) * 100;
						$banner.css('height', height + 'vw');
					}
					img.src = highlight.background;
					$banner.css("background-image", "url('"+highlight.background+"')");
					//
					$content.append($catchphrase).append($name).append($position);
					$banner.append($gradient).append($content);
					element.append($link.append($banner));
				}
			});
			//
		}
	}
}])
.directive('article', ['$routeParams', function($routeParams) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			//
			var articleId = $routeParams.id;
			// console.log(articleId);
			
			/* Program Article */
			if(_.isUndefined(articleId)) {
				var $row = $('<div/>').addClass('row');
				//
				scope.service.app.article().then(function(data) {
					console.log(data)
				});
				scope.service.app.mockup().then(function(data) {
					scope.article = data.article;
					// console.log(article);
					if(scope.article) {
						angular.forEach(scope.article, function(item, index) {
							var $col = $('<div/>').addClass('col');
							var $link = $('<a/>').attr('href', '/why-thailand/article/' + item.id);
							var $card = $('<div/>').addClass('card-article white');
							var $image = $('<img/>').addClass('card-article-image').attr('src', item.thumbnail);
							var $title = $('<h2/>').addClass('card-article-title grey-text text-darken-2 truncate-2').text(item.title);
							//
							if(index==0) $col.addClass('s12 m12 l12');
							else $col.addClass('s6 m6 l6');
							//
							$card.append($image).append($title);
							$col.append($link.append($card));
							$row.append($col);
						});
						element.append($row);
					}
				});
			}
			/* Article View */
			else {
				scope.service.app.article(articleId).then(function(data) {
					console.log(data)
				});
				scope.service.app.mockup().then(function(data) {
					scope.article = data.article[articleId];
					console.log(scope.article);
				});
			}
			//
		}
	}
}])
.directive('happening', ['$routeParams', function($routeParams) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			//
			var happeningId = $routeParams.id;
			// console.log(happeningId);
			
			/* Program Happening */
			if(_.isUndefined(happeningId)) {
				var $row = $('<div/>').addClass('row');
				//
				scope.service.app.happening().then(function(data) {
					var happening = data;
					// console.log(happening);
					if(happening) {
						angular.forEach(happening, function(item) {
							var $col = $('<div/>').addClass('col s6 m3 l3');
							var $link = $('<a/>').attr('href', '/happening/' + item.id);
							var $card = $('<div/>').addClass('card-happening');
							var $image = $('<img/>').addClass('card-happening-image object-fit-cover').attr('src', item.thumbnail);
							var $title = $('<p/>').addClass('card-happening-title truncate-3 fc-iconic bold').text(item.title);
							var $brief = $('<p/>').addClass('card-happening-brief truncate-4 fc-iconic regular').html(item.brief);
							
							$card.append($image).append($title).append($brief);
							$col.append($link.append($card));
							$row.append($col);
						});
						element.append($row);
					}
				});
			}
			/* Happening View */
			else {
				scope.service.app.happening(happeningId).then(function(data) {
					scope.happening = data;
					// console.log(scope.happening);
				});
			}
			//
		}
	}
}])
// .directive('creativeMaker', ['$routeParams', function($routeParams) {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs) 
// 		{
// 			//
// 			var creativeMakerId = $routeParams.id;
// 			// console.log(creativeMakerId);
// 			
// 			/* Program Creative Maker */
// 			if(_.isUndefined(creativeMakerId)) {
// 				var $row = $('<div/>').addClass('row');
// 				//
// 				scope.service.app.creator('bcf4b2be-be59-42ae-9a85-741853c9f24a');
// 				scope.service.app.mockup().then(function(data) {
// 					var creative_maker = data.creative_maker;
// 					// console.log(creative_maker);
// 					if(creative_maker) {
// 						angular.forEach(creative_maker, function(item) {
// 							var $col = $('<div/>').addClass('col s6 m6 l6');
// 							var $link = $('<a/>').attr('href', '/creative-maker/' + item.code);
// 							var $card = $('<div/>').addClass('card-creative-maker');
// 							var $image = $('<img/>').addClass('card-creative-maker-image object-fit-cover').attr('src', item.thumbnail);
// 							var $cardContent = $('<div/>').css('padding-right', '2em');
// 							var $title = $('<p/>').addClass('card-creative-maker-title truncate-2 fc-iconic bold').text(item.title);
// 							var $brief = $('<p/>').addClass('card-creative-maker-brief truncate-3 fc-iconic regular').text(item.brief);
// 							
// 							$cardContent.append($title).append($brief);
// 							$card.append($image).append($cardContent);
// 							$col.append($link.append($card));
// 							$row.append($col);
// 						});
// 						element.append($row);
// 					}
// 				});
// 			}
// 			/* Creative Maker View */
// 			else {
// 				scope.service.app.mockup().then(function(data) {
// 					scope.creative_maker = data.creative_maker[creativeMakerId];
// 					console.log(scope.creative_maker);
// 					
// 					// banner page
// 					if(scope.creative_maker.background) {
// 						var $bannerPage = element.find('#banner_page');
// 						var background = scope.creative_maker.background;
// 						
// 						var $banner = $('<div/>').addClass('relative background-image width');
// 						var $backgroundBlack = $('<div/>').addClass('background-black');
// 						var $container = $('<div/>').addClass('container relative').css('height', '100%');
// 						var $title = $('<h1/>').addClass('banner-title them-text-yellow helvetica-neue condensed-black uppercase margin-0').html(scope.creative_maker.title);
// 						var $brief = $('<span/>').addClass('banner-brief white-text fc-iconic light absolute').html(scope.creative_maker.position);
// 						 
// 						if (background.indexOf("http://") != 0 || background.indexOf("https://") != 0) {
// 							background = 'https:' + background;
// 						}
// 						
// 						// - load background
// 						var img = new Image();
// 						img.onload = function() {
// 							var height = (this.height / this.width) * 100;
// 							$banner.css('height', height + 'vw');
// 						}
// 						img.src = background;
// 				
// 						$banner.css("background-image", "url('"+background+"')");
// 						$container.append($title.append($brief));
// 						$bannerPage.append($banner.append($backgroundBlack).append($container));
// 					}
// 					
// 					// gallery carousel
// 					if(scope.creative_maker.gallery) {
// 						var $cardGallery = element.find('#card_carousel');
// 						var $carousel = $('<div/>').addClass('card-gallery carousel carousel-slider relative');
// 						var $gradient = $('<div/>').addClass('background-gradient-left-right');
// 						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'));
// 						
// 						angular.forEach(scope.creative_maker.gallery, function(item) {
// 							var	$item = $('<div/>').addClass('carousel-item relative');
// 							var $image = $('<div/>').addClass('background-image');
// 							
// 							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:' + item.image;
// 							$image.css('background-image', "url('"+ item.image +"')");
// 							
// 							$item.append($image);
// 							$carousel.append($item);
// 						});
// 						$cardGallery.append($carousel.append($btnPrev).append($btnNext));
// 					}
// 					
// 					// program related
// 					if(scope.creative_maker.related) {
// 						var sectionRelated = element.find('#section_related');
// 						
// 						// - load program
// 						var $row = $('<div/>').addClass('row');
// 						
// 						angular.forEach(scope.creative_maker.related, function(company) {
// 							var $col = $('<div/>').addClass('col s12 m6 l6');
// 							var $link = $('<a/>').attr('href', '/creative-hub/view/' + company.code);
// 							var $card = $('<div/>').addClass('card-creative-hub white overflow-hidden');
// 							var $rowCard = $('<div/>').addClass('row');
// 							var $cardImage = $('<div/>').addClass('col s6 m6 l6 card-creative-hub-image background-cover-center');
// 							var $cardContent = $('<div/>').addClass('col s6 m6 l6 card-creative-hub-content');
// 							var $title = $('<p/>').addClass('card-creative-hub-title truncate fc-iconic bold').text(company.title);
// 							var $brief = $('<p/>').addClass('card-creative-hub-brief truncate-8 fc-iconic regular').html(company.brief);
// 							var $socail = $('<ul/>').addClass('card-creative-hub-socail');
// 							
// 							// - get data socail
// 							if(company.socail) {
// 								angular.forEach(company.socail, function(socail) {
// 									var $li = $('<li/>');
// 									var $link = $('<a/>').attr('href', socail.link).attr('target', '_blank');
// 									var $icon = $('<img/>').attr('src', socail.icon);
// 									$link.append($icon);
// 									$socail.append($li.append($link));
// 								});
// 							}
// 							
// 							$cardImage.css("background-image", "url('"+company.thumbnail+"')");
// 							$cardContent.append($title).append($brief).append($socail);
// 							$card.append($rowCard.append($cardImage).append($cardContent));
// 							$row.append($col.append($link.append($card)));
// 						});
// 						
// 						sectionRelated.append($row);
// 					}
// 					
// 					element.ready(function() {
// 						// carousel
// 						var carousel = element.find('.carousel.carousel-slider');
// 						carousel.carousel({
// 							fullWidth: true
// 						});
// 						
// 						element.find('.btn-prev').click(function(e) {
// 							e.preventDefault();
// 							e.stopPropagation();
// 							carousel.carousel('prev');
// 						});
// 						
// 						element.find('.btn-next').click(function(e) {
// 							e.preventDefault();
// 							e.stopPropagation();
// 							carousel.carousel('next');
// 						});
// 					});
// 				});
// 			}
// 			//
// 		}
// 	}
// }])
.directive('creativeMaker', ['$routeParams', function($routeParams) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			//
			var creativeMakerId = $routeParams.id;
			// console.log(creativeMakerId);
			
			scope.service.app.mockup().then(function(data) {
				console.log(data.creative_maker);
			});
			
			/* Program Creative Maker */
			if(_.isUndefined(creativeMakerId)) {
				var $row = $('<div/>').addClass('row');
				//
				scope.service.app.creator().then(function(data) {
					var creative_maker = data;
					// console.log(creative_maker);
					if(creative_maker) {
						angular.forEach(creative_maker, function(item) {
							var $col = $('<div/>').addClass('col s6 m6 l6');
							var $link = $('<a/>').attr('href', '/creative-maker/' + item.code);
							var $card = $('<div/>').addClass('card-creative-maker');
							var $image = $('<img/>').addClass('card-creative-maker-image object-fit-cover');
							var $cardContent = $('<div/>').css('padding-right', '2em');
							var $title = $('<p/>').addClass('card-creative-maker-title truncate-2 fc-iconic bold').text(item.title);
							var $brief = $('<div/>').addClass('card-creative-maker-brief truncate-3 fc-iconic regular').html(item.brief);
							
							$cardContent.append($title).append($brief);
							$image.attr('src', item.thumbnail ? item.thumbnail : scope.defaultThumbnail);
							$card.append($image).append($cardContent);
							$col.append($link.append($card));
							$row.append($col);
						});
						element.append($row);
					}
				});
			}
			/* Creative Maker View */
			else {
				scope.service.app.creator(creativeMakerId).then(function(data) {
					scope.creative_maker = data;
					console.log(scope.creative_maker);
					
					// banner page
					if(scope.creative_maker.background) {
						var $bannerPage = element.find('#banner_page');
						var background = scope.creative_maker.background ? scope.creative_maker.background : scope.defaultBanner;
						
						var $banner = $('<div/>').addClass('relative background-image');
						var $backgroundBlack = $('<div/>').addClass('background-black');
						var $container = $('<div/>').addClass('container relative');
						var $title = $('<h1/>').addClass('banner-title them-text-yellow helvetica-neue condensed-black uppercase margin-0').html(scope.creative_maker.title);
						var $brief = $('<span/>').addClass('banner-brief white-text fc-iconic light absolute').html(scope.creative_maker.position);
						
						// - load background
						var img = new Image();
						img.onload = function() {
							var height = (this.height / this.width) * 100;
							$banner.css('height', height + 'vw');
						}
						img.src = background;
				
						$banner.css("background-image", "url('"+background+"')");
						$container.append($title.append($brief));
						$bannerPage.append($banner.append($backgroundBlack).append($container));
					}
					
					// gallery carousel
					if(scope.creative_maker.gallery) {
						var $cardGallery = element.find('#card_carousel');
						var $carousel = $('<div/>').addClass('card-gallery carousel carousel-slider relative');
						var $gradient = $('<div/>').addClass('background-gradient-left-right');
						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'));
						
						angular.forEach(scope.creative_maker.gallery, function(item) {
							var	$item = $('<div/>').addClass('carousel-item relative');
							var $image = $('<div/>').addClass('background-image');
							
							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:' + item.image;
							$image.css('background-image', "url('"+ item.image +"')");
							
							$item.append($image);
							$carousel.append($item);
						});
						$cardGallery.append($carousel.append($btnPrev).append($btnNext));
					}
					
					// program related
					if(Object.keys(scope.creative_maker.related).length) {
						
						// - load program
						var sectionRelated = element.find('#section_related');
						var $row = $('<div/>').addClass('row');
						
						angular.forEach(scope.creative_maker.related, function(company) {
							var $col = $('<div/>').addClass('col s12 m6 l6');
							var $link = $('<a/>').attr('href', '/creative-hub/view/' + company.code);
							var $card = $('<div/>').addClass('card-creative-hub white overflow-hidden');
							var $rowCard = $('<div/>').addClass('row');
							var $cardImage = $('<div/>').addClass('col s6 m6 l6 card-creative-hub-image background-cover-center');
							var $cardContent = $('<div/>').addClass('col s6 m6 l6 card-creative-hub-content');
							var $title = $('<p/>').addClass('card-creative-hub-title truncate fc-iconic bold').text(company.title);
							var $brief = $('<p/>').addClass('card-creative-hub-brief truncate-8 fc-iconic regular').html(company.brief);
							var $socail = $('<ul/>').addClass('card-creative-hub-socail');
							
							// - get data socail
							if(company.socail) {
								angular.forEach(company.socail, function(socail) {
									var $li = $('<li/>');
									var $link = $('<a/>').attr('href', socail.link).attr('target', '_blank');
									var $icon = $('<img/>').attr('src', socail.icon);
									$link.append($icon);
									$socail.append($li.append($link));
								});
							}
							
							$cardImage.css("background-image", "url('"+company.thumbnail+"')");
							$cardContent.append($title).append($brief).append($socail);
							$card.append($rowCard.append($cardImage).append($cardContent));
							$row.append($col.append($link.append($card)));
						});
						
						sectionRelated.append($row);
					}else {
						element.find('.card-related').hide();
					}
					
					element.ready(function() {
						// carousel
						var carousel = element.find('.carousel.carousel-slider');
						carousel.carousel({
							fullWidth: true
						});
						
						element.find('.btn-prev').click(function(e) {
							e.preventDefault();
							e.stopPropagation();
							carousel.carousel('prev');
						});
						
						element.find('.btn-next').click(function(e) {
							e.preventDefault();
							e.stopPropagation();
							carousel.carousel('next');
						});
					});
				});
			}
			//
		}
	}
}])
.directive('creativeHub', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			scope.service.app.creative().then(function(data) {
				var creative_hub = data;
				console.log(creative_hub);
				
				if(creative_hub) {
					angular.forEach(creative_hub, function(item) {
						// section topic
						var $sectionTopic = $('<div/>').addClass('section-creative-hub-topic');
						var $containerTopic = $('<div/>').addClass('container relative');
						var $category = $('<h1/>').addClass('section-title helvetica-neue condensed-black uppercase black-text');
						var $btnViewAll = $('<a/>').addClass('section-btn btn-flat helvetica-neue condensed-black uppercase').text('VIEW ALL');
						
						$category.append($('<span/>').text(item.category).css('color', item.color));
						$category.append($('<span/>').html('<br />DESIGN'));
						$btnViewAll.attr('href', '/creative-hub/' + item.code);
						$containerTopic.append($category).append($btnViewAll);
						element.append($sectionTopic.append($containerTopic));
						
						// program creative hub
						var $sectionProgram = $('<div/>').addClass('section-creative-hub-program valign-wrapper relative');
						var $backgroundBlack = $('<div/>').addClass('background-black');
						var $backgroundGradient = $('<div/>').addClass('background-gradient-left-right');
						var $container = $('<div/>').addClass('container');
						var $row = $('<div/>').addClass('row owl-carousel owl-theme relative').attr('id', 'owl_'+item.code);
						$container.append($row);
						
						var contact = [
							{ "key": "website", "icon": "/public/img/icon/icon-website-black.png" },
							{ "key": "instagram", "icon": "/public/img/icon/icon-instagram-black.png" },
							{ "key": "twitter", "icon": "/public/img/icon/icon-twitter-black.png" },
							{ "key": "facebook", "icon": "/public/img/icon/icon-facebook-black.png" }
						];
						
						// - load program
						angular.forEach(item.program, function(program) {
							var $col = $('<div/>').addClass('item');
							var $link = $('<a/>').attr('href', '/creative-hub/view/' + program.uuid + '?category=' + item.code);
							var $card = $('<div/>').addClass('card-creative-hub white');
							var $rowCard = $('<div/>').addClass('row');
							var $cardImage = $('<div/>').addClass('col s6 m6 l6 card-creative-hub-image background-cover-center');
							var $cardContent = $('<div/>').addClass('col s6 m6 l6 card-creative-hub-content');
							var $title = $('<p/>').addClass('card-creative-hub-title truncate fc-iconic bold uppercase').text(program.title);
							var $brief = $('<div/>').addClass('card-creative-hub-brief truncate-8 fc-iconic regular').html(program.brief);
							var $socail = $('<ul/>').addClass('card-creative-hub-socail');
							var $award = $('<div/>').addClass('card-creative-hub-award');
							
							// - get data contact
							angular.forEach(contact, function(type) {
								if(program[type.key]) {
									var $li = $('<li/>');
									var $link = $('<a/>').attr('href', program[type.key]).attr('target', '_blank');
									var $icon = $('<img/>').attr('src', type.icon);
									$link.append($icon);
									$socail.append($li.append($link));
								}
							});
							
							// - get data award
							// if(program.award) {
							// 	var $rowAward = $('<div/>').addClass('row');
							// 	angular.forEach(program.award, function(award) {
							// 		var $col = $('<div/>').addClass('col s6 m6 l6');
							// 		var $link = $('<a/>').attr('href', award.link).attr('target', '_blank');
							// 		var $icon = $('<img/>').attr('src', award.icon);
							// 		$link.append($icon);
							// 		$rowAward.append($col.append($link));
							// 	});
							// 	$award.append($rowAward);
							// }
							
							$link.click(function() {
								scope.scrollToTop();
							});
							
							$cardImage.css("background-image", "url('"+program.thumbnail+"')");
							$cardContent.append($title).append($brief).append($socail).append($award);
							$card.append($rowCard.append($cardImage).append($cardContent));
							$row.append($col.append($link.append($card)));
						});
						
						// - load background program
						var background = item.background;
						if(background) {
							var img = new Image();
							img.onload = function() {
								var height = (this.height / this.width) * 100;
								$sectionProgram.css('height', height + 'vw');
							}
							if (background.indexOf("http://") != 0 || background.indexOf("https://") != 0) {
								img.src = 'https:' + background;
							}
							img.src = background;
							$sectionProgram.css("background-image", "url('"+background+"')");
							$sectionProgram.addClass('background-image');
						}
						
						$sectionProgram.append($backgroundBlack).append($backgroundGradient).append($container);
						element.append($sectionProgram);
					});
					
					element.ready(function() {
						// owl carousel
						var owl = element.find('.owl-carousel');
						
						owl.owlCarousel({
							loop: true,
							nav: true,
							autoplay: true,
							autoplayTimeout: 2000,
							autoplayHoverPause: true,
							responsive:{
								0:{
									items:1
								},
								600:{
									items:3
								},
								1000:{
									items:2
								}
							}
						});
						
						$(".owl-prev").html('<a class="btn-prev absolute"><img src="/public/img/icon/icon-prev-white.png"></a>');
						$(".owl-next").html('<a class="btn-next absolute"><img src="/public/img/icon/icon-next-white.png"></a>');
						
						// hide nav on small only
						$(".owl-nav").addClass('hide-on-small-only');
					});
				}
			});
			//
		}
	}
}])
.directive('creativeHubCategory', ['$routeParams', function($routeParams) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			var code = $routeParams.category;
			// console.log(code);
			
			scope.service.app.creative().then(function(data) {
				var creative_hub = data;
				if(creative_hub) {
					angular.forEach(creative_hub, function(item) {
						if(item.code==code) {
							// console.log(item);
							
							// banner category
							var bannerCategory = element.find('#banner_category');
							var $containerBanner = $('<div/>').addClass('container relative');
							var $content = $('<div/>').addClass('banner-category-content');
							var $note = $('<p/>').addClass('banner-category-note white-text').text('TRUSTED THAI CREATIVE DESIGNERS DIRECTORY');
							var $title = $('<h1/>').addClass('banner-category-title helvetica-neue condensed-black uppercase relative').text(item.category);
							var $subtitle = $('<h1/>').addClass('banner-category-subtitle helvetica-neue condensed-black white-text uppercase').text('DESIGN');
							var $brief = $('<span/>').addClass('banner-category-brief fc-iconic regular').html(item.brief);
							
							$title.css('color', item.color).append($brief);
							$content.append($note).append($title).append($subtitle);
							bannerCategory.append($containerBanner.append($content));
							
							// program category
							var sectionProgram = element.find('#section_program');
							var $programCategory = $('<div/>').addClass('relative background-image width');
							
							// - load background program
							var img = new Image();
							img.onload = function() {
								var height = (this.height / this.width) * 100;
								$programCategory.css('min-height', height + 'vw');
							}
							img.src = item.background;
							$programCategory.css("background-image", "url('"+item.background+"')");
							$programCategory.append($('<div/>').addClass('background-black').css('opacity', '0.45'));
							$programCategory.append($('<div/>').addClass('background-gradient-bottom'));
							
							// - load program
							var $container = $('<div/>').addClass('container relative').css('z-index', '3');
							var $row = $('<div/>').addClass('row');
							
							var contact = [
								{ "key": "website", "icon": "/public/img/icon/icon-website-black.png" },
								{ "key": "instagram", "icon": "/public/img/icon/icon-instagram-black.png" },
								{ "key": "twitter", "icon": "/public/img/icon/icon-twitter-black.png" },
								{ "key": "facebook", "icon": "/public/img/icon/icon-facebook-black.png" }
							];
							
							angular.forEach(item.program, function(program, index) {
								var $col = $('<div/>').addClass('col s12 m6 l6');
								var $link = $('<a/>').attr('href', '/creative-hub/view/' + program.uuid + '?category=' + item.code);
								var $card = $('<div/>').addClass('card-creative-hub white overflow-hidden');
								var $rowCard = $('<div/>').addClass('row');
								var $cardImage = $('<div/>').addClass('col s6 m6 l6 card-creative-hub-image background-cover-center');
								var $cardContent = $('<div/>').addClass('col s6 m6 l6 card-creative-hub-content');
								var $title = $('<p/>').addClass('card-creative-hub-title truncate fc-iconic bold uppercase').text(program.title);
								var $brief = $('<p/>').addClass('card-creative-hub-brief truncate-8 fc-iconic regular').html(program.brief);
								var $socail = $('<ul/>').addClass('card-creative-hub-socail');
								
								// - get data contact
								angular.forEach(contact, function(type) {
									if(program[type.key]) {
										var $li = $('<li/>');
										var $link = $('<a/>').attr('href', program[type.key]).attr('target', '_blank');
										var $icon = $('<img/>').attr('src', type.icon);
										$link.append($icon);
										$socail.append($li.append($link));
									}
								});
								
								$link.click(function() {
									scope.scrollToTop();
								});
								
								$cardImage.css("background-image", "url('"+program.thumbnail+"')");
								$cardContent.append($title).append($brief).append($socail);
								$card.append($rowCard.append($cardImage).append($cardContent));
								$row.append($col.append($link.append($card)));
								
								if(index%2 != 0) $col.addClass('offset-m6 offset-l6');
							});
							
							sectionProgram.append($programCategory).append($container.append($row));
						}
					});
				}
			});
			//
		}
	}
}])
.directive('makeEnquiry', ['$routeParams','$window','$location', function($routeParams, $window, $location) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			var sellerId = $routeParams.id;
			element.on('click', function() {
				if(scope.service.user.token()) {
					$window.location.href = '/service-request/' + sellerId;
				} else {
					//scope.scrollToTop();
					//$window.location.href = '/signin';
				}
			});
		}
	}
}])
.directive('creativeHubView', ['$routeParams', '$timeout', '$window', '$location', function($routeParams, $timeout, $window, $location) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			var defaultBackground = '/public/img/background/background-no-picture-1200x460.jpg';
			var sellerId = $routeParams.id;
			var category = $location.search().category;
			// console.log(sellerId);
			
			scope.service.app.seller(sellerId).then(function(data) {
				scope.creative_hub = data;
				console.log(scope.creative_hub);
				
				if(scope.creative_hub) {
					
					// background black
					scope.background = scope.creative_hub.background ? scope.creative_hub.background : defaultBackground;
					var $backgroundBlack = $('<div/>').addClass('background-black');
					//
					var img = new Image();
					img.onload = function() {
						var height = (this.height / this.width) * 100;
						$backgroundBlack.css('height', height + 'vw');
					}
					img.src = scope.background;
					element.find('.banner-content').append($backgroundBlack);
					
					// data contact
					var contact = [
						{ "key": "website", "icon": "/public/img/icon/icon-website-black.png" },
						{ "key": "instagram", "icon": "/public/img/icon/icon-instagram-black.png" },
						{ "key": "twitter", "icon": "/public/img/icon/icon-twitter-black.png" },
						{ "key": "facebook", "icon": "/public/img/icon/icon-facebook-black.png" }
					];
					angular.forEach(contact, function(type) {
						if(scope.creative_hub.social[type.key]) {
							var $li = $('<li/>');
							var $link = $('<a/>').attr('href', scope.creative_hub.social[type.key].indexOf("www") === -1 ? scope.creative_hub.social[type.key] : "https://" + scope.creative_hub.social[type.key]).attr('target', '_blank');
							var $icon = $('<img/>').attr('src', type.icon);
							$link.append($icon);
							element.find('.card-content-socail').append($li.append($link));
						}
					});
					
					// data award
					var award = [
						{ "key": "reddot", "icon": "/public/img/icon/icon-reddot-award-winner.png" },
						{ "key": "gooddesign", "icon": "/public/img/icon/icon-good-design-award.png" },
						{ "key": "demark", "icon": "/public/img/icon/icon-design-excellence-award.png" }
					];
					var $rowAward = $('<div/>').addClass('row');
					element.find('.card-content-award').append($rowAward);
					angular.forEach(award, function(type) {
						if(scope.creative_hub.award[type.key]) {
							var $col = $('<div/>').addClass('col s5');
							var $link = $('<a/>').attr('href', scope.creative_hub.award[type.key].indexOf("www") === -1 ? scope.creative_hub.award[type.key] : "https://" + scope.creative_hub.award[type.key]).attr('target', '_blank');
							var $icon = $('<img/>').attr('src', type.icon);
							$link.append($icon);
							$rowAward.append($col.append($link));
						}
					});
					
					// button action
					if(scope.service.user.token()) {
						element.find('.request-action').attr('href', '/service-request/' + sellerId).click(function() {
							scope.scrollToTop();
						});
					} else {
						element.find('.request-action').attr('href', '/signin').click(function() {
							scope.scrollToTop();
						});
					}
					
					// program company
					scope.service.app.creative().then(function(data) {
						angular.forEach(data, function(item) {
							if(item.code==category) {
								var sectionProgram = element.find('#section_program');
								
								// - load program
								var $row = $('<div/>').addClass('row')
								var count = 0;
								
								angular.forEach(item.program, function(company, index) {
									if(company.uuid!=sellerId) {
										var $col = $('<div/>').addClass('col s12 m6 l6');
										var $link = $('<a/>').attr('href', '/creative-hub/view/' + company.uuid + '?category=' + item.code);
										var $card = $('<div/>').addClass('card-creative-hub white overflow-hidden');
										var $rowCard = $('<div/>').addClass('row');
										var $cardImage = $('<div/>').addClass('col s6 m6 l6 card-creative-hub-image background-cover-center');
										var $cardContent = $('<div/>').addClass('col s6 m6 l6 card-creative-hub-content');
										var $title = $('<p/>').addClass('card-creative-hub-title truncate fc-iconic bold').text(company.title);
										var $brief = $('<p/>').addClass('card-creative-hub-brief truncate-8 fc-iconic regular').html(company.brief);
										var $socail = $('<ul/>').addClass('card-creative-hub-socail');
										
										var contact = [
											{ "key": "website", "icon": "/public/img/icon/icon-website-black.png" },
											{ "key": "instagram", "icon": "/public/img/icon/icon-instagram-black.png" },
											{ "key": "twitter", "icon": "/public/img/icon/icon-twitter-black.png" },
											{ "key": "facebook", "icon": "/public/img/icon/icon-facebook-black.png" }
										];
										
										// - get data contact
										angular.forEach(contact, function(type) {
											if(company[type.key]) {
												var $li = $('<li/>');
												var $link = $('<a/>').attr('href', company[type.key]).attr('target', '_blank');
												var $icon = $('<img/>').attr('src', type.icon);
												$link.append($icon);
												$socail.append($li.append($link));
											}
										});
										
										$cardImage.css("background-image", "url('"+company.thumbnail+"')");
										$cardContent.append($title).append($brief).append($socail);
										$card.append($rowCard.append($cardImage).append($cardContent));
										$row.append($col.append($link.append($card)));
										
										if(count%2 != 0) $col.addClass('offset-m6 offset-l6');
										count++;
									}
								});
								sectionProgram.append($row);
							}
						});
					});
					// if(scope.creative_hub.business[0].company) {
					// 	var sectionProgram = element.find('#section_program');
					// 	
					// 	// - load program
					// 	var $row = $('<div/>').addClass('row');
					// 	
					// 	angular.forEach(scope.creative_hub.business[0].company, function(company, index) {
					// 		var $col = $('<div/>').addClass('col s12 m6 l6');
					// 		var $link = $('<a/>').attr('href', '/creative-hub/view/' + company.code);
					// 		var $card = $('<div/>').addClass('card-creative-hub white overflow-hidden');
					// 		var $rowCard = $('<div/>').addClass('row');
					// 		var $cardImage = $('<div/>').addClass('col s6 m6 l6 card-creative-hub-image background-cover-center');
					// 		var $cardContent = $('<div/>').addClass('col s6 m6 l6 card-creative-hub-content');
					// 		var $title = $('<p/>').addClass('card-creative-hub-title truncate fc-iconic bold').text(company.title);
					// 		var $brief = $('<p/>').addClass('card-creative-hub-brief truncate-8 fc-iconic regular').text(company.brief);
					// 		var $socail = $('<ul/>').addClass('card-creative-hub-socail');
					// 		
					// 		// - get data socail
					// 		if(company.socail) {
					// 			angular.forEach(company.socail, function(socail) {
					// 				var $li = $('<li/>');
					// 				var $link = $('<a/>').attr('href', socail.link).attr('target', '_blank');
					// 				var $icon = $('<img/>').attr('src', socail.icon);
					// 				$link.append($icon);
					// 				$socail.append($li.append($link));
					// 			});
					// 		}
					// 		
					// 		$cardImage.css("background-image", "url('"+company.thumbnail+"')");
					// 		$cardContent.append($title).append($brief).append($socail);
					// 		$card.append($rowCard.append($cardImage).append($cardContent));
					// 		$row.append($col.append($link.append($card)));
					// 		
					// 		if(index%2 != 0) $col.addClass('offset-m6 offset-l6');
					// 	});
					// 	
					// 	sectionProgram.append($row);
					// }
					
					element.ready(function() {
						// carousel
						var carousel = element.find('.carousel.carousel-slider');
						$timeout(function() {
							carousel.carousel({
								fullWidth: true
							});
						}, 1000);
						
						element.find('.btn-prev').click(function(e) {
							e.preventDefault();
							e.stopPropagation();
							carousel.carousel('prev');
						});
						
						element.find('.btn-next').click(function(e) {
							e.preventDefault();
							e.stopPropagation();
							carousel.carousel('next');
						});
					});
				}
				//
			});
			//
		}
	}
}])
.directive('solution', ['$routeParams', function($routeParams) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			//
			var solutionId = $routeParams.id;
			// console.log(solutionId);
			
			/* Program Solution */
			if(_.isUndefined(solutionId)) {
				scope.service.app.mockup().then(function(data) {
					scope.solution = data.solution;
					// console.log(scope.solution);
					if(scope.solution) {
						var $row = $('<div/>').addClass('row');
						
						angular.forEach(scope.solution, function(item) {
							var $col = $('<div/>').addClass('col s12');
							var $link = $('<a/>').attr('href', '/solution/' + item.id);
							var $card = $('<div/>').addClass('card-solution background-cover-center relative');
							var $title = $('<h1/>').addClass('card-title helvetica-neue condensed-black black white-text uppercase absolute absolute-center');
							
							$card.css("background-image", "url('"+item.thumbnail+"')");
							$title.text(item.title);
							$col.append($link.append($card.append($title)));
							$row.append($col);
						});
						element.append($row);
					}
				});
			}
			/* Solution View */
			else {
				scope.service.app.mockup().then(function(data) {
					scope.solution = data.solution[solutionId];
					console.log(scope.solution);
					
					// program related
					if(scope.solution.related) {
						var sectionRelated = element.find('#section_related');
						
						// - load program
						var $row = $('<div/>').addClass('row');
						
						angular.forEach(scope.solution.related, function(company) {
							var $col = $('<div/>').addClass('col s12 m6 l6');
							var $link = $('<a/>').attr('href', '/creative-hub/view/' + company.code);
							var $card = $('<div/>').addClass('card-creative-hub white overflow-hidden');
							var $rowCard = $('<div/>').addClass('row');
							var $cardImage = $('<div/>').addClass('col s6 m6 l6 card-creative-hub-image background-cover-center');
							var $cardContent = $('<div/>').addClass('col s6 m6 l6 card-creative-hub-content');
							var $title = $('<p/>').addClass('card-creative-hub-title truncate fc-iconic bold').text(company.title);
							var $brief = $('<p/>').addClass('card-creative-hub-brief truncate-8 fc-iconic regular').text(company.brief);
							var $socail = $('<ul/>').addClass('card-creative-hub-socail');
							
							// - get data socail
							if(company.socail) {
								angular.forEach(company.socail, function(socail) {
									var $li = $('<li/>');
									var $link = $('<a/>').attr('href', socail.link).attr('target', '_blank');
									var $icon = $('<img/>').attr('src', socail.icon);
									$link.append($icon);
									$socail.append($li.append($link));
								});
							}
							
							$cardImage.css("background-image", "url('"+company.thumbnail+"')");
							$cardContent.append($title).append($brief).append($socail);
							$card.append($rowCard.append($cardImage).append($cardContent));
							$row.append($col.append($link.append($card)));
						});
						
						sectionRelated.append($row);
					}
				});
			}
			//
		}
	}
}])
.directive('successCase', ['$routeParams', function($routeParams) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			//
			var successCaseId = $routeParams.id;
			// console.log(successCaseId);
			
			/* Program Success Case */
			if(_.isUndefined(successCaseId)) {
				scope.service.app.mockup().then(function(data) {
					scope.success_case = data.success_case;
					console.log(scope.success_case);
					
					// highlight
					var highlight = scope.success_case[0].highlight[0];
					if(highlight) {
						var highlightSuccessCase = element.find('#highlight_success_case');
						var $banner = $('<div/>').addClass('banner-highlight relative background-image width');
						var $gradient = $('<div/>').addClass('background-gradient-bottom');
						var $content = $('<div/>').addClass('banner-content center-align');
						var $catchphrase = $('<p/>').addClass('banner-catchphrase fc-iconic medium white-text').text(highlight.catchphrase);
						var $name = $('<p/>').addClass('banner-name fc-iconic white-text').text(highlight.name);
						var $position = $('<p/>').addClass('banner-position fc-iconic white-text').text(highlight.position);
					 	
						if (highlight.banner.indexOf("http://") != 0 || highlight.banner.indexOf("https://") != 0) {
							highlight.banner = 'https:' + highlight.banner;
						}
						$banner.css("background-image", "url('"+highlight.banner+"')");
						
						// - load background
						var img = new Image();
						img.onload = function() {
							var height = (this.height / this.width) * 100;
							$banner.css('height', height + 'vw');
						}
						img.src = highlight.banner;
						
						$content.append($catchphrase).append($name).append($position);
						$banner.append($gradient).append($content);
						highlightSuccessCase.append($banner);
					}
					
					// personnel success case
					if(scope.success_case[0].program) {
						var programSuccessCase = element.find('#program_success_case');
						var $row = $('<div/>').addClass('row margin-0');
						
						angular.forEach(scope.success_case[0].program, function(item) {
							var $col = $('<div/>').addClass('col s6 m3 l3');
							var $link = $('<a/>').attr('href', '/success-case/' + item.id);
							var $card = $('<div/>').addClass('card-success-case background-cover-center relative');
							var $gradient = $('<div/>').addClass('background-gradient-bottom');
							var $content = $('<div/>').addClass('card-content center-align bottom').css('z-index', '2').css('bottom', '10%');
							var $name = $('<p/>').addClass('card-name fc-iconic medium white-text').text(item.name);
							var $position = $('<p/>').addClass('card-position fc-iconic medium white-text').text(item.position);
							
							$card.css("background-image", "url('"+item.thumbnail+"')");
							$card.append($gradient).append($content);
							$content.append($name).append($position);
							$col.append($link.append($card));
							$row.append($col);
						});
						programSuccessCase.append($row);
					}
				});
			}
			/* Success Case View */
			else {
				scope.service.app.mockup().then(function(data) {
					scope.success_case = data.success_case[0].program[successCaseId];
					console.log(scope.success_case);
					
					// highlight
					var highlight = scope.success_case;
					if(highlight) {
						var banner_success_case = element.find('#banner_success_case');
						var $banner = $('<div/>').addClass('banner-highlight relative background-image width');
						var $gradient = $('<div/>').addClass('background-gradient-bottom');
						var $content = $('<div/>').addClass('banner-content center-align');
						var $name = $('<p/>').addClass('banner-name fc-iconic medium white-text').text(highlight.name);
						var $position = $('<p/>').addClass('banner-position fc-iconic extra-light white-text').text(highlight.position);
						 
						if (highlight.banner.indexOf("http://") != 0 || highlight.banner.indexOf("https://") != 0) {
							highlight.banner = 'https:' + highlight.banner;
						}
						$banner.css("background-image", "url('"+highlight.banner+"')");
						
						// - load background
						var img = new Image();
						img.onload = function() {
							var height = (this.height / this.width) * 100;
							$banner.css('height', height + 'vw');
						}
						img.src = highlight.banner;
						
						$content.append($name).append($position);
						$banner.append($gradient).append($content);
						banner_success_case.append($banner);
					}
				});
			}
			//
		}
	}
}])

/* User */
.directive('dashboard', ['$timeout', function($timeout) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{			
			/* Dropdown Country */
			scope.service.app.country().then(function(data) {
				//console.log(data)
				scope.country = data;
			});
			//
			var userid = '';
			
			/* Edit Profile Function */
			scope.editProfile = function() {
				var formId = '#edit_form';
				
				if(scope.validateForm(formId)) {
					var formData = {};
					formData['type_product'] = [];
					//
					$.each($(formId).serializeArray(), function(index, key) {
						if(key.name=='country') {
							formData['country'] = scope.form.country.name;
						}
						else if(key.name=='type_product') {
							$('input[name=type_product]:checked').each(function() {
								var inputValue = $(this).val().toLowerCase();
								if(!formData['type_product'].includes(inputValue)) {
									formData['type_product'].push(inputValue);
								}
							});
						}
						else formData[key.name] = key.value;
					});
					//console.log(formData);
					scope.service.user.profile(userid, formData).then(function(profile) {
						//console.log(profile)
					});
				}else {
					//
					Swal.fire({
						title: 'Warning',
						text: 'Please check the information is correct',
						icon: 'warning',
						heightAuto: false
					});
				}
			}
			
			element.ready(function() {
				$('.tabs').tabs();
				$('.carousel.carousel-slider').carousel({
					fullWidth: true
				});
				scope.service.member.authorized().then(function(user) {
					//console.log(user)
					//scope.$parent.dashboard = true;
					if(user) {
						/* Inquiry */
						scope.service.user.inquiry(user.userid).then(function(enquiry) {
							scope['enquiry'] = enquiry;
						})
						/* Profile */
						userid = user.userid;
						scope.service.user.profile(user.userid).then(function(profile) {
							//console.log(profile)
							$.each(profile, function(key, value) {
								switch(key) {
									case 'type_product':
										$('#'+key+' input').each(function() {
											if($.inArray($(this).val(), value) >-1) {
												$(this).prop('checked', true);
											}
										});
										break;
									default:
										$('#'+key).val(value)
								}
								
							})
						});
					}
				});
			});
			//
			scope.changepasswd = function()
			{
				scope.service.member.passwd($('#current_password').val()).then(function(result) {
					//
					//console.log(result)
					if(result) {
						//console.log($('#new_password').val())
						if($('#new_password').val() !='' && $('#new_password').val() === $('#confirm_password').val()) {
							scope.service.member.passwd($('#new_password').val(), true).then(function(data) {
								//console.log(data)
								scope['card_password'] = 'complete';
							});
						} else {
							$('#new_password').addClass('required');
							$('#confirm_password').addClass('required');
						}
					} else {
						$('#current_password').addClass('required');
					}
				});
			}
		}
	}
}])
.directive('inquiries', ['$routeParams', function($routeParams) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			//
			scope.type = $routeParams.type;
			scope.service.app.enquiry($routeParams.id).then(function(inquiry) {
				console.log(inquiry)
				scope.inquiry = inquiry;
			});
			console.log(scope.type);
		}
	}
}])

/* Form */
.directive('formHelper', ['$window',function($window) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			attrs.$observe('formHelper', function(text) {
				var helper = scope.helper;
				if(text) {
					if(!helper.hasOwnProperty('type')) {
						helper.title = 'Warning';//'มีบางอย่างผิดพลาด';
						helper.type = 'warning';
					}
					Swal.fire({
						title: helper.title,
						html: text,
						icon: helper.type,
						confirmButtonText: 'OK',
						// 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('formValidate', ['$window',function($window) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			/* Validation Form */
			scope.validateForm = function(id) {
				var status = false;
				var validate = 0;
				
				// validate input
				var formCheck = angular.element(id).find('input');
				angular.forEach(formCheck, function(input) {
					var $input = angular.element(input);
					if($input.prop('required') && $input.val() =='') {
						validate++;
					}
				});
				
				// validate select
				formCheck = angular.element(id).find('select');
				angular.forEach(formCheck, function(input) {
					var $input = angular.element(input);
					if($input.prop('required') && $input.val() == null) {
						validate++;
					}
				});
				
				// validate radio
				formCheck = angular.element(id).find('input[type=radio]');
				var inputRadio = [];
				angular.forEach(formCheck, function(input) {
					var nameInput = angular.element(input).attr('name');
					//
					if(!inputRadio.includes(nameInput)) {
						inputRadio.push(nameInput);
					}
				});
				angular.forEach(inputRadio, function(input) {
					if(!$('input[name='+input+']').is(':checked')) {
						validate++;
					}
				});
				
				// validate checkbox
				formCheck = angular.element(id).find('input[type=checkbox]');
				var inputCheckbox = [];
				angular.forEach(formCheck, function(input) {
					var nameInput = angular.element(input).attr('name');
					
					if(!inputCheckbox.includes(nameInput)) {
						inputCheckbox.push(nameInput);
					}
				});
				angular.forEach(inputCheckbox, function(input) {
					if(!$('input[name='+input+']').is(':checked')) {
						validate++;
					}
				});
				
				// validate username
				if(angular.element(id).find('input[name=username]').length) {
					var username = $('input[name=username]').val();
					var pattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
					
					if (pattern.test(username) == false) {
						scope.alert_text = 'Invalid email format';
						validate++;
					}
				}
				
				// validate password
				if(angular.element(id).find('input[name=password]').length) {
					//
					var password = $('input[name=password]').val();
					var confirm_password = $('input[name=confirm_password]').val();
					//
					if(password.length < 8 || confirm_password < 8) {
						scope.alert_text = 'Please set a password according to the specified conditions';
						validate++;
					}
					
					if(password != confirm_password) {
						scope.alert_text = 'Passwords do not match';
						validate++;
					}	
				}
				
				//
				if(validate == 0) status = true;
				return status;
			}
			
			/* Form Condition */
			// limit length input
			scope.limitLength = function(event, limit) {
				var char = String.fromCharCode(event.which);
				var length = event.target.value.length;
			
				if (length >= limit || !(/[0-9]/.test(char))) {
					event.preventDefault();
				}
			}
			// only english characters
			scope.onlyEnglishCharacters = function(e) {
				var orgi_text="ๅภถุึคตจขชๆไำพะัีรนยบลฃฟหกดเ้่าสวงผปแอิืทมใฝ๑๒๓๔ู฿๕๖๗๘๙๐ฎฑธํ๊ณฯญฐฅฤฆฏโฌ็๋ษศซฉฮฺ์ฒฬฦ";
				var chk_text = e.target.value.split("");
				chk_text.filter(function(s) {        
					if(orgi_text.indexOf(s) != -1){
						e.target.value = e.target.value.replace(RegExp(s, "g"),'');
					}           
				}); 
			}
			// only thai characters
			scope.onlyThaiCharacters = function(e) {
				var orgi_text="ๅภถุึคตจขชๆไำพะัีรนยบลฃฟหกดเ้่าสวงผปแอิืทมใฝ๑๒๓๔ู฿๕๖๗๘๙๐ฎฑธํ๊ณฯญฐฅฤฆฏโฌ็๋ษศซฉฮฺ์ฒฬฦ";
				var chk_text = e.target.value.split("");
				chk_text.filter(function(s) {        
					if(orgi_text.indexOf(s) == -1){
						e.target.value = e.target.value.replace(RegExp(s, "g"),'');
					}           
				}); 
			}
			$(":input").on("keyup", function(e) {
				var orgi_text="<>";
				var chk_text = e.target.value.split("");
				chk_text.filter(function(s) {        
					if(orgi_text.indexOf(s) != -1){
						e.target.value = e.target.value.replace(RegExp(s, "g"),'');
					}           
				}); 
			})
			//
		}
	}
}])
.directive('signup', ['$location', function($location) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			//
			scope.alert_text = 'Please check the information is correct';
			
			/* Dropdown Country */
			scope.service.app.country().then(function(data) {
				scope.country = data;
				// console.log(scope.country);
			});
			
			/* Submit Form */
			scope.signup = function() {
				var formId = '#signup_form';
				
				if(scope.validateForm(formId)) {
					var registerData = {};
					//
					$.each($(formId).serializeArray(), function(index, key) {
						if(key.name=='country') {
							registerData['country'] = scope.form.country.name;
						}else registerData[key.name] = key.value;
					});
					// console.log(registerData);
					scope.service.member.signup(registerData).then(function(data) {
						//console.log(data)
						if(data.userid) {
							scope.card_signup = 'complete';
							
						} else {
							scope.helper = data;
							//$location.path('/dashboard')
						}
					});
					//
					var file = $('#profile')[0].files[0];
					var formdata = new FormData();
					formdata.append('file', file);
					formdata.append('info', registerData);
					
					// console 
					// for(var pair of formdata.entries()) {
					//    //console.log(pair[0]+ ', '+ pair[1]); 
					// }
					//
					// scope.card_signup = 'complete';
				}else {
					//
					Swal.fire({
						title: 'Warning',
						text: scope.alert_text,
						icon: 'warning',
						heightAuto: false
					});
					scope.alert_text = 'Please check the information is correct';
				}
			}
			
			/* Preview Profile */
			$('#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]);
			});
			//
		}
	}
}])
.directive('formServiceRequest', ['$routeParams', '$location', function($routeParams, $location) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			var sellerId = $routeParams.id;
			// console.log(sellerId);
			
			scope.service.app.seller(sellerId).then(function(data) {
				scope.creative_hub = data;
				// console.log(scope.creative_hub);
				
				// if(!scope.creative_hub) {
				// 	$location.path('/creative-hub')
				// }
			});
			
			/* Submit Function */
			scope.submit = function() {
				var formId = '#form_service_request';
				
				if(scope.validateForm(formId)) {
					var formData = {};
					//formData['user_id'] = '';
					formData['seller_id'] = sellerId;
					//
					$.each($(formId).serializeArray(), function(index, key) {
						formData[key.name] = key.value;
					});
					console.log(formData);
					//
					scope.service.member.authorized().then(function(authorized) {
						scope.service.user.enquiry(formData, authorized.userid).then(function(inquiry) {
							if(inquiry.uuid) {
								scope.scrollToTop();
								scope.complete = true;
								element.find('.card-banner-title').html('THANK YOU');
								element.find('.card-banner-brief').html('We will receive you request, process it and answer you within 24 hours regarding to following activities.');
							}
						});
					});
				} else {
					Swal.fire({
						title: 'Warning',
						text: 'Please check the information is correct',
						icon: 'warning',
						heightAuto: false
					});
				}
			}
			//
		}
	}
}])
.directive('formServiceProcurement', ['$routeParams', '$window', function($routeParams, $window) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			scope.service.app.creative().then(function(data) {
				console.log(data)
				scope.creative_hub = data;
			});
			/* Submit Function */
			scope.submit = function() {
				var formId = '#form_service_procurement';
				
				if(scope.validateForm(formId)) {
					var formData = {};
					formData['user_id'] = '';
					formData['type_service'] = [];
					//
					$.each($(formId).serializeArray(), function(index, key) {
						if(key.name=='type_service') {
							$('input[name=type_service]:checked').each(function() {
								var inputValue = $(this).val().toLowerCase();
								if(!formData['type_service'].includes(inputValue)) {
									formData['type_service'].push(inputValue);
								}
							});
						} else formData[key.name] = key.value;
					});
					//console.log(formData);
					//
					scope.service.member.authorized().then(function(authorized) {
						scope.service.user.enquiry(formData, authorized.userid).then(function(inquiry) {
							if(inquiry.uuid) {
								scope.scrollToTop();
								scope.complete = true;
								element.find('.card-banner-title').html('THANK YOU');
								element.find('.card-banner-brief').html('We will receive you request, process it and answer you within 24 hours regarding to following activities.');
							}
						});
					});
					// check user token
					// if(scope.service.user.token()) {
					// 	scope.scrollToTop();
					// 	scope.complete = true;
					// 	element.find('.card-banner-title').html('THANK YOU');			
					// 	element.find('.card-banner-brief').html('We will receive you request, process it and answer you<br />within 24 hours regarding to following activities.');
					// } else {
					// 	$window.location.href = '/signin';
					// }
				} else {
					Swal.fire({
						title: 'Warning',
						text: 'Please check the information is correct',
						icon: 'warning',
						heightAuto: false
					});
				}
			}
			//
		}
	}
}])
.directive('formRegistration', ['$routeParams', '$window', '$timeout', function($routeParams, $window, $timeout) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			const id = $routeParams.id;
			// console.log(id);
			
			scope.service.app.form(id).then(function(form) {
				if(form) {
					//$('#form-render').empty().append(form)
					scope.form = form;
				}
			});
			
			/* Dropdown Country */
			scope.service.app.country().then(function(data) {
				scope.country = data;
			});
			
			/* Submit Function */
			scope.submitForm = function() {
				var formId = '#register_form';
				
				if(scope.validateForm(formId)) {
					var formData = {};
					//
					$.each($(formId).serializeArray(), function(index, key) {
						if(key.name=='country') {
							formData[key.name] = key.value;
						}else formData[key.name] = key.value;
					});
					// console.log(formData);
					
					scope.service.app.form_apply(id, formData).then(function(response) {
						console.log(response);
						if(response) {
							Swal.fire({
								title: 'Alert',
								text: 'Save Data Successfully',
								icon: 'success',
								showConfirmButton: false,
								heightAuto: false
							});
							
							$timeout(function() {
								$window.location.href = 'https://creativethailand.net/resource/e-catalog/Slow_Hand_2023_E-Catalog.pdf';
							}, 2000);
						}
					});
				} else {
					Swal.fire({
						title: 'Warning',
						text: 'Please check the information is correct',
						icon: 'warning',
						heightAuto: false
					});
				}
			}
			//
		}
	}
}])

/* Member */
.directive('member', ['$window','$location', '$cookies', function($window, $location, $cookies) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			scope.formInput = function() {
				var valid = true;
				//var $forminput = angular.element('.form-input').find('input');
				angular.forEach(angular.element('.form-input').find('input'), function(input) {
					//console.log(input)
					if(angular.element(input).val() =='') {
						angular.element(input).addClass('invalid');
						valid = false;
					}
				});
				return valid;
			}
			//
			scope.signin = function() {
				console.log('signin')
				if(scope.formInput()) {
					scope.service.member.signin(angular.element('.form-input').find('input')).then(function(data) {
						console.log(data)
						if(data.token) {
							$window.location = '/#'+data.token;
						} else {
							scope.helper = data;
							//console.log(scope.helper)
						}
					});
					
					// set remember me function in sign in
					if($('input[name="remember"]:checked').is(":checked")) {
						var expireDate = new Date();
						expireDate.setDate(expireDate.getDate() + 360);
						
						// encoding
						var username = btoa($('#username').val());
						var password = btoa($('#password').val());
						//
						document.cookie = "username_session="+ username +"; expires=" + expireDate + "; path=/";
						document.cookie = "password_session="+ password +"; expires=" + expireDate + "; path=/";
					}
				}			
			}
			
			// get remember me function in sign in
			if($cookies.get('username_session')) {
				// decoding
				var username = atob($cookies.get('username_session'));
				var password = atob($cookies.get('password_session'));
				//
				$('input[name="username"]').val(username);
				$('input[name="password"]').val(password);
				$('label').addClass('active');
			}
			//
		}
	}
}])
.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) {
					//console.log(authorized)
					$('#member').empty();
					//var target = $location.path();
					if(authorized.permission) {
						//$location.path('/'+authorized.permission);//.hash(null)
					}
					//$location;
					//$location.hash(null).path(scope.path);
					var $btLogout = $('<a/>').text('LOGOUT').addClass('btn-flat white-text'); 
					$btLogout.on('click', function() {
						scope.logout();
					});
					$('#member').append($('<li/>').append($('<a/>').text(authorized.user.fullname).addClass('white-text btn-flat z-depth-1').attr('href', '/dashboard')));
					$('#member').append($('<li/>').append($btLogout));
					//$('#member').prepend($('<a/>').text(authorized.user.fullname).addClass('black-text btn-flat z-depth-1'));
					//
				}
			});
			/*	
			*/
			//console.log($location.path());
		}
	}
}])
.directive('userProfile', ['$location', function($location) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			var profiled = true;
			scope.service.member.authorized().then(function(user) {
				//console.log(user)
				if(user) {
					//userid = user.userid;
					scope.service.user.profile(user.userid).then(function(profile) {
						console.log(profile)
						$.each(profile, function(key, value) {
							if(value =='') {
								profiled = false;
							}
						});
						//
						if(!profiled) {
							$location.path('/dashboard');
						} else {
							scope['profile'] = profile;
						}
					});
				}
			});
		}
	}
}])

/* seller */
.directive('sellerAuthorized', ['$window','$location', function($window, $location) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			scope.service.seller.authorized().then(function(authorized) {
				// console.log(authorized)
				if(authorized) {
					scope.authorized = authorized;
					const member_sso = JSON.parse(authorized.sub_member).length != 0 ? JSON.parse(authorized.sub_member) : JSON.parse(authorized.member);
					// console.log(member_sso);
					
					element.empty();
					//
					var $space = $('<li><a class="light">|</a></li>')
					var $name = $('<a/>').text(authorized.user_name ? authorized.user_name : member_sso.nameTh + ' ' + member_sso.lastnameTh);
					var $logout = $('<a/>').text('ออกจากระบบ');
					element.append($('<li/>').append($name)).append($('<li/>').append($logout));
					//
					$name.on('click', function() {
						//$location.path('/dashboard/th');
						$window.location.href = '/dashboard/th';
					});
					//
					$logout.on('click', function() {
						scope.service.seller.logout().then(function() {
							scope.service.seller.clear().then(function() {
								$window.location.href = '/th';
							});
						});
					});
					//
				}
			});
		}
	}
}])
.directive('homeSeller', ['$window','$location', function($window, $location) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			scope.service.seller.authorized().then(function(authorized) {
				if(authorized) {
					scope.authorized = authorized;
				}
			});
			//
		}
	}
}])
.directive('dashboardSeller', ['$timeout', '$window', function($timeout, $window) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{	
			//
			let status = 'create';
			const selectedImages = [];

			element.ready(function() {
				$('.tabs').tabs();
				$('.carousel.carousel-slider').carousel({
					fullWidth: true
				});

				/* Profile */
				scope.service.seller.authorized().then(function(authorized) {
					// console.log(authorized);
					scope.authorized = authorized;
					if(authorized) {
						const taxid = authorized.taxid;
						const member_sso = JSON.parse(authorized.sub_member).length != 0 ? JSON.parse(authorized.sub_member) : JSON.parse(authorized.member);
						const company_sso = JSON.parse(authorized.company);
						const address_en_sso = JSON.parse(authorized.address_en);
						// console.log(member_sso);
						// const fullname = authorized.user_name;
						// const nameArray = fullname.split(" ");
						//
						if(member_sso) {
							$('#seller_firstname').val(member_sso.nameTh);
							$('#seller_lastname').val(member_sso.lastnameTh);
							$('#seller_phone').val(member_sso.tel);
							$('#seller_email').val(member_sso.email);
						}
						if(company_sso) {
							$('#company_name_en').val(company_sso.nameEn);
							$('#company_name_th').val(company_sso.nameTh);
							$('#company_contact_email').val(company_sso.email);
						}
						if(address_en_sso) {
							$('#company_address').val(address_en_sso.address);
						}
						$('#taxid').val(taxid);
						
						/* Get Seller Info */
						if(taxid) {
							scope.service.seller.info(taxid).then(function(response) {
								// console.log(response);
								
								if(response) {
									status = 'edit';
									//
									const companyInfo = response;
									const formId = '#company_info';
									//
									$.each(companyInfo, function(key, value) {
										switch(key) {
											case 'company_address_en':
												const company_address = value.split(",");
												//
												$('#company_address').val(company_address[0]);
												$('#company_city').val(company_address[1].replace(/\s/g, ""));
												// $('#company_country').val(company_address[2]);
												break;
											case 'company_brief':
												document.getElementById('company_brief').innerHTML = value;
												break;
											case 'creative_hub':
												const type = JSON.parse(value);
												//
												$('[name=type_product]').each(function() {
													if($.inArray(parseInt($(this).val()), type) >-1) {
														$(this).trigger('click');
													}
												});
												break;
											case 'seller_thumbnail': 
												$('#company_img_thumbnail').removeAttr('required');
												$('#img_company_img_thumbnail').attr('src', '/public/uploads/'+value); 
												break;
											case 'company_logo': 
												$('#company_img_logo').removeAttr('required');
												$('#img_company_img_logo').attr('src', '/public/uploads/'+value); 
												break;
											case 'company_cover': 
												$('#company_img_cover').removeAttr('required');
												$('#img_company_img_cover').attr('src', '/public/uploads/'+value); 
												break;
											case 'company_banner': 
												$('#company_img_banner').removeAttr('required');
												$('#img_company_img_banner').attr('src', '/public/uploads/'+value); 
												break;
											default:
												$('#'+key).val(value);
										}
									});
									
									// preview portfolio
									const company_portfolio = companyInfo.portfolio;
									// console.log(company_portfolio);
									const imagePreview = $('#image_preview_zone');
									angular.forEach(company_portfolio, function(item) {
										const $previewImage = $('<div/>').addClass('preview-image');
										const $image = $('<img/>').attr('src', '/public/uploads/' + item.port_img);
										const $btn = $('<div/>').addClass('delete-button').text('×');
										//
										$btn.on( "click", function() {
											//
											Swal.fire({
												title: 'Warning',
												text: "Are you sure to delete this?",
												icon: 'warning',
												showCancelButton: true,
												confirmButtonColor: '#3085d6',
												cancelButtonColor: '#d33',
												confirmButtonText: 'Confirm',
												cancelButtonText: 'Cancel'
											}).then((result) => {
												if (result.value) {
													//
													scope.service.seller.portfolio_delete(item.port_id).then(function(response) {
														// console.log(response);
														if(!response.error) {
															//
															const Toast = Swal.mixin({
															  toast: true,
															  position: 'top-end',
															  showConfirmButton: false,
															  timer: 3000,
															  timerProgressBar: true,
															  didOpen: (toast) => {
																toast.addEventListener('mouseenter', Swal.stopTimer)
																toast.addEventListener('mouseleave', Swal.resumeTimer)
															  }
															})
															
															Toast.fire({
															  icon: 'success',
															  title: 'Successfully deleted'
															})
														}
														//
														$previewImage.remove();
													});
												}
											})
										});
										//
										$previewImage.append($image).append($btn);
										imagePreview.append($previewImage);
									});
								}
								//
							});
						}
					} else if(authorized == null) {
						$window.location.href = '/th';
					}
				});
				
				// Get CreativeHub
				scope.service.app.creative().then(function(response) {
					scope.creative_hub = response;
					// console.log(response);
				});

				/* Upload Thumbnail Profile */
				$('#btn_upload_profile').on('click', function() {
					$('#seller_img_thumbnail').click();
				});

				/* Input Drag and Drop Image */
				const dropZone = $('#drop_zone');
				const fileInput = $('#file_input');
				const imagePreview = $('#image_preview_zone');
				const btnChoose = $('#btn_choose');

				btnChoose.on('click', function() {
					fileInput.click();
				});

				dropZone.on('dragover', function(e) {
					e.preventDefault();
					$(this).addClass('drag-over');
				});

				dropZone.on('dragleave', function() {
					$(this).removeClass('drag-over');
				});

				dropZone.on('drop', function(e) {
					e.preventDefault();
					$(this).removeClass('drag-over');
					const files = e.originalEvent.dataTransfer.files;
					handleFiles(files);
					// console.log(selectedImages);
				});

				fileInput.on('change', function() {
					const files = this.files;
					handleFiles(files);
					// console.log(selectedImages);
				});

				imagePreview.on('click', '.delete-button.delete-portfolio', function() {
					const previewImage = $(this).closest('.preview-image.preview-portfolio');
					const index = imagePreview.children('.preview-image.preview-portfolio').index(previewImage);
			
					if (index !== -1) {
						selectedImages.splice(index, 1);
						previewImage.remove();
					}
					// console.log(selectedImages);
				});

				function handleFiles(files) {
					for (const file of files) {
						if (file.type.match('image.*')) {
							const reader = new FileReader();
			
							reader.onload = function(e) {
								const image = `<div class="preview-image preview-portfolio">
												<img src="${e.target.result}" alt="Preview">
												<div class="delete-button delete-portfolio">×</div>
											</div>`;
								imagePreview.append(image);
								selectedImages.push(file);
							};
			
							reader.readAsDataURL(file);
						}
					}
				}
				//
			});

			/* Submit Form */
			scope.submitFormCompany = function() {
				const formId = '#company_info';
				//
				if(scope.validateForm(formId)) {

					// check upload image in portfolio
					if(selectedImages.length || status == 'edit') {
						let formData = new FormData();
						// let profile = {};
						let type_product = [];
						//
						$.each($(formId).serializeArray(), function(index, key) {
							// if(key.name=='company_country' && status=='create') {
							// 	formData.append('company_country', scope.form.company_country.name);
							// }
							if(key.name=='type_product') {
								$('input[name=type_product]:checked').each(function() {
									var inputValue = $(this).val().toLowerCase();
									if(!type_product.includes(inputValue)) {
										type_product.push(inputValue);
									}
								});
							}
							else formData.append(key.name, key.value);
						});

						// get image file input
						// formData.append('seller_img_thumbnail', $('#seller_img_thumbnail')[0].files[0]);
						formData.append('company_img_thumbnail', $('#company_img_thumbnail')[0].files[0]);
						formData.append('company_img_logo', $('#company_img_logo')[0].files[0]);
						formData.append('company_img_cover', $('#company_img_cover')[0].files[0]);
						formData.append('company_img_banner', $('#company_img_banner')[0].files[0]);
						formData.append('type_product', type_product);
						
						for(let i=0; i<selectedImages.length; i++) {
							formData.append('company_portfolio[]', selectedImages[i]);
						}

						// console.log(status);
						if(status=='create') {
							console.log('create');
							//
							scope.service.seller.company(formData).then(function(response) {
								// console.log(response);
								if(!response.error) {
									//
									let timerInterval
									Swal.fire({
										title: 'Alert',
										html: 'Data saved successfully<br />Please wait for the official to check.',
										timer: 2000,
										timerProgressBar: true,
										didOpen: () => {
											Swal.showLoading()
											const b = Swal.getHtmlContainer().querySelector('b')
											timerInterval = setInterval(() => {
												b.textContent = Swal.getTimerLeft()
											}, 100)
										},
										willClose: () => {
											clearInterval(timerInterval)
										}
									}).then((result) => {
										$window.location.reload();
									})
								}
							});
						} else if(status=='edit') {
							console.log('edit');
							//
							scope.service.seller.update(formData).then(function(response) {
								// console.log(response);
								if(!response.error) {
									//
									let timerInterval
									Swal.fire({
										title: 'Alert',
										text: 'Data saved successfully',
										timer: 2000,
										timerProgressBar: true,
										didOpen: () => {
											Swal.showLoading()
											const b = Swal.getHtmlContainer().querySelector('b')
											timerInterval = setInterval(() => {
												b.textContent = Swal.getTimerLeft()
											}, 100)
										},
										willClose: () => {
											clearInterval(timerInterval)
										}
									}).then((result) => {
										$window.location.reload();
									})
								}
							});
						}
						//
					} else {
						Swal.fire({
							title: 'Warning',
							text: 'Please upload at least 1 image in your portfolio',
							icon: 'warning',
							heightAuto: false
						});
					}

				} else {
					//
					Swal.fire({
						title: 'Warning',
						text: 'Please select type of product or service',
						icon: 'warning',
						heightAuto: false
					});
				}
			}

			/* Dropdown province */
			scope.service.app.provinces().then(function(data) {
				// console.log(data)
				scope.provinces = data;
			});
			//

			/* Input Priview Image */
			$('.input-preview').on("change", function(event) {
				const id = $(this).attr('id');
				const reader = new FileReader();
				reader.onload = function() {
					$( "#img_"+id ).each(function() {
						$(this).attr('src', reader.result);
					});
				}
				reader.readAsDataURL(event.target.files[0]);
			});
			//
		}
	}
}])