<div class="row-fluid">
	<h1>Product catalog</h1>
	<div class="col-md-12">
		<h3>Add a product</h3>
		<form
		class="form-inline"
		ng-submit="$ctrl.addProduct(productToAdd)"
		ng-init="productToAdd={};productToAdd.isVisibleInEnterpriseDashboardApp=false;productToAdd.isVisibleInAnnotationApp=true;">

			<div class="form-group">
				<input type="text" class="form-control col-md-3" placeholder="Brand name" ng-model="productToAdd.brandName"/>
				<input type="text" class="form-control col-md-3" placeholder="Product name" ng-model="productToAdd.productName"/>
				<input type="text" class="form-control" placeholder="Url of image" ng-model="productToAdd.imageUrl"/>
				<input
				type="checkbox"
				ng-model="productToAdd.isVisibleInEnterpriseDashboardApp"
				ng-click="productToAdd.isVisibleInEnterpriseDashboardApp=!productToAdd.isVisibleInEnterpriseDashboardApp"
				ng-checked="productToAdd.isVisibleInEnterpriseDashboardApp"
				class="checkbox"
				/> Visible in Enterprise Dashboard
				<input
					type="checkbox"
					ng-model="productToAdd.isVisibleInAnnotationApp"
					ng-click="productToAdd.isVisibleInAnnotationApp=!productToAdd.isVisibleInAnnotationApp"
					ng-checked="productToAdd.isVisibleInAnnotationApp"
					class="checkbox annotation-app-visibility-checkbox"/>
					Visible in Annotation App
				<input type="submit" value="Add product" class="btn btn-info">
			</div>

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






