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

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

	/* layouts */
	.directive('promptskillBar', [function() {
		return {
			restrict: 'C',
			templateUrl: '/templates/layouts/promptskill-bar.promptskill'
		};
	}])
	.directive('privacy', ['$cookies', function($cookies) {
		return {
			restrict: 'C',
			templateUrl: '/templates/layouts/cookie-policy.promptskill',
			link: function(scope, element, attrs) {
				// Cookie Policy
				scope.checkCookie = function() {
					var accept = $cookies.get('cookie_consent');
					if (accept != 'accept') {
						scope.cookie_popup = true;
					}
				}

				scope.acceptCookie = function() {
					let expire = new Date();
					const domain = '.promptskill.com';
					//
					expire.setDate(expire.getDate() + 1);
					$cookies.put('cookie_consent', 'accept', {
						domain: domain,
						expires: expire,
						path: '/'
					});
					scope.cookie_popup = false;
				}
				//
			}
		};
	}])
	.directive('copyright', [function() {
		return {
			restrict: 'C',
			templateUrl: '/templates/layouts/copyright.promptskill'
		};
	}])
	.directive('promptskill', [function() {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				attrs.$observe('promptskill', function(logo) {
					var $logo = $('<img/>');
					if (logo) {
						$logo.attr('src', '//services.promptskill.com/app/public/img/logo/logo-topbar.png');
						if (logo == 'id') {
							$logo.attr('src', '//services.promptskill.com/app/public/img/logo/logo-promptskill-id.png');
						} else {
							$logo.addClass('top-bar click')
							$logo.on('click', function() {
								scope.promptSkill();
							})
						};
						element.append($logo);
					}
				});
			}
		}
	}])
	.directive('headBar', ['$location', '$timeout', function($location, $timeout) {
		return {
			restrict: 'A',
			template: '<div ng-include="navigation"></div>',
			link: function(scope, element, attrs) {
				scope.$watch('headbar', function(newValue, oldValue) {
					//console.log(newValue)
					if (newValue != oldValue) {
						if (newValue) {
							scope.navigation = 'templates/layouts/header.promptskill';

							// Initialization Mobile Navigator
							$timeout(function() {
								$('.sidenav').sidenav();
							}, 1000);

						} else {
							scope.navigation = '';
						}
					}
				});

				scope.service.program.info().then(function(program) {
					scope.service.frontpage.content(program.program_id, 'menu', null, program.institute.inst_id).then(function(content) {
						// console.log(content);
						if (program.institute.inst_id == "fcc13db5-7bb5-4dd6-88b9-ca12289a26bb") {
							var _content = [];
							content.forEach((item) => {
								// console.log(item.institute)
								temp = {};
								temp.title = item.title;
								temp.link = '//promptskill.com' + item.link;
								temp.rec_status = item.rec_status;
								_content.push(temp);
							});
							scope.home = '//promptskill.com';
							content = _content;
						} else {
							scope.home = '/';
						}
						// console.log(content);
						var menu = [];
						var temp = {};
						content.forEach((item) => {
							// console.log(item.institute)
							temp = {};
							temp.title = item.title;
							temp.path = item.link;
							temp.state = item.rec_status == 'active' ? 1 : 0;
							menu.push(temp);
						});
						// console.log(menu)
						scope.menu = menu;
					});
				});




				// scope.menu = [
				// 	{ "title": "หน้าหลัก", "path": "/", "state": "1" },
				// 	{ "title": "หลักสูตร", "path": "/courses", "state": "1" },
				// 	// { "title": "วิธีการเรียน", "path": "/how-to-learn", "state": "1" },
				// 	{ "title": "วิทยากร", "path": "/faculty-of-lecturers", "state": "0" },
				// 	{ "title": "คำถามที่พบบ่อย", "path": "/frequently-asked-questions", "state": "1" },
				// 	{ "title": "เกี่ยวกับเรา", "path": "/about-us", "state": "1" },
				// 	{ "title": "ติดต่อเรา", "path": "/contact-us", "state": "1" }
				// ];

				// Header Change
				scope.navigationChange = function() {
					//
					const path = $location.path().split('/');
					const pathArray = ['course', 'enrol', 'register'];
					const host = $location.host().split('.').length;
					//
					// console.log($location.host().split('.').length)
					if (pathArray.includes(path[1]) || host > 2) {
						$('header').addClass('program-header');
						// $('header').css('position', 'absoluzte').find('.page-wrapper').css('padding', '0 2em');
					} else {
						$('header').removeClass('program-header');
						// $('header').css('position', 'relative').find('.page-wrapper').css('padding', '0 8.625rem');
					}
				}
				//
			}
		};
	}])
	.directive('headbarLogo', [function() {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				var logo = scope.service.program.logo() ? scope.service.program.logo() : '//services.promptskill.com/app/public/img/logo/logo-topbar.png';

				// console.log(logo)
				if (logo) {
					var $img = $('<div/>').append($('<img/>').attr('height', '100%').attr('src', logo).attr('class', 'top-bar'));
					element.append($img.addClass('valign-wrapper'));
				}
			}
		}
	}])
	.directive('headbarLogoRight', [function() {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				var logo = ''; //'https://services.promptskill.com/app/public/img/logo/logo-topbar.png';

				if (logo) {
					var $img = $('<div/>').append($('<img/>').attr('src', logo));
					element.append($img);
				}
			}
		}
	}])
	.directive('sitemap', [function() {
		return {
			restrict: 'A',
			templateUrl: '/templates/layouts/sitemap.promptskill',
			link: function(scope, element, attrs) {
				//
				scope.service.program.info().then(function(program) {
					// console.log(program);
					scope.sitemap = program;
				});

				// attrs.$observe('sitemap', function(program) {
				// 	scope.service.program.data('sitemap', institution).then(function(data) {
				// 		console.log(data)
				// 		scope.sitemap = data;
				// 	});
				// });
				//
			}
		};
	}])

	/* elements */
	.directive('image', [function() {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				attrs.$observe('image', function(image) {
					var img = new Image();
					img.onload = function() {
						var ratio = this.height / this.width;
						if (attrs.height) {
							ratio = ratio * parseInt(attrs.height) / 100;
						}
						console.log(ratio)
						element.css('padding-top', ratio * 100 + '%');
						element.css('position', 'relative');
					}
					img.src = 'https:' + image;
					element.removeAttr('image');
					element.css('background-image', "url('" + image + "')").addClass('cover');
					//
					element.removeAttr('image');
				});
			}
		}
	}])
	.directive('background', [function() {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				attrs.$observe('background', function(image) {
					var img = new Image();
					img.onload = function() {
						if (attrs.height == 'fit') {
							//element.height(this.height);
							//element.css('height', this.height + '');
							//element.addClass('width');
							element.css('background-size', 'auto ' + this.height + 'px')
						} else if (attrs.height == 'auto') {
							element.css('background-size', 'auto ' + this.height + 'px');
							element.removeClass('background-image');
						}
						//else 
						element.addClass(attrs.height);
					}
					img.src = 'https:' + image;
					element.removeAttr('background');
					element.css("background-image", "url('" + image + "')");
					element.addClass('background-image');
				});
			}
		}
	}])
	.directive('icon', [function() {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				attrs.$observe('icon', function(image) {
					var $img = $('<img/>');
					var img = new Image();
					img.onload = function() {
						$img.attr('src', image);
						element.append($img);
					}
					img.src = image;
					element.removeAttr('icon');
				});
			}
		}
	}])
	.directive('aos', ['$timeout', function($timeout) {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				//
				$timeout(function() {
					AOS.init({
						// disable: 'mobile'
					});
				}, 900);
				//
			}
		}
	}])

	/* style */
	.directive('fitBrief', ['$timeout', '$sanitize', function($timeout, $sanitize) {
		return {
			restrict: 'A',
			priority: 10,
			link: function(scope, element, attrs) {
				scope.$watch(attrs.ngBindHtml, function(value) {
					var fontSize = parseInt(element.css('font-size'));
					var margin = element.parent().css('margin');
					//console.log(margin)
					$timeout(function() {
						if (value != undefined) {
							var blockBrief = element.prev();
							var brief = blockBrief.find('.brief');
							var marginTop = (blockBrief.height() - brief.height()) / fontSize;
							element.children().children().children(':first-child').css('margin-top', -marginTop + 'em').css('margin-left', '-4%');

							// catchphrase
							if (scope.course.catchphrase) {
								let catchphrase_text = scope.course.catchphrase;
								const tag = (/xhtml/i).test(document.doctype) ? '<br />' : '<br>';
								const $catchphrase = $('<h2/>').addClass('overline-text underline-text short dbadman bold');
								//
								catchphrase_text = (catchphrase_text + '').replace(/(\r\n|\n\r|\r|\n|&#10;&#13;|&#13;&#10;|&#10;|&#13;)/g, tag + '$1');

								$catchphrase.html($sanitize(catchphrase_text));
								$catchphrase.css('margin-top', '0.8em');
								element.children().children().children(':nth-child(2)').prepend($catchphrase);
							}
						}
					})
				})

			}
		}
	}])

	/* 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);
					scope.service.program.page(name).then(function(data) {
						console.log(data)
						scope.page = data;
						if (data) {
							element.addClass(data.headbar)
							if ($('header').outerHeight() < paddingTop) {
								paddingTop += $('header').outerHeight();
							} else {
								paddingTop = $('header').outerHeight();
							}
							element.css('padding-top', paddingTop);
						}
					});
				});
			}
		};
	}])
	.directive('pageBanner', [function() {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				var designWidth = 1920;
				attrs.$observe('pageBanner', function(banner) {
					if (banner) {
						element.removeAttr('page-banner')
						//if(attrs.fit=='width') {
						//var img = new Image();
						//img.onload = function() {
						//	var height = this.height / designWidth;
						//	element.css('height', height *100+'vw');
						//}
						//img.src = 'https:' + banner;
						element.css('background-image', "url('" + banner + "')").addClass(attrs.fit);
					}
				});
			}
		}
	}])
	.directive('bookCover', [function() {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				attrs.$observe('bookCover', function(cover) {
					if (cover != '') {
						var image = scope.activity.resource.cover;
						var title = scope.activity.resource.title;
						var file = scope.activity.resource.file;

						var $document = $('<div/>').css('padding', '1em');
						var $img = $('<img/>').css('width', '10em').attr('src', image);
						var $title = $('<h6/>').css('margin-bottom', '1.5em').text(title);
						var $download = $('<a/>').append($('<img/>').attr('src', '//services.promptskill.com/app/program/public/img/icon/icon-book-open.png'));
						$download.attr('href', 'https:' + file);
						$download.attr('target', '_blank');

						$document.append($img).append($title).append($download);

						element.append($document);
					}
				});
			}
		}
	}])

	.directive('alertPanel', ['$timeout', function($timeout) {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				scope.$watch('alert.msg', function(msg, old) {
					//console.log(msg)
					//console.log(old)
					var $panel = angular.element('#course-navigator .panel')
					//console.log($panel.innerWidth())
					if (msg) {
						//element.empty();
						// console.log(msg);
						angular.element('<div/>').css('width', '100%').html(msg).appendTo(element);
						element.addClass('alert-panel valign-wrapper');
						$panel.addClass('show');
						//scope.timeout(3000, scope.$parent.alert = {});
						$timeout(function() {
							$panel.removeClass('show');
							scope.alert.msg = '';
							element.empty();
						}, 7000);
					}
					/*if(msg=="") {
						if($panel.hasClass('show')) {
							$panel.removeClass('show');
							element.empty();
							//console.log(msg)
						}
					}*/
				});
			}
		}
	}])
	.directive('timeCountdown', ['$timeout', function($timeout) {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				// scope.$watch('alert.time', function(msg, old) {
				var $iframe = angular.element('#moobed');
				var $card = $('<div/>').addClass('card-timecountdown orange lighten-5 white z-depth-1 valign-wrapper');
				var $icon = $('<img/>').addClass('icon-timecountdown').attr('src', '//services.promptskill.com/app/client/dbdacademy/public/img/icon/icon-alert-warning.png').attr('width', '30');
				var $title = $('<p/>').addClass('black-text normal regular').text('คุณมีเวลาในการทำข้อสอบ ' + '30' + ' นาที');
				var $time = $('<span/>').addClass('timecountdown bold').text('00 : 30 : 00');
				$title.append($time);
				$card.append($icon).append($title);
				// $iframe.append($card);
				element.append($card);
				// });
			}
		}
	}])
	.directive('toggle', [function() {
		return {
			restrict: 'C',
			link: function(scope, element, attr) {
				element.on('click', function() {
					//console.log(element)
					if (element.hasClass('current')) {
						element.removeClass('current')
						//element.addClass('done')
					} else {
						$(element).parent().find('.toggle.current').removeClass('current');
						element.addClass('current')
					}
				});
			}
		}
	}])

	/* register */
	.directive('registerInfo', ['$location', function($location) {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				//console.log($location.hash());
				setTimeout(function() {
					scope.service.member.register($location.hash()).then(function(info) {
						console.log(info)
						//
						var data = JSON.parse(info.data);
						$("#prefix").val(data.prefix);
						$("#firstname").val(data.firstname);
						$("#lastname").val(data.lastname);
						$("#company").val(data.company);
						$("#province").val(data.province);
						$("#contact").val(data.contact);
					})
				}, 1000);
			}
		}
	}])
	.directive('register', ['$location', function($location) {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				// if(scope.service.user.token()=='')
				//scope.gotoUrl('/');

				var program = '';
				scope.$parent.promptskill = true;
				scope.$parent.headbar = false;
				scope.$parent.fullpage = true;
				scope.$parent.member = false;
				//
				attrs.$observe('register', function(action) {
					scope.service.program.info(action).then(function(data) {
						// console.log(data)
						scope.program = data;
						program = data.domain.toLowerCase();
						scope.formUrl = '/register-form/' + program + '.' + action;
						//
						scope.name = data.name;
						scope.background = data.background;
						scope.banner = data.banner;
						scope.register['code'] = data.registration;
					});
				});
				//
				let formdata = new FormData();
				let files = [];
				var upload = false;
				var valid_national_id = false;
				scope.formReady = function() {
					//
					upload = angular.element('input.input-file').length == 0;
					angular.element('input#email').on('change', function() {
						angular.element('input[name="username"]').val($(this).val()).prop('readonly', true)
							.removeClass('validate invalid').removeAttr('required');
					});

					// input file drag & drop image
					if (angular.element('input.input-file').length) {
						let button = document.querySelector('.title-top button'),
							form = document.getElementById("file_img"),
							section = document.getElementById(".card-input-file section"),
							container = document.querySelector('.container-image'),
							text = document.querySelector('.inner'),
							browse = document.querySelector('.select'),
							input = document.querySelector('.card-input-file section input');

						browse.addEventListener('click', () => input.click());

						//input change event
						input.addEventListener('change', () => {
							let file = input.files;

							for (let i = 0; i < file.length; i++) {
								if (files.every(e => e.name != file[i].name)) {
									if (file[i].size > 16000000) {
										scope.alert('รูปภาพมีขนาดใหญ่เกินไป');
									} else {
										files.push(file[i]);
									}
								}
							}
							//document.getElementById("file_img").value = "";
							showImage();
							if (files.length > 0) {
								upload = true;
							}
							//console.log(files);
						})

						function showImage() {
							let images = '';
							files.forEach((e, i) => {
								images += `<div class="image">
											 <img src="${URL.createObjectURL(e)}" alt="image">
											<span onclick="delImage(${i})">&times;</span>
									   </div>`
							})
							container.innerHTML = images;
						}

						//delete image
						// function delImage(index) {
						// 	files.splice(index, 1);
						// 	showImage();
						// 	console.log(files);
						// }
						window.delImage = (index) => {
							files.splice(index, 1);
							showImage();
							//console.log(files);

							if (files.length == 0) {
								upload = false;
							}
						};

						//drag and drop image
						document.getElementById("section-file").addEventListener('dragover', e => {
							e.preventDefault();

							$('#section-file').addClass('dragover');
							$('.inner').css('display', 'none');
							$('.drop-here').css('display', 'block');
						})

						document.getElementById("section-file").addEventListener('dragleave', e => {
							e.preventDefault();

							$('#section-file').removeClass('dragover');
							$('.inner').css('display', 'block');
							$('.drop-here').css('display', 'none');
						})

						document.getElementById("section-file").addEventListener('drop', e => {
							e.preventDefault();

							$('#section-file').removeClass('dragover');
							$('.inner').css('display', 'block');
							$('.drop-here').css('display', 'none');

							let file = e.dataTransfer.files;
							for (let i = 0; i < file.length; i++) {
								// if (files.every(e => e.name != file[i].name)) files.push(file[i])
								if (files.every(e => e.name != file[i].name)) {
									if (file[i].size > 16000000) {
										scope.alert('รูปภาพมีขนาดใหญ่เกินไป');
									} else {
										files.push(file[i]);
									}
								}
							}

							showImage();
							if (files.length > 0) {
								upload = true;
							}
							console.log(files);
						})
					}
					//

					// angular.element('input.input-file').on('change', function() {
					// 	var file = $(this)[0].files[0];
					// 	//formdata.append('files[]', file);
					// 	files.forEach((e, i) => formdata.append('files[]', e));
					// 	upload = true;
					// })

					//valid national ID
					if (angular.element('input[name="id_card_number"]').length) {

						$("#id_card_number").keyup(function(e) {
							var input = $("#id_card_number");
							var id = input.val();

							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))) {
									valid_national_id = false;
									input.removeClass("invalid");
									input.addClass("valid");
									$("#helper").attr('data-error', 'ต้องการ');
								} else {
									valid_national_id = true;
									input.removeClass("valid");
									input.addClass("invalid");
									$("#helper").attr('data-error', 'เลขประจำตัวประชาชนไม่ถูกต้อง');
								}
							}
						});
					}

				}
				//
				scope.register = function(state) {
					var accepted = true;
					var national_id = true;
					var confirm_password = true;
					var formCheck = angular.element('.form-checkbox').find('input');
					angular.forEach(formCheck, function(input) {
						accepted = accepted && angular.element(input).prop("checked");
					});
					//
					if (upload) {
						if (accepted) {
							var required = 0;
							var $formregister = angular.element('.form-register').find(':input');
							angular.forEach($formregister, function(input) {
								var $input = angular.element(input);
								if ($input.prop('required') && $input.val() == '') {
									if (!$input.prop('disabled')) {
										$input.addClass('invalid');
										required++;
									}
								}
							});
							//
							var $formselect = angular.element('.form-register').find('select');
							angular.forEach($formselect, function(input) {
								var $input = angular.element(input);
								if ($input.prop('required') && $input.val() == null) {
									if (!$input.prop('disabled')) {
										$input.addClass('invalid');
										required++;
									}
								}
							});
							// check input length national id
							if (angular.element('input[name="id_card_number"]').length) {
								if (angular.element('input[name="id_card_number"]').val().length != 13) {
									national_id = false;
									scope.alert('เลขประจำตัวประชาชนไม่ครบ 13 หลัก');
								}
							}
							//check confirm password
							if (angular.element('.promptskill-id').length) {
								if (angular.element('input[name="password"]').val() != angular.element('input[name="confirm_password"]').val()) {
									confirm_password = false;
									scope.alert('รหัสยืนยันไม่ถูกต้อง');
								}
							}
							//		
							var $forminput = angular.element('.promptskill-id').find('input');
							angular.forEach($forminput, function(input) {
								var $input = angular.element(input);
								switch ($input.attr('name')) {
									case 'firstname':
									case 'lastname':
										var value = angular.element('input#' + $input.attr('name')).val();
										$input.val(value);
										break;
									default:
										if ($input.prop('required') && $input.val() == '') {
											$input.addClass('invalid');
											required++;
										}
								}
							});
							//
							if (required != 0) {
								scope.alert('กรุณากรอกข้อมูลให้ครบทุกช่อง');
								//scope.helper = {'msg':'กรุณากรอกข้อมูลให้ครบทุกช่อง'};
							} else {
								if (national_id && confirm_password) {
									// check valid national id
									if (valid_national_id) {
										scope.alert('เลขประจำตัวประชาชนไม่ถูกต้อง');
									} else {
										// save data registration
										var $btnReg = angular.element('.btn-register').find('button');
										$btnReg.attr('disabled', true).text('กำลังบันทึกข้อมูล..');

										// get files upload
										if ($('.file-field input[type="file"]').length) {
											$('.file-field input[type="file"]').each(function(i, e) {
												// if (e.files.length > 0) {
												// 	const inputName = $(e).attr('name');
												// 	// const filename = e.files[0].name;
												// 	// const newFilename = inputName + '_' + filename;
												// 	//
												// 	files.push(new File([e.files[0]], inputName));
												// }
												files.push(e.files[0]);
											});
										}
										// console.log(files);

										if (scope.program.type != 'seminar') {
											scope.service.member.signup($forminput).then(function(data) {
												scope.service.member.registration($formregister, data.userid).then(function(id) {
													//console.log(id)
													files.forEach((e, i) => formdata.append(`file[${i}]`, e));
													scope.service.member.upload(formdata, id).then(function(result) {
														//console.log(result)
														scope.result = result;
														scope.scrollToTop().then(function() {
															scope.state = 'completed';
															scope.stateUrl = '/register-form/' + program + '.result';
														});
													})
												})
											});
										} else {
											scope.service.member.registration(scope.program.program_id, $formregister, null).then(function(id) {
												// console.log(id)
												$btnReg.attr('disabled', true).text('กำลังอัปโหลดไฟล์..');

												files.forEach((e, i) => formdata.append(`file[${i}]`, e));
												scope.service.member.upload(formdata, id).then(function(result) {
													// console.log(result)
													scope.result = result;
													scope.scrollToTop().then(function() {
														scope.state = 'completed';
														scope.stateUrl = '/register-form/' + program + '.result';
													});
												})
											})
										}
									}
									//
								}
							}
						} else scope.alert('ยอมรับเงื่อนไขการให้บริการ');
					} else scope.alert('ต้องการอัปโหลดรูปภาพ');
				}
				//
				scope.alert = function(text) {
					Swal.fire({
						title: 'มีบางอย่างผิดพลาด',
						text: text,
						icon: 'warning',
						confirmButtonText: 'ตกลง',
						confirmButtonColor: "#9E9E9E",
						heightAuto: false
					})
				}
				//
			}
		};
	}])

	/* form input */
	.directive('formHelper', ['$window', function($window) {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				attrs.$observe('formHelper', function(text) {
					var helper = scope.helper;
					if (text) {
						if (!helper.hasOwnProperty('type')) {
							helper.title = 'มีบางอย่างผิดพลาด';
							helper.type = 'warning';
						}
						Swal.fire({
							title: helper.title,
							text: text,
							icon: helper.type,
							confirmButtonText: 'ตกลง',
							confirmButtonColor: "#9E9E9E",
							heightAuto: false
						}).then(function() {
							//console.log(text)
							if (scope.helper.close) {
								$window.top.close();
							}
							if (scope.helper.redirect) {
								$window.href = '/' + scope.helper.redirect;
							}
							scope.helper = {}
						});
					}
				});
			}
		}
	}])
	.directive('textField', [function() {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				element.addClass('input-field')
				attrs.$observe('textField', function(label) {
					if (label) {
						var $input = $('<input readonly/>').attr({ type: 'text' }).val(attrs.value);
						var $label = $('<label/>').addClass('dbadman normal bold black-text').text(label);
						//
						if (attrs.type == 'textarea') {
							$input = $('<textarea readonly/>').text(attrs.value).addClass('materialize-textarea').attr('rows', attrs.line).css('height', attrs.line + 'em')
						}
						$input.addClass('dbadman')
						element.append($input).append($label);
					}
				});
			}
		}
	}])
	.directive('inputField', [function() {
		return {
			restrict: 'C',
			link: function(scope, element, attrs) {
				var $input = angular.element('<input/>').attr({ name: attrs.name, type: attrs.type, });
				var $select = angular.element('<select/>').attr({ name: attrs.name, });
				var $label = angular.element('<label/>').addClass('bold black-text');
				var $helper = angular.element('<span/>').attr('data-error', 'ต้องการ').addClass('helper-text');
				//console.log(attrs.type)
				switch (attrs.type) {
					case 'radio':
						$input.addClass('with-gap red');
					case 'checkbox':
						var $text = angular.element('<span/>').text(attrs.label);
						$input.removeClass('validate').addClass('filled-in');
						$label.append($input).append($text);
						$input.prop('checked', attrs.checked).addClass(attrs.check);
						element.append($label).removeClass('input-field');
						break;
					case 'switch':
						var $switch = angular.element('<div/>').addClass('switch row dbadman large bold').append($label).css('margin', '0.75em');
						var $level = angular.element('<span/>').addClass('lever');
						$input.attr('type', 'checkbox');
						$label.addClass('smaller right').append($input).append($level).append(attrs.switchOn).prepend(attrs.switchOff);
						$switch.prepend(attrs.label);
						element.append($switch).removeClass('input-field').prepend();
						break;
					case 'submit':
						var $button = angular.element('<button/>').addClass('btn red waves-effect waves-light dbadman bold large').text(attrs.label); //.attr({type:attrs.type}).css({width:'100%',borderRadius:'0.25em'});
						element.append($button).removeClass('input-field');
						break;
					case 'button':
						var $button = angular.element('<button/>').addClass('btn-large waves-effect waves-light dbadman bold large' + attrs.name).text(attrs.label); //.css({width:'100%',borderRadius:'0.25em'});
						element.append($button).removeClass('input-field');
						$button.addClass(attrs.name)
						break;
					case 'link':
						var $link = angular.element('<a/>').addClass('waves-effect btn-flat dbadman bold small slim center').text(attrs.label).attr('href', attrs.link);
						element.append($link).removeClass('input-field');
						break;
					case 'textarea':
						var $text = angular.element('<textarea/>').attr({ id: attrs.name, name: attrs.name }).addClass('materialize-textarea');
						$text.attr('rows', attrs.line).css('height', attrs.line + 'em').text(attrs.value);
						$label.text(attrs.label).attr('for', attrs.name).addClass('dbadman normal bold');
						element.append($text).append($label);
						break;
					case 'password':
						var icon = 'visibility';
						var $icon = angular.element('<i/>').text(icon + '_off').addClass('material-icons suffix grey-text')
							.on('click', function() {
								if (angular.element(this).text().indexOf('_off') > -1) {
									angular.element(this).text(icon).addClass('black-text');
									$input.attr('type', 'text');
								} else {
									angular.element(this).text(icon + '_off').removeClass('black-text');
									$input.attr('type', 'password');
								}
							})
						$input.attr('autocomplete', 'off');
						element.append($icon);
						$input.addClass('dbadman validate').attr('required', true);
						$label.text(attrs.label).attr('for', attrs.name).addClass('dbadman normal bold');
						element.append($input).append($label).append($helper);
						break;
					case 'hidden':
						element.append($input);
						break;
					case 'email':
						$helper.attr('data-error', 'อีเมลไม่ถูกต้อง')
					case 'text':
					case 'date':
					case 'time':
						if (attrs.type != 'password') {
							//$input.attr('type', 'text');
						}
						$input.addClass('dbadman validate').attr('required', true);
						$label.text(attrs.label).attr('for', attrs.name).addClass('dbadman normal bold');
						element.append($input).append($label).append($helper);
						//if(attrs.type =='date') $input.datepicker();
						//if(attrs.type =='time') $input.timepicker();
						break;
					case 'file':
						var icon = 'attach_file';
						var $icon = angular.element('<i/>').text(icon).addClass('Medium material-icons suffix grey-text click')
							.on('click', function() {
								$input.click()
							});
						var $filepath = angular.element('<input/>').attr('type', 'text'); //.attr('placeholder', 'attach file');
						$label.text(attrs.label).attr('for', attrs.name).addClass('dbadman normal bold');
						$input.width(0).on('change', function() {
							//console.log(angular.element(this).val())
							var filename = angular.element(this).val().split(/[\\/]/).pop();
							$filepath.val(filename)
						});
						element.append($label).append($filepath).append($input);
						element.append($icon);
						//$input.attr('type', 'text')
						//$label.text(attrs.label).attr('for', attrs.name).addClass('dbadman normal bold');
						//element.append($input).append($label);
						//$input.datepicker();
						//break;
					case 'select':
						$select.addClass('browser-default').attr('required', true);
						$select.css({ margin: '0', border: '0', borderRadius: '0', borderBottom: '1px solid #707070' })
						var $optionDisabled = angular.element('<option/>').addClass('dbadman normal');
						$optionDisabled.attr('disabled', true).attr('selected', true).text('เลือก');
						$select.append($optionDisabled);
						var value_option = JSON.parse(attrs.option);
						angular.forEach(value_option, function(item) {
							var $option = angular.element('<option/>').addClass('dbadman normal');
							$option.text(item).attr('value', item);
							$select.append($option);
						});
						$label.text(attrs.label).attr('for', attrs.name).addClass('dbadman normal bold');
						element.append($select).append($label).append($helper);
						break;
				}
				if (attrs.disabled) {
					$input.attr('disabled', false)
					$input.addClass('validate');
					//$input.addClass('disabled');
					$input.addClass(attrs.disabled);
				}
				if (attrs.enabled) {
					$input.attr('disabled', true)
					$input.removeClass('validate');
					//$input.addClass('enabled');
					$input.addClass(attrs.enabled);
				}
				if (attrs.same) {
					//$input.prop('readonly', true);
					$input.addClass(attrs.same);
				}
				//
				$input.on('change', function() {
					if (angular.element(this).attr('type') == 'checkbox') {
						var parent = angular.element(this).attr('name');
						var state = angular.element(this).hasClass('enabled') ? !angular.element(this).is(':checked') : angular.element(this).is(':checked');
						if (angular.element(this).hasClass('same')) {
							//console.log(angular.element('input.'+angular.element(this).attr('name')))
							//var same = angular.element(this).attr('name');
							angular.forEach(angular.element('input.' + parent), function(input) {
								var value = angular.element('form#' + parent + ' [name="' + angular.element(input).attr('name') + '"]').val();
								//console.log(value)
								angular.element(input).val(value).prop('readonly', true)
								if (!state) {
									angular.element(input).val(null).prop('readonly', false)
								}
							})
						} else {
							//console.log(angular.element(this).is(':checked'))
							//var parent = angular.element(this).attr('name');
							//console.log(angular.element(this))
							//var state = angular.element(this).hasClass('enabled') ?!angular.element(this).is(':checked') :angular.element(this).is(':checked');
							//console.log(state)
							angular.element('.' + parent).attr('disabled', state);
							if (!state) {
								$input.addClass('validate');
							} else {
								$input.removeClass('validate');
							}
							//
						}
					} else {
						$input.addClass('updated');
					}
				});
			}
		}
	}])
	.directive('value', [function() {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				attrs.$observe('value', function(value) {
					if (value) {
						var $input = element.children('input');
						//console.log(element.children('input').attr('name'))
						$input.val(value)
						if (element.hasClass('readonly')) {
							$input.prop('readonly', true).removeClass('validate');
						}
						//scope.formdata[$input.attr('name')] = $input.val();
					}
					//console.log(scope.formdata)
				})
			}
		}
	}])

	/* 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(inputId) {
					var input = $('#' + inputId);
					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"), '');
						}
					});
				})
				//
			}
		}
	}])

	/* Alert */
	.directive('alert', ['$timeout', '$window', function($timeout, $window) {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {

				// Parameter Config
				const confirmButtonText = 'ตกลง';
				const confirmButtonColor = '#616161';
				const cancelButtonText = 'ยกเลิก';
				const cancelButtonColor = '#d33';
				const timer = 2500;

				//
				scope.alert = function(type, icon, title, msg, path) {
					//
					switch (type) {
						case 'basic':
							Swal.fire({
								title: title,
								text: msg,
								icon: icon,
								heightAuto: true,
								showCloseButton: false,
								showCancelButton: false,
								showConfirmButton: true,
								confirmButtonText: confirmButtonText,
								confirmButtonColor: confirmButtonColor,
								cancelButtonText: cancelButtonText,
								cancelButtonColor: cancelButtonColor,
								customClass: {}
							});
							break;
							//
						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;
							//
					}
					//
					if (path != null) {
						if (path == 'reload') {
							$timeout(function() {
								$window.location.reload();
							}, timer);
						} else {
							$timeout(function() {
								$window.location.href = path;
							}, timer);
						}
					}
				}
				//
			}
		}
	}])

	/* Program Course */
	.directive('programCourse', [function() {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				//
				scope.service.program.info().then(function(program) {
					scope.program_course = program.course;
					console.log(scope.program_course);

					attrs.$observe('programCourse', function(type) {
						// Random Course
						if (type == 'random') {
							function getRandomElements(arr, count) {
								const shuffled = arr.slice();
								let i = arr.length;
								while (i--) {
									const randomIndex = Math.floor(Math.random() * (i + 1));
									[shuffled[i], shuffled[randomIndex]] = [shuffled[randomIndex], shuffled[i]];
								}
								return shuffled.slice(0, count);
							}
							//
							scope.program_course = getRandomElements(scope.program_course, 8);
							// console.log(scope.program_course);
						}
					});
					//
				});
			}
		}
	}])

	.directive('recommendCourse', [function() {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				//
				scope.service.program.info().then(function(program) {
					scope.program_course = program.course_recommend;
					// console.log(scope.program_course);

					//
				});
			}
		}
	}])

	/* Member */
	.directive('member', ['$window', '$location', function($window, $location) {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				scope.$parent.promptskill = true;
				scope.$parent.headbar = false;
				scope.$parent.fullpage = true;
				scope.$parent.member = false;
				//
				attrs.$observe('member', function(action) {
					scope.service.program.page('member').then(function(data) {
						scope.page = data;
					});
				});
				scope.service.member.authorized().then(function(authorized) {
					// console.log(authorized)
					scope.permission = authorized.user;
				})
				//
				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.signup = function() {
					var accepted = true;
					var $formCheck = angular.element('.form-checkbox').find('input');
					angular.forEach($formCheck, function(input) {
						accepted = accepted && angular.element(input).prop("checked");
					});
					if (accepted) {
						if (scope.formInput()) {
							scope.service.member.signup(angular.element('.form-input').find('input')).then(function(result) {
								if (result.err) {
									scope.helper = result;
									scope.helper = { 'msg': result.err };
								} else {
									Swal.fire({
										icon: 'success',
										title: 'สมัครสมาชิกสำเร็จ',
										confirmButtonText: 'ตกลง',
										confirmButtonColor: "#9E9E9E",
										heightAuto: false
									});

									$location.path('/');
								}
							});
						}
					} else scope.helper = { 'msg': 'ยอมรับเงื่อนไขการให้บริการ' };
				}
				scope.signin = function() {
					if (scope.formInput()) {
						scope.service.member.signin(angular.element('.form-input').find('input')).then(function(data) {
							if (data.err == undefined) {
								$window.location = 'https://' + scope.service.program.domain() + '#' + data.token;
							} else {
								//console.log(data.msg)
								scope.helper = data;
							}
						});
					}
				}
				scope.forgotPassword = function() {
					if (scope.formInput()) {
						var email = angular.element('.form-input').find('input[name="email"]').val();
						//console.log(email)
						scope.service.member.password(email).then(function(data) {
							//console.log(data)
							if (data.type == 'success') $location.path('/');
							scope.helper = data;
						});
					}
				}
				scope.resetPassword = function() {
					if (scope.formInput()) {
						var passwd = angular.element('.form-input').find('input[name="password"]').val();
						if (angular.element('.form-input').find('input[name="confirm_password"]').val() == passwd) {
							var email = angular.element('.form-input').find('input[name="username"]').val();
							scope.service.member.resetpassword(email, passwd).then(function(data) {
								//console.log(data)
								if (data.type == 'success') $location.path('/signin').hash(null);
								scope.helper = data;
								scope.service.member.clear();
								//scope.helper['redirect'] = 'signin';
							});
						} else {
							scope.helper = { 'msg': 'รหัสผ่านใหม่และยืนยันรหัสผ่านไม่ตรงกัน' }
						}
					}
				}
			}
		};
	}])
	.directive('memberAuthorized', ['$location', '$window', '$compile', function($location, $window, $compile) {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				let _element = element;
				const baseUrl = 'https://promptskill.com';
				// console.log(element)
				scope.$watch('locale', function(locale, old) {
					// console.log(locale)
					// console.log(old)
					if (locale != old) element.empty();
					// if(locale !=old || locale) {
					console.log(locale + new Date());
					scope.service.member.authorized().then(function(authorized) {
						if (authorized) {
							console.log(authorized)
							$location.hash(null)
							if (authorized.course != undefined) {
								if ($location.path().indexOf('/course') != 0) {
									$location.path('/course/' + authorized.course);
								}
							}
							// if(authorized.permission) {
							//$location.path('/'+authorized.permission);//.hash(null)
							// } else {
							// console.log('sign out')
							var $btLogout = $('<a/>').text(scope.$eval("'Sign out' | phrase:locale")).addClass('waves-effect waves-light btn-small z-depth-1 btn-theme btn-logout regular');
							$btLogout.on('click', function() {
								scope.logout();
							});

							if (scope.mobile) {
								$btLogout.html('<i class="material-icons">logout</i>');
							}

							if (element.find('.user-fullname').length == 0) {
								element.append($btLogout);
								const $userAvatar = $('<img/>').addClass('user-avatar').attr('src', authorized.user.avatar ? authorized.user.avatar : '/public/img/icon/icon-profile.png').attr('avatar-photo', 'avatar');
								const $fullname = $('<a/>').addClass('user-fullname black-text btn-flat z-depth-1 truncate-1 cursor-pointer').text(scope.mobile ? authorized.user.firstname : authorized.user.fullname);
								$fullname.on('click', function() {
									$window.location.href = scope.gotoParamUrl(baseUrl + '/dashboard');
								});
								element.prepend($fullname).prepend($userAvatar);
								$compile(element.contents())(scope);
							}
							// }
						} else {
							var $btSignin = $('<a/>').text(scope.$eval("'Log in' | phrase:locale")).addClass('waves-effect waves-light btn z-depth-0 btn-theme normal regular');
							// var $btSignin = $('<a/>').text(scope.phrase('Sign in')).addClass('waves-effect waves-light btn z-depth-0 btn-theme normal regular');
							var $btSignup = $('<a/>').text(scope.$eval("'Sign up' | phrase:locale")).addClass('waves-effect waves-red btn z-depth-0 black-text white-trans-3 normal regular');
							if (element.find('.btn').length == 0) {
								element.append($btSignin).prepend($btSignup);
							}
							// console.log()
							if ($location.path().split('/').length > 3) $location.path('/');
							// action
							// $btSignin.attr('href', "/signin");
							// $btSignup.attr('href', "/signup");
							$btSignin.on('click', function() {
								$window.location.href = scope.gotoParamUrl(baseUrl + '/signin');
							});
							$btSignup.on('click', function() {
								$window.location.href = scope.gotoParamUrl(baseUrl + '/signup');
							});

							attrs.$observe('memberAuthorize', function(position) {
								if (position == 'promptskill') {
									$btSignup.removeClass('white-text').addClass('black-text')
								}
							});
						}
						//
					});
					// }
				});

			}
		}
	}])

	.directive('avatarPhoto', [function() {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				attrs.$observe('avatarPhoto', function(type) {
					// element.addClass('avatar-photo');
					scope.service.user.avatar(null, type).then(function(response) {
						// console.log(response);
						if (!response.error) {
							element.attr('src', response.data);
						}
						if (response.avatar == false) {
							// create avatar
							function getRandomColor() {
								const letters = '0123456789ABCDEF';
								let color = '#';
								for (let i = 0; i < 6; i++) {
									color += letters[Math.floor(Math.random() * 16)];
								}
								return color;
							}

							function createAvatar(text) {
								const font = 'bold 150px Prompt';
								const canvas = document.createElement('canvas');
								const context = canvas.getContext('2d');
								canvas.width = 300;
								canvas.height = 300;
								//
								const backgroundColor = getRandomColor();
								context.fillStyle = backgroundColor;
								context.fillRect(0, 0, canvas.width, canvas.height);
								//
								context.font = font;
								context.fillStyle = '#ffffff';
								//
								const textMetrics = context.measureText(text);
								const x = (canvas.width - textMetrics.width) / 2;
								const y = (canvas.height + textMetrics.actualBoundingBoxAscent - textMetrics.actualBoundingBoxDescent) / 2;
								context.fillText(text, x, y);
								//
								return new Promise((resolve) => {
									canvas.toBlob((blob) => {
										const file = new File([blob], 'avatar.png', { type: 'image/png' });
										resolve(file);
									});
								});
							}
							//
							scope.service.member.authorized().then(function(authorized) {
								if (authorized) {
									const firstname = authorized.user.firstname;
									const avatarText = firstname.charAt(0).toUpperCase();
									//
									createAvatar(avatarText).then((file) => {
										const formData = new FormData();
										formData.append('file', file);

										// Upload Avatar Photo
										scope.service.user.avatar(formData, null).then(function(response) {
											// console.log(response);
											if (!response.error) {
												element.attr('src', response.data.photo);
											}
										});
										//
									});
								}
							});
							//
						}
					})
				});
			}
		}
	}])

	// Course
	.directive('courseState', ['$location', '$window', function($location, $window) {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				var $btState = $('<a/>').addClass('waves-effect waves-light btn z-depth-1 btn-theme normal medium');
				var $btSample = $('<a/>').addClass('waves-effect waves-light btn z-depth-1 btn-success normal medium ml-1');
				element.append($btState);

				scope.course_state = false;
				attrs.$observe('courseState', function(code) {
					if (code) {
						$btState.text(!scope.course.free_course ? scope.$eval("'Buy now' | phrase:locale") : scope.$eval("'Enroll' | phrase:locale"));
						// console.log(scope.course)
						// 
						// Disabled Course
						if (scope.course.state == '0') {
							// $btState.addClass('disabled').text(scope.$eval("'Register soon'| phrase:locale"));
							element.remove();
							scope.$parent.member = false;
						}

						element.removeAttr('course-state').css('margin-top', '3em')
						scope.service.member.authorized().then(function(authorized) {
							if (authorized) {

								scope.service.course.state(code).then(function(state) {
									console.log(state)
									// console.log(scope.service.user.token())
									if (scope.service.user.token() == '' && !scope.course.invitation) {
										state.text = 'Register'; //scope.$eval("'Register' | phrase:locale");
										state.code = 'register';
									}
									// console.log(scope.course)
									if (state.code == 'enrol') {
										scope.course_state = true;
										if (scope.course.invitation) {
											// scope.service.member.authorized().then(function(authorized) {
											// console.log(authorized)
											if (authorized.invite != code) {
												element.remove();
											}
											// });
											// console.log(element)
											//.addClass('disabled invisible')
										} else {
											console.log(scope.enrol)
											state.code = 'order';
											if (scope.enrol != undefined && scope.enrol.order.status == 'paid') {
												state.code = 'enrol';
											// } else {
											// 	state.code = 'order';
											}
											if (scope.course.sample > 0) {
												element.append($btSample.text(scope.$eval("'Trial' | phrase:locale")));
											}
											// console.log(state.code)
										}
									}
									// console.log(state)
									if(state.code == 'disable'){
										console.log(state)
										element.empty();
									}
									$btState.addClass(state.code).text(scope.$eval("'" + state.text + "'| phrase:locale"));
									if ((state.code == 'enrol' || state.code == 'order')) {
										$btState.addClass(state.code).text(scope.$eval("'Enroll'| phrase:locale"));
									}
									//
									$btState.on('click', function() {
										// console.log(state.code)
										// if(state.length==0) {
										// 	scope.gotoUrl('signin')
										// } else {
										scope.service.course.apply(code, state)
										// }
									});
									$btSample.on('click', function() {
										// console.log(state)
										state.code = 'enrol';
										scope.service.course.apply(code, state)
									});
									console.log(state.code)
								});
							} else {
								scope.course_state = true;
								$btState.on('click', function() {
									$window.location.href = scope.gotoParamUrl('https://promptskill.com/signin');
									// scope.gotoUrl('signin')
								});
							}
						});
					}
				});
			}
		}
	}])


	/* Learner */
	.directive('certificateVerification', ['$routeParams', '$window', function($routeParams, $window) {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				//
				scope.certificate_code = $routeParams.code;
				scope.card_state = 'form';

				if (scope.certificate_code) {
					// scope.certificate_status = false;
					scope.service.learner.verify_certificate(scope.certificate_code).then(function(response) {
						// console.log(response);
						if (response) {
							scope.data_certificate = response;

							// get data course content
							const course = { code: scope.data_certificate.course };
							scope.service.course.content(course).then(function(response_course) {
								// console.log(response_course);
								if (response_course) {
									scope.data_course = response_course;
								}
							});
							//
							scope.certificate_status = true;
						} else {
							scope.certificate_status = false;
						}
					});
					//
					scope.card_state = 'result';
				}

				scope.checkCertificate = function() {
					const code = $('#certificate_code').val();
					// console.log(code);
					$window.location.href = '/certified/' + code;
				}
				//
			}
		}
	}])


	/* Web Content */
	.directive('carouselBanner', ['$location', function($location) {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				//
				// console.log($location.path())
				var path = $location.path();
				path = path.split('/');
				if (path[1] == '') {
					path[1] = 'home';
				} else if (path[1] == 'frequently-asked-questions') {
					path[1] = 'faq';
				}
				// console.log(path)
				scope.service.program.info().then(function(program) {
					scope.service.frontpage.content(program.program_id, 'banner', path[1]).then(function(content) {
						// console.log(content)
						// console.log(program)
						var highlight = [];
						var temp = {};
						content.forEach((item) => {
							// console.log(item.institute)
							temp = {};
							temp.image = program.institute.resource + '/' + item.institute + '/program/' + program.program_id + '/banner/' + item.image;
							temp.link = item.link;
							highlight.push(temp);
						});
						// console.log(highlight)
						if (highlight) {
							var $carousel = $('<div/>').addClass('carousel carousel-slider carousel-banner');
							element.append($carousel);

							angular.forEach(highlight, function(item) {
								var $item = $('<a/>').addClass('carousel-item').attr('href', item.link);
								var $image = $('<div/>').addClass('relative carousel-background');
								//
								$image.css('background-image', "url('" + item.image + "')");
								$item.append($image);
								$carousel.append($item);
							});
							//
							element.ready(function() {

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

								const img = new Image();
								img.onload = function() {
									const ratio = this.height / this.width;
									$carousel.height($carousel.width() * ratio);
								}
								img.src = 'https:' + highlight[0].image;

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

			}
		}
	}])

// .directive('carouselCourse', [function() {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs) {
// 			//
// 			var category = [
// 				{
// 					"category": "หลักสูตรออนไลน์",
// 					"background": "/public/img/mockup/background/background-course.jpg",
// 					"courses": [
// 						{
// 							"code": "SKN66101",
// 							"thumbnail": "https://resourcespace.promptskill.com/resources/course/68/a50134c2-5ea5-40d1-a600-6b988d0506a3/image/Banner_Portforio1.png",
// 							"title": "หลักสูตรเบื้องต้นสำหรับการเขียน Portfolio",
// 							"instructor": "พลีธรรม ตริยะเกษม"
// 						}
// 					]
// 				}
// 			];
// 			console.log(category);
// 			//
// 			
// 			if(category) {
// 
// 				var btnCategory = 'All COURSES';
// 				var iconCategory = '/public/img/icon/icon-promptright.png';
// 				var btnCourse = 'ลงทะเบียน';
// 				//
// 				angular.forEach(category, function(category) {
// 					
// 					/* Header and Button Category */
// 					var	$sectionCourse = $('<div/>').addClass('section-course');
// 					var	$container = $('<div/>').addClass('container');
// 					var	$sectionHeader = $('<div/>').addClass('section-header');
// 					var	$sectionTitle = $('<h2/>').addClass('section-title underline-text').text(category.category);
// 					var	$sectionAction = $('<a/>').addClass('waves-effect btn-flat section-action medium valign-wrapper right-align').attr('href', '/courses');
// 					//
// 					$sectionAction.click(function() {
// 						scope.scrollToTop();
// 					});
// 					$sectionAction.append($('<span/>').text(btnCategory)).append($('<img/>').attr('src', iconCategory).height(25));
// 					$sectionHeader.append($('<div/>').addClass('col').append($sectionTitle));
// 					$sectionHeader.append($('<div/>').addClass('col').append($sectionAction));
// 					$container.append($sectionHeader);
// 					
// 					/* Program Course */
// 					var	$carousel = $('<div/>').addClass('carousel carousel-slider carousel-course');
// 					var	$carouselItem = $('<div/>').addClass('carousel-item');
// 					var $row = $('<div/>').addClass('row');
// 					
// 					// responsive devices
// 					var count = 0;
// 					var responsiveDevice = 4; // Desktop Devices
// 					if(window.matchMedia("(max-width: 600px)").matches) responsiveDevice = 1; // Mobile Devices
// 					else if (window.matchMedia("(min-width: 601px) and (max-width: 992px)").matches) responsiveDevice = 3; // Tablet Devices
// 					
// 					angular.forEach(category.courses, function(course) {
// 						
// 						if(count == 0) {
// 							$carousel.append($carouselItem);
// 							$carouselItem.append($row);
// 						}
// 						//
// 						var $col = $('<div/>').addClass('col s6 m4 l3');
// 						var $card = $('<div/>').addClass('card card-course hoverable');
// 						var $cardImage = $('<div/>').addClass('card-image');
// 						var $cardContent = $('<div/>').addClass('card-content');
// 						var $courseTitle = $('<div/>').addClass('course-title').text(course.title);
// 						var $courseInstructor = $('<div/>').addClass('course-instructor').text(course.instructor);
// 						var $cardAction = $('<div/>').addClass('card-action flex-center');
// 						var $btnCourse = $('<a/>').addClass('btn btn-course medium').attr('href', '/course/'+course.code).text(btnCourse);
// 						//
// 						$cardImage.css('background-image', "url('"+course.thumbnail+"')");
// 						$cardContent.append($courseTitle).append($courseInstructor);
// 						$cardAction.append($btnCourse);
// 						$card.append($cardImage).append($cardContent).append($cardAction);
// 						$row.append($col.append($card));
// 						//
// 						count++;
// 						if(count == responsiveDevice) {
// 							count = 0;
// 							$carouselItem = $('<div/>').addClass('carousel-item');
// 							$row = $('<div/>').addClass('row');
// 						}
// 						
// 					});
// 					$container.append($carousel);
// 					
// 					$sectionCourse.css('background-image', "url('"+category.background+"')");
// 					element.append($sectionCourse.append($container));
// 					//
// 				});
// 				//
// 			}
// 			
// 			element.ready(function() {
// 				var carousel = element.find('.carousel-course');
// 				carousel.carousel({
// 					fullWidth: true,
// 					indicators: true
// 				});
// 				
// 				element.find('.btn-course').click(function() {
// 					scope.scrollToTop();
// 				});
// 				//
// 			});
// 		}
// 	}
// }])
// .directive('carouselInstructor', [function() {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs) {
// 			//
// 			var instructors = [
// 				{
// 					"image": "//resourcespace.promptskill.com/resources/course/15/06bb2d3e-af6e-4266-a582-900b8a564277/instructor/K_Papusarapron.png",
// 					"name": {
// 						"firstname": "คุณปภัสราภรณ์",
// 						"lastname": "เหรียญทอง"
// 					}
// 					
// 				},
// 				{
// 					"image": "//resourcespace.promptskill.com/resources/course/15/06bb2d3e-af6e-4266-a582-900b8a564277/instructor/K_Nubpada.png",
// 					"name": {
// 						"firstname": "คุณนพดา",
// 						"lastname": "อธิกากัมพู"
// 					}
// 					
// 				},
// 				{
// 					"image": "//resourcespace.promptskill.com/resources/course/15/06bb2d3e-af6e-4266-a582-900b8a564277/instructor/K_Nubpada.png",
// 					"name": {
// 						"firstname": "คุณนพดา",
// 						"lastname": "อธิกากัมพู"
// 					}
// 					
// 				},
// 				{
// 					"image": "//resourcespace.promptskill.com/resources/course/15/06bb2d3e-af6e-4266-a582-900b8a564277/instructor/K_Nubpada.png",
// 					"name": {
// 						"firstname": "คุณนพดา",
// 						"lastname": "อธิกากัมพู"
// 					}
// 					
// 				},
// 				{
// 					"image": "//resourcespace.promptskill.com/resources/course/15/06bb2d3e-af6e-4266-a582-900b8a564277/instructor/K_Nubpada.png",
// 					"name": {
// 						"firstname": "คุณนพดา",
// 						"lastname": "อธิกากัมพู"
// 					}
// 					
// 				}
// 			];
// 			// console.log(instructors);
// 			
// 			var	$carousel = $('<div/>').addClass('carousel carousel-slider carousel-instructor');
// 			var	$carouselItem = $('<div/>').addClass('carousel-item');
// 			var $row = $('<div/>').addClass('row');
// 			
// 			// responsive devices
// 			var count = 0;
// 			var responsiveDevice = 4; // Desktop Devices
// 			if(window.matchMedia("(max-width: 600px)").matches) responsiveDevice = 1; // Mobile Devices
// 			else if (window.matchMedia("(min-width: 601px) and (max-width: 992px)").matches) responsiveDevice = 3; // Tablet Devices
// 			
// 			angular.forEach(instructors, function(instructor, key) {
// 				
// 				if(count == 0) {
// 					$carousel.append($carouselItem);
// 					$carouselItem.append($row);
// 				}
// 				//
// 				var $col = $('<div/>').addClass('col s3');
// 				var $photo = $('<div/>').addClass('photo');
// 				var $gradient = $('<i/>').addClass('gradient').css({position:'absolute',top:0, width:'100%',height:'100%'});
// 				var $fullname = $('<h4/>').addClass('name regular').html(instructor.name.firstname + '<br />' + instructor.name.lastname);
// 				var $instructor = $('<div/>').addClass('bottom wrapper center white-text').append($fullname);
// 				//
// 				$photo.css('background-color', 'white');
// 				$photo.css('background-image', "url('"+instructor.image+"')");
// 				$photo.css('padding-top', 670 / 400 * 100+'%');
// 				$photo.css('position','relative');
// 				$photo.append($gradient).append($instructor);
// 				$row.append($col.append($photo));
// 				//
// 				count++;
// 				if(count == responsiveDevice) {
// 					count = 0;
// 					$carouselItem = $('<div/>').addClass('carousel-item');
// 					$row = $('<div/>').addClass('row');
// 				}
// 			});
// 			element.append($carousel);
// 			
// 			//
// 			element.ready(function() {
// 				var carousel = element.find('.carousel-instructor');
// 				carousel.carousel({
// 					fullWidth: true,
// 					indicators: true
// 				});
// 			});
// 		}
// 	}
// }])
// .directive('courseCategory', [function() {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs) 
// 		{
// 			//
// 			var courses = [
// 				{
// 					"name": "หลักสูตรการเริ่มต้นธุรกิจ",
// 					"course": [
// 						{
// 							"code": "SKN66101",
// 							"thumbnail": "https://resourcespace.promptskill.com/resources/course/68/a50134c2-5ea5-40d1-a600-6b988d0506a3/image/Banner_Portforio1.png",
// 							"title": "หลักสูตรเบื้องต้นสำหรับการเขียน Portfolio",
// 							"instructor": "พลีธรรม ตริยะเกษม"
// 						},
// 						{
// 							"code": "SKN66101",
// 							"thumbnail": "https://resourcespace.promptskill.com/resources/course/68/a50134c2-5ea5-40d1-a600-6b988d0506a3/image/Banner_Portforio1.png",
// 							"title": "หลักสูตรเบื้องต้นสำหรับการเขียน Portfolio",
// 							"instructor": "พลีธรรม ตริยะเกษม"
// 						},
// 						{
// 							"code": "SKN66101",
// 							"thumbnail": "https://resourcespace.promptskill.com/resources/course/68/a50134c2-5ea5-40d1-a600-6b988d0506a3/image/Banner_Portforio1.png",
// 							"title": "หลักสูตรเบื้องต้นสำหรับการเขียน Portfolio",
// 							"instructor": "พลีธรรม ตริยะเกษม"
// 						},
// 						{
// 							"code": "SKN66101",
// 							"thumbnail": "https://resourcespace.promptskill.com/resources/course/68/a50134c2-5ea5-40d1-a600-6b988d0506a3/image/Banner_Portforio1.png",
// 							"title": "หลักสูตรเบื้องต้นสำหรับการเขียน Portfolio",
// 							"instructor": "พลีธรรม ตริยะเกษม"
// 						},
// 						{
// 							"code": "SKN66101",
// 							"thumbnail": "https://resourcespace.promptskill.com/resources/course/68/a50134c2-5ea5-40d1-a600-6b988d0506a3/image/Banner_Portforio1.png",
// 							"title": "หลักสูตรเบื้องต้นสำหรับการเขียน Portfolio",
// 							"instructor": "พลีธรรม ตริยะเกษม"
// 						}
// 					]
// 				},
// 				{
// 					"name": "หลักสูตรการเริ่มต้นธุรกิจ",
// 					"course": [
// 						{
// 							"code": "SKN66101",
// 							"thumbnail": "https://resourcespace.promptskill.com/resources/course/68/a50134c2-5ea5-40d1-a600-6b988d0506a3/image/Banner_Portforio1.png",
// 							"title": "หลักสูตรเบื้องต้นสำหรับการเขียน Portfolio",
// 							"instructor": "พลีธรรม ตริยะเกษม"
// 						},
// 						{
// 							"code": "SKN66101",
// 							"thumbnail": "https://resourcespace.promptskill.com/resources/course/68/a50134c2-5ea5-40d1-a600-6b988d0506a3/image/Banner_Portforio1.png",
// 							"title": "หลักสูตรเบื้องต้นสำหรับการเขียน Portfolio",
// 							"instructor": "พลีธรรม ตริยะเกษม"
// 						},
// 						{
// 							"code": "SKN66101",
// 							"thumbnail": "https://resourcespace.promptskill.com/resources/course/68/a50134c2-5ea5-40d1-a600-6b988d0506a3/image/Banner_Portforio1.png",
// 							"title": "หลักสูตรเบื้องต้นสำหรับการเขียน Portfolio",
// 							"instructor": "พลีธรรม ตริยะเกษม"
// 						},
// 						{
// 							"code": "SKN66101",
// 							"thumbnail": "https://resourcespace.promptskill.com/resources/course/68/a50134c2-5ea5-40d1-a600-6b988d0506a3/image/Banner_Portforio1.png",
// 							"title": "หลักสูตรเบื้องต้นสำหรับการเขียน Portfolio",
// 							"instructor": "พลีธรรม ตริยะเกษม"
// 						},
// 						{
// 							"code": "SKN66101",
// 							"thumbnail": "https://resourcespace.promptskill.com/resources/course/68/a50134c2-5ea5-40d1-a600-6b988d0506a3/image/Banner_Portforio1.png",
// 							"title": "หลักสูตรเบื้องต้นสำหรับการเขียน Portfolio",
// 							"instructor": "พลีธรรม ตริยะเกษม"
// 						}
// 					]
// 				}	
// 			];
// 			// console.log(courses);
// 			
// 			/* Course Category */
// 			angular.forEach(courses, function(category, key) {
// 				// default parameter
// 				var categoryTitle = category.name;
// 				var programCourse = category.course;
// 				//
// 				var $section = $('<section/>').addClass('section-category');
// 				var $container = $('<div/>').addClass('container');
// 				var $sectionTitle = $('<h2/>').addClass('section-title underline-text').text(categoryTitle);
// 				var $programCourse = $('<div/>').addClass('program-course row');
// 				
// 				// change background section
// 				if(key%2 != 0) {
// 					$section.addClass('red lighten-5');
// 				}
// 				
// 				/* Program Course */
// 				angular.forEach(programCourse, function(course) {
// 					// default parameter
// 					var code = course.code;
// 					var title = course.title;
// 					var instructor = course.instructor;
// 					var thumbnail = course.thumbnail;
// 					var button = 'ลงทะเบียน';
// 					//
// 					var $col = $('<div/>').addClass('col s6 m4 l3');
// 					var $card = $('<div/>').addClass('card card-course hoverable');
// 					var $cardImage = $('<div/>').addClass('card-image');
// 					var $cardContent = $('<div/>').addClass('card-content');
// 					var $courseTitle = $('<div/>').addClass('course-title').text(title);
// 					var $courseInstructor = $('<div/>').addClass('course-instructor').text(instructor);
// 					var $cardAction = $('<div/>').addClass('card-action flex-center');
// 					var $btnCourse = $('<a/>').addClass('btn btn-course medium').attr('href', '/course/'+ code).text(button);
// 					//
// 					$cardImage.css('background-image', "url('"+thumbnail+"')");
// 					$cardContent.append($courseTitle).append($courseInstructor);
// 					$btnCourse.click(function() {
// 						scope.scrollToTop();
// 					});
// 					$cardAction.append($btnCourse);
// 					$card.append($cardImage).append($cardContent).append($cardAction);
// 					$programCourse.append($col.append($card));
// 				});
// 				//
// 				$container.append($sectionTitle).append($programCourse);
// 				$section.append($container);
// 				element.append($section);
// 			});
// 			//
// 		}
// 	}
// }])
// .directive('facultyLecturers', [function() {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs) {
// 			//
// 			var instructors = [
// 				{
// 					"image": "//resourcespace.promptskill.com/resources/course/15/06bb2d3e-af6e-4266-a582-900b8a564277/instructor/K_Papusarapron.png",
// 					"name": {
// 						"firstname": "คุณปภัสราภรณ์",
// 						"lastname": "เหรียญทอง"
// 					}
// 					
// 				},
// 				{
// 					"image": "//resourcespace.promptskill.com/resources/course/15/06bb2d3e-af6e-4266-a582-900b8a564277/instructor/K_Nubpada.png",
// 					"name": {
// 						"firstname": "คุณนพดา",
// 						"lastname": "อธิกากัมพู"
// 					}
// 					
// 				},
// 				{
// 					"image": "//resourcespace.promptskill.com/resources/course/15/06bb2d3e-af6e-4266-a582-900b8a564277/instructor/K_Nubpada.png",
// 					"name": {
// 						"firstname": "คุณนพดา",
// 						"lastname": "อธิกากัมพู"
// 					}
// 					
// 				},
// 				{
// 					"image": "//resourcespace.promptskill.com/resources/course/15/06bb2d3e-af6e-4266-a582-900b8a564277/instructor/K_Nubpada.png",
// 					"name": {
// 						"firstname": "คุณนพดา",
// 						"lastname": "อธิกากัมพู"
// 					}
// 					
// 				},
// 				{
// 					"image": "//resourcespace.promptskill.com/resources/course/15/06bb2d3e-af6e-4266-a582-900b8a564277/instructor/K_Nubpada.png",
// 					"name": {
// 						"firstname": "คุณนพดา",
// 						"lastname": "อธิกากัมพู"
// 					}
// 					
// 				}
// 			];
// 			// console.log(instructors);
// 			
// 			var $row = $('<div/>').addClass('row').css('margin', '0 -0.75rem');
// 			//
// 			angular.forEach(instructors, function(instructor) {
// 				// default parameter
// 				var id = '0';
// 				var firstname = instructor.name.firstname;
// 				var lastname = instructor.name.lastname;
// 				var image = instructor.image;
// 				//
// 				var $link = $('<a/>').attr('href', '/lecturer/' + id);
// 				var $col = $('<div/>').addClass('col s3');
// 				var $photo = $('<div/>').addClass('photo');
// 				var $gradient = $('<i/>').addClass('gradient').css({position:'absolute',top:0, width:'100%',height:'100%'});
// 				var $fullname = $('<h4/>').addClass('name regular').html(firstname + '<br />' + lastname);
// 				var $instructor = $('<div/>').addClass('bottom wrapper center white-text').append($fullname);
// 				//
// 				$photo.css('background-color', 'white');
// 				$photo.css('background-image', "url('"+image+"')");
// 				$photo.css('padding-top', 670 / 400 * 100+'%');
// 				$photo.css('position','relative');
// 				$photo.append($gradient).append($instructor);
// 				$link.click(function() {
// 					scope.scrollToTop();
// 				});
// 				$link.append($col.append($photo));
// 				$row.append($link);
// 			});
// 			element.append($row);
// 		}
// 	}
// }])
// .directive('howToLearn', [function() {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs)
// 		{
// 			//
// 			var learns = [
// 				{
// 					"title": "คู่มือการสมัครสมาชิก",
// 					"content": "คู่มือการสมัครสมาชิก"
// 				},
// 				{
// 					"title": "การเข้าสู่ระบบสำหรับผู้ที่มีบัญชีเข้าเรียนกับเว็บไซต์เดิม",
// 					"content": "การเข้าสู่ระบบสำหรับผู้ที่มีบัญชีเข้าเรียนกับเว็บไซต์เดิม"
// 				},
// 				{
// 					"title": "แนะนำการเรียน",
// 					"content": "แนะนำการเรียน"
// 				}
// 			];
// 			var $collapsible = $('<ul/>').addClass('collapsible grey lighten-3').attr('id', 'collapsible');
// 			//
// 			angular.forEach(learns, function(item) {
// 				// default parameter
// 				var title = item.title;
// 				var content = item.content;
// 				//
// 				var	$li = $('<li/>');
// 				var $header = $('<div/>').addClass('collapsible-header grey lighten-3 valign-wrapper');
// 				var $question = $('<h4/>').addClass('black-text').text(title);
// 				var $badge = $('<span/>').addClass('badge');
// 				var $body = $('<div/>').addClass('collapsible-body');
// 				var $answer = $('<div/>').addClass('black-text').html(content);
// 				//
// 				$badge.append($('<i/>').addClass('material-icons bold large').text('add'));
// 				$li.append($header.append($question).append($badge));
// 				$li.append($body.append($answer));
// 				$collapsible.append($li);
// 			});
// 			element.append($collapsible);
// 			//
// 			element.ready(function() {
// 				$collapsible.collapsible();
// 			});
// 			//
// 		}
// 	}
// }])
.directive('frequentlyAskedQuestion', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			//
			var faq = [];
			scope.service.program.info().then(function(program) {
				// console.log(program.institute.institute_id);
				scope.service.frontpage.faq(program.institute.institute_id).then(function(faq) {
					console.log(faq)
					
					angular.forEach(faq, function(type, key) {
						var $section = $('<section/>').addClass('section-faq');
						var $h2 = $('<h2/>').addClass('black-text bold underline-text').text(key); 
						var $card = $('<div/>').addClass('card-panel grey lighten-3 z-depth-0').attr('style','border-radius: 10px;');
						var $collapsible = $('<ul/>').addClass('collapsible collapsible-theme grey lighten-3').attr('id', 'collapsible');
						//
						
						angular.forEach(type, function(item) {
							// default parameter
							var question = item.question;
							var answer = item.answer;
							//
							var	$li = $('<li/>');
							var $header = $('<div/>').addClass('collapsible-header grey lighten-3 valign-wrapper');
							var $question = $('<h4/>').addClass('black-text').text(question);
							var $badge = $('<span/>').addClass('badge');
							var $body = $('<div/>').addClass('collapsible-body regular').html(answer);
							//
							$badge.append($('<i/>').addClass('material-icons bold large').text('add'));
							$li.append($header.append($question).append($badge));
							$li.append($body);
							$collapsible.append($li);
						});
						$card.append($collapsible);
						element.append($section.append($h2, $card));
						// element.append($collapsible);
						//
						element.ready(function() {
							$collapsible.collapsible();
						});
					});
				});
			});
			
			
			//
		}
	}
}])