{{ HTML::script('js/tree/nestedSortable.js') }}
<script>
	var locale = '{{App::getLocale()}}';
	var token = '{{ csrf_token() }}';
	var cityID = '{{ $city_id }}';
	var postURL = "{{ URL::route('saveCategoryTree') }}";
	var imageURL = "{{ url('/uploads/core/trees/') }}";
	var treeJSON = '{{ $tree }}';

	try {
		var treeData = JSON.parse(treeJSON);
	} catch (exp) {
		var treeData = [];
		console.log(['Error parsing tree data. ', exp.message]);
	}

	var saveSuccessText = '{{ Lang::get('tree.msg.success.save_tree') }}';
	var saveErrorText = '{{ Lang::get('tree.msg.error.save_tree') }}';

	var warningCreate = '{{ Lang::get('tree.msg.warning.tree_create') }}';
	var warningMove = '{{ Lang::get('tree.button.add_new_category') }}';
	var warningNoName = '{{ Lang::get('tree.msg.warning.no_category_name') }}';
	var warningNothingSelected = '{{ Lang::get('tree.msg.warning.nothing_selected') }}';
	var warningLeaving = '{{ Lang::get('tree.msg.warning.leaving') }}';

	var addNewCategory = '{{ Lang::get('tree.button.add_new_category') }}';
	var addNewSubcategory = '{{ Lang::get('tree.button.add_new_subcategory') }}';
</script>

