<br />
<b>Warning</b>:  Attempt to read property "token" on null in <b>/var/www/prod/newcms/ext/simplyorg_features/Classes/Api.php</b> on line <b>50</b><br />
<br />
<b>Warning</b>:  Attempt to read property "token" on null in <b>/var/www/prod/newcms/ext/simplyorg_features/Classes/Api.php</b> on line <b>54</b><br />
<br />
<b>Warning</b>:  Attempt to read property "token" on null in <b>/var/www/prod/newcms/ext/simplyorg_features/Classes/Api.php</b> on line <b>50</b><br />
<br />
<b>Warning</b>:  Attempt to read property "token" on null in <b>/var/www/prod/newcms/ext/simplyorg_features/Classes/Api.php</b> on line <b>54</b><br />
{"error":"Invalid API response"}<br />
<b>Warning</b>:  Undefined variable $translationsObj in <b>/var/www/prod/newcms/App/AppRouter.php</b> on line <b>120</b><br />

<!DOCTYPE html>
<html lang="de">
<head>

	<meta charset="utf-8">

	<title>Home</title>
	<meta name="robots" content="noindex, follow">
	<link rel="shortcut icon" type="image/jpg" href="ext/simply_org_1/Resources/Public/Images/favicon.png" />
	<meta http-equiv="x-ua-compatible" content="IE=edge" />
	<meta name="generator" content="TYPO3 CMS" />
	<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0" />
	<meta name="description" content="Description of your project" />
	<meta name="keywords" content="Keyword of your project" />
	<meta name="abstract" content="abstract of your project" />
	
	<link rel="stylesheet" type="text/css" href="/custom.css" media="all">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.1.1/css/all.min.css" media="all">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker3.min.css" media="all">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.1.0/bootstrap-social.min.css" media="all">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.0/css/toastr.min.css" media="all">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.4.3/jquery.contextMenu.css" media="all">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css" media="all">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.6.0/dropzone.min.css" media="all">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" media="all">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vue-good-table@2.21.10/dist/vue-good-table.css" media="all">
<link rel="stylesheet" type="text/css" href="/ext/simply_org_1/Resources/Public/Css/bootstrap.min.css" media="all">
<link rel="stylesheet" type="text/css" href="/ext/simply_org_1/Resources/Public/Css/website.css" media="all">
<link rel="stylesheet" type="text/css" href="/ext/simply_org_1/Resources/Public/Css/jquery.checkradios.min.css" media="all">
<link rel="stylesheet" type="text/css" href="/ext/simply_org_1/Resources/Public/Css/mediaquery.css" media="all">
<link rel="stylesheet" type="text/css" href="/ext/simply_org_1/Resources/Public/Css/formbuilder.css" media="all">
<link rel="stylesheet" type="text/css" href="/ext/simplyorg_features/Resources/Public/Css/v-calendar.min.css" media="all">
<link rel="stylesheet" type="text/css" href="/ext/simplyorg_features/Resources/Public/Css/bootstrap-datetimepicker.min.css" media="all">
<link rel="stylesheet" type="text/css" href="/ext/simplyorg_features/Resources/Public/Css/scheduler.css" media="all">
<link rel="stylesheet" type="text/css" href="/ext/simplyorg_features/Resources/Public/plugins/bootstrap-fileinput/bootstrap-fileinput.css" media="all">
<link rel="stylesheet" type="text/css" href="/ext/simplyorg_features/Resources/Public/Css/jquery.Jcrop.min.css" media="all">
	

	<link rel="alternate" hreflang="en-US" href="/"/>
	<link rel="alternate" hreflang="x-default" href="/"/>
	<script type="text/javascript">
		var app_language = 'de';

		var componentsToRegister = {
			components: [],
			list: {},
			add: function (component) {
				this.components.push(component);
				this.list[component.name] = false;
			},
			registerAll: function () {

				var _this = this;
				$.each(this.components, function (index, component) {
					if (typeof component.components != 'undefined') {
						component.components = _this.resolvedComponents(component.components);
					}
					component.options.methods = typeof component.options.methods == 'undefined' ? {} : component.options.methods;
					component.options.methods.$tr = commonComponentMethods.$tr;
					component.options.methods.dateFormat = commonComponentMethods.dateFormat;
					component.options.methods.timeFormat = commonComponentMethods.timeFormat;
					component.options.methods.dateFormatReverse = commonComponentMethods.dateFormatReverse;
					component.options.methods.dateTimeFormat = commonComponentMethods.dateTimeFormat;
					component.options.methods.trainerRequestDateTimeFormat = commonComponentMethods.trainerRequestDateTimeFormat;
					component.options.methods.dateTimeFormatReverse = commonComponentMethods.dateTimeFormatReverse;
					component.options.methods.priceFormat = commonComponentMethods.priceFormat;
					component.options.methods.reRender = commonComponentMethods.reRender;
					component.options.methods.simplyOrgUrl = commonComponentMethods.simplyOrgUrl;
					component.options.methods.$trWithVars = commonComponentMethods.$trWithVars;
					component.options.methods.cmsUrl = commonComponentMethods.cmsUrl;
					component.options.methods.FtmIsEnabled = commonComponentMethods.FtmIsEnabled;
					component.options.methods.currencySymbol = commonComponentMethods.currencySymbol;
					component.options.methods.dateToIso = commonComponentMethods.dateToIso;
					component.options.methods.inArray = commonComponentMethods.inArray;
					component.options.methods.getIcon = commonComponentMethods.getIcon;
					_this.list[component.name] = Vue.component(component.name, component.options)
				})

				Vue.component('vue-good-table', window['vue-good-table'].VueGoodTable);
				Vue.use(window['vue-good-table'].VueGoodTable, {filterOptions: {enabled: true } });
			},
			resolvedComponents: function (comonentsArrStrings) {
				var comps = [];
				var _this = this;
				$.each(componentArrStrings, function (index, cString) {
					if (typeof _this.list[cString] != 'undefined') {
						comps.push(_this.list[cString])
					}
				})
				return comps;
			}

		};

		var mySkillMethods = {
			editRecord: function (index) {
				$('.bs-tooltip-top').remove();
				this.currentEditIndex = index;
				var currentRecord = index == 'new' ? {} : this.resRecords[index];
				for (var f in this.form.fields) {
					if (f == 'PersonID') {
						this.form.fields[f].initial_value = window.user.user.PersonID;
					} else if (this.form.fields[f].vue == 'fileBox') {
						if (currentRecord.documents && currentRecord.documents.length > 0) {
							this.form.fields[f].initial_value = currentRecord.documents[0];
						} else {
							this.form.fields[f].initial_value = {};
						}
					} else {
						this.form.fields[f].initial_value = currentRecord[f] ? currentRecord[f] : '';
					}
				}
				this.reRender(function () {
					$("#prof_exp_popup").modal('show');
				});
			},
			deleteRecord: function (index) {
				var _this = this;

				if (this.resRecords[index]) {
					blockUI();
					$.get(getBaseUrl() + 'Base/deleteRecord&model=' + this.modal + '&model_id=' + this.resRecords[
						index].id, function (data) {
						notify(data.type, data.message);
						_this.$parent.load();
					});
				}
			},

			reportChange: function (field, val) {
				console.log('change');
			},

			addNewRecord: function () {
				this.editRecord('new');
			},

			saveRecord: function () {
				var fData = this.$refs.form.getFormData();
				//fData = {params:fData};
				console.log(fData);
				var _this = this;
				if (this.$refs.form.isValid()) {
					blockUI();


					$.ajax({
						url: getBaseUrl() + 'Base/saveRecord&model=' + this.modal,
						type: 'POST',
						data: fData,
						cache: false,
						dataType: 'json',
						processData: false, // Don't process the files
						contentType: false, // Set content type to false as jQuery will tell the server its a query string request
						success: function (data) {
							notify(data.type, data.message);
							if (data.type == 'success') {
								if (_this.resRecords[_this.currentEditIndex]) {
									_this.resRecords[_this.currentEditIndex] = data.saved;
								} else {
									_this.resRecords.unshift(data.saved);
								}
								_this.currentEditIndex = false;
								_this.reRender(unblockUI);

							} else {

							}
							unblockUI();
							$("#prof_exp_popup").modal('hide');
						},
						error: function (data) {
							notify('error', _this.$tr('cms.something_went_wrong'));
							unblockUI();
						}
					});


				} else {
					notify('error', _this.$tr('cms.fillout_all_required_fields'));
				}

			}
		}
	</script>
	<script type="text/javascript" src="/?eID=router&uri=Base/getPasswordSettings"></script>
	
</head>
<body>
<div id="portalSmallPopupOverlay" style="display:none;">
	<div class="popupContent">
		<div class="row icon_container">
			<div class="col col-sm-12 col-md-12 col-lg-12 text-center">
				<img src="ext/simply_org_1/Resources/Public/Images/popup_icon_top.PNG">
			</div>
		</div>
		<div class="row message_container">
			<div class="col col-sm-12 col-md-12 col-lg-12 text-center">
				<span id="message"></span>
			</div>
		</div>
		<div class="row button_conatiner">
			<div class="col col-sm-12 col-md-12 col-lg-12 text-center">
				<a href="#" class="btn btn-primary brb">sdsadasdasd</a>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript" src="/?eID=router&uri=Base/getPasswordSettings"></script>
<script type="text/javascript">
	var baseComponents = {};
</script>
<div class="container-fluid nav_wrapper">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-xs-12">
                <nav class="navbar navbar-expand-lg navbar-light">
                    <a class="navbar-brand" href="/">
                        <div class="logo"></div>
                    </a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                            aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div style="display: none!important;" id="nav_bar">
    <ul class="profile_and_cart">
        <li class="nav-item dropdown" v-if="is_loggedin">
            <a class="nav-link dropdown-toggle navbarDropdownMenu"  id="navbarDropdownMenuLink" data-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false">
                <i class="fas fa-user-circle"></i>
                <span class="profile_name"> {{ user.FirstName }} {{ user.LastName }} </span>
            </a>

            <div class="dropdown-menu navbarDropdownMenu user-profile-menu" aria-labelledby="navbarDropdownMenuLink">
                
                <a v-if="inArray('cms.dashboard',user.permissions)" class="dropdown-item"
                href="/dashboard">
                    <img class="menu_item_icon"
                        src="/ext/simply_org_pro/Resources/Public/Images/menu-icons/dashboard.svg"></img>
                    <span>{{ $tr('cms.dashboard') }}</span>
                </a>

                <a v-if="inArray('cms.trainer_calendar',user.permissions)" class="dropdown-item"
                    :href="myTrainerCalendarUrlNew">
                    <img class="menu_item_icon"
                        src="/ext/simply_org_pro/Resources/Public/Images/menu-icons/calendar.svg"></img>
                    <span>{{ myTrainerCalendarNewTitle }}</span>
                </a>

                <a v-if="inArray('cms.manage_my_seminars',user.permissions)" class="dropdown-item" href="/my-seminars">
                    <img class="menu_item_icon"
                        src="/ext/simply_org_pro/Resources/Public/Images/menu-icons/manage_seminars.svg"></img>
                    <span>{{ $tr('cms.manage_my_seminars') }}</span>
                </a>
                
                <a v-if="inArray('cms.trainer_requests_menu',user.permissions)" class="dropdown-item"
                    href="/trainer-requests">
                    <i class="fas fa-user-plus"></i> <span>{{ $tr('cms.trainer_request') }}</span>
                </a>
                
                <!-- <a v-if="inArray('cms.trainer_requests_menu',user.permissions)" class="dropdown-item"
                    :href="myTrainerCalendarUrl">
                    <i class="fas fas fa-calendar-alt"></i> <span>{{ myTrainerCalendarTitle }}</span>
                </a> -->

                <a v-if="user.is_trainer == 1" class="dropdown-item" href="/my-learnings">
                    <img class="menu_item_icon"
                        src="/ext/simply_org_pro/Resources/Public/Images/menu-icons/booked_seminar.svg" style="height: 15px; width: 17px;"></img> <span>{{ $tr('cms.my_learnings_trainer') }}</span>
                </a>

                <a v-else-if="inArray('8',user.RoleID)" class="dropdown-item" href="/my-learnings">
                    <img class="menu_item_icon"
                        src="/ext/simply_org_pro/Resources/Public/Images/menu-icons/booked_seminar.svg" style="height: 15px; width: 17px;"></img> <span>{{ $tr('cms.my_learnings_manager') }}</span>
                </a>

                <a v-else class="dropdown-item" href="/my-learnings">
                    <img class="menu_item_icon"
                        src="/ext/simply_org_pro/Resources/Public/Images/menu-icons/booked_seminar.svg" style="height: 15px; width: 17px;"></img> <span>{{ $tr('cms.my_learnings') }}</span>
                </a>

                <a v-if="typeof user != 'undefined' && typeof user.roles != 'undefined' && (user.roles.indexOf('manager') != -1 || user.roles.indexOf('manager_representative') != -1) && inArray('cms.requests_menu', user.permissions)" class="dropdown-item" href="/approval-requests">
                    <i class="fas fa-user-times"></i> <span>{{ $tr('cms.approval_request') }}</span>
                </a>
                    
                <a v-if="inArray('cms.seminar_feedback_title',user.permissions)" class="dropdown-item" href="/seminar-feedback">
                    <img class="menu_item_icon"
                        src="/ext/simply_org_pro/Resources/Public/Images/menu-icons/feedback.svg"></img>
                    <span>{{ $tr('cms.seminar_feedback_title') }}</span>
                </a>

                <a v-if="inArray('cms.checklist_menu',user.permissions)" class="dropdown-item" href="/my-checklist">
                    <i class=" fas fas fa-list"></i> <span>{{ $tr('cms.to_do') }}</span>
                </a>
                
                <a v-if="inArray('cms.documents_menu',user.permissions)" class="dropdown-item"
                href="/my-documents">
                    <img class="menu_item_icon"
                        src="/ext/simply_org_pro/Resources/Public/Images/menu-icons/documents.svg"></img>
                    <span>{{ $tr('cms.trainer_documents') }}</span>
                </a>

                <a v-if="inArray('cms.complaints',user.permissions)" class="dropdown-item mt-1"
                            href="/complaints">
                    <img class="menu_item_icon"
                        src="/ext/simply_org_pro/Resources/Public/Images/menu-icons/todos.svg"></img>
                    <span>{{ $tr('cms.complaints') }}</span>
                </a>

                <a v-if="inArray('cms.notes',user.permissions)" class="dropdown-item" href="/my-notes">
                    <img class="menu_item_icon"
                        src="/ext/simply_org_pro/Resources/Public/Images/menu-icons/notes.svg"></img>
                    <span>{{ $tr('cms.notes') }}</span>
                </a>

                <a v-if="((typeof user != 'undefined' && typeof user.roles != 'undefined' && user.roles.indexOf('manager') != -1 && user.OrganizationID ))" class="dropdown-item" href="/team-members">
                    <i class="fas fa-users fa-sm"></i> <span>{{ $tr('cms.team_members') }}</span>
                </a>


                <a v-else-if="(typeof user != 'undefined' && typeof user.roles != 'undefined' && (user.roles.indexOf('portal_user') != -1 || user.roles.indexOf('participant') != -1 ) && window.commonComponentMethods.FtmIsEnabled('group-registration-creation-feature') === true)" class="dropdown-item" href="/team-members">
                    <i class="fas fa-users fa-sm"></i> <span>{{ $tr('cms.team_members') }}</span>
                </a>

                <a v-if="(typeof user != 'undefined' && typeof user.roles != 'undefined' && (user.roles.indexOf('portal_user') != -1 || user.roles.indexOf('participant') != -1 ) && window.commonComponentMethods.FtmIsEnabled('group-registration-creation-feature') === true)" class="dropdown-item" href="/team-learnings">
                    <i class="fas fa-users fa-sm"></i> <span>{{ $tr('cms.group_seminar_booking') }}</span>

                <a v-if="typeof user != 'undefined' && typeof user.roles != 'undefined' && user.roles.indexOf('manager') != -1 && user.OrganizationID" class="dropdown-item" href="/my-employees">
                    <i class="fas fa-users fa-sm"></i> <span>{{ $tr('cms.my_employee') }}</span>
                </a>

                <a v-if="inArray('cms.trainer_calendar',user.permissions) && typeof window.user != 'undefined' && typeof window.user.syncCalendarSetting != 'undefined' && window.user.syncCalendarSetting.isSyncCalendarEnable" class="dropdown-item mt-1" href="/profile?tab=settings-tab">
                    <img class="menu_item_icon"
                        src="/ext/simply_org_pro/Resources/Public/Images/menu-icons/settings.svg"></img>
                    <span>{{ $tr('cms.my_settings') }}</span>
                </a>
               
                <a class="dropdown-item" :href="profileUrl">
                    <i class="fas fa-user-circle"></i> <span>{{ myPrifileTitle }}</span>
                </a>

                <!-- <a v-if="inArray('cms.documents_menu',user.permissions)" class="dropdown-item" href="/documents">
                    <i class=" fas fa-folder-open"></i> <span>{{ $tr('cms.documents') }}</span>
                </a> -->
                <!-- <a v-if="inArray('cms.my_skills_menu',user.permissions)" class="dropdown-item" :href="mySkillsUrl">
                    <i class="fas fa-user-graduate"></i> <span>{{ mySkillsTitle }}</span>
                </a> -->
                
                <a class="dropdown-item" :href="logoutUrl">
                    <i class="fas fa-sign-out-alt"></i> <span>{{ logoutTitle }}</span>
                </a>

            </div>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="/cart" id="cart_icon">
                <i class="fas fa-shopping-cart"></i>
                <span class="badge badge-primary badge-pill">{{ cartCount }}</span>
            </a>
        </li>
        
        
    </ul>

    <div  class="collapse navbar-collapse justify-content-end"  id="navbarSupportedContent">
        <ul class="navbar-nav" >
            <!-- <f:for each="{mainnavigation}" as="mainnavigationItem">
                <li class="nav-item {f:if(condition: mainnavigationItem.active, then: 'active')}">
                    <a class="nav-link"
                       href="{mainnavigationItem.link}"
                       target="{mainnavigationItem.target}"
                       title="{mainnavigationItem.title}">
                        {mainnavigationItem.title}
                    </a>
                </li>
            </f:for> -->
            <li class="nav-item" v-for="item in menuitems" v-if="display(item)">
                <a class="nav-link"
                   :href="item.link"
                   :target="item.target"
                   :title="item.title">
                    {{ item.title }}
                </a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle"
                 href="/" id="navbarDropdownMenuLink" 
                data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">
                    <i class="fas fa-globe-asia"></i>
                    {{ curLanguageText }}
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" :href="changeLangUrl+'&lang=de'">
                        {{ german }}</a> 
                    <a class="dropdown-item" :href="changeLangUrl+'&lang=en'">
                        {{ english }}</a>
                </div>
            </li>
        </ul>
    </div>
</div>
                </nav>
            </div>
        </div>
    </div>
</div>

<div class="cookie_wrapper mb-2" id="CookieDetails" style="display:none">
    <p id="coockieText">{{ $tr('cms.cookie_explanation') }}</p>
    <button id="acceptCookie" class="btn dark-gray" @click="acceptCookie">{{ $tr('cms.accept') }} </button>
</div>

<script>
			var historyJson = {"Robots.txt":{"name":"Robots.txt","url":"http:\/\/svg-standard-prod.svg-tenant.de\/robots.txt"},"Catalog":{"name":"Catalog","url":"http:\/\/svg-standard-prod.svg-tenant.de\/"}};
		</script><script>
			var themeName = "simply_org_1";
		</script><script>
				var homepageFilterSettings = {"home_filters_toggle":1,"by_seminar_type":1,"by_date":1,"by_location":1,"by_seminar_category":1,"by_target_group":1};
			</script><script>
			var guestCheckoutSettings = {"guest_checkout_toggle":0};
		</script><script>
			var articleShopSettings = {"article_shop_toggle":0};
		</script><script>
			var cookieToggleSettings = {"Cookie_toggle":0};
		</script><script>
			var newzLetterConsentSettings = {"newz_letter_consent":0};
		</script><script>
			var autocompleteOrgSettings = {"autocomplete_org_details_toggle":0};
		</script><script>
			var isCaptchaOn = 1;
			window.isCaptchaOn = isCaptchaOn === "true" || isCaptchaOn === 1 ? true : false;
			window.captchaType = "pure_captcha";
		</script>

    <script id="page_identifier" data-page="catalog">
        // palce this in all simplyOrg templates so vue js can be initialized
    </script>

    <script type="x/template" id="form_group">
    <form :name="formName" :id="formName" autocomplete="off" enctype="multipart/form-data">
        <div v-for="field in fields" v-show="field.type != 'hidden'">
            <label v-show="!field.no_lable" v-if="typeof field.label_key != 'undefined' && (typeof field.toggle == 'undefined' || (typeof field.toggle != 'undefined' && field.toggle))"> 
				{{ $tr(field.label_key) }} <span v-if="field.required">*</span>
			</label>
            <component v-if="loaded" :is="field.vue" :initial_value="field.initial_value" :ref="'formFields_'+field.name" :field="field"></component>
        </div>
    </form>
</script>

