
<?php
$encodedTree = json_encode($categoryTree);

?>
<script>

    var coatOfArmsLink = '<?php echo URL::asset('/uploads/core/cities/' . $city->coat_of_arms_image); ?>';
    var generatorPostsLink = '<?php echo URL::route('getHomeGeneratorPosts'); ?>';
    var generatorSaveLink = '<?php echo URL::route('postSaveHomeGenerator'); ?>';
    var generatorErrorReport = '<?php echo URL::route('homescreenErrorReport'); ?>';
    var loadedHomescreen = '<?php echo $homescreen; ?>';
    var homescreenImages = '<?php echo url('/uploads/core/homescreens/'); ?>';
    var savingTexts = {
        save: '<?php echo Lang::get('homescreen.buttons.save'); ?>',
        saving: '<?php echo Lang::get('homescreen.buttons.saving'); ?>',
        msgError: '<?php echo Lang::get('homescreen.msg.error.saving'); ?>',
        msgSuccess: '<?php echo Lang::get('homescreen.msg.success.saving'); ?>'
    };
    var communalServiceCheck = '<?php echo $communalServiceBool; ?>';

    if(communalServiceCheck)
    {
        var cellDescriptions = {
            empty: '<?php echo Lang::get('homescreen.generator.cellTypes.empty'); ?>',
            //slider: '<?php echo Lang::get('homescreen.generator.cellTypes.slider'); ?>',

            newReport: '<?php echo Lang::get('homescreen.generator.cellTypes.newReport'); ?>',//communal service
            category: '<?php echo Lang::get('homescreen.generator.cellTypes.category'); ?>',
            //weather: '<?php echo Lang::get('homescreen.generator.cellTypes.weather'); ?>',
            video: '<?php echo Lang::get('homescreen.generator.cellTypes.video'); ?>',
            map: '<?php echo Lang::get('homescreen.generator.cellTypes.map'); ?>',
            post: '<?php echo Lang::get('homescreen.generator.cellTypes.post'); ?>',
            link: '<?php echo Lang::get('homescreen.generator.cellTypes.link'); ?>',
            //socialFeed: '<?php echo Lang::get('homescreen.generator.cellTypes.socialFeed'); ?>',
            coatOfArms: '<?php echo Lang::get('homescreen.generator.cellTypes.coatOfArms'); ?>',
            initiatives: '<?php echo Lang::get('initiatives.homescreen_cell_type'); ?>',

        };
    }
    else
    {
        var cellDescriptions = {
            empty: '<?php echo Lang::get('homescreen.generator.cellTypes.empty'); ?>',
            //slider: '<?php echo Lang::get('homescreen.generator.cellTypes.slider'); ?>',
            // tu je smrad haha
            //newReport: '<?php echo Lang::get('homescreen.generator.cellTypes.newReport'); ?>',
            category: '<?php echo Lang::get('homescreen.generator.cellTypes.category'); ?>',
            //weather: '<?php echo Lang::get('homescreen.generator.cellTypes.weather'); ?>',
            video: '<?php echo Lang::get('homescreen.generator.cellTypes.video'); ?>',
            map: '<?php echo Lang::get('homescreen.generator.cellTypes.map'); ?>',
            post: '<?php echo Lang::get('homescreen.generator.cellTypes.post'); ?>',
            link: '<?php echo Lang::get('homescreen.generator.cellTypes.link'); ?>',
            //socialFeed: '<?php echo Lang::get('homescreen.generator.cellTypes.socialFeed'); ?>',
            coatOfArms: '<?php echo Lang::get('homescreen.generator.cellTypes.coatOfArms'); ?>',
            initiatives: '<?php echo Lang::get('initiatives.homescreen_cell_type'); ?>',

        };
    }

    var cityId = parseInt('<?php echo $city_id; ?>');

    var categoryTree =  '<?php echo $encodedTree; ?>';

    console.log("Category tree", categoryTree);


</script>

