@extends('process.view.view', [
	'selected' => 'memo',
	'process_id' => $info_process->process_id,
])

@include('html.header.validator')
@include('html.header.edm-ajax')
@include('html.header.input')
@include('html.header.autosize')

@push('head')
<style type="text/css">
	.section-content.memo-register{position:fixed;bottom:0;left:0;right:0;background-color:#fafafa;}
	.section-content .article-result.writable{margin-bottom:194px;}
	.text-block{position:relative;margin:0;padding-right:115px;}
	.text-block textarea{height:100px;resize:vertical;}
	.text-block button.btn-submit{position:absolute;bottom:0;right:0;width:100px;height:100px;}

	.memo+.memo{margin-top:20px;}
	.memo .textarea{transition:height .2s;}
	.memo .control-groups{margin-top:4px;}
	.memo .control-groups .control-group{text-align:right;}
	.memo .control-groups .control-group small{margin-right:10px;}
	.memo .control-groups .control-group .btn+.btn{margin-left:0;}
	.memo.edit .control-groups .control-group:not(.edit),
	.memo:not(.edit) .control-groups .control-group.edit{display:none;}
</style>
<script type="text/javascript">
	$(function () {

		$.fn.memoView = function() {

			$(this).each(function() {
				var $memo = $(this);

				$memo.find('.textarea').autosize({append:'\n'});

				// Edit button
				$memo.find('.btn-edit').click(function() {
					var $textarea = $memo.addClass('edit').find('.textarea').prop('readonly', false);
					var text = $textarea.val();
					$textarea.data('val', text).val('');
					$textarea.focus().val(text);
				});
				// Delete button
				$memo.find('.btn-delete').click(function() {
					if (!confirm('Do you want to delete it?')) {
						return;
					}

					$.edm_ajax({
						type:'DELETE',
						url:$(this).data('url'),
						data:{json:true, _token:'{{ csrf_token() }}'},
						success:function(el, data) {
							var row = $('.memo-result .memo-groups .memo-' + data['process_memo_id']);
							if (row.length > 0) row.remove();
						}
					});
				});
				// Update button
				$memo.find('.btn-update').click(function() {
					var text = $memo.find('.textarea').val();
					$.edm_ajax({
						type:'POST',
						url:$(this).data('url'),
						data:{
							json:true,
							_token:'{{ csrf_token() }}',
							content:text
						},
						success:function(el, data) {
							var $textarea = $memo.removeClass('edit').find('.textarea').prop('readonly', true);
							$textarea.data('val', $textarea.val());
						}
					});
				});
				// Cancel button
				$memo.find('.btn-cancel').click(function() {
					var $textarea = $memo.removeClass('edit').find('.textarea').prop('readonly', true);
					if ($textarea.data('val') !== undefined) {
						$textarea.val($textarea.data('val'));
						$textarea.trigger('autosize.resize');
					}
				});
			});
		};

		// Register
		$('form[name=form_regiser]').validate({
			submitHandler:function(form) {
	        	var form_data = $(form).serializeObject();
	        	form_data.json = true;
				form_data.template = 'template.process.memo.view';

	        	$.edm_ajax({
					url:$(form).attr('action'),
                    data:form_data,
					closeDelay:0,
					el_proc_msg:'Registration is in progress.',
					el_success_msg:'Registration is complete.',
					el_fail_msg:'Registration is unsuccessful..',
					success:function(el, data) {
						$(form).find('.text-block textarea').val('');
						if (data['view']) {
							var $container = $('.section-content.memo-result .article-result').html(data['view']);
							$container.find('.memo').memoView();
							$('.section-content.memo-result')[0].scrollIntoView(false);
						}
					}
				});
	        }
		});

		$('.memo-result .memo').memoView();
		
		$('form[name=form_regiser] .text-block .btn-submit').click(function() {
			$(this).closest('form').submit();
		});

		$('form[name=form_regiser] .text-block textarea').focus();

		$('.section-content.memo-result')[0].scrollIntoView(false);
	});
</script>
@endpush

@section('ui-content')
	<div class="section-content memo-result">
		<div class="article-result {{ isLogin('agent') ? 'writable' : '' }}">
			@include('template.process.memo.view', [
				'process_id' => $info_process->process_id,
				'info_memo' => $info_process->process_memo
			])
		</div>
	</div>
@if (isLogin('agent'))
	<div class="section-content memo-register">
		<div class="section-register">
			<form method="POST" name="form_regiser" action="{{ URL::route('process.memo.save', $info_process->process_id) }}">
				<input type="hidden" name="_token" value="{{ csrf_token() }}"/>
				<div>
					<p class="text-muted form-control-static" style="text-indent:-1em;padding-left:1em;color:#c9302c"><strong>* {!! nl2br(Lang::get('process.desc.memo_writable_agency')) !!}</strong></p>
				</div>
				<div class="text-block form-group">
					<textarea class="textarea form-control required" name="content" placeholder="Please enter your memo."></textarea>
					<button type="button" class="btn btn-submit btn-success">{{ Lang::get('process.word.enter') }}</button>
				</div>
			</form>
		</div>
	</div>
@endif
@endsection