<script type="x/template" id="form_group_new">
    <span v-for="field in fields">
			<component :is="field.vue" :ref="'formFields_'+field.name" :field="field"></component>
		</span>
</script>

<script type="x/template" id="form_group_row">
    <span v-for="field in fields">
		<div class="form-row">
			<component :is="field.vue" :ref="'formFields_'+field.name" :field="field"></component>
		</div>
	</span>
</script>

<script type="x/template" id="vue_form">
    <form>
        <span v-for="formGroup in formGroups">
			<component :is="field.vue" :ref="'formGroup_'+formGroup.name" :fields="formGroup.fields"></component>
		</span>
    </form>
</script>

<script type="x/template" id="select_box">
    <div v-show="toggle" :class="'form-group  manager-auto-select '+wrapper_class+' '+required+' '+errorClass">

        <v-select v-if="fieldObj.multiple" ref="vSelect" v-model="selected" @search="onSearch" :disabled="fieldObj.is_disabled" :placeholder="placeholder" :options="options" multiple>
            <span slot="no-options">
				{{ $tr('cms.search') }}&nbsp;  
			</span>
            <template slot="option" slot-scope="option">
                <a data-cant_hide="true">
                {{ option.label }}
                </a>
			</template>
        </v-select>

        <v-select v-if="!fieldObj.multiple && typeof fieldObj.isTaggable != 'undefined' && fieldObj.isTaggable" ref="vSelect" v-model="selected" @search="onSearch" :disabled="fieldObj.is_disabled" :placeholder="placeholder" v-on:input="onInput" @search:blur="onInput" :options="options"
        taggable
        :create-option="taggableOption"
        >
            <span slot="no-options">
			  {{ $tr('cms.search') }}&nbsp;  
			</span>
        </v-select>
        <v-select v-else-if="!fieldObj.multiple" ref="vSelect" v-model="selected" @search="onSearch" :disabled="fieldObj.is_disabled" :placeholder="placeholder" v-on:input="onInput" @search:blur="onInput" :options="options">
            <span slot="no-options">
			  {{ $tr('cms.search') }}&nbsp;  
			</span>
            <template slot="option" slot-scope="option">
		        <a data-cant_hide="true">
				{{ option.label }}
				</a>
			</template>
        </v-select>
    </div>
</script>

<script type="x/template" id="due_date_box">
    <div class="row">
        <div class="col-sm-3 form-group form-md-line-input" style="padding-right: 0px;">
            <select v-model="when" class="form-control">
				<option value="before">{{ $tr('cms.before') }}</option>
				<option  value="after">{{ $tr('cms.after') }}</option>
			</select>
        </div>
        <div class="col-sm-3 form-group form-md-line-input" style="padding-right: 0px;">
            <select v-model="days" class="form-control">
				<option v-for="i in max_days" :value="i">{{ i+' '+$tr('cms.days') }}</option>
			</select>
        </div>
        <div class="col-sm-6">
            <span>
				{{ field.offset_from_text }}
			</span>
        </div>
    </div>
</script>

<script type="x/template" id="date_box">
    <div :class="'form-group form-md-line-input form-md-floating-label edited '">
        <input type="text" :id="id" :placeholder="$tr(field.label_key)" autocomplete="off" v-model="value" :name="field.name" :class="'form-control datebox '+required+'  '+errorClass">
    </div>
</script>

<script type="x/template" id="date_range_box">
    <div class="input-group input-daterange" :id="id">
        <input type="text" :class="'form-control '+required+'  '+errorClass" v-model="fromDate" :name="field.fromName" :placeholder="placeholder">
        <div class="input-group-addon" style="width: 50px">to</div>
        <input type="text" :class="'form-control '+required+'  '+errorClass" v-model="toDate" :name="field.toName" :placeholder="placeholder">
    </div>
</script>

<script type="x/template" id="text_box">
    <div :class="'form-group '">
        <input :type="type" placeholder="" :name="fieldObj.name" :id="fieldObj.id" v-model="value" :class="'form-control '+required+'  '+errorClass" :maxlength="size" @blur="onBlur" :disabled="isDisabled">
    </div>
</script>

<script type="x/template" id="textarea_box">
    <div :class="'form-group '">
        <textarea :type="type" :placeholder="placeholder" :name="fieldObj.name" v-model="value" :class="'form-control '+required+'  '+errorClass"></textarea>
    </div>
</script>

<script type="x/template" id="file_box">
    <span>
    <input :class="'form-control '+ required +' '+errorClass" type="file" :placeholder="$tr(field.label_key)" :name="field.name" @change="processFile($event)"
        >
    <a download v-if="fileName != false" :href="fileLink">{{ fileName }}</a> 
</span>
</script>

<script type="x/template" id="date_time_box">
    <div :class="'form-group form-md-line-input form-md-floating-label edited '">
        <input type="text" :id="id" :placeholder="$tr(field.label_key)" autocomplete="off" :name="field.name" v-model="value" :class="'form-control datebox '+required+' '+errorClass">
    </div>
</script>

<script type="x/template" id="check_box">
    <div :class="'md-checkbox '" v-show="toggle">
        <input type="checkbox" :id="field.name" :name="field.name" :fieldContext="field.fieldContext" :value="value" v-model="value" class="md-check">
        <label :for="field.name" class="tooltips" data-container="body" :data-original-title="$tr(field.tooltip_key)">
        <span class="inc"></span>
        <span class="check" :style="field.box_style"></span>
        <span class="box" :style="field.box_style"></span> {{ $tr(field.label_key) }}</label>
    </div>
</script>

<script type="x/template" id="dropzone_box">
    <div style="margin-top: 15px;" >
        <label v-if="typeof field.label_key != 'undefined'" class="">
            {{ $tr(field.label_key) }} <span v-if="field.required">*</span>
        </label>
        <div :class="'dropzone ' + required + ' ' + errorClass" id="my-dropzone">
            <div class="dz-default dz-message">
                <div class="row">
                    <div class="col col-sm-12 col-md-12 col-lg-12 text-center">
                        <span>{{ $tr('cms.drop_file_here_title') }}</span>
                        <label for="AttachFiles" class="green" style="cursor:pointer"> {{ $tr('cms.browse_file') }}</label>
                        <br />
                        <small>{{ $tr('cms.max_file_size_msg') }}: {{ field.maxFilesize }}mb </small>
                    </div>
                </div>
            </div>
        </div>
        

        <div v-if="typeof field.label_key != 'undefined'" class="small-text">{{ $tr(field.document_message) }}</div>
    </div>
</script>
    <script type="x/template" id="ProfessionalExperienceTemplate">
	<span v-if="loaded">
        <i class="add_sign" @click="addNewRecord" data-toggle="tooltip" :title="$tr('cms.add_new_record')">+</i>
        <table  width="100%" class="table table-striped table-with-add-button" >
            <tr>
                <th class="action_col">&nbsp;</th>
                <th>{{ $tr('cms.from') }}</th>
                <th>{{ $tr('cms.to') }}</th>
                <th>{{ $tr('cms.task') }}</th>
                <th>{{ $tr('cms.responsibility') }}</th>
                <th>{{ $tr('cms.notes') }}</th>
            </tr>
            <tr v-if="resRecords.length < 1 && loaded == true" style="margin: 0 auto;
        width: 100%;
        text-align: center;">
                <td colspan="6" class="no-record">{{ $tr('cms.no_records_found') }}</td>
            </tr>
            <tr v-for="(result,index) in resRecords" >
                <td :data-title="$tr('cms.actions') + ':'">
                    <i class="fas fa-pencil-alt" @click="editRecord(index)" data-toggle="tooltip" :title="$tr('cms.edit')"></i>
                    <i class="fas fa-trash-alt" aria-hidden="true" @click="deleteRecord(index)" data-toggle="tooltip" :title="$tr('cms.delete')"></i>
                </td>
                <td :data-title="$tr('cms.from') + ':'">{{ dateFormat(result.from,'cust_format_2') }}</td>
                <td :data-title="$tr('cms.to') + ':'">{{ dateFormat(result.to,'cust_format_2') }}</td>
                <td :data-title="$tr('cms.task') + ':'">{{  result.task }}</td>
                <td :data-title="$tr('cms.responsibility') + ':'" class="wrapped_details">{{  result.responsibility }}</td>
                <td :data-title="$tr('cms.notes') + ':'" class="wrapped_details">{{  result.note }}</td>
            </tr>
        </table>


        <div class="modal fade" id="prof_exp_popup" role="dialog">
            <div class="modal-dialog" style="width:70%">
            
              <!-- Modal content-->
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                  <h4 class="modal-title">{{ $tr('cms.professional_experience') }}</h4>
                </div>
                <div class="modal-body ">
                    <formGroup :slide="form" ref="form" ></formGroup>
                    

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default green-btn" @click="saveRecord">{{ $tr('cms.save') }}</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">{{ $tr('cms.close') }}</button>
                </div>
              </div>
              
            </div>
        </div>
    </span>
</script>

<script type="text/javascript">
    
    componentsToRegister.add({ 
        name:'ProfessionalExperience',
        options: {
            template : '#ProfessionalExperienceTemplate',
            props:['results'],
            data: function () {
                return {
                    appData : appData,
                    loaded : true,
                    currentEditIndex: false,
                    resRecords: this.results,
                    modal: 'professional-experience',
                    form: {
                        fields : {
                            id : {
                                vue : "textBox",
                                name: "id",
                                initial_value: '',
                                type: 'hidden',
                            },
                            /*PersonID : {
                                vue : "textBox",
                                name: "PersonID",
                                initial_value:'',
                                type: 'hidden',
                            },*/
                            task : {
                                vue : "textBox",
                                name: "task",
                                initial_value: '',
                                label_key : 'cms.task',
                                required : true,
                            },
                            responsibility : {
                                vue : "textAreaBox",
                                name: "responsibility",
                                initial_value: '',
                                label_key : 'cms.responsibility',
                                required : true,
                            },
                            from:{
                                vue : "dateBox",
                                name: "from",
                                label_key : 'cms.from',
                                initial_value: '',
                                required : true,
                                dependents : [
                                    { 
                                        name : 'to',
                                        constrain : 'minDate',
                                    },
                                ]
                            },
                            to:{
                                vue : "dateBox",
                                name: "to",
                                initial_value: '',
                                label_key : 'cms.to',
                                required : true,
                            },
                            note:{
                                vue : "textAreaBox",
                                name: "note",
                                initial_value: '',
                                label_key : 'cms.note',
                            }
                        }
                    },
                }
            },
            methods:mySkillMethods,
        }
    });
</script>

<script type="x/template" id="EventExternalVisitedTemplate">
	<span v-if="loaded">
         <i class="add_sign" @click="addNewRecord" data-toggle="tooltip" :title="$tr('cms.add_new_record')">+</i>
        <table v-if="loaded" width="100%" class="table table-striped" >
                <tr>
                    <th class="action_col">&nbsp;</th>
                    <th>{{ $tr('cms.title') }}</th>
                    <th>{{ $tr('cms.event_type') }}</th>
                    <th>{{ $tr('cms.organizer') }}</th>
                    <th>{{ $tr('cms.from') }}</th>
                    <th>{{ $tr('cms.to') }}</th>
                    <th>{{ $tr('cms.certificate') }}</th>
                </tr>
                <tr v-if="results.length < 1 && loaded == true" style="margin: 0 auto;
            width: 100%;
            text-align: center;">
                    <td colspan="7" class="no-record">{{ $tr('cms.no_records_found') }}</td>
                </tr>
                <tr v-for="(result,index) in results" >
                    <td >
                        <i class="fas fa-pencil-alt" @click="editRecord(index)" data-toggle="tooltip" :title="$tr('cms.edit')"></i>
                        <i class="fas fa-trash-alt" aria-hidden="true" @click="deleteRecord(index)" data-toggle="tooltip" :title="$tr('cms.delete')"></i>
                    </td>
                    <td>{{ result.title }}</td>
                    <td>{{ getEventType(result.event_technique) }}</td>
                    <td >{{ result.organizer }}</td>
                    <td >{{ dateFormat(result.from,'cust_format_2') }}</td>
                    <td >{{ dateFormat(result.to,'cust_format_2') }}</td>
                    <td >
                        <ul>
                            <li v-for="document in result.documents">
                                <a target="_blank" :href="simplyOrgUrl()+'/document_upload/'+document.DocumentID+'/'+document.DocumentFileName">{{ document.DocumentFileName }}</a>
                            </li>
                        </ul>
                    </td>
                </tr>
            </table>
            <div class="modal fade" id="prof_exp_popup" role="dialog">
                <div class="modal-dialog" style="width:70%">
                
                  <!-- Modal content-->
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal">&times;</button>
                      <h4 class="modal-title">{{ $tr('cms.external_visited_seminars') }}</h4>
                    </div>
                    <div class="modal-body ">
                        <formGroup :slide="form" ref="form" ></formGroup>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default green-btn" @click="saveRecord">{{ $tr('cms.save') }}</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">{{ $tr('cms.close') }}</button>
                    </div>
                  </div>
                  
                </div>
            </div>
    </span>
</script>


<script type="text/javascript">
    
    mySkillMethods.getEventType = function(eType){
        var res = '';
        if(eType){
            var tName = 'event_technique_name';

            if(app.lang != 'en' ){
                tName = tName+'_'+app.lang;
            }
            res = eType[tName] ? eType[tName] : '';
        }
        return res;
    };
    componentsToRegister.add({ 
        name:'EventExternalVisited',

        options: {
            template : '#EventExternalVisitedTemplate',
            props:['results'],
            data: function () {
                return {
                    appData : appData,
                    loaded : true,
                    currentEditIndex: false,
                    resRecords: this.results,
                    modal: 'event-external-visited',
                    form: {
                        fields : {
                            id : {
                                vue : "textBox",
                                name: "id",
                                initial_value: '',
                                type: 'hidden',
                            },
                            /*PersonID : {
                                vue : "textBox",
                                name: "PersonID",
                                initial_value:'',
                                type: 'hidden',
                            },*/
                            title : {
                                vue : "textBox",
                                name: "title",
                                initial_value: '',
                                label_key : 'cms.title',
                                required : true,
                            },
                            content : {
                                vue : "textAreaBox",
                                name: "content",
                                initial_value: '',
                                label_key : 'cms.content',
                                required : true,
                            },
                            TechniqueID : {
                                vue : "selectBox",
                                name: 'TechniqueID',
                                modelName: 'event-technique',
                                multiple: false,
                                placeholder : 'cms.event_type',
                                label_key : 'cms.event_type',
                                preLoad: true,
                            },
                            organizer : {
                                vue : "textBox",
                                name: "organizer",
                                initial_value: '',
                                label_key : 'cms.organizer',
                                required : true,
                            },
                            from:{
                                vue : "dateBox",
                                name: "from",
                                label_key : 'cms.from',
                                initial_value: '',
                                required : true,
                                dependents : [
                                    { 
                                        name : 'to',
                                        constrain : 'minDate',
                                    },
                                ]
                            },
                            to:{
                                vue : "dateBox",
                                name: "to",
                                initial_value: '',
                                label_key : 'cms.to',
                                required : true,
                            },
                            certificate:{
                                vue : "fileBox",
                                name: "certificate",
                                initial_value: 'file_certificate',
                                label_key : 'cms.certificate_file_with_allowed_ext',
                                required : true,
                            },
                        }
                    },
                    
                }
            },
            methods:mySkillMethods,
        }
    });
</script>
<script type="x/template" id="ExpertisesAndSkillsTemplate">
	<span v-if="loaded">
         <i class="add_sign" @click="addNewRecord" data-toggle="tooltip" :title="$tr('cms.add_new_record')">+</i>
        <table v-if="loaded" width="100%" class="table table-striped" >
                <tr>
                    <th class="action_col">&nbsp;</th>
                    <th>{{ $tr('cms.shot_description') }}</th>
                   
                    <th>{{ $tr('cms.competence') }}</th>
                    <th>{{ $tr('cms.markedness') }}</th>
                    <th>{{ $tr('cms.certificate') }}</th>
                </tr>
                <tr v-if="results.length < 1 && loaded == true" style="margin: 0 auto;
            width: 100%;
            text-align: center;">
                    <td colspan="7" class="no-record">{{ $tr('cms.no_records_found') }}</td>
                </tr>
                <tr v-for="(result,index) in results" >
                    <td >
                        <i class="fas fa-pencil-alt" @click="editRecord(index)" data-toggle="tooltip" :title="$tr('cms.edit')"></i>
                        <i class="fas fa-trash-alt" aria-hidden="true" @click="deleteRecord(index)" data-toggle="tooltip" :title="$tr('cms.delete')"></i>
                    </td>
                    <td>{{ result.description }}</td>
                    <td>{{ getCompetence(result.competence) }}</td>
                    <td >{{ getMarked(result.expertise_markedness) }}</td>
                    <td >
                        <ul>
                            <li v-for="document in result.documents">
                                <a target="_blank" :href="simplyOrgUrl()+'/document_upload/'+document.DocumentID+'/'+document.DocumentFileName">{{ document.DocumentFileName }}</a>
                            </li>
                        </ul>
                    </td>
                </tr>
            </table>
            <div class="modal fade" id="prof_exp_popup" role="dialog">
                <div class="modal-dialog" style="width:70%">
                
                  <!-- Modal content-->
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal">&times;</button>
                      <h4 class="modal-title">{{ $tr('cms.expertises_and_skills') }}</h4>
                    </div>
                    <div class="modal-body ">
                        <formGroup :slide="form" ref="form" ></formGroup>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default green-btn" @click="saveRecord">{{ $tr('cms.save') }}</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">{{ $tr('cms.close') }}</button>
                    </div>
                  </div>
                  
                </div>
            </div>
    </span>
</script>


<script type="text/javascript">
    
    mySkillMethods.getCompetence = function(competence){
        var res = '';
        if(competence){
            var comName = 'competence_name';
            if(app.lang != 'en' ){
                comName = comName+'_'+app.lang;
            }
            res = competence[comName] ? competence[comName] : '';
        }
        return res;
    }
    mySkillMethods.getMarked = function(marked){
        var res = '';
        if(marked){
            var markedName = 'expertises_marked_name';
            if(app.lang != 'en' ){
                markedName = markedName+'_'+app.lang;
            }
            res = marked[markedName] ? marked[markedName] : '';
        }
        return res;
    }

    componentsToRegister.add({ 
        name:'ExpertisesAndSkills',

        options: {
            template : '#ExpertisesAndSkillsTemplate',
            props:['results'],
            data: function () {
                return {
                    appData : appData,
                    loaded : true,
                    currentEditIndex: false,
                    resRecords: this.results,
                    modal: 'expertise-skills',
                    form: {
                        fields : {
                            id : {
                                vue : "textBox",
                                name: "id",
                                initial_value: '',
                                type: 'hidden',
                            },
                            /*PersonID : {
                                vue : "textBox",
                                name: "PersonID",
                                initial_value:'',
                                type: 'hidden',
                            },*/
                            title : {
                                vue : "textBox",
                                name: "title",
                                initial_value: '',
                                label_key : 'cms.title',
                                required : true,
                            },
                            description : {
                                vue : "textAreaBox",
                                name: "description",
                                initial_value: '',
                                label_key : 'cms.description',
                                required : true,
                            },
                            competenceID : {
                                vue : "selectBox",
                                name: 'competenceID',
                                modelName: 'competence',
                                multiple: false,
                                placeholder : 'cms.competence',
                                label_key : 'cms.competence',
                                preLoad: true,
                            },
                            expertises_markedness_id : {
                                vue : "selectBox",
                                name: 'expertises_markedness_id',
                                modelName: 'expertise-markedness',
                                multiple: false,
                                placeholder : 'cms.markedness',
                                label_key : 'cms.markedness',
                                preLoad: true,
                            },
                            certificate:{
                                vue : "fileBox",
                                name: "certificate",
                                initial_value: 'file_certificate',
                                label_key : 'cms.certificate_file_with_allowed_ext',
                                required : true,
                            },
                        }
                    },
                    
                }
            },
            methods:mySkillMethods,
        }
    });
</script>