<!-- Main section start -->

	<div class="main-holder"  ng-app="homeGenerator" ng-strict-di ng-controller="mainController as main">
		<div class="row">
			<div class="col s12">
				<div class="widget-holder transparent fadeIn">
					<div class="widget-heading">
						<h2 class="widget-heading-thick"><?php echo Lang::get('homescreen.generator.title'); ?></h2>
						<p><?php echo Lang::get('homescreen.generator.text'); ?></p>
					</div>
				</div>
			</div>
		</div>

		<div class="row" ng-keyup="main.sanitizeJson($event)">
			<div class="col s12 m9">
				<div class="col s12"  ng-repeat="rowData in main.initialData.cells" ng-init="parentIndex = $index">
					<div class="widget-holder fadeIn">
						<div class="widget-heading" >

							<h2 class="widget-heading-thick  col s8"><?php echo Lang::get('homescreen.generator.row'); ?> <% $index + 1 %></h2>

							<div class="switch right-align" ng-if="$index > 0">
								<label>
									<?php echo Lang::get('homescreen.generator.divideRow'); ?>:
									<input type="checkbox"  id="rowCheck<% $index %>" ng-model="rowData.isSplit">
									<span class="lever"></span>

								</label>
							</div>
						</div>
						<div class="widget-content">


							<div class="row">
								<div  ng-repeat="(key,cell) in rowData.cellData "   ng-class="{'col s12 m6':rowData.isSplit, 'col s12':!rowData.isSplit}"  ng-if="!($index == 1 && rowData.isSplit == false)">
									<!-- if row 1 start -->

									<div ng-if="parentIndex == 0">
										<div class="inputs-wrapper">
											<p>
												<?php echo Lang::get('homescreen.labels.slider.type'); ?>:
												<input type="radio" name="sliderType" ng-model="cell.feed" value="custom"  id="categoryposts-no">
												<label for="categoryposts-no"><?php echo Lang::get('homescreen.labels.slider.custom'); ?></label>

												<input type="radio" name="sliderType" ng-model="cell.feed" value="facebook" id="categoryposts-yes">
												<label for="categoryposts-yes"><?php echo Lang::get('homescreen.labels.slider.facebook'); ?></label>
											</p>
										</div>
									<div class="inputs-wrapper" >

										<!-- if custom start -->
										<div ng-show="cell.feed == 'custom'">
											<div class="button-holder right-align" style="position: relative">

												<a class="btn-floating btn-large waves-effect waves-light" ng-click="main.addSlide(cell)" title="<?php echo Lang::get('homescreen.labels.element.add_new_slide'); ?>"><i class="material-icons">insert_photo</i></a>

											</div>

											<div class="inputs-wrapper hoverable"  ng-repeat="element in cell.elements">


												<div class="input-field">
														<input type="text" class="element-title validate" id="elementTitle<% $index %>" ng-model="element.title">
														<label for="elementTitle<% $index %>"><?php echo Lang::get('homescreen.labels.element.title'); ?></label>

												</div>

												<div class="input-field">
													<input type="url" class="validate" id="elementLink<% $index %>" ng-model="element.link">

													<label for="elementLink<% $index %>"><?php echo Lang::get('homescreen.labels.element.link'); ?></label>

												</div>

													<div class="file-field input-field">
														<div class="btn">

															<span><?php echo Lang::get('homescreen.labels.element.image'); ?></span>
															<input type="file" id="elementImage<% $index %>"  ngf-select="main.handleFileSelect($file, element, 'element', $event)" ng-click="changeDimension(false)" ngf-accept="'image/jpeg, image/png,image/jpg'" ngf-fix-orientation="true" ngf-resize="{width: 800, height: 400, centerCrop: true, restoreExif: true}">

														</div>
														<div class="file-path-wrapper">
															<input class="file-path validate" type="text">

														</div>
													</div>



												<div class="button-holder" style="position: relative" ng-show="element.image.link">
													<div class="fixed-action-btn horizontal">
														<a class="btn-floating btn-large amber">
															<i class="large material-icons">mode_edit</i>
														</a>
														<ul>
															<li>
																<a class="btn-floating waves-effect waves-light amber lighten-2" ng-click="main.clearNewBack(element, 'element')" title="<?php echo Lang::get('homescreen.buttons.clearNewBack'); ?>"><i class="material-icons">remove</i></a>
															</li>
															<li><a class="btn-floating waves-effect waves-light orange lighten-2" ng-click="main.clearBack(element, 'element')" title="<?php echo Lang::get('homescreen.buttons.clearBack'); ?>"><i class="material-icons">remove_circle_outline</i></a></li>
															<li><a class="btn-floating waves-effect waves-light red lighten-2" ng-click="main.removeElement(element, $index, cell)" title="<?php echo Lang::get('homescreen.buttons.removeElement'); ?>"><i class="material-icons">clear</i></a></li>
														</ul>
													</div>
												</div>





											</div>


										</div>
										<!-- if custom end -->

										<!-- if facebook start -->
										<div ng-show="cell.feed == 'facebook'">

											<div class="input-field">
												<input type="text" id="facebookLink" ng-model="cell.facebookLink">
												<label for="facebookLink"><?php echo Lang::get('homescreen.labels.facebookLink'); ?></label>
											</div>
										</div>
										</div>
										<!-- if facebook end -->

									</div>
									<!-- if row 1 end -->

									<!-- if not row 1 start -->
									<div  class="inputs-wrapper hoverable"  ng-if="parentIndex != 0">

											<div class="input-field">
													<select ng-model="cell.type" id="cellType<% $index %>"  material-select watch>
														<option ng-repeat="(cellKey, cellValue) in main.cellDescriptions" value="<% cellKey %>" ng-if="!((cellKey == 'category' && main.categoryTree.length == 0) || (cellKey == 'post' && main.categoryTree.length == 0))"><% cellValue %></option>
													</select>
													<label for="cellType<% $index %>"><?php echo Lang::get('homescreen.labels.cellType'); ?></label>

											</div>

											<div ng-hide="cell.type == 'empty'">

												<div class="input-field" ng-hide="cell.type == 'coatOfArms'">
													<input type="checkbox" id="displayIcon<% parentIndex + ''+$index %>" ng-model="cell.displayIcon">
													<label for="displayIcon<% parentIndex  +''+ $index %>"><?php echo Lang::get('homescreen.labels.displayIcon'); ?></label>
												</div>


													<div class="file-field input-field"  >
														<div class="btn">
															<span><?php echo Lang::get('homescreen.labels.element.image'); ?></span>

															<input  id="background<% $index %>" type="file" ng-click="changeDimension(rowData.isSplit)" ngf-select="main.handleFileSelect($file, cell, 'background', $event)" ngf-accept="'image/jpeg, image/png'" ngf-fix-orientation="true" ngf-resize="{width: 800, height: 800, centerCrop: true, restoreExif: true}">
														</div>
														<div class="file-path-wrapper">
															<input class="file-path validate"  type="text" ng-model="cell.background.link">

														</div>
													</div>

													<div class="button-holder" style="position: relative" ng-show="cell.background.link">
														<div class="fixed-action-btn horizontal">
															<a class="btn-floating btn-large  amber">
																<i class="large material-icons">mode_edit</i>
															</a>
															<ul>
																<li><a class="btn-floating waves-effect waves-light amber lighten-2" ng-click="main.clearNewBack(cell, 'background')" title="<?php echo Lang::get('homescreen.buttons.clearNewBack'); ?>"><i class="material-icons">remove</i></a></li>
																<li><a class="btn-floating waves-effect waves-light orange lighten-2" ng-click="main.clearBack(cell, 'background')" title="<?php echo Lang::get('homescreen.buttons.clearBack'); ?>"><i class="material-icons">remove_circle_outline</i></a></li>
															</ul>
														</div>
													</div>



												<div class="input-field" ng-show="cell.type == 'category' || cell.type == 'post'">
														<select ng-model="cell.categoryId" id="categoryId<% $index %>" ng-change="main.loadPosts(cell, cell.categoryId, $index)"  material-select watch>
															<?php /* <option ng-repeat="category in main.categories" value="<% category.id+'_'+category.posts %>"><% category.name%></option> */ ?>
															<option ng-repeat="category in main.categories" value="<% category.id %>"><% category.name%></option>
														</select>
														<label for="categoryId<% $index %>" ><?php echo Lang::get('homescreen.labels.categoryId'); ?></label>

												</div>

												<div class="input-field" ng-show="cell.type == 'post'">
														<select ng-model="cell.postId" id="postId<% $index %>"  material-select watch>
															<option ng-repeat="post in cell.posts" value="<% post.id %>"><% post.title %></option>
														</select>
													<label for="postId<% $index %>" ><?php echo Lang::get('homescreen.labels.postId'); ?></label>

												</div>

												<div ng-show="cell.type == 'video'">

													<div class="input-field">
														<input type="text" ng-model="cell.videoLink" id="videoLink<% $index %>">
														<label for="videoLink<% $index %>"><?php echo Lang::get('homescreen.labels.videoLink'); ?></label>

													</div>




													<div class="file-field input-field">
														<div class="btn">
															<span><?php echo Lang::get('homescreen.labels.videoBackground'); ?></span>
															<input type="file" id="videoBackground<% $index %>" ngf-select ngf-change="main.handleFileSelect($file, cell, 'video', $event)" ngf-accept="'image/jpeg, image/png'" ngf-fix-orientation="true" ngf-resize="{width: 800, height: 800, centerCrop: true, restoreExif: true}">


														</div>
														<div class="file-path-wrapper">
															<input class="file-path validate" type="text">

														</div>
													</div>



													<div class="button-holder" style="position: relative" ng-show="cell.background.link">
														<div class="fixed-action-btn horizontal">
															<a class="btn-floating btn-large amber">
																<i class="large material-icons">mode_edit</i>
															</a>
															<ul>
																<li>
																	<a class="btn-floating waves-effect waves-light amber lighten-2" ng-click="main.clearNewBack(cell, 'video')" title="<?php echo Lang::get('homescreen.buttons.clearNewBack'); ?>"><i class="material-icons">remove</i></a>
																</li>
																<li><a class="btn-floating waves-effect waves-light orange lighten-2" ng-click="main.clearBack(cell, 'video')" title="<?php echo Lang::get('homescreen.buttons.clearBack'); ?>"><i class="material-icons">remove_circle_outline</i></a></li>
															</ul>
														</div>
													</div>



												</div>

												<div class="input-field" ng-show="cell.type == 'socialNetwork'">
														<select ng-model="cell.textVpos" id="textVpos<% $index %>"   material-select watch>
															<option value="facebook">Facebook</option>
															<option value="twitter">Twitter</option>
														</select>
														<label for="textVpos<% $index %>"><?php echo Lang::get('homescreen.labels.textVpos'); ?></label>

												</div>

												<div class="input-field" ng-show="cell.type == 'link'">
														<input type="text" ng-model="cell.link" id="link<% $index %>">
														<label for="link<% parentIndex + ''+$index %>"><?php echo Lang::get('homescreen.labels.link'); ?></label>

												</div>



												<div class="input-field">
													<input type="text" ng-model="cell.text" id="text<% $index %>">
													<label for="text<% $index %>" ><?php echo Lang::get('homescreen.labels.text'); ?></label>
												</div>

												<div class="input-field">
														<select ng-model="cell.textVpos" id="textVpos<% $index %>"  material-select watch>
															<option value="top"><?php echo Lang::get('homescreen.labels.top'); ?></option>
															<option value="bottom"><?php echo Lang::get('homescreen.labels.bottom'); ?></option>
														</select>
														<label for="textVpos<% $index %>"><?php echo Lang::get('homescreen.labels.textVpos'); ?></label>


												</div>

												<div class="input-field">
														<select ng-model="cell.textHpos" id="textHpos<% $index %>" material-select watch>
															<option value="left"><?php echo Lang::get('homescreen.labels.left'); ?></option>
															<option value="center"><?php echo Lang::get('homescreen.labels.center'); ?></option>
															<option value="right"><?php echo Lang::get('homescreen.labels.right'); ?></option>
														</select>
														<label for="textHpos<% $index %>"><?php echo Lang::get('homescreen.labels.textHpos'); ?></label>

												</div>

											</div>

										</div>

									<!-- if not row 1 end -->



								</div>

							</div>
						</div>

					</div>
				</div>


			</div>

			<div class="col s12 m3 pt-20">

				<form class="homescreen-color-pickers">
				<!--div class="form-group">
					<label for="colorPrimary" class="col-xs-8 control-label"><?php echo Lang::get('homescreen.generator.colorPrimary'); ?></label>
					<div class="col-xs-4">
						<input type="text" id="colorPrimary">
					</div>
				</div-->
					<div class="input-group">
							<input type="color" id="colorSecondary">
							<label for="colorSecondary" ><?php echo Lang::get('homescreen.generator.colorSecondary'); ?></label>

					</div>
					<div class="input-group">
							<input type="color" id="colorTertiary">
							<label for="colorTertiary" ><?php echo Lang::get('homescreen.generator.colorTertiary'); ?></label>

					</div>
				</form>


				<div class="mobile-preview mat10">
					<img src="<?php echo URL::asset('img/home-generator/iphone7.svg'); ?>" alt="<?php echo Lang::get('homescreen.generator.previewAlt'); ?>" class="responsive-img">
					<div class="mobile-content">

						<div ng-repeat="rowData in main.initialData.cells" ng-init="parentIndex = $index" class="mobile-row" ng-class="'row' + parentIndex">
							<div class="mobile-col" ng-repeat="cell in rowData.cellData" ng-class="rowData.isSplit ? 'mobile-half-cell' : 'mobile-full-cell'" ng-if="!($index == 1 && rowData.isSplit == false)" ng-init="childIndex = $index" ng-style="{'background-color': main.initialData.settings.colorSecondary, 'border-color': main.initialData.settings.colorTertiary }">

								<!-- Slider for the first row -->
								<div ng-if="parentIndex == 0" ng-show="cell.feed == 'custom'" class="mobile-slider-container" id="sliderCont">
									<div class="mobile-slider-mover" ng-style="{'width': (cell.elements.length * main.defSlideWidth) + 'px', 'left' : '-' + (main.defSlideWidth * main.sliderDisplacementMultiplier) + 'px' }" id="sliderMover" ng-init="main.calcDefSliderValues(); main.runSlider()">
										<div class="mobile-slide" ng-repeat="element in cell.elements" ng-style="{'width': main.defSlideWidth + 'px', 'height': main.defSlideHeight + 'px'}">

											<div class="mobile-slide-background" ng-hide="element.image.link == null || element.image.changed == true" ng-style="{ 'background-image': 'url(' + main.imagesFolder + '/' + element.image.link + ')' }"></div>

											<div class="mobile-slide-background" ng-hide="(element.image.type == null && element.image.data == null) || element.image.changed == false" ng-style="{ 'background-image': 'url(data:' + element.image.type + ';base64,' + element.image.data + ')' }"></div>

											<p class="slide-title" ng-hide="element.title == null || element.title == ''"><% element.title %></p>

											<a ng-if="!(element.link == null || element.link == '')" class="mobile-slide-link" ng-href="<% element.link %>" target="_blank"></a>

										</div>
									</div>
								</div>

								<!-- Facebook feed -->
								<div ng-if="parentIndex == 0" class="cell-icon maxicon-facebook" ng-show="cell.feed == 'facebook'"></div>

								<div ng-hide="cell.type == 'empty'">

									<!-- Background -->
									<div ng-hide="cell.type == 'video' || cell.type == 'coatOfArms'">

										<div class="cell-background" ng-hide="cell.background.link == null || cell.background.changed == true" ng-style="{ 'background-image': 'url(' + main.imagesFolder + '/' + cell.background.link + ')' }"></div>

										<div class="cell-background" ng-hide="(cell.background.type == null && cell.background.data == null) || cell.background.changed == false" ng-style="{ 'background-image': 'url(data:' + cell.background.type + ';base64,' + cell.background.data + ')' }"></div>
									</div>


									<!-- Video -->
									<div ng-show="cell.type == 'video'">

										<div class="cell-background" ng-hide="(cell.videoBackground.link == null && cell.videoBackground.changed == true)" ng-style="{ 'background-image': 'url(' + main.imagesFolder + '/' + cell.videoBackground.link + ')' }"></div>

										<div class="cell-background" ng-hide="cell.videoBackground.type == null && cell.videoBackground.data == null && cell.videoBackground.changed == false" ng-style="{ 'background-image': 'url(data:' + cell.videoBackground.type + ';base64,' + cell.videoBackground.data + ')' }"></div>

										<div class="cell-icon maxicon-video" ng-show="cell.displayIcon == true"></div>
									</div>

									<div ng-show="cell.displayIcon == true">

										<!-- New report -->
										<div class="cell-icon maxicon-newreport" ng-show="cell.type == 'newReport'"></div>

										<!-- Initiatives -->
										<div class="cell-icon maxicon-initiative" ng-show="cell.type == 'initiatives'"></div>

										<!-- City forms -->
										<div class="cell-icon maxicon-post" ng-show="cell.type == 'cityform'"></div>

										<!-- FB events -->
										<div class="cell-icon maxicon-events" ng-show="cell.type == 'fbEvents'"></div>

										<!-- Weather -->
										<div class="cell-icon maxicon-weather" ng-show="cell.type == 'weather'"></div>

										<!-- Map -->
										<div class="cell-icon maxicon-map" ng-show="cell.type == 'map'"></div>

										<!-- Link -->
										<div class="cell-icon maxicon-link" ng-show="cell.type == 'link'"></div>

										<!-- Category -->
										<div class="cell-icon maxicon-category" ng-show="cell.type == 'category'"></div>

										<!-- Post -->
										<div class="cell-icon maxicon-post" ng-show="cell.type == 'post'"></div>

									</div>

									<!-- coatOfArms -->
									<div class="cell-inner-image" ng-show="cell.type == 'coatOfArms'" ng-style="{ 'background-image': 'url(' + main.coatOfArmsLink + ')' }"></div>

									<!-- label -->

									<p class="cell-text" ng-class="[{'top': 'v-top', 'bottom': 'v-bottom'}[cell.textVpos], {'left': 'text-left', 'center': 'text-center', 'right': 'text-right'}[cell.textHpos]]" ng-hide="cell.text == null || cell.text == ''"><% cell.text %></p>

									<!-- Loader -->

								</div>
							</div>
						</div>
					</div>
				</div>

				<p class="text-center" style="color: #90a4ae; font-size: 14px;"><?php echo Lang::get('homescreen.generator.previewNote'); ?></p>

				<div class="row">
					<a class="col s12 waves-effect waves-light btn " ng-click="main.saveHomeScreen()" ng-disabled="main.savingNow == true"><span ng-hide="main.savingNow == true"><?php echo Lang::get('homescreen.buttons.save'); ?></span><span ng-show="main.savingNow == true"><?php echo Lang::get('homescreen.buttons.saving'); ?></span></a> <img src="<?php echo URL::asset('img/home-generator/loading.gif'); ?>" alt="" class="loading-icon" ng-show="main.savingNow == true">


				</div>

			</div>
		</div>


		<div class="modal modal-fixed-footer" id="cropingModal">
			<div class="modal-content">
				<div id="report-delegate" class="fadeIn">
					<div class="inputs-wrapper">
						<div class="row">
							<div class="col s12 m12 l12">
								<div class="cropArea">
									<ui-cropper image="myImage" area-type="rectangle" result-image="myCroppedImage" live-view="blockingObject"
									result-image-size="{w:cropper.cropWidth,h:cropper.cropHeight}" aspect-ratio="cropper.aspect" [allow-crop-resize-on-corners="false"] canvas-scalemode="full-width"  area-init-size="{ w:cropper.cropWidth,h:cropper.cropHeight}" ></ui-cropper>
								</div>

							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="modal-footer right-align">
				<a class="modal-action modal-close waves-effect waves-light btn-flat modal-cancel"><?php echo Lang::get('core.cancel'); ?></a>
				<a class="modal-action waves-effect waves-light btn-flat modal-save" ng-click="callTestFuntion()"><?php echo Lang::get('core.save'); ?></a>
			</div>
		</div>
	</div>



