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

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

/* Layouts */
.directive('headBar', ['$location', '$timeout', function($location, $timeout) {
	return {
		restrict: 'A',
		templateUrl: 'templates/layouts/header.modernbangkok',
		link: function(scope, element, attrs) {
			//
			scope.menu = [
				{ "title": "หน้าหลัก", "path": "/", "state": "1" },
				{ "title": "นโยบาย", "path": "/policy", "state": "1" },
				{ "title": "บทความ", "path": "/article", "state": "1" },
				{ "title": "ผู้สมัคร", "path": "/candidates", "state": "0" },
				{ "title": "ความเคลื่อนไหว", "path": "/news", "state": "1" },
				{ "title": "สมัครอาสา", "path": "/volunteer", "state": "1" },
				{ "title": "เกี่ยวกับเรา", "path": "/about-us", "state": "1" },
				{ "title": "ติดต่อเรา", "path": "/contact-us", "state": "1" }
			];
			
			// scope.$on('$viewContentLoaded', function(event, viewConfig) {
				$timeout(function() { 
					scope.navigationChange();
				}, 600);
			// });
			
			scope.$on( "$routeChangeStart", function(event, route, current) {
				scope.navigationChange();
			});
			
			// navigation background change
			scope.navigationChange = function() {
				// $('.header-page').css('height', $('header').height());
				var path = $location.path().split("/");
				//
				// if($location.path() == '/' || path[1] == 'candidate') {
				if($location.path() == '/') {
					// $('header').css('position', 'absolute');
					$('nav').css('color', 'white');
				}else {
					// $('header').css('position', 'relative');
					$('nav').css('color', 'black');
				}
			}
			
			$(document).ready(function(){
				$('.sidenav').sidenav();
			});
			//
		}
	};
}])
.directive('sitemap', [function() {
	return {
		restrict: 'A',
		templateUrl: '/templates/layouts/sitemap.modernbangkok',
		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('copyright', [function() {
// 	return {
// 		restrict: 'C',
// 		templateUrl: '/templates/layouts/copyright.modernbangkok'
// 	};
// }])
.directive('cookiePolicy', [function() {
	return {
		restrict: 'C',
		templateUrl: '/templates/layouts/cookie.modernbangkok',
	};
}])

/* elements */
.directive('image', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			attrs.$observe('image', function(image) 
			{
				var img = new Image();
				img.onload = function() {
					var ratio = this.height / this.width;
					element.css('padding-top', ratio *100+'%');
					element.css('position','relative');
				}
				img.src = 'https:' + image;
				element.removeAttr('image');
				element.css('background-image', "url('"+image+"')").addClass('cover');
				//
				element.removeAttr('image');
			});
		}
	}
}])
.directive('background', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			attrs.$observe('background', function(image)
			{
				var img = new Image();
				img.onload = function() {
					var height = (this.height / this.width) * 100;
					if(attrs.height) {
						element.css('height', attrs.height + 'px');
					}else {
						element.css('height', height + 'vw');
					}
				}
				
				if (image.indexOf("http://") != 0 || image.indexOf("https://") != 0) {
					img.src = 'https:' + image;
				}
				img.src = image;
				element.css("background-image", "url('"+image+"')");
				
				// background position
				if(attrs.position == 'center') {
					element.addClass('bg-cover-center');
				}else {
					element.addClass('background-image width');
				}
				element.removeAttr('background');
			});
		}
	}
}])
.directive('icon', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			attrs.$observe('icon', function(image) 
			{
				var $img = $('<img/>');
				var img = new Image();
				img.onload = function() {
					$img.attr('src', image);
					element.append($img);
				}
				img.src = image;
				element.removeAttr('icon');
			});
		}
	}
}])
.directive('aos', ['$timeout', function($timeout) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{

			$timeout(function() {
				AOS.init({
					disable: 'mobile'
				});
			}, 300);
			//
		}
	}
}])
.directive('portfolio', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			attrs.$observe('portfolio', function(id) {
				if(id) {
					/* Portfolio */
					scope.service.app.portfolio(id).then(function(respone) {
						var portfolio = respone.data;
						// console.log(portfolio);
						
						if(portfolio.length) {
							var $container = $('<div/>').addClass('container');
							
							// 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);
							});
							$container.append($carousel.append($btnPrev).append($btnNext));
							element.append($container);
							//
							
							element.ready(function() {
								// carousel
								$carousel.carousel({
									fullWidth: true
								});
								
								$carousel.find('.btn-prev').click(function(e) {
									e.preventDefault();
									e.stopPropagation();
									$carousel.carousel('prev');
								});
								
								$carousel.find('.btn-next').click(function(e) {
									e.preventDefault();
									e.stopPropagation();
									$carousel.carousel('next');
								});
							});
							//
						}
					});
				}
				//
			});
		}
	}
}])
.directive('video', ['$timeout', function($timeout) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			attrs.$observe('video', function(id) {
				if(id) {
					/* Video & Media */
					scope.service.app.media(id).then(function(respone) {
						var media = respone.data;
						// console.log(media);

						if(media.length) {
							var videoHight = 675;
							if(scope.mobile) videoHight = 200;
							//
							var $headerTitle = $('<h1/>').addClass('card-title fc-flexica semi-bold margin-0').text('คลิป');
							var $videoPreview = $('<div/>').addClass('video-preview');
							// var $programVideo = $('<div/>').addClass('program-video owl-carousel');
							var $programVideo = $('<div/>').addClass('program-media row');
							var $container = $('<div/>').addClass('container');
							
							$timeout(function() {
								scope.previewVideo(media[0].url);
								//
								angular.forEach(media, function(item) {
									var url = item.url;
									// var $col = $('<div/>').addClass('item relative cursor-pointer overflow-hidden');
									// var $backgroundBlack = $('<div/>').addClass('background-black').css('opacity', '0.5').css('z-index', '2');
									// var $icon = $('<img/>').addClass('card-icon absolute-center').attr('src', '/public/img/icon/icon-play-video.png');
									// var $thumbnail = $('<img/>').addClass('card-thumbnail black').attr('src', scope.loadThumbnail(item.thumbnail, url));
									var $col = $('<div/>').addClass('col s6 m4 l4');
									var $card = $('<div/>').addClass('card-video relative cursor-pointer overflow-hidden');
									var $thumbnail = $('<img/>').addClass('card-thumbnail').attr('src', scope.loadThumbnail(item.thumbnail, url));
									var $backgroundBlack = $('<div/>').addClass('background-black').css('opacity', '0.5').css('z-index', '2');
									var $icon = $('<img/>').addClass('card-icon absolute-center').attr('src', '/public/img/icon/icon-play-video.png');
									//
									$col.on('click', function() {
										scope.previewVideo(url);
									});
									$card.append($thumbnail).append($backgroundBlack).append($icon);
									$programVideo.append($col.append($card));
								});
								
								// element.ready(function() {
								// 	// owl carousel
								// 	$programVideo.owlCarousel({
								// 		loop: false,
								// 		margin: 10,
								// 		nav: false,
								// 		responsive:{
								// 			0:{
								// 				items: 2
								// 			},
								// 			600:{
								// 				items: 3
								// 			},
								// 			1000:{
								// 				items: 3
								// 			}
								// 		}
								// 	});
								// });
							}, 1000);
							
							scope.previewVideo = function(videoUrl) {
								$videoPreview.empty();
								//
								// $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', videoHight).attr('frameborder', '0').attr('allowfullscreen', 'allowfullscreen');
										$videoPreview.append($iframe);
									}
									else if(videoUrl.search("facebook") != -1 || videoUrl.search("fb") != -1) {
										var url = 'https://services.dinsor.co.th/app/client/modernbangkok/resource/fb-plugin/fb-player?url=' + videoUrl + '&height=' + videoHight;
										var $video = $('<iframe scrolling="no" frameborder="0" allow="fullscreen" />');
										$video.css({width:'100%', height: videoHight + 'px', border:'none'});
										$video.attr('src', url);
										$videoPreview.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.append($source);
										$videoPreview.append($video);
									}
								// }, 1000);
							}
							
							scope.loadThumbnail = function(image, url) {
								var thumbnail = ' ';
								//
								if(image.search("null") == -1) {
									thumbnail = image;
								} 
								else {
									if(url.search("youtube") != -1) {
										var url = new URL(url);
										var videoId = url.searchParams.get("v");
										//
										thumbnail = 'https://img.youtube.com/vi/'+ videoId +'/sddefault.jpg';
									}
									else if(url.search("facebook") != -1 || url.search("fb") != -1) {
										
									}	
								}
								return thumbnail;
							}
							//
							$container.append($headerTitle).append($videoPreview).append($programVideo);
							element.append($container);
						} else {
							element.remove();
						}
					});
				}
				//
			});
		}
	}
}])
.directive('feed', ['$timeout', function($timeout) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			// $.ajax({
			// 	url: "https://graph.facebook.com/v16.0/335978833560634/feed?fields=permalink_url&access_token=e45d9439d94a530e5af6d39ceaf274d0",
			// 	method: "GET",
			// 	dataType: "json",
			// 	success: function(response) {
			// 		console.log(response);
			// 	},
			// 	error: function(error) {
			// 		console.log(error.responseJSON.error.message);
			// 	}
			// });
			
			attrs.$observe('feed', function(id) {
				if(id) {
					/* Feed Facebook */
					scope.service.app.feed(id).then(function(respone) {
						const feed = respone.data;
						// console.log(feed);

						if(feed.length) {
							angular.forEach(feed, function(item) {
								const height = item.feed_height;
								var urlObject = new URL($(item.feed_script).first().attr('src'));
								var urlSearchParams = urlObject.searchParams;
								var postUrl = urlSearchParams.get('href');
								// console.log(postUrl);
								//
								var url = 'https://services.dinsor.co.th/app/client/modernbangkok/resource/fb-plugin/fb-posts?url='+postUrl;
								var $iframe = $('<iframe scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" />');
								$iframe.css({width:'100%', height: height + 'px', border:'none', overflow:'hidden'});
								$iframe.attr('src', url);
								//
								element.append($iframe);
							});
						} else {
							element.remove();
						}
					});
				}
				//
			});
		}
	}
}])
.directive('social', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			attrs.$observe('social', function(social) {
				if(social) {
					/* Social */
					var contact = [
						{ "key": "website", "icon": "/public/img/icon/icon-website-black.png" },
						{ "key": "facebook", "icon": "/public/img/icon/icon-facebook-black.png" },
						{ "key": "instagram", "icon": "/public/img/icon/icon-instagram-black.png" },
						{ "key": "twitter", "icon": "/public/img/icon/icon-twitter-black.png" },
						{ "key": "line", "icon": "/public/img/icon/icon-line-black.png" },
						{ "key": "youtube", "icon": "/public/img/icon/icon-youtube-black.png" },
						{ "key": "tiktok", "icon": "/public/img/icon/icon-tiktok-black.png" }
					];
					angular.forEach(contact, function(type) {
						if(scope.candidate.social[type.key]) {
							var $li = $('<li/>');
							var $link = $('<a/>').attr('href', scope.candidate.social[type.key]).attr('target', '_blank');
							var $icon = $('<img/>').attr('src', type.icon);
							$link.append($icon);
							element.append($li.append($link));
						}
					});
				}
			});
		}
	}
}])