<script type="x/template" id="LanguageSkillsTemplate">
	<span v-if="loaded">
         <i class="add_sign" @click="addNewRecord" data-toggle="tooltip" :title="$tr('cms.add_new_record')">+</i>
        <table v-if="loaded" width="100%" class="table table-striped" >
                <tr>
                    <th class="action_col">&nbsp;</th>
                    <th>{{ $tr('cms.language') }}</th>
                    <th>{{ $tr('cms.markedness') }}</th>
                    <th>{{ $tr('cms.comment') }}</th>
                    <th>{{ $tr('cms.certificate') }}</th>
                </tr>
                <tr v-if="results.length < 1 && loaded == true" style="margin: 0 auto;
            width: 100%;
            text-align: center;">
                    <td colspan="7" class="no-record">{{ $tr('cms.no_records_found') }}</td>
                </tr>
                <tr v-for="(result,index) in results" >
                    <td >
                        <i class="fas fa-pencil-alt" @click="editRecord(index)" data-toggle="tooltip" :title="$tr('cms.edit')"></i>
                        <i class="fas fa-trash-alt" aria-hidden="true" @click="deleteRecord(index)" data-toggle="tooltip" :title="$tr('cms.delete')"></i>
                    </td>
                    <td>{{ result.language }}</td>
                    <td>{{ getLangMarked(result.language_markedness) }}</td>
                    <td >{{ result.comment }}</td>
                    <td >
                        <ul>
                            <li v-for="document in result.documents">
                                <a target="_blank" :href="simplyOrgUrl()+'/document_upload/'+document.DocumentID+'/'+document.DocumentFileName">{{ document.DocumentFileName }}</a>
                            </li>
                        </ul>
                    </td>
                </tr>
            </table>
            <div class="modal fade" id="prof_exp_popup" role="dialog">
                <div class="modal-dialog" style="width:70%">
                
                  <!-- Modal content-->
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal">&times;</button>
                      <h4 class="modal-title">{{ $tr('cms.external_visited_seminars') }}</h4>
                    </div>
                    <div class="modal-body ">
                        <formGroup :slide="form" ref="form" ></formGroup>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default green-btn" @click="saveRecord">{{ $tr('cms.save') }}</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">{{ $tr('cms.close') }}</button>
                    </div>
                  </div>
                  
                </div>
            </div>
    </span>
</script>


<script type="text/javascript">
    
    mySkillMethods.getLangMarked = function(marked){
        var res = '';
        if(marked){
            var markedName = 'language_marked_name';
            if(app.lang != 'en' ){
                markedName = markedName+'_'+app.lang;
            }
            res = marked[markedName] ? marked[markedName] : '';
        }
        return res;
    }

    componentsToRegister.add({ 
        name:'LanguageSkills',

        options: {
            template : '#LanguageSkillsTemplate',
            props:['results'],
            data: function () {
                return {
                    appData : appData,
                    loaded : true,
                    currentEditIndex: false,
                    resRecords: this.results,
                    modal: 'language-skills',
                    form: {
                        fields : {
                            id : {
                                vue : "textBox",
                                name: "id",
                                initial_value: '',
                                type: 'hidden',
                            },
                           /* PersonID : {
                                vue : "textBox",
                                name: "PersonID",
                                initial_value:'',
                                type: 'hidden',
                            },*/
                            language : {
                                vue : "selectBox",
                                name: 'language',
                                modelName: 'languages',
                                multiple: false,
                                placeholder : 'cms.language',
                                label_key : 'cms.language',
                                preLoad: true,
                            },
                            language_markedness_id : {
                                vue : "selectBox",
                                name: 'language_markedness_id',
                                modelName: 'language-markedness',
                                multiple: false,
                                placeholder : 'cms.markedness',
                                label_key : 'cms.markedness',
                                preLoad: true,
                            },
                            comment : {
                                vue : "textAreaBox",
                                name: "comment",
                                initial_value: '',
                                label_key : 'cms.comment',
                                required : true,
                            },
                            certificate:{
                                vue : "fileBox",
                                name: "certificate",
                                initial_value: 'file_certificate',
                                label_key : 'cms.certificate_file_with_allowed_ext',
                                required : true,
                            },
                        }
                    },
                    
                }
            },
            methods:mySkillMethods,
        }
    });
</script>
<script type="x/template" id="TrainerRequestsTemplate">
	<span v-if="loaded">
    <div class="row">
        <div class="col-lg-5 col-md-5 col-sm-5">
            <div class="input-group mb-3">
                <select type="text" placeholder="Suche" v-model="status_filter" aria-describedby="basic-addon2" class="form-control">
                    <option value=""> {{  $tr('cms.select_status') }}</option>
                    <option value="new"> {{  $tr('cms.new') }}</option>
                    <option value="waiting_for_response"> {{  $tr('cms.waiting_for_response') }}</option>
                    <option value="response_recieved"> {{  $tr('cms.response_recieved') }}</option>
                    <option value="expired"> {{  $tr('cms.expired') }}</option>
                    <option value="canceled"> {{  $tr('cms.closed') }}</option>
                </select>
                    <div class="input-group-append">
                        <button type="button" v-on:click="triggerFilter" class="btn btn-primary"><i class="fas fa-filter"></i>{{ $tr('cms.filter_by_status') }}
                                </button>
                    </div>
            </div>
        </div>
    </div>
		<table  width="100%" class="table table-striped table-with-add-button" >
            <tr>
                <th>{{ $tr('cms.request_title') }}</th>
                <th>{{ $tr('cms.request_date') }}</th>
                <th>{{ $tr('cms.expiry_date') }}</th>
                <th style="text-align: center"> {{ $tr('cms.status') }}</th>
                <th>{{ $tr('cms.detail') }}</th>
            </tr>
            <tr v-if="resRecords.length < 1 && loaded == true" style="margin: 0 auto;
        width: 100%;
        text-align: center;">
                <td colspan="5" class="no-record">{{ $tr('cms.no_records_found') }}</td>
            </tr>
            <tr v-for="(result,index) in resRecords" v-if="result.trainer_request" >
                <td :data-title="$tr('cms.request_title') + ':'">
                	<span v-if="result.trainer_request">
                		{{ result.trainer_request.request_title }}
                	</span>
                </td>
                <td :data-title="$tr('cms.request_date') + ':'">
                	<span v-if="result.trainer_request">
                		{{ dateFormat(result.trainer_request.created_at) }}
                	</span>
                </td>
                <td :data-title="$tr('cms.expiry_date') + ':'">
                    {{ dateTimeFormat(result.trainer_request.expiry_date+' '+result.trainer_request.expiry_time) }}
                </td>
                <td style="text-align: center" :data-title="$tr('cms.status') + ':'">
                    <i class="fa fa-info-circle" data-toggle="tooltip" :title="calcStatus(result)"  :style="'color:'+calcStatus(result,1)"></i>
                </td>
                <td :data-title="$tr('cms.detail') + ':'">
                	<a v-if="result.token" target="_blank" :href="'/trainer-request-details?token='+result.token.token" class="btn btn-primary">
                		{{ $tr('cms.more_details') }}
                	</a>
                </td>
            </tr>
        </table>
	</span>
</script>

<script type="text/javascript">
    
    componentsToRegister.add({ 
        name:'TrainerRequests',
        options: {
            template : '#TrainerRequestsTemplate',
            props:['results'], 
            data: function () {
                return {
                    appData : appData,
                    loaded : true,
                    modal: 'trainer-requests',
                    resRecords : this.results,
                    status_filter : 'new',
                    colors: {},
                }
            },
            mounted: function(){
                if(typeof appData.filterVars['status'] == 'undefined'){
                    appData.filterVars['status'] = 'new';
                }
                this.status_filter = appData.filterVars['status'];
            },
            methods:{
                triggerFilter: function(){
                    triggerChangeInFilter();
                },
                getColor:function(id){
                    alert(JSON.stringify(this.colors));
                    return typeof this.colors[id] != 'undefined' ? this.colors[id] : 'pink'; 
                },
                calcStatus: function(result,get_color){

                    get_color = typeof get_color == 'undefined' ? 0 : 1;


                    if(result.trainer_request.status == 0){
                        return this.$tr('cms.closed');
                    }
                    var st = {
                        'not_decided': 0,
                        'accepted': 0,
                        'declined': 0,
                    }
                    for(var i in result.requested_trainers_dates){
                        var d = result.requested_trainers_dates[i];
                        if(d.trainer_availability === null){
                            if(get_color) {
                                return '#ccc';
                            }
                            return this.$tr('cms.new');
                        }
                        console.log(d.trainer_availability,result.trainer_request.request_title);
                        console.log(d.order_status,'status');
                        if(d.trainer_availability == 1){
                            switch(d.order_status) {
                                case null:
                                    st.not_decided++;
                                    break;
                                case 0:
                                    st.declined++;
                                    break;
                                case 1:
                                    st.accepted++;
                                    break;
                                default :
                                    break;
                            }
                        }
                        console.log(st,i+' '+result.trainer_request.request_title);
                    }
                    var res = [];
                    for(var k in st){
                        if(st[k] > 0){
                            res.push(this.$tr('cms.'+k)+': '+st[k]);
                        }
                    }
                    if(get_color){
                        if(st.not_decided > 0){
                            return 'orange';
                        } else {
                            if(st.accepted > st.declined){
                                return '#77B32B';
                            } else {
                                return '#b22222';
                            }
                        }
                    } else {
                        if(this.isExpired(result)){
                            if(res.length > 0){
                                return get_color ? '#77B32B' : res.join(', ') ;
                            } else {
                                 return get_color ? '#77B32B' : this.$tr('cms.expired');
                            } 
                        }
                        return res.join(', ');
                    }
                },
                isExpired : function (result){
                    var s = result.trainer_request.expiry_date+' '+result.trainer_request.expiry_time;
                    var d = new Date(s);
                    var n = new Date();
                    console.log(d,'expiry_date');
                    console.log(n,'now');
                    return n > d ? true : false;
                },
            },
            watch: {
                status_filter: function(){
                    appData.filterVars['status'] = this.status_filter;
                }
            }
        }
    });
</script>

<script type="x/template" id="TaskChecklistTemplate">
	<span v-if="loaded">


        <div class="filter_wrapper filter_wrapper_hide">
            <div class="filter_header">
                <span class="left_text">
                    <i class="fas fa-filter"></i> {{ $tr('cms.filters')}}
                    <span class="float-md-right float-right right_text">
                        <a href="javascript:void(0)" v-on:click="clearFilters">{{ $tr('cms.clear_filters')}}</a>
                    </span>
                    
                </span>
            </div>
            <div>
                <div class="custom-control custom-checkbox" style="margin-top: 10px;">
                    <input type="checkbox" class="custom-control-input"  v-model="completed" true-value="1" false-value="0" id="completed_radio">
                    <label class="custom-control-label" for="completed_radio">{{ $tr('cms.completed')}} </label>
                    <!-- <span class="badge badge-primary badge-pill">2</span> -->
                </div>
            </div>
            <div class="filter_subheader">{{ $tr('cms.by_due_date') }}</div>
            <div class="date_wrapper">
                <formGroup ref="filterForms" :slide="appData.side_filters.date_group"></formGroup>
            </div>
            <div class="filter_subheader">{{ $tr('cms.by_due_date_dropdown') }}</div>
            <div class="date_wrapper">
                <formGroup ref="filterForms" :slide="appData.side_filters.due_date"></formGroup>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-10 col-md-9 col-sm-9">
                <div class="input-group mb-3">
                    <input type="text" class="form-control" v-model="search_text"  :placeholder="$tr('cms.search')" aria-describedby="basic-addon2">
                    <div class="input-group-append">
                        <button class="btn btn-primary" @click="search" type="button">
                            <i class="fas fa-search"></i>{{ $tr('cms.search') }}</button>
                    </div>
                </div>

            </div>
            <div class="col-lg-2 col-md-3 col-sm-3 filter_button">
                <button class="btn btn-primary" v-on:click="toggleFilter" id="filter_button" type="button">
                    <i class="fas fa-filter"></i>{{ show_hide_filter_text }}</button>

            </div>
        </div>
        <table  width="100%" class="table table-striped table-with-add-button" >
            <tr>
                
                <th>&nbsp;</th>
                <th>{{ $tr('cms.title') }} <i class="fa fa-fw fa-sort" v-on:click="sortBy('item_name')"></i></th>
                <th>{{ $tr('cms.parent_task') }} <i class="fa fa-fw fa-sort" v-on:click="sortBy('TaskName')"></i></th>
                <th>{{ $tr('cms.due_date') }} <i class="fa fa-fw fa-sort" v-on:click="sortBy('due_date')"></i></th>
                <th>{{ $tr('cms.task_owner') }} <i class="fa fa-fw fa-sort" v-on:click="sortBy('owner')"></i></th>
                <!--<th>{{ $tr('cms.category') }}</th>-->
                <th>{{ $tr('cms.file_name') }}</th>
                <th>{{ $tr('cms.note') }}</th>
                <!--<th class="action_col">&nbsp;</th>-->
            </tr>
            <tr v-if="resRecords.length < 1 && loaded == true" style="margin: 0 auto;
        width: 100%;
        text-align: center;">
                <td colspan="8">{{ $tr('cms.no_records_found') }}</td>
            </tr>
            <tr :class=" result.completed ? 'completed_task' : ''" v-for="(result,index) in resRecords" >
                
                <td>
                    <div class="round">
                        <input v-on:click="markChecklistItem($event)" :data-id="result.id" type="checkbox" v-model="result.completed" :id="'checkbox_'+result.id" />
                        <label :for="'checkbox_'+result.id"></label>
                    </div>
                </td>
                <td :data-title="$tr('cms.title')"><Highlight :text="result.item_name" :search_text="appData.filterVars.search_text"></Highlight></td>
                <td :data-title="$tr('cms.parent_task')">{{ result.TaskName }}</td>
                <td :data-title="$tr('cms.due_date')"><span :class="dueDateClass(result)"> {{ dateFormat(result.due_date) }} </span></td>
                <td :data-title="$tr('cms.task_owner')"><a style="color: #000;" :href="'mailto:'+result.owner_email+'?subject='+result.item_name+' | '+result.TaskName">{{  result.owner }}</td>
                <!--<td :data-title="$tr('cms.category')" class="wrapped_details">{{  result.category_name }}</td>-->
                <td :data-title="$tr('cms.notes')" class="wrapped_details"> 
                    <a v-if="result.file_name" :href="simplyOrgUrl+'/download_document/'+result.document_id"><i data-toggle="tooltip" :title="$tr('cms.download')"  class="fa fa-paperclip yellow tooltips"></i></a> 
                    <i  data-toggle="tooltip" :title="$tr('cms.no_download')" v-else class="fa fa-paperclip tooltips"></td>
                <td :data-title="$tr('cms.notes')" class="wrapped_details"> <i v-if="result.note" style="color:#ffd519;" @click="editRecord(index)" class="fa fa-file" aria-hidden="true"></i> <i v-else  class="fa fa-file" aria-hidden="true" @click="editRecord(index)" ></i></td>
<!--                <td :data-title="$tr('cms.actions')">
                    <i class="fas fa-pencil-alt tooltips" @click="editRecord(index)" data-toggle="tooltip" :title="$tr('cms.edit')"></i>
                    <i class="fas fa-trash-alt tooltips" aria-hidden="true" @click="deleteRecord(index)" data-toggle="tooltip" :title="$tr('cms.delete')"></i>
                </td>-->
            </tr>
        </table>


        <div class="modal fade" id="prof_exp_popup" role="dialog">
            <div class="modal-dialog" style="width:70%">
            
              <!-- Modal content-->
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                  <h4 class="modal-title">{{ $tr('cms.note') }}</h4>
                </div>
                <div class="modal-body ">
                    <formGroup :slide="form" ref="form" ></formGroup>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default green-btn" @click="saveRecord">{{ $tr('cms.save') }}</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">{{ $tr('cms.close') }}</button>
                </div>
              </div>
              
            </div>
        </div>
    </span>
</script>

<script type="text/javascript">


    chMethods = {
        load: function load() {
            if (typeof this.preLoaded != 'undefined') {
                this.results = this.preLoaded.data;
                this.loaded = true;
                return false;
            }
            var _this = this;
            if (_this.busy) {
                return false;
            }
            if (_this.currentReqest != false) {
                _this.currentReqest.abort();
            }
            _this.busy = true;
            _this.loaded = true;
            blockUI('.container');
            /*if(typeof _this.$refs.filters.$refs.filterFields != 'undefined'){
            $.each(_this.$refs.filters.$refs.filterFields,function(index,field){
                _this.appData.filterVars[field.fieldObj.name] = field.getValue();
            })
            }*/
            var params = typeof this.filters == 'undefined' ? {} : JSON.parse(JSON.stringify(this.filters));
            params = Object.assign(params, _this.appData.filterVars);

            var params = JSON.stringify(params);
            this.resRecords = [];
            blockUI();
            _this.currentReqest = $.get(getBaseUrl() + 'Base/search&model=' + this.urlModel + '&method=' + this.urlMethod + '&params=' + params, function (data) {
                _this.resRecords = data.data;
                console.log(data);
                updatePagination(data);
                unblockUI('.container');
                _this.busy = false;
                $('.tooltips').tooltip();
                //window.sR = _this;
                //_this.reRender();
            }).error(function () {
                unblockUI('.container');
            });
            Requests.push(_this.currentReqest);
        },
        dueDateClass: function dueDateClass(result) {
            var cls = '';
            var dd = new Date(result.due_date);
            var today = new Date();
            if (today >= dd && !result.completed) {
                cls = "overdue";
            }
            return cls;
        },
        markChecklistItem: function markChecklistItem(event) {
            var _this = this;
            _this.$nextTick(function () {
                var params = {};
                params.id = $(event.target).attr('data-id');
                params.completed = $(event.target).prop('checked') ? 1 : 0;
                blockUI();
                $.post(getBaseUrl() + 'Base/saveRecord&model=task-checklist-items', { params: JSON.stringify(params) }, function (data) {
                    _this.load();
                });
            });
        },
        toggleFilter: function toggleFilter() {
            if (this.filterVisible == false) {
                $(".filter_wrapper").removeClass("filter_wrapper_hide");
                $('.catalog_container').parent().addClass('slide_me');
                this.show_hide_filter_text = this.$tr('cms.hide_filters');
                this.filterVisible = true;
            } else {
                $(".filter_wrapper").addClass("filter_wrapper_hide");
                $('.catalog_container').parent().removeClass('slide_me');
                this.show_hide_filter_text = this.$tr('cms.show_filters');
                this.filterVisible = false;
            }
        },
        clearFilters: function clearFilters() {
            console.log(this.$children);
            for (var i in this.$children) {
                var child = this.$children[i];
                console.log(child.$children);
                for (var j in child.$children) {
                    if (typeof child.$children[j].value != 'undefined') {
                        child.$children[j].value = '';
                    }
                    if (typeof child.$children[j].resetValue == 'function') {
                        child.$children[j].resetValue();
                    }
                    if (child.$children[j].field.context == 'filter') {
                        appData.filterVars[child.$children[j].field.name] = '';
                    }
                }
            }
            //this.load();
        },
        search: function search() {
            appData.filterVars['search_text'] = this.search_text;
            this.changeInFilter();
        },
        sortBy: function search(sortBy) {
            appData.filterVars['sort_by'] = sortBy;
            this.order_by = this.order_by == 'ASC'? 'DESC' : 'ASC' ;
            appData.filterVars['sort_order'] = this.order_by;
            this.changeInFilter();
        },
        changeInFilter: function changeInFilter() {
            this.load();
        },
        reportChange: function reportChange(field, val) {
            if (field.context && field.context == 'filter' && this.listen_for_changes == true) {
                appData.filterVars[field.name] = val;
                this.changeInFilter();
            }
        }
    };
    var TaskChecklistMethods = Object.assign({}, mySkillMethods, chMethods);
    //var TaskChecklistMethods = {};
    componentsToRegister.add({
        name: 'TaskChecklist',
        options: {
            template: '#TaskChecklistTemplate',
            props: [],
            data: function data() {
                return {
                    appData: appData,
                    search_text: '',
                    completed: 0,
                    loaded: false,
                    order_by:'ASC',
                    filterVisible: false,
                    show_hide_filter_text: this.$tr('cms.show_filters'),
                    currentEditIndex: false,
                    resRecords: [],
                    modal: 'task-checklist-items',
                    listen_for_changes: false,
                    start_date: '',
                    end_date: '',
                    category_id: '',
                    simplyOrgUrl: window.user.settings.simplyOrgUrl,
                    urlModel: 'task-checklist-items',
                    urlMethod: 'search',
                    currentReqest: false,

                    form: {
                        fields: {
                            id: {
                                vue: "textBox",
                                name: "id",
                                initial_value: '',
                                type: 'hidden'
                            },
                            note: {
                                vue: "textAreaBox",
                                name: "note",
                                initial_value: '',
                                label_key: 'cms.note'
                            }
                        }
                    }
                };
            },
            mounted: function mounted() {
                var _this = this;
                setTimeout(function () {
                    _this.listen_for_changes = true;
                }, 2000);
                appData.filterVars['completed'] = 0;
                this.load();
            },
            watch: {
                completed: function completed() {
                    appData.filterVars['completed'] = this.completed;
                    this.changeInFilter();
                }
            },
            methods: TaskChecklistMethods
        }
    });
</script>



<script id="page_identifier" data-page="MyDocuments">
    // palce this in all simplyOrg templates so vue js can be initialized
</script>

