<div class="b-catalog" ng-controller="productsCtrl">
	<div class="container" ng-controller="catalogCtrl">
		<div class="b-info-restaurant row" ng-hide="loadRest" ng-include="'views/part/info-restaurant.html?ver=15'"></div>

		<div class="row" ng-show="!loadingCatalog">
			<div class="col-xs-12">
				<div class="b-load m-load-catalog text-center" >
					<div class="load-circle"></div>
					<p>{{getLocale('Load menu')}}</p>
				</div>
			</div>
		</div>

		<div class="row" ng-show="loadingCatalog">
			<div class="col-sm-3 sidebar">
				<div class="b-load m-load-catalog text-center" ng-hide="loadCatalog">
					<div class="load-circle"></div>
					<p>{{getLocale('Load category')}}</p>
				</div>
				<div class="b-menu js-menu-category" ng-show="loadCatalog">
					<ul class="items">
						<li class="item" ng-class="{'show-category': $first }" ng-repeat="category in menutree.items" ng-include="'category-tree'"></li>
					</ul>
				</div>
			</div>

			<script type="text/ng-template" id="category-tree">
				<span ng-init="nameCategory = (category.locres.name.length ? category.locres.name : category.name)"></span>
				<a ng-if="category.items.length > 0" href="javascript: void(0);" class="link parent" show-category>
					{{ nameCategory }}
				</a>
				<a ng-if="category.items.length == 0 && category.dishes.length != 0" href="javascript: void(0);"
				   class="link child js-child" ng-click="GetCategory(category.id, nameCategory)"
				   ng-class="{ 'current': firstCategory.id == category.id }"   select-category>{{ nameCategory }}</a>

				<ul class="items" ng-if="category.items.length > 0">
					<li class="item" style="padding-left: 10px" ng-repeat="category in category.items" ng-include="'category-tree'"></li>
				</ul>
			</script>


			<div class="col-sm-9 content">
				<p class="catalog-message" ng-hide="currentCategory">{{getLocale('Select category')}}</p>
				<div class="b-group" ng-show="currentCategory" >
					<h3 class="title-group">{{menuCurrentCategory.name}}</h3>
					<div class="items js-group-product">
						<div ng-repeat="item in filteredProducts" data-id-product="{{item.id}}"
								ng-init="isModis[item.id] = !(item.modischeme == 0 || item.modischeme == null)"
							 	class="item-group js-product-item" id="product-{{item.id}}">

							<div class="row row-main-info">
								<div class="col-sm-3">
									<div class="image-wrapper">
										<!--<div class="ticket action" ng-show="$index == 1">{{getLocale('Action')}}</div>-->
										<!--<div class="ticket new"  ng-show="$index == 2">{{getLocale('Novelty')}}</div>-->
										<img ng-src="images-product/img{{item.code}}.png" alt="" image-load />
									</div>
								</div>
								<div class="col-lg-4 col-md-4 col-sm-9">
									<div class="title-wrapper">
										<p class="title-product js-title-product">{{ item.locres.name.length ? item.locres.name : item.name }}</p>
										<p class="description">{{item.locres[3].value}}</p>
									</div>
								</div>
								<div class="col-lg-2 col-md-2 col-sm-6 col-sm-clear">
									<div class="count-wrapper wrapper-inc no-wrap">
										<a class="button-inc"
										   href="javascript:void(0);"
										   data-index="{{item.id}}"
										   data-id-product="{{item.id}}"
										   data-sub-product=""
										   data-id-category=""
										   data-id-parent=""
										   data-type="dec"
										   ng-class="{ 'disabled': countProduct[item.id] <= 1 }"
										   change-count>-</a>
										<input type="text" ng-model="countProduct[item.id]" mask='99' restrict="reject" readonly
											   class="input input-count"  step="1" max="{{maxValueProduct}}" min="1" />
										<a class="button-inc"
										   href="javascript:void(0);"
										   data-index="{{item.id}}"
										   data-id-product="{{item.id}}"
										   data-sub-product=""
										   data-id-category=""
										   data-id-parent=""
										   data-type="inc"
										   ng-class="{'disabled': countProduct[item.id] >= maxValueProduct}"
										   change-count>+</a>
									</div>
								</div>
								<div class="col-lg-3 col-md-3 col-sm-6">
									<div class="price-wrapper text-right">
										<p class="price">{{ countProduct[item.id] * resultPriceProduct[item.id] | filterPrice | filterNumeric }} {{ Currency }}</p>
										<a ng-if="!((isModis[item.id] && item.type == 'dish') || item.type == 'combo')" class="btn button-to-cart" ng-click="addCart({ idProduct: item.id, idCategory: currentCategory, typeProduct: item.type })">{{getLocale('Add to cart')}}</a>
										<a ng-if="(isModis[item.id] && item.type == 'dish') || item.type == 'combo'" class="btn more-info" ng-click="toggleInfo(item.id)" >{{getLocale('Add to cart')}}</a>
									</div>
								</div>
							</div>

							<!--&& item.type == 'dish'-->

							<div class="row hide-row" ng-if="isModis[item.id]">
								<div class="col-sm-3 col-more-info col-more-info-left" ng-if="item.weight.length > 0">
									<div class="food-all">
										<p class="title">{{getLocale('The nutritional value')}}:</p>
										<ul class="items">
											<li class="item">{{getLocale('Proteins')}} <span class="value pull-right">{{ item.weight[0] }}{{getLocale('gr')}}</span></li>
											<li class="item">{{getLocale('Fats')}} <span class="value pull-right">{{ item.weight[1] }}{{getLocale('gr')}}</span></li>
											<li class="item">{{getLocale('Carbohydrates')}} <span class="value pull-right">{{ item.weight[2] }}{{getLocale('gr')}}</span></li>
										</ul>
									</div>
								</div>
								<div class="col-more-info" ng-class="{ 'col-sm-9': (item.weight.length > 0), 'col-sm-12': (!item.weight.length) }">

									<div class="option-sub-product"  ng-if="item.modis.selectModis.length >= 1 && item.type == 'dish'">
										<div class="row item-sub-product" ng-repeat="itemModis in item.modis.selectModis">
											<div class="col-xs-5 title-param-wrapper">
												<p class="title-param">{{itemModis.name}}</p>
											</div>
											<div class="wrapper-select col-xs-7">
												<!--ng-init="modisSelect[item.id][itemModis.id] = itemModis.modi[0].id.toString()"-->
												<select class="h-full-width h-select js-select-modis"
														ng-init="modisSelect[item.id][itemModis.id] = ''"
														ng-model="modisSelect[item.id][itemModis.id]"
														ng-change="GetResultPriceSelect(item.id, item.id, itemModis.id, modisSelect[item.id][itemModis.id])"
														data-id-product="{{item.id}}"
														check-error-adding>

													<option value="" selected disabled></option>
													<option value="{{itemModisValue.id}}" ng-repeat="itemModisValue in itemModis.modi" >
														{{ itemModisValue.name }}
														({{ itemModisValue.price| filterPrice | filterNumeric }} {{ Currency }})
													</option>
												</select>
											</div>
										</div>
									</div>


									<div class="option-sub-product"  ng-if="item.modis.selectModis.length >= 1 && item.type == 'combo'">
										<div class="row item-sub-product" ng-repeat="itemModis in item.modis.selectModis" ng-init="tempName='name' + $index">
											<div class="col-xs-5 title-param-wrapper">
												<p class="title-param">{{itemModis.name}}</p>  <!-- название модификатора (точнее блюда комбо)-->
											</div>
											<div class="wrapper-select col-xs-7">
												<!--ng-init="modisSelect[item.id][itemModis.id] = itemModis.modi[0].id.toString()"-->
												<div class="item-radio" ng-repeat="itemModisValue in itemModis.modi" ng-init="modisSelect[item.id][itemModis.id] = ''" >
													<input type="radio"
													    ng-model="modisSelect[item.id][itemModis.id]"
													    ng-change="GetResultPriceSelect(item.id, item.id, itemModis.id, modisSelect[item.id][itemModis.id])"
													    data-id-product="{{item.id}}"
													    check-error-adding
													    value="{{itemModisValue.id}}"
													    id="{{tempName + '_' + $index + item.id}}"
													    name="{{tempName + item.id }}"
													    ng-init="needRadio = ($first) ? itemModisValue.id : 'null'; idNeedRadio = ($first) ? (tempName + '_' + $index + item.id) : '' "
 													/>

													<label for="{{tempName + '_' + $index + item.id}}">{{ itemModisValue.name }}
														<span ng-show="itemModisValue.price > 0">({{ itemModisValue.price| filterPrice | filterNumeric }} {{ Currency }})</span>
													</label>
													<!--<span ng-init="helpChange( needRadio, item.id, item.id, itemModis.id, modisSelect[item.id][itemModis.id] )"></span>-->
													<span ng-init="helpChange(needRadio, item.id, item.id, itemModis.id, idNeedRadio)"></span>
												</div>