<div class="row-fluid">
	<div class="col-md-12">
		<uib-accordion >
			<!-- close-others="oneAtATime" -->
			<div uib-accordion-group is-open="productId2accordionStatus[product._id]" ng-repeat="product in $ctrl.products track by $index">
				<uib-accordion-heading ng-click="productId2accordionStatus[product._id]=!productId2accordionStatus[product._id]">
					{{product.brandName}} - {{product.productName}}
				</uib-accordion-heading>
				<div class="row-fluid" ng-if="productId2accordionStatus[product._id]">
					<div class="col-md-12">
						<div class="row">
							<div class="col-md-5">
								<input type="text" class="form-control input-brand-name" placeholder="Brand name" ng-model="$ctrl.tmpProducts[$index].brandName" ng-change="$ctrl.changeBrandName(product,$ctrl.tmpProducts[$index].brandName)" ng-model-options="{ debounce: 1000 }"/>
								<br>
								<input type="text" class="form-control input-product-name"  ng-model="$ctrl.tmpProducts[$index].productName" placeholder="Product Name" ng-change="$ctrl.changeProductName(product, $ctrl.tmpProducts[$index].productName,$index)" ng-model-options="{ debounce: 1000 }"/>
								<br>
								<input type="text" class="form-control input-image-url"  ng-model="$ctrl.tmpProducts[$index].imageUrl" placeholder="Product Image" ng-change="$ctrl.changeImageUrl(product, $ctrl.tmpProducts[$index].imageUrl)" ng-model-options="{ debounce: 1000 }">
								<!-- <h1>{{product.productName}}</h1> -->
							</div>
							<div class="col-md-4">
								<img ng-src="{{product.imageUrl}}" class="col-md-4"/>
							</div>
							<div class="col-md-3">
								<form ng-submit="$ctrl.addReviewTitle(product, newReviewTitle); newReviewTitle=''; ">
									<input type="text" class="form-control review-title-input" placeholder="Review Title" ng-model="newReviewTitle">
									<input type="submit" value="Add" class="btn btn-default review-title-add-btn">
								</form>
								<br>
								<!--<form ng-submit="$ctrl.addSkuByProductAndSku(product,sku)">
									<input type="text" class="form-control sku-input" placeholder="Add a new SKU" ng-model="sku">
									<input type="submit" value="Add SKU" class="btn btn-default sku-add-btn">
								</form>-->
								<!-- <button class="btn btn-default" ng-click="delete($index,product)">Delete</button> -->
							</div>
						</div>

						<!--<div class="row-fluid">
							<div class="col-md-12">
								<div>
									<span style="margin-right:10px;" class="label label-info label-sku" ng-repeat="sku in product.skus track by $index">
										{{sku}}&nbsp;
										<span style="cursor:pointer;" ng-click="$ctrl.removeSkuByProductAndSku(product, sku)">X</span>
									</span>
								</div>
							</div>
						</div>-->
						<!--<div class="row-fluid">
							<div class="col-md-12">
								<h4>Review titles</h4>
								<ul>
									<li ng-repeat="pair in product.reviewTitlesInfo track by $index">
										<select class="sku-select"
											ng-options = "sku as sku for sku in product.skus "
											ng-click = "oldSKU = pair.sku"
											ng-model = "pair.sku"
											ng-change = "$ctrl.changeSkuByProductAndSkuAndReviewTitle(product, pair.sku, pair.title, oldSKU)"></select>
										<span class="label-review-title">{{pair.title}}</span>
									</li>
								</ul>
							</div>
						</div>-->
						<div class="row-fluid">
							<div class="col-md-12">
								<h4>Review title</h4>
								<a class="btn btn-default" ui-sref="product-review-title-sku({ productId: product._id })" >Review title</a>
							</div>
						</div>
						<div class="row-fluid">
							<div class="col-md-12">
								<h4>Jobs</h4>
								<a class="btn btn-default" ui-sref="jobs.product({ productId: product._id })" >Product Jobs</a>
							</div>
						</div>
						<div class="row-fluid">
							<div class="col-md-12">
								<!-- <h4 ng-init="areInsightsCollapsed=true" ng-click="areInsightsCollapsed=!areInsightsCollapsed">Write insight here</h4>
								<div collapse="areInsightsCollapsed">
									<div  text-angular ng-init="insights=product.insights" ng-model="insights"  ta-toolbar-class="btn-toolbar" ta-toolbar-group-class="btn-group" ta-toolbar-button-class="btn btn-default" ta-toolbar-button-active-class="active"></div>
									<button class="btn" ng-click="saveInsights(product, insights)">Save insights</button>
								</div> -->
								<h4>Insights</h4>
								<a class="btn btn-default w-edit-insights" ui-sref="insights({ productId: product._id })" >Edit insights</a>
							</div>
						</div>
						<div class="row-fluid">
							<div class="col-md-12">
								<hr>
							</div>
						</div>
						<div class="row-fluid">
							<div class="col-md-6">
								<h4>Review</h4>
								Total number of reviews: <span class="reviews-number-total">{{product.totalNumberOfReviews}}</span>
								<br>
								Number of sampled reviews: <span class="reviews-number-sampled">{{product.numberOfSampledReviews}} </span>
								<br>
								Number of analyzed reviews: <span class="reviews-number-analyzed">{{product.numberOfAnalyzedReviews}} (published={{product.numberOfAnalyzedAndPublishedReviews}} reviews, unpublished={{product.numberOfAnalyzedAndUnpublishedReviews}} reviews)</span>
								<br>
								<button class="btn btn-default btn-update-number-of-reviews" ng-click="$ctrl.updateNumberOfReviews(product)">Update number of reviews</button>
							</div>
							<div class="col-md-6">
								<!-- <h4>Review</h4>
								Total number of reviews: <span class="reviews-number-total">{{product.totalNumberOfReviews}}</span>
								<br>
								Number of sampled reviews: <span class="reviews-number-sampled">{{product.numberOfSampledReviews}} </span>
								<br>
								Number of analyzed reviews: <span class="reviews-number-analyzed">{{product.numberOfAnalyzedReviews}} (published={{product.numberOfAnalyzedAndPublishedReviews}} reviews, unpublished={{product.numberOfAnalyzedAndUnpublishedReviews}} reviews)</span>
								<br> -->
								<button class="btn btn-default w-publish-analyzed-and-unpublished-reviews" ng-click="$ctrl.publishAllAnalyzedAndUnpublishedReviews(product)">Publish all unpublished reviews</button>
							</div>
						</div>
						<div class="row-fluid">
							<div class="col-md-12">
								<hr>
							</div>
						</div>
						<div class="row-fluid">
							<div class="col-md-12">
								<h4>Price range</h4>
								<form ng-submit="$ctrl.updatePriceRange(product,$ctrl.tmpProducts[$index].priceRange.min,$ctrl.tmpProducts[$index].priceRange.max)" class="form-inline">
									<input type="text" class="form-control price-range-min-input" placeholder="Min" ng-model="$ctrl.tmpProducts[$index].priceRange.min"/>
									<input type="text" class="form-control price-range-max-input" placeholder="Max" ng-model="$ctrl.tmpProducts[$index].priceRange.max"/>
									<button class="btn btn-default price-range-update-btn" type="submit">Update</button>
								</form>
							</div>
						</div>
						<div class="row-fluid">
							<div class="col-md-12">
								<h4>Channels</h4>
								<span ng-repeat="channel in product.channels track by $index" class="label label-default label-channel" style="margin-right:10px;">{{channel||'no value'}}</span>
								<button class="btn btn-default update-channel-btn" ng-click="$ctrl.updateChannels(product)">Update channels</button>
							</div>
						</div>
						<div class="row-fluid">
							<div class="col-md-12">
								<h4>Countries</h4>
								<span ng-repeat="country in product.countries track by $index" class="label label-default label-country" style="margin-right:10px;">
									{{country||'no value'}}
									<i class="glyphicon glyphicon-remove clickable" ng-click="$ctrl.removeCountryFromProduct(country, product)"></i>
								</span>
								<br>
								<input type="text" class="country-input" ng-model="newCountry"/>
								<button class="btn btn-default country-add-btn" ng-click="$ctrl.addCountryToProduct(newCountry, product)">Add country</button>
							</div>
						</div>
						<div class="row-fluid">
							<div class="col-md-12">
								<h4>Min and max date</h4>
								<span class="label label-default min-date" style="margin-right:10px;">Min date:{{(product.minDate|date:format:'dd-MMMM-yyyy')||'no date'}}</span>
								<span class="label label-default max-date" style="margin-right:10px;">Max date:{{(product.maxDate|date:format:'dd-MMMM-yyyy')||'no date'}}</span>
								<button class="btn btn-default min-max-date-updating-button" ng-click="$ctrl.updateMinAndMaxDate(product)">Update min and max date</button>
							</div>
						</div>
						<div class="row-fluid">
							<div class="col-md-12">
								<h4>Visibility</h4>
								<input type="checkbox"
								ng-model="$ctrl.tmpProducts[$index].isVisibleInEnterpriseDashboardApp"
								ng-checked="$ctrl.tmpProducts[$index].isVisibleInEnterpriseDashboardApp"
								ng-click="$ctrl.toggleVisibilityInEnterpriseDashboardApp(product)"
								class=" wonderboard-visibility-checkbox"
								>
								&nbsp; Visible in EnterpriseDashboard
								<input type="checkbox"
								ng-model="$ctrl.tmpProducts[$index].isVisibleInAnnotationApp"
								ng-checked="$ctrl.tmpProducts[$index].isVisibleInAnnotationApp"
								ng-click="$ctrl.toggleVisibilityInAnnotationApp(product)"
								class=" annotation-app-visibility-checkbox"
								> &nbsp;
								Visible in AnnotationApp

							</div>
						</div>
						<div class="row-fluid">
							<div class="col-md-12">
								<h4>Company visibility</h4>
								<span style="display: block;float: left;margin-right: 10px;margin-bottom: 10px;" class="label label-info label-company-id" ng-repeat="companyId in product.companyIds track by $index">{{companyId}}</span>
								<form ng-submit="$ctrl.addCompanyId(product, companyIdToAdd); companyIdToAdd=''; " class="form-inline">
									<!-- <div class="form-group"> -->
									<input type="text" class="form-control company-id-input" ng-model="companyIdToAdd" placeholder="Company Id" />
									<button class="btn btn-default company-id-add-btn" type="submit">Add company-id</button>
									<!-- </div> -->
								</form>
							</div>
						</div>
						<div class="row-fluid">
							<div class="col-md-12">
								<h4>Avg rating</h4>
								<span class="avg-rating">{{product.avgRating}}</span>
								<!-- <button class="btn btn-default" ng-click="updateAverageRating(product)">Update avg rating based on sampled reviews</button> -->
								<button class="btn btn-default avg-rating-updating-button" ng-click="$ctrl.updateAverageRating(product,true)">Update avg rating based on the whole set of reviews</button>
							</div>
						</div>
						<div class="row-fluid">
							<div class="col-md-12">
								<h4>Languages</h4>
								<span style="margin-right:10px;" class="label label-info language" ng-repeat="lang in product.languages track by $index">{{lang}}</span>
								<button class="btn btn-default languages-updating-button" ng-click="$ctrl.updateLanguages(product)">Update languages</button>
							</div>
						</div>
						<div class="row-fluid">
							<div class="col-md-12">
								<h4>Price Category</h4>
								<select class="price-category-select" ng-options="newPriceCategory as newPriceCategory for newPriceCategory in  ['High End', 'Mid End','Low End']" ng-model="$ctrl.tmpProducts[$index].priceCategory" ng-change="$ctrl.changePriceCategory(product,$ctrl.tmpProducts[$index].priceCategory)"></select>
							</div>
						</div>
						<div class="row-fluid">
							<div class="col-md-12">
								<!-- <ng-include src=" 'views/catalog/partials/assign-reviews.html' "></ng-include> -->
								<ng-include src=" './components/assign-reviews/assign-reviews.html' "></ng-include>
								<!-- <ng-include src=" './components/product-delivery/product-analysis-metadata.html' " onload=" product=product; tmpProducts=tmpProducts; $index=$index;"></ng-include> -->
								<!-- <ng-include src=" './components/product-delivery/product-analysis-metadata.html' "></ng-include> -->
								<badge-setup product="product" tmp-products="$ctrl.tmpProducts" index="$index"></badge-setup>


							</div>
						</div>
						<div class="row-fluid">
							<div class="col-md-12">
								Delivery:
								<select ng-init="newDelivery=product.deliveryDate" ng-options="newDelivery as newDelivery for newDelivery in ['Pilot','Pilot - Home Appliances','March 2015','April 2015','May 2015','June 2015','Pilot KLM']" ng-model="newDelivery" ng-change="$ctrl.changeDeliveryDate(product,newDelivery)"></select>
							</div>
							<div class="col-md-12">
								Product Category:
								<select  ng-options="newCategory as newCategory for newCategory in $ctrl.categories " ng-model="$ctrl.tmpProducts[$index].category" ng-change="$ctrl.changeProductCategory(product,$ctrl.tmpProducts[$index].category)" class="product-category-select"></select>
							</div>
						</div>

						<!-- <ng-include src=""></ng-include> -->

						<!--<div ng-include="'views/catalog/partials/product-analysis-metadata.html'"></div>-->

					</div>
				</div>
			</div>
		</uib-accordion>
	</div>
	<button class="btn" ng-click="$ctrl.nextPage()" ng-show="$ctrl.areThereMoreProducts" style="margin-top:30px;">
		<span ng-show="!isLoadingNewPage">More products</span>
		<span ng-show="isLoadingNewPage">Loading</span>
	</button>
</div>