<script type="x/template" id="paginationTemplate">
    
    <div class="pagination_wrapper">
        <div class="row">

            <div class="col-md-7">
                <span class="pagination_left_text">{{ $tr('cms.showing') }} {{ current_page }} {{ $tr('cms.of') }} {{ num_of_pages }} {{ $tr('cms.pages') }}</span> <span class="pagination_middle_text">
                    <select v-model="per_page" class="custom-select items_on_page">
                        <option value="10">10</option>
                        <option value="20">20</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                    </select> {{ $tr('cms.records_per_page') }} </span>
            </div>

            <div class="col-md-5">
                <nav aria-label="Page navigation example">
                    <ul class="pagination justify-content-end">
                        <li :class="prevClass()">
                            <a class="page-link" @click="changePage(current_page-1)" href="javascript:void(0)" tabindex="-1">
                                <i class="fas fa-angle-double-left"></i>
                            </a>
                        </li>

                        <li class="page-item" v-if="display_pages.indexOf(1) === -1">
                            <a class="page-link" @click="changePage(1)"> 1 </a>
                        </li>
                        <li class="page-item" v-if="display_pages.indexOf(1) === -1">
                            <a class="page-link">..</a>
                        </li>

                        <li v-for="n in display_pages" :class="liClass(n)" v-if="n > 0">
                            <a class="page-link" href="javascript:void(0)" @click="changePage(n)"> {{ n }}</a>
                        </li>


                        <li class="page-item" v-if="display_pages.indexOf(num_of_pages) === -1">
                            <a class="page-link">..</a>
                        </li>
                        <li class="page-item" v-if="display_pages.indexOf(num_of_pages) === -1">
                            <a class="page-link" @click="changePage(num_of_pages)"> {{ num_of_pages }} </a>
                        </li>

                        <li :class="nextClass()">
                            <a class="page-link" @click="changePage(current_page+1)" href="javascript:void(0)">
                                <i class="fas fa-angle-double-right"></i>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</script>
<script type="x/template" id="MyDocumentsTemplate">
    <span v-if="loaded">
        <div class="container-fluid document_header" >
	        <div class="container">
	            <div class="row">
	                <div class="col-md-10 col-lg-10 col-sm-8 headerText">
	                    <small class="h4 document_header_line_1">{{ $tr('cms.my_documents') }}</small> <br />
	                </div>

                    <div class="col-md-2 col-lg-2 col-sm-4" style="margin-top:25px;">
                        <ul style="display:flex" class="pull-right">
                            <li class="nav-item documents-grid">

                                <a class="nav-link" id="documentsgrid-tab" 
                                    href="javascript:" @click="gridview()" role="tab" aria-controls="documents"
                                    aria-selected="false">
                                    <img src="ext/simply_org_pro/Resources/Public/Images/gridview.svg" class="gridview">
                                </a>
                            </li>  
                            <li class="nav-item documents-list">
                                <a class="nav-link" id="documentslist-tab" 
                                    href="javascript:" @click="listview()" role="tab" aria-controls="documents"
                                    aria-selected="false">
                                    <!-- <i class="fa fa-list active" aria-hidden="true"></i> -->
                                    <img src="ext/simply_org_pro/Resources/Public/Images/listview.svg" class="listview">
                                </a>
                            </li>
                        </ul>
                    </div>
	            </div>
            </div>
        </div>

        <div class="my_documents container seminar_main_wrapper">
            <div class="mt-4  document_list_view" id="document_list_view">
                <div class="d-flex ">
      
                    <div class="col-md-3 seminar_documents tab-button-wrpper">
                        <button class="btn btn-outline-secondary seminar_documents_filter active "   v-on:click="seminarDocuments">{{ $tr('cms.seminar_documents') }}</button>
                            <!-- <button class="btn btn-outline-secondary"><b>{{ $tr('cms.seminar_documents') }}</b></button> -->
                    </div>
                    
                    <div class="col-md-3 general_documents tab-button-wrpper">
                        <button class="btn btn-outline-secondary general_documents_filter "   @click="general_documents">{{ $tr('cms.general_documents') }}</button>
                            <!-- <button class="btn btn-outline-secondary"><b>General Documents</b></button> -->
                    </div>
                </div>

                <div class="mt-4 row" >   
                    <div class="col-md-12 seminar-documents">
                        <table width="100%" class="table table-striped ">
                        <tr>
                        <th>{{ $tr('cms.seminar_title') }}</th>
                        <th>{{ $tr('cms.document_title') }}</th>
                        <!-- <th>{{ $tr('cms.document_category') }}</th> -->
                        <th>{{ $tr('cms.document_author') }}</th>
                        <th>{{ $tr('cms.document_upload_date') }}</th>
                        <!-- <th>{{ $tr('cms.description') }}</th> -->
                        <th>{{ $tr('cms.download') }}</th>

                        </tr>
                        <tr v-if="resRecords.length < 1 && loaded == true"  style="margin: 0 auto;
                        width: 100%;
                        text-align: center;">
                        <td colspan="7" class="no-record">{{ $tr('cms.no_records_found') }}</td>
                        </tr>
                        <tr v-for="(result,index) in resRecords" >
                        <td :data-title="$tr('cms.document_title') + ':'" >{{ result.seminar_title }}</td>
                        <td :data-title="$tr('cms.document_title') + ':'" >{{ result.DocumentTitle }}</td>
                        <!-- <td :data-title="$tr('cms.document_category') + ':'" >{{  result.category }}</td> -->
                        <td :data-title="$tr('cms.document_author') + ':'" >{{ result.added_by }}</td>
                        <!-- <td v-else :data-title="$tr('cms.document_author') + ':'" >{{ $tr('cms.by_you') }}</td> -->
                        <td :data-title="$tr('cms.document_upload_date') + ':'" >{{ result.upload_date }}</td>
                        <!-- <td :data-title="$tr('cms.description') + ':'" >{{  result.DocumentDescription }}</td> -->
                        <td :data-title="$tr('cms.download') + ':'" :colspan="12" class="overflowwrap">
                        <img src="https://img.icons8.com/windows/32/000000/file-download.png"/><a target="_blank" :href="result.url" download > {{ result.DocumentFileName }} </a>   
                        </td>
                        <td>
                        <span v-if="window.user.user.UserID == result.CreatedBy" class="delete_my_document" @click="deleteDocument(result.DocumentID)"><img src="ext/simply_org_pro/Resources/Public/Images/delete-icon.svg"  class=""></span>
                        </td>

                        </tr>
                        </table>
                    </div>

                    <div class="col-md-12 general-documents">
                        <table width="100%" class="table table-striped ">
                        <tr>
                        <th>{{ $tr('cms.document_title') }}</th>
                        <th>{{ $tr('cms.description') }}</th>
                        <th>{{ $tr('cms.document_category') }}</th>
                        <th>{{ $tr('cms.document_upload_date') }}</th>
                        <th>{{ $tr('cms.download') }}</th>

                        </tr>

                        <tr v-if="resRecords.length < 1 && loaded == true"  style="margin: 0 auto;
                        width: 100%;
                        text-align: center;">
                        <td colspan="7" class="no-record">{{ $tr('cms.no_records_found') }}</td>
                        </tr>
                        <tr v-for="(result,index) in resRecords" >
                        <td :data-title="$tr('cms.document_title') + ':'" >{{ result.DocumentTitle }}</td>
                        <td :data-title="$tr('cms.description') + ':'" >{{  result.DocumentDescription }}</td>
                        <td :data-title="$tr('cms.document_category') + ':'" ><span v-if="window.app_language=='en'">{{ result.DocumentCategoryID }}</span><span v-else>{{ result.DocumentCategoryNameDE }}</span></td>
                        <td :data-title="$tr('cms.document_upload_date') + ':'" >{{  result.upload_date }}</td>
                        <td :data-title="$tr('cms.download') + ':'" >
                            <img src="https://img.icons8.com/windows/32/000000/file-download.png"/><a target="_blank" :href="result.url" download > {{ result.DocumentFileName }} </a>   
                        </td>

                        </tr>
                        </table>
                    </div>
                </div>
            </div>

            <div class="grid-div document_grid_view" id="document_grid_view">
                <div class="row" >
                    <div class="card_layout col-lg-4 col-md-4 col-12" v-for="(result,index) in resRecords">
            
                        <div class="card hover remove_hover" >
                            <a :href="result.url" target="blank" class="download_doc grid-view">
                                <img src="ext/simply_org_pro/Resources/Public/Images/doc-grid.png" class="profile-img">
                                <div class="card-body">
                                    <p class="heading font-weight-bold mb-1">{{ result.seminar_title }}</p>
                                    <a target="_blank" :href="result.url" download class="download_doc"> {{ result.DocumentTitle }} </a>
                                    <p class="document-text" >{{ result.upload_date }} | {{ result.added_by }}</p>
                                    <!-- <p class="date-text" v-else>{{ result.upload_date }} | By {{ $tr('cms.by_you')}}</p> -->
                                </div>
                            </a>
                        </div>
            
                    </div>
                </div>
            </div>

            <pagination ref="pagination" ></pagination>

        </div>
   
    </span>
</script>



<script type="x/template" id="CourseDocumentListTemplate">
    <span v-if="loaded">
   
    <div class="filter_wrapper filter_wrapper_hide">
        <div class="filter_header">
            <span class="left_text">
                <i class="fas fa-filter"></i> {{ $tr('cms.filters')}}
                <span class="float-md-right float-right right_text">
                    <a href="javascript:void(0)" v-on:click="clearFilters">{{ $tr('cms.clear_filters')}}</a>
                </span>
                
            </span>
        </div>
        <span v-if="filtersLoaded" >
            <div class="filter_subheader">{{ $tr('cms.event') }}</div>
            <div class="date_wrapper">
                <formGroup ref="filterForms" :slide="eventSlide"></formGroup>
            </div>
            
            <div class="filter_subheader">{{ $tr('cms.category') }}</div>
            <div class="date_wrapper">
                <formGroup ref="filterForms" :slide="catSlide"></formGroup>
            </div>
        </span>
        <span class="float-md-right float-right right_text">
            <a href="javascript:void(0)" v-on:click="toggleFilter">{{ $tr('cms.hide_filters')}}</a>
        </span>
    </div>

    <div class="row">
        <div class="col-lg-10 col-md-9 col-sm-9">
            <div class="input-group mb-3">
                <input type="text" class="form-control" v-model="search_text"  :placeholder="$tr('cms.search')" aria-describedby="basic-addon2">
                <div class="input-group-append">
                    <button class="btn btn-primary" @click="search" type="button">
                        <i class="fas fa-search"></i>{{ $tr('cms.search') }}</button>
                </div>
            </div>

        </div>
        <div class="col-lg-2 col-md-3 col-sm-3 filter_button">
            <button class="btn btn-primary" v-on:click="toggleFilter" id="filter_button" type="button">
                <i class="fas fa-filter"></i>{{ show_hide_filter_text }}</button>

        </div>
         
    </div>


   
    <table width="100%" class="table table-striped">
    <tr>
        <th>{{ $tr('cms.document_title') }}</th>
        <th>{{ $tr('cms.seminar_title') }}</th>
        <th>{{ $tr('cms.document_category') }}</th>
        <th>{{ $tr('cms.description') }}</th>
        <th>{{ $tr('cms.download') }}</th>
    </tr>
    <tr v-if="resRecords.length < 1 && loaded == true"  style="margin: 0 auto; width: 100%;text-align: center;">
        <td colspan="7" class="no-record">{{ $tr('cms.no_records_found') }}</td>
    </tr>
    <tr v-for="(result,index) in resRecords" >
    <td :data-title="$tr('cms.document_title') + ':'" >{{ result.DocumentTitle }}</td>
    <td :data-title="$tr('cms.seminar_title') + ':'" >{{ result.planned_event_name }}</td>
    <td :data-title="$tr('cms.document_category') + ':'" >{{  result.category }}</td>
    <td :data-title="$tr('cms.description') + ':'" >{{  result.DocumentDescription }}</td>
    <td :data-title="$tr('cms.download') + ':'" >
    <a target="_blank" :href="result.url" download > {{ result.DocumentFileName }} </a>   
    </td>

    </tr>
    </table>
   
    </span>
</script>
<script type="text/javascript">
    componentsToRegister.add({
            name: 'CourseDocumentList',
            options: {
                template: '#CourseDocumentListTemplate',
                props: [],
                data: function () {
                    var catSlide = JSON.parse(JSON.stringify(appData.side_filters.common_filters.categories));
                    catSlide.fields.categories.modelName = 'document-category'
                    return {
                        appData: appData,
                        search_text: '',
                        completed: 0,
                        loaded: false,
                        filtersLoaded: false,
                        urlModel: 'course-documents',
                        urlMethod: 'search',
                        show_hide_filter_text: this.$tr('cms.show_filters'),
                        currentReqest: false,
                        filterVisible: false,
                        filters: {},
                        resRecords: [],
                        eventSlide: {
                            fields:{
                                event_ids: {
                                    "vue":"selectBox",
                                    "name":"event_ids",
                                    "context":"filter",
                                    "placeholder":"cms.seminars",
                                    "preOptions":[],
                                   
                                },
                            }
                        },
                        catSlide:catSlide
                        
                    }
                },
                created: function () {
                    eventHub.$on('selectboxChange-event_ids', this.changeInFilter);
                    eventHub.$on('selectboxChange-CategoryID', this.changeInFilter);
                    
                },
                beforeDestroy: function () {

                },
                mounted: function () {
                    var _this = this;
                    setTimeout(function () {
                        _this.listen_for_changes = true;
                    }, 2000);
                    appData.filterVars['completed'] = 0;
                    this.load();
                },
                watch: {
                    completed: function () {
                        appData.filterVars['completed'] = this.completed;
                        this.changeInFilter();
                    },
                    search_text: function(){
                        this.filters['search_text'] = this.search_text;
                        appData.filterVars['search_text'] = this.search_text;
                    }
                },
                methods: {
                   
                    changeInFilter: function (data) {
                        if(data.field){
                            if(data.selected){
                                this.filters[data.field.name] = data.vueRef.getValue();
                            } else {
                                this.filters[data.field.name] = '';
                            }
                        }
                        this.load();
                    },
                    hideFilters: function(){

                    },
                    load: function () {
                        var _this = this;
                        /*Load filters*/
                        if(this.filtersLoaded == false){
                            var p = {
                                PersonID : window.user.user.PersonID,
                            };
                            $.get(getBaseUrl() + 'Base/search&model=course-documents&method=getPersonEvents&params=' + JSON.stringify(p),function(data){
                                if(data.data){
                                    _this.eventSlide.fields.event_ids.preOptions = [];
                                    $.each(data.data,function(){
                                        _this.eventSlide.fields.event_ids.preOptions.push({
                                            label: this.planned_event_name,
                                            value: this.id,
                                        });
                                    })
                                    _this.filtersLoaded = true;
                                    

                                } else {
                                    notify('error',_this.$tr('cms.failed_to_load_filters'));
                                }
                            });
                           
                           
                        }

                        /*Load filters - END*/
                        if (typeof this.preLoaded != 'undefined') {
                            this.results = this.preLoaded.data;
                            this.loaded = true;
                            return false;
                        }

                        
                        if (_this.busy) {
                            return false;
                        }
                        if (_this.currentReqest != false) {
                            _this.currentReqest.abort();
                        }
                        _this.busy = true;
                        _this.loaded = true;
                        blockUI('.container');
                        var params = typeof this.filters == 'undefined' ? {} : JSON.parse(JSON.stringify(this.filters));
                        params = Object.assign(params, _this.appData.filterVars);
                        var params = JSON.stringify(params);
                        blockUI();

                        _this.currentReqest = $.get(getBaseUrl() + 'Base/search&model=' + this.urlModel + '&method=' + this.urlMethod + '&params=' + params, function (data) {
                            _this.resRecords = data.data;
                            console.log(data);
                            updatePagination(data);
                            unblockUI('.container');
                            _this.busy = false;

                            //window.sR = _this;
                            //_this.reRender();

                        }).error(function () {
                            unblockUI('.container');
                        });
                        Requests.push(_this.currentReqest);
                    },
                    clearFilters: function clearFilters(){
                        for (var i in this.$children) {
                            var child = this.$children[i];
                            console.log(child.$children);
                            for (var j in child.$children) {
                                if (typeof child.$children[j].value != 'undefined') {
                                    child.$children[j].value = '';
                                }
                                if (typeof child.$children[j].resetValue == 'function') {
                                    child.$children[j].resetValue();
                                }
                                
                            }
                        }
                        appData.page =1;
                        this.search_text = '';
                        this.filters = {};
                        this.load();
                    },
                    search: function search(){
                        this.load();
                    },
                    toggleFilter: function toggleFilter() {
                        if (this.filterVisible == false) {
                            $(".filter_wrapper").removeClass("filter_wrapper_hide");
                            $('.catalog_container').parent().addClass('slide_me');
                            this.show_hide_filter_text = this.$tr('cms.hide_filters');
                            this.filterVisible = true;
                        } else {
                            $(".filter_wrapper").addClass("filter_wrapper_hide");
                            $('.catalog_container').parent().removeClass('slide_me');
                            this.show_hide_filter_text = this.$tr('cms.show_filters');
                            this.filterVisible = false;
                        }
                    },
                },
               
            }
        });
</script>
<script type="x/template" id="CourseDetailsTemplate">
    <span v-if="loaded">
   
   <table width="100%" class="table table-striped">
			<tr>
				<th>{{ $tr('cms.seminar_title') }}</th>
				<th>{{ $tr('cms.bigin_date') }}</th>
				<th style="min-width:130px;">{{ $tr('cms.end_date') }}</th>
				<th>{{ $tr('cms.seminar_status') }}</th>
				<th>{{ $tr('cms.booking_date') }}</th>
				<th>{{ $tr('cms.documents') }}</th>
				<!--<th>{{ $tr('cms.feedback_requests') }}</th>-->
			</tr>
			<tr v-if="resRecords.length < 1 && loaded == true" style="margin: 0 auto;
		width: 100%;
		text-align: center;">
				<td colspan="7" class="no-record">{{ $tr('cms.no_records_found') }}</td>
			</tr>
			<tr v-for="(result,index) in resRecords" >
				<td :data-title="$tr('cms.seminar_title') + ':'">{{ result.event_name }}</td>
				<td :data-title="$tr('cms.bigin_date') + ':'">{{ dateFormat(result.event_startdate,'cust_format_2') }}</td>
				<td :data-title="$tr('cms.end_date') + ':'">{{ dateFormat(result.event_enddate,'cust_format_2') }}</td>
				<td :data-title="$tr('cms.seminar_status') + ':'"> {{ result.status }} </td>
				<td :data-title="$tr('cms.booking_date') + ':'"> {{ dateFormat(result.booking_date,'cust_format_2') }} </td>
				<td :data-title="$tr('cms.documents') + ':'">
					<ul class="user_docs">
						<li v-for="doc in result.documents">
							<a target="_blank" :href="doc.url"> {{ doc.name }}</a>
						</li>
					</ul>
				</td>
				<!--<td :data-title="$tr('cms.feedback_requests') + ':'">&nbsp;</td> -->
			</tr>
		</table>
   
    </span>
</script>
<script type="text/javascript">
        componentsToRegister.add({
            name: 'MyCourses',
            options: {
                template: '#CourseDetailsTemplate',
                props: [],
                data: function () {
                    return {
                        appData: appData,
                        search_text: '',
                        completed: 0,
                        loaded: false,
                        urlModel: 'person',
                        urlMethod: 'myCourses',
                        currentReqest: false,
                        resRecords: [],
                        
                       
                    }
                },
                mounted: function () {
                    var _this = this;
                    setTimeout(function () {
                        _this.listen_for_changes = true;
                    }, 2000);
                    appData.filterVars['completed'] = 0;
                    this.load();
                },
                watch: {
                    completed: function () {
                        appData.filterVars['completed'] = this.completed;
                        this.changeInFilter();
                    }
                },
                methods: {
                    changeInFilter: function () {
                        this.load();
                    },

                    load: function () {
                        if (typeof this.preLoaded != 'undefined') {
                            this.results = this.preLoaded.data;
                            this.loaded = true;
                            return false;
                        }

                        var _this = this;
                        if (_this.busy) {
                            return false;
                        }
                        if (_this.currentReqest != false) {
                            _this.currentReqest.abort();
                        }
                        _this.busy = true;
                        _this.loaded = true;
                        blockUI('.container');
                        var params = typeof this.filters == 'undefined' ? {} : JSON.parse(JSON.stringify(this.filters));
                        params = Object.assign(params, _this.appData.filterVars);
                        var params = JSON.stringify(params);
                        blockUI();

                        _this.currentReqest = $.get(getBaseUrl() + 'Base/search&model=' + this.urlModel + '&method=' + this.urlMethod + '&params=' + params, function (data) {
                               _this.resRecords = data.data;
                          
                            updatePagination(data);
                            unblockUI('.container');
                            _this.busy = false;

                            //window.sR = _this;
                            //_this.reRender();

                        }).error(function () {
                            unblockUI('.container');
                        });
                        Requests.push(_this.currentReqest);
                    }
                }
            }
        });
</script>

