@extends('frame')

@section('title')
blikk :: {{ trans('auth.profile') }}
@stop

@section('css')

	<link href="{{ url('css/login.css') }}" rel="stylesheet" type="text/css" />
	<link href="{{ url('css/reset.css') }}" rel="stylesheet" type="text/css" />
	<link href="{{ url('css/register.css') }}" rel="stylesheet" type="text/css" />

@stop

@section('js')

	<script src="/scripts/zxcvbn-async.js"></script>
	<script src="/scripts/jquery.pwstrength.bootstrap-1.2.5/pwstrength-bootstrap-1.2.5.min.js"></script>

	@include('regprofscript')

	<script>

		$(function() {

			// check for errors in Password-Change-Fields and open if any
			$('#mb_changepassword .error').each(function(){
				if ($(this).text()) {
					$('#mb_changepassword').slideDown();
				}
			});

			// change password in profile-view
			$('#mb_dochangepassword').on('click',function() {
				$('#mb_changepassword').slideToggle();
				return false;
			});

			// fileupload
			var original = $('#usericon').val();

			// show delete-button für bestehenden Avatar
			if (original) {
				$('#fileinput-image').css('background-image','url(' + original + ')');
				$('#filedelete1').show();
			}
			// add delete-funktion
			$('#filedelete1').on('click',function(){
       			$('#usericon').val('');
    			$('#fileinput-image').css('background-image','');
    			$('#filedelete1').hide();
    			return false;
			});
			// fileupload-mechanik
		    $('#fileupload').fileupload({
		        url: $('#mb_uploadform').attr('action'),
		        dataType: 'json',
		        dropZone: $('#mb_fileup'),
		        add: function (e, data) {
			        // reset progress-bar
			        $('#progress .progress-bar').css('width','0%')
			        	.removeClass('progress-bar-danger')
			        	.addClass('progress-bar-success');
		            $.each(data.files, function (index, file) {
		                $('#filename').text(file.name);
		            });
		            // Automatically upload the file once it is added to the queue
		            var jqXHR = data.submit();
				},
		        done: function (e, data) {
		            $.each(data.result.files, function (index, file) {
			            if (!file.error) {
		                	$('#fileinput-image').css('background-image','url('+file.previewurl+')');
		                	$('#usericon').val(file.usericon);
		                	// deletes aktivieren
		                	$('#filedelete1').hide();
		                	$('#filedelete').show();
		                	// add click handler (once!)
		                	$('#filedelete').one('click',function(){
		                		$.ajax({
		                			url : $('#mb_uploadform').attr('action') + '?ID=' + $('[name=ID]').val(),
		                			type: 'DELETE',
		                			success : function(data) {
			                			if (data.files.error) {
			                				alert(data.files.error[0]);
			                				return;
			                			}
			                			// successfull deleted: restore original setting
			                			if (original != '') {
				                			$('#fileinput-image').css('background-image','url(' + original + ')');
				                			$('#usericon').val(original);
				                			$('#filedelete1').show();
				                		} else {
				                			$('#fileinput-image').css('background-image','none');
				                			$('#usericon').val('');
				                			$('#filedelete1').hide();
				                		}
			                			$('#progress .progress-bar').css('width','0');
			                			$('#filedelete').hide();
			                			$('#filename').text('')
			                		}
		                		});
		                		return false;
		                	});
			            } else {
							// error-handling
					        $('#progress .progress-bar').css('width','100%')
					        	.removeClass('progress-bar-success')
					        	.addClass('progress-bar-danger');
			            	$('#filename').text(file.error);
				        }
		            });
		        },
		        progressall: function (e, data) {
		            var progress = parseInt(data.loaded / data.total * 100, 10);
		            $('#progress .progress-bar').css(
		                'width',
		                progress + '%'
		            );
		        }
		    });

			// Input-Button-Klick simulieren
			$('.fileinput-button').click(function(){
		        $('#fileupload').click();
			});


		});

	</script>

@stop

