<div class="top-pad"></div>

<div class="content-padding" ng-show="ready">

	<h1 class="title left"><i class="fa fa-minus-circle"></i><span>Discount Code</span></h1>

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

	<form name="form" novalidate>

		<div class="support-box-wrap box-content2">

			<div class="support-box-wrap-header">
				<h1>Edit</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.code.$invalid}">
						<div class="label">Code:</div>
						<div class="input"><input type="text" name="code" ng-model="promo.code" required placeholder="Code" ng-minlength="5" ng-maxlength="255" ></div>
						<div class="box-error">
							<small ng-show="form.code.$error.required">Required.</small>
							<small ng-show="form.code.$error.minlength">Code is too short. Code is required to be at least 5 characters.</small>
							<small ng-show="form.code.$error.maxlength">Code cannot be longer than 255 characters.</small>
						</div>
					</li>

					<li class="li-input" ng-class="{'error':form.delivery_fee.$invalid}">
						<label class="switch-wrap">
							<input type="checkbox" class="switch" ng-model="promo.delivery_fee"/><div></div>
						</label>
						<div class="label">Pay Delivery Fee:</div>
					</li>

					<li class="li-input" ng-class="{'error':form.value.$invalid}" ng-show="!promo.delivery_fee">
						<div class="label">Value:</div>
						<div class="input"><input step="any" type="number" ng-required="!promo.delivery_fee" name="value" ng-model="promo.value" required ignore-mouse-wheel placeholder=""></div>
						<div class="box-error">
							<small ng-show="form.value.$error.required">Required.</small>
						</div>
					</li>

					<li class="li-input" ng-class="{'error':form.rangeStart.$invalid}">
						<div class="label">Date start:</div>
						<div class="input"><input type="date" name="rangeStart" ng-model="date_start" required placeholder=""></div>
						<div class="box-error">
							<small ng-show="form.rangeStart.$error.required">Required.</small>
							<small ng-show="form.rangeStart.$error.date">Enter a valid start date!</small>
						</div>
					</li>

					<li class="li-input" ng-class="{'error':form.rangeEnd.$invalid}">
						<div class="label">Date end:</div>
						<div class="input"><input type="date" name="rangeEnd" ng-model="date_end" required placeholder=""></div>
						<div class="box-error">
							<small ng-show="form.rangeEnd.$error.required">Required.</small>
							<small ng-show="form.rangeEnd.$error.date">Enter a valid end date!</small>
						</div>
					</li>

					<li class="li-input" ng-class="{'error':form.all.$invalid}">
						<label class="switch-wrap">
							<input type="checkbox" class="switch" ng-model="promo.all"/><div></div>
						</label>
						<div class="label">All Communities:</div>
						<div class="box-error">
							<small ng-show="form.all.$error.required">Required.</small>
						</div>
					</li>

					<li class="li-input" ng-show="!promo.all">
						<div class="label">Communities:</div>
						<div class="input">

							<ui-select ng-model="promo.id_community" theme="select2" ng-disabled="disabled" 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>

						</div>
					</li>

					<li class="li-input" ng-class="{'error':form.usable_by.$invalid}">
						<div class="label">Users:</div>
						<div class="input">
							<select name="usable_by" required ng-model="promo.usable_by" ng-options="opt.value as opt.label for opt in usableBy" ></select>
						</div>
						<div class="box-error">
							<small ng-show="form.usable_by.$error.required">Required.</small>
						</div>
					</li>

					<li class="li-input" ng-class="{'error':form.paid_by.$invalid}">
						<div class="label">Paid by:</div>
						<div class="input">
							<select name="paid_by" required ng-model="promo.paid_by" ng-options="opt.value as opt.label for opt in paidBy" ></select>
						</div>
						<div class="box-error">
							<small ng-show="form.paid_by.$error.required">Required.</small>
						</div>
					</li>

					<li class="li-input" ng-class="{'error':form.active.$invalid}">
						<label class="switch-wrap">
							<input type="checkbox" class="switch" ng-model="promo.active"/><div></div>
						</label>
						<div class="label">Active:</div>
						<div class="box-error">
							<small ng-show="form.active.$error.required">Required.</small>
						</div>
					</li>
					<li class="li-input" ng-show="!isSaving">
						<button class="button save" ng-click="save();">Save</button>

					</li>
					<li class="li-input" ng-show="isSaving">
						<i class="fa fa-circle-o-notch fa-spin"></i>
					</li>
				</ul>
			</div>
		</div>
	</form>


	<br><br><br>

</div>

<spinner-loading></spinner-loading>
<hack-expand-content></hack-expand-content>