/* Web Content */
.directive('bannerCarousel', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			attrs.$observe('bannerCarousel', function(type) {
				//
				scope.service.app.banners(type).then(function(respone) {
					const banners = respone.data;
					// console.log(banners);
					
					if(banners.length) {
						const $carousel = $('<div/>').addClass('carousel carousel-slider');
						//
						angular.forEach(banners, function(item) {
							const $item = $('<a/>').addClass('carousel-item').attr('href', item.url);
							const $image = $('<img/>').attr('src', item.image);
							//
							$item.append($image);
							$carousel.append($item);
							
							const img = new Image();
							img.onload = function() {
								const height = (this.height / this.width) * 100;
								$carousel.css('height', height + 'vw');
							};
							img.src = item.image;
						});
						element.append($carousel);
						
						element.ready(function() {
							// carousel
							$carousel.carousel({
								fullWidth: true,
								indicators: true
							});
							
							// auto next slide banner
							setInterval(function () {
								$carousel.carousel('next');
							}, 7000)
						});
						//
					}
				});
				//
			});
			//
		}
	}
}])
.directive('policy', ['$routeParams', 'ngMeta', function($routeParams, ngMeta) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			var id = $routeParams.id;
			// console.log(id);
			
			scope.service.app.policy(id).then(function(respone) {
				scope.policy = respone.data;
				// console.log(scope.policy);
				
				// setting meta tags dynamically
				if(scope.policy.title) {
					ngMeta.setTitle(scope.policy.title);
				}
				
				if(scope.policy.length == 0) {
					scope.alert('basic', 'warning', 'มีบางอย่างผิดพลาด', 'ไม่พบข้อมูล', '/policy');
				}
			});
			//
		}
	}
}])
.directive('article', ['$routeParams', 'ngMeta', function($routeParams, ngMeta) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			var id = $routeParams.id;
			// console.log(id);
			
			scope.service.app.article(id).then(function(respone) {
				scope.article = respone.data;
				console.log(scope.article);
				
				// article highlight
				scope.article_highlight = [];
				for (let i=0; i<5; i++) {
					if(scope.article[i] != undefined) scope.article_highlight.push(scope.article[i]);
				}
				// console.log(scope.article_highlight);
				
				if(id) {
					// setting meta tags dynamically
					if(scope.article.article_title) {
						ngMeta.setTitle(scope.article.article_title);
					}
					
					if(scope.article.length == 0) {
						scope.alert('basic', 'warning', 'มีบางอย่างผิดพลาด', 'ไม่พบข้อมูล', '/article');
					}
				}
			});
			//
		}
	}
}])
.directive('candidates', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			//
			scope.service.app.candidate().then(function(respone) {
				scope.candidates = respone.data;
				// console.log(scope.candidates);
			});
			//
		}
	}
}])
.directive('committee', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			//
			scope.service.app.committee().then(function(respone) {
				scope.committee = respone.data;
				// console.log(scope.committee);
			});
			//
		}
	}
}])
.directive('news', ['$timeout', '$window', '$routeParams', 'ngMeta', function($timeout, $window, $routeParams, ngMeta) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			//
			const id = $routeParams.id;
			// console.log(id);
			
			scope.service.app.news(id).then(function(respone) {
				scope.news = respone.data;
				// console.log(scope.news);
				
				// setting meta tags dynamically
				if(scope.news.activity_title) {
					ngMeta.setTitle(scope.news.activity_title);
				}
				
				if(_.isUndefined(id)) {
					/* Calendar */
					mobiscroll.setOptions({
						locale: mobiscroll.localeTh,
						theme: 'windows',
						themeVariant: 'light',
						showOuterDays: false
					});
					
					let events = [];
					angular.forEach(scope.news, function(item) {
						const activityStart = new Date(item.activity_start);
						const activityEnd = new Date(item.activity_end);
						// console.log(date);
						events.push({
							start: new Date(activityStart.getFullYear(), activityStart.getMonth(), activityStart.getDate()),
							end: new Date(activityEnd.getFullYear(), activityEnd.getMonth(), activityEnd.getDate()),
							color: '#000000'
						});
					});
					// console.log(events);
					
					const calendarId = '#calendar';
					const agendaId = '#agenda';
					mobiscroll.datepicker(calendarId, {
						controls: ['calendar'],
						display: 'inline',
						onPageLoaded: function (event, inst) {
							// console.log(event);
							const currentMonth = event.month.getMonth();
							const currentYear = event.month.getFullYear();
					
							$(agendaId).empty();
							let countEvent = 0;
							// const agenda = scope.news;
							scope.news.sort((a, b) => new Date(a.activity_start) - new Date(b.activity_start));
							// console.log(agenda);
							angular.forEach(scope.news, function(item) {
								const activity_title = item.activity_title;
								const activity_start = new Date(item.activity_start);
								const activity_end = new Date(item.activity_end);
					
								const date_start = activity_start.getDate();
								const date_end = activity_end.getDate();
								const month_start = activity_start.getMonth();
								const month_end = activity_end.getMonth();
								const year_start = activity_start.getFullYear();
								const year_end = activity_end.getFullYear();
					
								if(year_start==currentYear && year_end==currentYear) {
									if(month_start==currentMonth) {
										const $tr = $('<tr/>');
										const $agendaDate = $('<td/>').addClass('agenda-date center-align');
										const $contentDate = $('<div/>').addClass('content-date');
										const $between = $('<span/>').text(' - ');
										let $date = $('<div/>').addClass('display-flex');
										let $textDate = $('<span/>').addClass('text-date bold').text(date_start);
										let $textMonth = $('<span/>').addClass('text-month semi-bold').text(convertMonthToThai(month_start));
										$date.append($textDate).append($textMonth);
										$contentDate.append($date);
					
										if(date_start!=date_end || month_start!=month_end) {
											$contentDate.append($between);
											$date = $('<div/>').addClass('display-flex');
											$textDate = $('<span/>').addClass('text-date bold').text(date_end);
											$textMonth = $('<span/>').addClass('text-month semi-bold').text(convertMonthToThai(month_end));
											$date.append($textDate).append($textMonth);
											$contentDate.append($date);
										}
										$agendaDate.append($contentDate);
					
										const $agendaActivity = $('<td/>').addClass('agenda-activity');
										const $textActivity = $('<a/>').addClass('text-activity medium').attr('href', '/news/' + item.id).text(decodeHtml(activity_title));
										// $textActivity.click(function() {
										// 	$window.location.href = '/news/' + item.id;
										// });
										$agendaActivity.append($textActivity);
										$tr.append($agendaDate).append($agendaActivity);
										$(agendaId).append($tr);
										countEvent++;
									}
								}
							});
					
							// alert not event
							const $alert = $('#alert_no_event');
							if(countEvent==0) $alert.css('display', 'block');
							else $alert.css('display', 'none');
						},
						onCellClick: function (event, inst) {
							console.log(event)
						},
						marked: events
					});
					
					$timeout(function() {
						let $btnPrev = $('<img/>').addClass('btn-prev absolute hide-on-med-and-down').attr('src', '/public/img/icon/icon-left-arrow.png');
						let $btnNext = $('<img/>').addClass('btn-next absolute hide-on-med-and-down').attr('src', '/public/img/icon/icon-right-arrow.png');
						$btnPrev.click(function() {
							$(calendarId).find('.mbsc-calendar-button-prev').click();
						});
						$btnNext.click(function() {
							$(calendarId).find('.mbsc-calendar-button-next').click();
						});
						$(calendarId).append($btnPrev).append($btnNext);
					}, 100);
				}
			});

			function convertMonthToThai(month) {
				const monthsThai = ["ม.ค.","ก.พ.","มี.ค.","เม.ย.","พ.ค.","มิ.ย.","ก.ค.","ส.ค.","ก.ย.","ต.ค.","พ.ย.","ธ.ค."];
				return monthsThai[month];
			}
			function decodeHtml(text) {
				var str = String(text).replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&quot;/g, '"');
				return String(str).replace(/&amp;nbsp;/g, '&nbsp;').replace(/&amp;ldquo;/g, '“').replace(/&amp;rdquo;/g, '”').replace(/&amp;ndash;/g, '-').replace(/&amp;quot;/g, '"');
			}
			//
		}
	}
}])