@section('content')

	<div id="mb_login">


		<div class="mb_register" id="mb_loginform">

				<h2>{{ trans('auth.profile') }}</h2>

				{!! Form::model($user,['id'=>'mb_uploadform','url'=>LaravelLocalization::getLocalizedURL(null,'profile/upload'),'method'=>'POST','enctype'=>'multipart/formdata']) !!}

					{!! Form::hidden('ID') !!}

					<div id="mb_fileup">

						<div id="fileinput-image">
							@if ( ! $user->Provider || $user->Provider === 'blikk') 
								<a href="" id="filedelete1"></a>
								<a href="" id="filedelete"></a>
							@endif
						</div>


						@if ( ! $usericon_update ) 

							<div id="mb_fileupbtn">
							    <span class="authbtn fileinput-button">
							        <span>{{ trans('auth.profile_choose') }}</span>
							    </span>
						    	<p>{{ trans('auth.profile_drag') }}</p>
						    </div>

						   	<!-- Hidden fileinput-field -->
					        <input id="fileupload" type="file" name="files[]" multiple>

						    <!-- The progress bar -->
						    <div id="progress" class="progress">
						        <div class="progress-bar progress-bar-success">
								   	<div id="filename"></div>
						        </div>
						    </div>

						@endif

					</div>

				{!! Form::close() !!}

				{!! Form::model($user,['id'=>'mb_register_form','name'=>'profile','url'=>LaravelLocalization::getLocalizedURL(null,'profile'),'method'=>'PUT']) !!}

					{!! Form::hidden('ID') !!}
					{!! Form::hidden('hasicon',!empty($user->UserIcon) ? $user->UserIcon.'?'.uniqid() : '',['id' => 'usericon']) !!}


					@if ($errors->any())
						<div class="fade alert alert-danger">{{ trans('auth.register_error') }}</div>
					@endif

					@if ( $manually_update )
					    <a href="{{ route('profile-update',['id' => $user->getKey(), 'tenant' => $user->Provider]) }}" class="mb_update">{{ trans('auth.profile_manually_update') }}</a>
					@endif

					<div class="error">{{ $errors->first('UserName') }}</div>
					{!! Form::label('mb_loginusername',trans('auth.login_username')) !!}
					{!! Form::text('UserName',null,['id'=>'mb_loginusername','disabled'=>'disabled']) !!}

					@if (empty($user->Provider) || $user->Provider === 'blikk')
						<a id="mb_dochangepassword" class="mb_update" href="">{{ trans('auth.profile_changepw') }}</a>
					@endif

					<div id="mb_changepassword">

						<div class="error">{{ $errors->first('oldpass') }}</div>
						{!! Form::label('mb_oldloginpass',trans('auth.profile_oldpw')) !!}
						{!! Form::password('oldpassword',['id'=>'mb_oldloginpass']) !!}

						<div class="error">{{ $errors->first('password') }}</div>
						{!! Form::label('mb_loginpass1',trans('auth.profile_newpw')) !!}
						{!! Form::password('password',['id'=>'mb_loginpass1']) !!}

						@include('regprof')

					@if (config('auth.privdomainmanagement') && $user->mayPrivdomain())
						<div class="mb_privdomainmanagement">
							{!! Form::checkbox('Privdomain','1',$user->Privdomain,['id'=>'mb_privdomainmanagement']) !!}
							<label for="mb_privdomainmanagement">
								@if ($user->Privdomain)
									{!! trans('auth.register_privdomdone') !!}
								@else
									{!! trans('auth.register_privdomain') !!}
								@endif
							</label>
						</div>
					@endif

					<div class="divider">
						<!-- <a href="{{ url('delete/'.$user->ID) }}" class="authbtn btn_delete">{{ trans('auth.profile_del') }}</a> -->
						<a href="{{ url('welcome') }}" class="authbtn btn_cancel">{{ trans('auth.cancel') }}</a>
						{!! Form::submit(trans('auth.profile_submit'),['class'=>'authbtn btn_submit']) !!}
					</div>

					<div class="divider"></div>

				{!! Form::close() !!}

		</div>
	</div>

@stop