<div ng-controller="RestaurantEditBasicCtrl">
	<div class="tab-content">

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

			<div class="support-boxes">

				<div class="support-box-wrap box-content2">
					<div class="support-box-wrap-header">
						<h1>Basic Info</h1>
						<div class="divider"></div>
					</div>

					<div class="no-box-content-color">

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

							<li class="li-input" ng-class="{'error':form.restaurantName.$invalid}">
								<div class="label">Name:</div>
								<div class="input"><input type="text" name="restaurantName" ng-model="restaurant.name" required placeholder="Name"></div>
								<div class="box-error">
									<small ng-show="form.restaurantName.$error.required">Required.</small>
								</div>
								<div class="notes">Displayed to customers and the restaurant.</div>
							</li>

							<li class="li-input" ng-class="{'error':form.restaurantShortDescription.$invalid}">
								<div class="label">Text under Restaurant Name on Choose Restaurant Page:</div>
								<div class="input"><input type="text" name="restaurantShortDescription" ng-model="restaurant.short_description" maxlength="45" required></div>
								<div class="box-error">
									<small ng-show="form.restaurantShortDescription.$error.required">Required.</small>
								</div>
								<div class="notes">
									Choose something funny, awesome, and cool, but descriptive like “delicious chijapanesethai in yo mouth" or "chicken tikka delicious". Text size limit 45 chars.
								</div>
							</li>

							<li class="li-input" ng-class="{'error':form.restaurantMessage.$invalid}">
								<div class="label">Text under Restaurant Name on Restaurant Checkout Page:</div>
								<div class="input"><input type="text" name="restaurantMessage" ng-model="restaurant.message" maxlength="250"></div>
								<div class="box-error">
									<small ng-show="form.restaurantMessage.$error.required">Required.</small>
								</div>
								<div class="notes">
									Write something that’s different from the text on Choose Restaurant page AND that works well with the restaurant’s menu.
								</div>
							</li>

							<li class="li-input" ng-class="{'error':form.restaurantPermalink.$invalid}">
								<div class="label">Permalink:</div>
								<div class="input"><input type="text" permalink-validation ng-model="restaurant._permalink" name="restaurantPermalink" ng-model="restaurant._permalink" required placeholder="Permalink"></div>
								<div class="box-error">
									<small ng-show="form.restaurantPermalink.$error.required">Required.</small>
									<small ng-show="form.restaurantPermalink.$error.permalinkValidation">Use lowercase letters, numbers and dashes.</small>
								</div>
								<div class="notes">crunchbutton.com/food-delivery/<strong>whateveryouwritehere</strong></div>
							</li>

							<li class="li-input" ng-class="{'error':form.restaurantForceCloseTagline.$invalid}">
								<div class="label">Force close tagline:</div>
								<div class="input"><input type="text" name="restaurantForceCloseTagline" ng-model="restaurant.force_close_tagline" maxlength="45"></div>
								<div class="notes">
									Tagline will be shown when you force close a restaurant. Text size limit 45 chars.
								</div>
							</li>


							<li class="li-input" ng-class="{'error':form.formalRelationship.$invalid}">
								<div class="label">Formal billing relationship?</div>
								<div class="input">
									<select name="formalRelationship" required ng-model="restaurant.formal_relationship" ng-options="opt.value as opt.label for opt in yesNo" ></select>
								</div>
								<div class="box-error">
									<small ng-show="form.formalRelationship.$error.required">Required.</small>
								</div>
								<div class="notes">
									e.g. if a rep is doing delivery from McDonald’s but has no formal relationship with them, select “no”".
								</div>
							</li>

							<li class="li-input" ng-class="{'error':form.restaurantActive.$invalid}">
								<div class="label">Is Active:</div>
								<div class="input">
									<select name="restaurantActive" required ng-model="restaurant.active" ng-options="opt.value as opt.label for opt in yesNo" ></select>
								</div>
								<div class="box-error">
									<small ng-show="form.restaurantActive.$error.required">Required.</small>
								</div>
								<div class="notes">
									Listed on choose restaurant page. Leave inactive you place a “Test Order” and call the restaurant to tell them they’re active.
								</div>
							</li>

							<li class="li-input" ng-class="{'error':form.restaurantOpenForBusiness.$invalid}">
								<div class="label">Is It Accepting Orders?</div>
								<div class="input">
									<select name="restaurantOpenForBusiness" required ng-model="restaurant.open_for_business" ng-options="opt.value as opt.label for opt in yesNo" ></select>
								</div>
								<div class="box-error">
									<small ng-show="form.restaurantOpenForBusiness.$error.required">Required.</small>
								</div>
								<div class="notes">
									Close on snowdays, etc.
								</div>
							</li>

							<li class="li-input" ng-class="{'error':form.restaurantActiveOrderPlacement.$invalid}">
								<div class="label">Make active for the restaurant to input orders by themselves into our system?</div>
								<div class="input">
									<select name="restaurantActiveOrderPlacement" required ng-model="restaurant.active_restaurant_order_placement" ng-options="opt.value as opt.label for opt in yesNo" ></select>
								</div>
								<div class="box-error">
									<small ng-show="form.restaurantActiveOrderPlacement.$error.required">Required.</small>
								</div>
								<div class="notes">
									(cockpit.la)
								</div>
							</li>

							<li class="li-input" ng-class="{'error':form.restaurantShowWhenClosed.$invalid}">
								<div class="label">Display on Choose Restaurant Page When Closed?</div>
								<div class="input">
									<select name="restaurantShowWhenClosed" required ng-model="restaurant.show_when_closed" ng-options="opt.value as opt.label for opt in yesNo" ></select>
								</div>
								<div class="box-error">
									<small ng-show="form.restaurantShowWhenClosed.$error.required">Required.</small>
								</div>
							</li>

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

				<div class="support-box-wrap box-content2">
					<div class="support-box-wrap-header">
						<h1>Location / Contact</h1>
						<div class="divider"></div>
					</div>

					<div class="no-box-content-color">

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

							<li class="li-input" ng-class="{'error':form.restaurantPhone.$invalid}">
								<div class="label">Phone:</div>
								<div class="input"><input type="text" name="restaurantPhone" ng-model="restaurant.phone" required></div>
								<div class="box-error">
									<small ng-show="form.restaurantPhone.$error.required">Required.</small>
								</div>
								<div class="notes">Publicly listed</div>
							</li>

							<li class="li-input">
								<div class="label">Community:</div>
								<ui-select ng-model="restaurant.id_community" theme="select2" close-on-select="true" style="width: 200px;" title="Select a community">
									<ui-select-match placeholder="Select a community">{{$select.selected.name}}</ui-select-match>
									<ui-select-choices repeat="community.id_community as community in communities | propsFilter: {name: $select.search}">
										{{community.name}}
									</ui-select-choices>
								</ui-select>
							</li>

							<li class="li-input">
								<div class="label">Chain:</div>
								<div class="input">
									<select name="restaurantCommunityChain" ng-model="restaurant.id_community_chain" ng-options="chain.id_community_chain as chain.name for chain in chains"></select>
								</div>
								<div class="notes">Only select this, if this restaurant is a chain</div>
							</li>


							<li class="li-input" ng-class="{'error':form.restaurantTimezone.$invalid}">
								<div class="label">Timezone Where the Restaurant Is</div>
								<div class="input">
									<select name="restaurantTimezone" required ng-model="restaurant.timezone" ng-options="opt.value as opt.label for opt in timezones" ></select>
								</div>
								<div class="box-error">
									<small ng-show="form.restaurantTimezone.$error.required">Required.</small>
								</div>
								<div class="notes">
									If you screw this up, you will die
								</div>
							</li>

							<li class="li-input" ng-class="{'error':form.restaurantAddress.$invalid}">
								<div class="label">Address:</div>
								<div class="input">
									<textarea ng-model="restaurant.address" restaurant-address required></textarea>
								</div>
								<div class="box-error">
									<small ng-show="form.restaurantAddress.$error.required">Required.</small>
								</div>
								<div class="notes">
									For delivery radius and pickup.
								</div>
							</li>

							<li class="li-input" ng-class="{'error':form.restaurantLatitude.$invalid}">
								<div class="label">Latitude:</div>
								<div class="input"><input type="text" readonly="readonly" name="restaurantLatitude" ng-model="restaurant.loc_lat" required></div>
								<div class="box-error">
									<small ng-show="form.restaurantLatitude.$error.required">Required.</small>
								</div>
								<div class="notes">Automagically calculated.</div>
							</li>

							<li class="li-input" ng-class="{'error':form.restaurantLongitude.$invalid}">
								<div class="label">Longitude:</div>
								<div class="input"><input type="text" readonly="readonly" name="restaurantLongitude" ng-model="restaurant.loc_long" required></div>
								<div class="box-error">
									<small ng-show="form.restaurantLongitude.$error.required">Required.</small>
								</div>
								<div class="notes">Automagically calculated.</div>
							</li>
							<!--