<div class="container-fluid">

	<div class="row">
		<div class="col-xs-12">
			<h1>{{ Lang::get('tree.builder.title') }}</h1>
			<p>{{ Lang::get('tree.builder.description') }}</p>
		</div>
	</div>
	<div class="row mt50">
		<div class="col-xs-12 col-sm-5" id="newTree">
			<h3>{{ Lang::get('tree.builder.tree_display_title') }}</h3>
			<hr>
			<!--<div id="tree"></div> -->
			{{$newTree}}
		</div>
		<div class="col-xs-12 col-sm-7" id="editCategory" hidden >
			<h3>{{ Lang::get('tree.builder.edit_category_title') }}</h3>
			<hr>
			<form id="editCat" method="POST" action="/info/categories/saveCategory" enctype="multipart/form-data" >
				<input type="hidden" name="_token" value="{{ csrf_token() }}">
				<input type="hidden" name="city" value="{{ $city_id }}">
				<input name="id" type="hidden" id="catID" value="">
				<input name="parent" type="hidden" id="parent" value="0">
				<input type="hidden" id="catImage" name="catImage" value="">
				<input type="hidden" id="special_type_id" name="special_type_id">
				<input type="hidden" id="catImageType" name="catImageType" value="">
				<input type="hidden" id="catImageLink" value="">
				<input type="hidden" id="catImageRemove" value="false">
				<div class="form-group">
					<label for="catTitle">{{ Lang::get('tree.labels.builder.title') }}</label>
					<input name="title" type="text" class="form-control" id="catTitle"
						   placeholder="{{ Lang::get('tree.labels.builder.title') }}">
				</div>
				<div class="form-group">
					<label for="catDescription">{{ Lang::get('tree.labels.builder.description') }}</label>
					<textarea name="description" class="form-control" id="catDescription"
							  placeholder="{{ Lang::get('tree.labels.builder.description') }}"></textarea>
				</div>
				<div class="row">
					<div class="col-xs-6">
						<div class="form-group">
							<label for="catColor">{{ Lang::get('tree.labels.builder.background_color') }}</label>
							<input name="backgroundColor" type="text" class="form-control" id="catColor">
						</div>
						<div class="form-group">
							<label for="catTextColor">{{ Lang::get('tree.labels.builder.text_color') }}</label>
							<input name="textColor" type="text" class="form-control" id="catTextColor">
						</div>
					</div>
					<div class="col-xs-6">
						<div class="form-group">
							<label>{{ Lang::get('tree.labels.builder.has_posts.label') }}</label>
							<br>
							<div class="radio-inline">
								<label>
									<input type="radio" name="hasPosts" id="hasPostsTrue" value="true">
									{{ Lang::get('tree.labels.builder.has_posts.yes') }}
								</label>
							</div>
							<div class="radio-inline">
								<label>
									<input type="radio" name="hasPosts" id="hasPostsFalse" value="false">
									{{ Lang::get('tree.labels.builder.has_posts.no') }}
								</label>
							</div>
						</div>

						<div style="display:none" id="relationshipSharing" class="form-group">
							<label>{{ Lang::get('tree.labels.builder.has_relationship') }}</label>
							<br>
							<div class="radio-inline">
								<label>
									<input type="radio" name="hasRelationship" id="relationshipSharingTrue" value="true">
									{{ Lang::get('tree.labels.builder.has_posts.yes') }}
								</label>
							</div>
							<div class="radio-inline">
								<label>
									<input type="radio" name="hasRelationship" id="relationshipSharingFalse" value="false">
									{{ Lang::get('tree.labels.builder.has_posts.no') }}
								</label>
							</div>
						</div>
					</div>
                </div>
				<div id="templatesContainer">
					<div class="form-group">
						<label for="catTemplate">{{ Lang::get('tree.labels.builder.template') }}</label>
						<select name="catTemplate" id="catTemplate" class="form-control">
							@foreach ($templates as $template)
								<option value="{{ $template->id }}">{{ $template->name }}</option>
							@endforeach
						</select>
					</div>
					<div class="form-group">
						<button type="button" class="btn btn-primary" data-toggle="modal"
								data-target="#template-modal">{{ Lang::get('template.builder.create_template') }}</button>

						<button type="button" class="btn btn-warning" id="edit-template" data-toggle="modal"
								data-target="#template-modal">{{ Lang::get('template.builder.edit_template') }}</button>
					</div>
					<div class="form-group">
						<label for="catCompanies">{{ Lang::get('tree.labels.builder.companies') }}</label>
						<div>
							<select name="catCompanies[]" id="catCompanies" class="form-control" multiple="multiple">
								@foreach($companies as $key => $company)
									<option value="{{ $company->id }}">{{ $company->name }}</option>
								@endforeach
							</select>
						</div>
					</div>
					<div class="form-group">
						<label for="catMessage">{{ Lang::get('tree.labels.builder.message') }}</label>
						<textarea name="catMessage" class="form-control" id="catMessage"
								  placeholder="{{ Lang::get('tree.labels.builder.message_placeholder') }}"></textarea>
					</div>
				</div>


				<div class="form-group">
					<div class="row">

						<div class="col-xs-12 col-sm-4">
							<label for="catImageLoader">{{ Lang::get('homescreen.buttons.clearNewBack') }}</label>
							<button type="button" class="btn btn-cityhub" id="removeNewImage" disabled="disabled">{{ Lang::get('homescreen.buttons.clearNewBack') }}</button>
						</div>
						<div class="col-xs-12 col-sm-4">
							<label for="catImageLoader">{{ Lang::get('homescreen.buttons.clearBack') }}</label>
							<button type="button" class="btn btn-cityhub" id="removeAllImages" disabled="disabled">{{ Lang::get('homescreen.buttons.clearBack') }}</button>
						</div>
					</div>
				</div>




				<div class="form-group">
					<div id="cropit-container">


							<label>{{ Lang::get('template.labels.image') }}:</label>
							<div id="old"></div>

							<div id="thumb-cropper" style="margin-left:0">
								<div class="cropit-preview mt20 text-center" style="margin-bottom:55px; ">
									<p id="imageText"></p>
								</div>
								<input type="range" class="cropit-image-zoom-input" />
								<input type="file" name="thumb" id="thumb" class="btn btn-info cropit-image-input" />
							</div>
						</div>
					</div>
					<div id="preview">

						<!-- colors -->
						<div class="form-group" id="sugested-colors">
							<label for="colorSegmentsContainer" class="col-xs-12 col-sm-4 col-md-3">{{ Lang::get('tree.labels.builder.suggested_colors') }}</label>
							<div class="cf" id="colorSegmentsContainer"></div>
						</div>
					</div>
				<div class="form-group text-center">

				<button type="submit" class="btn btn-success" id="saveCategory"
							disabled="disabled">{{ Lang::get('tree.button.save_changes') }}</button>
				<!--	<button type="button" class="btn btn-danger" id="deleteCategory"
							disabled="disabled">{{ Lang::get('tree.button.delete_category') }}</button> -->
				</div>
			<!--	<div class="form-group text-center">
					<button type="button" class="btn btn-info"
							id="addCategory">{{ Lang::get('tree.button.add_new_category') }}</button>
				</div> -->
			</form>
		</div>
	</div>