<script type="x/template" id="MyElearningsTemplate">
    <span v-if="loaded">

   <table width="100%" class="table table-striped">
			<tr>
				<th>{{ $tr('cms.title') }}</th>
				<th>{{ $tr('cms.valid_from') }}</th>
				<th>{{ $tr('cms.valid_to') }}</th>
				<th>{{ $tr('cms.seminar_status') }}</th>
				<th>{{ $tr('cms.booking_date') }}</th>
                <th>{{ $tr('cms.action') }}</th>

			</tr>
			<tr v-if="resRecords.length < 1 && loaded == true" style="margin: 0 auto;
		width: 100%;
		text-align: center;">
				<td colspan="7" class="no-record">{{ $tr('cms.no_records_found') }}</td>
			</tr>
			<tr v-for="(result,index) in resRecords" >
				<td :data-title="$tr('cms.title') + ':'">{{ result.eventObj.title }}</td>
				<td :data-title="$tr('cms.valid_from') + ':'">{{ dateFormat(result.eventObj.valid_from,'cust_format_2') }}</td>
				<td :data-title="$tr('cms.valid_to') + ':'">{{ dateFormat(result.eventObj.valid_to,'cust_format_2') }}</td>
				<td :data-title="$tr('cms.seminar_status') + ':'"> {{ $tr('cms.'+result.status) }} </td>
				<td :data-title="$tr('cms.booking_date') + ':'"> {{ dateFormat(result.created_at,'cust_format_2') }} </td>
				<td :data-title="$tr('cms.action') + ':'"> {{  }}
                    <span v-if="result.status == 'invited'">
                        <button  @click="accept(result.id,index)" class="btn btn-primary" > {{ $tr('cms.accept') }}</button>
                    </span>
                    <span v-else>
                        <button v-if="showLaunchButton(result)" class="btn btn-primary" v-on:click="launchCourse(result.eventObj.id)"> {{ $tr('cms.launch_course') }} </button>
                        <button v-if="['2','3','4'].indexOf(result.eventObj.learn_from) != -1" class="btn btn-primary"  v-on:click="downloadFile(result.eventObj.id,result.id)"> {{ $tr('cms.download') }} </button>
                    </span>
                </td>
			</tr>
		</table>

    </span>
</script>
<script type="text/javascript">
        componentsToRegister.add({
            name: 'MyElearnings',
            options: {
                template: '#MyElearningsTemplate',
                props: [],
                data: function () {
                    return {
                        appData: appData,
                        search_text: '',
                        completed: 0,
                        loaded: false,
                        urlModel: 'attendee',
                        urlMethod: 'searchRecords',
                        currentReqest: false,
                        resRecords: [],
                        filters: {
                            model: 'e-learning',
                        }


                    }
                },
                mounted: function () {
                    var _this = this;
                    setTimeout(function () {
                        _this.listen_for_changes = true;
                    }, 2000);
                    this.load();
                },
                watch: {
                    completed: function () {
                        appData.filterVars['completed'] = this.completed;
                        this.changeInFilter();
                    }
                },
                methods: {
                    changeInFilter: function () {
                        this.load();
                    },
                    showLaunchButton: function showLaunchButton(result) {
                        const current_date = moment().format('YYYY-MM-DD');
                        const end_date = moment(new Date(result.eventObj.valid_to)).format(
                            'YYYY-MM-DD');
                        if (['1'].indexOf(result.eventObj.learn_from) != -1) {

                            if (['completed', 'passed'].indexOf(result.success_status) == -1 && [
                                    'completed', 'passed'
                                ].indexOf(result.completion_status) == -1 && current_date <=
                                end_date) {
                                return true;
                            }

                        }
                        return false;

                    },
                    load: function () {
                        if (typeof this.preLoaded != 'undefined') {
                            this.results = this.preLoaded.data;
                            this.loaded = true;
                            return false;
                        }

                        var _this = this;
                        if (_this.busy) {
                            return false;
                        }
                        if (_this.currentReqest != false) {
                            _this.currentReqest.abort();
                        }
                        _this.busy = true;
                        _this.loaded = true;
                        blockUI('.container');
                        var params = typeof this.filters == 'undefined' ? {} : JSON.parse(JSON
                            .stringify(this.filters));
                        params = Object.assign(params, _this.appData.filterVars);
                        var params = JSON.stringify(params);

                        blockUI();

                        _this.currentReqest = $.get(getBaseUrl() + 'Base/search&model=' + this
                            .urlModel + '&method=' + this.urlMethod + '&params=' + params,
                            function (data) {
                                _this.resRecords = data.data;

                                updatePagination(data);
                                unblockUI('.container');
                                _this.busy = false;

                                //window.sR = _this;
                                //_this.reRender();

                            }).error(function () {
                            unblockUI('.container');
                        });
                        Requests.push(_this.currentReqest);
                    },

                    accept: function (id, resIndex) {
                        var params = {
                            id: id
                        };
                        params = JSON.stringify(params);
                        var _this = this;
                        $.get(getBaseUrl() + 'Base/search&model=' + this.urlModel +
                            '&method=acceptInvitation&params=' + params,
                            function (data) {
                                if (data.type == 'success') {
                                    _this.resRecords[resIndex].status = 'confirmed';
                                    _this.reRender();
                                } else {
                                    notify(data.type, data.message);
                                }
                            });
                    },
                    launchCourse: function (id) {
                        window.location.href = "/scorm-player?course_id=" + id;
                    },
                    downloadFile: function (id, attendee_id) {
                        var url = getBaseUrl() + 'ELearning/downloadCourseFile&course_id=' + id +
                            '&attendee_id=' + attendee_id;
                        window.open(url, '_blank');
                    }
                }
            }
        });
</script>

<script type="x/template" id="SettingsTemplate">
    <span v-if="loaded">
        <div v-if="typeof result.trainer_property != 'undefined' && result.trainer_property != null && result.trainer_property.token != null && result.trainer_property.token.trim() != ''">
            
            <div class="row">
                <div class="col-md-6">
                    <div class="common-div">{{ $tr('cms.sync_cal_connected_msg') }}</div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="common-div">
                        <a v-if="result.trainer_property.sync_type == 'office365'" class="btn btn-default connected">
                            <img class="connected-check-img pull-left" src="../../typo3conf/ext/simply_org_pro/Resources/Public/Images/calendar-icons/check-icon.svg" />
                            <img class="sync-img pull-right" src="../../typo3conf/ext/simply_org_pro/Resources/Public/Images/calendar-icons/Office_365icon.svg" />
                        </a>

                        <a v-if="result.trainer_property.sync_type == 'google'" class="btn btn-default connected" >
                            <img class="connected-check-img pull-left" src="../../typo3conf/ext/simply_org_pro/Resources/Public/Images/calendar-icons/check-icon.svg" />
                            <img class="sync-img pull-right" src="../../typo3conf/ext/simply_org_pro/Resources/Public/Images/calendar-icons/Google-calendaricon.svg" />
                        </a>
                    </div>
                </div>
            </div>

            <div v-if="result.trainer_property.is_synced && (typeof result.trainer_property.watch_event_webhook == 'undefined' || result.trainer_property.watch_event_webhook == null)" class="row">
                <div class="col-md-12">
                    <div class="common-div">
                        <p class="text-danger">{{ $tr('cms.sync_cal_webhook_error_message') }}</p>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="common-div">
                        <label class="toggle-switch">
                            <input type="checkbox" id="is_day_occupied" v-on:change="saveDayOccupied(result.trainer_property)" v-model="result.trainer_property.is_day_occupied">
                            <span class="toggle-slider round"></span>
                        </label>
                        <label class="text-label" for="is_day_occupied">{{ $tr('cms.sync_cal_label_day_occupied') }}</label>
                        <!-- <div class="text-label small-font" style="margin-left: 50px !important;"><small>{{ $tr('cms.sync_cal_msg_day_occupied') }}</small></div> -->
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="common-div">
                        <label class="toggle-switch">
                            <input type="checkbox" id="sync_event" v-on:change="syncCalendar(result.trainer_property.sync_type)" v-model="result.trainer_property.is_synced">
                            <span class="toggle-slider round"></span>
                        </label>
                        <label class="text-label" for="sync_event">{{ $tr('cms.sync_cal_label_sync_event') }}</label>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="common-div">
                        <a style="padding: 0px !important;" v-on:click="showSyncLogs = !showSyncLogs" class="btn btn-default"><strong>{{ $tr('cms.sync_cal_logs') }}</strong></a>

                        &nbsp;&nbsp;&nbsp;
                        <a style="padding: 0px !important; color: #0000FF !important;" v-on:click="disconnect(result.trainer_property.sync_type)" class="btn btn-default">{{ $tr('cms.sync_cal_disconnect_' + result.trainer_property.sync_type) }}</a>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="hr-line"></div>
                </div>
            </div>

            <div v-if="showSyncLogs" id="no-more-tables">
                <div><h5 style="padding-left: .75rem;">{{ $tr('cms.sync_cal_logs') }}</h5></div>
                <table width="100%" class="table table-striped caption-top">
                    <tr>
                        <th>{{ $tr('cms.sync_cal_log_created_at') }}</th>
                        <th>{{ $tr('cms.sync_cal_log_title') }}</th>
                        <th>{{ $tr('cms.sync_cal_log_sync_from') }}</th>
                        <th>{{ $tr('cms.sync_cal_log_change') }}</th>

                        <th>{{ $tr('cms.actions') }}</th>
                    </tr>

                    <tr v-if="calendar_sync_logs.length < 1" style="margin: 0 auto; width: 100%; text-align: center;">
                        <td colspan="7" class="no-record">{{ $tr('cms.no_records_found') }}</td>
                    </tr>
                    <tr v-for="(result,index) in calendar_sync_logs">
                        <td :data-title="$tr('cms.sync_cal_log_created_at') + ':'">{{ dateTimeFormat(result.created_at) }}</td>
                        <td :data-title="$tr('cms.sync_cal_log_title') + ':'">{{ result.title }}</td>
                        <td :data-title="$tr('cms.sync_cal_log_sync_from') + ':'">{{ $tr(result.sync_from) }}</td>
                        <td :data-title="$tr('cms.sync_cal_log_change') + ':'">{{ $tr(result.change) }}</td>

                        <td class="text-center" :data-title="$tr('cms.actions') + ':'">
                            <a href="javascript:;" v-on:click="deleteLog(result)"><i style="color: #FF0000;" class="fa fa-trash"></i></a>
                        </td>
                    </tr>
                </table>

                <pagination ref="pagination" ></pagination>    
            </div>
            
        </div>

        <div v-else>
            <div class="row">
                <div class="col-md-6">
                    <div style="padding: .5rem 1rem;">{{ $tr('cms.sync_cal_connect_msg') }}</div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div style="padding: .5rem 1rem;">
                        <a v-if="typeof window.user != 'undefined' && typeof window.user.syncCalendarSetting != 'undefined' && window.user.syncCalendarSetting.isOffice365Enable" v-on:click="openConnectOffice365Modal" class="btn btn-default sync-btn">
                            <img class="sync-img" src="../typo3conf/ext/simply_org_pro/Resources/Public/Images/calendar-icons/Office_365icon.svg" />
                        </a>

                        <a v-if="typeof window.user != 'undefined' && typeof window.user.syncCalendarSetting != 'undefined' && window.user.syncCalendarSetting.isGoogleEnable" v-on:click="openConnectGoogleCalendarModal" class="btn btn-default sync-btn" >
                            <img class="sync-img" src="../typo3conf/ext/simply_org_pro/Resources/Public/Images/calendar-icons/Google-calendaricon.svg" />
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </span>
</script>
<script type="text/javascript">
    window.authWindow = false;
    window.settingsComponent = null;
    window.sync_type = null;
        componentsToRegister.add({
            name: 'Settings',
            options: {
                template: '#SettingsTemplate',
                props: [],
                data: function () {
                    return {
                        appData: appData,
                        loaded: false,
                        urlModel: '',
                        urlMethod: '',
                        result: {},
                        calendar_sync_logs: [],
                        showSyncLogs: false,
                        currentReqest: false,
                        syncLogPaginationData: false,
                        filters: {
                            search_text: '',
                            limit: 10,
                            page: 1,
                            order_by: 'created_at',
                            sort_order: 'DESC'
                        }
                    }
                },
                mounted: function () {
                    window.settingsComponent = this;
                    var _this = this;
                    this.load();
                },
                watch: {
                    showSyncLogs: function(value) {
                        var _this = this;
                        if (value) {
                            _this.loadSyncLogs();

                            _this.setPagination();
                        }
                        else {
                            _this.calendar_sync_logs = [];
                        }
                    }
                },
                methods: {
                    load: function () {
                        var _this = this;
                        
                        _this.loaded = true;
                        var postParams = {
                            model: 'trainer',
                            params: {
                                id: window.user.user.PersonID
                            }
                        };

                        blockUI();
                        $.post(getBaseUrl() + 'Base/details', postParams, function (data) {
                            _this.result = data.data;
                            appData.show_as_private = typeof _this.result.trainer_property != 'undefined' ?_this.result.trainer_property.show_as_private : 0;
                            unblockUI();
                        });
                    },

                    openConnectOffice365Modal: function () {
                        window.sync_type = 'office365';
                        
                        var _this = this;

                        var modalBody = '<div class="row col-margin">';
                            modalBody += '<div style="margin-bottom: 25px;" class="col-md-12"><div class="text-center"><img class="" src="../../typo3conf/ext/simply_org_pro/Resources/Public/Images/calendar-icons/Office_365icon.svg" /></div></div>';
                            modalBody += '<div class="col-md-12"><div class="text-center">' + _this.$tr("cms.sync_cal_confirm_connect_office365") + '</div></div>';
                        modalBody += '</div>';

                        _this.modelBoxContext = {
                            isComponent: false,
                            actions: {
                                connect_google_calendar: {
                                    method: 'connectOffice365',
                                    title: _this.$tr('cms.sync_cal_btn_connect_office365'),
                                    className: 'btn-primary'
                                }
                            },
                            headerButton: {},
                            componentProperties: {},
                            title: '',
                            show_close_btn: true,
                            modelBody: modalBody,
                            modal_header_color: 'modal-header-color',
                            modal_title_left: 'modal_title_left',
                            modal_footer_color: 'modal-footer-color',
                            margin_custom_body: 'margin_custom_body'
                        };

                        if (modalTrainerCalendarVue) {
                            modalTrainerCalendarVue.componentName = '';
                            _this.$nextTick(function () {
                                modalTrainerCalendarVue.open(_this);
                            });
                        }
                    },

                    connectOffice365: function() {
                        var _this = this;

                        if (typeof window.user != 'undefined' && typeof window.user.user != 'undefined' && window.user.user.PersonID) {
                            var postParams = {
                                model: 'trainer',
                                method: 'office365Connect',
                                params: {
                                    id: window.user.user.PersonID
                                }
                            };
                            blockUI();
                            $.post(getBaseUrl() + 'Base/search', postParams, function (data) {
                                if (data && data.url != 'undefined') {
                                    window.authWindow = window.open(data.url, "_blank");
                                    modalTrainerCalendarVue.close();
                                }
                                else {
                                    notify('error', 'Something went worng');
                                }

                                unblockUI();
                            });
                        }
                        else {
                            notify('error', 'Something went worng');
                        }
                    },
                    
                    openConnectGoogleCalendarModal: function() {
                        window.sync_type = 'google';
                        var _this = this;

                        var modalBody = '<div class="row col-margin">';
                            modalBody += '<div style="margin-bottom: 25px;" class="col-md-12"><div class="text-center"><img class="" src="../../typo3conf/ext/simply_org_pro/Resources/Public/Images/calendar-icons/Google-calendaricon.svg" /></div></div>';
                            
                            modalBody += '<div class="col-md-12"><div class="text-center">' + _this.$tr("cms.sync_cal_confirm_connect_google") + '</div></div>';    
                        modalBody += '</div>';
                        
                        _this.modelBoxContext = {
                            isComponent: false,
                            actions: {
                                connect_google_calendar: {
                                    method: 'connectGoogleCalendar',
									title: _this.$tr('cms.sync_cal_btn_connect_google'),
									className: 'btn-primary mrg-btm55'
                                }
                            },
                            headerButton: {},
                            componentProperties: {},
                            title: '',
                            show_close_btn: true,
                            modelBody: modalBody,
                            modal_header_color: 'modal-header-color',
                            modal_title_left: 'modal_title_left',
                            modal_footer_color: 'modal-footer-color',
                            margin_custom_body: 'margin_custom_body'
                        };

                        if (modalTrainerCalendarVue) {
                            modalTrainerCalendarVue.componentName = '';
                            _this.$nextTick(function () {
                                modalTrainerCalendarVue.open(_this);
                            });
                        }
                    },

                    connectGoogleCalendar: function () {
                        var _this = this;

                        if (typeof window.user != 'undefined' && typeof window.user.user != 'undefined' && window.user.user.PersonID) {
                            var postParams = {
                                model: 'trainer',
                                method: 'googleCalendarConnect',
                                params: {
                                    id: window.user.user.PersonID
                                }
                            };
                            blockUI();
                            $.post(getBaseUrl() + 'Base/search', postParams, function (data) {
                                if (data && data.url != 'undefined') {
                                    window.authWindow = window.open(data.url, "_blank");
                                    modalTrainerCalendarVue.close();
                                }
                                else {
                                    notify('error', 'Something went worng');
                                }

                                unblockUI();
                            });
                        }
                        else {
                            notify('error', 'Something went worng');
                        }
                    },

                    openShowAsPrivatePopup: function (sync_type) {
                        var _this = this;

                        var modalBody = '<div class="row col-margin">';

                        if (sync_type == 'google') {
                            modalBody += '<div style="margin-bottom: 25px;" class="col-md-12"><div class="text-center"><img class="" src="../../typo3conf/ext/simply_org_pro/Resources/Public/Images/calendar-icons/Google-calendaricon.svg" /></div></div>';
                        }
                        else {
                            modalBody += '<div style="margin-bottom: 25px;" class="col-md-12"><div class="text-center"><img class="" src="../../typo3conf/ext/simply_org_pro/Resources/Public/Images/calendar-icons/Office_365icon.svg" /></div></div>';
                        }

                        modalBody += '<div style="margin-bottom: 10px; margin-top: 25px;" class="col-md-12"><div class="text-center"><img class="" style="height: 46px;" src="../../typo3conf/ext/simply_org_pro/Resources/Public/Images/calendar-icons/lock.svg" /></div></div>';
                        modalBody += '<div style="margin-bottom: 25px;" class="col-md-12"><div class="text-center">' + this.$tr('cms.sync_cal_show_as_private_message') + '</div></div>';
                        
                        modalBody += '</div>';

                        _this.modelBoxContext = {
                            isComponent: false,
                            actions: {
                                show_as_it_is: {
                                    method: 'show_as_it_is',
                                    title: _this.$tr('cms.sync_cal_show_as_it_is'),
                                    className: 'btn-default mrg-btm20'
                                },
                                show_as_private: {
                                    method: 'show_as_private',
                                    title: _this.$tr('cms.sync_cal_show_as_private'),
                                    className: 'btn-primary mrg-btm20'
                                }
                            },
                            headerButton: {},
                            componentProperties: {},
                            title: '',
                            show_close_btn: false,
                            modelBody: modalBody,
                            modal_header_color: 'modal-header-color',
                            modal_title_left: 'modal_title_left',
                            modal_footer_color: 'modal-footer-color',
                            margin_custom_body: 'margin_custom_body'
                        };

                        if (modalTrainerCalendarVue) {
                            modalTrainerCalendarVue.componentName = '';
                            _this.$nextTick(function () {
                                modalTrainerCalendarVue.open(_this);
                            });
                        }
                    },

                    show_as_it_is: function() {
                        appData.show_as_private = 0;
                        this.openSyncModalPopup(window.sync_type);
                    },

                    show_as_private: function () {
                        appData.show_as_private = 1;
                        this.openSyncModalPopup(window.sync_type);
                    },

                    openSyncModalPopup: function (sync_type) {
                        var _this = this;

                        var modalBody = '<div class="row col-margin">';
                        
                        if (sync_type == 'google') {
                            modalBody += '<div style="margin-bottom: 25px;" class="col-md-12"><div class="text-center"><img class="" src="../../typo3conf/ext/simply_org_pro/Resources/Public/Images/calendar-icons/Google-calendaricon.svg" /></div></div>';
                        }
                        else {
                            modalBody += '<div style="margin-bottom: 25px;" class="col-md-12"><div class="text-center"><img class="" src="../../typo3conf/ext/simply_org_pro/Resources/Public/Images/calendar-icons/Office_365icon.svg" /></div></div>';
                        }

                        modalBody += '<div style="margin-bottom: 10px;" class="col-md-12"><div class="text-center"><img class="" src="../../typo3conf/ext/simply_org_pro/Resources/Public/Images/calendar-icons/check-icon.svg" /></div></div>';

                        if (sync_type == 'google') {
                            modalBody += '<div style="margin-bottom: 25px;" class="col-md-12"><div class="text-center">' + this.$tr('cms.sync_cal_google_connected_message') + '</div></div>';
                        }
                        else {
                            modalBody += '<div style="margin-bottom: 25px;" class="col-md-12"><div class="text-center">' + this.$tr('cms.sync_cal_office365_connected_message') + '</div></div>';
                        }

                        modalBody += '<div style="margin-bottom: 10px;" class="col-md-12"><div class="text-center"><button class="btn btn-primary" id="sync_now_btn">' + this.$tr('cms.sync_cal_sync_now_btn') + '</button></div></div>';

                        modalBody += '<div style="margin-bottom: 20px;" class="col-md-12"><div class="text-center">' + this.$tr('sync_cal_sync_now_message') + '</div></div>';

                        modalBody += '<div style="margin-bottom: 10px;" class="col-md-12"><div class="text-center"><div class="hr-line"></div></div></div>';

                        modalBody += '<div style="margin-bottom: 10px;" class="col-md-12"><div class="text-center"><button class="btn btn-default" id="sync_later_btn">' + this.$tr('cms.sync_cal_sync_later_btn') + '</button></div></div>';

                        modalBody += '<div style="margin-bottom: 25px;" class="col-md-12"><div class="text-center">' + this.$tr('cms.sync_cal_sync_later_message') + '</div></div>';
                        modalBody += '</div>';

                        _this.modelBoxContext = {
                            isComponent: false,
                            actions: {},
                            headerButton: {},
                            componentProperties: {},
                            title: '',
                            show_close_btn: false,
                            modelBody: modalBody,
                            modal_header_color: 'modal-header-color',
                            modal_title_left: 'modal_title_left',
                            modal_footer_color: 'modal-footer-color',
                            margin_custom_body: 'margin_custom_body'
                        };

                        if (modalTrainerCalendarVue) {
                            modalTrainerCalendarVue.componentName = '';
                            _this.$nextTick(function () {
                                modalTrainerCalendarVue.open(_this);
                            });
                        }
                    },
                    
                    syncCalendar: function(sync_type) {
                        var _this = this;

                        if (typeof window.user != 'undefined' && typeof window.user.user != 'undefined' && window.user.user.PersonID) {
                            if (sync_type == 'google') {
                                var postParams = {
                                    model: 'trainer',
                                    method: 'googleCalendarEventsSync',
                                    params: {
                                        id: window.user.user.PersonID,
                                        is_synced: window.sync_type != null ? 1 : ($('#sync_event').prop('checked') ? 1 : 0),
                                        show_as_private: appData.show_as_private
                                    }
                                };

                                blockUI();
                                $.post(getBaseUrl() + 'Base/search', postParams, function (data) {
                                    notify(data.type, data.message);

                                    if (window.sync_type != null) {
                                        _this.load();
                                        modalTrainerCalendarVue.close();
                                        window.sync_type = null;
                                        window.settingsComponent = null;
                                    }

                                    _this.load();
                                    unblockUI();
                                });
                            }
                            else if(sync_type == 'office365') {
                                var postParams = {
                                    model: 'trainer',
                                    method: 'office365CalendarEventsSync',
                                    params: {
                                        id: window.user.user.PersonID,
                                        is_synced: window.sync_type != null ? 1 : ($('#sync_event').prop('checked') ? 1 : 0),
                                        show_as_private: appData.show_as_private
                                    }
                                };

                                blockUI();
                                $.post(getBaseUrl() + 'Base/search', postParams, function (data) {
                                    notify(data.type, data.message);

                                    if (window.sync_type != null) {
                                        _this.load();
                                        modalTrainerCalendarVue.close();
                                        window.sync_type = null;
                                        window.settingsComponent = null;
                                    }

                                    _this.load();
                                    unblockUI();
                                });
                            }
                        }
                        else {
                            notify('error', 'Something went worng');
                        }
                    },

                    syncLater: function () {
                        if (window.sync_type != null) {
                            this.load();
                            modalTrainerCalendarVue.close();
                            window.sync_type = null;
                            window.settingsComponent = null;
                        }
                    },

                    disconnect: function (sync_type) {
                        window.settingsComponent = this;
                        var _this = this;

                        if (typeof window.user != 'undefined' && typeof window.user.user != 'undefined' && window.user.user.PersonID) {
                            bootbox.confirm({
                                // message: _this.$tr('cms.sync_cal_confirm_want_to_delete'),
                                message: '<div class="row mt-2"><div class="col-md-12"><h5><i style="color: #FF0000;" class="fa fa-exclamation-triangle" aria-hidden="true"></i> <strong>'+ _this.$tr('cms.warning_alert')+'</strong><h5></div></div><div class="row mt-4"><div class="col-md-12">' + _this.$tr('cms.sync_cal_confirm_want_to_delete_msg') + '</div></div><div class="row mt-4"><div class="col-md-12"><h5><strong>' + _this.$tr('cms.warning_alert_confirm_msg') +'</strong><h5></div></div>',
                                buttons: {
                                    'confirm': {
                                        label: _this.$tr('cms.ok'),
                                        className: 'btn-primary '
                                    },
                                    'cancel': {
                                        label: _this.$tr('cms.cancel'),
                                        className: 'btn-default '
                                    },
                                },
                                callback: function (response) {
                                    if (response == true) {
                                        if (sync_type == 'google') {
                                            var postParams = {
                                                model: 'trainer',
                                                method: 'googleCalendarDisconnect',
                                                params: {
                                                    id: window.user.user.PersonID
                                                }
                                            };
                                        }
                                        else {
                                            var postParams = {
                                                model: 'trainer',
                                                method: 'office365CalendarDisconnect',
                                                params: {
                                                    id: window.user.user.PersonID
                                                }
                                            };
                                        }

                                        blockUI();
                                        $.post(getBaseUrl() + 'Base/search', postParams, function (data) {
                                            notify(data.type, data.message);
                                            _this.load();
                                            unblockUI();
                                        });
                                    }
                                }
                            });
                        }
                        else {
                            notify('error', 'Something went worng');
                        }
                    },

                    saveDayOccupied: function(trainer_property) {
                        var _this = this;
                        var postParams = {
                            model: 'trainer-property',
                            params: {
                                id: trainer_property.id,
                                is_day_occupied: $('#is_day_occupied').prop('checked') ? 1 : 0
                            }
                        };
                        
                        blockUI();
                        $.post(getBaseUrl() + 'Base/saveTrainerProperty', postParams, function (data) {
                            notify(data.type, data.message);
                            unblockUI();
                        });
                    },

                    loadSyncLogs: function () {
                        var _this = this;

                        if (_this.currentReqest != false) {
                            _this.currentReqest.abort();
                        }

                        var params = {};
                        var params = typeof this.filters == 'undefined' ? {} : JSON.parse(JSON.stringify(this.filters));
                        if (typeof _this.appData.filterVars.filterBy == 'undefined') {
                            _this.appData.filterVars.filterBy = _this.filterBy;
                        }
                        params = Object.assign(params, _this.appData.filterVars);
                        params = JSON.stringify(params);
                        blockUI();

                        _this.currentReqest = $.get(getBaseUrl() + 'Base/search&model=calendar-sync-log&method=search&params=' + params, function (data) {
                            _this.calendar_sync_logs = data.data ? data.data : [];
                            unblockUI();
                        }).error(function () {
                            unblockUI();
                        }).done(function (data) {
                            _this.syncLogPaginationData = data;
                        });
                        Requests.push(_this.currentReqest);
                    },

                    changeInPagination: function () {
                        this.filters.page = this.$refs.pagination.current_page
                        this.filters.limit = this.$refs.pagination.per_page
                        this.loadSyncLogs();
                        this.setPagination();
                    },

                    changeInFilter: function (filters) {
                        this.filters.page = 1;
                        for (var i in filters) {
                            this.filters[i] = filters[i]
                        }
                        this.loadSyncLogs();
                        this.setPagination();
                    },

                    dateTimeFormat: function dateTimeFormat(date) {
                        var utc = moment.tz(date, system_timezone).utc().format();
                        return moment(utc).tz(timezone).format(app_date_format_js.toUpperCase() + ' HH:mm');
                    },
                    
                    deleteLog: function(result) {
                        var _this = this;
                        blockUI();
                        $.get(getBaseUrl() + 'Base/deleteRecord&model=calendar-sync-log&model_id=' + result.id, function (data) {
                            notify(data.type, data.message);
                            _this.loadSyncLogs();
                            _this.setPagination();
                        });
                    },

                    setPagination: function() {
                        var _this = this;
                        
                        window.setTimeout(function () {
                            if (_this.syncLogPaginationData != false) {
                                _this.$refs.pagination.updatePagination(_this.syncLogPaginationData);
                            }
                        }, 1000);
                    },
                }
            }
        });

    window.addEventListener("load", function (event) {
        $(document).on('click', '#sync_now_btn', function () {
            console.log('settingsComponent', window.settingsComponent);
            console.log('sync_type', window.sync_type);
            window.settingsComponent.syncCalendar(window.sync_type);
            // window.settingsComponent.load();
            // window.settingsComponent = null;
            // window.sync_type = null;
        });

        $(document).on('click', '#sync_later_btn', function () {
            window.settingsComponent.syncLater();
            // window.settingsComponent.load();
            // window.settingsComponent = null;
            // window.sync_type = null;
        });
    });

    function authCompleted(res) {
        window.authWindow.close();
        window.authWindow = false;
        console.log('settingsComponent', window.settingsComponent);
        if (res.type == 'success' && window.settingsComponent != null) {
            // window.settingsComponent.load();
            // window.settingsComponent = null;
            
            window.settingsComponent.openShowAsPrivatePopup(window.sync_type);
        }

        notify(res.type, res.message);
    }

    