<!--												<div ng-repeat="itemModisValue in itemModis.modi" ng-init="modisSelect[item.id][itemModis.id] = ''" > &lt;!&ndash; вот тут надо список модификаторов комбо &ndash;&gt;-->
<!--													<div ng-show="modisSelect[item.id][itemModis.id] == itemModisValue.id">-->
<!--														Дополнительные ингредиенты {{itemModisValue.name}}-->
<!--													</div>-->
<!--												</div>-->
												<hr>
 											</div>
										</div>
									</div>



									<div class="row" ng-if="item.modis.inputModis.length >= 1 && item.type == 'dish'"
										 ng-init="disabledDecSubProduct[item.id] = {};
										 disabledIncSubProduct[item.id] = {};
										 errorMinCount[item.id] = {}; ">
										<div class="col-xs-12">
											<div class="sub-title-wrapper">
												<p class="sub-title">{{getLocale('Additional ingredients')}}</p>
											</div>
										</div>
									</div>

									<div class="sub-products js-sub-products-input"
										 ng-if="item.type == 'dish'"
										 data-parent-modi="{{ itemModisInput.id }}"
										 data-min-value="{{ itemModisInput.downLimit }}"
										 ng-repeat="itemModisInput in item.modis.inputModis"
										 ng-class="{ 'min-group-val-error': errorMinCount[item.id][itemModisInput.id] }"
										 id="modi-group-{{itemModisInput.id}}">

										<div class="title-param-group">{{itemModisInput.name}}
											<span ng-if="itemModisInput.downLimit || itemModisInput.upLimit">
												({{getLocale('Number of ingredients required')}}:
												<span ng-if="itemModisInput.downLimit && itemModisInput.useDownLimit == 1">{{getLocale('from')}} {{ itemModisInput.downLimit }}</span>
												<span ng-if="itemModisInput.upLimit && itemModisInput.useUpLimit == 1"> {{getLocale('to')}} {{ itemModisInput.upLimit }}</span>)
											</span>
										</div>

										<div class="row row-item " ng-repeat="itemModisInputMini in itemModisInput.modi" ng-class="{ 'row-item-last': $last }">
											<div class="col-xs-5 mini-mobile-col mini-mobile-title"><p class="text">{{itemModisInputMini.name}}</p></div>
											<div class="col-xs-7 mini-mobile-col">
												<div class="row no-right-border">
													<div class="col-xs-3 text-center border-item">
														<p class="text">
															{{ priceSubProduct[item.id][itemModisInputMini.id] | filterPrice | filterNumeric }} {{ Currency }}
														</p>
													</div>
													<div class="col-xs-5 border-item wrapper-inc no-wrap"
															 ng-init="maxValueModi[item.id + itemModisInputMini.id] = (itemModisInputMini.maxOneDish == 0 ? 99 : itemModisInputMini.maxOneDish);
															 maxValueModiGroup[item.id + '_' + itemModisInputMini.id] = ((itemModisInput.useUpLimit == 1) ? itemModisInput.upLimit : 99)">

														<a class="button-inc js-button-inc"
														   	href="javascript:void(0);"
															data-max-group-count="{{ maxValueModiGroup[item.id  + '_' +  itemModisInputMini.id] }}"
															data-index="{{item.id}}"
															data-id-product="{{item.id}}"
															data-sub-product="{{itemModisInputMini.id}}"
															data-id-category=""
															data-id-parent="{{itemModisInput.id}}"
															data-type="dec"
														    ng-class="{ 'disabled': disabledDecSubProduct[item.id][itemModisInput.id] || countSubProduct[item.id][itemModisInputMini.id] <= 0 }"
														    change-count>-</a>
														<input type="text"
															max="{{ maxValueModi[item.id + itemModisInputMini.id] }}"
															min="0"
															class="input input-count"
															ng-model="countSubProduct[item.id][itemModisInputMini.id]"
															mask="99"
															restrict="reject"
															readonly />
														<!--ng-change="validValueChange(countProduct[item.id], 1, itemModisInputMini.maxOneDish, item.id, itemModisInputMini.id)"-->
														<!--ng-click="countInc($event, item.id, item.id, itemModisInputMini.id)"-->
														<a class="button-inc"
														   href="javascript:void(0);"
														   data-max-group-count="{{ maxValueModiGroup[item.id + '_' + itemModisInputMini.id] }}"
														   data-index="{{item.id}}"
														   data-id-product="{{item.id}}"
														   data-sub-product="{{itemModisInputMini.id}}"
														   data-id-category=""
														   data-id-parent="{{itemModisInput.id}}"
														   data-type="inc"
														   ng-class="{'disabled':  disabledIncSubProduct[item.id][itemModisInput.id] ||
																		   countSubProduct[item.id][itemModisInputMini.id] >=  maxValueModi[item.id + itemModisInputMini.id] ||
																		   countSubProduct[item.id][itemModisInputMini.id] >= maxValueModiGroup[item.id + '_' + itemModisInputMini.id]  }"
														   change-count>+</a>
													</div>
													<div class="col-xs-4 text-center border-item last-block">
														<p class="text">{{ countSubProduct[item.id][itemModisInputMini.id] * priceSubProduct[item.id][itemModisInputMini.id] | filterPrice | filterNumeric }} {{ Currency }}</p>
													</div>
												</div>
											</div>
										</div>

										<p class="error-adding" ng-show="errorMinCount[item.id][itemModisInput.id]">{{ getLocale('The minimum amount of modifier is not selected') }}: {{ itemModisInput.downLimit }}</p>
									</div>
								</div>
							</div>



							<div class="row footer-row hide-row" ng-if="(isModis[item.id] && item.type == 'dish') || item.type == 'combo'">
								<div class="col-sm-12 text-right ">
									<p class="error-adding" ng-show="errorAdding[item.id]">{{ getLocale('Not selected required modifiers') }}</p>

									<a class="btn button-to-cart" ng-click="toggleInfo(item.id)">{{getLocale('Cancel')}}</a>
									<a class="btn button-to-cart" product-to-cart data-id-product="{{item.id}}" data-type-product="{{item.type}}" data-category="{{currentCategory}}">{{getLocale('Add to cart')}}</a>
								</div>
							</div>
						</div>
					</div>
				</div>

				<!--ng-show="menuCurrentCategory.item.length > numPerPage"-->
 				<div class="col-xs-12 text-center" ng-show="numPerPage < totalItems">
					<pagination
						ng-model="currentPage"
						total-items="totalItems"
						items-per-page="numPerPage"
						boundary-links="true">
					</pagination>
				</div>
			</div>
		</div>

		<div class="b-message"  ng-class="{'show-message' : showMessage }">
			<div class="container">
				<div class="row">
					<div class="col-sm-10">
						<div class="message">{{getLocale('Added to cart')}}:  {{nameCurrentProduct}}</div>
					</div>
					<div class="col-sm-2">
						<a class="in-cart btn pull-right" ng-href="#/cart">{{getLocale('Go to shopping cart')}}</a>
					</div>
				</div>
			</div>
			<a class="fa fa-close icon-close hidden-xs" ng-click="hideInfo(true)" title="{{getLocale('Close')}}"></a>
		</div>
	</div>
</div>