<!--
	<div class="row mt50">
		<div class="col-xs-12">
			<hr>
			<h2 class="text-center"><strong>JSON output from / to database</strong></h2>
			<pre id="jsonContainer"></pre>
		</div>
	</div>
-->
</div>

<div class="modal" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
							aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="modalLabel">{{ Lang::get('tree.builder.crop.title') }}</h4>
			</div>
			<div class="modal-body">
				<div id="upload-demo"></div>
				<p id="imgMeasure">{{ Lang::get('tree.builder.crop.description') }}</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-success"
						id="cropAndClose">{{ Lang::get('tree.button.accept_crop_modal') }}</button>
				<button type="button" class="btn btn-danger"
						id="closeModal">{{ Lang::get('tree.button.cancel_crop_modal') }}</button>
			</div>
		</div>
	</div>
</div>

<!-- Create template modal -->
{{ $createTemplate }}
<!-- <div id="saveLoader"></div> -->
<script type="text/javascript">
	$(document).ready(function(){


	    if($('#special_type_id').val()>0){
            $('#catTitle').prop('readonly', 'readonly');
		}

		$('.sortable').nestedSortable({
			handle: 'div',
			items: 'li',
			maxLevels:0,
			toleranceElement: '> div',
            update: function(event,ui)
            {
                treeChange(ui.item.attr("id"),$("#"+ui.item.attr("id")).parent().parent().attr("id"));
            }
		});
		$('.delCat').click(function(event)
		{
			var confirmDelete = confirm('{{ Lang::get('tree.button.delete_category') }} ?');
			if(confirmDelete == true)
			{
				var categoryId = $(this).attr("value");
				event.stopPropagation();
				//ajax get category details for edit..
				$.ajax({
					type: 'POST',
					url: '/info/categories/deleteCategory',
					data: {
						'categoryId': categoryId
					},
					beforeSend:function(){
						$('#saveLoader').show();
					},
					success:function(data) {
						if(data.status == 1)
						{
							location.reload();
							//$("#"+categoryId).remove();
							//$(this).remove();
							//$('#saveLoader').hide();

						}
					},
					error:function() {
						alert('Greška');
					}
				});
			}
		});

		$('.addCat').click(function(event)
		{
			clearValues();
			$('#catColor').spectrum({
				color: 'rgba(216,31,0,1)',
				preferredFormat: 'rgb',
				allowEmpty: false,
				allowAlpha: false,
				showInput: true,
				change: function (color) {
					var semitrans = color.toRgbString().replace('rgb', 'rgba').replace(')', ', 0.9)');
					$('#imageText').css('background-color', semitrans);
					$('#imageCont').css('border-bottom', '3px solid ' + color.toRgbString());
				}
			});

			$('#catTextColor').spectrum({
				color: 'rgba(216,31,0,1)',
				preferredFormat: 'rgb',
				allowEmpty: false,
				allowAlpha: false,
				showInput: true,
				change: function (color) {
					$('#imageText').css('color', color.toRgbString());
				}
			});

			$("#saveCategory").prop('disabled', false);
			$("#editCategory").show();
			$("#catID").val('new');
			event.stopPropagation();


		});

		$('.addSub').click(function(event)
		{
			clearValues();

			//get index
			var ol = $("#"+$(this).attr("value")+" ol")
			console.log($("#"+$(this).attr("value")+" ol"));
			var i = 0;
			/*$(ol).each(function( index ) {
				console.log("broj",i);
				i++;
				console.log("broj",i);
				//console.log( index + ": " + $( this ).text() );
			});*/

			//$("#position").val(i+1);
			$("#parent").val($(this).attr("value"));
			event.stopPropagation();
			$('#catColor').spectrum({
				color: 'rgba(216,31,0,1)',
				preferredFormat: 'rgb',
				allowEmpty: false,
				allowAlpha: false,
				showInput: true,
				change: function (color) {
					var semitrans = color.toRgbString().replace('rgb', 'rgba').replace(')', ', 0.9)');
					$('#imageText').css('background-color', semitrans);
					$('#imageCont').css('border-bottom', '3px solid ' + color.toRgbString());
				}
			});

			$('#catTextColor').spectrum({
				color: 'rgba(216,31,0,1)',
				preferredFormat: 'rgb',
				allowEmpty: false,
				allowAlpha: false,
				showInput: true,
				change: function (color) {
					$('#imageText').css('color', color.toRgbString());
				}
			});
			$("#saveCategory").prop('disabled', false);

			$("#editCategory").show();
			$("#catID").val('new');

		});

		$('.editCat').click(function(event)
		{
			clearValues();

			var categoryId = $(this).attr("value");
			//$("#editCategory").show();
			event.stopPropagation();
			//ajax get category details for edit..
			$.ajax({
				type: 'POST',
				url: '/info/categories/getCategory',
				data: {
					'categoryId':categoryId
				},
				beforeSend:function(){
					$('#saveLoader').show();
				},
				success:function(data) {
					if(data.status == 1)
					{
					    console.log('DATA', data);
						$("#editCategory").show();
						$("#catID").val(data.data[0].id);
						$("#catTitle").val(data.data[0].title);
						$("#catDescription").val(data.data[0].description);
						$("#special_type_id").val(data.data[0].special_type_id);

						$('#catColor').spectrum({
							color: data.data[0].background_color,
							preferredFormat: 'rgb',
							allowEmpty: false,
							allowAlpha: false,
							showInput: true,
							change: function (color) {
								var semitrans = color.toRgbString().replace('rgb', 'rgba').replace(')', ', 0.9)');
								$('#imageText').css('background-color', semitrans);
								$('#imageCont').css('border-bottom', '3px solid ' + color.toRgbString());
							}
						}).val(data.data[0].background_color);

						$('#catTextColor').spectrum({
							color: data.data[0].text_color,
							preferredFormat: 'rgb',
							allowEmpty: false,
							allowAlpha: false,
							showInput: true,
							change: function (color) {
								$('#imageText').css('color', color.toRgbString());
							}
						}).val(data.data[0].text_color);

						if(data.data[0].posts == 1)
						{
							$("#hasPostsTrue").click();
							$('#catTemplate option[value="'+data.data[0].template+'"]').attr("selected", "selected");
							if(data.data[0].companies != 0)
							{
                                var companiesRaw = data.data[0].companies.split(",");
                                var companies = [];
                                for(var i = 0 ; i < companiesRaw.length; i++)
                                {
                                    if(companiesRaw[i] != "" && companiesRaw[i] != null)
                                        companies.push(companiesRaw[i]);
                                }
                                companiesSelect.val(companies).trigger('change');
                                companiesSelect = $('#catCompanies').select2();
                                $("#catMessage").val(data.data[0].message);
							}
						}
						else
							$("#hasPostsFalse").click();
                        if(data.data[0].relationship == 1)
                        {
                            $("#relationshipSharingTrue").click();
                        }
                        else
                            $("#relationshipSharingFalse").click();
						if(data.data[0].image != '')
							var img='<img id="old-thumb" class="old-image" width="480" src="/uploads/core/trees/'+data.data[0].image+'">';
						$('#old').append(img);
						//$("#editCategory").hide();
						$('#saveLoader').hide();
						$("#saveCategory").prop('disabled', false);

                        if(data.data[0].special_type_id>0){
                            $('#catTitle').prop('readonly', 'readonly');
                        }
					}
				},
				error:function() {
					alert('Greška');
				}
			});

		})
	});
</script>