{# itop-portal-base/portal/src/views/bricks/browse/layout.html.twig #}
{# Browse brick base layout #}
{% extends 'itop-portal-base/portal/src/views/bricks/layout.html.twig' %}

{% set oContactForm = forms.contact %}
{% set oPreferencesForm = forms.preferences %}
{% set oPasswordForm = forms.password %}

{% block pMainHeaderTitle %}
	{{ oBrick.GetTitle()|dict_s }}
{% endblock %}

{% block pMainContentHolder%}
	{% if bDemoMode %}
		<div class="alert alert-warning">
			<span class="fa fa-info fa-2x" style="margin-right: 10px; vertical-align: sub;"></span>
			User profile edition is not available in demo mode.
		</div>
	{% endif %}
	
	<div id="user-profile-wrapper">
		<div class="row">
			<div class="col-sm-6">
				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">{{ 'Brick:Portal:UserProfile:PersonalInformations:Title'|dict_s }}</h3>
					</div>
					<div class="panel-body">
						<form id="{{ oContactForm.id }}" class="" method="POST" action="{{ oContactForm.renderer.GetEndpoint()|raw }}">
							<input type="hidden" name="transaction_id" value="{{ oContactForm.transaction_id }}" />
							<div class="form_alerts">
								<div class="alert alert-success" role="alert" style="display: none;"></div>
								<div class="alert alert-warning" role="alert" style="display: none;"></div>
								<div class="alert alert-error alert-danger" role="alert" style="display: none;"></div>
							</div>
							<div class="form_fields">
								{{ oContactForm.renderer.GetBaseLayout()|raw }}
							</div>
						</form>
					</div>
				</div>
			</div>
			<div class="col-sm-6">
				<div class="panel panel-default user_profile_picture">
					<div class="panel-heading">
						<h3 class="panel-title">{{ 'Brick:Portal:UserProfile:Photo:Title'|dict_s }}</h3>
					</div>
					<div class="panel-body" style="position: relative;">
						<div class="form_alerts">
							<div class="alert alert-success" role="alert" style="display: none;"></div>
							<div class="alert alert-warning" role="alert" style="display: none;"></div>
							<div class="alert alert-error alert-danger" role="alert" style="display: none;"></div>
						</div>
						<form id="picture-form" method="POST" action="{{ app['url_generator'].generate('p_user_profile_brick') }}">
							<input type="hidden" name="current_values[form_type]" value="{{ constant('\\Combodo\\iTop\\Portal\\Controller\\UserProfileBrickController::ENUM_FORM_TYPE_PICTURE') }}" />
							<input type="hidden" name="operation" value="submit" />
							<div class="text-center">
								<span class="preview">
									<img src="{{ sUserPhotoUrl }}"/>
								</span>
								<span class="actions">
									<span type="button" class="btn btn-default btn_edit">
										<span class="fa fa-pencil fa-fw"></span>
										<input id="picture" type="file" name="picture" />
									</span>
									{#<button type="button" class="btn btn-default btn_undo" title="{{ 'UI:Button:ResetImage'|dict_s }}" disabled>
										<span class="fa fa-undo fa-fw"></span>
									</button>
									<button type="button" class="btn btn-default btn_reset" title="{{ 'UI:Button:RemoveImage'|dict_s }}">
										<span class="fa fa-trash-o fa-fw"></span>
									</button>#}
								</span>
							</div>
						</form>
					</div>
				</div>
				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">{{ 'Class:appUserPreferences/Attribute:preferences'|dict_s }}</h3>
					</div>
					<div class="panel-body">
						<form id="{{ oPreferencesForm.id }}" class="" method="POST" action="{{ oPreferencesForm.renderer.GetEndpoint()|raw }}">
							<div class="form_alerts">
								<div class="alert alert-success" role="alert" style="display: none;"></div>
								<div class="alert alert-warning" role="alert" style="display: none;"></div>
								<div class="alert alert-error alert-danger" role="alert" style="display: none;"></div>
							</div>
							<div class="form_fields">
								{{ oPreferencesForm.renderer.GetBaseLayout()|raw }}
							</div>
						</form>
					</div>
				</div>
				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">{{ 'Brick:Portal:UserProfile:Password:Title'|dict_s }}</h3>
					</div>
					<div class="panel-body">
						{% if oPasswordForm is not null %}
							<form id="{{ oPasswordForm.id }}" class="" method="POST" action="{{ oPasswordForm.renderer.GetEndpoint()|raw }}" autocomplete="off">
								<div class="form_alerts">
									<div class="alert alert-success" role="alert" style="display: none;"></div>
									<div class="alert alert-warning" role="alert" style="display: none;"></div>
									<div class="alert alert-error alert-danger" role="alert" style="display: none;"></div>
								</div>
								<div class="form_fields">
									{{ oPasswordForm.renderer.GetBaseLayout()|raw }}
								</div>
							</form>
						{% else %}
							{{ 'Brick:Portal:UserProfile:Password:CantChangeContactAdministrator'|dict_s }}
						{% endif %}
					</div>
				</div>
			</div>
		</div>						
		<div class="form_buttons">
			<div class="form_btn_regular">
				{% if sFormMode == constant('\\Combodo\\iTop\\Portal\\Controller\\ObjectController::ENUM_MODE_EDIT') %}
					<input class="btn btn-primary form_btn_submit" type="submit" value="{{ 'Portal:Button:Submit'|dict_s }}">
				{% endif %}
			</div>
		</div>
	</div>
{% endblock %}

{% block pPageReadyScripts %}
	{{ parent() }}
	
	// Personal informations form
	var oContactFormFieldSet = $('#{{ oContactForm.id }} > .form_fields').field_set({{ oContactForm.fieldset|json_encode()|raw }});
	$('#{{ oContactForm.id }}').portal_form_handler({
		formmanager_class: "{{ oContactForm.formmanager_class|escape('js') }}",
		formmanager_data: {{ oContactForm.formmanager_data|json_encode()|raw }},
		field_set: oContactFormFieldSet,
		endpoint: "{{ oContactForm.renderer.GetEndpoint()|raw }}"
	});
	
	// Preferences form
	var oPreferencesFormFieldSet = $('#{{ oPreferencesForm.id }} > .form_fields').field_set({{ oPreferencesForm.fieldset|json_encode()|raw }});
	$('#{{ oPreferencesForm.id }}').portal_form_handler({
		formmanager_class: "{{ oPreferencesForm.formmanager_class|escape('js') }}",
		formmanager_data: {{ oPreferencesForm.formmanager_data|json_encode()|raw }},
		field_set: oPreferencesFormFieldSet,
		endpoint: "{{ oPreferencesForm.renderer.GetEndpoint()|raw }}"
	});
	
	{% if oPasswordForm is not null %}
		// Password form
		var oPasswordFormFieldSet = $('#{{ oPasswordForm.id }} > .form_fields').field_set({{ oPasswordForm.fieldset|json_encode()|raw }});
		$('#{{ oPasswordForm.id }}').portal_form_handler({
			formmanager_class: "{{ oPasswordForm.formmanager_class|escape('js') }}",
			formmanager_data: {{ oPasswordForm.formmanager_data|json_encode()|raw }},
			field_set: oPasswordFormFieldSet,
			endpoint: "{{ oPasswordForm.renderer.GetEndpoint()|raw }}"
		});
	{% endif %}
	
	// Picture form
	// - JQuery upload widget
	$('#picture-form #picture').fileupload({
		dataType: 'json',
		acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
		disableImageResize: /Android(?!.*Chrome)|Opera/.test(window.navigator.userAgent)
	})
	.on('fileuploadsend', function(oEvent, oData){
		$('.user_profile_picture .form_alerts .alert-error').hide()
		$('#page_overlay .overlay_content .content_loader').clone().prependTo('.user_profile_picture .panel-body');
	})
	.on('fileuploadalways', function(oEvent, oData){
		$('.user_profile_picture .content_loader').remove();
	})
	.on('fileuploaddone', function(oEvent, oData){
		if( (oData._response.result.form !== undefined) && (oData._response.result.form.validation.valid === true) )
		{
			// Retrieving picture url
			var sPictureUrl = oData._response.result.form.picture_url;
			// Replacing form preview image
			$('#picture-form .preview img').attr('src', sPictureUrl);
			// Replacing menu image
			$('#topbar .user_photo, #sidebar .user_photo').css('background-image', 'url("' + sPictureUrl + '")');
		}
	})
	.on('fileuploadfail', function(oEvent, oData){
		if( (oData._response.jqXHR.responseJSON !== undefined) && (oData._response.jqXHR.responseJSON.error_message !== undefined) )
		{
			$('.user_profile_picture .form_alerts .alert-error').show().text(oData._response.jqXHR.responseJSON.error_message);
		}
	});
	// - Undo button
	/*$('#user-profile-wrapper .actions .btn_undo').on('click', function(oEvent){
		//console.log('Picture undo trigger');
	});*/
	// - Reset button
	$('#user-profile-wrapper .actions .btn_reset').on('click', function(oEvent){
		//console.log('Picture reset trigger');
	});
	
	// Submit button
	$('#user-profile-wrapper .form_buttons .form_btn_submit').off('click').on('click', function(oEvent){
		oEvent.preventDefault();
		
		// Resetting feedback
		$('#user-profile-wrapper .form_alerts .alert').hide();
		$('#user-profile-wrapper .form_alerts .alert > p').remove();
		$('#user-profile-wrapper .form_field').removeClass('has-error');
		$('#user-profile-wrapper .form_field .help-block > p').remove();
		
		// Submiting contact form through AJAX
		//if($('#{{ oContactForm.id }} .field_set').field_set('hasTouchedFields'))
		//{
			$('#{{ oContactForm.id }}').portal_form_handler('submit', oEvent);
		//}
		
		// Submiting preferences form through AJAX
		//if($('#{{ oPreferencesForm.id }} .field_set').field_set('hasTouchedFields'))
		//{
			$('#{{ oPreferencesForm.id }}').portal_form_handler('submit', oEvent);
		//}
		
		{% if oPasswordForm is not null %}
			// Submiting password form through AJAX
			// Only if fields are filled
			$('#{{ oPasswordForm.id }} :password').each(function(iIndex, oElem){
				if($(oElem).val() !== '')
				{
					$('#{{ oPasswordForm.id }}').portal_form_handler('submit', oEvent);
					return false;
				}
			});
		{% endif %}		
	});
{% endblock %}