</script>

<style type="text/css">
    .modal-content {
        overflow: hidden;
    }

    @media (min-width: 768px) {
        .modal-content {
            -webkit-box-shadow: 0 5px 15px rgb(0 0 0 / 50%);
            box-shadow: 0 5px 15px rgb(0 0 0 / 50%);
        }
    }

    .modal-content {
        position: relative;
        background-color: #fff;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
        border: 1px solid #999;
        border: 1px solid rgba(0, 0, 0, .2);
        border-radius: 6px;
        outline: 0;
        -webkit-box-shadow: 0 3px 9px rgb(0 0 0 / 50%);
        box-shadow: 0 3px 9px rgb(0 0 0 / 50%);
    }

    .modal-content {
        border-radius: 0px !important;
    }

    .modal {
        text-align: center;
        padding: 0 !important;
    }

    .modal {
        text-align: center;
        padding: 0 !important;
    }

    .modal-header {
        min-height: 16.43px;
        /* padding: 15px; */
        padding: 8px 8px 0px 0px !important;
        border-bottom: none !important;
        display: block;
    }

    .modal-dialog button {
        cursor: pointer;
        min-width: 0px !important;
    }

    .modal-dialog button:focus {
        outline: 0px !important;
    }

    .big-icon {
        border: none;
        background: none;
    }

    .big-icon .fa {
        font-size: 18px !important;
        color: #828282;
    }

    .pull-right {
        float: right !important;
    }

    .pull-left {
        float: left !important;
    }

    .modal-footer {
        border-top: none !important;
        display: block !important;
    }

    .sync-img {
        width: 80% !important;
        padding: 5px 0px 5px 0px !important;
    }
    .sync-btn {
        border: 1px solid #cccccc !important;
        margin-right: 10px;
    }

    .connected {
        border: 1px solid #77B32B !important;
        border-radius: 10px !important;
        margin-right: 10px;
        cursor: default !important;
    }
    .connected-check-img {
        width: 18px;
        position: relative;
        top: 7px;
    }
    .common-div {
        padding: .5rem 1rem;
    }

    .hr-line {
        border: 0;
        border-top: 1px solid rgba(0,0,0,.1);
        padding: .5rem 1rem;
    }

    .mrg-btm55 {
        margin-bottom: 55px !important;
    }
    
    .tooltip{
        z-index: 999999 !important;
    }
</style>

