@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 Page: {{$page->name}}
                            <a href="{{url('uadmin/pages/'.$page->id)}}" style="float: right;" title="Edit Page Sections">
			                	<i class="fa fa-puzzle-piece fa-fw"></i>
			                </a>
                        </div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-lg-12">
			                        <form id="theForm" class="form-horizontal" role="form" method="POST" action="{{ url('admin/pages/edit') }}">
										<input type="hidden" name="_token" value="{{ csrf_token() }}">
										<input type="hidden" name="pageID" value="{{ $page->id }}">
																				@foreach ($page_sections as $page_section)
										<input type="hidden" name="page_section{{ $cnt }}" value="{{ $page_section->id }}">
																				@endforeach
										<div class="form-group">
											<label class="col-md-3 control-label">Page Name</label>
											<div class="col-md-7">
												@if(old('name'))
												<input type="text" class="form-control" name="name" value="{{ old('name') }}">
												@else
												<input type="text" class="form-control" name="name" value="{{ $page->name }}">	
												@endif
											</div>
										</div>
										<div class="form-group">
											<label class="col-md-3 control-label">Page Title</label>
											<div class="col-md-7">
												@if(old('title'))
												<input type="text" class="form-control" name="title" value="{{ old('title') }}">
												@else
												<input type="text" class="form-control" name="title" value="{{ $page->title }}">
												@endif
											</div>
										</div>
										<div class="form-group">
											<label class="col-md-3 control-label">Page URL</label>
											<div class="col-md-7">
												@if(old('url'))
												<input type="text" class="form-control" name="url" value="{{ old('url') }}">
												@else
												<input type="text" class="form-control" name="url" value="{{ $page->url }}">
												@endif	
											</div>
										</div>
																				@foreach ($page_sections as $page_section)
										<div class="form-group">
											
											<label class="col-md-3 control-label"><a href="{{ url('uadmin/sections/edit/'.$page_section->section) }}" target="_blank">Section {{ $count }}</a></label>
											<div class="col-md-7">
												<select id="section{{ $count }}" class="form-control" name="section{{ $count }}">
													<option value="0">Select One</option>
													@foreach($sections as $section)
													<option 
														@if($page_section->section == $section->id)
														selected 
														@endif
														value="{{ $section->id }}">
														{{ $section->name }}
													</option>
													@endforeach
												</select>
											</div>
											<div class="col-md-2" style="visibility: hidden;">
												<input type="number" min="0" max="12" class="form-control" name="width{{ $count }}" value="{{ $page_section->width }}">	
											</div>
										</div>
																				@endforeach
										<div id="here"></div>
										<div class="form-group">
											<div class="col-md-8 col-md-offset-3">
												
												<button type="button" id="plus" class="btn btn-primary" onclick="addSection()" 
													@if(count($page_sections) >= 12)
													disabled 
													@endif
													>
													<i class="fa fa-plus"></i>
												</button>
												<button type="button" id='minus' class="btn btn-primary" onclick="removeSection()" 
													@if(count($page_sections) <= 1)
													disabled 
													@endif
													>
													<i class="fa fa-minus"></i>
												</button>
												<button type="submit" class="btn btn-primary">
													Save
												</button>
											</div>
										</div>
									</form>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

@endsection

@section('extras')
	<script>
		function addSection()
		{

			var allSections = document.getElementById('section1');
			var theForm = document.getElementById('theForm');
			
			var newFormGroup = document.createElement("div");
			newFormGroup.className = "form-group";
			var newLabel = document.createElement("label");
			newLabel.className = "col-md-3 control-label";
			var newColumn = document.createElement("div");
			newColumn.className = "col-md-7";
			var newSelect = document.createElement("select");
			newSelect.className = "form-control";
			var newWidth = document.createElement("div");
			newWidth.className = "col-md-2";
			var newNumber = document.createElement("input");
			newNumber.className = "form-control";
			
			var count = 1;
			while(document.getElementById('section' + count) != null)
			{
				count++;
			}

			newSelect.setAttribute("id", 'section' + count);
			newSelect.setAttribute("name", 'section' + count);
			newSelect.innerHTML = allSections.innerHTML;

			newLabel.innerHTML = 'Section ' + count;

			newNumber.setAttribute('type', 'number');
			newNumber.setAttribute('name', 'width' + count);
			newNumber.setAttribute('min', '0');
			newNumber.setAttribute('max', '12');
			newNumber.setAttribute('value', '0');

			newWidth.appendChild(newNumber);
			newWidth.style.visibility = "hidden";
			
			newFormGroup.appendChild(newLabel);
			newColumn.appendChild(newSelect);
			newFormGroup.appendChild(newColumn);
			newFormGroup.appendChild(newWidth);

			var here = document.getElementById('here');
			theForm.insertBefore(newFormGroup, here);

			if(count >= 12) document.getElementById('plus').disabled = true;
			if(count > 1) document.getElementById('minus').disabled = false;
			
		}
		function removeSection()
		{
			var theForm = document.getElementById('theForm');
			
			var count = 1;
			while(document.getElementById('section' + count) != null)
			{
				count++;
			}
			count--;
			var section = document.getElementById('section' + count).parentNode.parentNode;
			theForm.removeChild(section);
			if(count == 2) document.getElementById('minus').disabled = true;
			if(count <= 12) document.getElementById('plus').disabled = false;
			
		}
		
	</script>
@endsection