/* Form */
.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();
				}
			}
			// valid ID card
			scope.validIdCard = function() {
				var input = $('#id_card_number');
				var id = input.val();
				var disabled = true;
				
				if(id.length >= 13) {
					for (var i = 0, sum = 0; i < 12; i++) {
						sum += parseInt(id.charAt(i)) * (13 - i);
					}
					let mod = sum % 11;
					let check = (11 - mod) % 10;
			
					if (check == parseInt(id.charAt(12))) {
						disabled = false;
						input.removeClass("invalid").addClass("valid");
						scope.alert_helper = false;
					}else {
						disabled = true;
						input.removeClass("valid").addClass("invalid");
						scope.alert_helper = true;
					}
				}
				return disabled;
			}
			// 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('formVolunteer', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{

			/* Select District */
			scope.service.app.candidate().then(function(respone) {
				scope.candidates = respone.data;
			});

			/* Submit Function */
			scope.submitForm = function() {
				const formId = '#form_volunteer';
				
				if(scope.validateForm(formId)) {
					let formData = new FormData();
					let volunteer = [];
					//
					$.each($(formId).serializeArray(), function(index, key) {
						// if(key.name=='district') {
						// 	formData.append('district', scope.form.district.district);

						// } 
						if(key.name=='volunteer') {
							$('input[name=volunteer]:checked').each(function() {
								var inputValue = $(this).val();
								if(inputValue=='อื่นๆ') inputValue += ' ' + $('#volunteer_other').val();

								if(!volunteer.includes(inputValue)) {
									volunteer.push(inputValue);
								}
							});

						} else formData.append(key.name, key.value);
					});
					formData.append('volunteer', volunteer);
					// console.log(formData);

					scope.service.app.volunteer(formData).then(function(response) {
						if(!response.error) {
							scope.alert('basic', 'success', response.msg, '', 'reload');
						} else {
							scope.alert('basic', 'error', 'มีบางอย่างผิดพลาด', response.msg, null);
						}
					});

				} else {
					Swal.fire({
						title: 'มีบางอย่างผิดพลาด',
						text: 'กรุณาตรวจสอบและกรอกข้อมูลใหม่ให้ถูกต้อง',
						icon: 'warning',
						heightAuto: false
					});
				}
			}
			//
		}
	}
}])

