{% extends 'base.html.twig' %}

{% block title %}{{ 'USER_PROFILE_TITLE'|translate }}{% endblock %}

{% block wrapperClass %}myspace profile{% endblock %}

{% block body %}

	<div class="container clearfix navpadding">

		<div class="col-md-12 pt30 pr0 pl0">

			<div class="col-md-3 col-sm-5 clearfix">
				{{ renderTwigBlock ('includes/user/user.sidebar',{active : 'profile', showConnect: showConnect}) }}
			</div>
			<div class="col-md-9 col-sm-7 col-xs-12 content-general" id="myAccountAnchor">

				<form id="changeProfileForm" class="form-horizontal" action="/ajax/postdata/" method="POST">
					<div class="formulierveld col-md-12 p0">
						<h2>{{ "MY_INSIDERS_ACCOUNT"|translate }}{{ redirect }}</h2>

						<div class="form-group clearfix">
							<label class="col-md-3 control-label">{{ 'SALUTATION'|translate }} *</label>
							<div class="col-md-4">
								<select class="form-control profileInput" name="gender" id="gender">
									<option value="" disabled selected hidden>{{ "SELECT"|translate }}</option>
									<option {{ (userdata.gender=="male") ? "selected" : "" }} value="male">{{ "MR"|translate }}</option>
									<option {{ (userdata.gender=="female") ? "selected" : "" }} value="female">{{ "MRS"|translate }}</option>
									<option {{ (userdata.gender=="non_binary") ? "selected" : "" }} value="non_binary">{{ "GENDER_NON_BINARY"|translate }}</option>
									<option {{ (userdata.gender=="unknown") ? "selected" : "" }} value="unknown">{{ "GENDER_UNKNOWN"|translate }}</option>
								</select>
							</div>
						</div>

						{# Change name order for Japan #}
						{% if regGet('countrycodeid') == 51 %}
							<div class="form-group clearfix">
								<label class="col-md-3 control-label">{{ 'NAME'|translate }} *</label>
								<div class="col-md-9">
									<input type="text" name="lastname" id="lastname" class="form-control profileInput" value="{{ userdata.lastname }}">
								</div>
							</div>

							<div class="form-group clearfix">
								<label class="col-md-3 control-label">{{ 'FIRST_NAME'|translate }} *</label>
								<div class="col-md-9">
									<input type="text" name="firstname" id="firstname" class="form-control profileInput" value="{{ userdata.firstname }}">
								</div>
							</div>
						{% else %}
							<div class="form-group clearfix">
								<label class="col-md-3 control-label">{{ 'FIRST_NAME'|translate }} *</label>
								<div class="col-md-9">
									<input type="text" name="firstname" id="firstname" class="form-control profileInput" value="{{ userdata.firstname }}">
								</div>
							</div>

							<div class="form-group clearfix">
								<label class="col-md-3 control-label">{{ 'NAME'|translate }} *</label>
								<div class="col-md-9">
									<input type="text" name="lastname" id="lastname" class="form-control profileInput" value="{{ userdata.lastname }}">
								</div>
							</div>
						{% endif %}

						{%if regGet('countrycodeid') == 11 or regGet('countrycodeid') == 12%}
							<div class="form-group clearfix">
								<label class="col-md-3 col-xs-11 control-label">{{ "STR_FRM_BIRTHDATE"|translate }} *</label>
								<div class="col-md-2  col-xs-4">
									<select type="text" name="birthmonth" id="birthmonth" class="select form-control profileInput" required>
										<option value="" disabled selected hidden>MM</option>
										{% for month in 1..12 %}
											<option value="{{ month }}"
													{{ (userdata.birthdate|date('m') == month) ? 'selected' : '' }}>
												{{ month }}
											</option>
										{% endfor %}
									</select>
								</div>

								<div class="col-md-2 col-xs-4">
									<select name="birthday" id="birthday" type="text" class="select form-control profileInput" required>
										<option value="" disabled selected hidden>DD</option>
										{% for day in 1..31 %}
											<option value="{{ day }}"
													{{ (userdata.birthdate|date('d') == day) ? 'selected' : '' }}>
												{{ day }}
											</option>
										{% endfor %}
									</select>
								</div>

								<div class="col-md-2 col-xs-4">
									<select type="text" name="birthyear" id="birthyear" class="select form-control profileInput" required>
										<option value="" disabled selected hidden>YYYY</option>
										{% for year in "now"|date("Y").."now"|date("Y") - 120 %}
											<option value="{{ year }}"
													{{ (userdata.birthdate|date('Y') == year) ? 'selected' : '' }}>
												{{ year }}
											</option>
										{% endfor %}
									</select>
								</div>
							</div>
                        {% elseif regGet('countrycodeid') == 51 %}
							<div class="form-group clearfix">
								<label class="col-md-3 col-xs-11 control-label">{{ "STR_FRM_BIRTHDATE"|translate }} *</label>
								<div class="col-md-2 col-xs-4">
									<select type="text" name="birthyear" id="birthyear" class="select form-control profileInput" required>
										<option value="" disabled selected hidden>YYYY</option>
                                        {% for year in "now"|date("Y").."now"|date("Y") - 120 %}
											<option value="{{ year }}"
                                                    {{ (userdata.birthdate|date('Y') == year) ? 'selected' : '' }}>
                                                {{ year }}
											</option>
                                        {% endfor %}
									</select>
								</div>
								<div class="col-md-2  col-xs-4">
									<select type="text" name="birthmonth" id="birthmonth" class="select form-control profileInput" required>
										<option value="" disabled selected hidden>MM</option>
                                        {% for month in 1..12 %}
											<option value="{{ month }}"
                                                    {{ (userdata.birthdate|date('m') == month) ? 'selected' : '' }}>
                                                {{ month }}
											</option>
                                        {% endfor %}
									</select>
								</div>
								<div class="col-md-2 col-xs-4">
									<select name="birthday" id="birthday" type="text" class="select form-control profileInput" required>
										<option value="" disabled selected hidden>DD</option>
                                        {% for day in 1..31 %}
											<option value="{{ day }}"
                                                    {{ (userdata.birthdate|date('d') == day) ? 'selected' : '' }}>
                                                {{ day }}
											</option>
                                        {% endfor %}
									</select>
								</div>
							</div>
						{% else %}
							<div class="form-group clearfix">
								<label class="col-md-3 col-xs-11 control-label">{{ "STR_FRM_BIRTHDATE"|translate }} *</label>
								<div class="col-md-2 col-xs-4">
									<select name="birthday" id="birthday" type="text" class="select form-control profileInput" required>
										<option value="" disabled selected hidden>DD</option>
										{% for day in 1..31 %}
											<option value="{{ day }}"
													{{ (userdata.birthdate|date('d') == day) ? 'selected' : '' }}>
												{{ day }}
											</option>
										{% endfor %}
									</select>
								</div>
								<div class="col-md-2  col-xs-4">
									<select type="text" name="birthmonth" id="birthmonth" class="select form-control profileInput" required>
										<option value="" disabled selected hidden>MM</option>
										{% for month in 1..12 %}
											<option value="{{ month }}"
													{{ (userdata.birthdate|date('m') == month) ? 'selected' : '' }}>
												{{ month }}
											</option>
										{% endfor %}
									</select>
								</div>

								<div class="col-md-2 col-xs-4">
									<select type="text" name="birthyear" id="birthyear" class="select form-control profileInput" required>
										<option value="" disabled selected hidden>YYYY</option>
										{% for year in "now"|date("Y").."now"|date("Y") - 120 %}
											<option value="{{ year }}"
													{{ (userdata.birthdate|date('Y') == year) ? 'selected' : '' }}>
												{{ year }}
											</option>
										{% endfor %}
									</select>
								</div>
							</div>
						{% endif %}

						<div class="form-group clearfix">
							<label class="col-md-3 control-label">{{ 'MEMBERNAME'|translate }} *</label>
							<div class="col-md-9">
								<input type="text" name="membername" id="membername" class="form-control profileInput" value="{{ userdata.membername }}">
							</div>
						</div>

						<div class="form-group clearfix">
							<label class="col-md-3 control-label">{{ 'EMAIL'|translate }} *</label>
							<div class="col-md-9">
								<input type="text" name="email" id="email" class="form-control profileInput" value="{{ userdata.email }}">
							</div>
						</div>

						<div class="form-group clearfix">
							<div class="col-md-12">
								<input type="hidden" name="actie" id="actie" value="updateProfileData" />
								<button class="btn btn-primary blue" type="submit" id="updateProfileButton">
									<i class="fa fa-angle-right"></i>
									{{ "SAVE"|translate }}
								</button>
							</div>
						</div>
						<div class="form-group clearfix">
							<div id="outputProfile"></div>
						</div>
					</div>
				</form>
				<form id="changePasswordForm" class="form-horizontal" action="/ajax/postdata/" method="POST">
					<div class="form-group clearfix">
						<label class="col-md-2"></label>
						<div class="col-md-10">
							<a href="javascript:void(0);" class="right btn yellow" onclick="showpasswordfields();">{{ 'CHANGE_PASSWORD'|translate }}</a>
						</div>
					</div>
					<div id="password_fields" class="hide-normal">
						<div class="form-group">
							<label for="currentPassword" class="col-md-3 control-label">{{ "PASSWORD"|translate }} <span class="asterisk">*</span></label>
							<div class="col-md-9">
								<input autocomplete="off" type="password" class="form-control" value=""
									   id="currentPassword" placeholder="{{ "PASSWORD"|translate }}"
									   data-bv-notempty-message="{{ 'ERR_PASSWORD_REQUIRED'|translate }}"
									   data-bv-stringlength="true"
									   data-bv-stringlength-message="{{ 'ERR_PASSWORD_MINCHARS'|translate }}"
									   data-bv-stringlength-min="6" name="currentPassword" required
								>
							</div>
						</div>
						<div class="form-group">
							<label for="password" class="col-md-3 control-label">{{ "STR_MAIL_NIEUW_WACHTWOORD"|translate }} <span class="asterisk">*</span></label>
							<div class="col-md-9">
								<input autocomplete="off" type="password" class="form-control" value=""
									   id="password" placeholder="{{ "STR_MAIL_NIEUW_WACHTWOORD"|translate }}"
									   data-bv-notempty-message="{{ 'ERR_PASSWORD_REQUIRED'|translate }}"
									   data-bv-stringlength="true"
									   data-bv-stringlength-message="{{ 'ERR_PASSWORD_MINCHARS'|translate }}"
									   data-bv-stringlength-min="6" name="password" required
								>
							</div>
						</div>
						<div class="form-group">
							<label for="password2" class="col-md-3 control-label">{{ 'CONFIRMPASSWORD'|translate }} <span class="asterisk">*</span></label>
							<div class="col-md-9">
								<input autocomplete="off" type="password" class="form-control" value=""
									   data-bv-identical="true" data-bv-identical-field="password"
									   data-bv-identical-message="{{ 'ERR_PASSWORD_NOTEQUAL'|translate }}"
									   data-bv-notempty-message="{{ 'ERR_PASSWORD_REQUIRED'|translate }}"
									   id="password2" placeholder="{{ "CONFIRMPASSWORD"|translate }}" name="password2" required
								>
								<span class="help-block">{{ 'MINCHARS'|translate }}</span>
							</div>
						</div>
						<div class="form-group clearfix">
							<div class="col-md-12">
								<input type="hidden" name="actie" id="actie" value="updatePassword" />
								{# Following two lines are to also save the password in Redis #}
								<input type="hidden" name="redis" value="true">
								<input type="hidden" name="emailAddress" id="emailAddress" value="{{ userdata.email }}" />
								<button class="btn btn-primary blue" type="submit">
									<i class="fa fa-angle-right"></i>
									{{ "CHANGE"|translate }}
								</button>
							</div>
						</div>
						<div class="form-group clearfix">
							<div id="outputPassword"></div>
						</div>
					</div>

				</form>

				<form id="changePersonalForm" class="form-horizontal" action="/ajax/postdata/" method="POST">
					<div class="formulierveld col-md-12 p0" id="personalInfoAnchor">
						<h2>{{ "MY_PERSONAL_INFORMATION"|translate }}</h2>

						<div id="addressFields">{{ addressfield|raw }}</div>

						<div class="form-group clearfix">
							<label class="col-md-3 control-label" for="">{{ "STR_FRM_MARITAL_STATUS"|translate }}*</label>
							<div class="col-md-4">
								<select type="text" name="civilState" id="civilState" class="select form-control personalInput" required>
									<option value="" disabled selected hidden>{{ "STR_FRM_MARITAL_STATUS"|translate }}</option>
									{% for state in pdata.burgstaat %}
										<option value="{{ state.id }}"
												{{ ( userdata.web_user_burgstaat_id == state.id) ? ' selected ' : '' }}>
											{{ state.title }}
										</option>
									{% endfor %}
								</select>
							</div>
						</div>

						{% set numberOfKids = 0 %}
						{% if pdata.kinderen is valuableArray %}
							{% set numberOfKids = pdata.kinderen|length %}
						{% endif %}

						<div class="form-group clearfix">
							<label class="col-md-3 control-label">{{ "KIDS"|translate }} *</label>
							<div class="col-md-4">
								<select type="text" name="children" id="children" class="select form-control personalInput"
										onchange="showBirthdatesChildren(this.value);">
									{% for child in 0..10 %}
										<option value="{{ child }}"
												{{ (numberOfKids == child) ? 'selected' : '' }}>
											{{ child }}
										</option>
									{% endfor %}
								</select>
							</div>
						</div>
						<div class="form-group clearfix {{ numberOfKids < 1 ? 'hidden' : '' }}" id="kidsform">
							<label for="child" class="col-md-3 control-label">{{ "STR_FRM_KIND"|translate ~ " " ~ child }}</label>
							<div class="col-md-9 p0">
								{% for child in 1..10 %}
									<div class="col-md-12 p0 clearfix childyear {{ child > numberOfKids ? 'hidden' : '' }}" id="child_{{ child }}">
										<div class="col-md-3 pb10">
											<select name="childBirthDate[]" class="form-control input-sm" id="childBirthDate_{{ child }} personalInput">
												<option value="">-</option>
												{% for year in "now"|date("Y").."now"|date("Y") - 35 %}
													<option {{ (year == pdata.kinderen[child - 1]['geboortejaar'] ? " selected " : "") }}
															value="{{ year }}" >
														{{ year }}
													</option>
												{% endfor %}
											</select>
										</div>
									</div>
								{% endfor %}
							</div>
						</div>
						<div class="form-group clearfix">
							<label for="phone" class="col-md-3 control-label">{{ "PHONE"|translate }}*</label>
							<div class="col-md-9">
								<input name="phone" id="phone" type="text" class="form-control personalInput" value="{{ userdata.phone }}">
							<span class="clearfix">
								{{ "_STR_TELEFOON_EXCEPTIONAL"|translate }}
							</span>
							</div>
						</div>
						{# US and US(ES) get etnicity choice #}
						{% if regGet('countrycodeid') in [11, 12] %}
							<div class="form-group">
								<label for="fk_web_ethnicity" class="col-lg-3 control-label">
									{{ "ETHNICITY"|translate }}*
								</label>

								<div class="col-lg-9">
									<select name="fk_web_ethnicity" class="form-control">
										<option value=""> -- </option>
										{% if pdata.ethnicities is valuableArray %}
											{% set userEtnicity = pdata.userdata.fk_web_ethnicity %}
											{% for etnicity in pdata.ethnicities %}
												<option value="{{ etnicity.id }}"
														{{ (userEtnicity is defined and userEtnicity is not empty and userEtnicity == etnicity.id ? " selected " : "") }}>
													{{ etnicity.title }}
												</option>
											{% endfor %}
										{% endif %}
									</select>
								</div>
							</div>
						{% endif %}
						<div class="form-group clearfix">
							<div class="col-md-12">
								<button class="btn btn-primary blue" type="submit" id="updatePersonalButton">
									<i class="fa fa-angle-right"></i>
									{{ "SAVE"|translate }}
								</button>
							</div>
						</div>
						<div class="form-group clearfix">
							<div id="outputPersonal"></div>
						</div>
						<input type="hidden" name="fk_app_language_codes" value="{{ regGet('taalcodeid') }}"/>
						<input type="hidden" name="ref" id="ref" value="{{ app.user.id }}"/>
						<input type="hidden" name="actie" value="updatePersonal"/>
					</div>
				</form>
				<div class="form-group clearfix">
                    {% if showConnect %}
                        <div class="formulierveld col-md-12 p0" id="socialConnectAnchor">
                            <h2>{{ "SOCIAL_CONNECT_TITLE"|translate }}</h2>

                            <div class="col-md-12 p0 clearfix">
								<p>{{ "SOCIAL_CONNECT_DESCRIPTION"|translate }}</p>
                                <div class="col-md-12 p0 clearfix">
                                    {{ socialSnippet|raw }}
                                </div>
                            </div>
                        </div>
                    {% endif %}

					<div class="formulierveld col-md-12 p0" id="profileSurveyAnchor">
						<h2>{{ readFunnel(items.1, 1) }}</h2>

						<div class="col-md-12 p0 clearfix">
							{{ readFunnel(items.1, 3)|raw }}
							<div class="col-md-12 p0 clearfix">
								<a class="btn btn-primary pull-right blue" id="updateProfileSurvey"
								   href="/{{ regGet('locale') }}/survey/{{ "STD_PROFILE_PROFILE_SURVEY"|translate }}/1">
									<i class="fa fa-angle-right"></i>
									{{ "OPEN_THE"|translate }} {{ "PROFILE_SURVEY"|translate|lower }}
								</a>
							</div>
						</div>
					</div>

					<div class="formulierveld col-md-12 p0" id="activitySurveyAnchor">
						<h2>{{ readFunnel(items.2, 1) }}</h2>

						<div class="col-md-12 p0 clearfix">

							{{ readFunnel(items.2, 3)|raw }}

							<div class="col-md-12 p0 clearfix">
								<a class="btn btn-primary pull-right blue" id="updateActivitySurvey"
								   href="/{{ regGet('locale') }}/survey/{{ "STD_PROFILE_ACTIVITY_SURVEY"|translate }}/1">
									<i class="fa fa-angle-right"></i>
									{{ "OPEN_THE"|translate }} {{ "ACTIVITY_SURVEY"|translate|lower }}
								</a>
							</div>
						</div>
					</div>

					<div class="formulierveld col-md-12 p0" id="onlineSurveyAnchor">
						<h2>{{ readFunnel(items.3, 1) }}</h2>

						<div class="col-md-12 p0 clearfix">
							{{ readFunnel(items.3, 3)|raw }}
							<div class="col-md-12 p0 clearfix">
								<a class="btn btn-primary pull-right blue" id="updateOnlineSurvey"
								   href="/{{ regGet('locale') }}/survey/{{ "STD_PROFILE_ONLINE_SURVEY"|translate }}/1">
									<i class="fa fa-angle-right"></i>
									{{ "OPEN_THE"|translate }} {{ "ONLINE_SURVEY"|translate|lower }}
								</a>
							</div>
						</div>
					</div>

					{% if transactions %}
					<div class="formulierveld col-md-12 p0" id="myTransactions">
						<h2>{{ readFunnel(items.4, 1) }}</h2>

						<div class="col-md-12 p0 clearfix">
                            {{ readFunnel(items.4, 3)|raw }}
							<div class="col-md-12 p0 clearfix">
                                {% include 'user/transactions.html.twig' with {
                                    transactions : transactions
                                } %}
							</div>
						</div>
					</div>
					{% endif %}

					{% set hash = "SALT"|translate ~ userdata.id ~ "SALT"|translate ~ userdata.email %}

					<div style="display: flex; flex-direction: row; justify-content: space-between;">
						<div>
							<input type="checkbox" id="chk_mail_sub" onchange="toggleReceiveMail()"
								   {% if userdata.is_mailable %}checked{% endif %} />
							<label>{{ "RECEIVE_NEWSLETTER"|translate }}</label>
						</div>

						<gdpr-request-for-user-deletion-view />
					</div>

					<p class="mb20 p0">* {{ "REQUIRED_FIELDS"|translate }}</p>
				</div>
			</div>
		</div>
	</div>

	<script>
		function toggleReceiveMail() {
			$.ajax({
				url: '{{ regGet('url') }}ajax/postdata/',
				type: "POST",
				data: {
					actie: 'toggleReceiveMail',
					value: $("#chk_mail_sub").is(":checked")
				},
				success: function(result) {
					const ajaxResponse = JSON.parse(result);
					if(ajaxResponse.status_code === 401)
					{
						window.location = '{{ regGet('url') }}'
					}
				}
			});
		}
	</script>

{% endblock %}
{% block assetsBottom %}
	{{ parent() }}
	<script type="text/javascript" src="{{ regGet('jspath') }}profile.js"></script>
	{{ upl|raw }}
	{{ fetchFormValidation('changeProfileForm','outputProfile','successProfile(responseText);', false, true)|raw }}
	{{ fetchFormValidation('changePasswordForm','outputPassword','successPassword(responseText);', false, true)|raw }}
	{{ fetchFormValidation('changePersonalForm','outputPersonal','successPersonal(responseText);', false, true)|raw }}

{% endblock %}
{% block readyStateFunction %}
	initCircle();
	{% if redirected is not null %}
		{% if redirected == 1 %}
			setTimeout(scrollToElement('myAccountAnchor'), 1000);
		{% elseif redirected == 2 %}
			setTimeout(scrollToElement('personalInfoAnchor'), 1000);
		{% elseif redirected == 3 %}
			setTimeout(scrollToElement('socialConnectAnchor'), 1000);
		{% elseif redirected == 4 %}
			setTimeout(scrollToElement('profileSurveyAnchor'), 1000);
		{% elseif redirected == 5 %}
			setTimeout(scrollToElement('activitySurveyAnchor'), 1000);
		{% elseif redirected == 6 %}
			setTimeout(scrollToElement('onlineSurveyAnchor'), 1000);
		{% endif %}
	{% endif %}
	initSurveyFormUploaders();

	{% if numberOfKids > 0 %}
		showBirthdatesChildren({{ numberOfKids }});
	{% endif %}

	if(typeof initAddressField !== 'undefined'){
		initAddressField();
	}

	$('#fk_web_countries').change(function(){
		$.get("{{ regGet('url') }}ajax/loadaddressfields/" + $('#fk_web_countries').val())
			.done(function(data) {
			$('#addressFields').html(data);

			initAddressField();
		});
	});

    {% set level1Complete = (profile.level1 is defined and profile.level1 == true) %}
	{% if level1Complete  %}
		$('#updateProfileButton').html('<i class="fa fa-refresh"></i>{{ "UPDATE"|translate }}');
		$('#updateProfileButton').css('opacity', '0.5');
	{% endif %}

    {% set level2Complete = (profile.level2 is defined and profile.level2 == true) %}
    {% if level2Complete  %}
		$('#updatePersonalButton').html('<i class="fa fa-refresh"></i>{{ "UPDATE"|translate }}');
		$('#updatePersonalButton').css('opacity', '0.5');
    {% endif %}

    {% set level4Complete = (profile.level4 is defined and profile.level4 == true) %}
    {% if level4Complete  %}
		$('#updateProfileSurvey').html("<i class='fa fa-refresh'></i>{{ "UPDATE_PROFILE_SURVEY"|translate }}");
    {% endif %}

    {% set level5Complete = (profile.level5 is defined and profile.level5 == true) %}
    {% if level5Complete  %}
		$('#updateActivitySurvey').html("<i class='fa fa-refresh'></i>{{ "UPDATE_ONLINE_SURVEY"|translate }}");
    {% endif %}

    {% set level6Complete = (profile.level6 is defined and profile.level6 == true) %}
    {% if level6Complete  %}
		$('#updateOnlineSurvey').html("<i class='fa fa-refresh'></i>{{ "UPDATE_ACTIVITY_SURVEY"|translate }}");
    {% endif %}


	$('.profileInput').on('input', function() {
		$('#updateProfileButton').css('opacity', '1');
	});

	$('.personalInput').on('input', function() {
		$('#updatePersonalButton').css('opacity', '1');
	});

	$('#addressFields :input,select').on('input', function() {
		$('#updatePersonalButton').css('opacity', '1');
	});

{% endblock readyStateFunction %}