<style>
    .toggle-switch {
        position: relative;
        display: inline-block;
        width: 43px;
        height: 25px;
    }

    .toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .toggle-slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
    }

    .toggle-slider:before {
        position: absolute;
        content: "";
        height: 19px;
        width: 18px;
        left: 4px;
        bottom: 3px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

    input:checked+.toggle-slider {
        background-color: #77B32B;
    }

    input:focus+.toggle-slider {
        box-shadow: 0 0 1px #77B32B;
    }

    input:checked+.toggle-slider:before {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(19px);
    }

    /* Rounded sliders */
    .toggle-slider.round {
        border-radius: 40px;
    }

    .toggle-slider.round:before {
        border-radius: 40px;
    }
    .text-label {
        position: relative;
        left: 10px;
    }

    .mrg-btm20 {
        margin-bottom: 20px !important;
    }

    .bootbox.modal .modal-dialog {
        /* top: 250px; */
        display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:calc(100% - (.5rem * 2))
    }
</style>

<script type="x/template" id="searchResultsTemplate">
    <div v-if="loaded" class="search_result_container">
		<div v-if="template == 'card'" class="row">
			<div v-if="results.length < 1 && loaded == true" style="margin: 0 auto;
		width: 100%;
		text-align: center;">
				<h4>{{ $tr('cms.no_records_found') }}</h4>
			</div>
			<div class="row">
            	<label>Total Seminars</label>
        	</div>
			<div v-for="(result,index) in results" class="col-md-4">
				<seminarCard :template="template" :result="result" :urlModel="urlModel"></seminarCard>
			</div>
		</div>

		<ul v-if="template == 'list'">
			<li v-if="results.length < 1 && loaded == true" style="margin: 0 auto;
		width: 100%;
		text-align: center;">
				<h4>{{ $tr('cms.no_records_found') }}</h4>
			</li>

			<li v-for="(result,index) in results">
				<seminarCard :template="template" :result="result" :urlModel="urlModel"></seminarCard>
			</li>
		</ul>
		<div class=" " id="no-more-tables">


		<table width="100%" class="table table-striped" v-if="template == 'qualification_table'">
			<tr>
				<th>{{ $tr('cms.qualification_title') }}</th>
				<th>{{ $tr('cms.bigin_date') }}</th>
				<th>{{ $tr('cms.end_date') }}</th>
				<th>{{ $tr('cms.seminar_status') }}</th>
				<th>{{ $tr('cms.booking_date') }}</th>
				<th>{{ $tr('cms.documents') }}</th>
                <!-- <th>{{ $tr('cms.feedback_requests') }}</th> -->
			</tr>
			<tr v-if="results.length < 1 && loaded == true" style="margin: 0 auto;
		width: 100%;
		text-align: center;">
				<td colspan="7" class="no-record">{{ $tr('cms.no_records_found') }}</td>
			</tr>
			<template v-for="(result,index) in results" :result="result">
				<tr style="cursor:pointer" v-on:click="toggle(index)">
					<td :data-title="$tr('cms.qualification_title') + ':'">
						<i v-if="(typeof result.expanded == 'undefined' && index == 0) || result.expanded == true"
                           class="fa fa-minus-circle" style="color:#77B32B;cursor:pointer;">
						</i>
						<i v-else class="fa fa-plus-circle" style="color:#77B32B;cursor:pointer;"></i>
						&nbsp;
						<i class="fa fa-graduation-cap" style="color:black"></i>&nbsp;
						{{ result.name }}
					</td>
					<td :data-title="$tr('cms.bigin_date') + ':'">
						{{ dateFormat(result.start_date,'cust_format_2') }}
					</td>
					<td :data-title="$tr('cms.end_date') + ':'">{{ dateFormat(result.end_date,'cust_format_2') }}</td>
					<td :data-title="$tr('cms.seminar_status') + ':'"> {{ $tr('cms.'+ getQualStatus(result)) }} </td>
					<td :data-title="$tr('cms.booking_date') + ':'"> {{ dateFormat(result.booking_date,'cust_format_2') }} </td>
					<td :data-title="$tr('cms.documents') + ':'">
						<ul class="user_docs">
							<li v-for="doc in gatherQualDocuments(result)">
								<a target="_blank" :href="doc.url"> {{ doc.name }}</a>
							</li>
						</ul>
					</td>
                    <!--   <td>&nbsp;</td> -->
				</tr>
				<qualDetailsRow
                        v-show="(typeof result.expanded == 'undefined' && index == 0) || result.expanded == true"
                        :result="result"></qualDetailsRow>


			</template>

		</table>



		<table width="100%" class="table table-striped" v-if="template == 'approval_table'">
			<tr>
				<th>{{ $tr('cms.name') }}</th>
				<th>{{ $tr('cms.event') }}</th>
				<th style="max-width:105px">{{ $tr('cms.status') }}</th>
				<th>{{ $tr('cms.start_date') }}</th>
				<th>{{ $tr('cms.end_date') }}</th>
				<th>{{ $tr('cms.price') }}</th>
				<th>&nbsp</th>

			</tr>
			<tr v-if="results.length < 1 && loaded == true" style="margin: 0 auto; width: 100%; text-align: center;">
				<td colspan="7" class="no-record">{{ $tr('cms.no_records_found') }}</td>
			</tr>
			<template v-for="(result,index) in results">
				<tr style="background-color:#f9f9f9" v-if="result.qualification == null">
					<td :data-title="$tr('cms.name') + ':'">{{ result.FirstName }} {{ result.LastName }}</td>
					<td :data-title="$tr('cms.event') + ':'">
						<a target="_blank" :href="'/event-details/?event_id='+result.event_id+'&only_details=y'">
							{{  result.event_name }}
						</a>
					</td>

					<td :data-title="$tr('cms.status') + ':'" v-if="lang != 'en'">{{  result.event_contact_status['Status'+lang.toUpperCase()] }}</td>
					<td :data-title="$tr('cms.status') + ':'" v-if="lang == 'en'">{{  result.event_contact_status.Status }}</td>
					<td :data-title="$tr('cms.start_date') + ':'">{{  dateFormat(result.event.event_startdate) }}</td>
					<td :data-title="$tr('cms.end_date') + ':'">{{ dateFormat(result.event.event_enddate) }}</td>
					<td :data-title="$tr('cms.price') + ':'">

						<span v-if="FtmIsEnabled('multi-currency') && result.event && result.event.prices.length > 0">
							{{  priceFormat(result.event.prices[0].amount) }} {{ result.event.prices[0].currency.symbol }}
						</span>
						<span v-else>
							{{ priceFormat(result.event.event_price) }} {{ currencySymbol() }}
						</span>
					</td>
					<td>
						<a style="min-width: 110px;" class="btn btn-primary"
                           v-if="inArray(result.event_contact_status.slug,['rejected','waiting_for_approval'])"
                           href="javascript:void(0)"
                           v-on:click="parentMethod('approve',{ id : result.id , record : result })">{{ $tr('cms.approve') }}</a>

						<div v-if="inArray(result.event_contact_status.slug,['rejected','waiting_for_approval'])"
                             style="height:5px;"></div>
						<a
                                :style="'min-width: 110px;'"
                                class="btn btn-primary btn-grey"
                                v-if="inArray(result.event_contact_status.slug,['confirmed','waiting_for_approval'])"
                                href="javascript:void(0)"
                                v-on:click="parentMethod('reject',{ id : result.id , record : result })">{{ $tr('cms.reject') }}</a>
					</td>

				</tr>
				<template v-if="result.qualification != null">
					<tr style="background-color:#f9f9f9" v-on:click="toggle(index)">
						<td :data-title="$tr('cms.name') + ':'">
						<i v-if="result.expanded == true"
                           class="fa fa-minus-circle" style="color:#77B32B;cursor:pointer;">
						</i>
						<i v-else class="fa fa-plus-circle" style="color:#77B32B;cursor:pointer;"></i>

						{{ result.FirstName }} {{ result.LastName }} </td>
						<td :data-title="$tr('cms.event') + ':'"><i class="fa fa-graduation-cap" style="color:black"></i>&nbsp;{{ result.qualification.name }}</td>
						<td :data-title="$tr('cms.status') + ':'" v-if="lang != 'en'">{{  result.event_contact_status['Status'+lang.toUpperCase()] }}</td>
						<td :data-title="$tr('cms.status') + ':'" v-if="lang == 'en'">{{  result.event_contact_status.Status }}</td>
						<td :data-title="$tr('cms.start_date') + ':'">{{ dateFormat(result.qualification.start_date) }}</td>
						<td :data-title="$tr('cms.end_date') + ':'">{{ dateFormat(result.qualification.end_date) }}</td>
						<td :data-title="$tr('cms.price') + ':'"><span
                                v-if="result.qualification.prices && result.qualification.prices[0]">{{ priceFormat(result.qualification.prices[0].amount) }} {{ result.qualification.prices[0].currency.symbol }}</span> </td>
						<td>
							<!-- <a style="min-width: 110px;" class="btn btn-primary"
                               v-if="inArray(result.event_contact_status.slug,['rejected','waiting_for_approval'])"
                               href="javascript:void(0)"
                               v-on:click="parentMethod('approve',{ id : result.id , record : result })">{{ $tr('cms.approve') }}</a> -->
							   <a style="min-width: 110px;" class="btn btn-primary"
                               v-if="inArray(result.event_contact_status.slug,['rejected','waiting_for_approval'])"
                               href="javascript:void(0)"
                               v-on:click="parentMethod('approvequalification',{ id : result.id , record : result })">{{ $tr('cms.approve') }}</a>

							   

							<div v-if="inArray(result.event_contact_status.slug,['rejected','waiting_for_approval'])"
                                 style="height:5px;"></div>
							<!--<a
                                    :style="'min-width: 110px;'"
                                    class="btn btn-primary btn-grey"
                                    v-if="inArray(result.event_contact_status.slug,['confirmed','waiting_for_approval'])"
                                    href="javascript:void(0)"
                                    v-on:click="parentMethod('reject',{ id : result.id , record : result })">{{ $tr('cms.reject') }}</a> -->

									<a
                                    :style="'min-width: 110px;'"
                                    class="btn btn-primary btn-grey"
                                    v-if="inArray(result.event_contact_status.slug,['confirmed','waiting_for_approval'])"
                                    href="javascript:void(0)"
                                    v-on:click="parentMethod('rejectqualification',{ id : result.id , record : result })">{{ $tr('cms.reject') }}</a>
						</td>
					</tr>
					<tbody v-show="result.expanded">
						<tr style="background-color:white;" v-for="event in result.qualification.planned_events"
                            v-if="inArray(event.id.toString(),result.event_ids.split(','))">
							<td>&nbsp;</td>
							<td :data-title="$tr('cms.event') + ':'">
								<a target="_blank" :href="'/event-details/?event_id='+event.id+'&only_details=y'">
									{{  event.event_name }}
								</a>
							</td>
							<td>&nbsp;</td>
							<td :data-title="$tr('cms.start_date') + ':'">{{ dateFormat(result.event.event_startdate) }}</td>
							<td :data-title="$tr('cms.end_date') + ':'">{{ dateFormat(result.event.event_enddate) }}</td>
							<td>&nbsp</td>
							<td>&nbsp</td>
						</tr>
					</tbody>
				</template>
            </template>
        </table>

        <component :is="template" :results="results" :registered_participants="registered_participants" :ref="template"></component>
        </div>
    </div>
</script>


<script type="x/template" id="qualDetailsRowTemplate">
    <tr v-if="loaded">
        <td colspan="7">
            <div>
                <ul class="seminar_list">
                    <li v-for="(seminar,index) in res.details.all_seminars"
                        v-if="hasSubscribed(seminar)" v-on:click="toggle(index)">

                        <div :class="'seminar_head seminar_'+seminarStatus(index)">
                            <i v-if="seminarStatus(index) == 'inprogress'" class="far fa-play-circle"/>
                            <i v-if="seminarStatus(index) == 'completed'" class="far fa-check-circle"/>
                            <i v-if="seminarStatus(index) == 'future'" class="fa fa-lock"/>
                            <i v-if="seminarStatus(index) == 'completed_unattended'" class="fa fa-exclamation-circle"/>

                            {{ seminar.name }}
                            <i v-if="(seminarStatus(index) == 'inprogress' && typeof seminar.expanded == 'undefined')  || seminar.expanded == true"
                               class="fa fa-chevron-up pull-right"/>
                            <i v-else class="fa fa-chevron-down pull-right"/> &nbsp;

                        </div>
                        <div v-show="(seminarStatus(index) == 'inprogress' && typeof seminar.expanded == 'undefined') || seminar.expanded == true"
                        v-for="pSem in seminar.plannedSeminars" v-if="pSem.attendeesId != null"
                        class="seminar_details">

                        <div v-if="pSem.type && pSem.type == 'e-learning'" class="presense_training">

                        <span v-if="dateFormat(pSem.event_startdate,'cust_format_2') == dateFormat(pSem.event_enddate,'cust_format_2')">
                            {{ dateFormat(pSem.event_startdate,'cust_format_2') }}
                        </span>
                        <span v-else>
                            {{ dateFormat(pSem.event_startdate,'cust_format_2') }} - {{ dateFormat(pSem.event_enddate,'cust_format_2') }}
                        </span>

                        <span> |<img data-toggle="tooltip" data-container="body" title=""
                        src="../typo3conf/ext/simply_org_1/Resources/Public/Images/elearning_icon.jpg"
                        width="auto" height="15px" data-original-title="elearning"/>
                        <a target="_blank" style="color:white" :href="'/scorm-player?course_id='+pSem.id"> {{ $tr('cms.launch_course') }} </a>
                        </span>
                        </div>

                        <div v-else class="presense_training">
                        <span>
                        {{ dateFormat(pSem.event_startdate,'cust_format_2') }} - {{ dateFormat(pSem.event_enddate,'cust_format_2') }}
                        </span>

                        <span> | <i style="color:white;" class="fas fa-chalkboard-teacher"></i> {{ $tr('cms.presense_training') }}</span>
                            </div>
                            <ul v-if="pSem.eventDays && pSem.eventDays.days" class="seminar_day_list">
                                <li v-for="day in pSem.eventDays.days">
                                    <i v-if="day.attended" class="fa fa-check-circle" aria-hidden="true"></i>
                                    <i v-else class="fa fa-question-circle" aria-hidden="true"></i> &nbsp;
                                    <span>{{ ' '+$tr('cms.day')+' '+day.dayIndex}} - {{ dateFormat(day.date,'cust_format_2') }}</span>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </td>
    </tr>
</script>

<script type="x/template" id="HighlightTemplate">
    <span>
	<span v-for="(part, index) in parts" :key="index">
		<span v-if="index == Object.keys(parts).length - 1 && part.name != ''" v-html="highlight(part.name,part.text)"></span>
		<span v-else-if="part.name == '' && part.class == '' && part.text == part.old_name">
			{{ part.text }}
		</span>
	</span>
    </span>
</script>
    <script type="x/template" id="paginationTemplate">
    
    <div class="pagination_wrapper">
        <div class="row">

            <div class="col-md-7">
                <span class="pagination_left_text">{{ $tr('cms.showing') }} {{ current_page }} {{ $tr('cms.of') }} {{ num_of_pages }} {{ $tr('cms.pages') }}</span> <span class="pagination_middle_text">
                    <select v-model="per_page" class="custom-select items_on_page">
                        <option value="10">10</option>
                        <option value="20">20</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                    </select> {{ $tr('cms.records_per_page') }} </span>
            </div>

            <div class="col-md-5">
                <nav aria-label="Page navigation example">
                    <ul class="pagination justify-content-end">
                        <li :class="prevClass()">
                            <a class="page-link" @click="changePage(current_page-1)" href="javascript:void(0)" tabindex="-1">
                                <i class="fas fa-angle-double-left"></i>
                            </a>
                        </li>

                        <li class="page-item" v-if="display_pages.indexOf(1) === -1">
                            <a class="page-link" @click="changePage(1)"> 1 </a>
                        </li>
                        <li class="page-item" v-if="display_pages.indexOf(1) === -1">
                            <a class="page-link">..</a>
                        </li>

                        <li v-for="n in display_pages" :class="liClass(n)" v-if="n > 0">
                            <a class="page-link" href="javascript:void(0)" @click="changePage(n)"> {{ n }}</a>
                        </li>


                        <li class="page-item" v-if="display_pages.indexOf(num_of_pages) === -1">
                            <a class="page-link">..</a>
                        </li>
                        <li class="page-item" v-if="display_pages.indexOf(num_of_pages) === -1">
                            <a class="page-link" @click="changePage(num_of_pages)"> {{ num_of_pages }} </a>
                        </li>

                        <li :class="nextClass()">
                            <a class="page-link" @click="changePage(current_page+1)" href="javascript:void(0)">
                                <i class="fas fa-angle-double-right"></i>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</script>
    <script type="x/template" id="seminarCardTemplate">
    <span class="seminar_card">

        <div v-if="template == 'card'" class="card">
            <!--<img width="115px" height="115px" class="card-img-top" src="../typo3conf/ext/simply_org_1/Resources/Public/Images/seminar-item.png" alt="seminar image"> -->
            <div class="image_wrapper">
            <img width="115px" height="115px" v-if="typeof appData.settings != 'undefined'" class="card-img-top" :src="appData.settings.simplyOrgUrl+'de/picture/event/'+result.blueprint_id" alt="seminar image">
            </div>
            <div class="card-body">
                <h5 class="card-title"><a :href="'/event-details?event_id='+result.id"> <Highlight :text="result.event_name" :search_text="appData.filterVars.search_text"></Highlight> </a></h5>
                <p class="card-text" v-if="dateFormat(result.event_startdate,'cust_format_1') == dateFormat(result.event_enddate,'cust_format_1')">{{ dateFormat(result.event_enddate,'cust_format_2') }}</p>
                <p class="card-text" v-else>{{ dateFormat(result.event_startdate,'cust_format_1') }} {{ $tr('cms.to') }} {{ dateFormat(result.event_enddate,'cust_format_2') }}</p>
                <p class="card-text">Inprogress
                    <span>|</span> Online course
    <span>|</span> 60% completed</p>
    <div class="other_schedule_icon">
        <a href="#">
            <span>
                            <i class="far fa-calendar-alt"></i>
                        </span>
        </a>
    </div>
    </div>

    </div>
    <div v-if="template == 'list'" class="card">


        <!-- For Qual Seminars view -->
        <span style="width:100%;" v-if="urlModel=='planned-qual-event'">
                <div class="image_wrapper">
                    <img width="115px" height="115px" v-if="typeof appData.settings != 'undefined' && result.type == 'planned_events'" class="card-img-top" :src="appData.settings.simplyOrgUrl+'de/picture/event/'+result.blueprint_id" alt="seminar image">

                    <img width="115px" height="115px" v-if="typeof appData.settings != 'undefined' && result.type== 'planned_qualifications'" class="card-img-top" :src="appData.settings.simplyOrgUrl+'de/picture/qualifications/'+result.blueprint_id" alt="seminar image">

                    <img width="115px" height="115px" v-if="typeof appData.settings != 'undefined' && result.type== 'e_learning'" class="card-img-top" :src="appData.settings.simplyOrgUrl+'de/picture/e-learning/'+result.id" alt="seminar image">

                    <img width="115px" height="115px" v-if="typeof appData.settings != 'undefined' && result.type == 'planned_webinars'"
                        class="card-img-top" :src="appData.settings.simplyOrgUrl+'de/picture/event/'+result.blueprint_id"
                        alt="seminar image">

                    <img width="115px" height="115px" v-if="typeof appData.settings != 'undefined' && result.type == 'studies'"
                        class="card-img-top" :src="appData.settings.simplyOrgUrl+'de/picture/study-template/'+result.blueprint_id"
                        alt="study image">

                </div>
                <div class="card-body" style="min-height: 130px; padding: 5px 0 20px 0;">
                    <h5 class="card-title">
                        <a v-if="result.type== 'e_learning'" :href="'/elearning-details?course_id='+result.id">
                            <i class="fas fa-globe"></i>
                            <Highlight :text="result.name" :search_text="appData.filterVars.search_text" :watch_search="false"></Highlight>

                        </a>
                        <a v-if="result.type== 'planned_events'" :href="'/event-details?event_id='+result.id">
                            <i v-if="result.is_hybrid == 0" class="fas fa-chalkboard-teacher"></i>
                            <span v-else v-html="getIcon('hybrid')"></span>
                            <Highlight :text="result.name" :search_text="appData.filterVars.search_text" :watch_search="false"></Highlight>
                            <img style="margin-left:5px;cursor:pointer" :src="appData.settings.simplyOrgUrl+'images/type_icons/guaranteed_icon.svg'" :data-original-title="$tr('cms.guaranteed_seminar')" class="tooltips" v-if="result.is_execution_guarantee == 1" >
                        </a>
                        <a v-if="result.type== 'planned_qualifications'" :href="'/qualification-details?qualification_id='+result.id">
                            <i class="fa fa-graduation-cap"  style="margin-right: 5px;"></i><Highlight :text="result.name" :search_text="appData.filterVars.search_text" :watch_search="false"></Highlight>
                        </a>
                        <a v-if="result.type== 'planned_webinars'" :href="'/event-details?event_id='+result.id">
                            <span v-html="getIcon('webinar')"></span>
                            <Highlight :text="result.name" :search_text="appData.filterVars.search_text"
                                :watch_search="false"></Highlight>
                            <img style="margin-left:5px;cursor:pointer" :src="appData.settings.simplyOrgUrl+'images/type_icons/guaranteed_icon.svg'" :data-original-title="$tr('cms.guaranteed_seminar')" class="tooltips" v-if="result.is_execution_guarantee == 1">
                        </a>
                        <a v-if="result.type== 'studies'" :href="'/studydetails?id='+result.id">
                            <span v-html="getIcon('studies')"></span>
                            <Highlight :text="result.name" :search_text="appData.filterVars.search_text"
                                :watch_search="false"></Highlight>
                        </a>
                    </h5>
                    
                    <p class="card-text">
                        <span v-if="result.type== 'e_learning'">
                            <!-- {{ $tr('cms.published_on') }}: {{ dateFormat(result.start_date,'cust_format_2') }} -->
                        </span>
                        <span v-else>
                            <span v-if="result.start_date && result.end_date && result.type != 'studies'">
                                <span v-if="dateFormat(result.start_date,'cust_format_1') == dateFormat(result.end_date,'cust_format_1')">
                                {{ dateFormat(result.end_date,'cust_format_2') }}
                                </span>
                                <span v-else>
                                {{ $tr('cms.from') }} {{ dateFormat(result.start_date,'cust_format_1') }} {{ $tr('cms.to') }} {{ dateFormat(result.end_date,'cust_format_2') }}
                                </span>
                            </span>
                            <span v-else-if="result.start_date && result.end_date && result.type == 'studies'">
                                <span v-if="result.start_date == result.end_date">
                                    {{ result.end_date }}
                                </span>
                                <span v-else>
                                    {{ $tr('cms.from') }} {{ result.start_date }} {{ $tr('cms.to') }} {{ result.end_date }}
                                </span>
                            </span>
                            <br v-if="result.start_time && result.end_time">
                            <span v-if="result.start_time && result.end_time">{{ result.start_time }} - {{ result.end_time }}</span>
                            <span v-else>
                                &nbsp;
                            </span>
                        </span>
                    </p>
                    <p class="card-text"> {{ category() }}</p>
 
                    <p class="card-text"> {{ getLocation() }}</p>

                    <div class="other_schedule_icon">
                        <a :href="'/event-details?event_id='+result.id+'#other_schedules'" v-if="result.type== 'planned_events'">
                            <span>
                                <i class="fas fa-list-ul"></i>
                            </span>
                        </a>
                        <a :href="'/qualification-details?qualification_id='+result.id+'#other_schedules'" v-if="result.type== 'planned_qualifications'">
                            <span>
                                <i class="fas fa-list-ul"></i>
                            </span>
                        </a>
                        <a :href="'/event-details?event_id='+result.id+'#other_schedules'"
                            v-if="result.type== 'planned_webinars'">
                            <span>
                                <i class="fas fa-list-ul"></i>
                            </span>
                        </a>
                    </div>

                    <div class="position-absolute d-none d-md-block" style="right:0px;top:0px;" v-if="result.type == 'studies'">
                        <div style="min-width:280px;" :class="{'text-center': true, alert:true, small:true, 'alert-success':(result.total_avail_seats > 10), 'alert-danger': (result.total_avail_seats <= 10) }">
                            <div v-if="result.total_avail_seats > 0">
                                {{ result.total_avail_seats }} 
                                {{ (result.total_avail_seats == 1) ? $tr('cms.study_seats_available_one') :  $tr('cms.study_seats_available') }}
                            </div>
                            <div v-else>
                                {{ $tr('cms.study_no_seats_available') }}
                            </div>
                        </div>
                        <div style="min-width:280px;" v-if="result.study_registration_str != ''" :class="'text-center alert small '+result.study_registration_class">
                            {{ result.study_registration_str }}
                        </div>
                    </div>
            </div>
    </span>

    <!--for article-->
    <span style="width:100%;" v-if="urlModel=='article'">
        <div class="image_wrapper">
            <img  width="115px" height="115px"
            :src="seminar.article_image
                ? `${appData.settings.simplyOrgUrl}media/article_images/${seminar.id}/${seminar.article_image}?tsamp=${new Date().getTime()}`
                : `${appData.settings.simplyOrgUrl}picture/article/${seminar.id}`"
            alt="SeminarImage"
            @error="handleImageError($event, seminar)"
            class="seminar-image"
        >
        </div>
        <div class="card-body" style="min-height: 130px; padding: 5px 0 20px 0;">
            <h5 class="card-title ">
                <a :href="'/article-details?article_id='+result.id">
                    <span ></span>
                    <Highlight :text="result.title" :search_text="appData.filterVars.search_text"
                        :watch_search="false"></Highlight>
                </a>
            </h5>
            
            <p class="card-text">
               
            </p>
            <p class="card-text"> {{ getArticleCategory() }}</p>
            <p class="card-text"> {{ getTargetGroup() }}</p>
            
            <div class="other_schedule_icon">
                <a :href="'/article-details?article_id='+result.id+'#other_schedules'" >
                    <span>
                        <i class="fas fa-list-ul"></i>
                    </span>
                </a>
            </div>
    </div>
    </span>
    <!--article code ended-->
    <!-- For Seminars -->
    <span style="width:100%" v-if="urlModel=='planned-event'">
                <div class="image_wrapper">
                <img width="115px" height="115px" v-if="typeof appData.settings != 'undefined'" class="card-img-top" :src="appData.settings.simplyOrgUrl+'de/picture/event/'+result.blueprint_id" alt="seminar image">
                </div>
                <div class="card-body">
                    <h5 class="card-title"><a :href="'/event-details?event_id='+result.id"> <Highlight :text="result.event_name" :search_text="appData.filterVars.search_text" :watch_search="false"></Highlight> </a></h5>
                    <p class="card-text" v-if="dateFormat(result.event_startdate,'cust_format_1') == dateFormat(result.event_enddate,'cust_format_1')">{{ dateFormat(result.event_startdate,'cust_format_2') }}</p>
                    <p class="card-text" v-else>{{ dateFormat(result.event_startdate,'cust_format_1') }} {{ $tr('cms.to') }} {{ dateFormat(result.event_enddate,'cust_format_2') }}</p>
                    <p class="card-text"> {{ getCategory() }}</p>
        
                    <p class="card-text"> {{ getLocation() }}</p>

                    <div class="other_schedule_icon">
                        <a :href="'/event-details?event_id='+result.id+'#other_schedules'" >
                            <span>
                                <i class="fas fa-list-ul"></i>
                            </span>
    </a>
    </div>
    </div>
    </span>
    <!-- For Qualificatons -->
    <span style="width:100%" v-if="urlModel=='planned-qualifications'">
                <div class="image_wrapper">
                <img width="115px" height="115px" v-if="typeof appData.settings != 'undefined'" class="card-img-top" :src="appData.settings.simplyOrgUrl+'de/picture/qualifications/'+result.qualification_blueprint_id" alt="seminar image">
                </div>
                <div class="card-body">
                    <h5 class="card-title"><a :href="'/qualification-details?qualification_id='+result.id">
                        <i class="fa fa-graduation-cap" style="margin-right: 5px;"></i><Highlight :text="result.name" :search_text="appData.filterVars.search_text" :watch_search="false"></Highlight> </a></h5>
                    <p class="card-text" v-if="dateFormat(result.start_date,'cust_format_2') == dateFormat(result.end_date,'cust_format_1')">{{ dateFormat(result.start_date,'cust_format_1') }}</p>
                    <p class="card-text" v-else>{{ dateFormat(result.start_date,'cust_format_1') }} {{ $tr('cms.to') }} {{ dateFormat(result.end_date,'cust_format_2') }}</p>
                    <!-- <p class="card-text"> {{ getLocation() }}</p>-->

                    <p class="card-text"> {{ getCategory() }}</p>
                    <div class="other_schedule_icon">
                        <a :href="'/qualification-details?qualification_id='+result.id" >
                            <span>
                                <i class="fas fa-list-ul"></i>
                            </span>
    </a>
    </div>
    </div>
    </span>


    <!-- For Courses -->
    <span style="width:100%" v-if="urlModel=='e-learning'">
                <div class="image_wrapper">
                <img width="115px" height="115px" v-if="typeof appData.settings != 'undefined'" class="card-img-top" :src="appData.settings.simplyOrgUrl+'de/picture/qualifications/'+result.id" alt="course image">
                </div>
                <div class="card-body">
                    <h5 class="card-title"><a :href="'/course-details?course_id='+result.id"> <Highlight :text="result.title" :search_text="appData.filterVars.search_text" :watch_search="false"></Highlight> </a></h5>
                    <p class="card-text">  {{ dateFormat(result.valid_from,'cust_format_1') }} {{ $tr('cms.to') }} {{ dateFormat(result.valid_to,'cust_format_2') }}</p>
                    <p class="card-text">  {{ getCategory() }}  </p>
                    <p class="card-text"> {{ getLocation() }}</p>
                    <div class="other_schedule_icon">
                        <a :href="'/course-details?course_id='+result.id" >
                            <span>
                                <i class="fas fa-list-ul"></i>
                            </span>
    </a>
    </div>
    </div>
    </span>
    </div>
    </span>
</script>
<script>
        componentsToRegister.add({
            name: 'seminarCard',
            options: {
                template: '#seminarCardTemplate',
                props: ['result', 'template', 'urlModel'],
                data: function data() {
                    return {
                        appData: appData,
                        seminar: this.result,
                        lang:app.lang
                    };
                },
                methods: {
                    getCategory: function getCategory() {
                        var getCategory = getHandler('SeminarCard', 'getCategory');
                        var cat = getCategory(this);
                        return cat;
                    },
                    getLocation: function getLocation() {
                        if (typeof this.result != 'undefined') {
                            // return app.cleanLocationStr(this.result.locations);
                            if(this.result.locations) {
                                return this.$tr('cms.location') + ": " + this.result.locations
                            }
                        }
                    },
                  
                    category: function () {
                        var cat_name = app.lang == 'de' ? 'event_category_name_de' :
                            'event_category_name';
                        var cats = [];
                        if (this.seminar.categories && this.seminar.categories.length > 0) {
                            for (i in this.seminar.categories) {
                                cats.push(this.seminar.categories[i][cat_name]);
                            }

                        }
                        return this.$tr('cms.category') + ': ' + cats.join(', ');
                    },
                    getArticleCategory: function getArticleCategory() {
                        var getArticleCategory = getHandler('SeminarCard', 'getArticleCategory');
                        console.log("getArticle",this);
                        var cat = getArticleCategory(this);
                        return cat;
                    },
                    getTargetGroup: function getTargetGroup(){
                        var getTargetGroup = getHandler('SeminarCard', 'getTargetGroup');
                        var cat=getTargetGroup(this);
                        return cat;
                    }
                },
                watch: {}
            }
        })
</script>
    <script type="x/template" id="side_filters">
    <div class="filter_wrapper filter_wrapper_hide" v-if="homepageFilterSettings.home_filters_toggle == 1 && model != 'article'">
        <div class="filter_header">
            <span class="left_text">
                <i class="fas fa-filter"></i> {{ $tr('cms.filters')}}
                <span class="float-md-right float-right right_text">
                    <a href="javascript:void(0)" v-on:click="clearFilters">{{ $tr('cms.clear_filters')}}</a>
                </span>
            </span>
        </div>

        <div v-if="typeof homepageFilterSettings == 'undefined' || (typeof homepageFilterSettings != 'undefined' && homepageFilterSettings.by_seminar_type == 1)">
            <div class="filter_subheader">{{ $tr('cms.by_filter') }}</div>
            <div class="contenttype_wrapper">
                <formGroup  v-if="FtmIsEnabled('e-learning')" ref="filterForms" :slide="appData.side_filters.seminar_listing_elearning"></formGroup>
                <formGroup v-else ref="filterForms" :slide="appData.side_filters.seminar_listing"></formGroup>
            </div>
        </div>

        <div v-if="currentListType != 'e_learning' && (typeof homepageFilterSettings == 'undefined' || (typeof homepageFilterSettings != 'undefined' && homepageFilterSettings.by_date == 1))">
            <div class="filter_subheader">{{ $tr('cms.by_date') }}</div>
            <div class="date_wrapper">
                <formGroup ref="filterForms" :slide="appData.side_filters.date_group"></formGroup>
            </div>
        </div>

        <div v-if="currentListType != 'e_learning' && currentListType != 'planned_webinars' && (typeof homepageFilterSettings == 'undefined' || (typeof homepageFilterSettings != 'undefined' && homepageFilterSettings.by_location == 1))">
            <div v-show="location_show" class="filter_subheader">{{ $tr('cms.by_location') }} </div>
            <div v-show="location_show" class="contenttype_wrapper">
                <formGroup ref="filterForms" :slide="appData.side_filters.locations"></formGroup>
            </div>
        </div>

        <div v-if="typeof homepageFilterSettings == 'undefined' || (typeof homepageFilterSettings != 'undefined' && homepageFilterSettings.by_seminar_category == 1)" v-for="(filter,index) in appData.side_filters.common_filters">
            <div class="filter_subheader">{{ $tr('cms.'+index) }} </div>
            <div class="contenttype_wrapper">
                <formGroup ref="filterForms" :slide="filter"></formGroup>
            </div>
        </div>

        <div v-if="typeof homepageFilterSettings == 'undefined' || (typeof homepageFilterSettings != 'undefined' && homepageFilterSettings.by_target_group == 1)">
            <div class="filter_subheader">{{ $tr('cms.target_group') }} </div>
            <div class="contenttype_wrapper">
                <formGroup ref="filterForms" :slide="appData.side_filters.target_group"></formGroup>
            </div>
        </div>

        <br/>
        <span class="float-md-right float-right right_text">
            <a href="javascript:void(0)" v-on:click="hideFilters">{{ $tr('cms.hide_filters')}}</a>
        </span>
    </div>
    <div v-else-if="articleShopSettings.article_shop_enable == '1' && model == 'article'" class="filter_wrapper filter_wrapper_hide">
        <div class="filter_header">
            <span class="left_text">
                <i class="fas fa-filter"></i> {{ $tr('cms.filters')}}
                <span class="float-md-right float-right right_text">
                    <a href="javascript:void(0)" v-on:click="clearFilters">{{ $tr('cms.clear_filters')}}</a>
                </span>
            </span>
        </div>
        <div>
            <div class="filter_subheader">{{ $tr('cms.target_group') }} </div>
            <div class="contenttype_wrapper">
                <formGroup ref="filterForms" :slide="appData.side_filters.target_group"></formGroup>
            </div>
        </div>
        <div>
            <div class="filter_subheader">{{ $tr('cms.article_category') }} </div>
            <div class="contenttype_wrapper">
                <formGroup ref="filterForms" :slide="appData.side_filters.article_category"></formGroup>
            </div>
        </div>

        <span class="float-md-right float-right right_text">
            <a href="javascript:void(0)" v-on:click="hideFilters">{{ $tr('cms.hide_filters')}}</a>
        </span>
    </div>
</script>
<script>
        componentsToRegister.add({
            name: 'SideFilters',
            options: {
                template: '#side_filters',
                props: ['filters', 'model'],
                data: function data() {

                    try{
                        if(window.commonComponentMethods.FtmIsEnabled('study-creation-feature') === false) {
                            appData.side_filters.seminar_listing.fields.seminar_listing.preOptions = appData.side_filters.seminar_listing.fields.seminar_listing.preOptions.filter((item) => (item.value !== 'studies'))
                            
                            appData.side_filters.seminar_listing_elearning.fields.seminar_listing.preOptions = appData.side_filters.seminar_listing_elearning.fields.seminar_listing.preOptions.filter((item) => (item.value !== 'studies'))
                        }
                    }catch(e){console.warn(e);}

                    return {
                        appData: appData,
                        homepageFilterSettings: homepageFilterSettings,
                        listen_for_changes: false,
                        urlModel: this.model,
                        currentListType: '',
                        articleShopSettings:articleShopSettings,
                    };
                },
                mounted: function mounted() {
                    console.log(articleShopSettings,"this is the setting");
                    console.log(homepageFilterSettings,"this is the setting");
                    console.log("appData",appData);
                    var _this = this;
                    console.log("filterForms", _this.$children);
                    var event_type = getSearchParams('type');
                    var city = getSearchParams('city');
                    var start_date = getSearchParams('start_date');
                    var end_date = getSearchParams('end_date');
                    var category = getSearchParams('CategoryID');
                    var params = {};
                    params.id = category;
                    params = JSON.stringify(params);
                    $.get(getBaseUrl() + 'Base/search&model=event-category&params='+ params,
                        function (data) {
                                console.log('data');
                                console.log(data);
                            _this.categoryID = data.data[0].id;
                        }).error(function () {
                        unblockUI('.container');
                    });

                    if(typeof event_type != 'undefined' && event_type != ''){
                        appData.filterVars.seminar_listing = event_type;
                        if(typeof _this.$children[0] != 'undefined' && typeof _this.$children[0].$refs.formFields_seminar_listing[0] != 'undefined'){
                            if(typeof _this.$children[0].$refs.formFields_seminar_listing[0].fieldObj.preOptions != 'undefined'){
                                var eventTypeOptions = _this.$children[0].$refs.formFields_seminar_listing[0].fieldObj.preOptions;
                                $.each(eventTypeOptions, function(key, value){
                                    if(value.value == event_type){
                                        _this.$children[0].$refs.formFields_seminar_listing[0].selected = value;
                                    }
                                });
                            }
                        }
                    }

                    if(typeof start_date != 'undefined' && start_date != ''){
                        appData.filterVars.start_date = start_date;
                        if(typeof _this.$children[1] != 'undefined' && typeof _this.$children[1].$refs.formFields_start_date[0] != 'undefined'){
                            _this.$children[1].$refs.formFields_start_date[0].value = start_date;
                        }
                    }

                    if(typeof end_date != 'undefined' && end_date != ''){
                        appData.filterVars.end_date = end_date;
                        if(typeof _this.$children[1] != 'undefined' && typeof _this.$children[1].$refs.formFields_end_date[0] != 'undefined'){
                            _this.$children[1].$refs.formFields_end_date[0].value = end_date;
                        }
                    }

                    if(typeof category != 'undefined' && category != ''){
                            appData.filterVars.CategoryID = category;
                        setTimeout(() => {
                            if(typeof _this.$children[3] != 'undefined' && typeof _this.$children[3].$refs.formFields_CategoryID[0] != 'undefined'){
                                if(typeof _this.$children[3].$refs.formFields_CategoryID[0].options != 'undefined'){       
                                    _this.$nextTick(function () {
                                        var categoryOptions = _this.$children[3].$refs.formFields_CategoryID[0].options;
                                        $.each(categoryOptions, function(key, value){
                                            if(value.value == _this.categoryID){
                                                if(_this.$children[3].$refs.formFields_CategoryID[0].selected.length == 0){
                                                    console.log("testing new", _this.$children[3].$refs.formFields_CategoryID[0]);
                                                    _this.$children[3].$refs.formFields_CategoryID[0].selected.push(value);
                                                }
                                            }
                                        });
                                    });                        
                                }
                            }else{
                                if(typeof _this.$children[2] != 'undefined' && typeof _this.$children[2].$refs.formFields_CategoryID[0] != 'undefined'){
                                    if(typeof _this.$children[2].$refs.formFields_CategoryID[0].options != 'undefined'){       
                                        _this.$nextTick(function () {
                                            var categoryOptions = _this.$children[2].$refs.formFields_CategoryID[0].options;
                                            $.each(categoryOptions, function(key, value){
                                                if(value.value == _this.categoryID){
                                                    if(_this.$children[2].$refs.formFields_CategoryID[0].selected.length == 0){
                                                        console.log("testing new", _this.$children[2].$refs.formFields_CategoryID[0]);
                                                        _this.$children[2].$refs.formFields_CategoryID[0].selected.push(value);
                                                    }
                                                }
                                            });
                                        });                        
                                    }
                                }
                            }
                        }, 1500);
                    }

                    setTimeout(function () {
                        _this.listen_for_changes = true;
                    }, 2000);

                    if ($('.datebox').length > 0) {
                        $('.datebox').attr('readonly', true);
                    }
                },
                methods: {
                    reportChange: function reportChange(field, value) {
                        if (this.listen_for_changes) {
                            if (field.name == 'seminar_listing') {
                                this.currentListType = value;
                                /* if(value == ''){
                                     value = 'planned-qual-event';
                                 }
                                 this.$emit('model', value);
                                 this.$parent.$refs.searchResults.loaded = false;
                                 this.$parent.model = value; */
                                appData.filterVars['is_deploy_internet'] = 1;
                            }
                            appData.filterVars.page = 1;
                            appData.filterVars[field.name] = value;
                            triggerChangeInFilterFromSideFilter();
                        }
                    },
                    clearFilters: function clearFilters() {
                        var _this = this;
                        if (typeof this.$parent.$refs.catalogSearch != 'undefined') {
                            _this.$parent.$refs.catalogSearch.search_text = "";
                        }
                        this.urlModel = "planned-qual-event";
                        // this.urlModel = '';
                        for (var i in this.$children) {
                            var child = this.$children[i];
                            console.log(child.$children);
                            for (var j in child.$children) {
                                if (typeof child.$children[j].value != 'undefined') {
                                    child.$children[j].value = '';
                                }
                                if (typeof child.$children[j].resetValue == 'function') {
                                    child.$children[j].resetValue();
                                }
                                appData.filterVars[child.$children[j].field.name] = '';
                            }
                        }
                        triggerChangeInFilter();
                    },
                    hideFilters: function hideFilters() {
                        if (typeof this.$parent.$refs.catalogSearch != 'undefined') {
                            this.$parent.$refs.catalogSearch.toggleFilter();
                        }
                    }
                },
                watch: {
                    urlModel: function urlModel() {
                        //alert(this.$parent.model);
                        this.$emit('model', this.urlModel);
                        this.$parent.$refs.searchResults.loaded = false;
                        //this.$parent.model = this.urlModel;
                        appData.filterVars['is_deploy_internet'] = 1;
                        //this.reportChange({'name' : 'model'},this.urlModel);
                    }
                },
                computed: {
                    location_show: function location_show() {
                        return this.urlModel == 'planned-qual-event' ? true : false;
                    }
                }
            }
        });
</script>

    <script type="x/template" id="catalogTemplate">
        <span class="catalog_container">
            <catalogSearch ref="catalogSearch"></catalogSearch>
            <searchResults :template="'list'" :model="model" :method="method" ref="searchResults"></searchResults>
            <pagination ref="pagination" ></pagination>
            <sideFilters :model="model" ></sideFilters>
        </span>
    </script>

    <script type="x/template" id="catalogSearchTemplate">
        <div class="row">
            <div class="col-lg-9 col-md-8 col-sm-8">
                <div class="input-group mb-3">
                    <input type="text" class="form-control" v-model="search_text" :placeholder="$tr('cms.search')" aria-label="Recipient's username" aria-describedby="basic-addon2">
                    <div class="input-group-append">
                        <button class="btn btn-primary" @click="search" type="button">
                        <i class="fas fa-search"></i>{{ $tr('cms.search') }}</button>
                    </div>
                </div>

            </div>
            <div v-if="typeof homepageFilterSettings != 'undefined' && typeof homepageFilterSettings.home_filters_toggle != 'undefined' && homepageFilterSettings.home_filters_toggle == 1" class="col-lg-3 col-md-3 col-sm-3 filter_button" >
                <button class="btn btn-primary" v-on:click="toggleFilter" id="filter_button" type="button">
                <i class="fas fa-filter"></i>{{ show_hide_filter_text }}</button>

            </div>
        </div>
    </script>

    <script type="x/template" id="FooterLinksTemplate">
    <div>
        <span v-for="(link,index) in getLanguageData()" class="footer_link_span" :key="index">
            <span v-if="index > 0 && !link.separator_class"> | </span>
            <span v-if="link.separator_class" :class="link.separator_class"></span>
            <a v-else target="_blank" :href="link.link"><i v-if="link.icon_class" :class="link.icon_class"></i> {{ $tr(link.title) }}</a>
        </span>
    </div>
</script>
<script type="x/template" id="appTemplate">
    <div>
        <template v-for="(child, index) in childVues">
            <component :app_loaded="loaded" :is="child" :key="child.name" ref="rootChilds" v-bind='appData' 
            :pageData='"{}"' ></component>
	    </template>
        <div id="page-footer">
    <div id="footer-notice">
        <footerLinks :links='{"de":[{"link":"#","title":"cms.AGB"},{"link":"#","title":"cms.impressum"},{"link":"#","title":"cms.datenschutz"},{"link":"#","title":"cms.contact"}]}'></footerLinks>
    </div>
</div>
    </div>

</script>
<div class="container  main_wrapper">
    <div id="appContaier">

    </div>

</div>



<style type="text/css">
    .has-error {
        border-color: #a94442;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    }
    .has-error .v-select .open-indicator:before{
        border-color: #a94442;
    }
</style><script>
		function translationsLoader(callback){
			callback(null);
		}
		</script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>
<script src="ext/simplyorg_features/Resources/Public/Javascript/app_data.js?1591940770" type="text/javascript"></script>
<script  src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js" type="text/javascript"></script>
<script  src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js" type="text/javascript"></script>
<script  src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" type="text/javascript"></script>
<script  src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" type="text/javascript"></script>
<script  src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js" type="text/javascript"></script>
<script  src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.0/js/toastr.min.js" type="text/javascript"></script>
<script  src="https://test.simplyorg.de/global/js/ui-toastr.js" type="text/javascript"></script>
<script  src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js" type="text/javascript"></script>
<script  src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.18.0/jquery.validate.min.js" type="text/javascript"></script>
<script  src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.18.0/additional-methods.min.js" type="text/javascript"></script>
<script  src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.4.3/jquery.contextMenu.min.js" type="text/javascript"></script>
<script  src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js" type="text/javascript"></script>
<script  src="https://cdnjs.cloudflare.com/ajax/libs/vue-select/2.6.4/vue-select.js" type="text/javascript"></script>
<script  src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js" type="text/javascript"></script>
<script  src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.34/moment-timezone.min.js" type="text/javascript"></script>
<script  src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.34/moment-timezone-with-data.min.js" type="text/javascript"></script>
<script  src="https://cdn.jsdelivr.net/npm/v-calendar@2.4.0/lib/v-calendar.umd.min.js" type="text/javascript"></script>
<script  src="https://cdn.jsdelivr.net/npm/v-money@0.8.1/dist/v-money.min.js" type="text/javascript"></script>
<script  src="https://cdnjs.cloudflare.com/ajax/libs/v-mask/2.0.1/v-mask.min.js" type="text/javascript"></script>
<script  src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.js" type="text/javascript"></script>
<script  src="https://cdnjs.cloudflare.com/ajax/libs/clndr/1.4.7/clndr.min.js" type="text/javascript"></script>
<script  src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.5.1/locale-all.js" type="text/javascript"></script>
<script  src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/1.9.0/scheduler.min.js" type="text/javascript"></script>
<script  src="https://cdn.ckeditor.com/4.22.1/standard/ckeditor.js" type="text/javascript"></script>
<script  src="https://cdn.jsdelivr.net/npm/vue-good-table@2.21.10/dist/vue-good-table.js" type="text/javascript"></script>
<script src="/ext/simplyorg_features/Resources/Public/Javascript/vue.js" type="text/javascript"></script>
<script src="/ext/simplyorg_features/Resources/Public/Javascript/vue-select.js" type="text/javascript"></script>
<script src="/ext/simplyorg_features/Resources/Public/Javascript/jquery.blockui.min.js" type="text/javascript"></script>
<script src="/ext/simplyorg_features/Resources/Public/Javascript/bootstrap-datetimepicker.js" type="text/javascript"></script>
<script src="/ext/simplyorg_features/Resources/Public/Javascript/basecomponents.js?version=9.33" type="text/javascript"></script>
<script src="/ext/simplyorg_features/Resources/Public/Javascript/trainercalendar.js" type="text/javascript"></script>
<script src="/ext/simplyorg_features/Resources/Public/Javascript/trainercalendarnew.js" type="text/javascript"></script>
<script src="/ext/simplyorg_features/Resources/Public/Javascript/base_edit_profile.js" type="text/javascript"></script>
<script src="/ext/simplyorg_features/Resources/Public/Javascript/base_my_learnings.js" type="text/javascript"></script>
<script src="/ext/simplyorg_features/Resources/Public/Javascript/base_scorm_player.js" type="text/javascript"></script>
<script src="/ext/simplyorg_features/Resources/Public/Javascript/base_catalog.js" type="text/javascript"></script>
<script src="/ext/simplyorg_features/Resources/Public/Javascript/app_data.js" type="text/javascript"></script>
<script src="/ext/simplyorg_features/Resources/Public/Javascript/website.js?version=9.33" type="text/javascript"></script>
<script src="/ext/simplyorg_features/Resources/Public/Javascript/base_landing.js" type="text/javascript"></script>
<script src="/ext/simplyorg_features/Resources/Public/Javascript/input_vues.js" type="text/javascript"></script>
<script src="/ext/simplyorg_features/Resources/Public/Javascript/v-money.js" type="text/javascript"></script>
<script src="/ext/simplyorg_features/Resources/Public/Javascript/v-mask.min.js" type="text/javascript"></script>
<script src="/ext/simplyorg_features/Resources/Public/Javascript/map.js" type="text/javascript"></script>
<script src="/ext/simplyorg_features/Resources/Public/Javascript/amcharts/amcharts.js" type="text/javascript"></script>
<script src="/ext/simplyorg_features/Resources/Public/Javascript/amcharts/serial.js" type="text/javascript"></script>
<script src="/ext/simplyorg_features/Resources/Public/Javascript/amcharts/export.min.js" type="text/javascript"></script>
<script src="/ext/simplyorg_features/Resources/Public/Javascript/amcharts/light.js" type="text/javascript"></script>
<script src="/ext/simplyorg_features/Resources/Public/Javascript/jquery.tmpl.min.js" type="text/javascript"></script>
<script src="/ext/simplyorg_features/Resources/Public/Javascript/handlers.js" type="text/javascript"></script>
<script src="/ext/simplyorg_features/Resources/Public/plugins/bootstrap-fileinput/bootstrap-fileinput.js" type="text/javascript"></script>
<script src="/ext/simplyorg_features/Resources/Public/Javascript/jquery.Jcrop.min.js" type="text/javascript"></script>
<script  src="/ext/simply_org_1/Resources/Public/Javascript/jquery.checkradios.min.js" type="text/javascript"></script>
<script  src="/ext/simply_org_1/Resources/Public/Javascript/custom.js" type="text/javascript"></script>
<script  src="/ext/simply_org_1/Resources/Public/Javascript/feedback_plugin.js" type="text/javascript"></script>
<script  src="/ext/simply_org_1/Resources/Public/Javascript/jquery.tmpl.min.js" type="text/javascript"></script>
<script  src="/ext/simply_org_1/Resources/Public/Javascript/application_form.js" type="text/javascript"></script>

</body>
</html>
