@extends('residential.templates.uadmin')

@section('content')
	<div class="row">
    	<div class="col-lg-12">
    		<h1 class="page-header">Pages</h1>
    	</div>
    </div>
    @if (session('status'))
		<div class="alert alert-success">
			{{ session('status') }}
		</div>
	@endif
	@if (count($errors) > 0)
		<div class="alert alert-danger">
			<strong>Whoops!</strong> There were some problems with your input.<br><br>
			<ul>
				@foreach ($errors->all() as $error)
					<li>{{ $error }}</li>
				@endforeach
			</ul>
		</div>
	@endif
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                   	Edit Sections: <a href="{{url($page->url)}}" target="_blank" style="text-decoration: none; color: black;" title="View Page">
                   		{{ $page->name }}
                   	</a>
	                <a href="{{url('uadmin/pages/edit/'.$page->id)}}" style="float: right;" title="Edit Page">
	                	<i class="fa fa-edit fa-fw"></i>
	                </a>
                </div>
                <div class="panel-body">
                	@foreach($sections as $type => $secs)
                		@if(count($secs))
                			<div class="row">
                				<div class="col-xs-12 typeHeader">
                					<h4>{{ucfirst($type)}}</h4>
                				</div>
                			</div>
                			<div class="row">
                				<div class="col-xs-11 typeLine">

                		@endif
	                		@foreach($secs as $sec)
		                		@if($section && $section->id == $sec->id)
				                    <div class="row" id="editSection">
				                        <div class="col-xs-12">
				                            <form 
				                            	role="form" 
				                            	id="editForm" 
				                            	method="POST" 
				                            	action="{{ url('admin/sections/edit') }}"
				                            	onsubmit="document.getElementById('content').value = editor.getValue()"
				                            	style="padding: 10px 5px;"
				                            >
				                            	<input type="hidden" name="_token" value="{{ csrf_token() }}">
												<input type="hidden" name="id" value="{{ $section->id }}">
												<input type="hidden" name="name" value="{{ $section->name }}">
												<input type="hidden" name="type" value="{{ $section->type }}">
												<input type="hidden" name="save" value="pageSectionEdit">
												<input type="hidden" name="page_id" value="{{ $page->id }}">
												
												@if(old('content'))
													<input type="hidden" id="content" name="content" value="{{ old('content') }}">
												@else
													<input type="hidden" id="content" name="content" value="{{ trim($section->content) }}">
												@endif
												<div style="font-weight: 600; cursor: default; padding-left: 5px; padding-right: 5px;" class="activeSectionTop">
													{{$section->name}}
													<span style="float: right;">
														@if($warn)
															<i 
																class="fa fa-warning fa-fw" 
																style="color: orange; cursor: pointer;" 
																title="Warning: section utilized on multiple pages"
																onclick="alert('Warning: section utilized on multiple pages')"
															></i>
														@endif
														<button type="submit" name="save" value="pageSectionEdit" style="border: none; background-color: transparent;">
															<i class="fa fa-check-circle" style="color: green;" title="Save Changes"></i>
														</button>
														<a href="{{url('uadmin/pages/'.$page->id.'#view'.$section->id)}}" style="text-decoration: none;">
															<i class="fa fa-times-circle fa-fw" style="color: red;" title="Discard Changes"></i>
														</a>
													</span>
												</div>
												<div id="editor" class="col-md-12 activeSectionBottom"></div>
				                            </form>
				                        </div>
				                    </div>
				                @else
				                	<div class="row" id="view{{$sec->id}}">
				                        <div class="col-xs-12" style="opacity: {{ $section ? 0.5 : 1 }};">
				                        	<div style="padding: 10px 5px;">
					                        	<div style="font-weight: 600; cursor: default; padding-left: 5px; padding-right: 5px;" class="inactiveSectionTop">
					                        		{{$sec->name}}
					                        		@if(!$section)
						                        		<span style="float: right;">
															<a href="{{url('uadmin/pages/'.$page->id.'/'.$sec->id.'#editSection')}}" style="text-decoration: none;">
																<i class="fa fa-pencil-square fa-fw" title="Edit Section"></i>
															</a>
														</span>
													@endif
					                        	</div>
					                        	<div 
					                        		id="viewer{{$sec->id}}" 
					                        		class="col-md-12 inactiveSectionBottom defaultCursor"
					                        		ondblclick="maybeEdit({{$sec->id}})" 
				                        		></div>
					                        </div>
				                        </div>
				                    </div>
				                    <input type="hidden" id="content{{$sec->id}}" value="{{ trim($sec->content) }}">
				                    <script>addCodeViewer({{$sec->id}})</script>
			                    @endif
		                    @endforeach
	                    @if(count($secs))           					
                				</div>
                			</div>
                			<br>
                		@endif
	                @endforeach
                </div>
            </div>
        </div>
    </div> 
    	@if($section)
	        <script>
	        	var editor = ace.edit("editor");
	        	editor.$blockScrolling = Infinity;
	        	editor.setTheme("ace/theme/eclipse");
	        	editor.setShowPrintMargin(false);
	        	editor.setOption('wrap', true);
	        	var phpMode = ace.require("ace/mode/php").Mode;
	        	editor.getSession().setMode(new phpMode());
	        	editor.setValue(document.getElementById('content').value, -1);

	        	

	        	var heightUpdateFunction = function() {
	        		var newHeight =
	                	editor.getSession().getScreenLength()
	                	* editor.renderer.lineHeight
	                	+ editor.renderer.scrollBar.getWidth()
	               		+ 1;
	        		document.getElementById('editor').setAttribute("style", "height:"+ newHeight +"px");
	      			editor.resize();
	        	};

	        	heightUpdateFunction();
	        	editor.getSession().on('change', heightUpdateFunction);

	        	editor.commands.addCommand({
	        	    name: 'saveCommand',
	        	    bindKey: {win: 'Ctrl-S',  mac: 'Command-S'},
	        	    exec: function(editor) {
	        	    	document.getElementById('content').value = editor.getValue()
	        	        document.getElementById('editForm').submit();
	        	    }
	        	});
	        	editor.$blockScrolling = Infinity;
        	</script>
        @endif
        <script>
        	function maybeEdit(id) {
        		let activeEdit = {{$section ? 'true' : 'false' }};
        		if(!activeEdit) {
        			window.location.href = "/uadmin/pages/{{$page->id}}/"+id+"#editSection";
        		} else {
        			alert('Please save or discard current editable section!');
        		}
        	}
        </script>                   
