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

				attrs.$observe('prelaunch', function(banner) {
					// console.log(banner);
					if (banner) {
						const $bannerIntro = element.find('.banner-intro');
						$bannerIntro.css('background-image', `url('/public/uploads/banner/${ scope.banner_landing.banner_image }')`);
						
						if (scope.banner_landing.banner_url !== null) {
							$bannerIntro.css('cursor', 'pointer');
							$bannerIntro.click(function() {
								$window.location.href = scope.banner_landing.banner_url;
							});
						}
					}
				});

				// 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(response) {
						// console.log(response);
						const articles = response;
						if(articles.length) {
							angular.forEach(articles, 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);
						}
					});
					// 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(response) {
						// console.log(response)
						if(response) {
							scope.article = response;
						}
					});
					// 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) {
							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');
								
								const 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(scope.creative_maker.related, function(company) {
									var $col = $('<div/>').addClass('col s12 m6 l6');
									var $link = $('<a/>').attr('href', '/creative-hub/view/' + company.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').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 contact
									if (company.contact) {
										angular.forEach(contact, function(type) {
											if (company.contact[type.key]) {
												var $li = $('<li/>');
												var $link = $('<a/>').attr('href', company.contact[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)));
								});
	
								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]);
				});
				//
			}
		}
	}])