/* Plugin */
.directive('pagePlugin', ['$timeout', function($timeout) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			attrs.$observe('pagePlugin', function(url) {
				//
				if(url) {
					const tabs = '';
					const width = 380;
					const height = 130;
					//
					var url = 'https://services.dinsor.co.th/app/client/modernbangkok/resource/fb-plugin/fb-page?url='+url+'&tabs='+tabs+'&width='+width+'&height='+height;
					var $iframe = $('<iframe scrolling="no" frameborder="0" allow="fullscreen" />');
					$iframe.css({width:'100%', height: height + 'px', border:'none', overflow: 'hidden', marginBottom:'1rem'});
					$iframe.attr('src', url);
					element.append($iframe);
					//
				}
			});
			//
		}
	}
}])
.directive('commentsPlugin', ['$timeout', '$location', function($timeout, $location) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			const currentUrl = $location.absUrl();
			// //
			// $timeout(function() {
			// const $fbRoot = $('<div/>').attr('id', 'fb-root');
			// const $sdk = $('<script/>').attr('async', '').attr('defer', '').attr('crossorigin', 'anonymous');
			// $sdk.attr('src', 'https://connect.facebook.net/th_TH/sdk.js#xfbml=1&version=v16.0&appId=513573454188930&autoLogAppEvents=1').attr('nonce', 'BK7sfPuU');
			// element.append($fbRoot).append($sdk);
			// 
			// const $fbComments = $('<div/>').addClass('fb-comments');
			// $fbComments.attr('data-href', currentUrl).attr('data-width', '').attr('data-numposts', '5');
			// element.append($fbComments);
			// }, 600);
			
			
			const height = 500;
			//
			var url = 'https://services.dinsor.co.th/app/client/modernbangkok/resource/fb-plugin/fb-comments?url='+currentUrl;
			var $iframe = $('<iframe scrolling="no" frameborder="0" allow="fullscreen" />').attr('id', 'fb_comments');
			$iframe.css({width:'100%', height: height + 'px', border:'none', overflow:'hidden', marginTop:'2rem'});
			$iframe.attr('src', url);
			
			// $iframe.load(function() {
			// 	console.log(this.contentWindow.document.body.offsetHeight);
			// 	// this.style.height =
			// 	// this.contentWindow.document.body.offsetHeight + 'px';
			// });
			element.append($iframe);

			//
			
			// const commentsId = document.getElementById('fb_comments');
			// const fbRoot = document.createElement('div');
			// fbRoot.id = 'fb-root';
			// const script = document.createElement('script');
			// script.async = true;
			// script.defer = true;
			// script.setAttribute('crossorigin', 'anonymous');
			// script.src = 'https://connect.facebook.net/th_TH/sdk.js#xfbml=1&version=v16.0&appId=513573454188930&autoLogAppEvents=1';
			// script.setAttribute('nonce', 'BK7sfPuU');
			// script.onload = function () {
			//   console.log('Facebook SDK loaded successfully!');
			//   const fbComments = document.createElement('div');
			//   fbComments.classList.add('fb-comments');
			//   fbComments.setAttribute('data-href', 'https://modernbangkok.com');
			//   fbComments.setAttribute('data-width', '');
			//   fbComments.setAttribute('data-numposts', '5');
			//   commentsId.appendChild(fbComments);
			// };
			// script.onerror = function () {
			//   console.log('Failed to load Facebook SDK!');
			// };
			// commentsId.appendChild(fbRoot);
			// commentsId.appendChild(script);
		}
	}
}])

/* Alert */
.directive('alert', ['$timeout', '$window', function ($timeout, $window) {
	return {
		restrict: 'A',
		link: function (scope, element, attrs) {
			//
			scope.alert = function(type, icon, title, msg, path) {
				var timer = 2500;
				//
				switch (type) {
					case 'toast':
						//
						const Toast = Swal.mixin({
							toast: true,
							position: 'top-end',
							showConfirmButton: false,
							timer: timer,
							timerProgressBar: true,
							didOpen: (toast) => {
								toast.addEventListener('mouseenter', Swal.stopTimer)
								toast.addEventListener('mouseleave', Swal.resumeTimer)
							}
						})
						//
						Toast.fire({
							icon: icon,
							title: msg
						})
						break;
					case 'basic':
						Swal.fire({
							title: title,
							text: msg,
							icon: icon,
							heightAuto: false
						});
						break;
				}
				//
				if(path!=null) {
					if(path=='reload') {
						$timeout(function() {
							$window.location.reload();
						}, timer);
					}
					else {
						$timeout(function() {
							$window.location.href = path;
						}, timer);
					}
				}
			}
			//
		}
	}
}])