<div ng-controller="RestaurantEditMenuCtrl">

	<div class="tab-content">

	<form name="form" novalidate ng-show="!loading">

		<div class="support-box-wrap box-content2">
			<div class="support-box-wrap-header">
				<h1>Menu</h1>
				<div class="support-box-header-actions-wrap">
					<div class="support-box-header-actions">

						<button ng-click="askConfirmationBeforeDeleteChange()" class="button button-small button-empty button-green">
							<span ng-if="askConfirmationBeforeDelete"><i class="fa fa-thumbs-o-up"></i>&nbsp;&nbsp;Ask confirmation before delete items</span>
							<span ng-if="!askConfirmationBeforeDelete"><i class="fa fa-thumbs-o-down"></i>&nbsp;&nbsp;Delete items without confirmation</span>
						</button>

						<button ng-click="addCategory()" title="Add Category (ctrl+shift+c)" class="button button-small button-empty button-green"><i class="fa fa-plus"></i>&nbsp;&nbsp;Add Category</button>

						<button ng-click="expandCollapseAll()" title="Collapse / Expand" class="button button-small button-empty button-green">

							<span ng-if="!all_expanded"><i class="fa fa-expand"></i>&nbsp;&nbsp;Expand All</span>
							<span ng-if="all_expanded"><i class="fa fa-compress"></i>&nbsp;&nbsp;Collapse All</span>


						</button>

					</div>
				</div>
				<div class="divider"></div>
			</div>
		</div>

		<div ng-repeat="category in restaurant.categories">
			<div class="support-box-wrap box-content2">
				<div class="support-box-wrap-header">

					<ng-form name="innerFormCategory">
						<ul ng-class="{'submitted':submitted}" class="ul-inputs inputs-group-dish divider">
							<li class="li-input li-input-dish" ng-class="{'error':innerFormCategory.categoryName.$invalid}">
								<div class="input"><input element='{"category":{{category.sort}}}' class="mousetrap" type="text" ng-enter="addCategory()" required name="categoryName" ng-model="category.name" id="category-{{category._rand}}" placeholder="Category name"></div>
								<div class="box-error">
									<small ng-show="innerFormCategory.categoryName.$error.required">Required.</small>
								</div>
							</li>
						</ul>
					</ng-form>

					<div class="support-box-header-actions-wrap">
						<div class="support-box-header-actions">

							<button ng-if="category.expanded" title="ctrl+d" ng-click="addDish( category )" class="button button-small button-empty button-green"><i class="fa fa-plus"></i>&nbsp;&nbsp;Add Dish</button>

							<button ng-click="deleteCategory(category)" title="Delete category (ctrl+-)" class="button button-small button-empty button-green"><i class="fa fa-trash"></i></button>

							<button ng-click="sortCategoryUp(category)" title="Move this category up (ctrl+[)" class="button button-small button-empty button-green" ng-if="category.show_up"><i class="fa fa-arrow-up"></i></button>

							<button ng-click="sortCategoryDown(category)" title="Move this category down (ctrl+])" class="button button-small button-empty button-green" ng-if="category.show_down"><i class="fa fa-arrow-down"></i></button>

							<button ng-click="category.expanded = ( category.expanded ? false : true )" title="Collapse / Expand category details (ctrl+e)" class="button button-small button-empty button-green">
								<i ng-if="!category.expanded" class="fa fa-expand"></i>
								<i ng-if="category.expanded" class="fa fa-compress"></i>
							</button>

							<button ng-click="expandCollapseAllCategory( category )" title="Expand All" class="button button-small button-empty button-green">
								<span ng-if="!category.all_expanded"><i class="fa fa-expand"></i>&nbsp;&nbsp;Expand All</span>
								<span ng-if="category.all_expanded"><i class="fa fa-compress"></i>&nbsp;&nbsp;Collapse All</span>
							</button>

						</div>
					</div>
					<div class="divider"></div>
				</div>

				<div class="no-box-content-color dish-option-group" ng-repeat="dish in category._dishes" ng-if="category.expanded">
					<ng-form name="innerFormDish">

						<ul ng-class="{'submitted':submitted}" class="ul-inputs inputs-group-dish divider">
							<li class="li-input li-input-dish" ng-class="{'error':innerFormDish.dishName.$invalid}">
								<div class="input">
									<input type="text"
									space-left="dish.name" space-left-class="space-left-dish-name" space-left-width="285" name="dishName"
									element='{"category":{{category.sort}},"dish":{{dish.sort}}}' class="mousetrap" ng-enter="addDish( category )" required ng-model="dish.name" id="dish-{{dish._rand}}" placeholder="Dish name">
								</div>
								<div class="box-error">
									<small ng-show="innerFormDish.dishName.$error.required">Required.</small>
								</div>
							</li>

							<li class="li-input li-input-dish" ng-class="{'error':innerFormDish.dishPrice.$invalid}">
								<div class="input"><input type="number" ng-enter="addDish( category )" class="input-price" required step="any" name="dishPrice" ng-model="dish.price" ignore-mouse-wheel remove-on-focus placeholder="Dish price"></div>
								<div class="box-error">
									<small ng-show="innerFormDish.dishPrice.$error.required">Required.</small>
								</div>
							</li>

							<li class="li-input li-input-dish" ng-class="{'error':innerFormDish.dishActive.$invalid}">
								<div class="input">
									<select name="dishActive" class="input-active" required ng-model="dish.active" ng-options="opt.value as opt.label for opt in active" ></select>
								</div>
								<div class="box-error">
									<small ng-show="innerFormDish.dishActive.$error.required">Required.</small>
								</div>
							</li>

							<li class="li-input li-input-dish">
								<button ng-click="deleteDish(dish, category)" title="Delete dish (ctrl+-)" class="button button-small button-empty button-green"><i class="fa fa-trash"></i></button>

								<button title="Move this dish up (ctrl+[)" ng-click="sortDishUp(dish, category)" ng-if="dish.show_up" class="button button-small button-empty button-green"><i class="fa fa-arrow-up"></i></button>

								<button title="Move this dish down (ctrl+])" ng-click="sortDishDown(dish, category)" ng-if="dish.show_down" class="button button-small button-empty button-green"><i class="fa fa-arrow-down"></i></button>

								<button ng-click="dish.expanded = ( dish.expanded ? false : true )" title="Collapse / Expand category details (ctrl+e)" class="button button-small button-empty button-green">
									<i ng-if="!dish.expanded" class="fa fa-expand"></i>
									<i ng-if="dish.expanded" class="fa fa-compress"></i>
								</button>

								<button ng-click="dishActionStart(dish, category)" title="Move/Copy this dish or its options (ctrl+shift+o)" class="button button-small button-empty button-green"><i class="fa fa-gear"></i></button>
							</li>
						</ul>

						<div ng-if="dish.expanded" class="dish-option-group">

							<ul ng-class="{'submitted':submitted}" class="ul-inputs">

								<li class="li-input li-input-dish" ng-class="{'error':innerFormDish.dishDescription.$invalid}">
									<div class="input"><input type="text" name="dishDescription" ng-model="dish.description" placeholder="Dish description"></div>
									<div class="box-error">
										<small ng-show="innerFormDish.dishDescription.$error.required">Required.</small>
									</div>
									<div class="notes">60 characters</div>
								</li>
								<li class="li-input li-input-dish">
									<div class="input"><input type="text" name="dishImage" ng-model="dish.image" placeholder="Image name"></div>
								</li>

								<li class="li-input" ng-class="{'error':innerFormDish.expandedView.$invalid}">
									<div class="label">Expanded view when added to cart</div>
									<div class="input">
										<select name="expandedView" required ng-model="dish.expand_view" ng-options="opt.value as opt.label for opt in yesNo" ></select>
									</div>
									<div class="box-error">
										<small ng-show="innerFormDish.expandedView.$error.required">Required.</small>
									</div>
									<div class="notes">
										For when you want the user to see options, like sizes and pizza toppings
									</div>
								</li>
								<li class="li-input" ng-class="{'error':innerFormDish.showStar.$invalid}">
									<div class="label">Show star</div>
									<div class="input">
										<select name="showStar" required ng-model="dish.top" ng-options="opt.value as opt.label for opt in yesNo" ></select>
									</div>
									<div class="box-error">
										<small ng-show="innerFormDish.showStar.$error.required">Required.</small>
									</div>
									<div class="notes">
										Usually just for items in the first category on the menu
									</div>
								</li>
							</ul>
							<div class="divider"></div>

							<strong><br><br>Checkbox Options:</strong>
							<button ng-click="addCheckboxOption(dish, category)" title="Add Checkbox Option" class="button button-small button-empty button-green"><i class="fa fa-plus"></i>&nbsp;&nbsp;Add Checkbox Option</button>

							<div ng-if="dish.options.checkboxes.length">

								<div ng-repeat="option in dish.options.checkboxes" class="divider">

									<ng-form name="innerFormOption">

										<ul ng-class="{'submitted':submitted}" class="ul-inputs inputs-group-dish">

											<li class="li-input li-input-dish" ng-enter="addCheckboxOption(dish, category)" ng-class="{'error':innerFormOption.optionName.$invalid}">
												<div class="input"><input type="text" id="checkbox-{{option._rand}}" required name="optionName" ng-model="option.name" placeholder="Option name"></div>
												<div class="box-error">
													<small ng-show="innerFormOption.optionName.$error.required">Required.</small>
												</div>
											</li>

											<li class="li-input li-input-dish" ng-class="{'error':innerFormOption.optionPrice.$invalid}">
												<div class="input"><input type="number" ng-enter="addCheckboxOption(dish, category)" required step="any" class="input-price" name="optionPrice" ng-model="option.price" ignore-mouse-wheel remove-on-focus placeholder="Additonal amount"></div>
												<div class="box-error">
													<small ng-show="innerFormOption.optionPrice.$error.required">Required.</small>
												</div>
											</li>

											<li class="li-input li-input-dish">
												<button ng-click="option.default = ( option.default ? false : true )" title="Default" class="button button-small button-empty button-green">
													<i class="fa fa-check-square" ng-if="option.default"></i>
													<i class="fa fa-square" ng-if="!option.default"></i>
												</button>
												<button ng-click="deleteCheckboxOption(option, dish, category)" title="Delete option" class="button button-small button-empty button-green"><i class="fa fa-trash"></i></button>
												<button title="Move this dish up" ng-if="option.show_up" ng-click="sortOptionUp(option, dish.options.checkboxes, dish, category, 'checkbox')" class="button button-small button-empty button-green"><i class="fa fa-arrow-up"></i></button>
												<button title="Move this dish down" ng-if="option.show_down" ng-click="sortOptionDown(option, dish.options.checkboxes, dish, category, 'checkbox')" class="button button-small button-empty button-green"><i class="fa fa-arrow-down"></i></button>
											</li>

										</ul>
									</ng-form>
								</div>
							</div>
							<div class="divider"></div>

							<strong><br><br>Select Options:</strong>
							<button ng-click="addSelectOption(dish, category)" title="Add Select Option" class="button button-small button-empty button-green"><i class="fa fa-plus"></i>&nbsp;&nbsp;Add Select Option</button>

							<div ng-if="dish.options.selects.length">

								<div ng-repeat="option in dish.options.selects" class="divider">

									<ng-form name="innerFormOption">

										<ul ng-class="{'submitted':submitted}" class="ul-inputs inputs-group-dish">

											<li class="li-input li-input-dish" ng-class="{'error':innerFormOption.optionName.$invalid}">
												<div class="input"><input type="text" id="select-{{option._rand}}" required name="optionName" ng-model="option.name" placeholder="Option name"></div>
												<div class="box-error">
													<small ng-show="innerFormOption.optionName.$error.required">Required.</small>
												</div>
											</li>

											<li class="li-input li-input-dish">
												<button ng-if="option.expanded" ng-click="addSelectSubOption(option, dish, category)" title="Add Option" class="button button-small button-empty button-green"><i class="fa fa-plus"></i>&nbsp;&nbsp;Add Option</button>
												<button ng-click="deleteSelectOption(option, dish, category)" title="Delete option" class="button button-small button-empty button-green"><i class="fa fa-trash"></i></button>
												<button title="Move this dish up" ng-if="option.show_up" ng-click="sortOptionUp(option, dish.options.selects, dish, category, 'select')" class="button button-small button-empty button-green"><i class="fa fa-arrow-up"></i></button>
												<button title="Move this dish down" ng-if="option.show_down" ng-click="sortOptionDown(option, dish.options.selects, dish, category, 'select')" class="button button-small button-empty button-green"><i class="fa fa-arrow-down"></i></button>
												<button ng-click="option.expanded = ( option.expanded ? false : true )" title="Collapse / Expand details" class="button button-small button-empty button-green">
													<i ng-if="!option.expanded" class="fa fa-expand"></i>
													<i ng-if="option.expanded" class="fa fa-compress"></i>
												</button>

											</li>
										</ul>
									</ng-form>

									<div ng-if="option.expanded" class="dish-option-group">

										<div ng-if="option.options.length">

											<div ng-repeat="suboption in option.options" class="divider">

												<ng-form name="innerFormSubOption">

													<ul ng-class="{'submitted':submitted}" class="ul-inputs inputs-group-dish">

														<li class="li-input li-input-dish" ng-class="{'error':innerFormOption.subOptionName.$invalid}">
															<div class="input"><input ng-enter="addSelectSubOption(option, dish, category)" type="text" id="sub-option-{{suboption._rand}}" required name="subOptionName" ng-model="suboption.name" placeholder="Option name"></div>
															<div class="box-error">
																<small ng-show="innerFormOption.subOptionName.$error.required">Required.</small>
															</div>
														</li>

														<li class="li-input li-input-dish" ng-class="{'error':innerFormOption.subOptionPrice.$invalid}">
															<div class="input"><input type="number" ng-enter="addSelectSubOption(option, dish, category)" required step="any" class="input-price" name="subOptionPrice" ng-model="suboption.price" ignore-mouse-wheel remove-on-focus placeholder="Additonal amount"></div>
															<div class="box-error">
																<small ng-show="innerFormOption.subOptionPrice.$error.required">Required.</small>
															</div>
														</li>

														<li class="li-input li-input-dish">


															<button ng-click="setOptionAsDefault( suboption, option, dish, category );" title="Make it default" class="button button-small button-empty button-green">
																<i class="fa fa-check-square" ng-if="suboption.default"></i>
																<i class="fa fa-square" ng-if="!suboption.default"></i>
															</button>

															<button ng-click="deleteSelectSubOption( suboption, option, dish, category )" title="Delete option" class="button button-small button-empty button-green"><i class="fa fa-trash"></i></button>
															<button title="Move this option up" ng-if="suboption.show_up" ng-click="sortSubOptionUp( suboption, option, dish, category )" class="button button-small button-empty button-green"><i class="fa fa-arrow-up"></i></button>
															<button title="Move this option down" ng-if="suboption.show_down" ng-click="sortSubOptionDown( suboption, option, dish, category )" class="button button-small button-empty button-green"><i class="fa fa-arrow-down"></i></button>
														</li>

													</ul>
												</ng-form>
											</div>
										</div>
										<br><br><br>
									</div>


								</div>
								<br><br><br>
							</div>
							<div class="divider"></div>
						</div>

					</ng-form>
					<br><br><br>
				</div>

			</div>
		</div>

	</form>

	<div class="restaurant-dish-action-dialog-container zoom-anim-dialog mfp-hide dialog">
		<div>
			<h1 class="title"><span>{{dishActionDish.name}}</span></h1>
			<div class="divider"></div>
			<ng-form name="formDishActionsMove">
				<div class="ul-inputs">
					<ul ng-class="{'submitted':formDishActionsMoveSubmitted}" class="ul-inputs">
						<li class="li-input li-input-dish" ng-class="{'error':formDishActionsMove.category.$invalid}">
							<div class="label">Move this dish to a different category</div>
							<div class="input">
								<select ng-model="dishActionMoveToCategory" name="category" required>
									<option ng-repeat="category in restaurant.categories" value="{{category.sort}}" ng-disabled="category.sort == dishActionCategory.sort">{{category.name}}</option>
								</select>
							</div>
							<div class="box-error">
								<small ng-show="formDishActionsMove.category.$error.required">Required.</small>
							</div>
						</li>
						<li class="li-input" ng-show="!dishActionMoveIsMoving">
							<button class="button button-empty button-border button-green button-full" ng-click="dishActionMove();">&nbsp;&nbsp;Move</button>
						</li>
						<li class="li-input" ng-show="dishActionMoveIsMoving">
							<i class="fa fa-circle-o-notch fa-spin"></i>
						</li>
					</ul>
				</div>
			</ng-form>
			<br><br>
			<ng-form name="formDishActionsCopyOptions">
				<div class="ul-inputs">
					<ul ng-class="{'submitted':formDishActionsCopyOptionsSubmitted}" class="ul-inputs">
						<li class="li-input li-input-dish" ng-class="{'error':formDishActionsCopyOptions.category.$invalid}">
							<div class="label">Copy the options for this dish to another dish</div>
							<div class="input">
								<select ng-model="dishActionCopyToDish" name="dish" required>
									<optgroup label="{{category.name}}" ng-repeat="category in restaurant.categories">
										<option ng-repeat="dish in category._dishes" value="{{category.sort}},{{dish.sort}}" ng-disabled="dish.sort == dishActionDish.sort && category.sort == dishActionCategory.sort">{{dish.name}}</option>
									</optgroup>
								</select>
							</div>
							<div class="notes">(option names and prices can be changed independently)</div>
							<div class="box-error">
								<small ng-show="formDishActionsCopyOptions.dish.$error.required">Required.</small>
							</div>
						</li>
						<li class="li-input" ng-show="!dishActionIsCopying">
							<button class="button button-empty button-border button-green button-full" ng-click="dishActionCopyOptions();">&nbsp;&nbsp;Copy</button>
						</li>
						<li class="li-input" ng-show="dishActionIsCopying">
							<i class="fa fa-circle-o-notch fa-spin"></i>
						</li>
					</ul>
				</div>
			</ng-form>
			<br><br>
			<ng-form name="formDishActionsCopyDish">
				<div class="ul-inputs">
					<ul ng-class="{'submitted':formDishActionsCopyDishSubmitted}" class="ul-inputs">
						<li class="li-input li-input-dish" ng-class="{'error':formDishActionsCopyDish.category.$invalid}">
							<div class="label">Copy/Duplicate this dish to another category</div>
							<div class="input">
								<select ng-model="dishActionCopyToCategory" name="category" required>
									<option ng-repeat="category in restaurant.categories" value="{{category.sort}}">{{category.name}}</option>
								</select>
							</div>
							<div class="notes">(option names and prices can be changed independently)</div>
							<div class="box-error">
								<small ng-show="formDishActionsCopyDish.dish.$error.required">Required.</small>
							</div>
						</li>
						<li class="li-input" ng-show="!dishActionIsCopyingDish">
							<button class="button button-empty button-border button-green button-full" ng-click="dishActionCopyDish();">&nbsp;&nbsp;Copy</button>
						</li>
						<li class="li-input" ng-show="dishActionIsCopyingDish">
							<i class="fa fa-circle-o-notch fa-spin"></i>
						</li>
					</ul>
				</div>
			</ng-form>
		</div>
	</div>

</div>

	<div ng-show="!loading" sticky-bottom="51">
		<div class="no-box-content-color">
			<ul class="ul-inputs">
				<li class="li-input" ng-show="!isSaving">
					<button class="button-no-margin button save" ng-click="save();"><i class="fa fa-save"></i>&nbsp;&nbsp;Save</button>
				</li>
				<li class="li-input" ng-show="isSaving">
					<i class="fa fa-circle-o-notch fa-spin"></i>
				</li>
			</ul>
		</div>
	</div>
</div>
