<?php $__env->startSection('content'); ?>
	<div class="row">
    	<div class="col-lg-12">
    		<h1 class="page-header">Pages</h1>
    	</div>
    </div>
    <?php if(session('status')): ?>
		<div class="alert alert-success">
			<?php echo e(session('status')); ?>

		</div>
	<?php endif; ?>
	<?php if(count($errors) > 0): ?>
		<div class="alert alert-danger">
			<strong>Whoops!</strong> There were some problems with your input.<br><br>
			<ul>
				<?php foreach($errors->all() as $error): ?>
					<li><?php echo e($error); ?></li>
				<?php endforeach; ?>
			</ul>
		</div>
	<?php endif; ?>
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                   	Edit Sections: <a href="<?php echo e(url($page->url)); ?>" target="_blank" style="text-decoration: none; color: black;" title="View Page">
                   		<?php echo e($page->name); ?>

                   	</a>
	                <a href="<?php echo e(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">
                	<?php foreach($sections as $type => $secs): ?>
                		<?php if(count($secs)): ?>
                			<div class="row">
                				<div class="col-xs-12 typeHeader">
                					<h4><?php echo e(ucfirst($type)); ?></h4>
                				</div>
                			</div>
                			<div class="row">
                				<div class="col-xs-11 typeLine">

                		<?php endif; ?>
	                		<?php foreach($secs as $sec): ?>
		                		<?php if($section && $section->id == $sec->id): ?>
				                    <div class="row" id="editSection">
				                        <div class="col-xs-12">
				                            <form 
				                            	role="form" 
				                            	id="editForm" 
				                            	method="POST" 
				                            	action="<?php echo e(url('admin/sections/edit')); ?>"
				                            	onsubmit="document.getElementById('content').value = editor.getValue()"
				                            	style="padding: 10px 5px;"
				                            >
				                            	<input type="hidden" name="_token" value="<?php echo e(csrf_token()); ?>">
												<input type="hidden" name="id" value="<?php echo e($section->id); ?>">
												<input type="hidden" name="name" value="<?php echo e($section->name); ?>">
												<input type="hidden" name="type" value="<?php echo e($section->type); ?>">
												<input type="hidden" name="save" value="pageSectionEdit">
												<input type="hidden" name="page_id" value="<?php echo e($page->id); ?>">
												
												<?php if(old('content')): ?>
													<input type="hidden" id="content" name="content" value="<?php echo e(old('content')); ?>">
												<?php else: ?>
													<input type="hidden" id="content" name="content" value="<?php echo e(trim($section->content)); ?>">
												<?php endif; ?>
												<div style="font-weight: 600; cursor: default; padding-left: 5px; padding-right: 5px;" class="activeSectionTop">
													<?php echo e($section->name); ?>

													<span style="float: right;">
														<?php 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>
														<?php 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="<?php echo e(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>
				                <?php else: ?>
				                	<div class="row" id="view<?php echo e($sec->id); ?>">
				                        <div class="col-xs-12" style="opacity: <?php echo e($section ? 0.5 : 1); ?>;">
				                        	<div style="padding: 10px 5px;">
					                        	<div style="font-weight: 600; cursor: default; padding-left: 5px; padding-right: 5px;" class="inactiveSectionTop">
					                        		<?php echo e($sec->name); ?>

					                        		<?php if(!$section): ?>
						                        		<span style="float: right;">
															<a href="<?php echo e(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>
													<?php endif; ?>
					                        	</div>
					                        	<div 
					                        		id="viewer<?php echo e($sec->id); ?>" 
					                        		class="col-md-12 inactiveSectionBottom defaultCursor"
					                        		ondblclick="maybeEdit(<?php echo e($sec->id); ?>)" 
				                        		></div>
					                        </div>
				                        </div>
				                    </div>
				                    <input type="hidden" id="content<?php echo e($sec->id); ?>" value="<?php echo e(trim($sec->content)); ?>">
				                    <script>addCodeViewer(<?php echo e($sec->id); ?>)</script>
			                    <?php endif; ?>
		                    <?php endforeach; ?>
	                    <?php if(count($secs)): ?>           					
                				</div>
                			</div>
                			<br>
                		<?php endif; ?>
	                <?php endforeach; ?>
                </div>
            </div>
        </div>
    </div> 
    	<?php 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>
        <?php endif; ?>
        <script>
        	function maybeEdit(id) {
        		let activeEdit = <?php echo e($section ? 'true' : 'false'); ?>;
        		if(!activeEdit) {
        			window.location.href = "/uadmin/pages/<?php echo e($page->id); ?>/"+id+"#editSection";
        		} else {
        			alert('Please save or discard current editable section!');
        		}
        	}
        </script>                   
<?php $__env->stopSection(); ?>

<?php $__env->startSection('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="<?php echo e(asset('js/ace/ace.js')); ?>" type="text/javascript" charset="utf-8"></script>
    	<script src="<?php echo e(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>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('residential.templates.uadmin', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>