@endsection

@section('extras')
	    <style>
    		.activeSectionTop {
    			box-shadow: 0 0 5px 5px #efefef;
    			display: inline-block;
    			width: 100%;
    			z-index: 101;
    			border: 1px solid #dadada;
    		}
    		.activeSectionBottom {
    			box-shadow: 0 5px 5px 5px #efefef;
    			z-index: 100;
    			border-right: 1px solid #dadada;
    			border-left: 1px solid #dadada;
    			border-bottom: 1px solid #dadada;
    		}
    		.inactiveSectionTop {
    			display: inline-block;
    			border: 1px solid #efefef;
    			border-bottom: 1px solid #dadada;
    			width: 100%;
    		}
    		.inactiveSectionBottom {
    			border-right: 1px solid #dadada;
    			border-left: 1px solid #dadada;
    			border-bottom: 1px solid #dadada;
    		}
    		.typeHeader {
    			border-bottom: 2px solid #337ab7;
    		}
    		.typeLine {
    			border-left: 2px solid #337ab7;
    			margin-left: calc(100% / 12);
    		}
    		.defaultCursor .ace_scroller, .defaultCursor .ace_content {
    			cursor: default !important;
    		}
    	</style>
    	<script src="{{ asset('js/ace/ace.js') }}" type="text/javascript" charset="utf-8"></script>
    	<script src="{{ asset('js/ace/mode-php.js') }}" type="text/javascript" charset="utf-8"></script>
    	<script>
			function addCodeViewer(id) {
        		let viewerID = 'viewer'+id;
        		let viewer = ace.edit(viewerID);
        		viewer.$blockScrolling = Infinity;
	        	viewer.setTheme("ace/theme/eclipse");
	        	viewer.setShowPrintMargin(false);
	        	viewer.setOption('wrap', true);
	        	viewer.setOptions({
	        		wrap: true,
	        		readOnly: true,
	        		highlightActiveLine: false,
    				highlightGutterLine: false
	        	});
	        	viewer.textInput.getElement().disabled=true;
	        	viewer.renderer.$cursorLayer.element.style.opacity=0;
	        	let phpMode = ace.require("ace/mode/php").Mode;
	        	viewer.getSession().setMode(new phpMode());
	        	viewer.setValue(document.getElementById('content'+id).value, -1);

	        	let newHeight = viewer.getSession().getScreenLength() * viewer.renderer.lineHeight + viewer.renderer.scrollBar.getWidth() + 1;
	        	document.getElementById(viewerID).setAttribute("style", "height:"+ newHeight +"px");
	      		viewer.resize();
	      		
        	}
    	</script>
@endsection