<li class="li-input" ng-class="{'error':form.restaurantHowFarFromCommunity.$invalid}">
<div class="label">How far from community:</div>
<div class="input"><input type="text" readonly="readonly" name="restaurantHowFarFromCommunity" ng-model="restaurant.how_far"></div>
<div class="box-error">
<small ng-show="form.restaurantHowFarFromCommunity.$error.required">Required.</small>
</div>
<div class="notes">Automagically calculated.</div>
</li>
-->
						</ul>

					</div>

				</div>


				<div class="support-box-wrap box-content2">
					<div class="support-box-wrap-header">
						<h1>Preview</h1>
						<div class="divider"></div>
					</div>
					<div class="no-box-content-color">
						<div class="restaurant-preview">
							<div class="restaurants-item">
								<div class="restaurants-open">
									<div class="restaurants-item-content">
										<div class="restaurants-pic" style="background-image: url({{restaurant.image.normal}});"></div>
										<h2 class="restaurants-name">{{restaurant.name}}</h2>
										<h3 class="restaurants-description">{{restaurant.short_description}}</h3>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="support-box-wrap box-content2">
					<div class="support-box-wrap-header">
						<h1>Transactions / Taxes</h1>
						<div class="divider"></div>
					</div>

					<div class="no-box-content-color">

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

							<li class="li-input" ng-class="{'error':form.restaurantCash.$invalid}">
								<div class="label">Cash</div>
								<div class="input">
									<select name="restaurantCash" required ng-model="restaurant.cash" ng-options="opt.value as opt.label for opt in yesNo" ></select>
								</div>
								<div class="box-error">
									<small ng-show="form.restaurantCash.$error.required">Required.</small>
								</div>
							</li>

							<li class="li-input" ng-class="{'error':form.restaurantCredit.$invalid}">
								<div class="label">Credit</div>
								<div class="input">
									<select name="restaurantCredit" required ng-model="restaurant.credit" ng-options="opt.value as opt.label for opt in yesNo" ></select>
								</div>
								<div class="box-error">
									<small ng-show="form.restaurantCash.$error.required">Required.</small>
								</div>
							</li>

							<li class="li-input" ng-class="{'error':form.restaurantCampusCash.$invalid}">
								<div class="label">Campus Cash</div>
								<div class="input">
									<select name="restaurantCampusCash" required ng-model="restaurant.campus_cash" ng-options="opt.value as opt.label for opt in yesNo" ></select>
								</div>
								<div class="box-error">
									<small ng-show="form.restaurantCampusCash.$error.required">Required.</small>
								</div>
							</li>

							<li class="li-input" ng-class="{'error':form.restaurantGiftCard.$invalid}">
								<div class="label">Gift card</div>
								<div class="input">
									<select name="restaurantGiftCard" required ng-model="restaurant.giftcard" ng-options="opt.value as opt.label for opt in yesNo" ></select>
								</div>
								<div class="box-error">
									<small ng-show="form.restaurantCash.$error.required">Required.</small>
								</div>
							</li>

							<li class="li-input" ng-class="{'error':form.restaurantFeeOnSubtotal.$invalid}">
								<div class="label">Fee on Subtotal Only?</div>
								<div class="input">
									<select name="restaurantFeeOnSubtotal" required ng-model="restaurant.fee_on_subtotal" ng-options="opt.value as opt.label for opt in yesNo" ></select>
								</div>
								<div class="box-error">
									<small ng-show="form.restaurantCash.$error.required">Required.</small>
								</div>
							</li>

							<li class="li-input">
								<div class="label">Restaurant fee</div>
								<div class="input"><input type="number" name="restaurantFee" ng-model="restaurant.fee_restaurant" ignore-mouse-wheel></div>
								<div class="notes">Percent (%)</div>
							</li>

							<li class="li-input">
								<div class="label">Customer fee</div>
								<div class="input"><input type="number" name="restaurantCustomerFee" ng-model="restaurant.fee_customer" ignore-mouse-wheel></div>
								<div class="notes">always leave 0</div>
							</li>

							<li class="li-input" ng-class="{'error':form.restaurantTax.$invalid}">
								<div class="label">Tax charged</div>
								<div class="input"><input type="number" step="any" required name="restaurantTax" ng-model="restaurant.tax" ignore-mouse-wheel></div>
								<div class="box-error">
									<small ng-show="form.restaurantTax.$error.required">Required.</small>
								</div>
								<div class="notes">Percent (%)</div>
							</li>

							<li class="li-input" ng-class="{'error':form.restaurantServiceFee.$invalid}">
								<div class="label">Service Fee</div>
								<div class="input"><input type="number" step="any" name="restaurantServiceFee" ng-model="restaurant.service_fee" ignore-mouse-wheel></div>
								<div class="notes">Percent (%)</div>
							</li>



						</ul>

					</div>

				</div>

			</div>

		</form>

	</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>
